烟花爆竹实名登记前端
祖安之光
2026-03-17 6c65174e5f12e1b984e5f3d67c7d90b9d0417656
src/views/monitorAlert/warningInfo/index.vue
@@ -8,40 +8,75 @@
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="validTime"
                        type="daterange"
                        :default-time="['00:00:00','23:59:59']"
                        :default-time="['00:00:00', '23:59:59']"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </div>
                <div class="basic_search" style="margin-right: 10px;padding-top: 10px">
                <div
                    class="basic_search"
                    style="margin-right: 10px;padding-top: 10px"
                >
                    <span>状态:</span>
                    <el-select v-model="listQuery.filter.alarmStatus" clearable filterable>
                    <el-select
                        v-model="listQuery.filter.alarmStatus"
                        clearable
                        filterable
                    >
                        <el-option key="0" label="全部" value=""></el-option>
                        <el-option key="1" label="未销警" :value="0"></el-option>
                        <el-option key="2" label="已销警" :value="1"></el-option>
                        <el-option
                            key="1"
                            label="未销警"
                            :value="0"
                        ></el-option>
                        <el-option
                            key="2"
                            label="已销警"
                            :value="1"
                        ></el-option>
                    </el-select>
                </div>
                <div class="basic_search" style="margin-right: 10px;padding-top: 10px">
                <div
                    class="basic_search"
                    style="margin-right: 10px;padding-top: 10px"
                >
                    <span>报警类型:</span>
                    <el-select v-model="listQuery.filter.alarmType" clearable filterable>
                        <el-option key="1" label="超员作业" :value="1"></el-option>
                        <el-option key="2" label="堵塞通道" :value="2"></el-option>
                        <el-option key="3" label="超高超量" :value="3"></el-option>
                        <el-option key="4" label="非法入侵" :value="4"></el-option>
                        <el-option key="5" label="摄像头遮挡偏移" :value="5"></el-option>
                        <el-option key="6" label="温度" :value="6"></el-option>
                        <el-option key="7" label="湿度" :value="7"></el-option>
                    <el-select
                        v-model="listQuery.filter.algoModel"
                        clearable
                        filterable
                    >
                        <el-option
                            v-for="(item, index) in typeList"
                            :key="index"
                            :label="item.name"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="basic_search">
                    <span>企业名称:</span>
                    <el-input v-model.trim="listQuery.filter.companyName" style="width: 300px"/>
                    <el-input
                        v-model.trim="listQuery.filter.companyName"
                        style="width: 300px"
                    />
                </div>
                <div class="basic_search" style="margin-right: 10px">
                    <el-button style="margin-left: 10px;" type="primary" @click="reset()">重置</el-button>
                    <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                    <el-button
                        style="margin-left: 10px;"
                        type="primary"
                        @click="reset()"
                        >重置</el-button
                    >
                    <el-button
                        style="margin-left: 10px;"
                        type="primary"
                        icon="el-icon-search"
                        @click="search()"
                        >查询</el-button
                    >
                </div>
            </div>
        </div>
@@ -54,37 +89,79 @@
                highlight-current-row
                style="width: 100%;"
            >
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column label="企业" prop="companyName" align="center"></el-table-column>
                <el-table-column label="仓库" prop="storeName" align="center"></el-table-column>
                <el-table-column label="库房" prop="storeroomName" align="center"></el-table-column>
                <el-table-column label="报警类型" prop="alarmType" align="center">
                <el-table-column
                    label="序号"
                    type="index"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="企业"
                    prop="companyName"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="仓库"
                    prop="storeName"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="库房"
                    prop="storeroomName"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="报警类型"
                    prop="algoModel"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{getTypeName(scope.row.alarmType)}}
                        {{ getTypeName(scope.row.algoModel) }}
                    </template>
                </el-table-column>
                <el-table-column label="报警状态" prop="alarmStatus" align="center">
                <el-table-column
                    label="报警状态"
                    prop="alarmStatus"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.alarmStatus == 1?'已销警':'未销警' }}
                        {{ scope.row.alarmStatus == 1 ? "已销警" : "未销警" }}
                    </template>
                </el-table-column>
                <el-table-column label="报警图片" prop="alarmFile" align="center">
                <el-table-column
                    label="报警图片"
                    prop="alarmFile"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :preview-src-list="[scope.row.alarmFile]" :src="scope.row.alarmFile" fit="cover"></el-image>
                        <el-image v-if="scope.row.alarmFile"
                            style="width: 100px; height: 100px"
                            :preview-src-list="[scope.row.alarmFile]"
                            :src="scope.row.alarmFile"
                            fit="cover"
                        ></el-image>
                        <span v-else>未传图片</span>
                    </template>
                </el-table-column>
                <el-table-column label="报警时间" prop="warningDate" align="center"></el-table-column>
                <el-table-column label="销警时间" prop="clearDate" align="center"></el-table-column>
<!--                <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button type="text" @click="clearWarning(scope.row.id)">销警</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                    label="报警时间"
                    prop="warningDate"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="销警时间"
                    prop="clearDate"
                    align="center"
                ></el-table-column>
                <!--                <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <el-button type="text" @click="clearWarning(scope.row.id)">销警</el-button>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
            </el-table>
            <br>
            <br />
            <div style="display: flex;justify-content: right">
                <el-pagination
                    v-show="recordTotal>0"
                    v-show="recordTotal > 0"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="listQuery.pageSize"
