|
@@ -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>
|