feat: connect storage matrix to database

src/views/qingAn.vue

@@ -198,7 +198,7 @@
                   <strong>{{ group.name }}</strong>
                   <span>{{ group.filled }} / {{ group.total }}</span>
                 </div>
-                <div class="slots">
+                <div class="slots" :style="getStorageSlotGridStyle(group)">
                   <span v-for="slot in group.slots" :key="slot.name" class="slot" :class="{ 'slot--filled': slot.filled }">
                     {{ slot.name }}
                   </span>
@@ -311,6 +311,8 @@ export default {
       dmtIframeReady: false,
       lineMonitorTimer: null,
       lineMonitorRequesting: false,
+      storageMatrixTimer: null,
+      storageMatrixRequesting: false,
       clockTimer: null,
       resizeHandler: null,
       alarmPieChart: null,
@@ -473,26 +475,34 @@ export default {
       ],
       storageGroups: [
         {
+          unitKey: 'longRail',
           name: '加工中心单元库区',
           total: 9,
+          columns: 3,
           filled: 6,
           slots: this.createSlots(['S1', 'S2', 'S4', 'S6', 'S7', 'S9'], 9)
         },
         {
+          unitKey: 'shortRail',
           name: '车床加工单元库区',
           total: 9,
+          columns: 3,
           filled: 6,
           slots: this.createSlots(['S1', 'S3', 'S4', 'S6', 'S8', 'S9'], 9)
         },
         {
+          unitKey: 'joint',
           name: '插齿机单元库区',
           total: 6,
+          columns: 2,
           filled: 4,
           slots: this.createSlots(['S1', 'S3', 'S5', 'S6'], 6)
         },
         {
+          unitKey: 'grinder',
           name: '磨床加工单元库区',
           total: 6,
+          columns: 2,
           filled: 3,
           slots: this.createSlots(['S2', 'S4', 'S6'], 6)
         }
@@ -615,10 +625,14 @@ export default {
     this.setScale()
     this.$nextTick(this.initAlarmPieChart)
     this.loadLineMonitorData()
+    this.loadStorageMatrixData()
     this.clockTimer = setInterval(this.updateTime, 1000)
     this.lineMonitorTimer = setInterval(() => {
       this.loadLineMonitorData()
     }, 5000)
+    this.storageMatrixTimer = setInterval(() => {
+      this.loadStorageMatrixData()
+    }, 5000)
     this.resizeHandler = () => {
       this.setScale()
       if (this.alarmPieChart) {
@@ -654,6 +668,10 @@ export default {
       clearInterval(this.lineMonitorTimer)
       this.lineMonitorTimer = null
     }
+    if (this.storageMatrixTimer) {
+      clearInterval(this.storageMatrixTimer)
+      this.storageMatrixTimer = null
+    }
     if (this.alarmPieChart) {
       this.alarmPieChart.dispose()
       this.alarmPieChart = null
@@ -665,10 +683,83 @@ export default {
         const name = `S${index + 1}`
         return {
           name,
-          filled: filledNames.includes(name)
+          filled: filledNames.includes(name),
+          value: filledNames.includes(name) ? '1' : '0'
         }
       })
     },
+    getStorageSlotGridStyle(group) {
+      const columns = Number(group && group.columns) || 3
+      return {
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+      }
+    },
+    loadStorageMatrixData() {
+      if (this.storageMatrixRequesting) return
+      this.storageMatrixRequesting = true
+      const data = this.CreateData('11', 'TV_物料库位矩阵_查询', [])
+      this.ExecDatabase(data)
+        .then((response) => {
+          const list = response && response.data ? response.data : null
+          if (!Array.isArray(list) || list.length === 0) return
+          if (list.length === 1 && list[0] && (list[0].result === '0' || list[0].result === 0)) return
+          this.applyStorageMatrixData(list)
+        })
+        .catch((error) => {
+          console.error('TV_物料库位矩阵_查询失败', error)
+        })
+        .then(() => {
+          this.storageMatrixRequesting = false
+        })
+    },
+    applyStorageMatrixData(list) {
+      const groupMap = {}
+      list.forEach((item) => {
+        const unitKey = this.formatStorageValue(item.UnitKey || item.unitKey)
+        if (!unitKey) return
+        if (!groupMap[unitKey]) {
+          groupMap[unitKey] = {
+            unitKey,
+            name: this.formatStorageValue(item.UnitName || item.unitName),
+            total: Number(item.Total || item.total) || 0,
+            columns: Number(item.Columns || item.columns) || 3,
+            slots: []
+          }
+        }
+        const slotName = this.formatStorageValue(item.SlotName || item.slotName)
+        const slotNo = Number(item.SlotNo || item.slotNo) || groupMap[unitKey].slots.length + 1
+        const filledValue = this.pickStorageSignalValue(item, ['Filled', 'filled', 'SlotValue', 'slotValue'])
+        const filled = this.isSignalOn(filledValue)
+        groupMap[unitKey].slots.push({
+          name: slotName || `S${slotNo}`,
+          slotNo,
+          filled,
+          value: filled ? '1' : '0'
+        })
+      })
+      Object.keys(groupMap).forEach((key) => {
+        groupMap[key].slots.sort((a, b) => a.slotNo - b.slotNo)
+        groupMap[key].total = groupMap[key].total || groupMap[key].slots.length
+        groupMap[key].filled = groupMap[key].slots.filter(slot => slot.filled).length
+      })
+      this.storageGroups = this.storageGroups.map((group) => {
+        const nextGroup = groupMap[group.unitKey]
+        if (!nextGroup) return group
+        return Object.assign({}, group, nextGroup)
+      })
+    },
+    formatStorageValue(value) {
+      return String(value == null ? '' : value).trim()
+    },
+    pickStorageSignalValue(item, keys) {
+      for (let i = 0; i < keys.length; i += 1) {
+        const value = item[keys[i]]
+        if (value !== undefined && value !== null) {
+          return value
+        }
+      }
+      return ''
+    },
     loadLineMonitorData() {
       if (this.lineMonitorRequesting) return
       this.lineMonitorRequesting = true
@@ -2257,7 +2348,9 @@ body,
   flex: 1;
   min-height: 0;
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
   grid-auto-rows: minmax(0, 1fr);
   gap: 6px;
 }