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

src/i18n/locales/zh.json

@@ -137,6 +137,15 @@
       "todayPowerConsumption": "今日耗电量",
       "waterTempOutSet": "冷冻水出水温度设定值反馈"
     },
+    "ctrlCabinet": {
+      "chilledWaterMainPreIn": "冷冻总管回水压力",
+      "chilledWaterMainPreOut": "冷冻总管出水压力",
+      "chilledWaterMainTempIn": "冷冻总管回水温度",
+      "chilledWaterMainTempOut": "冷冻总管出水温度",
+      "coolingWaterMainPreIn": "冷却总管回水温度",
+      "coolingWaterMainPreOut": "冷却总管出水温度",
+      "systemControlModeSet": "系统控制模式设定"
+    },
     "viewData": "查看数据"
   },
   "envMonitor": {},

src/types/index.ts

@@ -928,6 +928,10 @@ export interface DeviceTypeCount {
   count: number;
 }
 
+export interface DevWorkCardProps<T extends string> {
+  realTimeData?: Partial<Record<T, number | string>>;
+}
+
 export interface DevWorkRealTimeData {
   deviceId: number;
   deviceParamMapList: {

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

@@ -5,6 +5,7 @@ import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { getDevWorkRealTimeData, getDevWorkTypeCount, queryDevicesList } from '@/api';
 import { DeviceRunningStatus, DeviceStatusQuery } from '@/constants';
+import { DevParamCtrlCabinet } from '@/constants/device-params';
 
 import { deviceCardData, DeviceType } from './device-card';
 import DeviceWorkParams from './DeviceWorkParams.vue';
@@ -33,8 +34,22 @@ onMounted(() => {
   });
 });
 
+/**
+ * 设备实时数据映射对象
+ * - 以设备 id 作为 key
+ * - 时间与设备参数的值构成的对象作为 value
+ */
+type DeviceRTDMap = Record<
+  number,
+  {
+    [key: string]: number | string | undefined;
+    time?: string;
+  }
+>;
+
 const deviceList = ref<DevicesListItem[]>([]);
 const deviceTotal = ref(0);
+const deviceRealTimeData = ref<DeviceRTDMap>({});
 const pageParams = ref<PageParams>({
   pageIndex: 1,
   pageSize: 100,
@@ -65,7 +80,17 @@ const getDeviceList = () => {
     const deviceIds = records.map((item) => item.id);
     const deviceParamCode = deviceCardData[activeDeviceType.value]?.paramCodes || [];
 
-    await getDevWorkRealTimeData(deviceIds, deviceParamCode);
+    const data = await getDevWorkRealTimeData(deviceIds, deviceParamCode);
+
+    data.forEach((item) => {
+      if (!deviceRealTimeData.value[item.deviceId]) {
+        deviceRealTimeData.value[item.deviceId] = {};
+      }
+
+      item.deviceParamMapList.forEach((paramItem) => {
+        Object.assign(deviceRealTimeData.value[item.deviceId], paramItem);
+      });
+    });
 
     deviceList.value = records;
     deviceTotal.value = total;
@@ -116,12 +141,23 @@ const viewDevParam = () => {
               ]"
             ></span>
             <div class="ellipsis-text device-card-header-title">{{ item.deviceName }}</div>
-            <div class="device-cop-value">5.17</div>
-            <div class="device-cop-level">中</div>
-            <span class="device-card-header-time">2025-3-21 09:40</span>
+            <div
+              v-if="
+                activeDeviceType === DeviceType.控制柜 &&
+                deviceRealTimeData[item.id]?.[DevParamCtrlCabinet.系统控制模式设定]
+              "
+              class="ctrl-cabinet-mode"
+            >
+              {{ deviceRealTimeData[item.id][DevParamCtrlCabinet.系统控制模式设定] }}
+            </div>
+            <template v-if="activeDeviceType === DeviceType.冷水主机">
+              <div class="device-cop-value">5.17</div>
+              <div class="device-cop-level">中</div>
+            </template>
+            <span class="device-card-header-time">{{ deviceRealTimeData[item.id]?.time }}</span>
             <SvgIcon class="device-card-header-button" name="adjustment" @click="viewDevParam" />
           </div>
-          <component :is="deviceCardData[activeDeviceType]?.component" />
+          <component :is="deviceCardData[activeDeviceType]?.component" :real-time-data="deviceRealTimeData[item.id]" />
         </div>
       </ACol>
     </ARow>
@@ -160,6 +196,7 @@ const viewDevParam = () => {
 }
 
 .device-card-container {
+  position: relative;
   height: 328px;
   padding: 16px 24px;
   background-color: #fff;
@@ -186,6 +223,19 @@ const viewDevParam = () => {
   color: var(--antd-color-text);
 }
 
+.ctrl-cabinet-mode {
+  width: 86px;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  color: var(--antd-color-primary);
+  text-align: center;
+  background: var(--antd-color-primary-opacity-10);
+  border: 1px solid var(--antd-color-primary);
+  border-radius: 4px;
+}
+
 .device-cop-value {
   font-family: DINAlternate;
   font-size: 24px;

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

@@ -1,9 +1,71 @@
 <script setup lang="ts">
 import { DevParamCtrlCabinet } from '@/constants/device-params';
+
+import type { DevWorkCardProps } from '@/types';
+
+defineProps<DevWorkCardProps<DevParamCtrlCabinet>>();
 </script>
 
 <template>
-  <div>控制柜 - {{ DevParamCtrlCabinet.冷冻总管回水压力 }}</div>
+  <div>
+    <img class="ctrl-cabinet-img" src="@/assets/img/device-ctrl-cabinet.png" />
+    <div class="ctrl-cabinet-top">
+      <div class="ctrl-cabinet-left">
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainTempOut') }} (°C)</div>
+          <div class="device-card-value">{{ realTimeData?.[DevParamCtrlCabinet.冷冻总管出水温度] ?? '-' }}</div>
+        </div>
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainTempIn') }} (°C)</div>
+          <div class="device-card-value">{{ realTimeData?.[DevParamCtrlCabinet.冷冻总管回水温度] ?? '-' }}</div>
+        </div>
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainPreOut') }} (bar)</div>
+          <div class="device-card-value">{{ realTimeData?.[DevParamCtrlCabinet.冷冻总管出水压力] ?? '-' }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="ctrl-cabinet-bottom">
+      <div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainPreIn') }} (bar)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamCtrlCabinet.冷冻总管回水压力] ?? '-' }}</div>
+      </div>
+      <div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.coolingWaterMainPreOut') }} (°C)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamCtrlCabinet.冷却总管出水温度] ?? '-' }}</div>
+      </div>
+      <div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.coolingWaterMainPreIn') }} (°C)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamCtrlCabinet.冷却总管回水温度] ?? '-' }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<!-- <style lang="scss" scoped></style> -->
+<style lang="scss" scoped>
+.ctrl-cabinet-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.ctrl-cabinet-left {
+  width: 170px;
+  margin-right: 28px;
+
+  > div + div {
+    margin-top: 22px;
+  }
+}
+
+.ctrl-cabinet-img {
+  position: absolute;
+  top: 58px;
+  right: 19px;
+}
+
+.ctrl-cabinet-bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>