302 lines
10 KiB
Vue
302 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<el-form :inline="true" :model="queryParams" ref="form">
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<span style="margin-right: 10px;">日期</span>
|
|||
|
|
<el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="queryChart">搜索</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<div style="display: flex;height: 780px;">
|
|||
|
|
<div style="width: 50%;background: #e0e1e2;padding:10px">
|
|||
|
|
<div class="title">厂界在线监测设备报警情况分析</div>
|
|||
|
|
<div style="width:100%;height:700px;" ref="qdCityMap1"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 50%;background: #e0e1e2;padding:10px">
|
|||
|
|
结合最近14天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
|
|||
|
|
<el-table v-loading="loading" :data="monitorList" style="height: 800px;">
|
|||
|
|
<el-table-column label="企业名称" align="center" prop="a" />
|
|||
|
|
<el-table-column label="设备编号" align="center" prop="d" />
|
|||
|
|
<el-table-column label="放置区域" align="center" prop="b" />
|
|||
|
|
<el-table-column label="报警次数" align="center" prop="e" >
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span :style="{ color: 'red' }">{{ scope.row.e }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">下发通知</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--发送通知-->
|
|||
|
|
<send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { queryAlarmChart} from "@/api/demostrate/monitor";
|
|||
|
|
import { queryMonitorPrediction} from "@/api/demostrate/monitor";
|
|||
|
|
import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
|
|||
|
|
const echarts = require("echarts");
|
|||
|
|
export default {
|
|||
|
|
name: "alarm",
|
|||
|
|
components: {sendMsg},
|
|||
|
|
dicts: [],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
monitorList:[{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:2},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
|
|||
|
|
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:4},
|
|||
|
|
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}
|
|||
|
|
,{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
|
|||
|
|
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:6},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
|
|||
|
|
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
|
|||
|
|
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
loading:false,
|
|||
|
|
pickerOptions: {
|
|||
|
|
// disabledDate(time) {
|
|||
|
|
// // 计算选择的时间跨度
|
|||
|
|
// const diff = Math.abs(time.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
|
|||
|
|
|
|||
|
|
// // 如果时间跨度超过30天，则禁用该日期
|
|||
|
|
// return diff > 30;
|
|||
|
|
// },
|
|||
|
|
shortcuts: [
|
|||
|
|
{
|
|||
|
|
text: '最近30天',
|
|||
|
|
onClick(picker) {
|
|||
|
|
const end = new Date();
|
|||
|
|
const start = new Date();
|
|||
|
|
start.setDate(start.getDate() - 29); // 30天前
|
|||
|
|
|
|||
|
|
picker.$emit('pick', [start, end]);
|
|||
|
|
}
|
|||
|
|
}]},
|
|||
|
|
dateList: [],//日期
|
|||
|
|
total:0,
|
|||
|
|
isOpenMsg:false,
|
|||
|
|
deviceInfo: {},
|
|||
|
|
// 查询参数
|
|||
|
|
queryParams: {
|
|||
|
|
startTime: null,
|
|||
|
|
endTime: null,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let dsiab_com = this.$refs.qdCityMap1
|
|||
|
|
dsiab_com.removeAttribute('_echarts_instance_')
|
|||
|
|
this.getDefaultDateRange()
|
|||
|
|
// this.getList();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//发送通知
|
|||
|
|
handleUpdate(row) {
|
|||
|
|
this.deviceInfo = row
|
|||
|
|
this.isOpenMsg = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
queryChart() {
|
|||
|
|
if (this.dateList && this.dateList.length > 0) {
|
|||
|
|
this.queryParams.startTime = this.dateList[0]
|
|||
|
|
this.queryParams.endTime = this.dateList[1]
|
|||
|
|
} else {
|
|||
|
|
this.queryParams.startTime = null
|
|||
|
|
this.queryParams.endTime = null
|
|||
|
|
}
|
|||
|
|
// queryAlarmChart(this.queryParams).then(response => {
|
|||
|
|
// if(response.data && response.data.length>0){
|
|||
|
|
// let xData=[]//日期
|
|||
|
|
// let yData1=[]// 一级报警
|
|||
|
|
// let yData2=[]// 二级报警
|
|||
|
|
// let yData3=[]//报警率
|
|||
|
|
// response.data.forEach(map=>{
|
|||
|
|
// xData.push(map.reportTime)
|
|||
|
|
// yData1.push(map.level1)
|
|||
|
|
// yData2.push(map.level2)
|
|||
|
|
// yData3.push(map.progress)
|
|||
|
|
// })
|
|||
|
|
// this.init(xData,yData1,yData2,yData3)
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
let xData = ['2024-05-03','2024-05-06','2024-05-08','2024-05-11','2024-05-15','2024-05-20']//日期
|
|||
|
|
let yData1 = [10,12,32,12,5,6,9]// 一级报警
|
|||
|
|
let yData2 = [5,1,3,5,9,2,1]// 二级报警
|
|||
|
|
let yData3 = [15,23,3,12,20,3,2]//报警率
|
|||
|
|
|
|||
|
|
this.init(xData, yData1, yData2, yData3)
|
|||
|
|
},
|
|||
|
|
getDefaultDateRange() {
|
|||
|
|
const endDate = new Date(); // 当前时间
|
|||
|
|
const startDate = new Date();
|
|||
|
|
startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
|
|||
|
|
this.dateList = [startDate, endDate]
|
|||
|
|
this.queryChart()
|
|||
|
|
},
|
|||
|
|
init(xData,yData1,yData2,yData3) {
|
|||
|
|
const yData2GradientColor = [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#0058e1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#3BA1E3'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
const yData3GradientColor = [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#32E8D4'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#4BA1E3'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
const option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis', // x轴触发
|
|||
|
|
formatter: function (params) {
|
|||
|
|
let list = []
|
|||
|
|
let listItem = ''
|
|||
|
|
params.forEach((item) => {
|
|||
|
|
// 柱状图加单位 局，折线图加单位 %
|
|||
|
|
let unitValue = item.seriesType == 'bar' ? item.value + '个' : item.value + '%'
|
|||
|
|
list.push(item.marker + '' + item.seriesName + ': ' + unitValue)
|
|||
|
|
})
|
|||
|
|
listItem = list.join('<br/>')
|
|||
|
|
return '<div>' + listItem + '</div>'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'horizontal', // 水平排列
|
|||
|
|
x: 'center', //可设定图例在左、右、居中
|
|||
|
|
y: 'top', //可设定图例在上、下、居中
|
|||
|
|
padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '报警数',
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
axisLabel: {
|
|||
|
|
//y轴每个刻度都加单位
|
|||
|
|
formatter: "{value}个",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: "报警率(%)",
|
|||
|
|
min: 0, // 最小为0
|
|||
|
|
max: 100, // 最大为100
|
|||
|
|
interval: 25, // 间隔25
|
|||
|
|
axisLabel: {
|
|||
|
|
//y轴每个刻度都加单位
|
|||
|
|
formatter: "{value}%",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
stack: 'x',
|
|||
|
|
name: "报警数",
|
|||
|
|
data: yData1,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#eee'
|
|||
|
|
},
|
|||
|
|
barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
|
|||
|
|
// stack:'重叠',
|
|||
|
|
itemStyle: {
|
|||
|
|
// borderRadius: [20, 20, 6, 6],
|
|||
|
|
color: '#15C1AF',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// type: 'bar',
|
|||
|
|
// stack: 'x',
|
|||
|
|
// name: "二级报警数",
|
|||
|
|
// data: yData2,
|
|||
|
|
// label: {
|
|||
|
|
// show: true,
|
|||
|
|
// color: '#eee'
|
|||
|
|
// },
|
|||
|
|
// barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
|
|||
|
|
// // stack:'重叠',
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // borderRadius: [20, 20, 6, 6],
|
|||
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, yData3GradientColor),
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
type: 'line',
|
|||
|
|
name: '报警率(%)',
|
|||
|
|
data: yData3,
|
|||
|
|
yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
|
|||
|
|
symbolSize: 10, // 圆点大小
|
|||
|
|
// itemStyle: {
|
|||
|
|
// color: '#74DER1', // 折线图小圆点颜色
|
|||
|
|
// },
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#DE390F',
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#ddd',
|
|||
|
|
formatter: '{c}%' // {c}数据值
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.myChart = echarts.init(this.$refs.qdCityMap1)
|
|||
|
|
this.myChart.setOption(option);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
.title {
|
|||
|
|
padding-left: 10px;
|
|||
|
|
color: #212121;
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
|
|||
|
|
background-position-y: 7px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|