From 0299d32a522b414786421eb25413f8978ed71c84 Mon Sep 17 00:00:00 2001
From: baicai <18221243570@163.com>
Date: Fri, 15 Aug 2025 14:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E8=A1=A8=E7=8A=B6=E6=80=81=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/dzjk/sbjk/db/index.vue | 216 ++++++++++++++-------------
 1 file changed, 111 insertions(+), 105 deletions(-)

diff --git a/src/views/ems/dzjk/sbjk/db/index.vue b/src/views/ems/dzjk/sbjk/db/index.vue
index 4cc861f..e94f677 100644
--- a/src/views/ems/dzjk/sbjk/db/index.vue
+++ b/src/views/ems/dzjk/sbjk/db/index.vue
@@ -1,134 +1,140 @@
-
 <template>
-      <div v-loading="loading">
-        <el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
-          <div slot="header">
-              <span class="large-title">1#{{zbInfo.deviceName}}</span>
-              <div class="status">
-                <div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
-                <div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
-              </div>
+  <div v-loading="loading">
+    <el-card
+      shadow="always"
+      class="common-card-container"
+      :class="
+        zbInfo.emsCommunicationStatus !== '0'
+          ? 'zb-common-card-container'
+          : 'cnb-common-card-container'
+      "
+    >
+      <div slot="header">
+        <span class="large-title">1#{{ zbInfo.deviceName }}</span>
+        <div class="status">
+          <div>
+            {{
+              $store.state.ems.communicationStatusOptions[
+                zbInfo.emsCommunicationStatus
+              ]
+            }}
           </div>
-          <el-table
-            class="common-table"
-            :data="zbInfo.loadDataDetailInfo"
-              stripe
-              style="width: 100%;">
-              <el-table-column
-                prop="category"
-                label="类别">
-              </el-table-column>
-              <el-table-column
-                prop="totalKwh"
-                label="总/kWh"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="peakKwh"
-                label="尖/kWh">
-              </el-table-column>
-              <el-table-column
-                prop="highKwh"
-                label="峰/kWh">
-              </el-table-column>
-              <el-table-column
-                prop="flatKwh"
-                label="平/kWh">
-              </el-table-column>
-              <el-table-column
-                prop="valleyKwh"
-                label="谷/kWh">
-              </el-table-column>
-            </el-table>
-        </el-card>
-        <el-card shadow="always" class="common-card-container" style="margin-top:20px" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
-          <div slot="header">
-            <span class="large-title">2#{{cnbInfo.deviceName}}</span>
-            <div class="status">
-              <div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
-              <div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
-            </div>
-          </div>
-          <el-table
-            class="common-table"
-            :data="cnbInfo.meteDataDetailInfo"
-            stripe
-            style="width: 100%;">
-            <el-table-column
-              prop="category"
-              label="类别">
-            </el-table-column>
-            <el-table-column
-              prop="activePower"
-              label="有功功率"
-            >
-            </el-table-column>
-            <el-table-column
-              prop="reactivePower"
-              label="无功功率">
-            </el-table-column>
-          </el-table>
-        </el-card>
+          <div>数据更新时间：{{ zbInfo.dataUpdateTime }}</div>
+        </div>
       </div>
+      <el-table
+        class="common-table"
+        :data="zbInfo.loadDataDetailInfo"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column prop="category" label="类别"> </el-table-column>
+        <el-table-column prop="totalKwh" label="总/kWh"> </el-table-column>
+        <el-table-column prop="peakKwh" label="尖/kWh"> </el-table-column>
+        <el-table-column prop="highKwh" label="峰/kWh"> </el-table-column>
+        <el-table-column prop="flatKwh" label="平/kWh"> </el-table-column>
+        <el-table-column prop="valleyKwh" label="谷/kWh"> </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card
+      shadow="always"
+      class="common-card-container"
+      style="margin-top: 20px"
+      :class="
+        cnbInfo.emsCommunicationStatus !== '0'
+          ? 'zb-common-card-container'
+          : 'cnb-common-card-container'
+      "
+    >
+      <div slot="header">
+        <span class="large-title">2#{{ cnbInfo.deviceName }}</span>
+        <div class="status">
+          <div>
+            {{
+              $store.state.ems.communicationStatusOptions[
+                cnbInfo.emsCommunicationStatus
+              ]
+            }}
+          </div>
+          <div>数据更新时间：{{ cnbInfo.dataUpdateTime }}</div>
+        </div>
+      </div>
+      <el-table
+        class="common-table"
+        :data="cnbInfo.meteDataDetailInfo"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column prop="category" label="类别"> </el-table-column>
+        <el-table-column prop="activePower" label="有功功率"> </el-table-column>
+        <el-table-column prop="reactivePower" label="无功功率">
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
 </template>
 
-
 <script>
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getAmmeterDataList} from '@/api/ems/dzjk'
+import { getAmmeterDataList } from "@/api/ems/dzjk";
 export default {
-  name:'DzjkSbjkDb',
-  mixins:[getQuerySiteId],
+  name: "DzjkSbjkDb",
+  mixins: [getQuerySiteId],
   data() {
     return {
-      loading:false,
-      zbInfo:{},
-      cnbInfo:{},
-    }
+      loading: false,
+      zbInfo: {},
+      cnbInfo: {},
+    };
   },
-  methods:{
-    init(){
-      this.loading = true
-      getAmmeterDataList(this.siteId).then(response => {
-        this.zbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterLoadData || {}));
-        this.cnbInfo =JSON.parse(JSON.stringify(response?.data?.ammeterMeteData || {}));
-      }).finally(() => {this.loading = false})
-    }
+  methods: {
+    init() {
+      this.loading = true;
+      getAmmeterDataList(this.siteId)
+        .then((response) => {
+          this.zbInfo = JSON.parse(
+            JSON.stringify(response?.data?.ammeterLoadData || {})
+          );
+          this.cnbInfo = JSON.parse(
+            JSON.stringify(response?.data?.ammeterMeteData || {})
+          );
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
   },
-  mounted(){
-
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style scoped lang="scss">
-.zb-common-card-container,.cnb-common-card-container{
-  ::v-deep{
-    .el-card__header{
-      padding:10px 14px;
-      background-color: #FC6B69;
-      color:#ffffff;
+.zb-common-card-container,
+.cnb-common-card-container {
+  ::v-deep {
+    .el-card__header {
+      padding: 10px 14px;
+      background-color: #fc6b69;
+      color: #ffffff;
       position: relative;
     }
   }
 }
-.cnb-common-card-container{
-  margin-top:25px;
-  ::v-deep{
-    .el-card__header{
-      background-color: #05AEA3;
+.cnb-common-card-container {
+  margin-top: 25px;
+  ::v-deep {
+    .el-card__header {
+      background-color: #05aea3;
     }
   }
 }
-.status{
+.status {
   position: absolute;
-  right:14px;
-  top:50%;
+  right: 14px;
+  top: 50%;
   transform: translateY(-50%);
   color: #ffffff;
   font-size: 12px;
   line-height: 20px;
 }
-
-
 </style>