cpp/cpp-ui/src/views/largeScreen/components/left-middle.vue

<template>
  <div class="progress-bar_container">
    <div>
      <div class="bar_title">
        <div class="flex tb_container">
          <span class="tb_title">日发电量</span>
          <span class="tb_num">{{ realGeneratingSum }}</span>
          <span class="tb_sum_num ml-0">/{{ forecastGeneratingSum }}</span>
          <span class="tb_unit ml-1">万kWh</span>
        </div>
      </div>
      <div class="flex items-center">
        <progress-bar
          :params="{type:0,obj:getGeneratingRatio(realGeneratingSum,forecastGeneratingSum)}"/>
        <span class="tb_unit ml-0">200%</span>
      </div>
    </div>
    <div style="margin-top: 5vh">
      <div class="bar_title">
        <div class="flex tb_container">
          <span class="tb_title">实际功率</span>
          <span class="tb_num">{{ realPowerSum }}</span>
          <span class="tb_sum_num ml-0">/{{ theoryPowerSum }}</span>
          <span class="tb_unit ml-1">MW</span>
        </div>
      </div>
      <div class="flex items-center">
        <progress-bar :params="{type:1,obj:getForecastRatio(realPowerSum,theoryPowerSum)}"/>
        <span class="tb_unit ml-0">120%</span>
      </div>
    </div>
  </div>
</template>

<script>
import ProgressBar from "./progress-bar"

export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      realGeneratingSum: 0,
      forecastGeneratingSum: 0,
      realPowerSum: 0,
      theoryPowerSum: 0,
    }
  },
  props: {
    params: {type: Object}
  },
  watch: {
    params: {
      // immediate: true,// 第一次立即监听
      handler(value) {
        this.realGeneratingSum = value.realGeneratingSum
        this.forecastGeneratingSum = value.forecastGeneratingSum
        this.realPowerSum = value.realPowerSum
        this.theoryPowerSum = value.theoryPowerSum
      }
    }
  },
  methods: {
    getGeneratingRatio(dividend, divisor) {
      if (Number(divisor) === 0 || Number(dividend) === 0) {
        return 0
      }
      // 百分之200的比例展示
      // console.log(dividend)
      // console.log(divisor)
      // console.log((Number(dividend) / Number(divisor) * 100).toFixed(2))
      return {
        width:(((Number(dividend) / Number(divisor)) * 100) / 2).toFixed(2),
        text:((Number(dividend) / Number(divisor)) * 100).toFixed(2)
      }
    },
    getForecastRatio(dividend, divisor) {
      if (Number(divisor) === 0 || Number(dividend) === 0) {
        return 0
      }
      // 百分之120展示
      return {
        width:(((Number(dividend) / Number(divisor)) * 100) / 1.2).toFixed(2),
        text:((Number(dividend) / Number(divisor)) * 100).toFixed(2)
      }
      // return ((Number(dividend) / Number(divisor * 1.2)) * 100).toFixed(2)
    }
  },
}
</script>

<style lang='scss' scoped>
.progress-bar_container {
  //margin: 10% 6%;
  margin: 0 1vw;
}

.bar_title {
  width: 100%;
  height: 2rem;
  background-image: url("../../../assets/images/dashboard/progressBarTitleBg.png");
  background-repeat: no-repeat;
}

.tb_container {
  margin-left: 1.5vw;
  line-height: 2.5vh;

  .tb_title {
    width: 6rem;
    //margin-left: 1.5vw;
  }

  .tb_num {
    margin-left: 1.5vw;
    font-size: 1.2vw;
  }

  .tb_sum_num {
    font-size: .9vw;
  }
}

.tb_unit {
  font-size: .85vw;
  writing-mode: horizontal-tb;
  color: #838686;
}
</style>