From 69dda72fab2780b0d9907c566eb7672f98ba78e0 Mon Sep 17 00:00:00 2001
From: g7hoo <liubin_9396@163.com>
Date: Mon, 22 Aug 2022 14:25:01 +0800
Subject: [PATCH] =?UTF-8?q?init=20=E5=8E=82=E5=8A=A1=E7=94=9F=E4=BA=A7?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/monitoring/realtimeEquipment.vue  | 232 ++++++++++++++++++
 .../monitoring/realtimeProductLine.vue        | 176 +++++++++++++
 .../monitoring/realtimeQualityInspection.vue  | 148 +++++++++++
 3 files changed, 556 insertions(+)
 create mode 100644 src/views/modules/monitoring/realtimeEquipment.vue
 create mode 100644 src/views/modules/monitoring/realtimeProductLine.vue
 create mode 100644 src/views/modules/monitoring/realtimeQualityInspection.vue

diff --git a/src/views/modules/monitoring/realtimeEquipment.vue b/src/views/modules/monitoring/realtimeEquipment.vue
new file mode 100644
index 0000000..0549963
--- /dev/null
+++ b/src/views/modules/monitoring/realtimeEquipment.vue
@@ -0,0 +1,232 @@
+<!--
+ * @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>
diff --git a/src/views/modules/monitoring/realtimeProductLine.vue b/src/views/modules/monitoring/realtimeProductLine.vue
new file mode 100644
index 0000000..7c76e51
--- /dev/null
+++ b/src/views/modules/monitoring/realtimeProductLine.vue
@@ -0,0 +1,176 @@
+<!--
+ * @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.productLine.name') }}</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: 'RealtimeDataOfLine',
+  components: { BaseTable, SmallTitle },
+  data() {
+    return {
+      tableReady: false,
+      dynamicPropSet: false,
+      tableProps: [{ label: 'default', prop: 'default' }],
+      tableData: [],
+      testData: null,
+      listLoading: false,
+      intervalId: null
+    }
+  },
+
+  mounted() {
+    this.clearData()
+    fetchList('line').then(res => {
+      this.testData = res
+      this.handleData()
+    })
+
+    this.intervalId = setInterval(() => {
+      this.$message({
+        message: this.$t('module.factory.realtime.productLine.refresh'),
+        type: 'warning',
+        onClose: () => {
+          this.clearData()
+          fetchList('line').then(res => {
+            this.testData = res
+            this.handleData()
+          })
+        }
+      })
+    }, 1000 * 60 * 5)
+  },
+
+  beforeDestroy() {
+    if (this.intervalId) clearInterval(this.intervalId)
+  },
+
+  methods: {
+    clearData() {
+      this.dynamicPropSet = false
+      this.tableReady = false
+      this.testData = null
+      this.tableData.splice(0)
+      this.tableProps.splice(0)
+      this.setStaticTableProps()
+    },
+
+    handleData() {
+      this.expandDataStepOne()
+      // this.expandDataStepTwo()
+      if (this.tableData.length > 0) this.tableReady = true
+      else {
+        this.$message({
+          message: '没有查询到相关数据!',
+          type: 'error',
+          duration: 2000
+        })
+      }
+    },
+
+    expandDataStepOne() {
+      // 扩展服务器返回的数据第一阶段
+      console.log('create new one')
+      this.tableData = this.testData.data.map(item => {
+        const newItem = {
+          lineName: item.lineName,
+          orderName: item.orderName,
+          productSize: item.productSize ?? '-'
+        }
+
+        if (item.det) {
+          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: this.$t('module.factory.realtime.productLine.input') },
+                  { prop: obj.recordTime + '-outputNum', label: this.$t('module.factory.realtime.productLine.output') },
+                  {
+                    prop: obj.recordTime + '-passArea',
+                    label: this.$t('module.factory.realtime.productLine.passArea')
+                  },
+                  {
+                    prop: obj.recordTime + '-scrapNum',
+                    label: this.$t('module.factory.realtime.productLine.scrapNum')
+                  },
+                  {
+                    prop: obj.recordTime + '-scrapRate',
+                    label: this.$t('module.factory.realtime.productLine.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
+            })
+
+            const scrapRate = obj.scrapRate ?? '-'
+            Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
+              value: scrapRate === '-' ? '-' : scrapRate * 100 + '%',
+              enumerable: true,
+              writable: true
+            })
+            Object.defineProperty(newItem, obj.recordTime + '-passArea', {
+              value: obj.passArea ?? '-',
+              enumerable: true,
+              writable: true
+            })
+          })
+
+          this.dynamicPropSet = true
+          return newItem
+        } else {
+          // console.log('没有item.det属性')
+        }
+      })
+    },
+
+    setStaticTableProps() {
+      // Step1: 设置静态的 table props
+      const staticTableProps = [
+        { prop: 'lineName', label: this.$t('module.factory.realtime.productLine.pl'), fixed: true },
+        { prop: 'orderName', label: this.$t('module.factory.realtime.productLine.currOrder'), fixed: true },
+        { prop: 'productSize', label: this.$t('module.factory.realtime.productLine.pSpecs'), fixed: true }
+      ]
+      this.tableProps = staticTableProps
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/monitoring/realtimeQualityInspection.vue b/src/views/modules/monitoring/realtimeQualityInspection.vue
new file mode 100644
index 0000000..9a00173
--- /dev/null
+++ b/src/views/modules/monitoring/realtimeQualityInspection.vue
@@ -0,0 +1,148 @@
+<!--
+ * @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>