南昌市物联网技防平台-前端
shuishen
2021-04-09 531ec703529b6d096bb271bfecff4f5910f62afe
Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue
3 files modified
467 ■■■■ changed files
src/styles/alarmAnalysis/alarmAnalysis.scss 68 ●●●●● patch | view | raw | blame | history
src/views/alarmManagement/alarmAnalysis.vue 395 ●●●● patch | view | raw | blame | history
src/views/healthcode/healthcode.vue 4 ●●●● patch | view | raw | blame | history
src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -25,7 +25,7 @@
.timeSearchBtn .timeSearch {
    position: relative;
    left: 1.2%;
    top: 40.6%;
    top: 42.6%;
}
//预警总数统计
@@ -121,6 +121,37 @@
    left: 1%;
}
.alarmTypeTotal {
    //background-color: antiquewhite;
    width: 10%;
    height: 100px;
    position: relative;
    left: 9.37%;
    top: -58%;
}
.numAlarmType {
    text-align: center;
    position: relative;
    top: 15%;
}
.numAlarmType span {
    font-size: 28px;
    color: #4B4B4B;
}
.textAlarmType {
    text-align: center;
    position: relative;
    top: 20%;
}
.textAlarmType span {
    font-size: 14px;
    color: #757575;
}
.alarmTypeProStatis {
    //background-color: aqua;
    width: 50%;
@@ -132,7 +163,7 @@
.alarmTypeProStatis .el-row {
    position: relative;
    top: 120px;
    top: 24px;
}
//预警设备类型占比
@@ -187,6 +218,37 @@
    left: 1%;
}
.confirmTimeTotal {
    //background-color: antiquewhite;
    width: 12%;
    height: 100px;
    position: relative;
    left: 12.87%;
    top: -58%;
}
.numConfirmTime {
    text-align: center;
    position: relative;
    top: 15%;
}
.numConfirmTime span {
    font-size: 28px;
    color: #4B4B4B;
}
.textConfirmTime {
    text-align: center;
    position: relative;
    top: 20%;
}
.textConfirmTime span {
    font-size: 14px;
    color: #757575;
}
.confirmTimeProStatis {
    //background-color: aqua;
    width: 60%;
@@ -198,7 +260,7 @@
.confirmTimeProStatis .el-row {
    position: relative;
    top: 120px;
    top: 24px;
}
//预警平均速度排行
src/views/alarmManagement/alarmAnalysis.vue
@@ -7,28 +7,28 @@
      <el-button-group class="timeBtn">
        <el-button
         v-bind:class="activeClass == 1 ? 'btn-color' : ''" 
         size="mini"
         size="small"
         @click="getData(1)">
         本周
         </el-button>
        <el-button 
        v-bind:class="activeClass == 2 ? 'btn-color' : ''"
        size="mini"
        size="small"
        @click="getData(2)">
        月初至今
        </el-button>
        <el-button 
        v-bind:class="activeClass == 3 ? 'btn-color' : ''"
        size="mini"
        size="small"
        @click="getData(3)">
        季度至今
        </el-button>
      </el-button-group>
      <el-date-picker 
      class="timeSearch" 
      size="mini"
      size="small"
      v-model="dateTime" 
      type="daterange" 
      @change="timeChange"
@@ -50,6 +50,10 @@
    <!-- 预警类型占比 -->
    <div class="alarmTypePro">
      <div id="alarmTypeProEcharts"></div>
      <div class="alarmTypeTotal">
        <div class="numAlarmType"><span>{{alarmTypeTotal}}</span></div>
        <div class="textAlarmType"><span>总预警数</span></div>
      </div>
      <div class="alarmTypeProStatis">
        <avue-data-cardtext :option="alarmTypeProStatis"></avue-data-cardtext>
      </div>
@@ -64,6 +68,10 @@
    <!-- 确认时间占比 -->
    <div class="confirmTimePro">
        <div id="confirmTimeProEcharts"></div>
        <div class="confirmTimeTotal">
          <div class="numConfirmTime"><span>{{confirmTimeTotal}}</span></div>
          <div class="textConfirmTime"><span>确认预警数</span></div>
        </div>
        <div class="confirmTimeProStatis">
          <avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
        </div>
@@ -76,21 +84,23 @@
    <div class="alarmTimeDis">
        <div id="alarmTimeDisEchars"></div>
    </div>
    <!-- 底部 -->
    <div class="low"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro,selAlarmTimeDis} from "@/api/statis/statis";
  import alarmVue from '../alarm/alarm.vue';
  export default {
    data(){
      return {
        activeClass:2,
        alarmTypeTotal:0,
        confirmTimeTotal:0,
        statisToTalData: {
          span:6,
          data: []
@@ -116,7 +126,7 @@
        confirmAverageSpeedOption:{}
      };
    },
    mounted() {
      //默认是查询当月的数据
      this.getData(2);
@@ -125,8 +135,10 @@
      window.handleStartParcelKind=this.handleStartParcelKind;
      window.handleStartEquipment=this.handleStartEquipment;
      window.handleStartSuser=this.handleStartSuser;
      window.handleStartAnimalHeat=this.handleStartAnimalHeat;
      window.handleStartHealthcode=this.handleStartHealthcode;
    },
    methods: {
      //日期选好后触发
      timeChange(){
@@ -140,7 +152,7 @@
        }
        this.getStatisData(data);
      },
      //中国区时间格式转换
      timeFormat(date){
          let y = date.getFullYear()
@@ -157,18 +169,20 @@
          let time= y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
          return time;
      },
      //警情统计总数
      getStatisTotalData(data){
        selectIndexCount(data).then(res => {
        var that = this;
        var time = this.dateTime;
        that.statisToTalData.data = [
            {
              click: function (item) {
                  var data =[];
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                    status:0
                  })
                  window.parent.handleStartAlarm(data);
              },
@@ -180,20 +194,20 @@
            {
              click: function (item) {
                var data =[];
                // 当前时间
                var date = new Date();
                //年
                var Y = date.getFullYear();
                //月
                var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                //日
                var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                // // 当前时间
                // var date = new Date();
                // //年
                // var Y = date.getFullYear();
                // //月
                // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                // //日
                // var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                console.log(this.dateTime,111);
                data.push({
                startTime:Y + "-" + M + "-" + D + " 00:00:00",
                endTime: Y +"-" +M +"-" + D +  " 23:59:59",
                decisioDiagramResult:"contraband"
                  });
                  startTime:time[0],
                  endTime: time[1],
                  decisioDiagramResult:"contraband"
                });
                window.parent.handleStartParcel(data);
              },
              title: '违禁包裹数',
@@ -205,19 +219,19 @@
              click: function (item) {
                var data = [];
                // 当前时间
                var date = new Date();
                //年
                var Y = date.getFullYear();
                //月
                var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                //日
                var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                // var date = new Date();
                // //年
                // var Y = date.getFullYear();
                // //月
                // var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                // //日
                // var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                data.push({
                startTime:Y + "-" + M + "-" + D + " 00:00:00",
                endTime: Y +"-" +M +"-" + D +  " 23:59:59",
                decisioDiagramResult:"contraband"
                  });
                  startTime:time[0],
                  endTime: time[1],
                  decisioDiagramResult:"contraband"
                });
                window.parent.handleStartParcelKind(data);
              },
              title: '违禁物品数',
