energy_app/src/views/industrialReport/components/universal.vue

<template>
  <div class="universal">
    <div class="universal-content">
      <commonTitle title="通用能源系统能效"></commonTitle>
      <div class="device-div">
        <img class="device-img1" src="@/assets/summarize.png" alt="" />
        <h1>通用能源系统</h1>
      </div>
      <!-- 配电系统 -->
      <div class="device-table" v-if="EnergyReportInfo.existDistributeSystem == 'true'">
        <div class="device-table-header">配电系统</div>
        <div class="device-table-main">
          <div class="main-title">配电系统型号</div>
          <div class="main-value">
            <div v-if="EnergyReportInfo.distributeSystemType">
              <p v-for="(item, index) in EnergyReportInfo.distributeSystemType.split(',')" :class="{'is-center': EnergyReportInfo.distributeSystemType.indexOf(',')==-1}">
                <span v-if="EnergyReportInfo.distributeSystemType.indexOf(',')>-1">{{index+1 }}、</span>{{ item }}
              </p>
            </div>
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">能效水平</div>
          <div class="main-value">
            {{ EnergyReportInfo.distributeSystemLevel }}
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰变压器</div>
          <div class="main-value">
            {{ EnergyReportInfo.distributeSystemByqNum }} 台
          </div>
        </div>
      </div>
      <!-- 泵系统 -->
      <div class="device-table" v-if="EnergyReportInfo.existPumpSystem == 'true'">
        <div class="device-table-header">泵机系统</div>
        <div class="device-table-main">
          <div class="main-title">泵机系统型号</div>
          <div class="main-value">
            <div v-if="EnergyReportInfo.pumpSystemType">
              <p v-for="(item, index) in EnergyReportInfo.pumpSystemType.split(',')" :class="{'is-center': EnergyReportInfo.pumpSystemType.indexOf(',')==-1}">
                <span v-if="EnergyReportInfo.pumpSystemType.indexOf(',')>-1">{{index+1 }}、</span>{{ item }}
              </p>
            </div>
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">能效水平</div>
          <div class="main-value">
            {{ EnergyReportInfo.pumpSystemLevel }}
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰电机</div>
          <div class="main-value">
            {{ EnergyReportInfo.pumpSystemDjNum }} 台
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰泵机</div>
          <div class="main-value">
            {{ EnergyReportInfo.pumpSystemBjNum }} 台
          </div>
        </div>
      </div>
      <!-- 风机系统 -->
      <div class="device-table" v-if="EnergyReportInfo.existFanSystem == 'true'">
        <div class="device-table-header">风机系统</div>
        <div class="device-table-main">
          <div class="main-title">风机系统型号</div>
          <div class="main-value">
            <div  v-if="EnergyReportInfo.fanSystemType">
              <p v-for="(item, index) in EnergyReportInfo.fanSystemType.split(',')" :class="{'is-center': EnergyReportInfo.fanSystemType.indexOf(',')==-1}">
                <span v-if="EnergyReportInfo.fanSystemType.indexOf(',')>-1">{{index+1 }}、</span>{{ item }}
              </p>
            </div>
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">能效水平</div>
          <div class="main-value">{{ EnergyReportInfo.fanSystemLevel }}</div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰电机</div>
          <div class="main-value">{{ EnergyReportInfo.fanSystemDjNum }} 台</div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰风机</div>
          <div class="main-value">{{ EnergyReportInfo.fanSystemBjNum }} 台</div>
        </div>
      </div>
      <!-- 空压机系统 -->
      <div class="device-table" v-if="EnergyReportInfo.existAirSystem == 'true'">
        <div class="device-table-header">空压机系统</div>
        <div class="device-table-main">
          <div class="main-title">空压机系统型号</div>
          <div class="main-value">
            <div v-if="EnergyReportInfo.airSystemType">
              <p v-for="(item, index) in EnergyReportInfo.airSystemType.split(',')" :class="{'is-center': EnergyReportInfo.airSystemType.indexOf(',')==-1}">
              <span v-if="EnergyReportInfo.airSystemType.indexOf(',')>-1">{{index+1 }}、</span>{{ item }}
              </p>
            </div>
          </div>
        </div>
        <div class="device-table-main">
          <div class="main-title">能效水平</div>
          <div class="main-value">{{ EnergyReportInfo.airSystem }}</div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰空压机</div>
          <div class="main-value">{{ EnergyReportInfo.airSystemDjNum }} 台</div>
        </div>
        <div class="device-table-main">
          <div class="main-title">具有淘汰电机</div>
          <div class="main-value">
            {{ EnergyReportInfo.airSystemKyjNum }} 台
          </div>
        </div>
      </div>
      <!-- 诊断分析 -->
      <div class="device-div">
        <img class="device-img1" src="@/assets/summarize.png" alt="" />
        <h1>诊断分析</h1>
      </div>
      <div class="refrom-box" v-if="EnergyReportInfo.MainGeneralEnergySystems">
        总体分析,贵单位主要通用能源系统{{
          EnergyReportInfo.MainGeneralEnergySystems
        }}可提升空间，建议通过节能改造措施，加强日常运行管理等提升企业通用能源系统能效水平。
      </div>
    </div>
  </div>
