hvac-web/src/views/device-work-status/device-card/CoolingPump.vue

<script setup lang="ts">
import { computed } from 'vue';

import ProgressTextBar from '@/components/ProgressTextBar.vue';
import { calcPercentage, getFixedNum } from '@/utils';
import { DevParamCoolingPump } from '@/constants/device-params';

import type { DevWorkCardProps } from '@/types';

const props = defineProps<DevWorkCardProps<DevParamCoolingPump>>();

const activePowerPercent = computed(() => {
  const currentPower = props.realTimeData?.[DevParamCoolingPump.有功功率] as number;
  const maxPower = props.deviceDetail.powerRating;
  return calcPercentage(currentPower, maxPower);
});

const frequencyFbPercent = computed(() => {
  const currentFrequency = props.realTimeData?.[DevParamCoolingPump.频率反馈] as number;
  const maxFrequency = 50;
  return calcPercentage(currentFrequency, maxFrequency);
});
</script>

<template>
  <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 device-card-no-history">
            {{ realTimeData?.[DevParamCoolingPump.本地远程状态] ?? '-' }}
          </div>
        </div>
        <div>
          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.activePower') }} (kW)</div>
          <ProgressTextBar
            :text="getFixedNum(realTimeData?.[DevParamCoolingPump.有功功率], 1)"
            :percent="activePowerPercent"
            :data-param-code="DevParamCoolingPump.有功功率"
          />
        </div>
        <div>
          <div class="device-card-label">{{ $t('deviceWorkStatus.coolingTower.frequencyFb') }} (Hz)</div>
          <ProgressTextBar
            :text="getFixedNum(realTimeData?.[DevParamCoolingPump.频率反馈], 0)"
            :percent="frequencyFbPercent"
            :data-param-code="DevParamCoolingPump.频率反馈"
          />
        </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 device-card-no-history">
          {{ getFixedNum(realTimeData?.[DevParamCoolingPump.运行时间]) }}
        </div>
      </div>
    </div>
  </div>
</template>

<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;
}

.cooling-pump-top,
.cooling-pump-bottom {
  position: relative;
  z-index: 1;
}
</style>