@@ -251,7 +265,7 @@
          ];
        }); 
      },
      //主动报警(一键求助,电话报警)分页数据
      handleStartAlarm(data) {
        this.$router.push({
@@ -259,16 +273,15 @@
          query: data[0],
        });
      },
      //包裹分页数据
      handleStartParcel(data) {
        debugger;
        this.$router.push({
          path: `/parcel/index`,
          query: data[0],
        });
      },
      //违禁品分页数据
      handleStartParcelKind(data) {
        this.$router.push({
@@ -276,7 +289,7 @@
          query: data[0],
        });
      },
      //在线设备分页数据
      handleStartEquipment(data) {
        this.$router.push({
@@ -284,14 +297,30 @@
          query: data[0],
        });
      },
      //客户管理分页数据
      handleStartSuser() {
        this.$router.push({
          path: `/suser/index`,
        });
      },
       //体温监测分页数据
      handleStartAnimalHeat(data) {
        this.$router.push({
          path: `/animalHeat/animalHeatPage`,
          query: data[0],
        });
      },
      //健康码分页数据
      handleStartHealthcode(data) {
        this.$router.push({
          path: `/healthcode/healthcodePage`,
          query: data[0],
        });
      },
      //预警数量分布
      getAlarmNumberStatis(data){
        //调接口,获取数据
@@ -334,6 +363,45 @@
          })
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
          myChart.on('click', function (params) {
            var data = [];
            if(params.seriesName=='一键求助'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                waringType:'紧急求救',
              })
              window.parent.handleStartAlarm(data);
            }
            if(params.seriesName=='违禁品'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                  decisioDiagramResult:"contraband"
                });
              window.parent.handleStartParcelKind(data);
            }
            if(params.seriesName=='红色健康码'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                  type:3
                });
              window.parent.handleStartHealthcode(data);
            }
            if(params.seriesName=='体温异常'){
              data.push({
                startTime:params.name+" 00:00:00",
                endTime:params.name+" 23:59:59",
                  status:1
                });
              window.parent.handleStartAnimalHeat(data);
            }
          })
          var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
          let option = {
              color:colors,
@@ -374,14 +442,14 @@
              },
              series: data
          };
          myChart.setOption(option);
      
          //建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)
          window.addEventListener('resize',function() {myChart.resize()});
        })
      },
      //警情类别统计总数
      getAlarmClassifyStatis(data){
        selAlarmDayAveragePro(data).then(res =>{
@@ -391,6 +459,13 @@
          that.alarmClassifyStatis.data = [
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                  })
                  window.parent.handleStartAlarm(data);
                },
                title:'一键求助',
                color:'#FF9836',
@@ -400,6 +475,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    decisioDiagramResult:"contraband"
                  });
                  window.parent.handleStartParcelKind(data);
                },
                title:'违禁品',
                color:'#1E90FF',
