iot-front-ui/src/components/security/alarm/securityAlarmInfo.vue

<template>
    <div class="securityAlarmInfo">
        <a-row style="height: 100%">
            <a-col :span="4" style="height: 800px">
                <security-device-select :tree-data="treeData"/>
            </a-col>
            <a-col :span="20" style="height: 100%;padding: 15px">
                <div class="securityAlarmInfo-query">
                    <Query :show="['time']" :query-data.sync="formData" :search="search">
                        <template #extraItem>
                            <a-form-model-item label="告警类型">
                                <a-select v-model="formData.type" defaultValue="" style="width: 150px">
                                    <a-select-option value="">全部</a-select-option>
                                    <a-select-option value="unline">设备离线</a-select-option>
                                    <a-select-option value="fumes">烟雾告警</a-select-option>
                                    <a-select-option value="fire">火焰告警</a-select-option>
                                    <a-select-option value="trespass">非法闯入</a-select-option>
                                    <a-select-option value="violation">违规行为</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item label="处理情况">
                                <a-select v-model="formData.state" defaultValue="" style="width: 120px">
                                    <a-select-option value="">全部</a-select-option>
                                    <a-select-option value="1">已处理</a-select-option>
                                    <a-select-option value="0">待处理</a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </template>
                    </Query>
                </div>
                <div class="securityAlarmInfo-list">
                    <a-table :rowKey="(record, index) => index"
                             :columns="columns"
                             :data-source="tableData"
                    >

                        <template #level="text">
                            <span v-if="text==1" style="color: #ffbf6b">一般告警</span>
                            <span v-if="text==2" style="color: #d26e64">重要告警</span>
                            <span v-if="text==3" style="color: #b83023">紧急告警</span>
                        </template>

                        <template #type="text">
                            <span v-if="text=='fire'" style="color: #ffbf6b">火焰告警</span>
                            <span v-if="text=='fumes'" style="color: #d26e64">烟雾告警</span>
                            <span v-if="text=='unline'" style="color: #b83023">设备离线</span>
                            <span v-if="text=='trespass'" style="color: #b83023">非法闯入</span>
                            <span v-if="text=='violation'" style="color: #b83023">违规行为</span>
                        </template>

                        <template #operation="text, record">
                            <a-button type="link" v-if="record.state!=1" @click="dealAlarm(record)">确认处理</a-button>
                            <span v-if="record.state==1" style="color: #3CC2AC">已处理</span>
                            <a-button type="link" @click="viewDetail(record)">查看详情</a-button>
                        </template>
                    </a-table>
                </div>
            </a-col>
        </a-row>

        <!--告警详情-->
        <a-modal class="securityPersonMoreDetail" v-if="showDetail"
                 :visible="true"
                 :width="800"
                 :footer="null"
                 @cancel="handleCancel"
        >
            <div>告警详情</div>
            <a-divider/>

            <div style="width: 100%;height: 100%">
                <div style="height: 250px;width: 100%">
                    <img width="100%" height="100%"
                         src="/test"/>
                </div>
                <div style="margin-top: 20px">
                    <a-descriptions :column="3" size="small">
                        <a-descriptions-item label="监控点">
                            {{ currItem.area }}
                        </a-descriptions-item>
                        <a-descriptions-item label="告警区域">
                            {{ currItem.source }}
                        </a-descriptions-item>
                        <a-descriptions-item label="告警类型">
                            <span v-if="currItem.type=='fire'" style="color: #ffbf6b">火焰告警</span>
                            <span v-if="currItem.type=='fumes'" style="color: #d26e64">烟雾告警</span>
                            <span v-if="currItem.type=='unline'" style="color: #b83023">设备离线</span>
                            <span v-if="currItem.type=='trespass'" style="color: #b83023">非法闯入</span>
                            <span v-if="currItem.type=='violation'" style="color: #b83023">违规行为</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="告警时间">
                            {{ currItem.time }}
                        </a-descriptions-item>
                        <a-descriptions-item label="告警级别">
                            <span v-if="currItem.level==1">一般告警</span>
                            <span v-if="currItem.level==2">重要告警</span>
                            <span v-if="currItem.level==3">紧急告警</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="准确率">
                            98%
                        </a-descriptions-item>
                    </a-descriptions>
                </div>
            </div>
        </a-modal>

    </div>
</template>

<script>
import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";
import TimeRange from "@/components/common/timeRange.vue";
import Query from "@/components/common/query.vue";
import apiSecurityCamera from "@/api/security/apiSecurityCamera";
import moment from "@/utils/moment_set";

