预警分析-确认时间占比饼图及占比次数数据回显Ok

Administrator

2021-04-07 f1c20903f98c57430e766489cb1ba7b5fd8daa8a

预警分析-确认时间占比饼图及占比次数数据回显Ok

 src/api/statis/statis.js

@@ -28,4 +28,14 @@
            ...params,
        }
    })
}

export const selConfirmTimePro = (params) => {
    return request({
        url: '/api/blade-jfpts/alarm/alarm/selConfirmTimePro',
        method: 'get',
        params: {
            ...params,
        }
    })
}

 src/styles/alarmAnalysis/alarmAnalysis.scss

@@ -176,7 +176,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 12%;
    top: 10%;
}

#confirmTimeProEcharts {
@@ -206,7 +206,7 @@
    width: 35%;
    height: 450px;
    position: relative;
    top: -41%;
    top: -43%;
    left: 64.4%;
}

@@ -227,7 +227,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: -38.6%;
    top: -40.6%;
}

#alarmTimeDisEchars {

 src/views/alarmManagement/alarmAnalysis.vue

@@ -49,7 +49,7 @@
      </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>
@@ -78,7 +78,7 @@

<script>
  import echarts from 'echarts'
  import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro} from "@/api/statis/statis";
  import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro} from "@/api/statis/statis";
import alarmVue from '../alarm/alarm.vue';

  export default {
@@ -262,9 +262,6 @@
        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 = [
            {
@@ -341,7 +338,6 @@
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%','60%'],
                      center: ['45%','53%'],
@@ -387,7 +383,7 @@
                color:'yellow',
                target:'_blank',
                name:res.data.data[0],
                date:res.data.data[0]/count*100+'%'
                date:(res.data.data[0]/count*100).toFixed(2)+'%'
            },
            {
                click: function (item) {
@@ -395,7 +391,7 @@
                title:'违禁品',
                color:'green',
                name:res.data.data[1],
                date:res.data.data[1]/count*100+'%'
                date:(res.data.data[1]/count*100).toFixed(2)+'%'
            },
            {
                click: function (item) {
@@ -403,7 +399,7 @@
                title:'红色健康码',
                color:'#3fa1ff',
                name:res.data.data[2],
                date:res.data.data[2]/count*100+'%'
                date:(res.data.data[2]/count*100).toFixed(2)+'%'
            },
            {
                click: function (item) {
@@ -411,11 +407,10 @@
                title:'体温异常',
                color:'red',
                name:res.data.data[3],
                date:res.data.data[3]/count*100+'%'
                date:(res.data.data[3]/count*100).toFixed(2)+'%'
            }
          ];
        })
        
      },

      //预警设备类型占比统计
@@ -446,7 +441,6 @@
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%','60%'],
                      cneter: ['45%','53%'],
@@ -458,7 +452,7 @@
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '40',
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
@@ -518,6 +512,8 @@

      //确认时间占比统计
      getConfirmTimeProEcharts(data){
        selConfirmTimePro(data).then(res =>{
          var data = res.data.data;
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          let option = {
@@ -544,7 +540,6 @@
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: ['43%', '60%'],
                      center: ['45%','53%'],
@@ -556,7 +551,7 @@
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '40',
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
@@ -564,55 +559,57 @@
                          show: false
                      },
                      data: [
                          {value: 1048, name: '搜索引擎'},
                          {value: 735, name: '直接访问'},
                          {value: 580, name: '邮件营销'},
                          {value: 484, name: '联盟广告'},
                          {value: 300, name: '视频广告'}
                          {value: data[0], name: '0-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 that = this;
          that.confirmTimeProStatis.data = [
              {
                  click: function (item) {
                  },
                  title:'小于5分钟',
                  color:'yellow',
                  target:'_blank',
                  name:data[0]==0? 0:data[0]+"次",
              },
              {
                  click: function (item) {
                  },
                  title:'5-10分钟',
                  color:'green',
                  name:data[1]==0? 0:data[1]+"次",
              },
              {
                  click: function (item) {
                  },
                  title:'10-30分钟',
                  color:'#3fa1ff',
                  name:data[2]==0? 0:data[2]+"次",
              },
              {
                  click: function (item) {
                  },
                  title:'30分钟以上',
                  color:'red',
                  name:data[3]==0? 0:data[3]+"次",
              }
            ];
        })
      },

      //预警平均速度排行(table)
@@ -680,8 +677,16 @@
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                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',
@@ -740,8 +745,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);