feat(views): 优化设备工况冷水主机卡片

1. 移入制冷量和有功功率的参数数据时，显示提示框

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { t } from '@/i18n';
 import { calcPercentage, isNotEmptyVal } from '@/utils';
 import { DevParamChillerUnit } from '@/constants/device-params';
 
@@ -14,11 +15,37 @@ const coolingCapacityPercent = computed(() => {
   return calcPercentage(currentCooling, maxCooling);
 });
 
+const coolingCapacityTip = computed(() => {
+  const coolingCapacity = props.realTimeData?.[DevParamChillerUnit.制冷量];
+  const nominalCoolingcapacity = props.deviceDetail.nominalCoolingcapacity;
+
+  const isCoolingcapacityNotEmpty = isNotEmptyVal(coolingCapacity);
+  const isNominalCoolingcapacityNotEmpty = isNotEmptyVal(nominalCoolingcapacity);
+  const percent = isCoolingcapacityNotEmpty && isNominalCoolingcapacityNotEmpty ? coolingCapacityPercent.value : '-';
+
+  return `${t('deviceWorkStatus.chillerUnit.coolingCapacityPercentage')}: ${percent}%
+${t('deviceWorkStatus.chillerUnit.coolingCapacity')}: ${coolingCapacity ?? '-'}kW
+${t('deviceWorkStatus.chillerUnit.coolingCapacityNominal')}: ${nominalCoolingcapacity ?? '-'}kW`;
+});
+
 const activePowerPercent = computed(() => {
   const currentPower = props.realTimeData?.[DevParamChillerUnit.有功功率] as number;
   const maxPower = props.deviceDetail.powerRating;
   return calcPercentage(currentPower, maxPower);
 });
+
+const activePowerTip = computed(() => {
+  const activePower = props.realTimeData?.[DevParamChillerUnit.有功功率];
+  const powerRating = props.deviceDetail.powerRating;
+
+  const isActivePowerNotEmpty = isNotEmptyVal(activePower);
+  const isPowerRatingNotEmpty = isNotEmptyVal(powerRating);
+  const percent = isActivePowerNotEmpty && isPowerRatingNotEmpty ? activePowerPercent.value : '-';
+
+  return `${t('deviceWorkStatus.chillerUnit.activePowerPercentage')}: ${percent}%
+${t('deviceWorkStatus.chillerUnit.activePower')}: ${activePower ?? '-'}kW
+${t('deviceList.ratedPower')}: ${powerRating ?? '-'}kW`;
+});
 </script>
 
 <template>
@@ -27,19 +54,25 @@ const activePowerPercent = computed(() => {
       <div class="chiller-unit-left">
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.coolingCapacity') }} (kW)</div>
-          <ProgressTextBar
-            :text="realTimeData?.[DevParamChillerUnit.制冷量]"
-            :percent="coolingCapacityPercent"
-            :data-param-code="DevParamChillerUnit.制冷量"
-          />
+          <ATooltip overlay-class-name="hvac-tooltip">
+            <template #title>{{ coolingCapacityTip }}</template>
+            <ProgressTextBar
+              :text="realTimeData?.[DevParamChillerUnit.制冷量]"
+              :percent="coolingCapacityPercent"
+              :data-param-code="DevParamChillerUnit.制冷量"
+            />
+          </ATooltip>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.activePower') }} (kW)</div>
-          <ProgressTextBar
-            :text="realTimeData?.[DevParamChillerUnit.有功功率]"
-            :percent="activePowerPercent"
-            :data-param-code="DevParamChillerUnit.有功功率"
-          />
+          <ATooltip overlay-class-name="hvac-tooltip">
+            <template #title>{{ activePowerTip }}</template>
+            <ProgressTextBar
+              :text="realTimeData?.[DevParamChillerUnit.有功功率]"
+              :percent="activePowerPercent"
+              :data-param-code="DevParamChillerUnit.有功功率"
+            />
+          </ATooltip>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.loadRate') }}</div>