接口联调

src/views/ems/dzjk/sbjk/db/index.vue

@@ -1,46 +1,47 @@
 
 <template>
-      <div>
-        <el-card shadow="always" class="common-card-container zb-common-card-container">
+      <div v-loading="loading">
+        <el-card shadow="always" class="common-card-container" :class="info.emsCommunicationStatus === '0' ? 'cnb-common-card-container' : 'zb-common-card-container'">
           <div slot="header">
               <span class="large-title">1#总表</span>
               <div class="status">
-                <div>通信中断</div>
-                <div>数据更新时间：2024-10-11 12:00:00</div>
+                <div>{{$store.state.ems.communicationStatusOptions[info.emsCommunicationStatus]}}</div>
+                <div>数据更新时间：{{info.dataUpdateTime}}</div>
               </div>
           </div>
           <el-table
             class="common-table"
-            :data="zbTableData"
+            :data="info.ammeterDataDetailInfos"
               stripe
               style="width: 100%;">
               <el-table-column
-                prop="name"
+                prop="category"
                 label="类别">
               </el-table-column>
               <el-table-column
-                prop="zong"
+                prop="totalKwh"
                 label="总/kWh"
               >
               </el-table-column>
               <el-table-column
-                prop="jian"
+                prop="sharpKwh"
                 label="尖/kWh">
               </el-table-column>
               <el-table-column
-                prop="feng"
+                prop="peakKwh"
                 label="峰/kWh">
               </el-table-column>
               <el-table-column
-                prop="ping"
+                prop="flatKwh"
                 label="平/kWh">
               </el-table-column>
               <el-table-column
-                prop="gu"
+                prop="valleyKwh"
                 label="谷/kWh">
               </el-table-column>
             </el-table>
         </el-card>
+<!--        储能表返回值待定-->
         <el-card shadow="always" class="common-card-container cnb-common-card-container">
           <div slot="header">
             <span class="large-title">2#储能表</span>
@@ -86,26 +87,31 @@
 
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getAmmeterDataList} from '@/api/ems/dzjk'
 export default {
   name:'DzjkSbjkDb',
+  mixins:[getQuerySiteId],
   data() {
     return {
-      zbTableData:[
-        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-      ],
+      loading:false,
+      info:{},
       cnbTableData:[
         {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
         {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
         {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
         {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-      ]
+      ],
     }
   },
   methods:{
-
+    init(){
+      this.loading = true
+      getAmmeterDataList(this.siteId).then(response => {
+        // todo 返回数据等待确认，是数组吗?
+        this.info =JSON.parse(JSON.stringify(response?.data[0] || {}));
+      }).finally(() => {this.loading = false})
+    }
   },
   mounted(){