feat(views): 优化设备工况卡片提示

1. 冷却泵、冷冻泵、冷却塔的有功功率增加悬浮提示框

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

@@ -2,7 +2,8 @@
 import { computed } from 'vue';
 
 import ProgressTextBar from '@/components/ProgressTextBar.vue';
-import { calcPercentage, getFixedNum } from '@/utils';
+import { t } from '@/i18n';
+import { calcPercentage, getFixedNum, isNotEmptyVal } from '@/utils';
 import { DevParamCoolingPump } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
@@ -15,6 +16,19 @@ const activePowerPercent = computed(() => {
   return calcPercentage(currentPower, maxPower);
 });
 
+const activePowerTip = computed(() => {
+  const activePower = props.realTimeData?.[DevParamCoolingPump.有功功率];
+  const powerRating = props.deviceDetail.powerRating;
+
+  const isActivePowerNotEmpty = isNotEmptyVal(activePower);
+  const isPowerRatingNotEmpty = isNotEmptyVal(powerRating);
+  const percent = isActivePowerNotEmpty && isPowerRatingNotEmpty ? activePowerPercent.value : '-';
+
+  return `${t('deviceWorkStatus.chillerUnit.activePowerPercentage')}: ${getFixedNum(percent, 1)}%
+${t('deviceWorkStatus.chillerUnit.activePower')}: ${getFixedNum(activePower, 1)}kW
+${t('deviceList.ratedPower')}: ${getFixedNum(powerRating, 1)}kW`;
+});
+
 const frequencyFbPercent = computed(() => {
   const currentFrequency = props.realTimeData?.[DevParamCoolingPump.频率反馈] as number;
   const maxFrequency = 50;
@@ -35,11 +49,14 @@ const frequencyFbPercent = computed(() => {
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
-          <ProgressTextBar
-            :text="getFixedNum(realTimeData?.[DevParamCoolingPump.有功功率], 1)"
-            :percent="activePowerPercent"
-            :data-param-code="DevParamCoolingPump.有功功率"
-          />
+          <ATooltip overlay-class-name="hvac-tooltip">
+            <template #title>{{ activePowerTip }}</template>
+            <ProgressTextBar
+              :text="getFixedNum(realTimeData?.[DevParamCoolingPump.有功功率], 1)"
+              :percent="activePowerPercent"
+              :data-param-code="DevParamCoolingPump.有功功率"
+            />
+          </ATooltip>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>

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

@@ -2,7 +2,8 @@
 import { computed } from 'vue';
 
 import ProgressTextBar from '@/components/ProgressTextBar.vue';
-import { calcPercentage, getFixedNum } from '@/utils';
+import { t } from '@/i18n';
+import { calcPercentage, getFixedNum, isNotEmptyVal } from '@/utils';
 import { DevParamCoolingTower } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
@@ -15,6 +16,19 @@ const activePowerPercent = computed(() => {
   return calcPercentage(currentPower, maxPower);
 });
 
+const activePowerTip = computed(() => {
+  const activePower = props.realTimeData?.[DevParamCoolingTower.有功功率];
+  const powerRating = props.deviceDetail.powerRating;
+
+  const isActivePowerNotEmpty = isNotEmptyVal(activePower);
+  const isPowerRatingNotEmpty = isNotEmptyVal(powerRating);
+  const percent = isActivePowerNotEmpty && isPowerRatingNotEmpty ? activePowerPercent.value : '-';
+
+  return `${t('deviceWorkStatus.chillerUnit.activePowerPercentage')}: ${getFixedNum(percent, 1)}%
+${t('deviceWorkStatus.chillerUnit.activePower')}: ${getFixedNum(activePower, 1)}kW
+${t('deviceList.ratedPower')}: ${getFixedNum(powerRating, 1)}kW`;
+});
+
 const frequencyFbPercent = computed(() => {
   const currentFrequency = props.realTimeData?.[DevParamCoolingTower.频率反馈] as number;
   const maxFrequency = 50;
@@ -35,11 +49,14 @@ const frequencyFbPercent = computed(() => {
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
-          <ProgressTextBar
-            :text="getFixedNum(realTimeData?.[DevParamCoolingTower.有功功率], 1)"
-            :percent="activePowerPercent"
-            :data-param-code="DevParamCoolingTower.有功功率"
-          />
+          <ATooltip overlay-class-name="hvac-tooltip">
+            <template #title>{{ activePowerTip }}</template>
+            <ProgressTextBar
+              :text="getFixedNum(realTimeData?.[DevParamCoolingTower.有功功率], 1)"
+              :percent="activePowerPercent"
+              :data-param-code="DevParamCoolingTower.有功功率"
+            />
+          </ATooltip>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>