修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 src/views/alarmManagement/alarmAnalysis.vue

@@ -1,32 +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' : ''" 
         size="mini"
         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="mini" 
        size="small"
        @click="getData(2)">
        月初至今
        </el-button>

        <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" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> 
      <el-date-picker
      class="timeSearch"
      size="small"
      v-model="dateTime"
      type="daterange"
      @change="timeChange"
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <!-- 监测点 -->
@@ -44,12 +50,16 @@
    <!-- 预警类型占比 -->
    <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">
    <div class="alarmEquipmentPro" style="display:none">
      <div id="alarmEquipmentProEcharts"></div>
      <div class="alarmEquipmentProStatis">
        <avue-crud :data="alarmEquipmentProStatisData" :option="alarmEquipmentProStatisOption"></avue-crud>
@@ -58,12 +68,17 @@
    <!-- 确认时间占比 -->
    <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>
    <!-- 预警时间分布 -->
@@ -78,13 +93,15 @@

<script>
  import echarts from 'echarts'
  import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro} from "@/api/statis/statis";
import alarmVue from '../alarm/alarm.vue';
  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: []
@@ -114,68 +131,225 @@
    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-warning',
              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-warning',
              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-setting',
              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-setting',
              icon: 'el-icon-success',
              color: '#29C093'
            },
            {
              click: function (item) {
                window.parent.handleStartSuser();
              },
              title: '客户数量',
              count: res.data.data[4].value,
              icon: 'el-icon-setting',
              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 =>{
          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]) {
@@ -192,7 +366,7 @@
                data: item.parcelData
              })
            }
            

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

            if (item.name == typesArray[3]) {
              data.push({
                name: item.name,
@@ -211,7 +385,48 @@
          })
          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',
@@ -251,7 +466,7 @@
          };

          myChart.setOption(option);
      

          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
        })
@@ -262,41 +477,65 @@
        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) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                  })
                  window.parent.handleStartAlarm(data);
                },
                title:'一键求助',
                color:'yellow',
                target:'_blank',
                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:'green',
                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:'#3fa1ff',
                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:'red',
                color:'#8058A5',
                name:'日平均体温异常数',
                date:(res.data.data[3]/Math.round(day)).toFixed(2)
            }
@@ -308,7 +547,12 @@
      //预警类型占比统计
      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: '违禁品'},
@@ -317,7 +561,49 @@
          )
          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',
@@ -341,7 +627,6 @@
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%','60%'],
                      center: ['45%','53%'],
@@ -349,13 +634,6 @@
                      label: {
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
@@ -365,11 +643,11 @@
              ]
          };
          myChart.setOption(option);
    

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

      },


@@ -377,45 +655,71 @@
      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];
          console.log(count,1112);
          that.alarmTypeProStatis.data = [
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                  })
                  window.parent.handleStartAlarm(data);
                },
                title:'一键求助',
                color:'yellow',
                target:'_blank',
                color:'#FF9836',
                name:res.data.data[0],
                date:res.data.data[0]/count*100+'%'
                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:'green',
                color:'#3fa1ff',
                name:res.data.data[1],
                date:res.data.data[1]/count*100+'%'
                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:'#3fa1ff',
                color:'#F34A4A',
                name:res.data.data[2],
                date:res.data.data[2]/count*100+'%'
                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:'red',
                color:'#8058A5',
                name:res.data.data[3],
                date:res.data.data[3]/count*100+'%'
                date:(res.data.data[3]/count*100).toFixed(2)+'%'
            }
          ];
        })
        
      },

      //预警设备类型占比统计
@@ -446,7 +750,6 @@
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%','60%'],
                      cneter: ['45%','53%'],
@@ -454,13 +757,6 @@
                      label: {
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '40',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
@@ -476,7 +772,7 @@
              ]
          };
          myChart.setOption(option);
    

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

      //确认时间占比统计
      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',
@@ -544,7 +859,6 @@
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%', '60%'],
                      center: ['45%','53%'],
@@ -553,69 +867,96 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '40',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
                      data: [
                          {value: 1048, name: '搜索引擎'},
                          {value: 735, name: '直接访问'},
                          {value: 580, name: '邮件营销'},
                          {value: 484, name: '联盟广告'},
                          {value: 300, name: '视频广告'}
                          {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){
        var that = this;
        that.confirmTimeProStatis.data = [
            {
                click: function (item) {
                },
                title:'小于5分钟',
                color:'yellow',
                target:'_blank',
                name:'0',
            },
            {
                click: function (item) {
                },
                title:'5-10分钟',
                color:'green',
                name:'0',
            },
            {
                click: function (item) {
                },
                title:'10-30分钟',
                color:'#3fa1ff',
                name:'0',
            },
            {
                click: function (item) {
                },
                title:'30分钟以上',
                color:'red',
                name:'0',
            }
          ];
        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)
      //预警平均确认速度排行(table)
      confirmAverageSpeedStatis(data){
          var that = this;
          that.confirmAverageSpeedData=[
@@ -625,7 +966,7 @@
              }
          ];
          that.confirmAverageSpeedOption={
              title:'表格的标题',
              title:'预警平均确认速度排行',
              titleSize:'h3',
              titleStyle:{
                color:'red'
@@ -649,87 +990,149 @@

      //预警时间分布
      getAlarmTimeDisEchars(data){
        let echarts = require('echarts');
        let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
        let option = {
            title: {
              textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16,
                        color: '#000'
                    },
                    left: '3%',
                    top: 25,
                    textAlign:'center',
              text: '预警时间分布'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
                top:'10%',
                right:'6%'
            },
            grid: {
                left: '1%',
                right: '7%',
                bottom: '10%',
                top:'25%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            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]
                }
            ]
        };
        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);
            }

        myChart.setOption(option);
    
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize',function() {myChart.resize()});
            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);
          //预警数量统计
@@ -740,8 +1143,8 @@
          this.getAlarmTypeProEcharts(data);
          this.getAlarmTypeProStatis(data);
          //预警设备类型占比统计
          this.getAlarmEquipmentProEcharts(data);
          this.getAlarmEquipmentProStatis(data);
          //this.getAlarmEquipmentProEcharts(data);
          //this.getAlarmEquipmentProStatis(data);
          //确认时间占比统计
          this.getConfirmTimeProEcharts(data);
          this.getConfirmTimeProStatis(data);
@@ -765,7 +1168,7 @@
          return  days;
      },


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


      //本日
      showToDay(Nowdate){   
      showToDay(Nowdate){
        var M=Number(Nowdate.getMonth())+1;
        if(M<10){
          M="0"+M;
@@ -808,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;
@@ -826,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();
      },

      //本季度的第一天
@@ -862,21 +1265,14 @@
        return quarterStartMonth;
      }




    },

  }
    
  


</script>
<style lang="scss">
  .el-button .btn-color {
    color: rgb(255, 255, 255);
    background-color: #29C093;
    border-color: #29C093;
  }

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

</style>
</style>