<template>
<div>
<div class="sub-dev-block">
<div class="subTitle">今日各设备采集量统计</div>
<div class="chart-container">
<div ref="chartCollect" class="dev-chart-body" />
</div>
</div>
<div class="sub-alarm-block">
<div class="subTitle">今日识别报警人数统计</div>
<div class="dev-select">
<el-select v-model="displayAlarmDev" popper-class="cockpit-select">
<el-option
v-for="item in alarmDevs"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</div>
<div class="chart-container">
<div ref="chartAlarm" class="alarm-chart-body" />
</div>
</div>
</div>
<!-- <el-row :gutter="20" style="padding: 20px;">-->
<!-- <el-col :span="24">-->
<!-- <div class="subTitle">各设备统计</div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="panelCorners">-->
<!-- <div class="chart-container">-->
<!-- <div ref="chartCollect" class="chart-body" />-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="16">-->
<!-- <div class="panelCorners">-->
<!-- <div class="chart-container">-->
<!-- <div ref="chartAlarm" class="chart-body" />-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
</template>
<script>
import echarts from 'echarts'
import request from '@/utils/request'
export default {
name: 'CategoryPanel',
data() {
return {
analysisType: '1',
dateRange: '',
xDevDatas: [], // 设备采集量横轴
xAlarmDatas: [], // 识别报警量横轴
collectDatas: [], // 采集统计数据
checkAlarmDatas: [], // 识别统计数据
alarmDevs: [], // 识别报警设备列表
displayAlarmDev: 0 // 显示的报警设备
}
},
watch: {
displayAlarmDev() {
this.initChartAlarm(this.displayAlarmDev)
}
},
mounted() {
this.queryDevCollectAnalysis()
this.queryCheckAlarmAnalysis()
},
methods: {
queryDevCollectAnalysis() {
request({
url: '/bigScreen/getDevColAnalysis',
method: 'post'
}).then(response => {
if (response.code === 200) {
// 查询有新结果时清除原有的列表
this.xDevDatas = []
this.collectDatas = [2]
this.collectDatas[0] = []
this.collectDatas[1] = []
if (response.data.length > 0) {
response.data.forEach(item => {
this.xDevDatas.push(item.devName)
const dto = item.personNumAnalysisDTOList
if (dto[0].personType === '一般人员') {
this.collectDatas[0].push(dto[0].colNum)
} else {
this.collectDatas[1].push(dto[0].colNum)
}
if (dto[1].personType === '重点人员') {
this.collectDatas[1].push(dto[1].colNum)
} else {
this.collectDatas[0].push(dto[1].colNum)
}
})
}
this.initChartCollect()
}
})
},
queryCheckAlarmAnalysis() {
request({
url: '/bigScreen/getRecAlarmAnalysis',
method: 'post'
}).then(response => {
console.log(response)
if (response.code === 200) {
// 查询有新结果时清除原有的列表
// this.xAlarmDatas = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
this.xAlarmDatas = []
this.checkAlarmDatas = []
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
// 添加下拉列表框数据
this.alarmDevs.push({
value: i,
label: response.data[i].devName
})
this.checkAlarmDatas[i] = []
this.xAlarmDatas[i] = []
const dto = response.data[i].recAlarmAnalysisDTOList
for (let j = 0; j < dto.length; j++) {
this.xAlarmDatas[i].push(dto[j].recDate.substring(0, 5))
this.checkAlarmDatas[i].push(dto[j].recNum)
}
}
this.displayAlarmDev = 0 // 默认选中第一个
}
this.initChartAlarm(0)
}
})
},
initChartCollect() {
this.chart = echarts.init(this.$refs.chartCollect)
this.chart.setOption({
// title: {
// text: '今日采集量对比分析',
// textStyle: {
// color: '#f0f0f0',
// fontSize: 14
// },
// left: 'center'
// },
grid: {
left: '60px',
top: '10px'
},
legend: {
// top: 0,
// right: 0, // 右上方显示
bottom: 0,
icon: 'rect', // 方块样式
textStyle: { // 字体大小和颜色
color: '#FFFFFF',
fontSize: 18,
fontFamily: 'Microsoft YaHei'
},
data: ['一般人员', '重点人员']
},
tooltip: {
trigger: 'axis',
backgroundColor: '#0094FF', // 提示框背景色
axisPointer: {
type: 'shadow'
}
},
xAxis: [
{
type: 'category',
data: this.xDevDatas,
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
// rotate: 90,
fontSize: 10,
color: '#fff'
}
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
fontSize: 10,
color: '#fff'
},
splitLine: {
show: false
}
}
],
color: [
'#016FE2', '#02FEFF',
'#5ab1ef', '#fa6e86',
'#0067a6', '#c4b4e4',
'#d87a80', '#9cbbff', '#d9d0c7',
'#87a997', '#d49ea2', '#5b4947',
'#7ba3a8', '#19d4ae', '#ffb980'
],
series: [
{
name: '一般人员',
type: 'bar',
data: this.collectDatas[0]
},
{
name: '重点人员',
type: 'bar',
data: this.collectDatas[1]
}
]
})
this.chart.resize()
},
initChartAlarm(i) {
this.chart = echarts.init(this.$refs.chartAlarm)
this.chart.setOption({
// title: {
// text: '今日识别报警人数统计',
// textStyle: {
// color: '#f0f0f0',
// fontSize: 14
// },
// left: 'center'
// },
grid: {
left: '60px',
top: '10px'
},
legend: {
bottom: 0,
icon: 'rect', // 方块样式
textStyle: { // 字体大小和颜色
color: '#FFFFFF',
fontSize: 18,
fontFamily: 'Microsoft YaHei'
},
data: ['报警人数']
},
tooltip: {
trigger: 'axis',
backgroundColor: '#0094FF', // 提示框背景色
axisPointer: {
type: 'line',
lineStyle: {
color: '#FFFF00',
width: 2
}
}
},
xAxis: [
{
type: 'category',
data: this.xAlarmDatas[i],
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
// rotate: 90,
fontSize: 10,
color: '#fff'
}
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
fontSize: 10,
color: '#fff'
},
splitLine: {
show: false
}
}
],
color: [
'#5ab1ef', '#fa6e86',
'#0067a6', '#c4b4e4',
'#d87a80', '#9cbbff', '#d9d0c7',
'#87a997', '#d49ea2', '#5b4947',
'#7ba3a8', '#19d4ae', '#ffb980'
],
series: [
{
name: '报警人数',
type: 'line',
smooth: true,
data: this.checkAlarmDatas[i],
itemStyle: {
normal: {
color: '#016FE2',
lineStyle: {
width: 4 // 设置线条粗细
}
}
},
areaStyle: {
type: 'default',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, // 变化度
// 三种由深及浅的颜色
[{
offset: 0,
color: '#3695FF'
}, {
offset: 1,
color: 'rgba(54, 149, 255, 0)'
}]
)
}
}
]
})
this.chart.resize()
}
}
}
</script>
<style scoped>
.sub-dev-block {
border: 2px solid #3370E3;
background-color: rgba(41, 85, 252, 0.2);
margin: 20px 10px 0px 20px;
float: left;
width: calc((100vw - 60px) * 2 / 5);
}
.sub-alarm-block {
border: 2px solid #3370E3;
background-color: rgba(41, 85, 252, 0.2);
margin: 20px 20px 0px 10px;
float: left;
width: calc((100vw - 60px) * 3 / 5);
}
.subTitle {
font-weight: bold;
font-family: '微软雅黑',serif;
color: #fff;
font-size: 24px;
padding: 10px 10px 10px 30px;
background: url("images/sub-title-background.png") no-repeat;
float: left;
width: 400px;
}
.dev-select {
float: right;
padding: 5px;
}
.dev-select >>> .el-input__inner {
background-color: #142446;
border-radius: 0px;
border: 1px solid #016FE2;
color: #FFFFFF;
font-size: 18px;
}
.chart-container {
text-align: center;
display: block;
margin-top: 60px;
}
.dev-chart-body {
min-height: 240px;
width: calc((100vw - 60px) * 2 / 5);
margin-right: auto;
margin-left: auto;
}
.alarm-chart-body {
min-height: 240px;
width: calc((100vw - 60px) * 3 / 5);
}
@media(max-width: 1440px) {
.sub-dev-block {
margin: 15px 9px 0px 18px;
width: calc((100vw - 54px) * 2 / 5);
height: 285px;
}
.sub-alarm-block {
margin: 15px 18px 0px 9px;
width: calc((100vw - 54px) * 3 / 5);
height: 285px;
}
.subTitle {
font-size: 20px;
padding: 9px 9px 9px 24px;
}
.dev-select >>> .el-input__inner {
font-size: 16px;
height: 36px;
}
.chart-container{
text-align: center;
display: block;
margin-top: 42px;
}
.dev-chart-body {
min-height: 235px;
width: calc((100vw - 54px) * 2 / 5);
}
.alarm-chart-body {
min-height: 235px;
width: calc((100vw - 54px) * 3 / 5);
}
}
@media(max-width: 1366px) {
.sub-dev-block {
margin: 12px 8px 0px 16px;
width: calc((100vw - 48px) * 2 / 5);
height: 240px;
}
.sub-alarm-block {
margin: 12px 16px 0px 8px;
width: calc((100vw - 48px) * 3 / 5);
height: 240px;
}
.subTitle {
font-size: 16px;
padding: 8px 8px 8px 20px;
}
.dev-select >>> .el-input__inner {
font-size: 14px;
height: 30px;
}
.chart-container{
text-align: center;
display: block;
margin-top: 36px;
}
.dev-chart-body {
min-height: 180px;
width: calc((100vw - 48px) * 2 / 5);
}
.alarm-chart-body {
min-height: 180px;
width: calc((100vw - 48px) * 3 / 5);
}
}
</style>
<style rel="stylesheet/scss" lang="scss">
.cockpit-select{
/*下拉框背景和边框*/
background-color: #142446;
border-radius: 0px;
border: 1px solid #016FE2;
.el-select-dropdown__list{
padding:0 0;
}
/*下拉框选中选项*/
.el-select-dropdown__item.selected {
color: #FFFFFF;
font-size: 18px;
}
/*下拉框未选中选项*/
.el-select-dropdown__item {
color: #CCC;
font-size: 16px;
}
/*下拉框的鼠标滑过背景*/
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #016FE2;
}
}
/*下拉框的三角指示标识*/
.cockpit-select[x-placement^="bottom"] .popper__arrow{
border-bottom-color: #016FE2;
}
.cockpit-select[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: #016FE2;
}
.cockpit-select[x-placement^="top"] .popper__arrow {
border-top-color: #016FE2;
}
.cockpit-select[x-placement^="top"] .popper__arrow::after {
border-top-color: #016FE2;
}
</style>
