feat(views): 编写“设备工况”模块的冷水主机卡片，并支持获取实时数据

src/constants/device-params.ts

@@ -18,7 +18,7 @@ export const enum DevParamCoolingTower {
   本地远程状态 = 'coolingTowerLocalRemoteStatus',
   有功功率 = 'activePower',
   频率反馈 = 'coolingTowerFrequencyFb',
-  运行时间 = 'coolingTowerRunHours',
+  运行时间 = 'runHours',
 }
 
 /**
@@ -37,8 +37,16 @@ export const enum DevParamCoolingPump {
 export const enum DevParamChillerUnit {
   制冷量 = 'chillerUnitCoolingCapacity',
   有功功率 = 'chillerUnitActivePower',
-  负载率 = 'chillerUnitLoadRate',
-  冷冻水出水温度设定值 = 'chillerUnitWaterTempOutSet',
+  负载率 = 'loadRatio',
+  冷冻水出水温度设定值反馈 = 'evapWaterTempOutSetFb',
   今日耗电量 = 'chillerUnitTodayPowerConsumption',
   本月耗电量 = 'chillerUnitMonthSPowerConsumption',
+  冷冻水回水温度 = 'evapWaterTempIn',
+  冷冻水出水温度 = 'evapWaterTempOut',
+  蒸发压力 = 'evapPre',
+  蒸发温度 = 'evapTemp',
+  冷却水回水温度 = 'condWaterTempIn',
+  冷却水出水温度 = 'condWaterTempOut',
+  冷凝压力 = 'condPre',
+  冷凝温度 = 'condTemp',
 }

src/i18n/locales/zh.json

@@ -131,11 +131,19 @@
   "deviceWorkStatus": {
     "chillerUnit": {
       "activePower": "有功功率",
+      "condPre": "冷凝压力",
+      "condTemp": "冷凝温度",
+      "condWaterTempIn": "冷却水回水温度",
+      "condWaterTempOut": "冷却水出水温度",
       "coolingCapacity": "制冷量",
+      "evapPre": "蒸发压力",
+      "evapTemp": "蒸发温度",
+      "evapWaterTempIn": "冷冻水回水温度",
+      "evapWaterTempOut": "冷冻水出水温度",
+      "evapWaterTempOutSetFb": "冷冻水出水温度设定值反馈",
       "loadRate": "负载率",
       "monthSPowerConsumption": "本月耗电量",
-      "todayPowerConsumption": "今日耗电量",
-      "waterTempOutSet": "冷冻水出水温度设定值反馈"
+      "todayPowerConsumption": "今日耗电量"
     },
     "coolingTower": {
       "activePower": "有功功率",

src/views/device-work-status/DeviceWorkStatus.vue

@@ -129,7 +129,7 @@ const viewDevParam = () => {
       </ATabs>
     </div>
     <ARow :gutter="[22, 24]">
-      <ACol v-for="item in deviceList" :key="item.id" :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8">
+      <ACol v-for="item in deviceList" :key="item.id" :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="8">
         <div class="device-card-container">
           <div class="device-card-header">
             <span

src/views/device-work-status/device-card/ChillerUnit.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-// import { DevParamChillerUnit } from '@/constants/device-params';
+import { DevParamChillerUnit } from '@/constants/device-params';
+
+import type { DevWorkCardProps } from '@/types';
+
+defineProps<DevWorkCardProps<DevParamChillerUnit>>();
 </script>
 
 <template>
@@ -7,34 +11,70 @@
     <div class="chiller-unit-top">
       <div class="chiller-unit-left">
         <div>
-          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.coolingCapacity') }}(kW)</div>
-          <div>-</div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.coolingCapacity') }} (kW)</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamChillerUnit.制冷量]" :percent="0" />
         </div>
         <div>
-          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.activePower') }} kW</div>
-          <div>-</div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.activePower') }} (kW)</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamChillerUnit.有功功率]" :percent="0" />
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.loadRate') }}</div>
-          <div>-</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamChillerUnit.负载率]" :percent="0" />
         </div>
       </div>
       <div class="chiller-unit-img">
         <img src="@/assets/img/device-chiller-unit.png" />
+        <div
+          v-if="realTimeData?.[DevParamChillerUnit.冷冻水回水温度] !== undefined"
+          class="chiller-unit-img-text evap-water-temp-in"
+        >
+          {{ realTimeData?.[DevParamChillerUnit.冷冻水回水温度] }}°C
+        </div>
+        <div
+          v-if="realTimeData?.[DevParamChillerUnit.冷冻水出水温度] !== undefined"
+          class="chiller-unit-img-text evap-water-temp-out"
+        >
+          {{ realTimeData?.[DevParamChillerUnit.冷冻水出水温度] }}°C
+        </div>
+        <div
+          v-if="realTimeData?.[DevParamChillerUnit.冷却水回水温度] !== undefined"
+          class="chiller-unit-img-text cond-water-temp-in"
+        >
+          {{ realTimeData?.[DevParamChillerUnit.冷却水回水温度] }}°C
+        </div>
+        <div
+          v-if="realTimeData?.[DevParamChillerUnit.冷却水出水温度] !== undefined"
+          class="chiller-unit-img-text cond-water-temp-out"
+        >
+          {{ realTimeData?.[DevParamChillerUnit.冷却水出水温度] }}°C
+        </div>
+        <div v-if="realTimeData?.[DevParamChillerUnit.蒸发压力] !== undefined" class="chiller-unit-img-text evap-pre">
+          {{ realTimeData?.[DevParamChillerUnit.蒸发压力] }}kPa
+        </div>
+        <div v-if="realTimeData?.[DevParamChillerUnit.蒸发温度] !== undefined" class="chiller-unit-img-text evap-temp">
+          {{ realTimeData?.[DevParamChillerUnit.蒸发温度] }}°C
+        </div>
+        <div v-if="realTimeData?.[DevParamChillerUnit.冷凝压力] !== undefined" class="chiller-unit-img-text cond-pre">
+          {{ realTimeData?.[DevParamChillerUnit.冷凝压力] }}kPa
+        </div>
+        <div v-if="realTimeData?.[DevParamChillerUnit.冷凝温度] !== undefined" class="chiller-unit-img-text cond-temp">
+          {{ realTimeData?.[DevParamChillerUnit.冷凝温度] }}°C
+        </div>
       </div>
     </div>
     <div class="chiller-unit-bottom">
       <div>
-        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.waterTempOutSet') }}</div>
-        <div class="device-card-value">-</div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.evapWaterTempOutSetFb') }}</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamChillerUnit.冷冻水出水温度设定值反馈] ?? '-' }}</div>
       </div>
       <div>
-        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.todayPowerConsumption') }} kWh</div>
-        <div class="device-card-value">-</div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.todayPowerConsumption') }} (kWh)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamChillerUnit.今日耗电量] ?? '-' }}</div>
       </div>
       <div>
-        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.monthSPowerConsumption') }} kWh</div>
-        <div class="device-card-value">-</div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.monthSPowerConsumption') }} (kWh)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamChillerUnit.本月耗电量] ?? '-' }}</div>
       </div>
     </div>
   </div>
@@ -58,8 +98,76 @@
 
 .chiller-unit-img {
   position: relative;
+  flex-shrink: 0;
   width: 316px;
-  height: 178px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.chiller-unit-img-text {
+  position: absolute;
+  font-size: 9px;
+  font-weight: 500;
+  color: #333;
+
+  &.evap-water-temp-in,
+  &.cond-water-temp-in {
+    top: 75px;
+  }
+
+  &.evap-water-temp-out,
+  &.cond-water-temp-out {
+    top: 118px;
+  }
+
+  &.evap-water-temp-in,
+  &.evap-water-temp-out {
+    right: calc(100% - 25px);
+  }
+
+  &.cond-water-temp-in,
+  &.cond-water-temp-out {
+    left: calc(100% - 25px);
+  }
+
+  &.evap-pre,
+  &.evap-temp,
+  &.cond-pre,
+  &.cond-temp {
+    height: 14px;
+    padding-inline: 2px;
+    line-height: 12px;
+    color: #fff;
+  }
+
+  &.evap-pre,
+  &.evap-temp {
+    left: 51px;
+    background: #3a9ad9;
+    border: 1px solid #a5e1ff;
+    box-shadow: 0 8px 12px 0 rgb(0 0 0 / 10%);
+  }
+
+  &.cond-pre,
+  &.cond-temp {
+    left: 194px;
+    background: #f16962;
+    border: 1px solid #ffcbc8;
+    box-shadow: 0 8px 12px 0 rgb(0 0 0 / 10%);
+  }
+
+  &.evap-pre,
+  &.cond-pre {
+    top: 85px;
+  }
+
+  &.evap-temp,
+  &.cond-temp {
+    top: 102px;
+  }
 }
 
 .chiller-unit-bottom {

src/views/device-work-status/device-card/index.ts

@@ -94,9 +94,17 @@ export const deviceCardData: DeviceCardData = {
       DevParamChillerUnit.制冷量,
       DevParamChillerUnit.有功功率,
       DevParamChillerUnit.负载率,
-      DevParamChillerUnit.冷冻水出水温度设定值,
+      DevParamChillerUnit.冷冻水出水温度设定值反馈,
       DevParamChillerUnit.今日耗电量,
       DevParamChillerUnit.本月耗电量,
+      DevParamChillerUnit.冷冻水回水温度,
+      DevParamChillerUnit.冷冻水出水温度,
+      DevParamChillerUnit.蒸发压力,
+      DevParamChillerUnit.蒸发温度,
+      DevParamChillerUnit.冷却水回水温度,
+      DevParamChillerUnit.冷却水出水温度,
+      DevParamChillerUnit.冷凝压力,
+      DevParamChillerUnit.冷凝温度,
     ],
   },
 };