预警分析页面预警数量统计数据回填，预警分类占比饼图数据回填

Administrator

2021-04-06 ae9dd5b413e679b1da868cc456f2a8fcd2c4f619

预警分析页面预警数量统计数据回填，预警分类占比饼图数据回填

 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,
        }
    })
}

 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;