</template>

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

export default {
  components: { commonTitle },
   created() {
    setTitle('通用能源系统能效')
    this.userLevel()

  },
  computed: {
    ...mapState('report', ['EnergyReportInfo'])
  },
  methods: {
    ...mapMutations('report', ['setEnergyReportInfo']),
    //判断是否是客户还是客户经理
    userLevel() {
      this.level = sessionStorage.getItem('level')
      if(this.level != 2) {
        this.getLoginCustomer()
      } 
    },
    // getLoginCustomerAPI获取登录客户信息
    async getLoginCustomer() {
      this.loading2 = true
      try {
        let reportCustomerId = localStorage.getItem('reportCustomerId')
        if(reportCustomerId&&this.$route.name=='fullreport'){
          return
        }
        const res = await getLoginCustomerAPI()
        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 {
          this.flag = false
          Notify({ type: 'danger', message: res.msg })
        }

      } finally{
        this.loading2 = false
      }
      
    },
    // 保存数据
    saveData(res) {
      this.setEnergyReportInfo(res.data)
    },
  },
}
</script>

<style scoped lang="less">

.universal {
  padding: 10px;
  box-sizing: border-box;
  .universal-content {
    background-color: #fff;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;
    .device-div {
      margin: 10px 0;
      display: flex;
      h1 {
        color: #40aba2;
      }
      .device-img1 {
        width: 30px;
        height: 20px;
        margin-right: 10px;
      }
    }
    .device-div:last-child {
      margin-top: 20px;
    }
    .device-table {
      flex: 1;
      margin-top: 10px;
      .device-table-header {
        text-align: center;
        color: #b5dfdd;
        background-color: #40aba2;
        padding: 5px 10px;
        box-sizing: border-box;
      }

      .device-table-main {
        display: flex;
        text-align: center;
        box-sizing: border-box;

        box-sizing: border-box;
        color: #9c9c9c;
        .main-title {
          flex: 0.4;
          border-left: 1px solid #40aba2;
          border-right: 1px solid #40aba2;
          border-bottom: 1px solid #40aba2;
          padding: 5px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .main-value {
          flex: 0.6;
          border-right: 1px solid #40aba2;
          border-bottom: 1px solid #40aba2;
          padding: 5px;
          box-sizing: border-box;
          p{
            text-align: left;
            word-break: break-all;
          }
          .is-center{
            text-align: center;
          }
        }
      }
    }
    .refrom-box {
      line-height: 21px;
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 5px;
      box-sizing: border-box;
    }
  }
}
</style>