<template lang='pug'>
el-container(style="padding:0px;" :style="{height:currentHeight-65+'px'}")
el-aside( width="18vw" v-loading="leftLoading" style="z-index:1000;")
div.left_aside(style="height:auto")
el-header.left_header 报警统计
el-main.left_main
div.left_main_body(v-for="item in eventList")
div.left_col_header {{item.systemName}}
el-row.row_style
el-col(:span="8")
div(style="color:#F56C6C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;") {{item.oneCount}}
div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 特别重大
el-col(:span="8")
div(style="color:#E6A23C;font-size:18px;font-weight:400;font-family:Microsoft YaHei;") {{item.twoCount}}
div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 重大
el-col(:span="8")
div(style="color:#409EFF;font-size:18px;font-weight:400;font-family:Microsoft YaHei;") {{item.threeCount}}
div(style="font-size:12px;color:#656565;font-family:Microsoft YaHei;font-weight:400;") 一般
div.left_aside(style="height:auto;margin-bottom:0px;")
el-header.left_header 等级分布
div(id="myCharts" style="height:232px;background:#ffffff")
//ve-pie.untreated_canvas(:data="chartData" :extend="chartExtend" legend-position="bottom" width="260px" height="350px" )
el-main(style="padding:0px;z-index:1001;" :style="{height:currentHeight-45+'px'}" class="alarms-untreated-main")
el-tabs(v-model="activeName" type="border-card" @tab-click="handleClick")
el-tab-pane(label="全部" name="0")
query-list(v-if="activeName == 0" ref="queryList")
el-tab-pane(label="视频监控系统" name="438c30d3d7f241b573f22a1a36c60485")
query-list(v-if="activeName == '438c30d3d7f241b573f22a1a36c60485'" ref="queryList")
el-tab-pane(label="出入口控制系统" name="ed401f7d9291b508d411d8192b016c6e")
query-list(v-if="activeName == 'ed401f7d9291b508d411d8192b016c6e'" ref="queryList")
el-tab-pane(label="入侵报警系统" name="75c7c11716713edfd2ce3581f5e7c193")
query-list(v-if="activeName == '75c7c11716713edfd2ce3581f5e7c193'" ref="queryList")
el-tab-pane(label="安全检查及探测系统" name="3a64b86b1a5dead8ff9d2ad913744e50")
query-list(v-if="activeName == '3a64b86b1a5dead8ff9d2ad913744e50'" ref="queryList")
</template>
<script>
import QueryList from '../untreated/query-list'
export default {
computed: {
currentHeight() {
return this.$store.state.d2admin.currentHeight.height
}
},
data() {
return {
leftLoading: false,
activeName: '0',
eventList: [],
chartData: null
}
},
components: {
QueryList
},
created() {
this.eventList = []
this.$nextTick(() => {
this.$refs.queryList.init('0')
})
this.getGroupList()
},
methods: {
groupInit() {
let dom = document.getElementById('myCharts')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
bottom: 10,
data: ['特别重大', '重大', '一般']
},
series: [
{
bottom: 30,
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
formatter: (element) => {
//自定义文字
//return element.name + '：' + element.value + '(' + element.percent + '%)'
return element.percent + '%'
}
},
itemStyle: {
normal: {
color: function (params) {
//自定义颜色
let colorList = [
'#F56C6C', '#E6A23C', '#409EFF'
]
return colorList[params.dataIndex]
}
}
},
labelLine: {
show: true
},
data: this.chartData
}
]
}
myCharts.setOption(option)
},
//获取按报警等级统计信息
getGroupList() {
this.leftLoading = true
this.$http({
url: this.$http.adornUrlAlarm(`/alarmsInfo/queryGroupUntreated`),
method: 'get',
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then(data => {
this.leftLoading = false
if (data && data.code === 0) {
this.eventList = data.list
let oneCount, twoCount, threeCount
oneCount = twoCount = threeCount = 0
for (let i in this.eventList) {
oneCount += this.eventList[i].oneCount
twoCount += this.eventList[i].twoCount
threeCount += this.eventList[i].threeCount
}
this.chartData = [
{ value: oneCount, name: '特别重大' },
{ value: twoCount, name: '重大' },
{ value: threeCount, name: '一般' }
]
this.groupInit()
}
})
},
handleClick(tab, event) {
this.$nextTick(() => {
this.$refs.queryList.init(this.activeName)
})
}
}
}
</script>
<style lang='scss' scoped>
.left_aside {
margin-bottom: 10px;
border: 1px #DCDFE6 solid;
background: #f4f4f4;
box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
.left_header {
line-height: 40px;
height: 40px !important;
background-color: #E1EDF4;
border-bottom: 1px #E4E7ED solid;
font-size:16px;
font-family:Microsoft YaHei;
font-weight:bold;
}
.left_main {
padding: 0rem 1rem 1rem 1rem;
overflow: hidden;
background: #FFFFFF;
}
.left_main_char {
/*padding:0rem 1rem 1rem 1rem;*/
/*overflow: hidden;*/
background: #FFFFFF;
/*height: 300px;*/
.untreated_canvas {
margin: 0 auto;
/*transform: translateY(-80px);*/
top: -80px
}
}
.left_main_body {
margin-top: 1rem;
border: 1px #D1D1D1 solid;
/*height:120px;*/
background: #fff;
}
.left_col_header {
background-color: #E1EDF4;
height: 30px;
line-height: 30px;
color: #000000;
text-align: center;
font-size:15px;
font-family:Adobe Heiti Std;
font-weight:bold;
}
.row_style {
line-height: 24px;
text-align: center;
/*height:60px;*/
/*padding:3px;*/
}
.alarms-untreated-main > .el-tabs {
box-shadow: none;
border: none;
}
.alarms-untreated-main > .el-tabs > .el-tabs__content {
padding: 0 !important;
margin-top: 10px;
}
.el-tanle th {
background: #EEF8FF !important
}
.el-tabs__nav-scroll {
height: 42px;
/*padding-top: 10px;*/
/*padding-left: 10px;*/
line-height:42px;
background: #f4f4f4;
border-bottom: 1px solid rgba(196, 196, 196, 1);
.el-tabs__item {
border-top-color: #DCDFE6 !important;
}
}
</style>