电表、液冷、功率曲线

src/components/Ems/DateRangeSelect/index.vue

@@ -54,6 +54,7 @@ export default {
     //重置 设置时间范围为初始化时间段
     reset(){
         this.resetDate()
+        this.$emit('reset')
         this.$emit('updateDate',this.dateRange)
     },
     // 搜索

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',
+        'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
-        'running-card-container':item.ammeterLoadData.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"
+           :data="item.loadDataDetailInfo"
-           @cell-click="(row,col)=>{handlerCell(item.ammeterLoadData.deviceId,row,col)}"
+           @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
+    <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
-         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>
     <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)
+        this.showChart(arr.join(''),deviceName,deviceId)
-      }
-    },
-    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)
       }
     },
     showChart(pointName,categoryName,deviceId){
@@ -115,9 +74,7 @@ export default {
       this.loading = true;
       getAmmeterDataList(this.siteId)
           .then((response) => {
-            // todo check
+            this.list = response?.data || []
-            const data = response?.data || []
-            this.list = Array.isArray(data) ? data : [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){

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

@@ -1,18 +1,20 @@
 
 <template>
     <div v-loading="loading">
-      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
+      <el-card
-        <div class="header">
+          v-for="(item,index) in list"
-          <div class="header-title">{{item.systemName}}</div>
+          :key="index+'ylLise'"
-          <div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
+          class="sbjk-card-container running-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
-          <div>当前温度：<span class="header-values">{{item.currentTemperature}}&#8451;</span></div>
+         shadow="always">
+        <div slot="header">
+          <span class="large-title">{{index+1}}#{{item.deviceName}}</span>
         </div>
-        <div class="content">
+        <el-row>
-          <el-row>
+          <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">
-            <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}&#8451;</el-col>
+            {{tempDataItem.title}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
-          </el-row>
+          </el-col>
-        </div>
+        </el-row>
-      </div>
+      </el-card>
       <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
     </div>
 </template>
@@ -30,13 +32,13 @@ export default {
       loading:false,
       list:[],
       tempData:[
-        {title:'制热开启点',attr:'heatingStartPoint'},
+        {title:'供水温度',attr:'gsTemp',unit:'&#8451;'},
-        {title:'制冷开启点',attr:'coolingStartPoint'},
+        {title:'回水温度',attr:'hsTemp',unit:'&#8451;'},
-        {title:'高温告警点',attr:'highTempAlarmPoint'},
+        {title:'供水压力',attr:'gsPressure',unit:'bar'},
-        {title:'制热停止点',attr:'heatingStopPoint'},
+        {title:'回水压力',attr:'hsPressure',unit:'bar'},
-        {title:'制冷停止点',attr:'coolingStopPoint'},
+        {title:'冷源水温度',attr:'lysTemp',unit:'&#8451;'},
-        {title:'低温告警点',attr:'lowTempAlarmPoint'},
+        {title:'VB01 开度',attr:'vb01Kd',unit:'%'},
-
+        {title:'VB02 开度',attr:'vb02Kd',unit:'%'},
       ]
     }
   },
@@ -59,48 +61,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.yl-item-container{
+.sbjk-card-container{
-  border-radius: 5px;
   &:not(:last-child){
     margin-bottom: 25px;
   }
-  .header{
+  .el-row{
-    line-height: 40px;
+    background-color: #ffffff;
+    border:1px solid #eeeeee;
     font-size: 14px;
-    >div{
+    line-height: 16px;
-      display: inline-block;
+    color: #333333;
-      margin-right: 40px;
+    .el-col{
-    }
+      padding:12px 0;
-    .header-title{
-      border-radius:  5px 0 5px 0;
-      color:#ffffff;
-      width: 120px;
-      height: 40px;
-      font-size: 16px;
       text-align: center;
+      position: relative;
     }
-    .header-values{
+    .el-col{
-      font-weight: 500;
+      border-bottom: 1px solid #eeeeee;
     }
-  }
+    .el-col:not(:nth-child(3n)){
-  .content{
+      border-right: 1px solid #eeeeee;
-    padding:25px;
-    .el-row{
-      background-color: #ffffff;
-      border:1px solid #eeeeee;
-      line-height: 14px;
-      color: #333333;
-      font-size: 12px;
-      .el-col{
-        padding:10px 0;
-        text-align: center;
-      }
-      .el-col:nth-child(-n+3){
-        border-bottom: 1px solid #eeeeee;
-      }
-      .el-col:not(:nth-child(3n)){
-        border-right: 1px solid #eeeeee;
-      }
     }
   }
 }
@@ -115,16 +95,4 @@ export default {
     }
   }
 }
-.yl-normal-item-container{
-  background-color: #EBF6F6;
-  .header{
-    .header-title{
-      background-color: #05AEA3;
-    }
-    .header-values{
-      color: #05AEA3;
-    }
-  }
-}
-
 </style>

src/views/ems/dzjk/tjbb/glqx/index.vue

@@ -3,7 +3,7 @@
   <el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
     <div slot="header" class="time-range-header">
       <span class="card-title">功率曲线</span>
-      <date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
+      <date-range-select ref="dateRangeSelect" @reset="resetTime" @updateDate="updateDate"/>
     </div>
     <div class="card-main" v-loading="loading">
       <div id="glqxEchart" style="height: 310px;"></div>
@@ -41,6 +41,9 @@ export default {
       this.dateRange=data || []
       this.getData()
     },
+    resetTime(){
+      this.dateRangeInit=true;
+    },
     getData(){
       const {siteId}=this;
       let [start='',end='']=(this.dateRange || [])
@@ -101,15 +104,18 @@ export default {
       },true)
     },
     initChart() {
+      if(this.chart) return
       this.chart = echarts.init(document.querySelector('#glqxEchart'));
     },
     init(){
       this.$nextTick(()=>{
+        this.dateRangeInit=true;
         this.initChart()
         this.$refs.dateRangeSelect.init()
       })
     }
   },
+
   beforeDestroy() {
     if (!this.chart) {
       return

src/views/ems/site/sblb/PointTable.vue

@@ -13,7 +13,7 @@
       width="800px"
   >
 
-    <el-form :inline="true">
+    <el-form :inline="true" label-width="85px">
       <el-form-item label="点位名称">
         <el-input v-model="form.dataPointName" clearable placeholder="请输入点位名称" style="width: 150px"></el-input>
       </el-form-item>