Procházet zdrojové kódy

feat(views): 编写“设备工况”模块的冷却泵卡片,并支持获取实时数据

wangcong před 2 měsíci
rodič
revize
a66ac92d5c

binární
src/assets/img/device-cooling-pump.png


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

@@ -1,9 +1,64 @@
 <script setup lang="ts">
+import ProgressTextBar from '@/components/ProgressTextBar.vue';
 import { DevParamCoolingPump } from '@/constants/device-params';
+
+import type { DevWorkCardProps } from '@/types';
+
+defineProps<DevWorkCardProps<DevParamCoolingPump>>();
 </script>
 
 <template>
-  <div>冷却泵 - {{ DevParamCoolingPump.有功功率 }}</div>
+  <div>
+    <img class="cooling-pump-img" src="@/assets/img/device-cooling-pump.png" />
+    <div class="cooling-pump-top">
+      <div class="cooling-pump-left">
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.localRemoteStatus') }}</div>
+          <div class="device-card-value">{{ realTimeData?.[DevParamCoolingPump.本地远程状态] ?? '-' }}</div>
+        </div>
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamCoolingPump.有功功率]" :percent="0" />
+        </div>
+        <div>
+          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
+          <ProgressTextBar :text="realTimeData?.[DevParamCoolingPump.频率反馈]" :percent="0" />
+        </div>
+      </div>
+    </div>
+    <div class="cooling-pump-bottom">
+      <div>
+        <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.runHours') }} (H)</div>
+        <div class="device-card-value">{{ realTimeData?.[DevParamCoolingPump.运行时间] ?? '-' }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<!-- <style lang="scss" scoped></style> -->
+<style lang="scss" scoped>
+.cooling-pump-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.cooling-pump-left {
+  width: 170px;
+  margin-right: 28px;
+
+  > div + div {
+    margin-top: 22px;
+  }
+}
+
+.cooling-pump-img {
+  position: absolute;
+  top: 58px;
+  right: 19px;
+}
+
+.cooling-pump-bottom {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

+ 9 - 0
src/views/device-work-status/device-card/index.ts

@@ -70,6 +70,15 @@ export const deviceCardData: DeviceCardData = {
       DevParamCoolingTower.运行时间,
     ],
   },
+  [DeviceType.冷却泵]: {
+    component: CoolingPump,
+    paramCodes: [
+      DevParamCoolingPump.本地远程状态,
+      DevParamCoolingPump.有功功率,
+      DevParamCoolingPump.频率反馈,
+      DevParamCoolingPump.运行时间,
+    ],
+  },
   [DeviceType.冷冻泵]: {
     component: CoolingPump,
     paramCodes: [