energy_app/src/views/comment/components/energyReport-bar.vue

<template>
  <div class=".energyReport-bar">
    <div class="bar-title">
      <img src="@/assets/energyReport-left.png" alt="" />
      <div class="bar-title-color">建筑综合评定</div>
      <img src="@/assets/energyReport-right.png" alt="" />
    </div>
    <!-- 建筑综合评定文字 -->
    <div class="wholeAlgorithmScore">
      根据建筑整体能效诊断情况，从能源管理措施、主要设备水平、清洁能源利用、能耗定额指标、节能改造措施5个维度，综合能效水平评定{{ EnergyReportInfo.wholeAlgorithmScore }}分。
      分项评分结果如下：
    </div>
    <!-- 建筑综合评定雷达图 -->
    <div class="radarChart"></div>
    <!-- 总结 -->
    <div class="summarize">
      <img class="summarize-img" src="@/assets/summarize.png" alt="" />
      <h1 class="summarize-h1">总结</h1>
    </div>
    <div class="energyReport-summarize">
      <div class="energyReport-summarize-div">
        <h1 class="energyReport-summarize-div-h1">能源管理措施:</h1>
        <p class="energyReport-summarize-woedStyle">
          贵单位{{ EnergyReportInfo.establishOrgStructure }}组建组织架构、{{
            EnergyReportInfo.entrustProfessionalTeam
          }}委托专业团队、{{ EnergyReportInfo.establishLedgerManage }}建立台账管理、{{
            EnergyReportInfo.conductDailyInspections
          }}开展日常巡检、{{
            EnergyReportInfo.energySavingPromotion
          }}制定节能宣传，评定得分{{
            EnergyReportInfo.buildAlgorithmScore
          }}分。
        </p>
      </div>
      <div class="energyReport-summarize-div">
        <h1 class="energyReport-summarize-div-h1">主要设备水平:</h1>
        <p class=".energyReport-summarize-div-p">
          贵单位主要用能设备：{{ EnergyReportInfo.refrigerationSystems }}，根据运营情况及设备现状进行评定，评定得分{{ EnergyReportInfo.deviceAlgorithmScore}}分，主要设备水平整体情况{{EnergyReportInfo.mainEnergyConsumptionLevel}}。
        </p>
      </div>
      <div class="energyReport-summarize-div">
        <h1 class="energyReport-summarize-div-h1">清洁能源利用:</h1>
        <p
          v-if="
            EnergyReportInfo.cleanEnergyInclude ||
              EnergyReportInfo.cleanEnergyAlgorithmScore
          "
          class=".energyReport-summarize-div-p"
        >
          贵单位利用的清洁能源：{{ EnergyReportInfo.cleanEnergyInclude}}
          ，结合绿电交易情况，评定得分{{ EnergyReportInfo.cleanEnergyAlgorithmScore}}分。
        </p>
        <p v-else>贵单位无相关清洁能源利用评定不得分</p>
      </div>
      <div class="energyReport-summarize-div">
        <h1 class="energyReport-summarize-div-h1">能耗定额指标:</h1>
        <p class=".energyReport-summarize-div-p">
          贵单位当前单位面积能耗定额为{{EnergyReportInfo.perAreaEnergyQuota}}千克折煤/平方米, {{ EnergyReportInfo.areaquotaRange }}。<span v-if="renjun">人均能耗定额为{{
            EnergyReportInfo.personEnergyQuota
          }}千克折煤/人,<span>{{ EnergyReportInfo.perquotaRange }},</span></span>评定得分{{
            EnergyReportInfo.consumptionAlgorithmScore
          }}分。
        </p>
      </div>
      <div class="energyReport-summarize-div">
        <h1 class="energyReport-summarize-div-h1">节能改造措施:</h1>
        <p v-if=" EnergyReportInfo.conservationRenovation || EnergyReportInfo.conservationAlgorithmScore " class=".energyReport-summarize-div-p" >
          <span v-if="EnergyReportInfo.conservationRenovation">
            贵单位已实施的节能改造项目涵盖{{ EnergyReportInfo.conservationRenovation }}，
          </span> 
          <span v-else>贵单位未实施节能改造项目，</span>
          评定得分{{ EnergyReportInfo.conservationAlgorithmScore }}分。
        </p>
        <p v-else>贵单位无相关节能改造措施，评定不得分。</p>
        <!-- <p v-else>{{ EnergyReportInfo.conservationScoreNull }}</p> -->
        <br>
        <p>注：各个维度满分为100分。</p>
      </div>
    </div>
    <div class="summarize-btn" style="display:none">
      <div class="summarize-btn-div">推荐案例 3</div>
      <div class="summarize-btn-div">推荐案例 2</div>
      <div class="summarize-btn-div">推荐案例 1</div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  props: ['radarOption', 'EnergyReportInfo'],
  mounted() {
    this.$nextTick(ele => {
      this.createRadarChart()   
    })
  },
  computed: {
    renjun () {
      if (this.EnergyReportInfo.EnergyConsumeSituation) {
        let yibiaopan = this.EnergyReportInfo.EnergyConsumeSituation ? JSON.parse(this.EnergyReportInfo.EnergyConsumeSituation) : {}
        return JSON.stringify(yibiaopan.peopleQuota) === '{}'? false : true 
      }
    }
  },
  methods: {
    // 雷达图
    createRadarChart() {
      let that = this
      let radarChart = document.querySelector('.radarChart')
      let myChart = this.$echarts.init(radarChart)
      myChart.setOption(this.radarOption)
      myChart.on('click', function(params) {
        if (params.name == '清洁能源利用') {
          that.$router.push('/cleanEnery')
        }
        if (params.name == '主要设备水平') {
          that.$router.push('/device')
        }
        if (params.name == '能源管理措施') {
          that.$router.push('/manage')
        }
        if (params.name == '节能改造措施') {
          that.$router.push('/transform')
        }
        if (params.name == '能耗定额指标') {
          that.$router.push('/energquota')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.energyReport-bar {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  .bar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 17px;
    img {
      // height: 10px;
      width: 100px !important;
    }
    .bar-title-color {
      // margin: 0 10px;

      // width: 280px;
      color: #146660;
      font-size: 15px;
    }
  }
  .wholeAlgorithmScore {
    color: #4d4d4d;
  }
  .radarChart {
    margin-top: 10px;
    margin-left: 15px;
    width: 300px;
    height: 220px;
  }
  .summarize {
    display: flex;
    .summarize-img {
      height: 20px;
      width: 30px;
    }
    .summarize-h1 {
      color: #10968b;
      margin-left: 10px;
      font-size: 15px;
    }
  }
  .energyReport-summarize {
    background-color: #f2f8f8;
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    .energyReport-summarize-div {
      margin: 0px 0 10px 0;
      .energyReport-summarize-div-h1 {
        margin: 0 0 10px 0;
        color: #4d4d4d;
      }
      .energyReport-summarize-div-p {
        color: #989899;
      }
    }
    .energyReport-summarize-div:nth-last-child(1) {
      margin: 0;
    }
  }
  .summarize-btn {
    display: flex;
    flex-direction: row-reverse;
    margin: 15px 0;
    .summarize-btn-div {
      border: 1px solid #10968b;
      background-color: #10968b;
      padding: 5px;
      box-sizing: border-box;
      margin-left: 10px;
      color: #fff;
    }
  }
}
</style>