Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

shuishen

2021-04-02 9f13c9e3dcae6280428efc1035e59a21e43f3b0f

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue

 src/router/views/index.js

@@ -188,18 +188,32 @@
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
    }]
  },
  // {
  //   path: '/realTimePolice',
  //   component: Layout,
  //   redirect: '/realTimePolice/index',
  //   children: [{
  //     path: 'index',
  //     name: '实时报警',
  //     meta: {
  //       i18n: 'real'
  //     },
  //     component: () =>
  //       import( /* webpackChunkName: "views" */ '@/views/realTimePolice/real')
  //   }]
  // },
  {
    path: '/realTimePolice',
    path: '/home',
    component: Layout,
    redirect: '/realTimePolice/index',
    redirect: '/home/index',
    children: [{
      path: 'index',
      name: '实时报警',
      name: '研判洞察',
      meta: {
        i18n: 'real'
        i18n: 'home'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/realTimePolice/real')
        import( /* webpackChunkName: "views" */ '@/views/home/home')
    }]
  },
  {
@@ -234,7 +248,7 @@
  {
    path: '/suser',
    component: Layout,
    redirect: '/suser/suser',
    redirect: '/suser',
    children: [{
      path: 'index',
      name: '客户管理',
@@ -242,7 +256,7 @@
        i18n: 'suser'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/suser/suser')
        import( /* webpackChunkName: "views" */ '@/views/system/cs')
    }]
  }, {
    path: '/policeTracking',

 src/styles/alarmAnalysis/alarmAnalysis.scss

New file
@@ -0,0 +1,244 @@
.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: 35%;
    height: 100%;
    position: relative;
    left: 30%;
    top: -100%;
}

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

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

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

#confirmTimeProEcharts {
    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;
}

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

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

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

 src/views/alarmManagement/alarmAnalysis.vue

@@ -1,5 +1,5 @@
<template>
  <div>
  <div class="big">
    <!-- 标题 -->
    <div class="alarm_title"><span>预警分析</span></div>
    <!-- 时间按钮 -->
@@ -23,10 +23,39 @@
      <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 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">
        <div id="alarmTimeDisEchars"></div>
    </div>

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

@@ -44,14 +73,43 @@
        alarmClassifyStatis:{
          span:6,
          data: []
        }
        },
        alarmTypeProStatis:{
          span:10,
          height:100,
          data: []
        },
        alarmEquipmentProStatisData:[],
        alarmEquipmentProStatisOption:{},
        confirmTimeProStatis:{
          span:10,
          height:100,
          data: []
        },
        confirmAverageSpeedData:[],
        confirmAverageSpeedOption:{}
      };
    },

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

    methods: {
@@ -61,54 +119,120 @@
        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'
            },
          ];
      },

      //预警数量分布
      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 +278,439 @@
          ];
      },

      //预警数量分布
      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: '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%'],
                      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:'1',
                date:'100%'
              }
          ];
          that.alarmEquipmentProStatisOption={
              menu:false,
              menuBtn:false,
              page:false,
              align:'center',
              menuAlign:'center',
              column:[
                {
                  label:'预警设备类型',
                  prop:'name'
                },
                {
                  label:'预警次数',
                  prop:'sex'
                },{
                  label: "占比",
                  prop: "date"
                }
              ]
          }


      },


      //确认时间占比统计
      getConfirmTimeProEcharts(){
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          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%'],
                      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()});
      },

      //确认时间占比（分类）
      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');
        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 +797,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>

 src/views/clientManagement/clientManagement.vue

@@ -18,6 +18,8 @@
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :row-style="rowStyle"
                   @contextmenu.prevent.native=""
                   @row-contextmenu="rightClick"
                   row-class-name="tabFontSize"
                   :before-open="beforeOpen"
                   @search-change="searchChange"
@@ -44,22 +46,22 @@
              }}
            </el-tag>
          </template>
          <template slot-scope="{ type, size, row }" slot="menu">
            <el-button
              icon="el-icon-video-camera-solid"
              :size="size"
              :type="type"
              @click.stop="handleStart(row)"
            >视频
            </el-button>
            <el-button
              icon="el-icon-location-outline"
              :size="size"
              :type="type"
              @click.stop="handleMap(row)"
            >定位
            </el-button>
          </template>
