预警分析页面

Administrator

2021-04-02 6566712571221cb0be770591055de06686e02e7e

预警分析页面

 src/styles/alarmAnalysis/alarmAnalysis.scss

New file
@@ -0,0 +1,205 @@
.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%;
}

.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: 1%;
}

.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;
}

//预警类型占比
.alarmTypePro {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 8%;
}

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

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

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

//预警设备类型占比
.alarmEquipmentPro {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 10%;
}

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

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

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

//确认时间占比
.confirmTimePro {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 12%;
}

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

//预警时间分布
.alarmTimeDis {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 14%;
}

#alarmTimeDisEchars {
    width: 100%;
    height: 450px;
    position: relative;
    left: 1%;
}

//底部
.low {
    background-color: F0F2F5;
    width: 100%;
    height: 50px;
    position: relative;
    left: 0.8%;
    top: 14%;
}

 src/views/alarmManagement/alarmAnalysis.vue

@@ -1,5 +1,5 @@
<template>
  <div>
  <div class="big">
    <!-- 标题 -->
    <div class="alarm_title"><span>预警分析</span></div>
    <!-- 时间按钮 -->
@@ -23,10 +23,32 @@
      <div class="alarmClassifyStatis">
        <avue-data-cardtext :option="alarmClassifyStatis"></avue-data-cardtext>
      </div>
      
    </div>
    <!-- 预警类型占比 -->
    <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>
    <!-- 预警时间分布 -->
    <div class="alarmTimeDis">
        <div id="alarmTimeDisEchars"></div>
    </div>

    <!-- 底部 -->
    <div class="low"></div>
  </div>
</template>

@@ -44,14 +66,34 @@
        alarmClassifyStatis:{
          span:6,
          data: []
        }
        },
        alarmTypeProStatis:{
          span:10,
          height:100,
          data: []
        },
        alarmEquipmentProStatisData:[],
        alarmEquipmentProStatisOption:{}
      };
    },

    mounted() {
      //统计预警总数
      this.getStatisTotalData();
      //预警数量统计
      this.getAlarmNumberStatis();
      //预警分类统计
      this.getAlarmClassifyStatis();
      //预警类型占比统计
      this.getAlarmTypeProEcharts();
      this.getAlarmTypeProStatis();
      //预警设备类型占比统计
      this.getAlarmEquipmentProEcharts();
      this.getAlarmEquipmentProStatis();
      //确认时间占比统计
      this.getConfirmTimeProEcharts();
      //预警时间分布统计
      this.getAlarmTimeDisEchars();
    },

    methods: {
@@ -106,9 +148,83 @@
          ];
      },

      //预警数量分布
      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;
        var that = this;
        that.alarmClassifyStatis.data = [
            {
                click: function (item) {
@@ -154,63 +270,374 @@
          ];
      },

      //预警数量分布
      getAlarmNumberStatis(){

      //预警类型占比统计
      getAlarmTypeProEcharts(){
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
          let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
          let option = {
            color: ['#3AA7F0'],
              title: {
                textStyle: {
                          fontWeight: 'normal',
                          fontSize: 16,
                          color: '#000'
                      },
                      left: '10%',
                      top: 25,
                      textAlign:'center',
                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) {
                  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天前'
            }
          ];
      },



      //预警设备类型占比统计
      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:'男',
                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'
              }
          ];
          that.alarmEquipmentProStatisOption={
              menu:false,
              menuBtn:false,
              page:false,
              align:'center',
              menuAlign:'center',
              column:[
                {
                  label:'姓名',
                  prop:'name'
                },
                {
                  label:'性别',
                  prop:'sex'
                },{
                  label: "日期",
                  prop: "date",
                  type: "date",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                }
              ]
          }


      },


      //确认时间占比统计
      getConfirmTimeProEcharts(){
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          let option = {
              title: {
                textStyle: {
                          fontWeight: 'normal',
                          fontSize: 16,
                          color: '#000'
                      },
                      left: '10%',
                      top: 25,
                      textAlign:'center',
                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()});
      },

      //预警时间分布
      getAlarmTimeDisEchars(){
        let echarts = require('echarts');
        let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
        let option = {
            title: {
              textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16,
                        color: '#000'
                    },
                    left: '5%',
                    left: '3%',
                    top: 25,
                    textAlign:'center',
              text: '预警数量分布'
              text: '预警时间分布'
            },
            tooltip : {
              trigger: 'axis',
              axisPointer : {
                type : 'shadow'
              }
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                top:'10%',
                right:'6%'
            },
            grid: {
                left: '1%',
                right: '5%',
                bottom: '7%',
                top: '20%',
                right: '7%',
                bottom: '10%',
                top:'25%',
                containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
                axisTick: {
                  alignWithLabel: true
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle:{
                      type:'dashed'
                  }
                }
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'每月花费',
                type:'bar',
                barWidth: '60%',
                data:[995,666,444,858,654,236,645,546,846,225,547,356]
              }
            },
            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);
        };

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

      //点击按钮获取不同时间段的数据
@@ -297,108 +724,5 @@
  
</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;
  }
  @import '@/styles/alarmAnalysis/alarmAnalysis.scss'
</style>