预警数量，预警时间分布数据回填

Administrator

2021-04-07 4d7658f615325e4f7c30d5f3ac425fc33fcc4652

预警数量，预警时间分布数据回填

 src/api/statis/statis.js

@@ -39,3 +39,13 @@
        }
    })
}

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

 src/styles/alarmAnalysis/alarmAnalysis.scss

@@ -246,3 +246,18 @@
    left: 0.8%;
    top: -38%;
}

.el-button .btn-color {
    color: rgb(255, 255, 255);
    background-color: #29C093;
    border-color: #29C093;
}

// .el-icon-bell:before {
//     width: 10px;
//     height: 10px;
//     border-radius: 50%;
//     //background-color: #F34A4A;
//     display: inline-block;
//     content: '';
// }

 src/views/alarmManagement/alarmAnalysis.vue

@@ -26,7 +26,13 @@
        季度至今
        </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="mini" 
      v-model="dateTime" 
      type="daterange" 
      @change="timeChange"
      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> 
      </el-date-picker>
    </div>
    <!-- 监测点 -->
@@ -78,7 +84,7 @@

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

  export default {
@@ -118,6 +124,36 @@
    },

    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 => {
@@ -128,7 +164,7 @@
              },
              title: '警情总数',
              count: res.data.data[0].value,
              icon: 'el-icon-warning',
              icon: 'el-icon-message-solid',
              color: '#F34A4A'
            },
            {
@@ -136,7 +172,7 @@
              },
              title: '违禁包裹数',
              count: res.data.data[1].value,
              icon: 'el-icon-warning',
              icon: 'el-icon-shopping-bag-1',
              color: '#FF9836'
            },
            {
@@ -144,7 +180,7 @@
              },
              title: '违禁物品数',
              count: res.data.data[2].value,
              icon: 'el-icon-setting',
              icon: 'el-icon-warning',
              color: '#8058A5'
            },
            {
@@ -152,7 +188,7 @@
              },
              title: '在线设备数',
              count: res.data.data[3].value,
              icon: 'el-icon-setting',
              icon: 'el-icon-success',
              color: '#29C093'
            },
            {
@@ -160,7 +196,7 @@
              },
              title: '客户数量',
              count: res.data.data[4].value,
              icon: 'el-icon-setting',
              icon: 'el-icon-s-custom',
              color: '#3AA7F0'
            }
          ];
@@ -646,6 +682,8 @@

      //预警时间分布
      getAlarmTimeDisEchars(data){
        selAlarmTimeDis(data).then(res =>{
          var data = res.data;
        let echarts = require('echarts');
        let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
        let option = {
@@ -702,39 +740,44 @@
                    name: '一键求助',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                      data: data.data.alarmTimeDis
                },
                {
                    name: '违禁品',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                      data: data.data.parcelTimeDis
                },
                {
                    name: '红色健康码',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                      data: data.data.healthcodeTimeDis
                },
                {
                    name: '体温异常',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                      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);
          //预警数量统计
@@ -867,9 +910,6 @@
        return quarterStartMonth;
      }




    },

  }
@@ -877,11 +917,7 @@
  
</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>