|
|
@@ -1,103 +1,110 @@
|
|
|
<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 defaultValue="all" style="width: 150px">
|
|
|
- <a-select-option value="all">全部</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 defaultValue="all" style="width: 120px">
|
|
|
- <a-select-option value="all">全部</a-select-option>
|
|
|
- <a-select-option value="finish">已处理</a-select-option>
|
|
|
- <a-select-option value="todo">待处理</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"
|
|
|
- >
|
|
|
+ <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==0" style="color: #ffbf6b">一般告警</span>
|
|
|
- <span v-if="text==1" style="color: #d26e64">重要告警</span>
|
|
|
- <span v-if="text==2" style="color: #b83023">紧急告警</span>
|
|
|
- </template>
|
|
|
+ <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==0" style="color: #ffbf6b">火焰告警</span>
|
|
|
- <span v-if="text==1" style="color: #d26e64">水浸告警</span>
|
|
|
- <span v-if="text==2" 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">
|
|
|
- <a-button type="link">确认处理</a-button>
|
|
|
- <a-button type="link" @click="viewDetail">查看详情</a-button>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
+ <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/>
|
|
|
+ <!--告警详情-->
|
|
|
+ <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="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
|
|
|
- </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==0" style="color: #ffbf6b">火焰告警</span>
|
|
|
- <span v-if="currItem.type==1" style="color: #d26e64">水浸告警</span>
|
|
|
- <span v-if="currItem.type==2" 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 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>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -108,149 +115,182 @@ import apiSecurityCamera from "@/api/security/apiSecurityCamera";
|
|
|
import moment from "@/utils/moment_set";
|
|
|
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showDetail: false,
|
|
|
- formData: {},
|
|
|
- treeData: [],
|
|
|
- currItem: {},
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- time: '2023-04-20 08:43:00',
|
|
|
- area: '一层大厅',
|
|
|
- level: 1,
|
|
|
- source: '一层大厅东南角1号球机',
|
|
|
- type: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- time: '2023-04-21 01:05:06',
|
|
|
- area: '一层大厅',
|
|
|
- level: 1,
|
|
|
- source: '一层大厅东南角1号球机',
|
|
|
- type: 2,
|
|
|
+ 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();
|
|
|
+ })
|
|
|
},
|
|
|
- {
|
|
|
- time: '2023-04-21 01:05:06',
|
|
|
- area: '一层大厅',
|
|
|
- level: 1,
|
|
|
- source: '一层大厅东南角1号球机',
|
|
|
- type: 2,
|
|
|
+ dealAlarm(val) {
|
|
|
+ val.state = 1;
|
|
|
+ this.$forceUpdate();
|
|
|
},
|
|
|
- ],
|
|
|
- columns: [
|
|
|
- {
|
|
|
- title: '告警时间',
|
|
|
- dataIndex: 'time',
|
|
|
- key: 'time'
|
|
|
+ viewDetail(val) {
|
|
|
+ this.showDetail = true;
|
|
|
+ this.currItem = val
|
|
|
},
|
|
|
- {
|
|
|
- title: '告警区域',
|
|
|
- dataIndex: 'area',
|
|
|
- key: 'area'
|
|
|
+ handleCancel() {
|
|
|
+ this.showDetail = false
|
|
|
},
|
|
|
- {
|
|
|
- title: '告警级别',
|
|
|
- dataIndex: 'level',
|
|
|
- key: 'level',
|
|
|
- scopedSlots: {customRender: 'level'},
|
|
|
+ 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;
|
|
|
+ })
|
|
|
},
|
|
|
- {
|
|
|
- title: '告警来源',
|
|
|
- dataIndex: 'source',
|
|
|
- key: 'source'
|
|
|
+ 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;
|
|
|
},
|
|
|
- {
|
|
|
- title: '告警类型',
|
|
|
- dataIndex: 'type',
|
|
|
- key: 'type',
|
|
|
- scopedSlots: {customRender: 'type'},
|
|
|
+ randomCamera() {
|
|
|
+ let index = Math.floor(Math.random() * this.treeData.length);
|
|
|
+ return this.treeData[index].title;
|
|
|
},
|
|
|
- {
|
|
|
- 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();
|
|
|
- })
|
|
|
- },
|
|
|
- viewDetail() {
|
|
|
- this.showDetail = true;
|
|
|
- },
|
|
|
- handleCancel() {
|
|
|
- this.showDetail = false
|
|
|
- },
|
|
|
- search() {
|
|
|
-
|
|
|
- },
|
|
|
- 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: 2,
|
|
|
+ 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))
|
|
|
}
|
|
|
- this.tableData.push(obj);
|
|
|
- }
|
|
|
- this.tableData.sort((a,b)=>{
|
|
|
- if (a.time>b.time) {
|
|
|
- return -1;
|
|
|
- }
|
|
|
- return 1;
|
|
|
- })
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
tianyabing