qushaowei
2024-03-28 585fb0bbd4a7bc7f8f333ecba7c5fecd2ee5cbc2
src/views/mdc/base/DeviceBaseInfo.vue
@@ -5,38 +5,52 @@
        <base-tree @sendSelectBaseTree="changeSelection" @getCurrSelected="changeSelectionNode"></base-tree>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <div class="equipMessage">
          <table>
            <tr>
              <td>关机
                <span class="equipShutdown"></span>
              </td>
              <td>{{offNumber}}</td>
              <td>待机
                <span class="standbyNumber"></span>
              </td>
              <td>{{standbyNumber}}</td>
              <td>运行
                <span class="equipRun"></span>
              </td>
              <td>{{workNumber}}</td>
              <td>报警
                <span class="equipAlarm"></span>
              </td>
              <td>{{warningNumber}}</td>
              <td>总数</td>
              <td>{{allNumber}}</td>
            </tr>
          </table>
        <!--<div class="equipMessage">-->
          <!--<table>-->
            <!--<tr>-->
              <!--<td>关机-->
                <!--<span class="equipShutdown"></span>-->
              <!--</td>-->
              <!--<td>{{offNumber}}</td>-->
              <!--<td>待机-->
                <!--<span class="standbyNumber"></span>-->
              <!--</td>-->
              <!--<td>{{standbyNumber}}</td>-->
              <!--<td>运行-->
                <!--<span class="equipRun"></span>-->
              <!--</td>-->
              <!--<td>{{workNumber}}</td>-->
              <!--<td>报警-->
                <!--<span class="equipAlarm"></span>-->
              <!--</td>-->
              <!--<td>{{warningNumber}}</td>-->
              <!--<td>总数</td>-->
              <!--<td>{{allNumber}}</td>-->
            <!--</tr>-->
          <!--</table>-->
        <!--</div>-->
        <div class="device-status-info">
          <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
            <template v-if="item.value!=99">
              <div>{{ item.label }}</div>
              <div class="status-square" :style="{ backgroundColor: item.color }"></div>
              <div>{{getDeviceNumberByStatus(item.value) }}</div>
            </template>
            <template v-else>
              <div>{{ item.label }}</div>
              <div>{{getDeviceNumberByStatus(item.value) }}</div>
            </template>
          </a-space>
        </div>
        <div>
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="布局图">
              <equipment-layout :dataList="dataList" :equipmentId="selectEquementId" :node="selectEquement"></equipment-layout>
            </a-tab-pane>
            <a-tab-pane key="2" tab="列表" force-render>
              <equipment-list :dataSource="dataList"></equipment-list>
              <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus"></equipment-list>
            </a-tab-pane>
          </a-tabs>
        </div>
@@ -81,10 +95,39 @@
        workNumber: 0,
        allNumber: 0,
        url: {
          list: '/mdc/mdcEquipment/queryEquipmentMonitorList'
          list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
          updateEquipmentStatus:'/mdc/mdcEquipment/updateEquipmentStatus'
        },
        param:{},
        timer:null,
        timerzhun:null
        timerzhun:null,
        deviceStatusList: [
          {
            label: '关机',
            value: 0,
            color: '#A8A8A8'
          },
          {
            label: '待机',
            value: 2,
            color: '#FFFF00'
          },
          {
            label: '运行',
            value: 3,
            color: '#00EE00'
          },
          {
            label: '报警',
            value: 22,
            color: '#FF0000'
          },
          {
            label: '总数',
            value: 99,
            color: '#fff'
          }
        ],// 设备状态指示灯列表,
      }
    },
    created() {
@@ -92,7 +135,7 @@
      // setInterval(this.equipmentStatistics(), 5*1000);
    },
    methods: {
      equipmentStatistics(param) {
      equipmentStatistics(param,resopnse={key:false}) {
        getAction(this.url.list, param).then((res) => {
          this.dataList = []
          if (res.success) {
@@ -105,6 +148,13 @@
              this.dataList = res.result
              // console.log(this.dataList)
              this.allNumber = this.dataList.length
              if(resopnse.key){
                this.$notification.success({
                  key:'equipmentStatus',
                  message: '消息',
                  description: resopnse.message,
                });
              }
              for (let i = 0; i < this.dataList.length; i++) {
                let item = this.dataList[i]
                switch (item.oporationDict) {
@@ -140,25 +190,65 @@
        this.selectEquement = val.equipmentId
        clearInterval(this.timer);
        this.timer = null
        let param = {}
        if (!val.equipmentId) {
          param.key = val.key
          this.param.key=val.key
          clearInterval(this.timerzhun);
          this.timerzhun = null
          this.equipmentStatistics(param)
          this.equipmentStatistics(this.param)
          this.timer = setInterval(() => {
            setTimeout( this.equipmentStatistics(param),0)
            setTimeout( this.equipmentStatistics(this.param),0)
          },1000*10)
        }else{
          param.key = val.parentId
          this.param.key=val.parentId
          clearInterval(this.timerzhun);
          this.timerzhun = null
          this.equipmentStatistics(param)
          this.equipmentStatistics(this.param)
          this.timer = setInterval(() => {
            setTimeout( this.equipmentStatistics(param),0)
            setTimeout( this.equipmentStatistics(this.param),0)
          },1000*10)
        }
      }
      },
      /**
       * 单击状态反馈后触发
       * @param record
       */
      editEquipmentStatus(record){
        console.log('子组件record',record.id)
        const _this=this
        this.$notification.info({
          key:'equipmentStatus',
          message: '消息',
          description: '反馈中...',
        });
        getAction(this.url.updateEquipmentStatus,{id:record.id})
          .then(res=>{
            if(res.success) {
              _this.equipmentStatistics(this.param,{key:true,message:res.message})
            }else{
              this.$notification.warning({
                message:'消息',
                description:res.message
              });
            }
          })
          .catch(err=>{
            this.$notification.error({
              message:'消息',
              description:err.message
            });
          })
      },
      /**
       * 根据设备状态值获取对应设备数量
       * @param value 设备状态值
       * @returns {number} 设备数量
       */
      getDeviceNumberByStatus(value) {
        if (value === 99) return this.dataList.length
        return this.dataList.filter((item) => item.oporation === 1 && value === 2 || item.oporation === value).length
      },
    },
    mounted(){
      this.equipmentStatistics()
@@ -172,7 +262,7 @@
    }
  }
</script>
<style scoped>
<style scoped lang="less">
  @import '~@assets/less/common.less';
  .equipMessage {
@@ -212,4 +302,20 @@
  .equipMessage table td .equipAlarm {
    background-color: #FD0008;
  }
  .device-status-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .single-status-info {
      margin: 10px;
      .status-square {
        width: 20px;
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 3px;
      }
    }
  }
</style>