修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 src/views/alarmManagement/alarmAnalysis.vue

@@ -1,38 +1,38 @@
<template>
  <div class="big">
    <!-- 标题 -->
    <div class="alarm_title"><span>预警分析</span></div>
<!--    <div class="alarm_title"><span>预警分析</span></div>-->
    <!-- 时间按钮 -->
    <div class="timeSearchBtn">
      <el-button-group class="timeBtn">
        <el-button
         v-bind:class="activeClass == 1 ? 'btn-color' : ''" 
         v-bind:class="activeClass == 1 ? 'btn-color' : ''"
         size="small"
         @click="getData(1)">
         本周
         </el-button>

        <el-button 
        <el-button
        v-bind:class="activeClass == 2 ? 'btn-color' : ''"
        size="small" 
        size="small"
        @click="getData(2)">
        月初至今
        </el-button>

        <el-button 
        <el-button
        v-bind:class="activeClass == 3 ? 'btn-color' : ''"
        size="small" 
        size="small"
        @click="getData(3)">
        季度至今
        </el-button>
      </el-button-group>
      <el-date-picker 
      class="timeSearch" 
      size="small" 
      v-model="dateTime" 
      type="daterange" 
      <el-date-picker
      class="timeSearch"
      size="small"
      v-model="dateTime"
      type="daterange"
      @change="timeChange"
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> 
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <!-- 监测点 -->
@@ -78,6 +78,7 @@
    </div>
    <!-- 预警平均确认速度排行 -->
    <div class="confirmAverageSpeed">
      <div class="confirmAverageSpeedTitle"><span>预警平均确认速度排行</span></div>
      <avue-crud :data="confirmAverageSpeedData" :option="confirmAverageSpeedOption"></avue-crud>
    </div>
    <!-- 预警时间分布 -->
@@ -144,11 +145,22 @@
      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);
      },
@@ -175,6 +187,16 @@
        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) {
@@ -243,7 +265,7 @@
              click: function (item) {
                var data =[];
                data.push({
                  dxtype: 1
                  dxtype: 4
                });
                //console.log(data[0],111);
                window.parent.handleStartEquipment(data);
@@ -263,7 +285,7 @@
              color: '#3AA7F0'
            }
          ];
        }); 
        });
      },

      //主动报警（一键求助，电话报警）分页数据
@@ -344,7 +366,7 @@
                data: item.parcelData
              })
            }
            

            if (item.name == typesArray[2]) {
              data.push({
                name: item.name,
@@ -352,7 +374,7 @@
                data: item.healthcodeData
              })
            }
            

            if (item.name == typesArray[3]) {
              data.push({
                name: item.name,
@@ -444,7 +466,7 @@
          };

          myChart.setOption(option);
      

          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
        })
@@ -469,7 +491,6 @@
                },
                title:'一键求助',
                color:'#FF9836',
                target:'_blank',
                name:'日平均一键求助数',
                date:(res.data.data[0]/Math.round(day)).toFixed(2)
            },
@@ -542,7 +563,7 @@
          let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
          myChart.on('click', function (params) {
              var data = [];
              

              if(params.name=='一键求助'){
                data.push({
                  startTime:startDate,
@@ -578,7 +599,7 @@
                });
                window.parent.handleStartAnimalHeat(data);
              }
              

          })
          var colors = ['#FF9836', '#3fa1ff', '#F34A4A', '#8058A5'];
          let option = {
@@ -622,11 +643,11 @@
              ]
          };
          myChart.setOption(option);
    

          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
        })
          

      },


@@ -649,7 +670,6 @@
                },
                title:'一键求助',
                color:'#FF9836',
                target:'_blank',
                name:res.data.data[0],
                date:(res.data.data[0]/count*100).toFixed(2)+'%'
            },
@@ -752,7 +772,7 @@
              ]
          };
          myChart.setOption(option);
    

          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
      },
@@ -885,7 +905,6 @@
                  },
                  title:'小于5分钟',
                  color:'green',
                  target:'_blank',
                  name:data[0]==0? 0:data[0]+"次",
              },
              {
@@ -937,7 +956,7 @@
        })
      },

      //预警平均速度排行(table)
      //预警平均确认速度排行(table)
      confirmAverageSpeedStatis(data){
          var that = this;
          that.confirmAverageSpeedData=[
@@ -947,7 +966,7 @@
              }
          ];
          that.confirmAverageSpeedOption={
              title:'表格的标题',
              title:'预警平均确认速度排行',
              titleSize:'h3',
              titleStyle:{
                color:'red'
@@ -973,8 +992,53 @@
      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,
@@ -995,7 +1059,8 @@
              legend: {
                  data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
                  top:'10%',
                  right:'6%'
                  right:'6%',
                  icon:'circle'
              },
              grid: {
                  left: '1%',
@@ -1005,6 +1070,7 @@
                  containLabel: true
              },
              xAxis: {
                  name:'时段',
                  type: 'category',
                  boundaryGap: true,
                  axisLine: {
@@ -1018,6 +1084,7 @@
                  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,
@@ -1029,26 +1096,22 @@
              series: [
                  {
                      name: '一键求助',
                      type: 'line',
                      stack: '总量',
                      type: 'bar',
                      data: data.data.alarmTimeDis
                  },
                  {
                      name: '违禁品',
                      type: 'line',
                      stack: '总量',
                      type: 'bar',
                      data: data.data.parcelTimeDis
                  },
                  {
                      name: '红色健康码',
                      type: 'line',
                      stack: '总量',
                      type: 'bar',
                      data: data.data.healthcodeTimeDis
                  },
                  {
                      name: '体温异常',
                      type: 'line',
                      stack: '总量',
                      type: 'bar',
                      data: data.data.animalTimeDis
                  }
              ]
@@ -1068,6 +1131,7 @@
          this.getStatisData(data);
      },

      //调用方法，获取统计数据
      getStatisData(data){
          //统计预警总数
          this.getStatisTotalData(data);
@@ -1104,7 +1168,7 @@
          return  days;
      },


      //计算时间
      getDate(date){
        var that = this;
          var today = new Date();
@@ -1138,7 +1202,7 @@


      //本日
      showToDay(Nowdate){   
      showToDay(Nowdate){
        var M=Number(Nowdate.getMonth())+1;
        if(M<10){
          M="0"+M;
@@ -1147,12 +1211,12 @@
        if(day<10){
          day = "0"+day;
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;   
        return Nowdate.getFullYear()+"-"+M+"-"+day;
      },

      //本周第一天
      showWeekFirstDay(Nowdate){   
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);   
      showWeekFirstDay(Nowdate){
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
        var M=Number(WeekFirstDay.getMonth())+1;
        if(M<10){
          M="0"+M;
@@ -1165,13 +1229,13 @@
      },

      //本月第一天
      showMonthFirstDay(Nowdate){   
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);   
      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();   
        }
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();
      },

      //本季度的第一天
@@ -1204,11 +1268,11 @@
    },

  }
    
  


</script>
<style lang="scss">
  

  @import '@/styles/alarmAnalysis/alarmAnalysis.scss'

</style>
</style>