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

src/i18n/locales/zh.json

@@ -137,6 +137,12 @@
       "todayPowerConsumption": "今日耗电量",
       "waterTempOutSet": "冷冻水出水温度设定值反馈"
     },
+    "coolingTower": {
+      "activePower": "有功功率",
+      "frequencyFb": "频率反馈",
+      "localRemoteStatus": "本地远程状态",
+      "runHours": "运行时间"
+    },
     "ctrlCabinet": {
       "chilledWaterMainPreIn": "冷冻总管回水压力",
       "chilledWaterMainPreOut": "冷冻总管出水压力",

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

@@ -282,6 +282,10 @@ const viewDevParam = () => {
   font-weight: 500;
   line-height: 20px;
   color: #999;
+
+  + .progress-text-bar {
+    margin-top: 4px;
+  }
 }
 
 :deep(.device-card-value) {

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

@@ -1,9 +1,64 @@
 <script setup lang="ts">
+import ProgressTextBar from '@/components/ProgressTextBar.vue';
 import { DevParamCoolingTower } from '@/constants/device-params';
+
+import type { DevWorkCardProps } from '@/types';
+
+defineProps<DevWorkCardProps<DevParamCoolingTower>>();
 </script>
 
 <template>
-  <div>冷却塔 - {{ DevParamCoolingTower.有功功率 }}</div>
+  <div>
+    <img class="cooling-tower-img" src="@/assets/img/device-cooling-tower.png" />
+    <div class="cooling-tower-top">
+      <div class="cooling-tower-left">
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.localRemoteStatus') }}</div>
+          <div class="device-card-value">{{ realTimeData?.[DevParamCoolingTower.本地远程状态] ?? '-' }}</div>
+        </div>
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamCoolingTower.有功功率]" :percent="0" />
+        </div>
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamCoolingTower.频率反馈]" :percent="0" />
+        </div>
+      </div>
+    </div>
+    <div class="cooling-tower-bottom">
+      <div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.runHours') }} (H)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamCoolingTower.运行时间] ?? '-' }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<!-- <style lang="scss" scoped></style> -->
+<style lang="scss" scoped>
+.cooling-tower-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.cooling-tower-left {
+  width: 170px;
+  margin-right: 28px;
+
+  > div + div {
+    margin-top: 22px;
+  }
+}
+
+.cooling-tower-img {
+  position: absolute;
+  right: 8px;
+  bottom: 4px;
+}
+
+.cooling-tower-bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>