soc_app/src/views/menu/iot/envMonitor/index.vue

<template>
  <div class="page_list">
    <nav-bar></nav-bar>
    <van-row>
      <van-col span="24">
        <org-tree
          v-model="search.orgId"
          @changeItem="changeTree"
          @checked="orgCheckChanged"
          showChecked
          defaultChecked
        ></org-tree>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-tabs @click="tabActiveHandler">
          <van-tab name="thiefCheck" title="防盗" :badge="thiefCheckBadge"></van-tab>
          <van-tab name="infraredCheck" title="红外" :badge="infraredCheckBadge"></van-tab>
          <van-tab name="doorCheck" title="门窗磁" :badge="doorCheckBadge"></van-tab>
          <van-tab name="waterCheck" title="水浸" :badge="waterCheckBadge"></van-tab>
          <van-tab name="upsCheck" title="UPS" :badge="upsCheckBadge"></van-tab>
          <van-tab name="airCheck" title="空调" :badge="airCheckBadge"></van-tab>
        </van-tabs>
      </van-col>
      <van-col span="12" class="customVanCell">
        <van-cell title="设备总数：" :value="totalCount" />
      </van-col>
      <van-col span="12" class="customVanCell">
        <van-cell title="当前告警：" :value="alarmCount" />
      </van-col>
    </van-row>
    <div class="container">
      <k-list :list="list" :params="search" :auto="false" ref="list">
        <template slot-scope="{ data }">
          <item :data="data"></item>
        </template>
      </k-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'
import { deviceTypeCount } from '@/api/iot/sensorAlarm.js'
import { list } from '@/api/iot/donghuan.js'
import KList from '@/components/list/index.vue'
import Item from './components/item.vue'
import OrgTree from '@/components/orgTree'
export default {
  components: { NavBar, KList, Item, OrgTree },
  name: 'iot_envMonitor',
  data() {
    return {
      search: {
        orgId: this.orgId,
        checkSub: true,
        deviceType: '41881',
        deviceName:null,
        state: null,
        pageNum: 1,
        pageSize: 10
      },
      thiefCheckBadge: null,
      infraredCheckBadge: null,
      doorCheckBadge: null,
      waterCheckBadge: null,
      upsCheckBadge: null,
      airCheckBadge: null,
      totalCount: 0,
      alarmCount: 0,
      dataInfo:{},
      tabName:"thiefCheck"
    }
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      if(to.params.event === 'refresh'){
        vm.reSet()
      }
    })
  },
  watch: {},
  created() {
  },
  mounted() {
    this.search.orgId = this.orgId;
    this.getBadge();
  },
  computed: {
    ...mapGetters(['orgName', 'orgId', 'dictionary'])
  },
  methods: {
    list,
    reSet(){
      this.search= {
        orgId: this.orgId,
        checkSub: true,
        deviceType: '4182',
        deviceName:null,
        state: null,
        pageNum: 1,
        pageSize: 10
      };
    },
    //改变机构后将重新发起请求
    changeTree(node) {
      this.search.orgId = node.id;
      this.getBadge();
    },
    orgCheckChanged(v) {
      this.search.checkSub = v;
      this.getBadge();
    },
    getBadge(){
      deviceTypeCount(this.search).then(r =>{
        this.dataInfo = r.data;
        if (r.data.thiefAlarmCount){
          this.thiefCheckBadge=r.data.thiefAlarmCount > 99 ? '99+' : r.data.thiefAlarmCount;
        }else {
          this.thiefCheckBadge = null;
        }

        if (r.data.infraredAlarmCount){
          this.infraredCheckBadge=r.data.infraredAlarmCount > 99 ? '99+' : r.data.infraredAlarmCount;
        }else {
          this.infraredCheckBadge = null;
        }

        if (r.data.doorAlarmCount){
          this.doorCheckBadge=r.data.doorAlarmCount > 99 ? '99+' : r.data.doorAlarmCount;
        }else {
          this.doorCheckBadge = null;
        }

        if (r.data.waterAlarmCount){
          this.waterCheckBadge=r.data.waterAlarmCount > 99 ? '99+' : r.data.waterAlarmCount;
        }else {
          this.waterCheckBadge = null;
        }

        if (r.data.upsAlarmCount){
          this.upsCheckBadge=r.data.upsAlarmCount > 99 ? '99+' : r.data.upsAlarmCount;
        }else {
          this.upsCheckBadge = null;
        }

        if (r.data.airAlarmCount){
          this.airCheckBadge=r.data.airAlarmCount > 99 ? '99+' : r.data.airAlarmCount;
        }else {
          this.airCheckBadge = null;
        }

        this.tabActiveHandler(this.tabName);
      })
    },
    tabActiveHandler(name){
      if (name === "thiefCheck"){
        this.totalCount = this.dataInfo.thiefCount === null ? 0 : this.dataInfo.thiefCount;
        this.alarmCount = this.dataInfo.thiefAlarmCount === null ? 0 : this.dataInfo.thiefAlarmCount;
        this.search.deviceType = "41881";
      }else if (name === "infraredCheck"){
        this.totalCount = this.dataInfo.infraredCount === null ? 0 : this.dataInfo.infraredCount;
        this.alarmCount = this.dataInfo.infraredAlarmCount === null ? 0 : this.dataInfo.infraredAlarmCount;
        this.search.deviceType = "4181";
      }else if (name === "doorCheck"){
        this.totalCount = this.dataInfo.doorCount === null ? 0 : this.dataInfo.doorCount;
        this.alarmCount = this.dataInfo.doorAlarmCount === null ? 0 : this.dataInfo.doorAlarmCount;
        this.search.deviceType = "4188";
      }else if (name === "waterCheck"){
        this.totalCount = this.dataInfo.waterCount === null ? 0 : this.dataInfo.waterCount;
        this.alarmCount = this.dataInfo.waterAlarmCount === null ? 0 : this.dataInfo.waterAlarmCount;
        this.search.deviceType = "4184";
      }else if (name === "upsCheck"){
        this.totalCount = this.dataInfo.upsCount === null ? 0 : this.dataInfo.upsCount;
        this.alarmCount = this.dataInfo.upsAlarmCount === null ? 0 : this.dataInfo.upsAlarmCount;
        this.search.deviceType = "408";
      }else if (name === "airCheck"){
        this.totalCount = this.dataInfo.airCount === null ? 0 : this.dataInfo.airCount;
        this.alarmCount = this.dataInfo.airAlarmCount === null ? 0 : this.dataInfo.airAlarmCount;
        this.search.deviceType = "415";
      }
      this.tabName = name;
      //this.$forceUpdate()
    },
  }
}
</script>

<style lang="scss" scoped>
.page_list {
  background-color: transparent;
  display: block;

  .van-row{
    .customVanCell{
      .van-cell{
        // padding-left: 1vw !important;
        .van-cell__title{
          color: #969799 !important;
          flex:none !important;
          margin-left: 20%;
        }
        .van-cell__value {
          color: #969799 !important;
          flex: none !important;
        }
      }
    }
  }

  .container {
    // overflow: auto;
    // height: calc(100vh - 11rem);
    .k-content-repair {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
  }
}
</style>