eemcs_ui/src/views/components/hotWater.vue

<template>
  <div class="card-div">
    <!-- 二通阀 -->
    <div class="card-li">
      <div class="card-header">
        <h2 class="card-title">二通阀开度:</h2>
      </div>
      <div class="thermometer">
        <div class="temprogress" :style="{ width: twoValveValue + '%' }"></div>
      </div>
      <div class="temperature">
        <span
          v-if="twoValveItem && twoValveItem.status === 1"
          class="error-text"
          >异常</span
        >
        <span v-else>{{ twoValveValue }}%</span>
      </div>
    </div>

    <!-- 三通阀 -->
    <div class="card-li">
      <div class="card-header">
        <h2 class="card-title">三通阀开度:</h2>
      </div>
      <div class="thermometer">
        <div
          class="temprogress"
          :style="{ width: threeValveValue + '%' }"
        ></div>
      </div>
      <div class="temperature">
        <span
          v-if="threeValveItem && threeValveItem.status === 1"
          class="error-text"
          >异常</span
        >
        <span v-else>{{ threeValveValue }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    subData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      temData1: "",
      temData2: "",
      temData: [],
    };
  },
  computed: {
    // 获取二通阀数据
    twoValveItem() {
      return this.subData.find(
        (item) => item.deviceTypeName === "二通阀阀门开度"
      );
    },

    // 获取三通阀数据
    threeValveItem() {
      return this.subData.find(
        (item) => item.deviceTypeName === "三通阀阀门开度"
      );
    },

    // 二通阀开度值
    twoValveValue() {
      if (!this.twoValveItem || this.twoValveItem.status === 1) return 0;
      // 确保值在 0-100 范围内
      const value = parseFloat(this.twoValveItem.curValue) || 0;
      return Math.min(Math.max(value, 0), 100);
    },

    // 三通阀开度值
    threeValveValue() {
      if (!this.threeValveItem || this.threeValveItem.status === 1) return 0;
      // 确保值在 0-100 范围内
      const value = parseFloat(this.threeValveItem.curValue) || 0;
      return Math.min(Math.max(value, 0), 100);
    },
  },
};
</script>

<style lang="scss" scoped>
.card-div {
  width: 100%;
  padding: 20px;
  .card-li {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card-title {
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
      }
    }
    .temperature {
      font-size: 20px;
      font-weight: 700;
      color: #2ecc71;
      position: relative;
      display: inline-block;
    }
    .thermometer {
      width: calc(100% - 250px);
      min-width: 200px;
      height: 15px;
      background: #3d5581;
      border-radius: 20px;
      margin: 0 0.1rem;
      overflow: hidden;
      box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1);
      position: relative;
    }
    .temprogress {
      position: absolute;
      left: 0;
      height: 100%;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      background: linear-gradient(to right, #3498db, #2ecc71) !important;
    }
  }
}
@media (min-width: 2000px) {
}
</style>