|
|
|
@ -185,24 +185,24 @@ |
|
|
|
/> |
|
|
|
/> |
|
|
|
<span>安防态势</span> |
|
|
|
<span>安防态势</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex" style="width: 100%; margin: 2.3rem auto 0"> |
|
|
|
<div class="flex" style="width: 100%; margin: 2.3rem auto 0; cursor: pointer;"> |
|
|
|
<div class="state flex-center" style="margin-right: 5px"> |
|
|
|
<div class="state flex-center" style="margin-right: 5px"> |
|
|
|
<img |
|
|
|
<img |
|
|
|
src="../../../public/img/home/left_warn.png" |
|
|
|
src="../../../public/img/home/left_warn.png" |
|
|
|
class="state_icon" |
|
|
|
class="state_icon" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<div> |
|
|
|
<div @click="changeSecurityTab(1)"> |
|
|
|
<div class="state_num">{{ securityData.warnCurNumber }}</div> |
|
|
|
<div class="state_num" :style="{color:securityTab == 1 ? '#1cb2ff':'rgba(255, 255, 255, 0.8)'}">{{ securityData.warnCurNumber }}</div> |
|
|
|
<div class="state_title">当前告警数量</div> |
|
|
|
<div class="state_title">当前告警数量</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="state flex-center" style="margin-left: 5px"> |
|
|
|
<div class="state flex-center" style="margin-left: 5px; cursor: pointer;"> |
|
|
|
<img |
|
|
|
<img |
|
|
|
src="../../../public/img/home/left_history_warn.png" |
|
|
|
src="../../../public/img/home/left_history_warn.png" |
|
|
|
class="state_icon" |
|
|
|
class="state_icon" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<div> |
|
|
|
<div @click="changeSecurityTab(2)"> |
|
|
|
<div class="state_num" style="color: rgba(255, 255, 255, 0.8)"> |
|
|
|
<div class="state_num" :style="{color:securityTab == 2 ? '#1cb2ff':'rgba(255, 255, 255, 0.8)'}"> |
|
|
|
{{ securityData.warnHisNumber }} |
|
|
|
{{ securityData.warnHisNumber }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="state_title">历史告警数量</div> |
|
|
|
<div class="state_title">历史告警数量</div> |
|
|
|
@ -211,7 +211,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; margin: 41rem auto 0"> |
|
|
|
<div style="width: 100%; margin: 41rem auto 0"> |
|
|
|
<div id="statePie" style="width: 100%; height: 220px"></div> |
|
|
|
<div id="statePie" style="width: 100%; height: 250px"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 中间底部 --> |
|
|
|
<!-- 中间底部 --> |
|
|
|
@ -866,6 +866,7 @@ export default { |
|
|
|
yqPeopleTotal: 0, //园区人员总数 |
|
|
|
yqPeopleTotal: 0, //园区人员总数 |
|
|
|
yqPeopleData: [], //园区人员分布统计 |
|
|
|
yqPeopleData: [], //园区人员分布统计 |
|
|
|
listData: [], //告警信息列表 |
|
|
|
listData: [], //告警信息列表 |
|
|
|
|
|
|
|
securityTab: 1,//安防态势 - 当前告警 |
|
|
|
securityData: {}, //安防态势 |
|
|
|
securityData: {}, //安防态势 |
|
|
|
listData1: [], //园区报警信息 |
|
|
|
listData1: [], //园区报警信息 |
|
|
|
classOption: { |
|
|
|
classOption: { |
|
|
|
@ -1151,9 +1152,17 @@ export default { |
|
|
|
], |
|
|
|
], |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
//安防态势切换选中值 |
|
|
|
|
|
|
|
changeSecurityTab(tab) { |
|
|
|
|
|
|
|
console.log('changeSecurityTab================',tab) |
|
|
|
|
|
|
|
if(this.securityTab != tab) { |
|
|
|
|
|
|
|
this.securityTab = tab; |
|
|
|
|
|
|
|
this.getSecurityStatus(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
//安防态势 |
|
|
|
//安防态势 |
|
|
|
getSecurityStatus() { |
|
|
|
getSecurityStatus() { |
|
|
|
getSecurityStatus(this.bimModel).then((res) => { |
|
|
|
getSecurityStatus(this.bimModel,this.securityTab==1?'0':'1').then((res) => { |
|
|
|
this.securityData = res.data.data; |
|
|
|
this.securityData = res.data.data; |
|
|
|
this.getSafeState(); |
|
|
|
this.getSafeState(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -1162,7 +1171,8 @@ export default { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var myChart = this.$echarts.init(document.getElementById("statePie")); |
|
|
|
var myChart = this.$echarts.init(document.getElementById("statePie")); |
|
|
|
let warnData = [], |
|
|
|
let warnData = [], |
|
|
|
offlineData = []; |
|
|
|
offlineData = [], |
|
|
|
|
|
|
|
lengendData = []; |
|
|
|
this.securityData.securityWarnCount.map((item) => { |
|
|
|
this.securityData.securityWarnCount.map((item) => { |
|
|
|
let classData = this.classifyData.find( |
|
|
|
let classData = this.classifyData.find( |
|
|
|
(item1) => item1.val == item.classCode |
|
|
|
(item1) => item1.val == item.classCode |
|
|
|
@ -1175,6 +1185,7 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
warnData.push(obj); |
|
|
|
warnData.push(obj); |
|
|
|
|
|
|
|
lengendData.push(classData ? classData.name : item.clasCode); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.securityData.offlineWarnCount.map((item) => { |
|
|
|
this.securityData.offlineWarnCount.map((item) => { |
|
|
|
let classData = this.classifyData.find( |
|
|
|
let classData = this.classifyData.find( |
|
|
|
@ -1189,75 +1200,88 @@ export default { |
|
|
|
}; |
|
|
|
}; |
|
|
|
offlineData.push(obj); |
|
|
|
offlineData.push(obj); |
|
|
|
}); |
|
|
|
}); |
|
|
|
// console.log("安防态势", warnData, offlineData); |
|
|
|
console.log("安防态势", lengendData); |
|
|
|
// 绘制图表 |
|
|
|
// 绘制图表 |
|
|
|
myChart.setOption({ |
|
|
|
myChart.setOption({ |
|
|
|
color: ["#01feae", "#f2b448", "#07a6ff", "#ff8b2e"], |
|
|
|
// color: ["#01feae", "#f2b448", "#07a6ff", "#ff8b2e"], |
|
|
|
tooltip: { |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
trigger: "item", |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
|
top: "85%", |
|
|
|
top: "80%", |
|
|
|
left: '-10', |
|
|
|
left: '20', |
|
|
|
|
|
|
|
right: '20', |
|
|
|
padding: [5,0], |
|
|
|
padding: [5,0], |
|
|
|
itemHeight: 0, |
|
|
|
itemWidth: 15, |
|
|
|
|
|
|
|
itemHeight: 10, |
|
|
|
|
|
|
|
// itemHeight: 0, |
|
|
|
formatter: function (name) { |
|
|
|
formatter: function (name) { |
|
|
|
return name == "监控" |
|
|
|
return name == "电力" |
|
|
|
? `{iconMark1|} ${name}` |
|
|
|
? `电` |
|
|
|
: name == "消防" |
|
|
|
: name; |
|
|
|
? `{iconMark2|} ${name}` |
|
|
|
|
|
|
|
: name == "电子门禁" |
|
|
|
|
|
|
|
? `{iconMark3|} ${name}` |
|
|
|
|
|
|
|
: `{iconMark4|} ${name}`; |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
textStyle: { |
|
|
|
color: "rgba(255,255,255,0.5)", |
|
|
|
color: "rgba(255,255,255,0.5)", |
|
|
|
fontSize: 14, |
|
|
|
fontSize: 14, |
|
|
|
rich: { |
|
|
|
|
|
|
|
iconMark1: { |
|
|
|
|
|
|
|
width: 10, |
|
|
|
|
|
|
|
height: 10, |
|
|
|
|
|
|
|
borderColor: "#01feae", |
|
|
|
|
|
|
|
borderWidth: 3, |
|
|
|
|
|
|
|
borderRadius: 6, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
iconMark2: { |
|
|
|
|
|
|
|
width: 10, |
|
|
|
|
|
|
|
height: 10, |
|
|
|
|
|
|
|
borderColor: "#f2b448", |
|
|
|
|
|
|
|
borderWidth: 3, |
|
|
|
|
|
|
|
borderRadius: 6, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
iconMark3: { |
|
|
|
|
|
|
|
width: 10, |
|
|
|
|
|
|
|
height: 10, |
|
|
|
|
|
|
|
borderColor: "#07a6ff", |
|
|
|
|
|
|
|
borderWidth: 3, |
|
|
|
|
|
|
|
borderRadius: 6, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
iconMark4: { |
|
|
|
|
|
|
|
width: 10, |
|
|
|
|
|
|
|
height: 10, |
|
|
|
|
|
|
|
borderColor: "#ff8b2e", |
|
|
|
|
|
|
|
borderWidth: 3, |
|
|
|
|
|
|
|
borderRadius: 6, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
// formatter: function (name) { |
|
|
|
{ |
|
|
|
// return name == "监控" |
|
|
|
name: "监控", |
|
|
|
// ? `{iconMark1|} ${name}` |
|
|
|
}, |
|
|
|
// : name == "消防" |
|
|
|
{ |
|
|
|
// ? `{iconMark2|} ${name}` |
|
|
|
name: "消防", |
|
|
|
// : name == "电子门禁" |
|
|
|
}, |
|
|
|
// ? `{iconMark3|} ${name}` |
|
|
|
{ |
|
|
|
// : `{iconMark4|} ${name}`; |
|
|
|
name: "电子门禁", |
|
|
|
// }, |
|
|
|
}, |
|
|
|
// textStyle: { |
|
|
|
{ |
|
|
|
// color: "rgba(255,255,255,0.5)", |
|
|
|
name: "电子围界", |
|
|
|
// fontSize: 14, |
|
|
|
}, |
|
|
|
// rich: { |
|
|
|
], |
|
|
|
// iconMark1: { |
|
|
|
|
|
|
|
// width: 10, |
|
|
|
|
|
|
|
// height: 10, |
|
|
|
|
|
|
|
// borderColor: "#01feae", |
|
|
|
|
|
|
|
// borderWidth: 3, |
|
|
|
|
|
|
|
// borderRadius: 6, |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// iconMark2: { |
|
|
|
|
|
|
|
// width: 10, |
|
|
|
|
|
|
|
// height: 10, |
|
|
|
|
|
|
|
// borderColor: "#f2b448", |
|
|
|
|
|
|
|
// borderWidth: 3, |
|
|
|
|
|
|
|
// borderRadius: 6, |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// iconMark3: { |
|
|
|
|
|
|
|
// width: 10, |
|
|
|
|
|
|
|
// height: 10, |
|
|
|
|
|
|
|
// borderColor: "#07a6ff", |
|
|
|
|
|
|
|
// borderWidth: 3, |
|
|
|
|
|
|
|
// borderRadius: 6, |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// iconMark4: { |
|
|
|
|
|
|
|
// width: 10, |
|
|
|
|
|
|
|
// height: 10, |
|
|
|
|
|
|
|
// borderColor: "#ff8b2e", |
|
|
|
|
|
|
|
// borderWidth: 3, |
|
|
|
|
|
|
|
// borderRadius: 6, |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// data: [ |
|
|
|
|
|
|
|
// { |
|
|
|
|
|
|
|
// name: "监控", |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// { |
|
|
|
|
|
|
|
// name: "消防", |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// { |
|
|
|
|
|
|
|
// name: "电子门禁", |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// { |
|
|
|
|
|
|
|
// name: "电子围界", |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
// ], |
|
|
|
|
|
|
|
data: lengendData |
|
|
|
}, |
|
|
|
}, |
|
|
|
title: [ |
|
|
|
title: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
|
zhangqun
3 years ago