export default {
    data() {
        let range = this.$util.dateUtil.getNearlyMonthRange();
        return {
            showDetail: false,
            formData: {
                type: '',
                state: '',
                timeRange: range
            },
            treeData: [],
            currItem: {},
            oriTableData: [],
            tableData: [
                {
                    time: '2023-05-16 08:43:01',
                    area: '一层大厅',
                    level: 2,
                    source: '一层大厅东南角1号球机',
                    type: 'trespass',
                    state: 1,
                },
                {
                    time: '2023-05-14 12:31:45',
                    area: '一层大厅',
                    level: 1,
                    source: '一层大厅东南角1号球机',
                    type: 'fumes',
                    state: 1,
                },
                {
                    time: '2023-05-07 15:44:11',
                    area: '一层大厅',
                    level: 2,
                    source: '一层大厅东南角1号球机',
                    type: 'trespass',
                    state: 1,
                },
            ],
            columns: [
                {
                    title: '告警时间',
                    dataIndex: 'time',
                    key: 'time'
                },
                {
                    title: '告警区域',
                    dataIndex: 'area',
                    key: 'area'
                },
                {
                    title: '告警级别',
                    dataIndex: 'level',
                    key: 'level',
                    scopedSlots: {customRender: 'level'},
                },
                {
                    title: '告警来源',
                    dataIndex: 'source',
                    key: 'source'
                },
                {
                    title: '告警类型',
                    dataIndex: 'type',
                    key: 'type',
                    scopedSlots: {customRender: 'type'},
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    key: 'operation',
                    minWidth: 220,
                    align: 'center',
                    scopedSlots: {customRender: 'operation'},
                }
            ]
        }
    },
    components: {
        Query,
        SecurityDeviceSelect,
        TimeRange,
    },
    mounted() {
        this.getCameraList()
    },
    methods: {
        getCameraList() {
            let app = this;
            apiSecurityCamera.getCameraList().then(res => {
                res.forEach(item => {
                    item.title = item.deviceName;
                    item.key = item.deviceId;
                    item.slots = {icon: 'camera',};
                })
                res.sort((a, b) => {
                    if (a.title > b.title) {
                        return 1
                    } else {
                        return -1
                    }
                })
                this.treeData = res;
                app.genData();
            })
        },
        dealAlarm(val) {
            val.state = 1;
            this.$forceUpdate();
        },
        viewDetail(val) {
            this.showDetail = true;
            this.currItem = val
        },
        handleCancel() {
            this.showDetail = false
        },
        search() {
            this.tableData = this.oriTableData.filter(item=>{
                if (this.formData.type && this.formData.type!='' && item.type!=this.formData.type) {
                    return false;
                }
                if (this.formData.state && this.formData.state!='' && item.state!=this.formData.state) {
                    return false;
                }
                if (this.formData.timeRange && this.formData.timeRange.startDate && this.formData.timeRange.endDate) {
                    let start = this.formData.timeRange.startDate;
                    let end = this.formData.timeRange.endDate;
                    let curr = this.$moment(item.time);
                    let flag = curr.isSameOrAfter(start) && curr.isSameOrBefore(end);
                    if (!flag) {
                        return false
                    }
                }
                return true;
            })
        },
        randomDate() {
            let startDate = this.$moment().startOf('month').toDate();
            let endDate = new Date();
            let date = new Date(+startDate + Math.random() * (endDate - startDate));
            let hour = 0 + Math.random() * (23 - 0) | 0;
            let minute = 0 + Math.random() * (59 - 0) | 0;
            let second = 0 + Math.random() * (59 - 0) | 0;
            date.setHours(hour);
            date.setMinutes(minute);
            date.setSeconds(second);
            return date;
        },
        randomCamera() {
            let index = Math.floor(Math.random() * this.treeData.length);
            return this.treeData[index].title;
        },
        genData() {
            this.tableData = [];
            for (let i = 0; i < 35; i++) {
                let deviceName = this.randomCamera();
                let time = this.$moment(this.randomDate()).format("YYYY/MM/DD HH:mm:ss")
                let obj = {
                    time: time,
                    area: 'B2',
                    level: 1,
                    source: deviceName,
                    type: 'unline',
                    state: 0,
                }
                this.tableData.push(obj);
            }
            this.tableData.sort((a, b) => {
                if (a.time > b.time) {
                    return -1;
                }
                return 1;
            });
            this.oriTableData = JSON.parse(JSON.stringify(this.tableData))
        }
    }
}
</script>

<style lang="less" scoped>
.securityAlarmInfo {
  width: 100%;
  height: auto;
  padding: 15px;
  background-color: #ffffff;

  .securityAlarmInfo-list {
    margin: 15px 0px;
  }
}
</style>