@@ -101,160 +178,166 @@
</template>
<script>
import {computePageCount} from "../../../utils";
import {regionPifaBox} from "../../../api/stock"
import warningInfoDialog from "./components/warningInfoDialog"
import {editAlarmInfo, getOriginalAlarm, getOriginalPerson} from "../../../api/monitorAlert";
import { computePageCount } from "../../../utils";
import { regionPifaBox } from "../../../api/stock";
import warningInfoDialog from "./components/warningInfoDialog";
import {
    editAlarmInfo,
    getOriginalAlarm,
    getOriginalPerson
} from "../../../api/monitorAlert";
export default {
    name: "warningInfo",
    components: { warningInfoDialog },
    data() {
        return {
            tableKey: '',
            tableKey: "",
            recordTotal: 0,
            currentPage: 1,
            validTime: [],
            dataList: [],
            listQuery: {
                filter:{
                    alarmStartTime: '',
                    alarmEndTime: '',
                filter: {
                    alarmStartTime: "",
                    alarmEndTime: "",
                    alarmStatus: null,
                    companyCode: '',
                    companyName: '',
                    alarmType: null
                    companyCode: "",
                    companyName: "",
                    algoModel: ""
                },
                pageIndex:1,
                pageSize:10
                pageIndex: 1,
                pageSize: 10
            },
            typeList: [
                {
                    name: '超员作业',
                    value: 1
                    name: "吸烟检测",
                    value: "SmokingAlarm"
                },
                {
                    name: '堵塞通道',
                    value: 2
                    name: "逃生通道堵塞",
                    value: "ChannelBlockageDetection"
                },
                {
                    name: '超高超量',
                    value: 3
                    name: "区域入侵",
                    value: "FieldDetectorObjectsInside"
                },
                {
                    name: '非法入侵',
                    value: 4
                    name: "人员数量超限",
                    value: "CrowdDensityCriticalAlarm"
                },
                {
                    name: '摄像头遮挡偏移',
                    value: 5
                    name: "明火检测",
                    value: "firedetection"
                },
                {
                    name: '温度',
                    value: 6
                },
                {
                    name: '湿度',
                    value: 7
                    name: "预置标记检测",
                    value: "PresetMarkerDetection"
                }
            ]
        }
        };
    },
    created() {
        this.getDataList()
        this.getDataList();
    },
    mounted() {
    },
    mounted() {},
    watch: {},
    methods: {
        openDialog(type,data){
            this.$refs.warningInfoRef.open(type,data)
        openDialog(type, data) {
            this.$refs.warningInfoRef.open(type, data);
        },
        clearWarning(id){
            this.$confirm('确定执行销警操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                let res = await editAlarmInfo({id: id})
                if (res.data.code === "200") {
        clearWarning(id) {
            this.$confirm("确定执行销警操作?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    let res = await editAlarmInfo({ id: id });
                    if (res.data.code === "200") {
                        this.$message({
                            type: "success",
                            message: res.data.message
                        });
                    } else {
                        this.$message({
                            type: "warning",
                            message: res.data.message
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'success',
                        message: res.data.message
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: res.data.message
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                        type: "info",
                        message: "已取消"
                    });
                });
            });
        },
        getTypeName(type){
            return this.typeList.find(i=>i.value == type).name
        getTypeName(type) {
            const node = this.typeList.find(i => i.value == type);
            if (node) {
                return node.name;
            } else {
                return "";
            }
        },
        async getDataList() {
            if(this.validTime.length>0){
                this.listQuery.filter.alarmStartTime = this.validTime[0]
                this.listQuery.filter.alarmEndTime = this.validTime[1]
            if (this.validTime.length > 0) {
                this.listQuery.filter.alarmStartTime = this.validTime[0];
                this.listQuery.filter.alarmEndTime = this.validTime[1];
            }
            let res = await getOriginalAlarm(this.listQuery)
            let res = await getOriginalAlarm(this.listQuery);
            if (res.data.code === "200") {
                const data = res.data.result
                if(Array.isArray(data.records)){
                const data = res.data.result;
                if (Array.isArray(data.records)) {
                    this.dataList = data.records.map(item => {
                      return {
                        ...item,
                        alarmFile: process.env.IMG_API + item.alarmFile
                      }
                    })
                    this.recordTotal = data.total
                    this.currentPage = data.current
                }else{
                    this.dataList = []
                        return {
                            ...item,
                            alarmFile: item.alarmFile?process.env.IMG_API + item.alarmFile:null
                        };
                    });
                    this.recordTotal = data.total;
                    this.currentPage = data.current;
                } else {
                    this.dataList = [];
                }
            } else {
                this.$message({
                    type: 'warning',
                    type: "warning",
                    message: res.data.message
                })
                });
            }
        },
        handleSizeChange: function(val) {
            this.listQuery.pageSize = val
            this.getDataList()
            this.listQuery.pageSize = val;
            this.getDataList();
        },
        handleCurrentChange: function(val) {
            this.listQuery.pageIndex = val
            this.getDataList()
            this.listQuery.pageIndex = val;
            this.getDataList();
        },
        reset(){
        reset() {
            this.listQuery = {
                filter:{
                    alarmStartTime: '',
                    alarmEndTime: '',
                filter: {
                    alarmStartTime: "",
                    alarmEndTime: "",
                    alarmStatus: null,
                    companyCode: '',
                    companyName: '',
                    alarmType: null
                    companyCode: "",
                    companyName: "",
                    algoModel: ""
                },
                pageIndex:1,
                pageSize:10
            }
            this.validTime = []
            this.getDataList()
                pageIndex: 1,
                pageSize: 10
            };
            this.validTime = [];
            this.getDataList();
        },
        search(){
            this.listQuery.pageIndex = 1
            this.getDataList()
        search() {
            this.listQuery.pageIndex = 1;
            this.getDataList();
        }
    },
}
    }
};
</script>
<style scoped>