energy_app/src/views/comment/components/cleanEnery.vue

<template>
  <div class="cleanenerg">
    <!-- <reportHeader v-if="show" title="清洁能源利用"></reportHeader> -->
    <div class="cleanenerg-style">
      <div class="cleanenerg-title">
        <img src="@/assets/energyReport-left.png" alt="" />
        <div class="cleanenerg-title-color">清洁能源利用</div>
        <img src="@/assets/energyReport-right.png" alt="" />
      </div>
      <div>
        清洁能源是实现“双碳”目标的重要措施之一，根据现场调研，贵单位目前已利用的清洁能源：{{ EnergyReportInfo.cleanEnergyType }}。
      </div>
      <div class="cleanenerg-samll-title">
        <img class="cleanenerg-img" src="@/assets/manage-img.png" alt="" />
        <h1>光伏发电</h1>
      </div>
      <div
        v-if="
          EnergyReportInfo.photovoltaicNum ||
            EnergyReportInfo.photovoltaicArea ||
            EnergyReportInfo.energyPv ||
            EnergyReportInfo.actualPowerEfficiency
        "
      >
        贵单位总装机量为{{ EnergyReportInfo.photovoltaicNum }}千瓦,安装面积为{{ EnergyReportInfo.photovoltaicArea }}平方米，年发电量为{{ EnergyReportInfo.energyPv }}千瓦时。
      </div>
      <div v-else>无相关光伏发电的应用。</div>
      <div class="cleanenerg-samll-title">
        <img class="cleanenerg-img" src="@/assets/manage-img.png" alt="" />
        <h1>热泵</h1>
      </div>
      <div v-if="EnergyReportInfo.applyType">
        热泵是一种充分利用低品位热能的高效节能装置，贵单位主要应用于{{ EnergyReportInfo.applyType }}
      </div>
      <div v-else>无相关热泵的应用。</div>
      <div class="cleanenerg-samll-title">
        <img class="cleanenerg-img" src="@/assets/manage-img.png" alt="" />
        <h1>太阳能热水</h1>
      </div>
      <div v-if="EnergyReportInfo.solarWater">
        主要应用于{{ EnergyReportInfo.solarWater }}
      </div>
      <div v-else>无相关太阳能热水的应用。</div>
      <div class="cleanenerg-samll-title">
        <img class="cleanenerg-img" src="@/assets/manage-img.png" alt="" />
        <h1>可再生水</h1>
      </div>
      <div v-if="EnergyReportInfo.reclaimedWater">
        贵单位已对{{ EnergyReportInfo.reclaimedWater }}进行再循环利用。
      </div>
      <div v-else>无相关可再生水的应用</div>
      <div class="cleanenerg-samll-title">
        <img class="cleanenerg-img" src="@/assets/manage-img.png" alt="" />
        <h1>绿电交易</h1>
      </div>
      <div>贵单位{{ EnergyReportInfo.greenElectricityTrading }}绿电交易。</div>
    </div>
    <div class="cleanenerg-footer">
      <div class="cleanenerg-samll-title samll-title-fx">
        <img class="cleanenerg-img1" src="@/assets/summarize.png" alt="" />
        <h1>诊断分析</h1>
      </div>
      <div class="cleanenerg-footer-text">
        通过现场调研及数据分析，整体清洁能源的利用水平{{ EnergyReportInfo.utilizationLevel }}
      </div>
      <div class="cleanenerg-samll-title">
        <img class="cleanenerg-img1" src="@/assets/summarize.png" alt="" />
        <h1>提升方案</h1>
      </div>
      <div class="cleanenerg-footer-text">
        建议贵单位根据建筑特性及环境特征，加强{{ EnergyReportInfo.cleanEnergyStrengthen }}清洁能源的综合利用，从而实现建筑整体能效的大幅提升。
      </div>
    </div>
  </div>
</template>

<script>
// import reportHeader from './report-header.vue'
import { mapState,mapMutations } from 'vuex'
import { setTitle } from '@/utils/dsbridge.js'
import { Notify } from 'vant'
import { getLoginCustomerAPI,getReport } from '@/api/energyReport.js'

export default {
  // components: { reportHeader },
  created() {
    setTitle('清洁能源利用')
    this.getEnergyReportInfo()

  },
  data() {
    return {
      // EnergyReportInfo: {}
    }
  },
  computed: {
    ...mapState('report', ['EnergyReportInfo']),
    show() {
      return localStorage.getItem('show') == 'true'
    }
  },
  methods: {
    ...mapMutations('report', ['setEnergyReportInfo']),

     //不同角色，不同id传参不同
    getEnergyReportInfo() {
      const level = sessionStorage.getItem('level')
      // this.energyData = JSON.parse(sessionStorage.getItem('tidCid'))
        if(level != 2) {
          this.getLoginCustomer()
        }
    },
    // getLoginCustomerAPI获取登录客户信息
    async getLoginCustomer() {
      this.loading2 = true
      try {
        let reportCustomerId = localStorage.getItem('reportCustomerId')
        if(reportCustomerId&&this.$route.name=='energyReport'){
          return
        }
        const res = await getLoginCustomerAPI()
        // console.log(res.data.customerId);
        if (res.code == 0) {
          localStorage.setItem('reportCustomerId', res.data.customerId)
          const data = {
            customerId: res.data.customerId, 
            ai: this.$route.query.ai? this.$route.query.ai: sessionStorage.getItem('saikey')
          }
          this.getReport(data)
        } else {
          Notify({ type: 'danger', message: res.msg })
        }
      }
      finally{
        this.loading2 = false
      }
      
    },
    //客户角色调用此接口
    async getReport(data) {
      this.loading2 = true
      const res = await getReport(data)
      try {
        if(res.code == 0) {
          this.saveData(res)
        } else {
            Notify({ type: 'danger', message: res.msg })
        }
        // this.getTime()

      } finally{
        this.loading2 = false
      }
      
    },
    //数据保存
    saveData(res) {
      // this.EnergyReportInfo = res.data
      this.setEnergyReportInfo(res.data)
      // localStorage.setItem('show', true)
    },
  },
}
</script>

<style scoped lang="less">
.cleanenerg {
  background-color: #f5f5f5;
  .cleanenerg-style {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 0.266667rem;
    .cleanenerg-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
      margin-bottom: 17px;
      img {
        // height: 10px;
        width: 100px!important;
      }
      .cleanenerg-title-color {
        // width: 280px;
        color: #146660;
        font-size: 15px;
      }
    }
    .cleanenerg-samll-title {
      margin: 10px 0;
      display: flex;
      .cleanenerg-img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
  .cleanenerg-footer {
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.266667rem;
    .cleanenerg-samll-title,
    .samll-title-fx {
      margin: 10px 0;
      display: flex;
      .cleanenerg-img {
        width: 10px;
        height: 20px;
        margin-right: 10px;
      }
      .cleanenerg-img1 {
        width: 30px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .samll-title-fx {
      margin-top: 0;
    }
    .cleanenerg-footer-text {
      background-color: #f5f5f5;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
  }
}
</style>