@@ -408,6 +490,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    type:3
                  });
                  window.parent.handleStartHealthcode(data);
                },
                title:'红色健康码',
                color:'#F34A4A',
@@ -416,6 +505,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    status:1
                  });
                  window.parent.handleStartAnimalHeat(data);
                },
                title:'体温异常',
                color:'#8058A5',
@@ -425,12 +521,17 @@
          ];
        })
      },
      //预警类型占比统计
      getAlarmTypeProEcharts(data){
        selAlarmDayAveragePro(data).then(res =>{
          var that = this;
          //计算总和
          that.alarmTypeTotal = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
          var data = [];
          var startDate = this.dateTime[0];
          var endDate = this.dateTime[1];
          data.push(
              {value: res.data.data[0], name: '一键求助'},
              {value: res.data.data[1], name: '违禁品'},
@@ -439,6 +540,46 @@
          )
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
          myChart.on('click', function (params) {
              var data = [];
              if(params.name=='一键求助'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  waringType:'紧急求救',
                })
                window.parent.handleStartAlarm(data);
              }
              if(params.name=='违禁品'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  decisioDiagramResult:"contraband"
                });
                window.parent.handleStartParcelKind(data);
              }
              if(params.name=='红色健康码'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  type:3
                });
                window.parent.handleStartHealthcode(data);
              }
              if(params.name=='体温异常'){
                data.push({
                  startTime:startDate,
                  endTime:endDate,
                  status:1
                });
                window.parent.handleStartAnimalHeat(data);
              }
          })
          var colors = ['#FF9836', '#3fa1ff', '#F34A4A', '#8058A5'];
          let option = {
              color:colors,
@@ -473,13 +614,6 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
@@ -494,16 +628,24 @@
        })
          
      },
      //警情类别统计总数(分类占比)
      getAlarmTypeProStatis(data){
        selAlarmDayAveragePro(data).then(res =>{
          var that = this;
          var time  = this.dateTime;
          var count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
          that.alarmTypeProStatis.data = [
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                  })
                  window.parent.handleStartAlarm(data);
                },
                title:'一键求助',
                color:'#FF9836',
@@ -513,6 +655,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    decisioDiagramResult:"contraband"
                  });
                  window.parent.handleStartParcelKind(data);
                },
                title:'违禁品',
                color:'#3fa1ff',
@@ -521,6 +670,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    type:3
                  });
                  window.parent.handleStartHealthcode(data);
                },
                title:'红色健康码',
                color:'#F34A4A',
