From 9c67dc3526d8ad356e1dcd0cc80e4382866ea6a7 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 09 Apr 2021 17:13:08 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
---
src/views/alarmManagement/alarmAnalysis.vue | 475 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 368 insertions(+), 107 deletions(-)
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index ccc4a70..6fc7a68 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -7,28 +7,28 @@
<el-button-group class="timeBtn">
<el-button
v-bind:class="activeClass == 1 ? 'btn-color' : ''"
- size="mini"
+ size="small"
@click="getData(1)">
本周
</el-button>
-
+
<el-button
v-bind:class="activeClass == 2 ? 'btn-color' : ''"
- size="mini"
+ size="small"
@click="getData(2)">
月初至今
</el-button>
-
+
<el-button
v-bind:class="activeClass == 3 ? 'btn-color' : ''"
- size="mini"
+ size="small"
@click="getData(3)">
季度至今
</el-button>
</el-button-group>
<el-date-picker
class="timeSearch"
- size="mini"
+ size="small"
v-model="dateTime"
type="daterange"
@change="timeChange"
@@ -50,6 +50,10 @@
<!-- 预警类型占比 -->
<div class="alarmTypePro">
<div id="alarmTypeProEcharts"></div>
+ <div class="alarmTypeTotal">
+ <div class="numAlarmType"><span>{{alarmTypeTotal}}</span></div>
+ <div class="textAlarmType"><span>总预警数</span></div>
+ </div>
<div class="alarmTypeProStatis">
<avue-data-cardtext :option="alarmTypeProStatis"></avue-data-cardtext>
</div>
@@ -64,33 +68,40 @@
<!-- 确认时间占比 -->
<div class="confirmTimePro">
<div id="confirmTimeProEcharts"></div>
+ <div class="confirmTimeTotal">
+ <div class="numConfirmTime"><span>{{confirmTimeTotal}}</span></div>
+ <div class="textConfirmTime"><span>确认预警数</span></div>
+ </div>
<div class="confirmTimeProStatis">
<avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
</div>
</div>
<!-- 预警平均确认速度排行 -->
<div class="confirmAverageSpeed">
+ <div class="confirmAverageSpeedTitle"><span>预警平均确认速度排行</span></div>
<avue-crud :data="confirmAverageSpeedData" :option="confirmAverageSpeedOption"></avue-crud>
</div>
<!-- 预警时间分布 -->
<div class="alarmTimeDis">
<div id="alarmTimeDisEchars"></div>
</div>
-
+
<!-- 底部 -->
<div class="low"></div>
</div>
</template>
-
+
<script>
import echarts from 'echarts'
import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro,selAlarmTimeDis} from "@/api/statis/statis";
import alarmVue from '../alarm/alarm.vue';
-
+
export default {
data(){
return {
activeClass:2,
+ alarmTypeTotal:0,
+ confirmTimeTotal:0,
statisToTalData: {
span:6,
data: []
@@ -116,7 +127,7 @@
confirmAverageSpeedOption:{}
};
},
-
+
mounted() {
//默认是查询当月的数据
this.getData(2);
@@ -125,22 +136,35 @@
window.handleStartParcelKind=this.handleStartParcelKind;
window.handleStartEquipment=this.handleStartEquipment;
window.handleStartSuser=this.handleStartSuser;
+ window.handleStartAnimalHeat=this.handleStartAnimalHeat;
+ window.handleStartHealthcode=this.handleStartHealthcode;
},
-
+
methods: {
//日期选好后触发
timeChange(){
//清空选项按钮标记
var that = this;
+ var time = this.dateTime;
+ var startTime = time[0]+"";
+ if(startTime.indexOf("-")==-1){
+ //修改时间格式
+ time[0]=this.timeFormat(time[0]);
+ time[1]=this.timeFormat(time[1]);
+ }
+ //如果开始时间和结束时间相同，则修改结束时间
+ if(time[0]==time[1]){
+ time[1]= time[0].substring(0,10)+" 23:59:59";
+ }
that.activeClass = 0;
var data = {};
data ={
- startTime:this.timeFormat(this.dateTime[0]),
- endTime:this.timeFormat(this.dateTime[1])
+ startTime:time[0],
+ endTime:time[1]
}
this.getStatisData(data);
},
-
+
//中国区时间格式转换
timeFormat(date){
let y = date.getFullYear()
@@ -157,18 +181,30 @@
let time= y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
return time;
},
-
+
//警情统计总数
getStatisTotalData(data){
selectIndexCount(data).then(res => {
var that = this;
+ var time = this.dateTime;
+ var startTime = time[0]+"";
+ if(startTime.indexOf("-")==-1){
+ //修改时间格式
+ time[0]=this.timeFormat(time[0]);
+ time[1]=this.timeFormat(time[1]);
+ }
+ //如果开始时间和结束时间相同，则修改结束时间
+ if(time[0]==time[1]){
+ time[1]= time[0].substring(0,10)+" 23:59:59";
+ }
that.statisToTalData.data = [
{
click: function (item) {
- var data =[];
+ var data = [];
data.push({
+ startTime:time[0],
+ endTime:time[1],
waringType:'紧急求救',
- status:0
})
window.parent.handleStartAlarm(data);
},
@@ -180,20 +216,20 @@
{
click: function (item) {
var data =[];
- // 当前时间
- var date = new Date();
- //年
- var Y = date.getFullYear();
- //月
- var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
- //日
- var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-
+ // // 当前时间
+ // var date = new Date();
+ // //年
+ // var Y = date.getFullYear();
+ // //月
+ // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+ // //日
+ // var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+ console.log(this.dateTime,111);
data.push({
- startTime:Y + "-" + M + "-" + D + " 00:00:00",
- endTime: Y +"-" +M +"-" + D + " 23:59:59",
- decisioDiagramResult:"contraband"
- });
+ startTime:time[0],
+ endTime: time[1],
+ decisioDiagramResult:"contraband"
+ });
window.parent.handleStartParcel(data);
},
title: '违禁包裹数',
@@ -205,19 +241,19 @@
click: function (item) {
var data = [];
// 当前时间
- var date = new Date();
- //年
- var Y = date.getFullYear();
- //月
- var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
- //日
- var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-
+ // var date = new Date();
+ // //年
+ // var Y = date.getFullYear();
+ // //月
+ // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+ // //日
+ // var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+
data.push({
- startTime:Y + "-" + M + "-" + D + " 00:00:00",
- endTime: Y +"-" +M +"-" + D + " 23:59:59",
- decisioDiagramResult:"contraband"
- });
+ startTime:time[0],
+ endTime: time[1],
+ decisioDiagramResult:"contraband"
+ });
window.parent.handleStartParcelKind(data);
},
title: '违禁物品数',
@@ -251,7 +287,7 @@
];
});
},
-
+
//主动报警（一键求助，电话报警）分页数据
handleStartAlarm(data) {
this.$router.push({
@@ -259,16 +295,15 @@
query: data[0],
});
},
-
+
//包裹分页数据
handleStartParcel(data) {
- debugger;
this.$router.push({
path: `/parcel/index`,
query: data[0],
});
},
-
+
//违禁品分页数据
handleStartParcelKind(data) {
this.$router.push({
@@ -276,7 +311,7 @@
query: data[0],
});
},
-
+
//在线设备分页数据
handleStartEquipment(data) {
this.$router.push({
@@ -284,14 +319,30 @@
query: data[0],
});
},
-
+
//客户管理分页数据
handleStartSuser() {
this.$router.push({
path: `/suser/index`,
});
},
-
+
+ //体温监测分页数据
+ handleStartAnimalHeat(data) {
+ this.$router.push({
+ path: `/animalHeat/animalHeatPage`,
+ query: data[0],
+ });
+ },
+
+ //健康码分页数据
+ handleStartHealthcode(data) {
+ this.$router.push({
+ path: `/healthcode/healthcodePage`,
+ query: data[0],
+ });
+ },
+
//预警数量分布
getAlarmNumberStatis(data){
//调接口，获取数据
@@ -334,6 +385,45 @@
})
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
+ myChart.on('click', function (params) {
+ var data = [];
+
+ if(params.seriesName=='一键求助'){
+ data.push({
+ startTime:params.name+" 00:00:00",
+ endTime:params.name+" 23:59:59",
+ waringType:'紧急求救',
+ })
+ window.parent.handleStartAlarm(data);
+ }
+
+ if(params.seriesName=='违禁品'){
+ data.push({
+ startTime:params.name+" 00:00:00",
+ endTime:params.name+" 23:59:59",
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
+ }
+
+ if(params.seriesName=='红色健康码'){
+ data.push({
+ startTime:params.name+" 00:00:00",
+ endTime:params.name+" 23:59:59",
+ type:3
+ });
+ window.parent.handleStartHealthcode(data);
+ }
+
+ if(params.seriesName=='体温异常'){
+ data.push({
+ startTime:params.name+" 00:00:00",
+ endTime:params.name+" 23:59:59",
+ status:1
+ });
+ window.parent.handleStartAnimalHeat(data);
+ }
+ })
var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
let option = {
color:colors,
@@ -374,14 +464,14 @@
},
series: data
};
-
+
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
})
},
-
+
//警情类别统计总数
getAlarmClassifyStatis(data){
selAlarmDayAveragePro(data).then(res =>{
@@ -391,6 +481,13 @@
that.alarmClassifyStatis.data = [
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ })
+ window.parent.handleStartAlarm(data);
},
title:'一键求助',
color:'#FF9836',
@@ -400,6 +497,13 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
},
title:'违禁品',
color:'#1E90FF',
@@ -408,6 +512,13 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ type:3
+ });
+ window.parent.handleStartHealthcode(data);
},
title:'红色健康码',
color:'#F34A4A',
@@ -416,6 +527,13 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ status:1
+ });
+ window.parent.handleStartAnimalHeat(data);
},
title:'体温异常',
color:'#8058A5',
@@ -425,12 +543,17 @@
];
})
},
-
-
+
+
//预警类型占比统计
getAlarmTypeProEcharts(data){
selAlarmDayAveragePro(data).then(res =>{
+ var that = this;
+ //计算总和
+ that.alarmTypeTotal = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
var data = [];
+ var startDate = this.dateTime[0];
+ var endDate = this.dateTime[1];
data.push(
{value: res.data.data[0], name: '一键求助'},
{value: res.data.data[1], name: '违禁品'},
@@ -439,6 +562,46 @@
)
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
+ myChart.on('click', function (params) {
+ var data = [];
+
+ if(params.name=='一键求助'){
+ data.push({
+ startTime:startDate,
+ endTime:endDate,
+ waringType:'紧急求救',
+ })
+ window.parent.handleStartAlarm(data);
+ }
+
+ if(params.name=='违禁品'){
+ data.push({
+ startTime:startDate,
+ endTime:endDate,
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
+ }
+
+ if(params.name=='红色健康码'){
+ data.push({
+ startTime:startDate,
+ endTime:endDate,
+ type:3
+ });
+ window.parent.handleStartHealthcode(data);
+ }
+
+ if(params.name=='体温异常'){
+ data.push({
+ startTime:startDate,
+ endTime:endDate,
+ status:1
+ });
+ window.parent.handleStartAnimalHeat(data);
+ }
+
+ })
var colors = ['#FF9836', '#3fa1ff', '#F34A4A', '#8058A5'];
let option = {
color:colors,
@@ -473,13 +636,6 @@
show: false,
position: 'center'
},
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
labelLine: {
show: false
},
@@ -494,16 +650,24 @@
})
},
-
-
+
+
//警情类别统计总数(分类占比)
getAlarmTypeProStatis(data){
selAlarmDayAveragePro(data).then(res =>{
var that = this;
+ var time = this.dateTime;
var count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
that.alarmTypeProStatis.data = [
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ })
+ window.parent.handleStartAlarm(data);
},
title:'一键求助',
color:'#FF9836',
@@ -513,6 +677,13 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
},
title:'违禁品',
color:'#3fa1ff',
@@ -521,6 +692,13 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ type:3
+ });
+ window.parent.handleStartHealthcode(data);
},
title:'红色健康码',
color:'#F34A4A',
@@ -529,6 +707,13 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ status:1
+ });
+ window.parent.handleStartAnimalHeat(data);
},
title:'体温异常',
color:'#8058A5',
@@ -538,7 +723,7 @@
];
})
},
-
+
//预警设备类型占比统计
getAlarmEquipmentProEcharts(data){
let echarts = require('echarts');
@@ -575,13 +760,6 @@
show: false,
position: 'center'
},
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
labelLine: {
show: false
},
@@ -600,7 +778,7 @@
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
},
-
+
//预警设备类型占比统计(分类表格)
getAlarmEquipmentProStatis(data){
var that = this;
@@ -631,17 +809,32 @@
}
]
}
-
-
+
+
},
-
-
+
+
//确认时间占比统计
getConfirmTimeProEcharts(data){
selConfirmTimePro(data).then(res =>{
var data = res.data.data;
+ var that =this;
+ //计算总数
+ that.confirmTimeTotal = data[0]+data[1]+data[2]+data[3];
+ var time = this.dateTime;
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
+ //饼图点击事件
+ myChart.on('click',function(params){
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: params.name
+ })
+ window.parent.handleStartAlarm(data);
+ })
var colors = ['green','#3fa1ff','yellow','#F34A4A']
let option = {
color:colors,
@@ -676,13 +869,6 @@
show: false,
position: 'center'
},
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
labelLine: {
show: false
},
@@ -700,15 +886,24 @@
window.addEventListener('resize',function() {myChart.resize()});
})
},
-
+
//确认时间占比（分类）
getConfirmTimeProStatis(data){
selConfirmTimePro(data).then(res =>{
var data = res.data.data;
+ var time = this.dateTime;
var that = this;
that.confirmTimeProStatis.data = [
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: '小于5分钟'
+ })
+ window.parent.handleStartAlarm(data);
},
title:'小于5分钟',
color:'green',
@@ -717,6 +912,14 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: '5-10分钟'
+ })
+ window.parent.handleStartAlarm(data);
},
title:'5-10分钟',
color:'#3fa1ff',
@@ -724,6 +927,14 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: '10-30分钟'
+ })
+ window.parent.handleStartAlarm(data);
},
title:'10-30分钟',
color:'yellow',
@@ -731,6 +942,14 @@
},
{
click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: '30分钟以上'
+ })
+ window.parent.handleStartAlarm(data);
},
title:'30分钟以上',
color:'#F34A4A',
@@ -739,8 +958,8 @@
];
})
},
-
- //预警平均速度排行(table)
+
+ //预警平均确认速度排行(table)
confirmAverageSpeedStatis(data){
var that = this;
that.confirmAverageSpeedData=[
@@ -750,7 +969,7 @@
}
];
that.confirmAverageSpeedOption={
- title:'表格的标题',
+ title:'预警平均确认速度排行',
titleSize:'h3',
titleStyle:{
color:'red'
@@ -771,13 +990,58 @@
]
}
},
-
+
//预警时间分布
getAlarmTimeDisEchars(data){
selAlarmTimeDis(data).then(res =>{
var data = res.data;
+ var time = this.dateTime;
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
+ //图表数据点击事件
+ myChart.on('click', function (params) {
+ var data = [];
+ if(params.seriesName=='一键求助'){
+ window.parent.handleStartAlarm(data);
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: params.name
+ })
+ window.parent.handleStartAlarm(data);
+ }
+
+ if(params.seriesName=='违禁品'){
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ decisioDiagramResult:"contraband",
+ timeDesc: params.name
+ });
+ window.parent.handleStartParcelKind(data);
+ }
+
+ if(params.seriesName=='红色健康码'){
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ type:3,
+ timeDesc: params.name
+ });
+ window.parent.handleStartHealthcode(data);
+ }
+
+ if(params.seriesName=='体温异常'){
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ status:1,
+ timeDesc: params.name
+ });
+ window.parent.handleStartAnimalHeat(data);
+ }
+ })
var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
let option = {
color: colors,
@@ -833,25 +1097,21 @@
{
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
}
]
@@ -861,7 +1121,7 @@
window.addEventListener('resize',function() {myChart.resize()});
})
},
-
+
//点击按钮获取不同时间段的数据
getData(date){
var that = this;
@@ -870,7 +1130,8 @@
//调用方法获取数据
this.getStatisData(data);
},
-
+
+ //调用方法，获取统计数据
getStatisData(data){
//统计预警总数
this.getStatisTotalData(data);
@@ -891,8 +1152,8 @@
//预警时间分布统计
this.getAlarmTimeDisEchars(data);
},
-
-
+
+
//计算两个日期之间的天数
getDaysBetween(startTime,endTime){
var startDate = Date.parse(startTime);
@@ -906,8 +1167,8 @@
var days=(endDate - startDate)/(1*24*60*60*1000);
return days;
},
-
-
+
+ //计算时间
getDate(date){
var that = this;
var today = new Date();
@@ -938,8 +1199,8 @@
endTime:this.dateTime[1]
}
},
-
-
+
+
//本日
showToDay(Nowdate){
var M=Number(Nowdate.getMonth())+1;
@@ -952,7 +1213,7 @@
}
return Nowdate.getFullYear()+"-"+M+"-"+day;
},
-
+
//本周第一天
showWeekFirstDay(Nowdate){
var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
@@ -966,7 +1227,7 @@
}
return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
},
-
+
//本月第一天
showMonthFirstDay(Nowdate){
var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
@@ -976,14 +1237,14 @@
}
return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
},
-
+
//本季度的第一天
getQuarterStartDate(Nowdate){
var quarterStartDate = this.getQuarterStartMonth(Nowdate);
return Nowdate.getFullYear()+"-"+quarterStartDate+"-"+"01";
},
-
-
+
+
//本季度的第一个月份
getQuarterStartMonth(Nowdate){
var nowMonth = Nowdate.getMonth()+1;
@@ -1003,9 +1264,9 @@
}
return quarterStartMonth;
}
-
+
},
-
+
}
@@ -1013,5 +1274,5 @@
<style lang="scss">
@import '@/styles/alarmAnalysis/alarmAnalysis.scss'
-
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3