|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="securityAlarmInfo">
|
|
|
<a-row style="height: 100%">
|
|
|
- <a-col :span="4" 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">
|
|
@@ -42,7 +42,7 @@
|
|
|
<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>
|
|
|
+ <span v-if="text==2" style="color: #b83023">摄像头离线</span>
|
|
|
</template>
|
|
|
|
|
|
<template #operation="text">
|
|
@@ -62,28 +62,32 @@
|
|
|
@cancel="handleCancel"
|
|
|
>
|
|
|
<div>告警详情</div>
|
|
|
- <a-divider />
|
|
|
+ <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" />
|
|
|
+ <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="监控点">
|
|
|
- 一层大厅西南角1号球机
|
|
|
+ {{ 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="告警时间">
|
|
|
- 2022-08-01 12:00:00
|
|
|
+ {{ 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%
|
|
@@ -100,168 +104,35 @@
|
|
|
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() {
|
|
|
return {
|
|
|
showDetail: false,
|
|
|
formData: {},
|
|
|
- treeData: [
|
|
|
- {
|
|
|
- title: '一层大厅',
|
|
|
- key: '1',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '大厅正门',
|
|
|
- key: '1-0',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '1-2',
|
|
|
- key: '1-2',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- },{
|
|
|
- title: '1-3',
|
|
|
- key: '1-3',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- title: '2F',
|
|
|
- key: '2',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '正门',
|
|
|
- key: '2-0',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- },{
|
|
|
- title: '2-1',
|
|
|
- key: '2-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- },{
|
|
|
- title: '2-2',
|
|
|
- key: '2-2',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- title: '3F',
|
|
|
- key: '3',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '正门',
|
|
|
- key: '3-0',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '3-1',
|
|
|
- key: '3-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '3-2',
|
|
|
- key: '3-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- title: '4F',
|
|
|
- key: '4',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '4-1',
|
|
|
- key: '4-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- },{
|
|
|
- title: '5F',
|
|
|
- key: '5',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '5-1',
|
|
|
- key: '5-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- },{
|
|
|
- title: '6F',
|
|
|
- key: '6',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '6-1',
|
|
|
- key: '6-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- },{
|
|
|
- title: '7F',
|
|
|
- key: '7',
|
|
|
- selectable: false,
|
|
|
- children: [
|
|
|
- {
|
|
|
- title: '7-1',
|
|
|
- key: '7-1',
|
|
|
- slots: {
|
|
|
- icon: 'camera',
|
|
|
- },
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
+ treeData: [],
|
|
|
+ currItem: {},
|
|
|
tableData: [
|
|
|
{
|
|
|
- time: '2022-08-01 12:00:00',
|
|
|
+ time: '2023-04-20 08:43:00',
|
|
|
area: '一层大厅',
|
|
|
- level: 0,
|
|
|
+ level: 1,
|
|
|
source: '一层大厅东南角1号球机',
|
|
|
- type: 0,
|
|
|
+ type: 2,
|
|
|
},
|
|
|
{
|
|
|
- time: '2022-08-01 12:00:00',
|
|
|
+ time: '2023-04-21 01:05:06',
|
|
|
area: '一层大厅',
|
|
|
level: 1,
|
|
|
source: '一层大厅东南角1号球机',
|
|
|
- type: 1,
|
|
|
+ type: 2,
|
|
|
},
|
|
|
{
|
|
|
- time: '2022-08-01 12:00:00',
|
|
|
+ time: '2023-04-21 01:05:06',
|
|
|
area: '一层大厅',
|
|
|
- level: 2,
|
|
|
+ level: 1,
|
|
|
source: '一层大厅东南角1号球机',
|
|
|
type: 2,
|
|
|
},
|
|
@@ -281,7 +152,7 @@ export default {
|
|
|
title: '告警级别',
|
|
|
dataIndex: 'level',
|
|
|
key: 'level',
|
|
|
- scopedSlots: { customRender: 'level' },
|
|
|
+ scopedSlots: {customRender: 'level'},
|
|
|
},
|
|
|
{
|
|
|
title: '告警来源',
|
|
@@ -292,7 +163,7 @@ export default {
|
|
|
title: '告警类型',
|
|
|
dataIndex: 'type',
|
|
|
key: 'type',
|
|
|
- scopedSlots: { customRender: 'type' },
|
|
|
+ scopedSlots: {customRender: 'type'},
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
@@ -300,7 +171,7 @@ export default {
|
|
|
key: 'operation',
|
|
|
minWidth: 220,
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'operation' },
|
|
|
+ scopedSlots: {customRender: 'operation'},
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -310,7 +181,29 @@ export default {
|
|
|
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;
|
|
|
},
|
|
@@ -319,6 +212,37 @@ export default {
|
|
|
},
|
|
|
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,
|
|
|
+ }
|
|
|
+ this.tableData.push(obj);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -327,9 +251,10 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.securityAlarmInfo {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: auto;
|
|
|
padding: 15px;
|
|
|
background-color: #ffffff;
|
|
|
+
|
|
|
.securityAlarmInfo-list {
|
|
|
margin: 15px 0px;
|
|
|
}
|