mt-yd-ui/src/views/modules/monitoring/realtimeQualityInspection.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'">质量检查实时数据</small-title>
      <base-table
        v-if="tableReady"
        :table-config="tableProps"
        :table-data="tableData.length ? tableData : []"
        :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'

export default {
  name: 'RealtimeDataOfTeam',
  components: { BaseTable, SmallTitle },
  data() {
    return {
      tableReady: false,
      // dynamicPropSet: false,
      tableProps: [{ label: 'default', prop: 'default' }],
      tableData: [],
      testData,
      listLoading: false,
      intervalId: null
    }
  },

  mounted() {
    this.clearData()

    // fetchList('quality').then(res => {
    //   this.testData = res
    //   this.handleData()
    // })

    // this.intervalId = setInterval(() => {
    //   this.clearData()
    //   fetchList('quality').then(res => {
    //     this.testData = res
    //     this.handleData()
    //   })
    // }, 1000 * 60 * 5)

    this.$nextTick(() => {
      this.handleData()
    })
  },

  beforeDestroy() {
    if (this.intervalId) clearInterval(this.intervalId)
  },

  methods: {
    clearData() {
      this.tableReady = false
      // this.testData = null
      this.tableData.splice(0)
      this.tableProps.splice(0)
    },

    handleData() {
      // console.log('testData ===> ', this.testData)
      this.initProps()
      // console.log('props ===> ', this.tableProps)
      this.initData()
      // console.log('datas ===> ', this.tableData)
      this.tableReady = true
    },

    handleRow(data) {
      // data: { data:[], checkType: '' }
      const item = {}
      item.checkType = data.checkType

      data.data.forEach(timepoint => {
        if (timepoint.children && timepoint.children.length) {
          timepoint.children.forEach(line => {
            // item[timepoint.dynamicValue + line.dynamicName] = line.dynamicValue
            item[timepoint.dynamicName + line.dynamicName] = line.dynamicValue
          })
        }
      })

      return item
    },

    initData() {
      this.tableData = this.testData.data.data.map(row => this.handleRow(row))
    },

    initProps() {
      this.tableProps = this.handlePropsEntry(this.testData.data.nameData)
    },

    handlePropsEntry(nameData) {
      const dynamicPropNames = []
      const timeMap = {}

      const parentNode = nameData.filter(item => item.tree === 1)
      const childNode = nameData.filter(item => item.tree === 2)

      const handleChild = function(prop) {
        const time = parentNode.find(item => item.id === prop.parentId).name
        // 填充 timeMap
        timeMap[time] = timeMap[time] ? timeMap[time] : {}
        timeMap[time][prop.name] = true
      }

      childNode.forEach(item => {
        handleChild(item)
      })

      // 对键值排序（时间排序）
      const sortedTime = Object.keys(timeMap).sort((a, b) => {
        if (moment(a).isBefore(b)) return -1
        else return 1
      })

      // 保存为 props
      for (const key of sortedTime) {
        const prop = { label: key, children: [] }
        for (const subKey in timeMap[key]) {
          prop.children.push({ label: subKey, prop: key + subKey })
        }
        dynamicPropNames.push(prop)
      }

      return [{ prop: 'checkType', label: '检查类型', isFixed: true }, ...dynamicPropNames]
    }
  }
}
</script>