<!--          <template slot-scope="{ type, size, row }" slot="menu">-->
<!--            <el-button-->
<!--              icon="el-icon-video-camera-solid"-->
<!--              :size="size"-->
<!--              :type="type"-->
<!--              @click.stop="handleStart(row)"-->
<!--            >视频-->
<!--            </el-button>-->
<!--            <el-button-->
<!--              icon="el-icon-location-outline"-->
<!--              :size="size"-->
<!--              :type="type"-->
<!--              @click.stop="handleMap(row)"-->
<!--            >定位-->
<!--            </el-button>-->
<!--          </template>-->

          <template slot-scope="{ row }" slot="dxzt">
            <el-tag>{{
@@ -75,6 +77,12 @@

        </avue-crud>

        <div v-show="menuVisible">
          <ul id="menu" class="menu">
            <li class="menu_item" @click.stop="handleStart">视频</li>
            <li class="menu_item" @click.stop="handleMap">定位</li>
          </ul>
        </div>

        <el-drawer
          title="电子地图"
@@ -195,8 +203,10 @@
        form: {},
        query: {},
        showMap: false,
        selectRow:null,
        initFlag: true,
        loading: true,
        menuVisible:false,
        page: {
          pageSize: 10,
          currentPage: 1,
@@ -238,14 +248,15 @@
          calcHeight: 80,
          labelWidth: '100',
          dialogWidth: 950,
          menuWidth: 250,
          menuWidth: 150,
          align:"center",
          size: "mini",
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          searchSpan: 4,
          border: true,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
@@ -330,12 +341,10 @@
              label: "缴费状态",
              prop: "jfzt",
              slot: true,
              align: "center",
              addDisplay: false,
              editDisplay: false,
            }, {
              label: "布撤防状态",
              align: "center",
              prop: "devicestate",
              type: "select",
              slot: true,
@@ -358,7 +367,6 @@
            },
            {
              label: "设备状态",
              align: "center",
              prop: "dxzt",
              slot: true,
              addDisplay: false,
@@ -390,6 +398,10 @@
                value: "dictValue"
              },
              dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "省份",
@@ -406,7 +418,11 @@
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 6,
              className: "cityClass1"
              className: "cityClass1",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "地市",
@@ -424,7 +440,11 @@
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass2"
              className: "cityClass2",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "区县",
@@ -442,45 +462,77 @@
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass3"
              className: "cityClass3",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "街道",
              prop: "street",
              width: 200
              width: 200,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "负责人",
              prop: "oneContacts",
              width: 72
              width: 72,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "负责人电话",
              prop: "onePhone",
              width: 110
              width: 110,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "到期时间",
              prop: "expireTime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
              width: 130,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "缴费信息",
              prop: "pay",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "安装时间",
              prop: "stime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
              width: 130,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "心跳时间",
              prop: "heartbeat",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
              width: 130,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },

          ]
@@ -726,6 +778,7 @@
        });

      }, handleStart(row) {
        row = this.selectRow;
        var arr = [];
        this.$store.state.tags.tagList.forEach(item => {
          if (item.label != "视频") {
@@ -737,13 +790,37 @@
          path: `/real/video/`, query: row
        });
      }, handleMap(row) {
        row = this.selectRow;
        this.showMap = true;
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[0].init("equipment", {x: row.jd, y: row.wd});
          };
        })
      },rightClick(row, event) {
        this.selectRow = row;
        this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu');
        this.styleMenu(menu);
      },
      foo() {
        // 取消鼠标监听事件 菜单栏
        this.menuVisible = false;
        document.removeEventListener('click', this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      },
      styleMenu(menu) {
        let cha = document.body.clientHeight - event.clientY
        //console.log(document.body.clientHeight,event.clientY,cha)
        // 防止菜单太靠底，根据可视高度调整菜单出现位置
        if (cha < 150) {
          menu.style.top = event.clientY -120 - (120) + 'px'
        } else {
          menu.style.top = event.clientY -10 - (120) + 'px'
        }
        menu.style.left = event.clientX + 10 - (240) + 'px'
        document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
      }
    }
  };
