perf(views): 优化“设备工况”页面

1. 支持显示制冷量、有功功率、负载率、频率反馈等参数的百分比值

src/types/index.ts

@@ -910,6 +910,7 @@ export type DevicesListItemData = PageData<DevicesListItem>;
 export interface DevicesListItem {
   id: number;
   deviceName: string;
+  deviceDetail: string;
   groupId: number;
   deviceType: number;
   userId: number;
@@ -995,6 +996,7 @@ export interface DeviceTypeCount {
 
 export interface DevWorkCardProps<T extends string> {
   realTimeData?: Partial<Record<T, number | string>>;
+  deviceDetail: Partial<Record<string, number>>;
 }
 
 export interface DevWorkRealTimeData {

src/utils/index.ts

@@ -259,3 +259,8 @@ export const getEChartsColors = (count: number) => {
       ];
   }
 };
+
+export const calcPercentage = (currentValue?: number, maxValue?: number) => {
+  const percentage = ((currentValue || 0) / (maxValue || 100)) * 100;
+  return Number(percentage.toFixed(2));
+};

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

@@ -226,6 +226,7 @@ const handleDevCardClick = (devId: number, e: Event) => {
             <component
               :is="deviceCardData[activeDeviceType]?.component"
               :real-time-data="deviceRealTimeData[item.id]"
+              :device-detail="JSON.parse(item.deviceDetail || '{}')"
             />
           </div>
         </ACol>

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

@@ -1,9 +1,24 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
+import { calcPercentage } from '@/utils';
 import { DevParamChillerUnit } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
 
-defineProps<DevWorkCardProps<DevParamChillerUnit>>();
+const props = defineProps<DevWorkCardProps<DevParamChillerUnit>>();
+
+const coolingCapacityPercent = computed(() => {
+  const currentCooling = props.realTimeData?.[DevParamChillerUnit.制冷量] as number;
+  const maxCooling = props.deviceDetail.nominalCoolingcapacity;
+  return calcPercentage(currentCooling, maxCooling);
+});
+
+const activePowerPercent = computed(() => {
+  const currentPower = props.realTimeData?.[DevParamChillerUnit.有功功率] as number;
+  const maxPower = props.deviceDetail.powerRating;
+  return calcPercentage(currentPower, maxPower);
+});
 </script>
 
 <template>
@@ -14,7 +29,7 @@ defineProps<DevWorkCardProps<DevParamChillerUnit>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.coolingCapacity') }} (kW)</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamChillerUnit.制冷量]"
-            :percent="0"
+            :percent="coolingCapacityPercent"
             :data-param-code="DevParamChillerUnit.制冷量"
           />
         </div>
@@ -22,7 +37,7 @@ defineProps<DevWorkCardProps<DevParamChillerUnit>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.activePower') }} (kW)</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamChillerUnit.有功功率]"
-            :percent="0"
+            :percent="activePowerPercent"
             :data-param-code="DevParamChillerUnit.有功功率"
           />
         </div>
@@ -30,7 +45,7 @@ defineProps<DevWorkCardProps<DevParamChillerUnit>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.loadRate') }}</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamChillerUnit.负载率]"
-            :percent="0"
+            :percent="realTimeData?.[DevParamChillerUnit.负载率] || 0"
             :data-param-code="DevParamChillerUnit.负载率"
           />
         </div>

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

@@ -1,10 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import ProgressTextBar from '@/components/ProgressTextBar.vue';
+import { calcPercentage } from '@/utils';
 import { DevParamCoolingPump } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
 
-defineProps<DevWorkCardProps<DevParamCoolingPump>>();
+const props = defineProps<DevWorkCardProps<DevParamCoolingPump>>();
+
+const activePowerPercent = computed(() => {
+  const currentPower = props.realTimeData?.[DevParamCoolingPump.有功功率] as number;
+  const maxPower = props.deviceDetail.powerRating;
+  return calcPercentage(currentPower, maxPower);
+});
+
+const frequencyFbPercent = computed(() => {
+  const currentFrequency = props.realTimeData?.[DevParamCoolingPump.频率反馈] as number;
+  const maxFrequency = 50;
+  return calcPercentage(currentFrequency, maxFrequency);
+});
 </script>
 
 <template>
@@ -22,7 +37,7 @@ defineProps<DevWorkCardProps<DevParamCoolingPump>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamCoolingPump.有功功率]"
-            :percent="0"
+            :percent="activePowerPercent"
             :data-param-code="DevParamCoolingPump.有功功率"
           />
         </div>
@@ -30,7 +45,7 @@ defineProps<DevWorkCardProps<DevParamCoolingPump>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamCoolingPump.频率反馈]"
-            :percent="0"
+            :percent="frequencyFbPercent"
             :data-param-code="DevParamCoolingPump.频率反馈"
           />
         </div>

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

@@ -1,10 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import ProgressTextBar from '@/components/ProgressTextBar.vue';
+import { calcPercentage } from '@/utils';
 import { DevParamCoolingTower } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
 
-defineProps<DevWorkCardProps<DevParamCoolingTower>>();
+const props = defineProps<DevWorkCardProps<DevParamCoolingTower>>();
+
+const activePowerPercent = computed(() => {
+  const currentPower = props.realTimeData?.[DevParamCoolingTower.有功功率] as number;
+  const maxPower = props.deviceDetail.powerRating;
+  return calcPercentage(currentPower, maxPower);
+});
+
+const frequencyFbPercent = computed(() => {
+  const currentFrequency = props.realTimeData?.[DevParamCoolingTower.频率反馈] as number;
+  const maxFrequency = 50;
+  return calcPercentage(currentFrequency, maxFrequency);
+});
 </script>
 
 <template>
@@ -22,7 +37,7 @@ defineProps<DevWorkCardProps<DevParamCoolingTower>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamCoolingTower.有功功率]"
-            :percent="0"
+            :percent="activePowerPercent"
             :data-param-code="DevParamCoolingTower.有功功率"
           />
         </div>
@@ -30,7 +45,7 @@ defineProps<DevWorkCardProps<DevParamCoolingTower>>();
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
           <ProgressTextBar
             :text="realTimeData?.[DevParamCoolingTower.频率反馈]"
-            :percent="0"
+            :percent="frequencyFbPercent"
             :data-param-code="DevParamCoolingTower.频率反馈"
           />
         </div>