Browse Source

feat(views): 优化设备工况卡片数值小数位的精度

wangcong 1 week ago
parent
commit
b55685b8a2

+ 14 - 0
src/utils/index.ts

@@ -277,3 +277,17 @@ export const isNotEmptyVal = (value: unknown) => {
 export const disabledDate = (current: Dayjs) => {
   return current > dayjs().endOf('day');
 };
+
+export const getFixedNum = (value: number | string | null | undefined, decimalPlaces: number = 2) => {
+  if (value === undefined || value === null || value === '') {
+    return '-';
+  }
+
+  const num = Number(value);
+
+  if (isNaN(num)) {
+    return '-';
+  }
+
+  return num.toFixed(decimalPlaces);
+};

+ 2 - 1
src/views/device-work-status/DeviceWorkStatus.vue

@@ -6,6 +6,7 @@ import { useInfiniteScroll } from '@vueuse/core';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { getDevWorkRealTimeData, getDevWorkTypeCount, queryDevicesList } from '@/api';
+import { getFixedNum } from '@/utils';
 import { DeviceRunningStatus, DeviceStatusQuery } from '@/constants';
 import { DevParamChillerUnit, DevParamCtrlCabinet } from '@/constants/device-params';
 
@@ -267,7 +268,7 @@ const handleDevCardClick = (devId: number, e: Event) => {
                 "
               >
                 <div class="device-cop-value" :data-param-code="DevParamChillerUnit.COP">
-                  {{ deviceRealTimeData[item.id][DevParamChillerUnit.COP] }}
+                  {{ getFixedNum(deviceRealTimeData[item.id][DevParamChillerUnit.COP]) }}
                 </div>
                 <!-- <div class="device-cop-level">中</div> -->
               </template>

+ 40 - 34
src/views/device-work-status/device-card/ChillerUnit.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 
 import { t } from '@/i18n';
-import { calcPercentage, isNotEmptyVal } from '@/utils';
+import { calcPercentage, getFixedNum, isNotEmptyVal } from '@/utils';
 import { DevParamChillerUnit } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
@@ -23,9 +23,9 @@ const coolingCapacityTip = computed(() => {
   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`;
+  return `${t('deviceWorkStatus.chillerUnit.coolingCapacityPercentage')}: ${getFixedNum(percent, 1)}%
+${t('deviceWorkStatus.chillerUnit.coolingCapacity')}: ${getFixedNum(coolingCapacity, 1)}kW
+${t('deviceWorkStatus.chillerUnit.coolingCapacityNominal')}: ${getFixedNum(nominalCoolingcapacity, 1)}kW`;
 });
 
 const activePowerPercent = computed(() => {
@@ -42,9 +42,9 @@ const activePowerTip = computed(() => {
   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`;
+  return `${t('deviceWorkStatus.chillerUnit.activePowerPercentage')}: ${getFixedNum(percent, 1)}%
+${t('deviceWorkStatus.chillerUnit.activePower')}: ${getFixedNum(activePower, 1)}kW
+${t('deviceList.ratedPower')}: ${getFixedNum(powerRating, 1)}kW`;
 });
 
 const showEvapCondTempPre = computed(() => {
@@ -67,7 +67,7 @@ const showDisSucTemp = computed(() => {
           <ATooltip overlay-class-name="hvac-tooltip">
             <template #title>{{ coolingCapacityTip }}</template>
             <ProgressTextBar
-              :text="realTimeData?.[DevParamChillerUnit.制冷量]"
+              :text="getFixedNum(realTimeData?.[DevParamChillerUnit.制冷量], 1)"
               :percent="coolingCapacityPercent"
               :data-param-code="DevParamChillerUnit.制冷量"
             />
@@ -82,7 +82,7 @@ const showDisSucTemp = computed(() => {
           <ATooltip overlay-class-name="hvac-tooltip">
             <template #title>{{ activePowerTip }}</template>
             <ProgressTextBar
-              :text="realTimeData?.[DevParamChillerUnit.有功功率]"
+              :text="getFixedNum(realTimeData?.[DevParamChillerUnit.有功功率], 1)"
               :percent="activePowerPercent"
               :data-param-code="DevParamChillerUnit.有功功率"
             />
@@ -91,7 +91,7 @@ const showDisSucTemp = computed(() => {
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.loadRate') }}</div>
           <ProgressTextBar
-            :text="realTimeData?.[DevParamChillerUnit.负载率] + '%'"
+            :text="getFixedNum(realTimeData?.[DevParamChillerUnit.负载率], 1) + '%'"
             :percent="realTimeData?.[DevParamChillerUnit.负载率] || 0"
             :data-param-code="DevParamChillerUnit.负载率"
           />
@@ -107,9 +107,9 @@ const showDisSucTemp = computed(() => {
           <ATooltip>
             <template #title>
               {{ $t('deviceWorkStatus.chillerUnit.evapWaterTempIn') }}:
-              {{ realTimeData?.[DevParamChillerUnit.冷冻水回水温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水回水温度]) }}°C
             </template>
-            {{ realTimeData?.[DevParamChillerUnit.冷冻水回水温度] }}°C
+            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水回水温度]) }}°C
           </ATooltip>
         </div>
         <div
@@ -120,9 +120,9 @@ const showDisSucTemp = computed(() => {
           <ATooltip>
             <template #title>
               {{ $t('deviceWorkStatus.chillerUnit.evapWaterTempOut') }}:
-              {{ realTimeData?.[DevParamChillerUnit.冷冻水出水温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水出水温度]) }}°C
             </template>
-            {{ realTimeData?.[DevParamChillerUnit.冷冻水出水温度] }}°C
+            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水出水温度]) }}°C
           </ATooltip>
         </div>
         <div
@@ -133,9 +133,9 @@ const showDisSucTemp = computed(() => {
           <ATooltip>
             <template #title>
               {{ $t('deviceWorkStatus.chillerUnit.condWaterTempIn') }}:
-              {{ realTimeData?.[DevParamChillerUnit.冷却水回水温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水回水温度]) }}°C
             </template>
-            {{ realTimeData?.[DevParamChillerUnit.冷却水回水温度] }}°C
+            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水回水温度]) }}°C
           </ATooltip>
         </div>
         <div
@@ -146,9 +146,9 @@ const showDisSucTemp = computed(() => {
           <ATooltip>
             <template #title>
               {{ $t('deviceWorkStatus.chillerUnit.condWaterTempOut') }}:
-              {{ realTimeData?.[DevParamChillerUnit.冷却水出水温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水出水温度]) }}°C
             </template>
-            {{ realTimeData?.[DevParamChillerUnit.冷却水出水温度] }}°C
+            {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷却水出水温度]) }}°C
           </ATooltip>
         </div>
         <template v-if="showEvapCondTempPre">
