电表、液冷、功率曲线

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