From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改
---
src/views/alarmManagement/alarmAnalysis.vue | 1278 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,278 insertions(+), 0 deletions(-)
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index e69de29..5bc3c17 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -0,0 +1,1278 @@
+<template>
+ <div class="big">
+ <!-- 标题 -->
+<!-- <div class="alarm_title"><span>预警分析</span></div>-->
+ <!-- 时间按钮 -->
+ <div class="timeSearchBtn">
+ <el-button-group class="timeBtn">
+ <el-button
+ v-bind:class="activeClass == 1 ? 'btn-color' : ''"
+ size="small"
+ @click="getData(1)">
+ 本周
+ </el-button>
+
+ <el-button
+ v-bind:class="activeClass == 2 ? 'btn-color' : ''"
+ size="small"
+ @click="getData(2)">
+ 月初至今
+ </el-button>
+
+ <el-button
+ v-bind:class="activeClass == 3 ? 'btn-color' : ''"
+ size="small"
+ @click="getData(3)">
+ 季度至今
+ </el-button>
+ </el-button-group>
+ <el-date-picker
+ class="timeSearch"
+ size="small"
+ v-model="dateTime"
+ type="daterange"
+ @change="timeChange"
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <!-- 监测点 -->
+ <div class="statisTotal">
+ <avue-data-box :option="statisToTalData" class="statisTotalAvueDataBox"></avue-data-box>
+ </div>
+ <!-- 预警数量分布 -->
+ <div class="alarmStatis">
+ <div id="alarmNumberStatis">
+ </div>
+ <div class="alarmClassifyStatis">
+ <avue-data-cardtext :option="alarmClassifyStatis"></avue-data-cardtext>
+ </div>
+ </div>
+ <!-- 预警类型占比 -->
+ <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>
+ </div>
+ <!-- 预警设备类型占比 -->
+ <div class="alarmEquipmentPro" style="display:none">
+ <div id="alarmEquipmentProEcharts"></div>
+ <div class="alarmEquipmentProStatis">
+ <avue-crud :data="alarmEquipmentProStatisData" :option="alarmEquipmentProStatisOption"></avue-crud>
+ </div>
+ </div>
+ <!-- 确认时间占比 -->
+ <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: []
+ },
+ dateTime: '',
+ alarmClassifyStatis:{
+ span:6,
+ data: []
+ },
+ alarmTypeProStatis:{
+ span:10,
+ height:100,
+ data: []
+ },
+ alarmEquipmentProStatisData:[],
+ alarmEquipmentProStatisOption:{},
+ confirmTimeProStatis:{
+ span:10,
+ height:100,
+ data: []
+ },
+ confirmAverageSpeedData:[],
+ confirmAverageSpeedOption:{}
+ };
+ },
+
+ mounted() {
+ //默认是查询当月的数据
+ this.getData(2);
+ window.handleStartAlarm=this.handleStartAlarm;
+ window.handleStartParcel=this.handleStartParcel;
+ 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:time[0],
+ endTime:time[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 => {
+ 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 = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ })
+ window.parent.handleStartAlarm(data);
+ },
+ title: '警情总数',
+ count: res.data.data[0].value,
+ icon: 'el-icon-message-solid',
+ color: '#F34A4A'
+ },
+ {
+ 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();
+ console.log(this.dateTime,111);
+ data.push({
+ startTime:time[0],
+ endTime: time[1],
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcel(data);
+ },
+ title: '违禁包裹数',
+ count: res.data.data[1].value,
+ icon: 'el-icon-shopping-bag-1',
+ color: '#FF9836'
+ },
+ {
+ 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();
+
+ data.push({
+ startTime:time[0],
+ endTime: time[1],
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
+ },
+ title: '违禁物品数',
+ count: res.data.data[2].value,
+ icon: 'el-icon-warning',
+ color: '#8058A5'
+ },
+ {
+ click: function (item) {
+ var data =[];
+ data.push({
+ dxtype: 4
+ });
+ //console.log(data[0],111);
+ window.parent.handleStartEquipment(data);
+ },
+ title: '在线设备数',
+ count: res.data.data[3].value,
+ icon: 'el-icon-success',
+ color: '#29C093'
+ },
+ {
+ click: function (item) {
+ window.parent.handleStartSuser();
+ },
+ title: '客户数量',
+ count: res.data.data[4].value,
+ icon: 'el-icon-s-custom',
+ color: '#3AA7F0'
+ }
+ ];
+ });
+ },
+
+ //主动报警（一键求助，电话报警）分页数据
+ handleStartAlarm(data) {
+ this.$router.push({
+ path: `/realTimePolice/index`,
+ query: data[0],
+ });
+ },
+
+ //包裹分页数据
+ handleStartParcel(data) {
+ this.$router.push({
+ path: `/parcel/index`,
+ query: data[0],
+ });
+ },
+
+ //违禁品分页数据
+ handleStartParcelKind(data) {
+ this.$router.push({
+ path: `/parcelKind/index`,
+ query: data[0],
+ });
+ },
+
+ //在线设备分页数据
+ handleStartEquipment(data) {
+ this.$router.push({
+ path: `/clientManagement/index`,
+ 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){
+ //调接口，获取数据
+ selectAlertScount(data).then(res =>{
+ var typesArray = res.data.data.types;
+ var timesArray = res.data.data.times;
+ var dataArray = res.data.data.dataList;
+ 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'));
+ 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,
+ 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: data
+ };
+
+ myChart.setOption(option);
+
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
+ })
+ },
+
+ //警情类别统计总数
+ getAlarmClassifyStatis(data){
+ selAlarmDayAveragePro(data).then(res =>{
+ var time = this.dateTime;
+ var day = this.getDaysBetween(time[0],time[1]);
+ var that = this;
+ that.alarmClassifyStatis.data = [
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ })
+ window.parent.handleStartAlarm(data);
+ },
+ title:'一键求助',
+ color:'#FF9836',
+ name:'日平均一键求助数',
+ date:(res.data.data[0]/Math.round(day)).toFixed(2)
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
+ },
+ title:'违禁品',
+ color:'#1E90FF',
+ name:'日平均违禁品数',
+ date:(res.data.data[1]/Math.round(day)).toFixed(2)
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ type:3
+ });
+ window.parent.handleStartHealthcode(data);
+ },
+ title:'红色健康码',
+ color:'#F34A4A',
+ name:'日平均红色健康码数',
+ date:(res.data.data[2]/Math.round(day)).toFixed(2)
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ status:1
+ });
+ window.parent.handleStartAnimalHeat(data);
+ },
+ title:'体温异常',
+ color:'#8058A5',
+ name:'日平均体温异常数',
+ date:(res.data.data[3]/Math.round(day)).toFixed(2)
+ }
+ ];
+ })
+ },
+
+
+ //预警类型占比统计
+ 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: '违禁品'},
+ {value: res.data.data[2], name: '红色健康码'},
+ {value: res.data.data[3], name: '体温异常'}
+ )
+ 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,
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '1%',
+ top: 25,
+ textAlign:'left',
+ text: '预警类型占比'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ grid: {
+ left: '1%',
+ right: '10%',
+ bottom: '5%',
+ top:'25%',
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['43%','60%'],
+ center: ['45%','53%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ labelLine: {
+ show: false
+ },
+ data: data
+ }
+ ]
+ };
+ myChart.setOption(option);
+
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
+ })
+
+ },
+
+
+ //警情类别统计总数(分类占比)
+ 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',
+ name:res.data.data[0],
+ date:(res.data.data[0]/count*100).toFixed(2)+'%'
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ decisioDiagramResult:"contraband"
+ });
+ window.parent.handleStartParcelKind(data);
+ },
+ title:'违禁品',
+ color:'#3fa1ff',
+ name:res.data.data[1],
+ date:(res.data.data[1]/count*100).toFixed(2)+'%'
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ type:3
+ });
+ window.parent.handleStartHealthcode(data);
+ },
+ title:'红色健康码',
+ color:'#F34A4A',
+ name:res.data.data[2],
+ date:(res.data.data[2]/count*100).toFixed(2)+'%'
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ status:1
+ });
+ window.parent.handleStartAnimalHeat(data);
+ },
+ title:'体温异常',
+ color:'#8058A5',
+ name:res.data.data[3],
+ date:(res.data.data[3]/count*100).toFixed(2)+'%'
+ }
+ ];
+ })
+ },
+
+ //预警设备类型占比统计
+ getAlarmEquipmentProEcharts(data){
+ let echarts = require('echarts');
+ let myChart = echarts.init(document.getElementById('alarmEquipmentProEcharts'));
+ let option = {
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '1%',
+ top: 25,
+ textAlign:'left',
+ text: '预警设备类型占比'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ grid: {
+ left: '1%',
+ right: '10%',
+ bottom: '5%',
+ top:'25%',
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['43%','60%'],
+ cneter: ['45%','53%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 1048, name: '搜索引擎'},
+ {value: 735, name: '直接访问'},
+ {value: 580, name: '邮件营销'},
+ {value: 484, name: '联盟广告'},
+ {value: 300, name: '视频广告'}
+ ]
+ }
+ ]
+ };
+ myChart.setOption(option);
+
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
+ },
+
+ //预警设备类型占比统计(分类表格)
+ getAlarmEquipmentProStatis(data){
+ var that = this;
+ that.alarmEquipmentProStatisData=[
+ {
+ name:'一键求助',
+ sex:'1',
+ date:'100%'
+ }
+ ];
+ that.alarmEquipmentProStatisOption={
+ menu:false,
+ menuBtn:false,
+ page:false,
+ align:'center',
+ menuAlign:'center',
+ column:[
+ {
+ label:'预警设备类型',
+ prop:'name'
+ },
+ {
+ label:'预警次数',
+ prop:'sex'
+ },{
+ label: "占比",
+ prop: "date"
+ }
+ ]
+ }
+
+
+ },
+
+
+ //确认时间占比统计
+ 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,
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '1%',
+ top: 25,
+ textAlign:'left',
+ text: '确认时间占比'
+ },
+ tooltip: {
+ trigger: 'item'
+ },
+ grid: {
+ left: '1%',
+ right: '10%',
+ bottom: '5%',
+ top:'25%',
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['43%', '60%'],
+ center: ['45%','53%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: data[0], name: '小于5分钟'},
+ {value: data[1], name: '5-10分钟'},
+ {value: data[2], name: '10-30分钟'},
+ {value: data[3], name: '30分钟以上'}
+ ]
+ }
+ ]
+ };
+ myChart.setOption(option);
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ 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',
+ name:data[0]==0? 0:data[0]+"次",
+ },
+ {
+ 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',
+ name:data[1]==0? 0:data[1]+"次",
+ },
+ {
+ 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',
+ name:data[2]==0? 0:data[2]+"次",
+ },
+ {
+ click: function (item) {
+ var data = [];
+ data.push({
+ startTime:time[0],
+ endTime:time[1],
+ waringType:'紧急求救',
+ timeDesc: '30分钟以上'
+ })
+ window.parent.handleStartAlarm(data);
+ },
+ title:'30分钟以上',
+ color:'#F34A4A',
+ name:data[3]==0? 0:data[3]+"次",
+ }
+ ];
+ })
+ },
+
+ //预警平均确认速度排行(table)
+ confirmAverageSpeedStatis(data){
+ var that = this;
+ that.confirmAverageSpeedData=[
+ {
+ name:'mis_zhang',
+ sex:'1',
+ }
+ ];
+ that.confirmAverageSpeedOption={
+ title:'预警平均确认速度排行',
+ titleSize:'h3',
+ titleStyle:{
+ color:'red'
+ },
+ menu:false,
+ page:false,
+ align:'center',
+ menuAlign:'center',
+ column:[
+ {
+ label:'巡检人',
+ prop:'name'
+ },
+ {
+ label:'平均确认速度',
+ prop:'sex'
+ }
+ ]
+ }
+ },
+
+ //预警时间分布
+ 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,
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '3%',
+ top: 25,
+ textAlign:'center',
+ text: '预警时间分布'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
+ top:'10%',
+ right:'6%',
+ icon:'circle'
+ },
+ grid: {
+ left: '1%',
+ right: '7%',
+ bottom: '10%',
+ top:'25%',
+ containLabel: true
+ },
+ xAxis: {
+ name:'时段',
+ 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: {
+ name:'个/次',
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle:{
+ type:'dashed'
+ }
+ }
+ },
+ series: [
+ {
+ name: '一键求助',
+ type: 'bar',
+ data: data.data.alarmTimeDis
+ },
+ {
+ name: '违禁品',
+ type: 'bar',
+ data: data.data.parcelTimeDis
+ },
+ {
+ name: '红色健康码',
+ type: 'bar',
+ data: data.data.healthcodeTimeDis
+ },
+ {
+ name: '体温异常',
+ type: 'bar',
+ 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);
+ //预警数量统计
+ 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(date==1){
+ startTime = this.showWeekFirstDay(today)+ " 00:00:00";
+ endTime = this.showToDay(today)+ " 23:59:59";
+ that.dateTime = [startTime,endTime];
+ }
+ //月初至今的时间
+ if(date==2){
+ startTime = this.showMonthFirstDay(today)+ " 00:00:00";
+ endTime = this.showToDay(today)+ " 23:59:59";
+ that.dateTime = [startTime,endTime];
+ }
+ //本季度初至今的时间
+ if(date==3){
+ startTime = this.getQuarterStartDate(today)+ " 00:00:00";
+ endTime = this.showToDay(today)+ " 23:59:59";
+ that.dateTime = [startTime,endTime];
+ }
+ //封装数据
+ var data ={};
+ return data ={
+ startTime:this.dateTime[0],
+ endTime:this.dateTime[1]
+ }
+ },
+
+
+ //本日
+ showToDay(Nowdate){
+ var M=Number(Nowdate.getMonth())+1;
+ 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;
+ 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;
+ if(M<10){
+ M="0"+M;
+ }
+ 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;
+ console.log(nowMonth,555);
+ var quarterStartMonth = 0;
+ if(nowMonth<4){
+ quarterStartMonth = "0"+1;
+ }
+ if(3<nowMonth && nowMonth<7){
+ quarterStartMonth = "0"+4;
+ }
+ if(6<nowMonth && nowMonth<10){
+ quarterStartMonth = "0"+7;
+ }
+ if(nowMonth>9){
+ quarterStartMonth = 10;
+ }
+ return quarterStartMonth;
+ }
+
+ },
+
+ }
+
+
+</script>
+<style lang="scss">
+
+ @import '@/styles/alarmAnalysis/alarmAnalysis.scss'
+
+</style>
--
Gitblit v1.9.3