@@ -159,9 +159,10 @@ const showDisSucTemp = computed(() => {
           >
             <ATooltip>
               <template #title>
-                {{ $t('deviceWorkStatus.chillerUnit.evapPre') }}: {{ realTimeData?.[DevParamChillerUnit.蒸发压力] }}kPa
+                {{ $t('deviceWorkStatus.chillerUnit.evapPre') }}:
+                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发压力]) }}kPa
               </template>
-              {{ realTimeData?.[DevParamChillerUnit.蒸发压力] }}kPa
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发压力]) }}kPa
             </ATooltip>
           </div>
           <div
@@ -171,9 +172,10 @@ const showDisSucTemp = computed(() => {
           >
             <ATooltip>
               <template #title>
-                {{ $t('deviceWorkStatus.chillerUnit.evapTemp') }}: {{ realTimeData?.[DevParamChillerUnit.蒸发温度] }}°C
+                {{ $t('deviceWorkStatus.chillerUnit.evapTemp') }}:
+                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发温度]) }}°C
               </template>
-              {{ realTimeData?.[DevParamChillerUnit.蒸发温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.蒸发温度]) }}°C
             </ATooltip>
           </div>
           <div
@@ -183,9 +185,10 @@ const showDisSucTemp = computed(() => {
           >
             <ATooltip>
               <template #title>
-                {{ $t('deviceWorkStatus.chillerUnit.condPre') }}: {{ realTimeData?.[DevParamChillerUnit.冷凝压力] }}kPa
+                {{ $t('deviceWorkStatus.chillerUnit.condPre') }}:
+                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝压力]) }}kPa
               </template>
-              {{ realTimeData?.[DevParamChillerUnit.冷凝压力] }}kPa
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝压力]) }}kPa
             </ATooltip>
           </div>
           <div
@@ -195,9 +198,10 @@ const showDisSucTemp = computed(() => {
           >
             <ATooltip>
               <template #title>
-                {{ $t('deviceWorkStatus.chillerUnit.condTemp') }}: {{ realTimeData?.[DevParamChillerUnit.冷凝温度] }}°C
+                {{ $t('deviceWorkStatus.chillerUnit.condTemp') }}:
+                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝温度]) }}°C
               </template>
-              {{ realTimeData?.[DevParamChillerUnit.冷凝温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.冷凝温度]) }}°C
             </ATooltip>
           </div>
         </template>
