电表、液冷、功率曲线

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

@@ -1,31 +1,32 @@
 <template>
   <div v-loading="loading">
-   <template v-for="(item,index) in list">
      <el-card
+         v-for="(item,index) in list"
+         :key="index+'dbList'"
          shadow="always"
-         class="sbjk-card-container"
+         class="sbjk-card-container list"
          :class="{
-        'warning-card-container':item.ammeterLoadData.emsCommunicationStatus && item.ammeterLoadData.emsCommunicationStatus !== '0',
-        'running-card-container':item.ammeterLoadData.emsCommunicationStatus === '0'
+        'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
+        'running-card-container':item.emsCommunicationStatus === '0'
       }"
      >
        <div slot="header">
-         <span class="large-title">{{ item.ammeterLoadData.deviceName }}</span>
+         <span class="large-title">{{ item.deviceName }}</span>
          <div class="info">
            <div>
              {{
                $store.state.ems.communicationStatusOptions[
-                   item.ammeterLoadData.emsCommunicationStatus
+                   item.emsCommunicationStatus
                    ]
              }}
            </div>
-           <div>数据更新时间：{{ item.ammeterLoadData.dataUpdateTime }}</div>
+           <div>数据更新时间：{{ item.dataUpdateTime }}</div>
          </div>
        </div>
        <el-table
            class="common-table"
-           :data="item.ammeterLoadData.loadDataDetailInfo"
-           @cell-click="(row,col)=>{handlerCell(item.ammeterLoadData.deviceId,row,col)}"
+           :data="item.loadDataDetailInfo"
+           @cell-click="(row,col)=>{handlerCell(item,row,col)}"
            stripe
            style="width: 100%"
        >
@@ -37,42 +38,7 @@
          <el-table-column prop="valleyKwh" label="谷/kWh"> </el-table-column>
        </el-table>
      </el-card>
-     <el-card
-         shadow="always"
-         class="sbjk-card-container"
-         style="margin-top: 20px"
-         :class="{
-        'warning-card-container':item.ammeterMeteData.emsCommunicationStatus && item.ammeterMeteData.emsCommunicationStatus !== '0',
-        'running-card-container':item.ammeterMeteData.emsCommunicationStatus === '0'
-      }"
-     >
-       <div slot="header">
-         <span class="large-title">{{ item.ammeterMeteData.deviceName }}</span>
-         <div class="info">
-           <div>
-             {{
-               $store.state.ems.communicationStatusOptions[
-                   item.ammeterMeteData.emsCommunicationStatus
-                   ]
-             }}
-           </div>
-           <div>数据更新时间：{{ item.ammeterMeteData.dataUpdateTime }}</div>
-         </div>
-       </div>
-       <el-table
-           class="common-table"
-           :data="item.ammeterMeteData.meteDataDetailInfo"
-           @cell-click="(row,col)=>{handlerCellCN(item.ammeterMeteData.deviceId,row,col)}"
-           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>
-   </template>
+    <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
     <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
@@ -93,18 +59,11 @@ export default {
     };
   },
   methods: {
-    handlerCell(id,row,column){
+    handlerCell({deviceId,deviceName},row,column){
       if(column.label !== '类别'){
         const arr = row.category.split('')
         arr.splice(6,0,column.label[0])
-        this.showChart(arr.join(''),'电表',id)
-      }
-    },
-    handlerCellCN(id,row,column){
-      if(column.label !== '类别'){
-        const arr = row.category.split('')
-        arr.splice(2,arr.length-2,column.label)
-        this.showChart(arr.join(''),'电表',id)
+        this.showChart(arr.join(''),deviceName,deviceId)
       }
     },
     showChart(pointName,categoryName,deviceId){
@@ -115,9 +74,7 @@ export default {
       this.loading = true;
       getAmmeterDataList(this.siteId)
           .then((response) => {
-            // todo check
-            const data = response?.data || []
-            this.list = Array.isArray(data) ? data : [data]
+            this.list = response?.data || []
           })
           .finally(() => {
             this.loading = false;
@@ -134,6 +91,9 @@ export default {
 
 <style scoped lang="scss">
 .sbjk-card-container {
+  &.list:not(:last-child){
+    margin-bottom: 25px;
+  }
   ::v-deep {
     .el-table__row td{
       &:not(:first-child){