From ae9dd5b413e679b1da868cc456f2a8fcd2c4f619 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Tue, 06 Apr 2021 22:28:43 +0800
Subject: [PATCH] 预警分析页面预警数量统计数据回填，预警分类占比饼图数据回填
---
src/api/statis/statis.js | 20 ++
src/views/alarmManagement/alarmAnalysis.vue | 374 +++++++++++++++++++++++++++++++---------------------
2 files changed, 241 insertions(+), 153 deletions(-)
diff --git a/src/api/statis/statis.js b/src/api/statis/statis.js
index d01d819..4894ee3 100644
--- a/src/api/statis/statis.js
+++ b/src/api/statis/statis.js
@@ -8,4 +8,24 @@
...params,
}
})
+}
+
+export const selectAlertScount = (params) => {
+ return request({
+ url: '/api/blade-jfpts/alarm/alarm/selectAlertScount',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
+}
+
+export const selAlarmDayAveragePro = (params) => {
+ return request({
+ url: '/api/blade-jfpts/alarm/alarm/selAlarmDayAveragePro',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
}
\ No newline at end of file
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 775572b..f8b8810 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -78,7 +78,8 @@
<script>
import echarts from 'echarts'
- import {selectIndexCount} from "@/api/statis/statis";
+ import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro} from "@/api/statis/statis";
+import alarmVue from '../alarm/alarm.vue';
export default {
data(){
@@ -111,40 +112,22 @@
},
mounted() {
- //统计预警总数
- this.getStatisTotalData();
- //预警数量统计
- this.getAlarmNumberStatis();
- //预警分类统计
- this.getAlarmClassifyStatis();
- //预警类型占比统计
- this.getAlarmTypeProEcharts();
- this.getAlarmTypeProStatis();
- //预警设备类型占比统计
- this.getAlarmEquipmentProEcharts();
- this.getAlarmEquipmentProStatis();
- //确认时间占比统计
- this.getConfirmTimeProEcharts();
- this.getConfirmTimeProStatis();
- this.confirmAverageSpeedStatis();
- //预警时间分布统计
- this.getAlarmTimeDisEchars();
+ //默认是查询当月的数据
+ this.getData(2);
+
},
methods: {
//警情统计总数
getStatisTotalData(data){
selectIndexCount(data).then(res => {
- console.log(res.data);
- this.form = res.data.data;
- });
var that = this;
that.statisToTalData.data = [
{
click: function (item) {
},
title: '警情总数',
- count: 12332,
+ count: res.data.data[0].value,
icon: 'el-icon-warning',
color: '#F34A4A'
},
@@ -152,7 +135,7 @@
click: function (item) {
},
title: '违禁包裹数',
- count: 33,
+ count: res.data.data[1].value,
icon: 'el-icon-warning',
color: '#FF9836'
},
@@ -160,7 +143,7 @@
click: function (item) {
},
title: '违禁物品数',
- count: 2223,
+ count: res.data.data[2].value,
icon: 'el-icon-setting',
color: '#8058A5'
},
@@ -168,7 +151,7 @@
click: function (item) {
},
title: '在线设备数',
- count: 2223,
+ count: res.data.data[3].value,
icon: 'el-icon-setting',
color: '#29C093'
},
@@ -176,91 +159,114 @@
click: function (item) {
},
title: '客户数量',
- count: 2223,
+ count: res.data.data[4].value,
icon: 'el-icon-setting',
color: '#3AA7F0'
}
];
+ });
},
//预警数量分布
- getAlarmNumberStatis(){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '1%',
- top: 25,
- textAlign:'left',
- text: '预警时间分布'
- },
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '3%',
- right: '7%',
- bottom: '10%',
- top:'20%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: true,
- lineStyle:{
- type:'dashed'
+ getAlarmNumberStatis(data){
+ //调接口，获取数据
+ selectAlertScount(data).then(res =>{
+ console.log(res.data,111);
+ var typesArray = res.data.data.types;
+ var timesArray = res.data.data.times;
+ var dataArray = res.data.data.dataList;
+ console.log(dataArray,333);
+ var data = [];
+ dataArray.forEach(item => {
+ if (item.name == typesArray[0]) {
+ data.push({
+ name: item.name,
+ data: item.alarmData,
+ type: 'line'
+ })
+ }
+ if (item.name == typesArray[1]) {
+ data.push({
+ name: item.name,
+ type: 'line',
+ data: item.parcelData
+ })
+ }
+
+ if (item.name == typesArray[2]) {
+ data.push({
+ name: item.name,
+ type: 'line',
+ data: item.healthcodeData
+ })
+ }
+
+ if (item.name == typesArray[3]) {
+ data.push({
+ name: item.name,
+ type: 'line',
+ data: item.animalData
+ })
+ }
+ })
+ let echarts = require('echarts');
+ let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
+ let option = {
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '1%',
+ top: 25,
+ textAlign:'left',
+ text: '预警数量分布'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '7%',
+ bottom: '10%',
+ top:'20%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: timesArray
+ },
+ 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]
- }
- ]
- };
+ },
+ series: data
+ };
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
+ myChart.setOption(option);
+
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
+ })
},
//警情类别统计总数
- getAlarmClassifyStatis(){
- var that = this;
- that.alarmClassifyStatis.data = [
+ getAlarmClassifyStatis(data){
+ selAlarmDayAveragePro(data).then(res =>{
+ var time = this.dateTime;
+ var day = this.getDaysBetween(time[0],time[1]);
+
+ console.log(time,102);
+ console.log(Math.round(day),103);
+ var that = this;
+ that.alarmClassifyStatis.data = [
{
click: function (item) {
},
@@ -268,7 +274,7 @@
color:'yellow',
target:'_blank',
name:'日平均一键求助数',
- date:'1.00'
+ date:(res.data.data[0]/Math.round(day)).toFixed(2)
},
{
click: function (item) {
@@ -276,7 +282,7 @@
title:'违禁品',
color:'green',
name:'日平均违禁品数',
- date:'3.00'
+ date:(res.data.data[1]/Math.round(day)).toFixed(2)
},
{
click: function (item) {
@@ -284,7 +290,7 @@
title:'红色健康码',
color:'#3fa1ff',
name:'日平均红色健康码数',
- date:'1.00'
+ date:(res.data.data[2]/Math.round(day)).toFixed(2)
},
{
click: function (item) {
@@ -292,14 +298,23 @@
title:'体温异常',
color:'red',
name:'日平均体温异常数',
- date:'10.00'
+ date:(res.data.data[3]/Math.round(day)).toFixed(2)
}
];
+ })
},
//预警类型占比统计
- getAlarmTypeProEcharts(){
+ getAlarmTypeProEcharts(data){
+ selAlarmDayAveragePro(data).then(res =>{
+ var data = [];
+ data.push(
+ {value: res.data.data[0], name: '一键求助'},
+ {value: res.data.data[1], name: '违禁品'},
+ {value: res.data.data[2], name: '红色健康码'},
+ {value: res.data.data[3], name: '体温异常'}
+ )
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
let option = {
@@ -338,20 +353,14 @@
emphasis: {
label: {
show: true,
- fontSize: '40',
+ fontSize: '18',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
- data: [
- {value: 1048, name: '搜索引擎'},
- {value: 735, name: '直接访问'},
- {value: 580, name: '邮件营销'},
- {value: 484, name: '联盟广告'},
- {value: 300, name: '视频广告'}
- ]
+ data: data
}
]
};
@@ -359,53 +368,58 @@
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
+ })
+
},
//警情类别统计总数(分类占比)
- getAlarmTypeProStatis(){
- var that = this;
- that.alarmTypeProStatis.data = [
+ getAlarmTypeProStatis(data){
+ selAlarmDayAveragePro(data).then(res =>{
+ var that = this;
+ var count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
+ console.log(count,1112);
+ that.alarmTypeProStatis.data = [
{
click: function (item) {
},
title:'一键求助',
color:'yellow',
target:'_blank',
- name:'0',
- date:'0.00%'
+ name:res.data.data[0],
+ date:res.data.data[0]/count*100+'%'
},
{
click: function (item) {
},
title:'违禁品',
color:'green',
- name:'0',
- date:'0.00%'
+ name:res.data.data[1],
+ date:res.data.data[1]/count*100+'%'
},
{
click: function (item) {
},
title:'红色健康码',
color:'#3fa1ff',
- name:'0',
- date:'0.00%'
+ name:res.data.data[2],
+ date:res.data.data[2]/count*100+'%'
},
{
click: function (item) {
},
title:'体温异常',
color:'red',
- name:'0',
- date:'0.00%'
+ name:res.data.data[3],
+ date:res.data.data[3]/count*100+'%'
}
];
+ })
+
},
-
-
//预警设备类型占比统计
- getAlarmEquipmentProEcharts(){
+ getAlarmEquipmentProEcharts(data){
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('alarmEquipmentProEcharts'));
let option = {
@@ -468,7 +482,7 @@
},
//预警设备类型占比统计(分类表格)
- getAlarmEquipmentProStatis(){
+ getAlarmEquipmentProStatis(data){
var that = this;
that.alarmEquipmentProStatisData=[
{
@@ -503,7 +517,7 @@
//确认时间占比统计
- getConfirmTimeProEcharts(){
+ getConfirmTimeProEcharts(data){
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
let option = {
@@ -566,7 +580,7 @@
},
//确认时间占比（分类）
- getConfirmTimeProStatis(){
+ getConfirmTimeProStatis(data){
var that = this;
that.confirmTimeProStatis.data = [
{
@@ -602,7 +616,7 @@
},
//预警平均速度排行(table)
- confirmAverageSpeedStatis(){
+ confirmAverageSpeedStatis(data){
var that = this;
that.confirmAverageSpeedData=[
{
@@ -634,7 +648,7 @@
},
//预警时间分布
- getAlarmTimeDisEchars(){
+ getAlarmTimeDisEchars(data){
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
let option = {
@@ -713,58 +727,112 @@
},
//点击按钮获取不同时间段的数据
- getData(data){
- var that = this;
+ getData(date){
+ var data = this.getDate(date);
+ //调用方法
+ //统计预警总数
+ this.getStatisTotalData(data);
+ //预警数量统计
+ this.getAlarmNumberStatis(data);
+ //预警分类统计
+ this.getAlarmClassifyStatis(data);
+ //预警类型占比统计
+ this.getAlarmTypeProEcharts(data);
+ this.getAlarmTypeProStatis(data);
+ //预警设备类型占比统计
+ this.getAlarmEquipmentProEcharts(data);
+ this.getAlarmEquipmentProStatis(data);
+ //确认时间占比统计
+ this.getConfirmTimeProEcharts(data);
+ this.getConfirmTimeProStatis(data);
+ this.confirmAverageSpeedStatis(data);
+ //预警时间分布统计
+ this.getAlarmTimeDisEchars(data);
+ },
+
+
+ //计算两个日期之间的天数
+ getDaysBetween(startTime,endTime){
+ var startDate = Date.parse(startTime);
+ var endDate = Date.parse(endTime);
+ if (startDate>endDate){
+ return 0;
+ }
+ if (startDate==endDate){
+ return 1;
+ }
+ var days=(endDate - startDate)/(1*24*60*60*1000);
+ return days;
+ },
+
+
+ getDate(date){
+ var that = this;
var today = new Date();
var startTime ='';
var endTime = '';
//本周的时间
- if(data==1){
- startTime = this.showWeekFirstDay(today);
- endTime = this.showToDay(today);
+ if(date==1){
+ startTime = this.showWeekFirstDay(today)+ " 00:00:00";
+ endTime = this.showToDay(today)+ " 23:59:59";
that.dateTime = [startTime,endTime];
}
//月初至今的时间
- if(data==2){
- startTime = this.showMonthFirstDay(today);
- endTime = this.showToDay(today);
+ if(date==2){
+ startTime = this.showMonthFirstDay(today)+ " 00:00:00";
+ endTime = this.showToDay(today)+ " 23:59:59";
that.dateTime = [startTime,endTime];
}
//本季度初至今的时间
- if(data==3){
- startTime = this.getQuarterStartDate(today);
- endTime = this.showToDay(today);
+ if(date==3){
+ startTime = this.getQuarterStartDate(today)+ " 00:00:00";
+ endTime = this.showToDay(today)+ " 23:59:59";
that.dateTime = [startTime,endTime];
}
//封装数据
- var data = {};
- data ={
+ var data ={};
+ return data ={
startTime:this.dateTime[0],
endTime:this.dateTime[1]
}
- console.log(data,111);
- //调用方法
},
+
//本日
showToDay(Nowdate){
var M=Number(Nowdate.getMonth())+1;
- console.log(Nowdate.getFullYear,111);
- return Nowdate.getFullYear()+"-"+M+"-"+Nowdate.getDate();
+ if(M<10){
+ M="0"+M;
+ }
+ var day = Nowdate.getDate();
+ if(day<10){
+ day = "0"+day;
+ }
+ return Nowdate.getFullYear()+"-"+M+"-"+day;
},
//本周第一天
showWeekFirstDay(Nowdate){
var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
- var M=Number(WeekFirstDay.getMonth())+1;
- return WeekFirstDay.getFullYear()+"-"+M+"-"+WeekFirstDay.getDate();
+ var M=Number(WeekFirstDay.getMonth())+1;
+ if(M<10){
+ M="0"+M;
+ }
+ var day = WeekFirstDay.getDate();
+ if(day<10){
+ day = "0"+day;
+ }
+ return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
},
//本月第一天
showMonthFirstDay(Nowdate){
var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
- var M=Number(MonthFirstDay.getMonth())+1
- return MonthFirstDay.getFullYear()+"-"+M+"-"+MonthFirstDay.getDate();
+ var M=Number(MonthFirstDay.getMonth())+1;
+ if(M<10){
+ M="0"+M;
+ }
+ return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
},
//本季度的第一天
@@ -804,7 +872,7 @@
</script>
<style lang="scss">
- .el-button.btn-color {
+ .el-button .btn-color {
color: rgb(255, 255, 255);
background-color: #29C093;
border-color: #29C093;
--
Gitblit v1.9.3