4.8

liuyg

2021-04-08 0f7c0e33ac6110e7ccbd93c133ea5516f96b4df8

 src/views/alarmManagement/alarmAnalysis.vue

@@ -1,814 +0,0 @@
<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" 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">
      <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} from "@/api/statis/statis";

  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.getStatisTotalData();
      //预警数量统计
      this.getAlarmNumberStatis();
      //预警分类统计
      this.getAlarmClassifyStatis();
      //预警类型占比统计
      this.getAlarmTypeProEcharts();
      this.getAlarmTypeProStatis();
      //预警设备类型占比统计
      this.getAlarmEquipmentProEcharts();
      this.getAlarmEquipmentProStatis();
      //确认时间占比统计
      this.getConfirmTimeProEcharts();
      this.getConfirmTimeProStatis();
      this.confirmAverageSpeedStatis();
      //预警时间分布统计
      this.getAlarmTimeDisEchars();
    },

    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,
              icon: 'el-icon-warning',
              color: '#F34A4A'
            },
            {
              click: function (item) {
              },
              title: '违禁包裹数',
              count: 33,
              icon: 'el-icon-warning',
              color: '#FF9836'
            },
            {
              click: function (item) {
              },
              title: '违禁物品数',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#8058A5'
            },
            {
              click: function (item) {
              },
              title: '在线设备数',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#29C093'
            },
            {
              click: function (item) {
              },
              title: '客户数量',
              count: 2223,
              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'
                  }
                }
            },
            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]
                }
            ]
        };

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

      //警情类别统计总数
      getAlarmClassifyStatis(){
        var that = this;
        that.alarmClassifyStatis.data = [
            {
                click: function (item) {
                },
                title:'一键求助',
                color:'yellow',
                target:'_blank',
                name:'日平均一键求助数',
                date:'1.00'
            },
            {
                click: function (item) {
                },
                title:'违禁品',
                color:'green',
                name:'日平均违禁品数',
                date:'3.00'
            },
            {
                click: function (item) {
                },
                title:'红色健康码',
                color:'#3fa1ff',
                name:'日平均红色健康码数',
                date:'1.00'
            },
            {
                click: function (item) {
                },
                title:'体温异常',
                color:'red',
                name:'日平均体温异常数',
                date:'10.00'
            }
          ];
      },


      //预警类型占比统计
      getAlarmTypeProEcharts(){
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
          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: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%','60%'],
                      center: ['45%','53%'],
                      avoidLabelOverlap: false,
                      label: {
                          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: '视频广告'}
                      ]
                  }
              ]
          };
          myChart.setOption(option);
    
          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
      },


      //警情类别统计总数(分类占比)
      getAlarmTypeProStatis(){
        var that = this;
        that.alarmTypeProStatis.data = [
            {
                click: function (item) {
                },
                title:'一键求助',
                color:'yellow',
                target:'_blank',
                name:'0',
                date:'0.00%'
            },
            {
                click: function (item) {
                },
                title:'违禁品',
                color:'green',
                name:'0',
                date:'0.00%'
            },
            {
                click: function (item) {
                },
                title:'红色健康码',
                color:'#3fa1ff',
                name:'0',
                date:'0.00%'
            },
            {
                click: function (item) {
                },
                title:'体温异常',
                color:'red',
                name:'0',
                date:'0.00%'
            }
          ];
      },



      //预警设备类型占比统计
      getAlarmEquipmentProEcharts(){
          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: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%','60%'],
                      cneter: ['45%','53%'],
                      avoidLabelOverlap: false,
                      label: {
                          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: '视频广告'}
                      ]
                  }
              ]
          };
          myChart.setOption(option);
    
          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
      },

      //预警设备类型占比统计(分类表格)
      getAlarmEquipmentProStatis(){
          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(){
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          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: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%', '60%'],
                      center: ['45%','53%'],
                      avoidLabelOverlap: false,
                      label: {
                          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: '视频广告'}
                      ]
                  }
              ]
          };
          myChart.setOption(option);
    
          //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
          window.addEventListener('resize',function() {myChart.resize()});
      },

      //确认时间占比（分类）
      getConfirmTimeProStatis(){
        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',
            }
          ];
      },

      //预警平均速度排行(table)
      confirmAverageSpeedStatis(){
          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(){
        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]
                }
            ]
        };

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

      //点击按钮获取不同时间段的数据
      getData(data){
          var that = this;
          var today = new Date();
          var startTime ='';
          var endTime = '';
          //本周的时间
          if(data==1){
            startTime = this.showWeekFirstDay(today);
            endTime = this.showToDay(today);
            that.dateTime = [startTime,endTime];
          }
          //月初至今的时间
          if(data==2){
            startTime = this.showMonthFirstDay(today);
            endTime = this.showToDay(today);
            that.dateTime = [startTime,endTime];
          }
          //本季度初至今的时间
          if(data==3){
            startTime = this.getQuarterStartDate(today);
            endTime = this.showToDay(today);
            that.dateTime = [startTime,endTime];
          }
          //封装数据
          var data = {};
          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();   
      },

      //本周第一天
      showWeekFirstDay(Nowdate){   
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);   
        var M=Number(WeekFirstDay.getMonth())+1;   
        return WeekFirstDay.getFullYear()+"-"+M+"-"+WeekFirstDay.getDate();
      },

      //本月第一天
      showMonthFirstDay(Nowdate){   
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);   
        var M=Number(MonthFirstDay.getMonth())+1   
        return MonthFirstDay.getFullYear()+"-"+M+"-"+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">
  .el-button.btn-color {
    color: rgb(255, 255, 255);
    background-color: #29C093;
    border-color: #29C093;
  }
  @import '@/styles/alarmAnalysis/alarmAnalysis.scss'

</style>