Merge branch 'master' of http://125.76.225.53:18448/r/xhj/vue_mdc_xhj

cuijian

2025-07-28 accebdce93486d3b4f26e55ffdea047549cce20c

 src/views/mdc/base/DeviceBaseInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,300 @@
<template>
  <a-card :bordered="false">
    <a-row type="flex" :gutter="16">
      <a-col :md="5" :sm="24">
        <base-tree @sendSelectBaseTree="changeSelection" @getCurrSelected="changeSelectionNode"></base-tree>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <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="selectEquipmentId"
                                :node="selectEquipment"></equipment-layout>
            </a-tab-pane>
            <a-tab-pane key="2" tab="列表" force-render>
              <equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus" :equipmentId="this.param.key"></equipment-list>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-col>
    </a-row>


  </a-card>
</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BaseTree from '../common/BaseTree'
  import EquipmentLayout from './modules/DeviceBaseInfo/EquipmentLayout'
  import EquipmentList from './modules/DeviceBaseInfo/EquipmentList'

  export default {
    name: 'DeviceBaseInfo',
    components: {
      BaseTree,
      EquipmentLayout,
      EquipmentList
    },
    data() {
      return {
        description: '设备信息',
        selectEquipmentId: '',
        selectEquipment: {},
        equipmentStatisticsInfo: {},
        dataList: [],
        standbyNumber: 0,
        offNumber: 0,
        warningNumber: 0,
        workNumber: 0,
        allNumber: 0,
        url: {
          list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
          updateEquipmentStatus: '/mdc/mdcEquipment/updateEquipmentStatus'
        },
        param: {},
        timer: 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() {
      const { productionId } = this.$route.params
      if (productionId) this.param.key = productionId
    },
    methods: {
      equipmentStatistics(param, resopnse = { key: false }) {
        getAction(this.url.list, param).then((res) => {
          this.dataList = []
          if (res.success) {
            if (res.result.length != 0) {
              this.standbyNumber = 0
              this.offNumber = 0
              this.warningNumber = 0
              this.workNumber = 0
              this.allNumber = 0
              this.dataList = res.result
              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) {
                  case '待机' :
                    this.standbyNumber = this.standbyNumber + 1
                    break
                  case '运行' :
                    this.workNumber = this.workNumber + 1
                    break
                  case '关机' :
                    this.offNumber = this.offNumber + 1
                    break
                  case '报警' :
                    this.warningNumber = this.warningNumber + 1
                    break
                  default:
                    break
                }
              }

              // ç­›é€‰ä»Žè½¦æ¿è·³è½¬è¿‡æ¥çš„需求数据
              const { signageData } = this.$route.params
              console.log('signageData', signageData)
              if (!signageData) return
              else this.filterDataList(signageData)
            } else {
              this.$notification.warning({
                message: '消息',
                description: '此车间下面无设备！！'
              })
            }
          } else {
            this.$notification.warning({
              message: '消息',
              description: res.message
            })
          }
        })
      },

      /**
       * ç­›é€‰æ»¡è¶³ä»Žçœ‹æ¿è·³è½¬è¿‡æ¥æ—¶çš„条件的数据
       * @param record
       */
      filterDataList(signageData) {
        this.dataList = this.dataList.filter(item => item.oporationDict === signageData.name)
      },

      changeSelection(val) {
        this.selectEquipmentId = val
      },
      changeSelectionNode(val) {
        this.selectEquipment = val.equipmentId
        clearInterval(this.timer)
        this.timer = null
        if (!val.equipmentId) {
          this.param.key = val.key
          this.equipmentStatistics(this.param)
          this.timer = setInterval(() => {
            setTimeout(this.equipmentStatistics(this.param), 0)
          }, 1000 * 10)
        } else {
          this.param.key = val.parentId
          this.equipmentStatistics(this.param)
          this.timer = setInterval(() => {
            setTimeout(this.equipmentStatistics(this.param), 0)
          }, 1000 * 10)
        }
      },

      /**
       * å•å‡»çŠ¶æ€åé¦ˆåŽè§¦å‘
       * @param record
       */
      editEquipmentStatus(record) {
        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(this.param)
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';

  .equipMessage {
    width: 100%;
    height: 20px;
  }

  .equipMessage table {
    width: 60%;
    height: 100%;
    line-height: 50%;
    float: right;
  }

  .equipMessage table td {
    text-align: center;
  }

  .equipMessage table td span {
    display: inline-block;
    width: 15px;
    height: 15px;
  }

  .equipMessage table td .equipShutdown {
    background-color: #808080;
  }

  .equipMessage table td .standbyNumber {
    background-color: #ffbf37;
  }

  .equipMessage table td .equipRun {
    background-color: #19FE01;
  }

  .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>