perf(views): 优化“设备工况”模块冷却塔的参数设置

src/components/ProgressTextBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, useTemplateRef } from 'vue';
 
 interface Props {
   text?: string | number;
@@ -23,10 +23,28 @@ const barText = computed(() => {
 const isTextInProgress = computed(() => {
   return props.percent > 50;
 });
+
+const progressRef = useTemplateRef('progress');
+
+onMounted(() => {
+  if (progressRef.value) {
+    const el = progressRef.value.$el as HTMLElement;
+    const { paramCode } = el.dataset;
+
+    // 若该组件设置了参数编码作为数据属性，则同样使其内部元素也设置相同的属性和值。当在设备工况的卡片中使用时，点击该组件可以查看该参数的历史数据
+    if (paramCode) {
+      const progressInnerEl = el.querySelector<HTMLElement>('.ant-progress-inner');
+      const progressBgEl = el.querySelector<HTMLElement>('.ant-progress-bg');
+      progressInnerEl?.setAttribute('data-param-code', paramCode);
+      progressBgEl?.setAttribute('data-param-code', paramCode);
+    }
+  }
+});
 </script>
 
 <template>
   <AProgress
+    ref="progress"
     :class="['progress-text-bar', { 'progress-inner-text': isTextInProgress }]"
     :percent="percent"
     :size="height"

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

@@ -328,5 +328,9 @@ const handleDevCardClick = (devId: number, e: Event) => {
   line-height: 24px;
   color: #333;
   cursor: pointer;
+
+  &.device-card-no-history {
+    cursor: default;
+  }
 }
 </style>

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

@@ -14,22 +14,34 @@ defineProps<DevWorkCardProps<DevParamCoolingTower>>();
       <div class="cooling-tower-left">
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.localRemoteStatus') }}</div>
-          <div class="device-card-value">{{ realTimeData?.[DevParamCoolingTower.本地远程状态] ?? '-' }}</div>
+          <div class="device-card-value device-card-no-history">
+            {{ realTimeData?.[DevParamCoolingTower.本地远程状态] ?? '-' }}
+          </div>
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
-          <ProgressTextBar :text="realTimeData?.[DevParamCoolingTower.有功功率]" :percent="0" />
+          <ProgressTextBar
+            :text="realTimeData?.[DevParamCoolingTower.有功功率]"
+            :percent="0"
+            :data-param-code="DevParamCoolingTower.有功功率"
+          />
         </div>
         <div>
           <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
-          <ProgressTextBar :text="realTimeData?.[DevParamCoolingTower.频率反馈]" :percent="0" />
+          <ProgressTextBar
+            :text="realTimeData?.[DevParamCoolingTower.频率反馈]"
+            :percent="0"
+            :data-param-code="DevParamCoolingTower.频率反馈"
+          />
         </div>
       </div>
     </div>
     <div class="cooling-tower-bottom">
       <div>
         <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.runHours') }} (H)</div>
-        <div class="device-card-value">{{ realTimeData?.[DevParamCoolingTower.运行时间] ?? '-' }}</div>
+        <div class="device-card-value device-card-no-history">
+          {{ realTimeData?.[DevParamCoolingTower.运行时间] ?? '-' }}
+        </div>
       </div>
     </div>
   </div>
@@ -61,4 +73,10 @@ defineProps<DevWorkCardProps<DevParamCoolingTower>>();
   display: flex;
   justify-content: space-between;
 }
+
+.cooling-tower-top,
+.cooling-tower-bottom {
+  position: relative;
+  z-index: 1;
+}
 </style>