From 1fd862b6889f3cef394952ee12139f4617543c52 Mon Sep 17 00:00:00 2001
From: yinq <yinq>
Date: Mon, 27 Apr 2026 17:03:36 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=8E=82=E5=8C=BA=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=BC=98=E5=8C=96=E3=80=81=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/factoryIndex.vue | 139 +++++++++++++++++++++----------
 1 file changed, 93 insertions(+), 46 deletions(-)

diff --git a/src/views/board/factoryIndex.vue b/src/views/board/factoryIndex.vue
index 2052dc6..7aaae7e 100644
--- a/src/views/board/factoryIndex.vue
+++ b/src/views/board/factoryIndex.vue
@@ -2,6 +2,7 @@
   <div>
     <div class="bg">
       <div class="title">正道能源监控系统</div>
+      <div class="time">{{ clockText }}</div>
       <div class="subTitle" style="top: 13.5%;left: 6%;">设备总览</div>
       <div class="subTitle" style="top: 42.3%;left: 6%">本月{{ currentTypeMeta.rankName }}排行</div>
       <div class="subTitle" style="top: 71.2%;left: 6%">本月{{ currentTypeMeta.rankName }}分项统计</div>
@@ -108,27 +109,17 @@
 
       <div class="table1">
         <div class="h1" style="line-height: 1vw">
-          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
+          <div class="scrollTable" :style="getTableCellStyle(true)">
             设备名称
           </div>
-          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
-            {{ currentTypeMeta.field1Label }}
+          <div
+            class="scrollTable"
+            v-for="column in currentTypeMeta.columns"
+            :key="column.key"
+            :style="getTableCellStyle(true)"
+          >
+            {{ column.label }}
           </div>
-<!--          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
-<!--            B相电流-->
-<!--          </div>-->
-<!--          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
-<!--            C相电流-->
-<!--          </div>-->
-          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
-            {{ currentTypeMeta.field2Label }}
-          </div>
-<!--          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
-<!--            B相电压-->
-<!--          </div>-->
-<!--          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
-<!--            C相电压-->
-<!--          </div>-->
         </div>
         <vue-seamless-scroll
             :class-option="{...chart1TableOption,limitMoveNum:6}"
@@ -142,27 +133,17 @@
               :key="index"
           >
             <div class="T1">
-              <div class="scrollTable" style="width: calc(100% / 3);">
+              <div class="scrollTable" :style="getTableCellStyle()">
                 {{ item.monitorName || '' }}
               </div>
-              <div class="scrollTable" style="width: calc(100% / 3);">
-                {{ item[currentTypeMeta.field1Key] || 0 }}
+              <div
+                class="scrollTable"
+                v-for="column in currentTypeMeta.columns"
+                :key="column.key"
+                :style="getTableCellStyle()"
+              >
+                {{ item[column.key] || 0 }}
               </div>
-<!--              <div class="scrollTable" style="width: calc(100% / 7);">-->
-<!--                {{ item.iB || 0 }}-->
-<!--              </div>-->
-<!--              <div class="scrollTable" style="width: calc(100% / 7);">-->
-<!--                {{ item.iC || 0 }}-->
-<!--              </div>-->
-              <div class="scrollTable" style="width: calc(100% / 3);">
-                {{ item[currentTypeMeta.field2Key] || 0 }}
-              </div>
-<!--              <div class="scrollTable" style="width: calc(100% / 7);">-->
-<!--                {{ item.vB || 0 }}-->
-<!--              </div>-->
-<!--              <div class="scrollTable" style="width: calc(100% / 7);">-->
-<!--                {{ item.vC || 0 }}-->
-<!--              </div>-->
             </div>
           </div>
         </vue-seamless-scroll>
