预警分析页面完善

Administrator

2021-04-02 ed251fe533c8661c01c8d37e25c2d344a45e9ff9

预警分析页面完善

 src/styles/alarmAnalysis/alarmAnalysis.scss

@@ -148,12 +148,17 @@
}

.alarmEquipmentProStatis {
    background-color: aqua;
    width: 50%;
    //background-color: aqua;
    width: 35%;
    height: 100%;
    position: relative;
    left: 30%;
    top: -80%;
    top: -100%;
}

.alarmEquipmentProStatis .avue-crud {
    position: relative;
    top: 20%;
}

.alarmEquipmentProStatis .avue-crud__menu {
@@ -163,7 +168,7 @@
//确认时间占比
.confirmTimePro {
    background-color: #ffffff;
    width: 98.6%;
    width: 61.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
@@ -171,10 +176,44 @@
}

#confirmTimeProEcharts {
    width: 30%;
    width: 40%;
    height: 450px;
    position: relative;
    left: 1%;
}

.confirmTimeProStatis {
    //background-color: aqua;
    width: 60%;
    height: 100%;
    position: relative;
    top: -100%;
    left: 40%;
}

.confirmTimeProStatis .el-row {
    position: relative;
    top: 120px;
}

//预警平均速度排行
.confirmAverageSpeed {
    background-color: #ffffff;
    width: 35%;
    height: 450px;
    position: relative;
    top: -41%;
    left: 64.4%;
}

.confirmAverageSpeed .avue-crud {
    width: 90%;
    position: relative;
    top: 10%;
}

.confirmAverageSpeed .avue-crud__menu {
    display: none;
}

//预警时间分布
@@ -184,7 +223,7 @@
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 14%;
    top: -38.6%;
}

#alarmTimeDisEchars {
@@ -201,5 +240,5 @@
    height: 50px;
    position: relative;
    left: 0.8%;
    top: 14%;
    top: -38%;
}

 src/views/alarmManagement/alarmAnalysis.vue

@@ -41,6 +41,13 @@
    <!-- 确认时间占比 -->
    <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">
@@ -73,7 +80,14 @@
          data: []
        },
        alarmEquipmentProStatisData:[],
        alarmEquipmentProStatisOption:{}
        alarmEquipmentProStatisOption:{},
        confirmTimeProStatis:{
          span:10,
          height:100,
          data: []
        },
        confirmAverageSpeedData:[],
        confirmAverageSpeedOption:{}
      };
    },

@@ -92,6 +106,8 @@
      this.getAlarmEquipmentProStatis();
      //确认时间占比统计
      this.getConfirmTimeProEcharts();
      this.getConfirmTimeProStatis();
      this.confirmAverageSpeedStatis();
      //预警时间分布统计
      this.getAlarmTimeDisEchars();
    },
@@ -103,46 +119,38 @@
        that.statisToTalData.data = [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '错误日志',
              title: '监测点总数',
              count: 12332,
              icon: 'el-icon-warning',
              color: '#3AA7F0',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '数据展示',
              title: '总预警数',
              count: 33,
              icon: 'el-icon-warning',
              color: '#F34A4A',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '权限管理',
              title: '一键求助确认率',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#8058A5',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '权限管理',
              title: '一键求助确认数',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#29C093',
              href:'https://avuejs.com',
              target:'_blank'
            },
          ];
@@ -282,9 +290,9 @@
                          fontSize: 16,
                          color: '#000'
                      },
                      left: '10%',
                      left: '1%',
                      top: 25,
                      textAlign:'center',
                      textAlign:'left',
                text: '预警类型占比'
              },
              tooltip: {
@@ -337,7 +345,7 @@

      //警情类别统计总数(分类占比)
      getAlarmTypeProStatis(){
          var that = this;
        var that = this;
        that.alarmTypeProStatis.data = [
            {
                click: function (item) {
@@ -453,21 +461,9 @@
          var that = this;
          that.alarmEquipmentProStatisData=[
              {
                name:'张三',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }, {
                name:'李四',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'王五',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'赵六',
                sex:'男',
                date:'1994-02-23 00:00:00'
                name:'一键求助',
                sex:'1',
                date:'100%'
              }
          ];
          that.alarmEquipmentProStatisOption={
@@ -478,18 +474,15 @@
              menuAlign:'center',
              column:[
                {
                  label:'姓名',
                  label:'预警设备类型',
                  prop:'name'
                },
                {
                  label:'性别',
                  label:'预警次数',
                  prop:'sex'
                },{
                  label: "日期",
                  prop: "date",
                  type: "date",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                  label: "占比",
                  prop: "date"
                }
              ]
          }
@@ -509,10 +502,10 @@
                          fontSize: 16,
                          color: '#000'
                      },
                      left: '10%',
                      left: '1%',
                      top: 25,
                      textAlign:'center',
                text: '预警类型占比'
                      textAlign:'left',
                text: '确认时间占比'
              },
              tooltip: {
                  trigger: 'item'
@@ -561,6 +554,86 @@
          window.addEventListener('resize',function() {myChart.resize()});
      },

      //确认时间占比（分类）
      getConfirmTimeProStatis(){
        var that = this;
        that.confirmTimeProStatis.data = [
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'香菜',
                color:'yellow',
                href:"http://www.baidu.com",
                target:'_blank',
                name:'文件上传',
                date:'1天前'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'钉宫',
                color:'green',
                href:"http://www.baidu.com",
                name:'流加载',
                date:'1天前'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'亚丝娜',
                color:'#3fa1ff',
                href:"http://www.baidu.com",
                name:'表单',
                date:'1天前'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'狂三',
                color:'red',
                href:"http://www.baidu.com",
                name:'文件上传',
                date:'1天前'
            }
          ];
      },

      //预警平均速度排行(table)
      confirmAverageSpeedStatis(){
          var that = this;
          that.confirmAverageSpeedData=[
              {
                name:'一键求助',
                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');