充电桩设备状态

Signed-off-by: hsshuxian <3049816743@qq.com>

ems-ui-cloud/src/views/mgr/construction.vue

@@ -14,11 +14,14 @@
       <el-col :span="20" :xs="24">
         <el-row :gutter="20">
           <el-col :span="6" v-for="(item, index) in chargingStation" :key="index">
-            <el-card class="box-card" :style="getCardStyle(item.deviceStatus)">
+            <el-card class="box-card" :style="getCardStyle(item)">
                 <h2>{{ item.deviceName }}</h2>
-                <div class="status" :style="getStatusStyle(item.deviceStatus)">
-                  {{ item.deviceStatus === 1 ? '使用中' : '离线' }}
-                </div>
+              <div class="status" :style="getStatusStyle(item.deviceStatus)">
+                {{ item.deviceStatus === 1 ? '在线' : '离线' }}
+              </div>
+              <div class="state" :style="getStateStyle(item.state)">
+                {{ item.stateName }}
+              </div>
               <div class="card-content">
                 <p>电流：{{ item.current }} {{ item.currentUnit }}</p>
                 <p>电压：{{ item.voltage }} {{ item.voltageUnit }}</p>
@@ -94,7 +97,6 @@ export default {
         psCode: 'DC-EVSE'
       }).then(({ code, data }) => {
         if (code === 200) {
-          /**（充电桩）设备属性*/
           const promises = data.map(item => {
             return getObjAttr(2, item.deviceCode).then(response => {
               if (response.code === 200) {
@@ -105,12 +107,17 @@ export default {
                 const voltageUnit = measureData.find(attr => attr.attrKey === 'voltage')?.attrUnit || 'V';
                 const current = measureData.find(attr => attr.attrKey === 'current')?.attrValue || '0';
                 const currentUnit = measureData.find(attr => attr.attrKey === 'current')?.attrUnit || 'A';
+                const stateData = response.data.State || [];
+                const state = stateData.find(attr => attr.attrGroup === 'State')?.attrValue || -1;
+                const stateName = stateData.find(attr => attr.attrGroup === 'State')?.attrValueName || '';
                 item.current = current;
                 item.currentUnit = currentUnit;
                 item.voltage = voltage;
                 item.voltageUnit = voltageUnit;
                 item.power = power;
                 item.powerUnit = powerUnit;
+                item.state = state;
+                item.stateName = stateName;
               }
             });
           });
@@ -164,14 +171,28 @@ export default {
       })
     },
     /** 获取卡片背景颜色*/
-    getCardStyle(status) {
-      return status === 1 ? 'background: linear-gradient(135deg, #9AF576, #FFFFFF);' : 'background: linear-gradient(135deg, #FF7070, #FFFFFF);';
+    getCardStyle(item) {
+      if (item.deviceStatus === 0 || item.state === "2") {
+        return 'background: linear-gradient(135deg, #dcdcdc, #f0f0f0);';
+      } else {
+        return 'background: linear-gradient(135deg, #9AF576, #FFFFFF);';
+      }
     },
-    /**获取状态文字样式*/
+    /**获取设备在线状态文字样式*/
     getStatusStyle(status) {
       return status === 1 ? 'color: #fff; background: #67c23a;' : 'color: #fff; background: linear-gradient(135deg, #f44336, #e57373);';
     },
-
+    /**获取设备使用状态文字样式 0=空闲，1=使用中，2=故障*/
+    getStateStyle(state) {
+      switch (state) {
+        case '0':
+          return 'color: #fff; background: #f44336;';
+        case '1':
+          return 'color: #fff; background: #67c23a; ';
+        case '2':
+          return 'color: #fff; background: #909399;';
+      }
+    },
   },
 };
 </script>
@@ -192,4 +213,15 @@ export default {
   font-size: 12px;
   color: #fff;
 }
+.state{
+  position: absolute;
+  top: 35px;
+  right: 10px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+}
+
+
 </style>