mt-yd-ui/src/views/modules/monitoring/realtimeEquipment.vue

<!--
 * @Author: lb
 * @Date: 2022-06-22 14:00:17
 * @LastEditors: lb
 * @LastEditTime: 2022-06-22 14:00:17
 * @Description: 设备生产实时数据
-->
<template>
  <div>
    <div class="app-container">
      <small-title :size="'md'">{{ $t('module.factory.realtime.equipment.name') }}</small-title>
      <base-table
        v-if="tableReady"
        :table-config="tableProps"
        :table-data="tableData.length ? tableData : []"
        :span-method="spanMethod"
        :is-loading="listLoading"
        :index-config="{ align: 'left', fixed: 'left' }"
      />
    </div>
  </div>
</template>

<script>
// import BaseTable from '@/components/BaseTable/index-compound'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
// import fetchList from '@/api/factory-manage/realtimeData'

const fetchList = () => {}


export default {
  name: 'RealtimeDataOfEquipment',
  components: { BaseTable, SmallTitle },
  data() {
    return {
      tableReady: false,
      tableProps: [{ label: 'default', prop: 'default' }],
      stepOneArray: [],
      tableData: [],
      testData: null,
      equipmentCount: {}, // 每个产线的设备数量记录
      dynamicPropSet: false, // 是否设置过动态prop
      listLoading: false,
      rowNum: 0,
      intervalId: null
    }
  },
  created() {
    // this.clearData()
    // this.testData = testData
    // this.handleData()
    this.clearData()
    fetchList('equipment').then(res => {
      this.testData = res
      this.handleData()
    })

    this.intervalId = setInterval(() => {
      this.$message({
        message: this.$t('module.factory.realtime.equipment.refresh'),
        type: 'warning',
        duration: 1500,
        onClose: () => {
          this.clearData()
          fetchList('equipment').then(res => {
            this.testData = res
            this.handleData()
          })
        }
      })
    }, 1000 * 60 * 5)
  },
  beforeDestroy() {
    if (this.intervalId) clearInterval(this.intervalId)
  },
  methods: {
    clearData() {
      this.tableData.splice(0)
      this.tableProps.splice(0)
      this.stepOneArray.splice(0)
      this.dynamicPropSet = false
      this.rowNum = 0
      this.testData = null
      this.tableReady = false
      this.equipmentCount = {}
      this.setStaticTableProps()
    },
    handleData() {
      this.expandDataStepOne()
      this.expandDataStepTwo()
      // console.log('span data: ', this.equipmentCount)
      this.tableReady = true
    },

    expandDataStepOne() {
      // this.rowNum = 0
      // 扩展服务器返回的数据第一阶段
      this.stepOneArray = this.testData.data.map(item => {
        // console.log('handle row: ', this.rowNum)
        if (item.equDet) {
          // let count = 0
          let newItem
          const newItemArray = []
          item.equDet.forEach((equipment, index) => {
            // count += 1
            newItem = {
              ...equipment,
              lineName: item.lineName,
              orderName: item.orderName,
              productSize: item.productSize
            }
            newItemArray.push(newItem)
          })
          // this.equipmentCountArray.push({ rowNum: this.rowNum, eqCount: count })
          // this.$set(this.equipmentCount, [this.rowNum], count)
          // this.rowNum += count
          return newItemArray
        }
      })
    },

    expandDataStepTwo() {
      // 扩展服务器返回的数据第二阶段
      // console.log('before step two: ', this.stepOneArray)
      this.rowNum = 0

      this.stepOneArray.forEach(arrayItem => {
        let count = 0

        arrayItem.forEach(item => {
          // console.log('========= ', item.equName, ' ==========')
          const newItem = {
            equId: item.equId,
            lineName: item.lineName,
            equName: item.equName,
            productSize: item.productSize,
            orderName: item.orderName,
            externalCode: item.externalCode,
            totalProduction: item.totalProduction ?? '-'
          }
          if (item.det) {
            count += 1
            item.det.forEach(obj => {
              // Step2: 设置动态props
              if (!this.dynamicPropSet) {
                this.tableProps.push({
                  label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
                  children: [
                    { prop: obj.recordTime + '-inputNum', label: i18n.t('module.factory.realtime.equipment.input') },
                    { prop: obj.recordTime + '-outputNum', label: i18n.t('module.factory.realtime.equipment.output') },
                    { prop: obj.recordTime + '-scrapNum', label: i18n.t('module.factory.realtime.equipment.scrapNum') },
                    {
                      prop: obj.recordTime + '-scrapRate',
                      label: i18n.t('module.factory.realtime.equipment.scrapRate')
                    }
                  ]
                })
              }

              // console.log('==> ',obj.recordTime, obj.inputNum, obj.outputNum, obj.scrapNum, obj.scrapRate)
              Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
                value: obj.inputNum ?? '-',
                enumerable: true,
                writable: true
              })
              Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
                value: obj.outputNum ?? '-',
                enumerable: true,
                writable: true
              })
              Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
                value: obj.scrapNum ?? '-',
                enumerable: true,
                writable: true
              })
              Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
                value: obj.scrapRate ?? '-',
                enumerable: true,
                writable: true
              })
              Object.defineProperty(newItem, 'recordTime', {
                value: obj.recordTime,
                enumerable: true,
                writable: true
              })
            })

            if (!this.dynamicPropSet) this.dynamicPropSet = true
            this.tableData.push(newItem)
          }
        })

        this.$set(this.equipmentCount, [this.rowNum], count)
        this.rowNum += count
      })
    },
    setStaticTableProps() {
      // Step1: 设置静态的 table props
      const staticTableProps = [
        { prop: 'lineName', label: i18n.t('module.factory.realtime.equipment.pl'), fixed: true },
        { prop: 'orderName', label: i18n.t('module.factory.realtime.equipment.currOrder'), fixed: true },
        { prop: 'productSize', label: i18n.t('module.factory.realtime.equipment.pSpecs'), fixed: true },
        { prop: 'equName', label: i18n.t('module.factory.realtime.equipment.eqName'), fixed: true },
        { prop: 'totalProduction', label: i18n.t('module.factory.realtime.equipment.produceTotal'), fixed: true }
      ]
      this.tableProps = staticTableProps
    },

    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 设置合并行列的方式
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        // 前3列需要合并多行

        if (this.equipmentCount[rowIndex]) {
          // 如果找到需要合并的行号
          return {
            rowspan: this.equipmentCount[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>