@@ -252,7 +233,7 @@ import {
   fiveConsumptionStatistics,
   monthConsumptionRanking,
   peaksValleysConsumption, realTimeAlarm,
-  realTimeData
+  realTimeDataByEnergy
 } from "@/api/board";
 export default {
   name: 'Board',
@@ -266,11 +247,47 @@ export default {
     },
     currentTypeMeta() {
       const map = {
-        '2': { rankName: '用电', unit: 'kWh', field1Label: 'A相电流', field2Label: 'A相电压', field1Key: 'iA', field2Key: 'vA' },
-        '3': { rankName: '用水', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
-        '4': { rankName: '用蒸汽', unit: 't', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
-        '5': { rankName: '用压缩空气', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
-        '6': { rankName: '用氮气', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' }
+        '2': {
+          rankName: '用电',
+          unit: 'kWh',
+          columns: [
+            { key: 'iA', label: '电流' },
+            { key: 'vA', label: '电压' },
+            { key: 'zxyg', label: '正向有功' }
+          ]
+        },
+        '3': {
+          rankName: '用水',
+          unit: 'm³',
+          columns: [
+            { key: 'fluxFlow', label: '瞬时流量' },
+            { key: 'waterFlow', label: '累计流量' }
+          ]
+        },
+        '4': {
+          rankName: '用蒸汽',
+          unit: 't',
+          columns: [
+            { key: 'fluxFlow', label: '瞬时流量' },
+            { key: 'steamFlow', label: '累计流量' }
+          ]
+        },
+        '5': {
+          rankName: '用压缩空气',
+          unit: 'm³',
+          columns: [
+            { key: 'fluxFlow', label: '瞬时流量' },
+            { key: 'steamFlow', label: '累计流量' }
+          ]
+        },
+        '6': {
+          rankName: '用氮气',
+          unit: 'm³',
+          columns: [
+            { key: 'fluxFlow', label: '瞬时流量' },
+            { key: 'steamFlow', label: '累计流量' }
+          ]
+        }
       }
       return map[this.typeData] || map['4']
     }
@@ -278,7 +295,7 @@ export default {
   data() {
     return {
 
-      selectData: 'year',
+      selectData: 'day',
       typeData: "4",
       colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
       chart1TableOption: {
@@ -294,6 +311,9 @@ export default {
       table1Data: [],
       scrollKey1: '',
       scrollKey2: '',
+      clockText: '',
+      timer: null,
+      dataTimer: null,
       deviceOverviewData: {},
       rankingData: [],
       statisticsData: [],
@@ -303,9 +323,28 @@ export default {
     }
   },
   async mounted() {
+    this.tickClock()
+    this.timer = setInterval(this.tickClock, 1000)
     this.getData()
+    this.dataTimer = setInterval(this.getData, 10 * 60 * 1000)
+  },
+  beforeDestroy() {
+    if (this.timer) clearInterval(this.timer)
+    if (this.dataTimer) clearInterval(this.dataTimer)
   },
   methods: {
+    tickClock() {
+      const d = new Date()
+      const pad = n => (n < 10 ? '0' + n : '' + n)
+      this.clockText = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+    },
+    getTableCellStyle(isHeader = false) {
+      const width = `calc(100% / ${this.currentTypeMeta.columns.length + 1})`
+      return {
+        width,
+        ...(isHeader ? { lineHeight: '1vw', fontWeight: 'bold' } : {})
+      }
+    },
     getData() {
       deviceOverview().then(res => {
         this.deviceOverviewData = res.data
@@ -675,10 +714,10 @@ export default {
         this.scrollKey2 = new Date().getTime()
       })
 
-      realTimeData({
-        monitorType: this.typeData
+      realTimeDataByEnergy({
+        monitorType: this.typeData,
+        isAmmeter: '1'
       }).then(res => {
-        console.log(res)
         this.table1Data = res.data
         this.scrollKey1 = new Date().getTime()
       })
@@ -775,6 +814,14 @@ export default {
 
 }
 
+.time {
+  position: absolute;
+  top: 2.4%;
+  right: 2%;
+  font-size: 1vw;
+  color: #9fc4e8;
+}
+
 .subTitle {
   position: absolute;
   font-size: 1vw;