@@ -209,9 +213,10 @@ const showDisSucTemp = computed(() => {
           >
             <ATooltip>
               <template #title>
-                {{ $t('deviceWorkStatus.chillerUnit.disTemp') }}: {{ realTimeData?.[DevParamChillerUnit.排气温度] }}°C
+                {{ $t('deviceWorkStatus.chillerUnit.disTemp') }}:
+                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.排气温度], 1) }}°C
               </template>
-              {{ realTimeData?.[DevParamChillerUnit.排气温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.排气温度], 1) }}°C
             </ATooltip>
           </div>
           <div
@@ -221,9 +226,10 @@ const showDisSucTemp = computed(() => {
           >
             <ATooltip>
               <template #title>
-                {{ $t('deviceWorkStatus.chillerUnit.sucTemp') }}: {{ realTimeData?.[DevParamChillerUnit.吸气温度] }}°C
+                {{ $t('deviceWorkStatus.chillerUnit.sucTemp') }}:
+                {{ getFixedNum(realTimeData?.[DevParamChillerUnit.吸气温度], 1) }}°C
               </template>
-              {{ realTimeData?.[DevParamChillerUnit.吸气温度] }}°C
+              {{ getFixedNum(realTimeData?.[DevParamChillerUnit.吸气温度], 1) }}°C
             </ATooltip>
           </div>
         </template>
@@ -235,7 +241,7 @@ const showDisSucTemp = computed(() => {
         <div class="device-card-value" :data-param-code="DevParamChillerUnit.冷冻水出水温度设定值反馈">
           {{
             isNotEmptyVal(realTimeData?.[DevParamChillerUnit.冷冻水出水温度设定值反馈])
-              ? realTimeData?.[DevParamChillerUnit.冷冻水出水温度设定值反馈] + '°C'
+              ? getFixedNum(realTimeData?.[DevParamChillerUnit.冷冻水出水温度设定值反馈], 1) + '°C'
               : '-'
           }}
         </div>
@@ -243,7 +249,7 @@ const showDisSucTemp = computed(() => {
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.chillerUnit.todayPowerConsumption') }} (kWh)</div>
         <div class="device-card-value device-card-no-history">
-          {{ realTimeData?.[DevParamChillerUnit.今日耗电量] ?? '-' }}
+          {{ getFixedNum(realTimeData?.[DevParamChillerUnit.今日耗电量], 1) }}
         </div>
       </div>
       <div>
@@ -251,7 +257,7 @@ const showDisSucTemp = computed(() => {
         <div class="device-card-value device-card-no-history">
           {{
             isNotEmptyVal(realTimeData?.[DevParamChillerUnit.本月耗电量])
-              ? realTimeData?.[DevParamChillerUnit.本月耗电量] + $t('common.tenThousand')
+              ? getFixedNum(realTimeData?.[DevParamChillerUnit.本月耗电量]) + $t('common.tenThousand')
               : '-'
           }}
         </div>
@@ -356,7 +362,7 @@ const showDisSucTemp = computed(() => {
 
   &.dis-temp {
     top: 52px;
-    right: 71px;
+    right: 65px;
   }
 
   &.suc-temp {

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 
 import ProgressTextBar from '@/components/ProgressTextBar.vue';
-import { calcPercentage } from '@/utils';
+import { calcPercentage, getFixedNum } from '@/utils';
 import { DevParamCoolingPump } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
@@ -36,7 +36,7 @@ const frequencyFbPercent = computed(() => {
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
           <ProgressTextBar
-            :text="realTimeData?.[DevParamCoolingPump.有功功率]"
+            :text="getFixedNum(realTimeData?.[DevParamCoolingPump.有功功率], 1)"
             :percent="activePowerPercent"
             :data-param-code="DevParamCoolingPump.有功功率"
           />
@@ -44,7 +44,7 @@ const frequencyFbPercent = computed(() => {
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
           <ProgressTextBar
-            :text="realTimeData?.[DevParamCoolingPump.频率反馈]"
+            :text="getFixedNum(realTimeData?.[DevParamCoolingPump.频率反馈], 0)"
             :percent="frequencyFbPercent"
             :data-param-code="DevParamCoolingPump.频率反馈"
           />
@@ -55,7 +55,7 @@ const frequencyFbPercent = computed(() => {
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.runHours') }} (H)</div>
         <div class="device-card-value device-card-no-history">
-          {{ realTimeData?.[DevParamCoolingPump.运行时间] ?? '-' }}
+          {{ getFixedNum(realTimeData?.[DevParamCoolingPump.运行时间]) }}
         </div>
       </div>
     </div>

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 
 import ProgressTextBar from '@/components/ProgressTextBar.vue';
-import { calcPercentage } from '@/utils';
+import { calcPercentage, getFixedNum } from '@/utils';
 import { DevParamCoolingTower } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
@@ -36,7 +36,7 @@ const frequencyFbPercent = computed(() => {
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
           <ProgressTextBar
-            :text="realTimeData?.[DevParamCoolingTower.有功功率]"
+            :text="getFixedNum(realTimeData?.[DevParamCoolingTower.有功功率], 1)"
             :percent="activePowerPercent"
             :data-param-code="DevParamCoolingTower.有功功率"
           />
@@ -44,7 +44,7 @@ const frequencyFbPercent = computed(() => {
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
           <ProgressTextBar
-            :text="realTimeData?.[DevParamCoolingTower.频率反馈]"
+            :text="getFixedNum(realTimeData?.[DevParamCoolingTower.频率反馈], 0)"
             :percent="frequencyFbPercent"
             :data-param-code="DevParamCoolingTower.频率反馈"
           />
@@ -55,7 +55,7 @@ const frequencyFbPercent = computed(() => {
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.runHours') }} (H)</div>
         <div class="device-card-value device-card-no-history">
-          {{ realTimeData?.[DevParamCoolingTower.运行时间] ?? '-' }}
+          {{ getFixedNum(realTimeData?.[DevParamCoolingTower.运行时间]) }}
         </div>
       </div>
     </div>

+ 7 - 6
src/views/device-work-status/device-card/CtrlCabinet.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getFixedNum } from '@/utils';
 import { DevParamCtrlCabinet } from '@/constants/device-params';
 
 import type { DevWorkCardProps } from '@/types';
@@ -14,19 +15,19 @@ defineProps<DevWorkCardProps<DevParamCtrlCabinet>>();
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainTempOut') }} (°C)</div>
           <div class="device-card-value" :data-param-code="DevParamCtrlCabinet.冷冻总管出水温度">
-            {{ realTimeData?.[DevParamCtrlCabinet.冷冻总管出水温度] ?? '-' }}
+            {{ getFixedNum(realTimeData?.[DevParamCtrlCabinet.冷冻总管出水温度]) }}
           </div>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainTempIn') }} (°C)</div>
           <div class="device-card-value" :data-param-code="DevParamCtrlCabinet.冷冻总管回水温度">
-            {{ realTimeData?.[DevParamCtrlCabinet.冷冻总管回水温度] ?? '-' }}
+            {{ getFixedNum(realTimeData?.[DevParamCtrlCabinet.冷冻总管回水温度]) }}
           </div>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainPreOut') }} (bar)</div>
           <div class="device-card-value" :data-param-code="DevParamCtrlCabinet.冷冻总管出水压力">
-            {{ realTimeData?.[DevParamCtrlCabinet.冷冻总管出水压力] ?? '-' }}
+            {{ getFixedNum(realTimeData?.[DevParamCtrlCabinet.冷冻总管出水压力]) }}
           </div>
         </div>
       </div>
@@ -35,19 +36,19 @@ defineProps<DevWorkCardProps<DevParamCtrlCabinet>>();
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.chilledWaterMainPreIn') }} (bar)</div>
         <div class="device-card-value" :data-param-code="DevParamCtrlCabinet.冷冻总管回水压力">
-          {{ realTimeData?.[DevParamCtrlCabinet.冷冻总管回水压力] ?? '-' }}
+          {{ getFixedNum(realTimeData?.[DevParamCtrlCabinet.冷冻总管回水压力]) }}
         </div>
       </div>
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.coolingWaterMainTempOut') }} (°C)</div>
         <div class="device-card-value" :data-param-code="DevParamCtrlCabinet.冷却总管出水温度">
-          {{ realTimeData?.[DevParamCtrlCabinet.冷却总管出水温度] ?? '-' }}
+          {{ getFixedNum(realTimeData?.[DevParamCtrlCabinet.冷却总管出水温度]) }}
         </div>
       </div>
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.ctrlCabinet.coolingWaterMainTempIn') }} (°C)</div>
         <div class="device-card-value" :data-param-code="DevParamCtrlCabinet.冷却总管回水温度">
-          {{ realTimeData?.[DevParamCtrlCabinet.冷却总管回水温度] ?? '-' }}
+          {{ getFixedNum(realTimeData?.[DevParamCtrlCabinet.冷却总管回水温度]) }}
         </div>
       </div>
     </div>