解决冲突

liuyg

2021-04-08 1af78d011ea7f1be222c326a2b6b1290f35ad7ee

解决冲突

 src/router/views/index.js

@@ -0,0 +1,356 @@
import Layout from '@/page/index/'

export default [{
    path: '/wel',
    component: Layout,
    redirect: '/wel/index',
    children: [{
        path: 'index',
        name: '首页',
        meta: {
            i18n: 'dashboard'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/data')
    }]
},

// {
//     path: '/wel',
//     component: Layout,
//     redirect: '/wel/index',
//     children: [{
//         path: 'index',
//         name: '首页',
//         meta: {
//             i18n: 'dashboard'
//         },
//         component: () =>
//             import ( /* webpackChunkName: "views" */ '@/views/home/home')
//     }, {
//         path: 'dashboard',
//         name: '控制台',
//         meta: {
//             i18n: 'dashboard',
//             menu: false,
//         },
//         component: () =>
//             import ( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
//     }]
// },
{
    path: '/distribution',
    component: Layout,
    redirect: '/distribution/index',
    children: [{
        path: 'index',
        name: '警情分发处置',
        meta: {
            i18n: 'distribution'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/distribution/index')
    }]
},
{
    path: '/test',
    component: Layout,
    redirect: '/test/index',
    children: [{
        path: 'index',
        name: '测试页',
        meta: {
            i18n: 'test'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/util/test')
    }]
}, {
    path: '/dict-horizontal',
    component: Layout,
    redirect: '/dict-horizontal/index',
    children: [{
        path: 'index',
        name: '字典管理',
        meta: {
            i18n: 'dict'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
    }]
}, {
    path: '/dict-vertical',
    component: Layout,
    redirect: '/dict-vertical/index',
    children: [{
        path: 'index',
        name: '字典管理',
        meta: {
            i18n: 'dict'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
    }]
}, {
    path: '/info',
    component: Layout,
    redirect: '/info/index',
    children: [{
        path: 'index',
        name: '个人信息',
        meta: {
            i18n: 'info'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
    }]
},
{
    path: '/real',
    component: Layout,
    redirect: '/real/video',
    children: [{
        path: 'video',
        name: '视频',
        meta: {
            i18n: 'real'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/Video/video')
    }, {
        path: 'history/:historyId',
        name: '设备历史',
        meta: {
            i18n: 'real'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/realTimePolice/realHistory')
    }]
},
{
    path: '/welcomeData',
    component: Layout,
    redirect: '/welcomeData/data',
    children: [{
        path: 'data',
        name: '数据模式',
        meta: {
            i18n: 'data'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/data')
    }, {
        path: 'map',
        name: '地图模式',
        meta: {
            i18n: 'map'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/map')
    }, {
        path: 'card',
        name: '卡片模式',
        meta: {
            i18n: 'card'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/card')
    }]
},

{
    path: '/work/process/leave',
    component: Layout,
    redirect: '/work/process/leave/form',
    children: [{
        path: 'form/:processDefinitionId',
        name: '请假流程',
        meta: {
            i18n: 'work'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
    }, {
        path: 'handle/:taskId/:processInstanceId/:businessId',
        name: '处理请假流程',
        meta: {
            i18n: 'work'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
    }, {
        path: 'detail/:processInstanceId/:businessId',
        name: '请假流程详情',
        meta: {
            i18n: 'work'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
    }]
},
{
    path: '/realTimePolice',
    component: Layout,
    redirect: '/realTimePolice/index',
    children: [{
        path: 'index',
        name: '实时报警',
        meta: {
            i18n: 'real'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/realTimePolice/real')
    }]
},
{
    path: '/home',
    component: Layout,
    redirect: '/home/index',
    children: [{
        path: 'index',
        name: '研判洞察',
        meta: {
            i18n: 'home'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/home/home')
    }]
},
{
    path: '/attendance',
    component: Layout,
    redirect: '/attendance/attendance',
    children: [{
        path: 'index',
        name: '考勤管理',
        meta: {
            i18n: 'attendance'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/attendance/attendance')
    }]
},
{
    path: '/clientManagement',
    component: Layout,
    redirect: '/clientManagement/clientManagement',
    children: [{

        path: 'index',
        name: '设备管理',
        meta: {
            i18n: 'clientManagement'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/clientManagement/clientManagement')
    }]
},
{
    path: '/suser',
    component: Layout,
    redirect: '/suser',
    children: [{
        path: 'index',
        name: '客户管理',
        meta: {
            i18n: 'suser'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/system/cs')
    }]
}, {
    path: '/policeTracking',
    component: Layout,
    redirect: '/policeTracking/track',
    children: [{
        path: 'track',
        name: '警情追踪',
        meta: {
            i18n: 'track'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/policeTracking/policeTracking')
    }]
}, {
    path: '/healthcode',
    component: Layout,
    redirect: '/healthcode/healthcodePage',
    children: [{
        path: 'healthcodePage',
        name: '健康码',
        meta: {
            i18n: 'healthcode'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/healthcode/healthcode')
    }]
}, {
    path: '/animalHeat',
    component: Layout,
    redirect: '/animalHeat/animalHeatPage',
    children: [{
        path: 'animalHeatPage',
        name: '体温检测',
        meta: {
            i18n: 'animalHeat'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/animalHeat/animalHeat')
    }]
}, {
    path: '/alarm',
    component: Layout,
    redirect: '/alarm/alarmPage',
    children: [{
        path: 'alarmPage',
        name: '实时警情',
        meta: {
            i18n: 'alarm'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/alarm/alarm')
    }]
}, {
    path: '/parcel',
    component: Layout,
    redirect: '/parcel/index',
    children: [{
        path: 'index',
        name: '安检包裹',
        meta: {
            i18n: 'parcel'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/parcel/parcel')
    }]
}, {
    path: '/parcelKind',
    component: Layout,
    redirect: '/parcelKind/index',
    children: [{
        path: 'index',
        name: '违禁品',
        meta: {
            i18n: 'parcelKind'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/parcel/parcelKind')
    }]
}, {
    path: '/dataL',
    component: Layout,
    redirect: '/dataL/index',
    children: [{
        path: 'index',
        name: '详情页',
        meta: {
            i18n: 'dataL'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/dataL/dataL')
    }]
},



]

 src/views/alarmManagement/alarmAnalysis.vue

@@ -0,0 +1,1017 @@
<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="mini"
         @click="getData(1)">
         本周
         </el-button>
 
        <el-button 
        v-bind:class="activeClass == 2 ? 'btn-color' : ''"
        size="mini" 
        @click="getData(2)">
        月初至今
        </el-button>
 
        <el-button 
        v-bind:class="activeClass == 3 ? 'btn-color' : ''"
        size="mini" 
        @click="getData(3)">
        季度至今
        </el-button>
      </el-button-group>
      <el-date-picker 
      class="timeSearch" 
      size="mini" 
      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="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="confirmTimeProStatis">
          <avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
        </div>
    </div>
    <!-- 预警平均确认速度排行 -->
    <div class="confirmAverageSpeed">
      <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,
        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;
    },
 
    methods: {
      //日期选好后触发
      timeChange(){
        //清空选项按钮标记
        var that = this;
        that.activeClass = 0;
        var data = {};
        data ={
          startTime:this.timeFormat(this.dateTime[0]),
          endTime:this.timeFormat(this.dateTime[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;
        that.statisToTalData.data = [
            {
              click: function (item) {
                  var data =[];
                  data.push({
                    waringType:'紧急求救',
                    status:0
                  })
                  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();
 
                data.push({
                startTime:Y + "-" + M + "-" + D + " 00:00:00",
                endTime: Y +"-" +M +"-" + D +  " 23:59:59",
                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:Y + "-" + M + "-" + D + " 00:00:00",
                endTime: Y +"-" +M +"-" + D +  " 23:59:59",
                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: 1
                });
                //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) {
        debugger;
        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`,
        });
      },
 
      //预警数量分布
      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'));
          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) {
                },
                title:'一键求助',
                color:'#FF9836',
                target:'_blank',
                name:'日平均一键求助数',
                date:(res.data.data[0]/Math.round(day)).toFixed(2)
            },
            {
                click: function (item) {
                },
                title:'违禁品',
                color:'#1E90FF',
                name:'日平均违禁品数',
                date:(res.data.data[1]/Math.round(day)).toFixed(2)
            },
            {
                click: function (item) {
                },
                title:'红色健康码',
                color:'#F34A4A',
                name:'日平均红色健康码数',
                date:(res.data.data[2]/Math.round(day)).toFixed(2)
            },
            {
                click: function (item) {
                },
                title:'体温异常',
                color:'#8058A5',
                name:'日平均体温异常数',
                date:(res.data.data[3]/Math.round(day)).toFixed(2)
            }
          ];
        })
      },
 
 
      //预警类型占比统计
      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'));
          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'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      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 count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
          that.alarmTypeProStatis.data = [
            {
                click: function (item) {
                },
                title:'一键求助',
                color:'#FF9836',
                target:'_blank',
                name:res.data.data[0],
                date:(res.data.data[0]/count*100).toFixed(2)+'%'
            },
            {
                click: function (item) {
                },
                title:'违禁品',
                color:'#3fa1ff',
                name:res.data.data[1],
                date:(res.data.data[1]/count*100).toFixed(2)+'%'
            },
            {
                click: function (item) {
                },
                title:'红色健康码',
                color:'#F34A4A',
                name:res.data.data[2],
                date:(res.data.data[2]/count*100).toFixed(2)+'%'
            },
            {
                click: function (item) {
                },
                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'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      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;
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          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'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      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 that = this;
          that.confirmTimeProStatis.data = [
              {
                  click: function (item) {
                  },
                  title:'小于5分钟',
                  color:'green',
                  target:'_blank',
                  name:data[0]==0? 0:data[0]+"次",
              },
              {
                  click: function (item) {
                  },
                  title:'5-10分钟',
                  color:'#3fa1ff',
                  name:data[1]==0? 0:data[1]+"次",
              },
              {
                  click: function (item) {
                  },
                  title:'10-30分钟',
                  color:'yellow',
                  name:data[2]==0? 0:data[2]+"次",
              },
              {
                  click: function (item) {
                  },
                  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;
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
          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%'
              },
              grid: {
                  left: '1%',
                  right: '7%',
                  bottom: '10%',
                  top:'25%',
                  containLabel: true
              },
              xAxis: {
                  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: {
                  type: 'value',
                  splitLine: {
                    show: true,
                    lineStyle:{
                        type:'dashed'
                    }
                  }
              },
              series: [
                  {
                      name: '一键求助',
                      type: 'line',
                      stack: '总量',
                      data: data.data.alarmTimeDis
                  },
                  {
                      name: '违禁品',
                      type: 'line',
                      stack: '总量',
                      data: data.data.parcelTimeDis
                  },
                  {
                      name: '红色健康码',
                      type: 'line',
                      stack: '总量',
                      data: data.data.healthcodeTimeDis
                  },
                  {
                      name: '体温异常',
                      type: 'line',
                      stack: '总量',
                      data: data.data.animalTimeDis
                  }
              ]
          };
          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>