</script>
@@ -756,6 +833,51 @@

  .payWin .el-dialog__body {
    padding-top: 0px !important;
  }


  /*页面样式*/
  .el-card__body .cityClass1 {
    width: 155px;
    padding-right: 0px !important;
  }

  .el-card__body .cityClass2 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .el-card__body .cityClass3 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /*新增窗体样式*/
  .el-dialog .cityClass1 {
    width: 220px;
    padding-right: 0px !important;
  }

  .el-dialog .cityClass2 {
    width: 110px;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .el-dialog .cityClass3 {
    width: 110px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .cityClass2 div label {
    display: none;
  }

  .cityClass3 div label {
    display: none;
  }

  .real-jf-dialog {
@@ -799,4 +921,41 @@
    font-size: 15px;
  }

  .menu_item {
    cursor:pointer;
    line-height: 20px;
    text-align: center;
    margin-top: 0px;
  }

  .menu {
    height: auto;
    width: 120px;
    color: #606266;
    position: absolute;
    padding: 0px;
    box-sizing: border-box;
    /*border: 1px solid #999999;*/
    text-align: center;
    background-color: #fff;
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }
  .menu li:hover {
    background-color: rgba(232,237,250,.6);
    color: darkslategrey;
  }
  .menu li{
    position: relative;
    display: flex;
    font-size: 14px;
    align-items: center;
    height: 34px;
    line-height: 34px;
    outline: none;
    margin-top: 0px;
    padding-left: 20px;
    padding-right: 5px;
  }

</style>

 src/views/realTimePolice/real.vue

@@ -19,6 +19,7 @@
      @row-save="rowSave"
      :before-open="beforeOpen"
      :row-style="rowStyle"
      row-class-name="tabFontSize"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
@@ -43,7 +44,7 @@
      <template slot="menuLeft">
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="small"
          size="mini"
          @click="getBRdata(0)"
          >本日
        </el-button>
@@ -433,13 +434,14 @@
        calcHeight: 30,
        labelWidth: "100",
        size: "mini",
        border: false,
        stripe:true,
        menuWidth: 240,
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 3,
        align:"center",
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
@@ -450,7 +452,7 @@
            prop: "waringType",
            search: false,
            searchSpan: 3,
            width: 130,
            width: 85,
            className: "waringTypeClass",
            searchPlaceholder: "请选择",
            type: "select",
@@ -465,7 +467,7 @@
          {
            label: "报警时间",
            type: "datetime",
            width: 130,
            width: 160,
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            prop: "alarmTime",
@@ -499,11 +501,12 @@
          {
            label: "负责人电话",
            prop: "onePhone",
            width: 96,
            width: 110,
          },
          {
            label: "报警人",
            prop: "galarmPeople",
            width: 90
          },
          {
            label: "报警人电话",
@@ -512,7 +515,6 @@
          },
          {
            label: "事发地址",
            width: 200,
            prop: "place",
          },
          {
@@ -562,6 +564,10 @@
            dicUrl: "/api/blade-system/region/select",
            span: 6,
            className: "cityClass1",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "地市",
@@ -580,6 +586,10 @@
            span: 3,
            labelWidth: "0",
            className: "cityClass2",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "区县",
@@ -598,10 +608,15 @@
            span: 3,
            labelWidth: "0",
            className: "cityClass3",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "接警人",
            prop: "alarmPeople",
            width: 90
          },
          {
            label: "接警时间",
@@ -610,6 +625,10 @@
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width: 130,
            prop: "jjTime",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
        ],
      },
@@ -887,7 +906,7 @@
          return a.jtype - b.jtype;
        });

        


        this.data = data.records;

@@ -1483,4 +1502,9 @@
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}

.tabFontSize{
  font-size: 15px;
}

</style>

 src/views/system/cs.vue

@@ -9,6 +9,7 @@
               :permission="permissionList"
               :before-open="beforeOpen"
               @row-del="rowDel"
               row-class-name="tabFontSize"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
@@ -20,7 +21,7 @@
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   size="mini"
                   icon="el-icon-delete"
                   v-if="permission.tenant_delete"
                   plain
@@ -92,10 +93,12 @@
      option: {
        height: 'auto',
        calcHeight: 80,
        size: "mini",
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        border: false,
        stripe:true,
        index: true,
        selection: true,
        viewBtn: true,
@@ -847,4 +850,54 @@
</script>

<style>

  /*页面样式*/
  .el-card__body .cityClass1 {
    width: 155px;
    padding-right: 0px !important;
  }

  .el-card__body .cityClass2 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .el-card__body .cityClass3 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /*新增窗体样式*/
  .el-dialog .cityClass1 {
    width: 220px;
    padding-right: 0px !important;
  }

  .el-dialog .cityClass2 {
    width: 110px;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .el-dialog .cityClass3 {
    width: 110px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .cityClass2 div label {
    display: none;
  }

  .cityClass3 div label {
    display: none;
  }

  .tabFontSize{
    font-size: 15px;
  }


</style>