From 4d7658f615325e4f7c30d5f3ac425fc33fcc4652 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 07 Apr 2021 23:50:18 +0800
Subject: [PATCH] 预警数量，预警时间分布数据回填
---
src/api/statis/statis.js | 10 ++
src/styles/alarmAnalysis/alarmAnalysis.scss | 17 +++
src/views/alarmManagement/alarmAnalysis.vue | 230 ++++++++++++++++++++++++++-------------------
3 files changed, 159 insertions(+), 98 deletions(-)
diff --git a/src/api/statis/statis.js b/src/api/statis/statis.js
index 9e8509f..bdc15a8 100644
--- a/src/api/statis/statis.js
+++ b/src/api/statis/statis.js
@@ -38,4 +38,14 @@
...params,
}
})
+}
+
+export const selAlarmTimeDis = (params) => {
+ return request({
+ url: '/api/blade-jfpts/alarm/alarm/selAlarmTimeDis',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
}
\ No newline at end of file
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
index ec90c9b..3d8dd8a 100644
--- a/src/styles/alarmAnalysis/alarmAnalysis.scss
+++ b/src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -245,4 +245,19 @@
position: relative;
left: 0.8%;
top: -38%;
-}
\ No newline at end of file
+}
+
+.el-button .btn-color {
+ color: rgb(255, 255, 255);
+ background-color: #29C093;
+ border-color: #29C093;
+}
+
+// .el-icon-bell:before {
+// width: 10px;
+// height: 10px;
+// border-radius: 50%;
+// //background-color: #F34A4A;
+// display: inline-block;
+// content: '';
+// }
\ No newline at end of file
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 5531261..874c93e 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -26,7 +26,13 @@
季度至今
</el-button>
</el-button-group>
- <el-date-picker class="timeSearch" size="mini" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+ <el-date-picker
+ class="timeSearch"
+ size="mini"
+ v-model="dateTime"
+ type="daterange"
+ @change="timeChange"
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
<!-- 监测点 -->
@@ -78,8 +84,8 @@
<script>
import echarts from 'echarts'
- import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro} from "@/api/statis/statis";
-import alarmVue from '../alarm/alarm.vue';
+ import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro,selAlarmTimeDis} from "@/api/statis/statis";
+ import alarmVue from '../alarm/alarm.vue';
export default {
data(){
@@ -118,6 +124,36 @@
},
methods: {
+ //日期选好后触发
+ timeChange(){
+ //清空选项按钮标记
+ var that = this;
+ that.activeClass = 0;
+ var data = {};
+ data ={
+ startTime:this.timeFormat(this.dateTime[0]),
+ endTime:this.timeFormat(this.dateTime[1])
+ }
+ this.getStatisData(data);
+ },
+
+ //中国区时间格式转换
+ timeFormat(date){
+ let y = date.getFullYear()
+ let m = date.getMonth() + 1
+ m = m < 10 ? ('0' + m) : m
+ let d = date.getDate()
+ d = d < 10 ? ('0' + d) : d
+ let h =date.getHours()
+ h = h < 10 ? ('0' + h) : h
+ let M =date.getMinutes()
+ M = M < 10 ? ('0' + M) : M
+ let s =date.getSeconds()
+ s = s < 10 ? ('0' + s) : s
+ let time= y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
+ return time;
+ },
+
//警情统计总数
getStatisTotalData(data){
selectIndexCount(data).then(res => {
@@ -128,7 +164,7 @@
},
title: '警情总数',
count: res.data.data[0].value,
- icon: 'el-icon-warning',
+ icon: 'el-icon-message-solid',
color: '#F34A4A'
},
{
@@ -136,7 +172,7 @@
},
title: '违禁包裹数',
count: res.data.data[1].value,
- icon: 'el-icon-warning',
+ icon: 'el-icon-shopping-bag-1',
color: '#FF9836'
},
{
@@ -144,7 +180,7 @@
},
title: '违禁物品数',
count: res.data.data[2].value,
- icon: 'el-icon-setting',
+ icon: 'el-icon-warning',
color: '#8058A5'
},
{
@@ -152,7 +188,7 @@
},
title: '在线设备数',
count: res.data.data[3].value,
- icon: 'el-icon-setting',
+ icon: 'el-icon-success',
color: '#29C093'
},
{
@@ -160,7 +196,7 @@
},
title: '客户数量',
count: res.data.data[4].value,
- icon: 'el-icon-setting',
+ icon: 'el-icon-s-custom',
color: '#3AA7F0'
}
];
@@ -646,95 +682,102 @@
//预警时间分布
getAlarmTimeDisEchars(data){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '3%',
- top: 25,
- textAlign:'center',
- text: '预警时间分布'
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
- top:'10%',
- right:'6%'
- },
- grid: {
- left: '1%',
- right: '7%',
- bottom: '10%',
- top:'25%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: true,
- axisLine: {
+ selAlarmTimeDis(data).then(res =>{
+ var data = res.data;
+ let echarts = require('echarts');
+ let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
+ let option = {
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '3%',
+ top: 25,
+ textAlign:'center',
+ text: '预警时间分布'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
+ top:'10%',
+ right:'6%'
+ },
+ grid: {
+ left: '1%',
+ right: '7%',
+ bottom: '10%',
+ top:'25%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: true,
+ axisLine: {
+ lineStyle:{
+ type:'dashed'
+ }
+ },
+ axisTick: {
+ show:false
+ },
+ data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14','14-16','16-18','18-20','20-22','22-24']
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: true,
lineStyle:{
- type:'dashed'
+ type:'dashed'
}
- },
- axisTick: {
- show:false
- },
- data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14','14-16','16-18','18-20','20-22','22-24']
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: true,
- lineStyle:{
- type:'dashed'
}
- }
- },
- series: [
- {
- name: '一键求助',
- type: 'line',
- stack: '总量',
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '违禁品',
- type: 'line',
- stack: '总量',
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '红色健康码',
- type: 'line',
- stack: '总量',
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '体温异常',
- type: 'line',
- stack: '总量',
- data: [320, 332, 301, 334, 390, 330, 320]
- }
- ]
- };
-
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
+ },
+ series: [
+ {
+ name: '一键求助',
+ type: 'line',
+ stack: '总量',
+ data: data.data.alarmTimeDis
+ },
+ {
+ name: '违禁品',
+ type: 'line',
+ stack: '总量',
+ data: data.data.parcelTimeDis
+ },
+ {
+ name: '红色健康码',
+ type: 'line',
+ stack: '总量',
+ data: data.data.healthcodeTimeDis
+ },
+ {
+ name: '体温异常',
+ type: 'line',
+ stack: '总量',
+ data: data.data.animalTimeDis
+ }
+ ]
+ };
+ myChart.setOption(option);
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
+ })
},
//点击按钮获取不同时间段的数据
getData(date){
+ var that = this;
+ that.activeClass=date;
var data = this.getDate(date);
- //调用方法
+ //调用方法获取数据
+ this.getStatisData(data);
+ },
+
+ getStatisData(data){
//统计预警总数
this.getStatisTotalData(data);
//预警数量统计
@@ -867,9 +910,6 @@
return quarterStartMonth;
}
-
-
-
},
}
@@ -877,11 +917,7 @@
</script>
<style lang="scss">
- .el-button .btn-color {
- color: rgb(255, 255, 255);
- background-color: #29C093;
- border-color: #29C093;
- }
+
@import '@/styles/alarmAnalysis/alarmAnalysis.scss'
</style>
\ No newline at end of file
--
Gitblit v1.9.3