预警分析页面搭建

Administrator

2021-04-01 723607faac0013814d984636163b27bd0678bdba

预警分析页面搭建

 package.json

@@ -17,6 +17,7 @@
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "echarts": "^5.0.2",
    "element-ui": "^2.13.2",
    "hls.js": "^0.14.17",
    "js-audio-recorder": "^1.0.7",

 src/views/alarmManagement/alarmAnalysis.vue

New file
@@ -0,0 +1,404 @@
<template>
  <div>
    <!-- 标题 -->
    <div class="alarm_title"><span>预警分析</span></div>
    <!-- 时间按钮 -->
    <div class="timeSearchBtn">
      <el-button-group class="timeBtn">
        <el-button size="mini" @click="getData(1)">本周</el-button>
        <el-button size="mini" @click="getData(2)">月初至今</el-button>
        <el-button 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></div>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data(){
      return {
        statisToTalData: {
          span:6,
          data: []
        },
        dateTime: '',
        alarmClassifyStatis:{
          span:6,
          data: []
        }
      };
    },

    mounted() {
      this.getStatisTotalData();
      this.getAlarmNumberStatis();
      this.getAlarmClassifyStatis();
    },

    methods: {
      //警情统计总数
      getStatisTotalData(){
        var that = this;
        that.statisToTalData.data = [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '错误日志',
              count: 12332,
              icon: 'el-icon-warning',
              color: '#3AA7F0',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '数据展示',
              count: 33,
              icon: 'el-icon-warning',
              color: '#F34A4A',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '权限管理',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#8058A5',
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '权限管理',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#29C093',
              href:'https://avuejs.com',
              target:'_blank'
            },
          ];
      },

      //警情类别统计总数
      getAlarmClassifyStatis(){
          var that = this;
        that.alarmClassifyStatis.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天前'
            }
          ];
      },

      //预警数量分布
      getAlarmNumberStatis(){
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
          let option = {
            color: ['#3AA7F0'],
            title: {
              textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16,
                        color: '#000'
                    },
                    left: '5%',
                    top: 25,
                    textAlign:'center',
              text: '预警数量分布'
            },
            tooltip : {
              trigger: 'axis',
              axisPointer : {
                type : 'shadow'
              }
            },
            grid: {
                left: '1%',
                right: '5%',
                bottom: '7%',
                top: '20%',
                containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'每月花费',
                type:'bar',
                barWidth: '60%',
                data:[995,666,444,858,654,236,645,546,846,225,547,356]
              }
            ]
          };
          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];
          }
      },

      //本日
      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">
    .alarm_title{
      width: 100%;
      height: 3%;
    }

   .alarm_title span{
      font-size: 12px;
      color: #7B91B4;
      left: 1%;
      position: relative;
   }

   .timeSearchBtn{
      width: 100%;
      height: 4%;
   }

   .timeSearchBtn .timeBtn{
      position: relative;
      left: 0.8%;
      top: 15%;
   } 

   .timeSearchBtn .timeSearch{
      position: relative;
      left: 1.2%;
      top: 15.6%;
   }

   .statisTotal{
     position: relative;
     left: 0.3%;
     top: 2%;
     width: 100%;
     height: 10%;
   }

   /* .statisTotal statisTotalAvueDataBox{
     position: relative !important;
     top: 22% !important;
     left: 1% !important;
   } */

   .statisTotalAvueDataBox .el-row {
     width: 99.7% !important;
   }

   .alarmStatis{
     background-color: #ffffff;
     width: 98.6%;
     height: 550px;
     position: relative;
     left: 0.8%;
     top: 6%;
   }

   #alarmNumberStatis{
    width: 75%;
    height: 550px;
    position: relative;
    left: 2%;
  }

  .alarmClassifyStatis{
    width: 25%;
    height: 550px;
    position: relative;
    left: 75%;
    top: -85%;
  }

  .alarmClassifyStatis .avue-data-cardtext{
    width: 100%;
    height: 90%;
  }

  .avue-data-cardText .item{
    -webkit-box-shadow: 0px 0px 0px 0px #ccc;
    box-shadow: 0px 0px 0px #ccc;
  }

  .avue-data-cardtext .el-row{
    width: 250px !important;
    height: 50px !important;
    position: relative !important;
    top: 30px !important;
  }

  .alarmClassifyStatis .el-col{
    float: inherit !important;
    width: 100% !important;
    height: 100px !important;
  }

  .avue-data-cardText .item-header a{
    font-size: 14px;
    margin-left: 2px;
    position:absolute;
    bottom: 1px;
  }

  .avue-data-cardText .item-header i{
    font-size: 14px;
  }
</style>