预警分析页面优化

Administrator

2021-04-02 88a2b52aa1b44a223d872e8a03cf7d6df275b348

预警分析页面优化

 src/api/statis/statis.js

New file
@@ -0,0 +1,11 @@
import request from '@/router/axios';

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

 src/styles/alarmAnalysis/alarmAnalysis.scss

@@ -40,6 +40,10 @@
    width: 99.7% !important;
}

.statisTotal .el-col-md-6 {
    width: 20%;
}

//预警数量统计
.alarmStatis {
    background-color: #ffffff;

 src/views/alarmManagement/alarmAnalysis.vue

@@ -5,9 +5,26 @@
    <!-- 时间按钮 -->
    <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
         v-bind:class="activeClass == 1 ? 'btn-color' : ''" 
         size="mini"
         @click="getData(1)">
         本周
         </el-button>

        <el-button 
        v-bind:class="activeClass == 2 ? 'btn-color' : ''"
        size="mini" 
        @click="getData(2)">
        月初至今
        </el-button>

        <el-button 
        v-bind:class="activeClass == 3 ? 'btn-color' : ''"
        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>
@@ -61,10 +78,12 @@

<script>
  import echarts from 'echarts'
  import {selectIndexCount} from "@/api/statis/statis";

  export default {
    data(){
      return {
        activeClass:2,
        statisToTalData: {
          span:6,
          data: []
@@ -114,45 +133,53 @@

    methods: {
      //警情统计总数
      getStatisTotalData(){
      getStatisTotalData(data){
        selectIndexCount(data).then(res => {
            console.log(res.data);
            this.form = res.data.data;
        }); 
        var that = this;
        that.statisToTalData.data = [
            {
              click: function (item) {
              },
              title: '监测点总数',
              title: '警情总数',
              count: 12332,
              icon: 'el-icon-warning',
              color: '#3AA7F0',
              target:'_blank'
              color: '#F34A4A'
            },
            {
              click: function (item) {
              },
              title: '总预警数',
              title: '违禁包裹数',
              count: 33,
              icon: 'el-icon-warning',
              color: '#F34A4A',
              target:'_blank'
              color: '#FF9836'
            },
            {
              click: function (item) {
              },
              title: '一键求助确认率',
              title: '违禁物品数',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#8058A5',
              target:'_blank'
              color: '#8058A5'
            },
            {
              click: function (item) {
              },
              title: '一键求助确认数',
              title: '在线设备数',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#29C093',
              target:'_blank'
              color: '#29C093'
            },
            {
              click: function (item) {
              },
              title: '客户数量',
              count: 2223,
              icon: 'el-icon-setting',
              color: '#3AA7F0'
            }
          ];
      },

@@ -236,44 +263,36 @@
        that.alarmClassifyStatis.data = [
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'香菜',
                title:'一键求助',
                color:'yellow',
                href:"http://www.baidu.com",
                target:'_blank',
                name:'文件上传',
                date:'1天前'
                name:'日平均一键求助数',
                date:'1.00'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'钉宫',
                title:'违禁品',
                color:'green',
                href:"http://www.baidu.com",
                name:'流加载',
                date:'1天前'
                name:'日平均违禁品数',
                date:'3.00'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'亚丝娜',
                title:'红色健康码',
                color:'#3fa1ff',
                href:"http://www.baidu.com",
                name:'表单',
                date:'1天前'
                name:'日平均红色健康码数',
                date:'1.00'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'狂三',
                title:'体温异常',
                color:'red',
                href:"http://www.baidu.com",
                name:'文件上传',
                date:'1天前'
                name:'日平均体温异常数',
                date:'10.00'
            }
          ];
      },
@@ -349,44 +368,36 @@
        that.alarmTypeProStatis.data = [
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'香菜',
                title:'一键求助',
                color:'yellow',
                href:"http://www.baidu.com",
                target:'_blank',
                name:'文件上传',
                date:'1天前'
                name:'0',
                date:'0.00%'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'钉宫',
                title:'违禁品',
                color:'green',
                href:"http://www.baidu.com",
                name:'流加载',
                date:'1天前'
                name:'0',
                date:'0.00%'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'亚丝娜',
                title:'红色健康码',
                color:'#3fa1ff',
                href:"http://www.baidu.com",
                name:'表单',
                date:'1天前'
                name:'0',
                date:'0.00%'
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'狂三',
                title:'体温异常',
                color:'red',
                href:"http://www.baidu.com",
                name:'文件上传',
                date:'1天前'
                name:'0',
                date:'0.00%'
            }
          ];
      },
@@ -560,44 +571,32 @@
        that.confirmTimeProStatis.data = [
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'香菜',
                title:'小于5分钟',
                color:'yellow',
                href:"http://www.baidu.com",
                target:'_blank',
                name:'文件上传',
                date:'1天前'
                name:'0',
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'钉宫',
                title:'5-10分钟',
                color:'green',
                href:"http://www.baidu.com",
                name:'流加载',
                date:'1天前'
                name:'0',
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'亚丝娜',
                title:'10-30分钟',
                color:'#3fa1ff',
                href:"http://www.baidu.com",
                name:'表单',
                date:'1天前'
                name:'0',
            },
            {
                click: function (item) {
                  alert(JSON.stringify(item));
                },
                title:'狂三',
                title:'30分钟以上',
                color:'red',
                href:"http://www.baidu.com",
                name:'文件上传',
                date:'1天前'
                name:'0',
            }
          ];
      },
@@ -607,7 +606,7 @@
          var that = this;
          that.confirmAverageSpeedData=[
              {
                name:'一键求助',
                name:'mis_zhang',
                sex:'1',
              }
          ];
@@ -654,7 +653,7 @@
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
                top:'10%',
                right:'6%'
            },
@@ -681,25 +680,25 @@
            },
            series: [
                {
                    name: '邮件营销',
                    name: '一键求助',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    name: '违禁品',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    name: '红色健康码',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    name: '体温异常',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
@@ -737,6 +736,14 @@
            endTime = this.showToDay(today);
            that.dateTime = [startTime,endTime];
          }
          //封装数据
          var data = {};
          data ={
            startTime:this.dateTime[0],
            endTime:this.dateTime[1]
          }
          console.log(data,111);
          //调用方法
      },

      //本日
@@ -797,5 +804,11 @@
  
</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>