@@ -529,6 +685,13 @@
            },
            {
                click: function (item) {
                  var data = [];
                  data.push({
                    startTime:time[0],
                    endTime:time[1],
                    status:1
                  });
                  window.parent.handleStartAnimalHeat(data);
                },
                title:'体温异常',
                color:'#8058A5',
@@ -538,7 +701,7 @@
          ];
        })
      },
      //预警设备类型占比统计
      getAlarmEquipmentProEcharts(data){
          let echarts = require('echarts');
@@ -575,13 +738,6 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
@@ -600,7 +756,7 @@
          //建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)
          window.addEventListener('resize',function() {myChart.resize()});
      },
      //预警设备类型占比统计(分类表格)
      getAlarmEquipmentProStatis(data){
          var that = this;
@@ -631,17 +787,32 @@
                }
              ]
          }
      },
      //确认时间占比统计
      getConfirmTimeProEcharts(data){
        selConfirmTimePro(data).then(res =>{
          var data = res.data.data;
          var that =this;
          //计算总数
          that.confirmTimeTotal = data[0]+data[1]+data[2]+data[3];
          var time = this.dateTime;
          let echarts = require('echarts');
          let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
          //饼图点击事件
          myChart.on('click',function(params){
              var data = [];
              data.push({
                    startTime:time[0],
                    endTime:time[1],
                    waringType:'紧急求救',
                    timeDesc: params.name
              })
              window.parent.handleStartAlarm(data);
          })
          var colors = ['green','#3fa1ff','yellow','#F34A4A']
          let option = {
              color:colors,
@@ -676,13 +847,6 @@
                          show: false,
                          position: 'center'
                      },
                      emphasis: {
                          label: {
                              show: true,
                              fontSize: '18',
                              fontWeight: 'bold'
                          }
                      },
                      labelLine: {
                          show: false
                      },
@@ -700,15 +864,24 @@
          window.addEventListener('resize',function() {myChart.resize()});
        })
      },
      //确认时间占比(分类)
      getConfirmTimeProStatis(data){
        selConfirmTimePro(data).then(res =>{
          var data = res.data.data;
          var time = this.dateTime;
          var that = this;
          that.confirmTimeProStatis.data = [
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '小于5分钟'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'小于5分钟',
                  color:'green',
@@ -717,6 +890,14 @@
              },
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '5-10分钟'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'5-10分钟',
                  color:'#3fa1ff',
@@ -724,6 +905,14 @@
              },
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '10-30分钟'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'10-30分钟',
                  color:'yellow',
@@ -731,6 +920,14 @@
              },
              {
                  click: function (item) {
                    var data = [];
                    data.push({
                          startTime:time[0],
                          endTime:time[1],
                          waringType:'紧急求救',
                          timeDesc: '30分钟以上'
                    })
                    window.parent.handleStartAlarm(data);
                  },
                  title:'30分钟以上',
                  color:'#F34A4A',
@@ -739,7 +936,7 @@
            ];
        })
      },
      //预警平均速度排行(table)
      confirmAverageSpeedStatis(data){
          var that = this;
@@ -771,7 +968,7 @@
              ]
          }
      },
      //预警时间分布
      getAlarmTimeDisEchars(data){
        selAlarmTimeDis(data).then(res =>{
@@ -861,7 +1058,7 @@
          window.addEventListener('resize',function() {myChart.resize()});
        })
      },
      //点击按钮获取不同时间段的数据
      getData(date){
          var that = this;
@@ -870,7 +1067,7 @@
          //调用方法获取数据
          this.getStatisData(data);
      },
      getStatisData(data){
          //统计预警总数
          this.getStatisTotalData(data);
@@ -891,8 +1088,8 @@
          //预警时间分布统计
          this.getAlarmTimeDisEchars(data);
      },
      //计算两个日期之间的天数
      getDaysBetween(startTime,endTime){
          var  startDate = Date.parse(startTime);
@@ -906,8 +1103,8 @@
          var days=(endDate - startDate)/(1*24*60*60*1000);
          return  days;
      },
      getDate(date){
        var that = this;
          var today = new Date();
@@ -938,8 +1135,8 @@
            endTime:this.dateTime[1]
          }
      },
      //本日
      showToDay(Nowdate){   
        var M=Number(Nowdate.getMonth())+1;
@@ -952,7 +1149,7 @@
        }
        return Nowdate.getFullYear()+"-"+M+"-"+day;   
      },
      //本周第一天
      showWeekFirstDay(Nowdate){   
        var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);   
@@ -966,7 +1163,7 @@
        }
        return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
      },
      //本月第一天
      showMonthFirstDay(Nowdate){   
        var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);   
@@ -976,14 +1173,14 @@
        } 
        return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+MonthFirstDay.getDate();   
      },
      //本季度的第一天
      getQuarterStartDate(Nowdate){
        var quarterStartDate = this.getQuarterStartMonth(Nowdate);
        return Nowdate.getFullYear()+"-"+quarterStartDate+"-"+"01";
      },
      //本季度的第一个月份
      getQuarterStartMonth(Nowdate){
        var nowMonth = Nowdate.getMonth()+1;
@@ -1003,9 +1200,9 @@
        }
        return quarterStartMonth;
      }
    },
  }
    
  
@@ -1013,5 +1210,5 @@
<style lang="scss">
  
  @import '@/styles/alarmAnalysis/alarmAnalysis.scss'
</style>
src/views/healthcode/healthcode.vue
@@ -191,7 +191,7 @@
        recorder: null,
      };
    },
    mounted:{
    mounted(){
    },
    computed: {
@@ -251,7 +251,7 @@
      getHealthcodeType(){
          if (this.$route.query.type != undefined) {
              var type = this.$route.query.type+"";
              this.$route.query = {};
              //this.$route.query = {};
              return type;
          }
      },