能效诊断
This commit is contained in:
jiangyinzhi
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="anchor-point">
|
||||
<div class="border"></div>
|
||||
<div class="anchor-content">
|
||||
<div
|
||||
v-for="item in anchorList"
|
||||
:key="item.id"
|
||||
:class="item.body == anchor ? 'checked' : 'dischecked'"
|
||||
@click="handleClick(item.body)"
|
||||
>
|
||||
<span :id="item.id">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
anchor: '.energyReport-bar',
|
||||
anchorList: [
|
||||
{
|
||||
id: '1',
|
||||
body: '.energyReport-bar',
|
||||
value: '综合评定'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
body: '.energyReport-quota',
|
||||
value: '能耗定额'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
body: '.manage',
|
||||
value: '能源管理措施'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
body: '.device',
|
||||
value: '主要设备水平'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
body: '.cleanenerg',
|
||||
value: '清洁能源利用'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
body: '.tarnsform',
|
||||
value: '节能改造措施'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.anchor = e
|
||||
document.querySelector(e).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
inline: 'nearest'
|
||||
})
|
||||
},
|
||||
checkoutAnchor(e) {
|
||||
this.anchor = e
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-point {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.border {
|
||||
position: absolute;
|
||||
// width:100%;
|
||||
height: 50%;
|
||||
top: 23%;
|
||||
left: 50%;
|
||||
border-left: 1px dashed #0660af;
|
||||
z-index: 900;
|
||||
}
|
||||
.anchor-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.checked {
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 1px;
|
||||
border: 1px solid #4db99f;
|
||||
border-radius: 50%;
|
||||
background-color: #4db99f;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.dischecked {
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 1px;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 50%;
|
||||
background-color: #d4d4d4;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="anchor-point">
|
||||
<div class="border"></div>
|
||||
<div class="anchor-content">
|
||||
<div
|
||||
v-for="item in anchorList"
|
||||
:key="item.id"
|
||||
:class="item.body == anchor ? 'checked' : 'dischecked'"
|
||||
@click="handleClick(item.body)"
|
||||
>
|
||||
<span :id="item.id">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
anchor: '.device',
|
||||
anchorList: [
|
||||
{
|
||||
id: '0',
|
||||
body: '.device',
|
||||
value: '空调系统'
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
body: '.heating-system',
|
||||
value: '采暖系统'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
body: '.lighting-system',
|
||||
value: '照明系统'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
body: '.distributing-system',
|
||||
value: '配电系统'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
body: '.hotwator-system',
|
||||
value: '生活热水系统'
|
||||
}
|
||||
// {
|
||||
// id: "5",
|
||||
// body: ".cleanenerg",
|
||||
// value: "清洁能源利用"
|
||||
// },
|
||||
// {
|
||||
// id: "6",
|
||||
// body: ".tarnsform",
|
||||
// value: "节能改造措施"
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.anchor = e
|
||||
document.querySelector(e).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
inline: 'nearest'
|
||||
})
|
||||
},
|
||||
checkoutAnchor(e) {
|
||||
this.anchor = e
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-point {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.border {
|
||||
position: absolute;
|
||||
// width:100%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
border-left: 1px dashed #0660af;
|
||||
z-index: 900;
|
||||
}
|
||||
.anchor-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.checked {
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 1px;
|
||||
border: 1px solid #4db99f;
|
||||
border-radius: 50%;
|
||||
background-color: #4db99f;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.dischecked {
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 1px;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 50%;
|
||||
background-color: #d4d4d4;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<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 {
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,218 @@
|
||||
<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>注：各个维度满分为5分。</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>
|
||||
|
||||
@@ -0,0 +1,984 @@
|
||||
<template>
|
||||
<div class="energyReport-template">
|
||||
<!-- <reportHeader v-if="show" title="能耗定额指标"></reportHeader> -->
|
||||
<div class="energyReport-quota">
|
||||
<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="quota">
|
||||
<div class="quota-div">
|
||||
<img class="quota-img" src="@/assets/summarize.png" alt="" />
|
||||
<h1>能源消耗量</h1>
|
||||
</div>
|
||||
<!-- 柱状图 -->
|
||||
<div class="barChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标准折算煤及占比饼图 -->
|
||||
<div class="sameStyle">
|
||||
<div class="sameStyle-div">
|
||||
<img class="sameStyle-img" src="@/assets/summarize.png" alt="" />
|
||||
<h1>标准折算煤及占比</h1>
|
||||
</div>
|
||||
<div class="pieChart"></div>
|
||||
</div>
|
||||
<!-- 电源消耗量折线图 -->
|
||||
<div class="lineChartStyle">
|
||||
<div class="lineChartStyle-div">
|
||||
<img class="lineChartStyle-img" src="@/assets/summarize.png" alt="" />
|
||||
<h1>电能消耗量</h1>
|
||||
</div>
|
||||
<div class="lineChart"></div>
|
||||
<div class="lineChart-detail">
|
||||
<h1>用能情况分析:</h1>
|
||||
<div>
|
||||
贵单位消耗的主要能源种类为：{{
|
||||
EnergyReportInfo.buildEnergyType
|
||||
}}。近1年建筑能源消耗折合标煤{{
|
||||
EnergyReportInfo.standardCoal
|
||||
}}吨折煤，其中（电折合标煤量{{
|
||||
EnergyReportInfo.standardCoalPower
|
||||
}}吨折煤、燃气折合{{
|
||||
EnergyReportInfo.standardCoalGas
|
||||
}}吨折煤、柴油折合{{
|
||||
EnergyReportInfo.standardCoalDieselGas
|
||||
}}吨折煤），统计期电能折合标煤量约占总能耗的{{
|
||||
EnergyReportInfo.standardCoalConsumption
|
||||
}}%。购电方式为{{ EnergyReportInfo.purchasePower }}，{{
|
||||
EnergyReportInfo.basicCharge
|
||||
}}基本电费，{{ EnergyReportInfo.valleyElectricityPrices }}峰谷平电价。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lineChart-both" v-if="EnergyConsumeSituation">
|
||||
<div class="lineChart-box" style="flex: 1">
|
||||
<div class="lineChart-both-div">
|
||||
<div>引导值:{{ EnergyConsumeSituation.buildQuota.guideValue }}</div>
|
||||
<div>基准值:{{ EnergyConsumeSituation.buildQuota.baseValue }}</div>
|
||||
<div>约束值:{{ EnergyConsumeSituation.buildQuota.constraintValue }}</div>
|
||||
</div>
|
||||
<div class="bothPie1">
|
||||
<div class="bothPiefirst" style="width: 170px; height: 100px"></div>
|
||||
<img class="bothPie1-img1" src="@/assets/能耗定额4.png" alt="" />
|
||||
<img class="bothPie1-img2" src="@/assets/能耗定额2.png" alt="" />
|
||||
<img class="bothPie1-img3" src="@/assets/能耗定额3.png" alt="" />
|
||||
<img class="bothPie1-img4" src="@/assets/能耗定额5.png" alt="" />
|
||||
<div class="lineChart-both-text">单位面积能耗定额</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="lineChart-box"
|
||||
style="flex: 1"
|
||||
v-if="hidePerquotaRange == false"
|
||||
>
|
||||
<div class="lineChart-both-div">
|
||||
<div>
|
||||
引导值:{{ EnergyConsumeSituation.peopleQuota.guideValue }}
|
||||
</div>
|
||||
<div>基准值:{{ EnergyConsumeSituation.peopleQuota.baseValue }}</div>
|
||||
<div>
|
||||
约束值:{{ EnergyConsumeSituation.peopleQuota.constraintValue }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bothPie1" v-if="situation">
|
||||
<div
|
||||
class="bothPiesecond"
|
||||
style="width: 170px; height: 100px"
|
||||
></div>
|
||||
<!-- <van-circle
|
||||
v-model="currentRate1"
|
||||
:rate="currentRate1"
|
||||
:clockwise="false"
|
||||
:speed="100"
|
||||
size="150px"
|
||||
color="#eac166"
|
||||
layer-color="#ebedf0"
|
||||
:text="text1"
|
||||
/> -->
|
||||
<img class="bothPie1-img1" src="@/assets/能耗定额4.png" alt="" />
|
||||
<img class="bothPie1-img2" src="@/assets/能耗定额2.png" alt="" />
|
||||
<img class="bothPie1-img3" src="@/assets/能耗定额3.png" alt="" />
|
||||
<img class="bothPie1-img4" src="@/assets/能耗定额5.png" alt="" />
|
||||
<div class="lineChart-both-text">人均能耗定额</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 贵单位属于{{
|
||||
EnergyReportInfo.buildName
|
||||
}}建筑 -->
|
||||
<div class="lineChartStyle-end">
|
||||
<span v-if="false">{{ EnergyReportInfo.buildName }}</span>
|
||||
根据定额计算，贵单位属于{{ EnergyReportInfo.buildName }}，单位面积能耗定额为{{ EnergyReportInfo.energyConsumptionQuota }}千克折煤/平方米，{{ EnergyReportInfo.areaquotaRange }}。
|
||||
<span v-if="renjun" >人均能耗定额为{{ EnergyReportInfo.perConsumptionQuota }} 千克折煤/人，{{ EnergyReportInfo.perquotaRange }}。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import * as echarts from 'echarts'
|
||||
// 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 {
|
||||
data() {
|
||||
return {
|
||||
// 柱状图配置项
|
||||
barOption: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
legend: {
|
||||
itemStype: {
|
||||
borderWidth: 1.5,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 90,
|
||||
x: 60,
|
||||
x2: 40,
|
||||
y2: 40,
|
||||
bottom: 25,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
name: '',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
// formatter: function(BarData) {
|
||||
// console.log(this.barOption.xAxis.data, );
|
||||
// },
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
// 折线图配置项
|
||||
lineOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
type: 'plain',
|
||||
right: 0,
|
||||
top: 10,
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: '#939393',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: '#939393',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
top: '50', // 一下数值可为百分比也可为具体像素值
|
||||
right: '5',
|
||||
bottom: '50',
|
||||
left: '50',
|
||||
},
|
||||
color: ['#007bfd', '#0dc7bc'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0, //X轴数据太多，全部显示
|
||||
color: '#707070',
|
||||
fontSize: 11,
|
||||
},
|
||||
data: [],
|
||||
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#707070',
|
||||
fontSize: 11,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: ['#e2e5e7'],
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// data: [150, 230, 224, 218, 135, 147, 260],
|
||||
data: [],
|
||||
type: 'line',
|
||||
name: '电',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
// data: [200, 280, 274, 268, 185, 197, 310],
|
||||
data: [],
|
||||
type: 'line',
|
||||
name: '光伏',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
// 饼图配置项
|
||||
pieOption: {
|
||||
// color:['#FFBD1C','#13C2C2','#267CFF','#FF8C16','#13C2C2'],
|
||||
title: {
|
||||
left: '26%',
|
||||
top: '47%',
|
||||
subtext: "总标煤量",
|
||||
subtextStyle: {
|
||||
color: '#000',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// formatter: '37'
|
||||
// },
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '-5px',
|
||||
top: '30px',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['30%', '40%'],
|
||||
center: ['36%', '55%'],
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: 0, // 指示线长度
|
||||
length2: 10,
|
||||
lineStyle: {
|
||||
// color: '#595959', // 指示线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: ['{d}%', '{c}吨折煤'].join('\n'),
|
||||
},
|
||||
// data: []
|
||||
data: [
|
||||
// 各分区样式: value值，name模块文字、itemStyle模块样式
|
||||
{
|
||||
value: 40,
|
||||
name: '20% \n 2000标准煤',
|
||||
itemStyle: { color: '#FFBD1C' },
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
name: '25% \n 2500标准煤',
|
||||
itemStyle: { color: '#13C2C2' },
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
name: '20% \n 2000标准煤',
|
||||
itemStyle: { color: '#267CFF' },
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
name: '15% \n 1500标准煤',
|
||||
itemStyle: { color: '#FF8C16' },
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '20% \n 2000标准煤',
|
||||
itemStyle: { color: '#13C2C2' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 扇形图1
|
||||
bothPie1Option: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
title: {
|
||||
text: '112',
|
||||
x: 'center',
|
||||
// top:'50%'
|
||||
y: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
// adjust the start angle
|
||||
startAngle: 225,
|
||||
endAngle: -45,
|
||||
min: 0,
|
||||
max: 100,
|
||||
label: {
|
||||
show: false,
|
||||
formatter(param) {
|
||||
// correct the percentage
|
||||
return param.name + ' (' + param.percent * 2 + '%)'
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' },
|
||||
{
|
||||
// make an record to fill the bottom 50%
|
||||
value: 580 + 484 + 300,
|
||||
itemStyle: {
|
||||
// stop the chart from rendering this piece
|
||||
color: '',
|
||||
decal: {
|
||||
symbol: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 扇形图2
|
||||
bothPie2Option: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
title: {
|
||||
text: '112',
|
||||
x: 'center',
|
||||
// top:'50%'
|
||||
y: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
// adjust the start angle
|
||||
startAngle: 225,
|
||||
min: 0,
|
||||
max: 100,
|
||||
label: {
|
||||
show: false,
|
||||
formatter(param) {
|
||||
// correct the percentage
|
||||
return param.name + ' (' + param.percent * 2 + '%)'
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' },
|
||||
{
|
||||
// make an record to fill the bottom 50%
|
||||
value: 580 + 484 + 300,
|
||||
itemStyle: {
|
||||
// stop the chart from rendering this piece
|
||||
color: '',
|
||||
decal: {
|
||||
symbol: 'none',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTitle('能耗定额指标')
|
||||
this.getEnergyReportInfo()
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState('report', ['EnergyReportInfo']),
|
||||
// eslint-disable-next-line vue/return-in-computed-property
|
||||
renjun () {
|
||||
if (this.EnergyConsumeSituation) {
|
||||
return JSON.stringify(this.EnergyConsumeSituation.peopleQuota) === '{}'? false : true
|
||||
}
|
||||
},
|
||||
|
||||
// EnergyReportInfo() {
|
||||
// return JSON.parse(localStorage.getItem('EnergyReportInfo'))
|
||||
// },
|
||||
situation() {
|
||||
if (
|
||||
this.EnergyConsumeSituation.peopleQuota.baseValue &&
|
||||
this.EnergyConsumeSituation.peopleQuota.constraintValue &&
|
||||
this.EnergyConsumeSituation.peopleQuota.guideValue
|
||||
) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
hidePerquotaRange() {
|
||||
return JSON.parse(this.EnergyReportInfo.hidePerquotaRange)
|
||||
},
|
||||
EnergyConsumeSituation() {
|
||||
if (!this.EnergyReportInfo.EnergyConsumeSituation) {
|
||||
return false
|
||||
}
|
||||
return JSON.parse(this.EnergyReportInfo.EnergyConsumeSituation)
|
||||
},
|
||||
show() {
|
||||
return localStorage.getItem('show') === 'true'
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
var that = this
|
||||
var timer = setTimeout(function () {
|
||||
// 判断页面所有资源已加载完毕
|
||||
if (document.readyState === 'complete') {
|
||||
that.createChart()
|
||||
window.clearTimeout(timer)
|
||||
}
|
||||
}, 1000)
|
||||
// this.createChart()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('report', ['setEnergyReportInfo']),
|
||||
|
||||
// echarts图表赋值
|
||||
createChart() {
|
||||
// 柱状图配置
|
||||
// console.log(JSON.parse(res.data.energySituation));
|
||||
if (this.EnergyReportInfo?.energySituation) {
|
||||
this.barOption.xAxis.data = JSON.parse(this.EnergyReportInfo.energySituation).category
|
||||
let BarData = []
|
||||
JSON.parse(this.EnergyReportInfo.energySituation).series.map((v) => {
|
||||
BarData.push({
|
||||
data: v.dataList,
|
||||
name: v.name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
})
|
||||
})
|
||||
this.barOption.series = BarData
|
||||
this.barOption.tooltip = {
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
formatter:function(params){
|
||||
let str=''
|
||||
params.forEach(item => {
|
||||
if(item.seriesName == '电（千瓦时）'){
|
||||
str+=`${item.axisValue}<br />`
|
||||
str +=`电:${item.value}千瓦时<br />`
|
||||
}
|
||||
if(item.seriesName == '天然气（立方米）'){
|
||||
str += `天然气:${item.value}立方米<br />`
|
||||
}
|
||||
if(item.seriesName == '饱和蒸汽（吨）'){
|
||||
str += `饱和蒸汽:${item.value}吨<br />`
|
||||
}
|
||||
if(item.seriesName == '柴油（升）'){
|
||||
str += `柴油:${item.value}升<br />`
|
||||
}
|
||||
if(item.seriesName == '用水（吨）'){
|
||||
str += `用水:${item.value}吨<br />`
|
||||
}
|
||||
if(item.seriesName == '光伏（千瓦时）'){
|
||||
str += `光伏:${item.value}千瓦时<br />`
|
||||
}
|
||||
if(item.seriesName == '液化石油气（吨）'){
|
||||
str += `液化石油气:${item.value}吨<br />`
|
||||
}
|
||||
if(item.seriesName == '汽油（升）'){
|
||||
str += `汽油:${item.value}升<br />`
|
||||
}
|
||||
if(item.seriesName == '其他'){
|
||||
str += `其他:${item.value}<br />`
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
}
|
||||
console.log(this.barOption);
|
||||
this.createBarChart()
|
||||
}
|
||||
|
||||
// 折线图
|
||||
if (this.EnergyReportInfo.powerSituation) {
|
||||
const powerSituation = JSON.parse(this.EnergyReportInfo.powerSituation)
|
||||
if(powerSituation.category) {
|
||||
this.lineOption.xAxis.data = powerSituation.category
|
||||
}
|
||||
|
||||
if(powerSituation.series.length == 1 && powerSituation.series[0].name == '电' ) {
|
||||
this.lineOption.series[0].data = powerSituation.series[0].dataList
|
||||
this.lineOption.legend.data[0].name = powerSituation.series[0].name
|
||||
} else if(powerSituation.series.length == 1 && powerSituation.series[0].name == '光伏' ) {
|
||||
this.lineOption.series[1].data = powerSituation.series[1].dataList
|
||||
this.lineOption.legend.data[1].name = powerSituation.series[1].name
|
||||
|
||||
} else {
|
||||
this.lineOption.series[0].data = powerSituation.series.length !=0 ? powerSituation.series[0].dataList : []
|
||||
this.lineOption.series[1].data = powerSituation.series.length !=0 ? powerSituation.series[1].dataList : []
|
||||
this.lineOption.legend.data[0].name = powerSituation.series.length !=0 ? powerSituation.series[0].name : ''
|
||||
this.lineOption.legend.data[1].name = powerSituation.series.length !=0 ? powerSituation.series[1].name : ''
|
||||
|
||||
}
|
||||
this.createLineChart()
|
||||
}
|
||||
|
||||
// 环形图
|
||||
// console.log(JSON.parse(res.data.coalSituation));
|
||||
if (this.EnergyReportInfo?.coalSituation) {
|
||||
this.pieOption.series[0].data = JSON.parse(
|
||||
this.EnergyReportInfo.coalSituation
|
||||
)
|
||||
this.pieOption.series[0].type = 'pie'
|
||||
this.createPieChart()
|
||||
}
|
||||
// 扇形图
|
||||
if (this.EnergyReportInfo?.EnergyConsumeSituation) {
|
||||
let val = {}
|
||||
let data = []
|
||||
// 扇形图1
|
||||
if (this.EnergyConsumeSituation.buildQuota.constraintValue > this.EnergyConsumeSituation.buildQuota.buildQuotaSet) {
|
||||
val = {
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#ff7e51',
|
||||
},
|
||||
}
|
||||
data = [
|
||||
{
|
||||
value:
|
||||
(this.EnergyConsumeSituation.buildQuota.buildQuotaSet/this.EnergyConsumeSituation.buildQuota.constraintValue)*100,
|
||||
itemStyle: {
|
||||
color: '#54c2fa',
|
||||
},
|
||||
}
|
||||
]
|
||||
} else {
|
||||
val = {
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#54c2fa',
|
||||
},
|
||||
}
|
||||
data = [
|
||||
{
|
||||
value:
|
||||
(this.EnergyConsumeSituation.buildQuota.constraintValue/this.EnergyConsumeSituation.buildQuota.buildQuotaSet)*100,
|
||||
itemStyle: {
|
||||
color: '#ff7e51',
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
data.push(val)
|
||||
this.bothPie1Option.title.text =
|
||||
`${this.EnergyConsumeSituation.buildQuota.buildQuotaSet}\n${((this.EnergyConsumeSituation.buildQuota.buildQuotaSet/this.EnergyConsumeSituation.buildQuota.constraintValue)*100).toFixed(2)}%`
|
||||
this.bothPie1Option.series[0].data = data
|
||||
this.createBothPiefirst()
|
||||
// 扇形图2
|
||||
let val2 = {}
|
||||
let data2 = []
|
||||
if (this.EnergyConsumeSituation.peopleQuota.constraintValue > this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet) {
|
||||
val2 = {
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#ff7e51',
|
||||
},
|
||||
}
|
||||
data2 = [
|
||||
{
|
||||
value:
|
||||
(this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet/this.EnergyConsumeSituation.peopleQuota.constraintValue)*100,
|
||||
itemStyle: {
|
||||
color: '#54c2fa',
|
||||
},
|
||||
}
|
||||
]
|
||||
} else {
|
||||
val2 = {
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#54c2fa',
|
||||
},
|
||||
}
|
||||
data2 = [
|
||||
{
|
||||
value:
|
||||
(this.EnergyConsumeSituation.peopleQuota.constraintValue/this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet)*100,
|
||||
itemStyle: {
|
||||
color: '#ff7e51',
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
data2.push(val2)
|
||||
this.bothPie2Option.title.text =
|
||||
`${this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet}\n${((this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet/this.EnergyConsumeSituation.peopleQuota.constraintValue)*100).toFixed(2)}%`
|
||||
this.bothPie2Option.series[0].data = data2
|
||||
this.createBothPiesecond()
|
||||
}
|
||||
},
|
||||
// 柱状图
|
||||
createBarChart() {
|
||||
let barChart = document.querySelector('.barChart')
|
||||
let myChart = this.$echarts.init(barChart)
|
||||
myChart.setOption(this.barOption)
|
||||
},
|
||||
//饼图
|
||||
createPieChart() {
|
||||
let pieChart = document.querySelector('.pieChart')
|
||||
let myChart = this.$echarts.init(pieChart)
|
||||
myChart.setOption(this.pieOption)
|
||||
},
|
||||
//折线图
|
||||
createLineChart() {
|
||||
let lineChart = document.querySelector('.lineChart')
|
||||
console.log(this.lineOption);
|
||||
let myChart = this.$echarts.init(lineChart)
|
||||
myChart.setOption(this.lineOption)
|
||||
},
|
||||
//扇形图1
|
||||
createBothPiefirst() {
|
||||
let bothPie1 = document.querySelector('.bothPiefirst')
|
||||
let myChart = this.$echarts.init(bothPie1)
|
||||
myChart.setOption(this.bothPie1Option)
|
||||
},
|
||||
//扇形图2
|
||||
createBothPiesecond() {
|
||||
let bothPie2 = document.querySelector('.bothPiesecond')
|
||||
if (bothPie2) {
|
||||
let myChart = this.$echarts.init(bothPie2)
|
||||
myChart.setOption(this.bothPie2Option)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
//不同角色，不同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 {
|
||||
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)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.energyReport-template {
|
||||
background-color: #f5f5f5;
|
||||
.energyReport-quota {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
.bar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
img {
|
||||
// height: 10px;
|
||||
width: 100px !important;
|
||||
}
|
||||
.bar-title-color {
|
||||
// width: 280px;
|
||||
color: #146660;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.quota {
|
||||
.quota-div {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
.quota-img {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
color: #40aba2;
|
||||
}
|
||||
}
|
||||
.barChart {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sameStyle {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.sameStyle-div {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
.sameStyle-img {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
color: #40aba2;
|
||||
}
|
||||
}
|
||||
.pieChart {
|
||||
width: 9rem;
|
||||
height: 300px;
|
||||
margin-top: -30px;
|
||||
// margin-left: 10px;
|
||||
margin-bottom: -30px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.lineChartStyle {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.lineChartStyle-div {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
.lineChartStyle-img {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
color: #40aba2;
|
||||
}
|
||||
}
|
||||
.lineChart {
|
||||
width: 350px;
|
||||
height: 300px;
|
||||
margin-top: -30px;
|
||||
margin-left: -15px;
|
||||
margin-bottom: -30px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lineChart-detail {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
h1 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
}
|
||||
.lineChart-both {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.lineChart-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.lineChart-both-div {
|
||||
margin-left: 3px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
div {
|
||||
font-size: 13px;
|
||||
padding: 3px 2px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
div:nth-child(1) {
|
||||
background-color: #11b8ae;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
background-color: #265ea9;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
background-color: #ff7e51;
|
||||
}
|
||||
}
|
||||
.bothPie1 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.bothPie1-img1 {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 44px;
|
||||
z-index: 99;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.bothPie1-img2 {
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50px;
|
||||
}
|
||||
.bothPie1-img3 {
|
||||
width: 75px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 44px;
|
||||
}
|
||||
.bothPie1-img4 {
|
||||
width: 70px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.lineChart-both-text {
|
||||
color: #9bb6d4;
|
||||
}
|
||||
}
|
||||
|
||||
.bothPie2 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.bothPie2-img1 {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 44px;
|
||||
z-index: 99;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.bothPie2-img2 {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 36px;
|
||||
}
|
||||
.bothPie2-img3 {
|
||||
width: 122px;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 25px;
|
||||
}
|
||||
.bothPie2-img4 {
|
||||
width: 80px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.lineChart-both-text {
|
||||
color: #9bb6d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lineChartStyle-end {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <report-header v-if="show" title="能源管理措施"></report-header> -->
|
||||
<div class="manage-main">
|
||||
<div class="manage-title">
|
||||
<img src="@/assets/energyReport-left.png" alt="" />
|
||||
<div class="manage-title-color">能源管理措施</div>
|
||||
<img src="@/assets/energyReport-right.png" alt="" />
|
||||
</div>
|
||||
<div class="manage-start">
|
||||
<div class="manage-start-div">
|
||||
<div class="manage-start-img">
|
||||
<img
|
||||
v-if="isfinish(EnergyReportInfo.isBuildOrg)"
|
||||
src="@/assets/manage-no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else src="@/assets/manage-img.png" alt="" />
|
||||
<h1
|
||||
:class="[isfinish(EnergyReportInfo.isBuildOrg) ? 'manage-active' : '']"
|
||||
>
|
||||
组织机构
|
||||
</h1>
|
||||
</div>
|
||||
<div :class="[isfinish(EnergyReportInfo.isBuildOrg)? 'manage-active-text': 'manage-start-finish']">
|
||||
{{ EnergyReportInfo.isBuildOrg }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start-text">
|
||||
{{EnergyReportInfo.isBuildOrg}}能源管理团队负责日常能源管理的组织、监督、检查和协调工作。
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start">
|
||||
<div class="manage-start-div">
|
||||
<div class="manage-start-img">
|
||||
<img
|
||||
v-if="isfinish(EnergyReportInfo.isEntrust)"
|
||||
src="@/assets/manage-no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else src="@/assets/manage-img.png" alt="" />
|
||||
<h1
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isEntrust) ? 'manage-active' : ''
|
||||
]"
|
||||
>
|
||||
专业团队
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isEntrust)
|
||||
? 'manage-active-text'
|
||||
: 'manage-start-finish'
|
||||
]"
|
||||
>
|
||||
{{ EnergyReportInfo.isEntrust }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start-text">
|
||||
{{
|
||||
EnergyReportInfo.isEntrust
|
||||
}}专业团队对空调设备、动力设备等进行统一管理及维护保障。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="manage-start">
|
||||
<div class="manage-start-div">
|
||||
<div class="manage-start-img">
|
||||
<img
|
||||
v-if="isfinish(EnergyReportInfo.isLedger)"
|
||||
src="@/assets/manage-no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else src="@/assets/manage-img.png" alt="" />
|
||||
<h1
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isLedger) ? 'manage-active' : ''
|
||||
]"
|
||||
>
|
||||
台账管理
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isLedger)
|
||||
? 'manage-active-text'
|
||||
: 'manage-start-finish'
|
||||
]"
|
||||
>
|
||||
{{ EnergyReportInfo.isLedger }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start-text">
|
||||
{{ EnergyReportInfo.isLedger }}详细的用能设备台账进行统一管理。
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start">
|
||||
<div class="manage-start-div">
|
||||
<div class="manage-start-img">
|
||||
<img
|
||||
v-if="isfinish(EnergyReportInfo.isDailyCheck)"
|
||||
src="@/assets/manage-no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else src="@/assets/manage-img.png" alt="" />
|
||||
<h1
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isDailyCheck) ? 'manage-active' : ''
|
||||
]"
|
||||
>
|
||||
日常巡检
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isDailyCheck)
|
||||
? 'manage-active-text'
|
||||
: 'manage-start-finish'
|
||||
]"
|
||||
>
|
||||
{{ EnergyReportInfo.isDailyCheck }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start-text">
|
||||
{{
|
||||
EnergyReportInfo.isDailyCheck
|
||||
}}对建筑内主要用能设备进行日常点检及能源消耗记录统计工作。
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start">
|
||||
<div class="manage-start-div">
|
||||
<div class="manage-start-img">
|
||||
<img
|
||||
v-if="isfinish(EnergyReportInfo.energyPlatform)"
|
||||
src="@/assets/manage-no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else src="@/assets/manage-img.png" alt="" />
|
||||
<h1
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.energyPlatform) ? 'manage-active' : ''
|
||||
]"
|
||||
>
|
||||
能源管理平台
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.energyPlatform)
|
||||
? 'manage-active-text'
|
||||
: 'manage-start-finish'
|
||||
]"
|
||||
>
|
||||
{{ EnergyReportInfo.energyPlatform }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start-text">
|
||||
在建筑用能管理方面，贵单位{{ EnergyReportInfo.energyPlatform }}能源管控平台<span v-if="!(EnergyReportInfo.platformFeatures.split('')[0] == '未'||EnergyReportInfo.platformFeatures == '无')">，平台的功能包括具备{{ EnergyReportInfo.platformFeatures }}功能</span>。
|
||||
<span v-if="!(EnergyReportInfo.useEnergy == '无')">
|
||||
使用能源({{ EnergyReportInfo.useEnergy }})已经具备分项计量功能，用能单位能源计量器具配备{{ EnergyReportInfo.meterComplete }}。
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="manage-start">
|
||||
<div class="manage-start-div">
|
||||
<div class="manage-start-img">
|
||||
<img
|
||||
v-if="isfinish(EnergyReportInfo.isPublicize)"
|
||||
src="@/assets/manage-no-img.png"
|
||||
alt=""
|
||||
/>
|
||||
<img v-else src="@/assets/manage-img.png" alt="" />
|
||||
<h1 :class="[ isfinish(EnergyReportInfo.isPublicize) ? 'manage-active' : '' ]">
|
||||
节能宣传
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="[
|
||||
isfinish(EnergyReportInfo.isPublicize)
|
||||
? 'manage-active-text'
|
||||
: 'manage-start-finish'
|
||||
]"
|
||||
>
|
||||
{{ EnergyReportInfo.isPublicize }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage-start-text">
|
||||
{{
|
||||
EnergyReportInfo.isPublicize
|
||||
}}日常用能行为管理，如张贴随手关闭灯具、空调、门窗，冬夏季空调温度设定等节能标识，开展节能宣传活动。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 诊断分析/提升建议 -->
|
||||
<div class="suggest">
|
||||
<div class="suggest-same">
|
||||
<div class="suggest-div">
|
||||
<img class="suggest-img" src="@/assets/summarize.png" alt="" />
|
||||
<h1>诊断分析</h1>
|
||||
</div>
|
||||
<div class="suggest-text">
|
||||
贵单位能源管理措施{{EnergyReportInfo.measuresType}}、管理意识{{ EnergyReportInfo.awarenessType }}。
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggest-same">
|
||||
<div class="suggest-div">
|
||||
<img class="suggest-img" src="@/assets/summarize.png" alt="" />
|
||||
<h1>提升方案</h1>
|
||||
</div>
|
||||
<div class="suggest-text">
|
||||
<div>
|
||||
1.建议加强管理团队建设，重点落实{{EnergyReportInfo.implementation}}方面的建设，持续推进日常管理制度和措施的执行；
|
||||
</div>
|
||||
<div>
|
||||
2.建议{{EnergyReportInfo.recommendation}}能源管理平台的建设和应用，建立完善的能源计量管理体系，依托平台强大的数据统计和分析功能，为建筑整体能效诊断和提升提供支撑，提升建筑的精细化、科学化的管理水平；
|
||||
</div>
|
||||
<div>
|
||||
3.建议采用合同能源管理的合作模式进一步促进能源管理水平的提升。
|
||||
</div>
|
||||
</div>
|
||||
</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 {
|
||||
data() {
|
||||
return {
|
||||
dataDetail: {},
|
||||
// EnergyReportInfo: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTitle('能源管理措施')
|
||||
this.getEnergyReportInfo()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('report', ['setEnergyReportInfo']),
|
||||
|
||||
isfinish(val) {
|
||||
if (!val) return false
|
||||
return val.includes('未')
|
||||
},
|
||||
//不同角色，不同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 {
|
||||
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)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
show() {
|
||||
return localStorage.getItem('show') == 'true'
|
||||
},
|
||||
...mapState('report', ['EnergyReportInfo'])
|
||||
// EnergyReportInfo() {
|
||||
// return JSON.parse(localStorage.getItem('EnergyReportInfo'))
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.manage-main {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
.manage-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 700; // margin-bottom: 17px;
|
||||
img {
|
||||
// height: 10px;
|
||||
width: 100px !important;
|
||||
}
|
||||
.manage-title-color {
|
||||
// margin: 0 10px;
|
||||
// width: 280px;
|
||||
color: #146660;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.manage-start:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.manage-start {
|
||||
border-bottom: 1px dashed #80bdba;
|
||||
padding: 0.266667rem;
|
||||
box-sizing: border-box;
|
||||
.manage-start-div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.manage-start-img {
|
||||
display: flex;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
color: #16aea0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.manage-active {
|
||||
color: #fe5e4c;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.manage-start-finish {
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #22b2a5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.manage-active-text {
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #fe5e4c;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.manage-start-text {
|
||||
// margin-top: 10px;
|
||||
color: #4d4d4d;
|
||||
font-family: '微軟雅黑';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggest {
|
||||
margin-top: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.suggest-same {
|
||||
// margin-top: 10px;
|
||||
.suggest-div {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
.suggest-img {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.suggest-text {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.suggest-same:nth-child(1) {
|
||||
> .suggest-div {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-nav-bar :title="title" @click-left="onClickLeft" left-arrow />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.title);
|
||||
},
|
||||
methods: {
|
||||
// 返回
|
||||
onClickLeft() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep .van-icon-arrow-left {
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,712 @@
|
||||
<template>
|
||||
<div>
|
||||
<Loading :loading="loading2"/>
|
||||
|
||||
<div class="report">
|
||||
<!-- <van-nav-bar title="能效诊断报告" @click-left="onClickLeft" left-arrow>
|
||||
<template #right>
|
||||
</template>
|
||||
</van-nav-bar> -->
|
||||
<div class="energyReport-detail">
|
||||
<div class="detail1">公共建筑|公共机构</div>
|
||||
<div class="float-clear"></div>
|
||||
<div class="detail2">
|
||||
<div class="detail2-left">
|
||||
<div class="detail2-left-div1"><span>{{ EnergyReportInfo.reportYear }}</span></div>
|
||||
<!-- <div class="detail2-left-div2">
|
||||
{{ EnergyReportInfo.reportMonth }}月
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="detail2-right">
|
||||
<div class="detail2-right-top">
|
||||
<div :class="timeSelectShow == 2?'detail2-right-top-scholl c':'detail2-right-top-scholl d'">
|
||||
{{ EnergyReportInfo.customerName }}
|
||||
</div>
|
||||
|
||||
<!-- <van-dropdown-menu class="timeSelect" v-if="timeSelectShow" >
|
||||
<van-dropdown-item v-model="yearVal" :options="yearList" @change="handelChangeTime" />
|
||||
</van-dropdown-menu> -->
|
||||
<div class="detail2-right-top-reset" @click="generateReport" v-if="timeSelectShow">
|
||||
重新生成
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail2-right-bottom">
|
||||
用电户号：
|
||||
<div>{{ EnergyReportInfo.consNo }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="energyReport-info">
|
||||
<div class="detail-border">
|
||||
建筑类型：{{ EnergyReportInfo.buildType }}
|
||||
</div>
|
||||
<div class="energyReport-info-flex">
|
||||
<div class="detail-border">
|
||||
可利用屋面面积：{{ EnergyReportInfo.availableArea }}平方米
|
||||
</div>
|
||||
<div class="detail-border">
|
||||
用能人数：{{ EnergyReportInfo.peopleNum }}人
|
||||
</div>
|
||||
</div>
|
||||
<div class="energyReport-info-flex">
|
||||
<div class="detail-border">
|
||||
总建筑面积：{{ EnergyReportInfo.totalArea }}平方米
|
||||
</div>
|
||||
<div class="detail-border">
|
||||
建筑投运年代：{{ EnergyReportInfo.operationYear }}年
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="energyReport-address">
|
||||
<div class="energyReport-address-flex">
|
||||
<div v-if="EnergyReportInfo.distributeCapacity" class="address-border">
|
||||
额定容量：{{ EnergyReportInfo.distributeCapacity }}
|
||||
</div>
|
||||
<div v-if="EnergyReportInfo.voltageLevelName" class="address-border">
|
||||
电压等级：{{ EnergyReportInfo.voltageLevelName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="energyReport-address-border">
|
||||
详细地址：{{ EnergyReportInfo.detailAddress }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radarDetail">
|
||||
<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 }}分。{{ EnergyReportInfo.name}}
|
||||
</div>
|
||||
<!-- 建筑综合评定雷达图 -->
|
||||
<div class="radarChart"></div>
|
||||
</div>
|
||||
<!-- <div class="energyReport-navbar" ></div>/ -->
|
||||
<div class="footer-btn" @click="goEneryReport" v-if="isRouteEnergyReport">
|
||||
<div>完整报告</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading from '@/components/loading'
|
||||
import { genReport } from '@/api/api.js'
|
||||
import {
|
||||
getEnergyReportInfoAPI,
|
||||
getLoginCustomerAPI,
|
||||
getReportTimeListAPI,
|
||||
getReportByYear,
|
||||
getReport,
|
||||
energyQuotaTaskCalc
|
||||
} from '@/api/energyReport.js'
|
||||
import { pushWebviewVC } from '@/utils/dsbridge.js'
|
||||
|
||||
import { Notify } from 'vant'
|
||||
|
||||
// import * as echarts from 'echarts'
|
||||
import { mapMutations } from 'vuex'
|
||||
export default {
|
||||
components:{
|
||||
Loading
|
||||
},
|
||||
name:'report',
|
||||
data() {
|
||||
return {
|
||||
fromPath: '', //from路由
|
||||
timeShow: true, //报告时间
|
||||
yearVal: '',
|
||||
id: '',
|
||||
yearList: [],
|
||||
// 雷达图配置项
|
||||
radarOption: {
|
||||
radar: {
|
||||
radius: 65, //雷达图大小
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
indicator: [
|
||||
],
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: '#f5f5f5' // 图表背景的颜色
|
||||
}
|
||||
},
|
||||
name: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
backgroundColor: '#319e94',
|
||||
fontSize: 11,
|
||||
padding: 5,
|
||||
margin: [-10, -10],
|
||||
borderRadius: 50
|
||||
}
|
||||
},
|
||||
triggerEvent: true //点击事件
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
areaStyle: {
|
||||
color: '#58bfa9'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#34baae'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#34baae',
|
||||
shadowColor: '#58a7f5'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'bottom'
|
||||
},
|
||||
data: [
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
loading: false,
|
||||
loading2: false,
|
||||
taskType:'',
|
||||
EnergyReportInfo: {},
|
||||
//请求参数
|
||||
energyData: {
|
||||
taskId: '',
|
||||
customerId: '',
|
||||
// year: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
localStorage.removeItem('firstEnter')
|
||||
},
|
||||
computed: {
|
||||
timeSelectShow() {
|
||||
if(sessionStorage.getItem('level') == 2 && this.taskType != 5 && this.energyData.taskId && !this.EnergyReportInfo.handState && this.EnergyReportInfo.grsgState == '2') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
isRouteEnergyReport() {
|
||||
if(sessionStorage.getItem('level') == 2 ) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
next(vm => {
|
||||
vm.fromPath = from.name
|
||||
sessionStorage.setItem('fromPath', from.name)
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.level = sessionStorage.getItem('level')
|
||||
this.getEnergyReportInfo()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('report', ['setEnergyReportInfo']),
|
||||
|
||||
//不同角色，不同id传参不同
|
||||
getEnergyReportInfo() {
|
||||
const level = sessionStorage.getItem('level')
|
||||
if(level != 2) {
|
||||
this.getLoginCustomer()
|
||||
} else {
|
||||
this.energyData = JSON.parse(sessionStorage.getItem('tidCid'))
|
||||
this.taskType = JSON.parse(sessionStorage.getItem('tidCid')).taskType
|
||||
this.getEnergyReportInfoAPI()
|
||||
}
|
||||
},
|
||||
//通过id获取到当前id的详细信息
|
||||
async getEnergyReportInfoAPI() {
|
||||
this.loading2 = true
|
||||
if(this.energyData.item) {
|
||||
delete this.energyData.item
|
||||
}
|
||||
const res = await getEnergyReportInfoAPI(this.energyData)
|
||||
try {
|
||||
if (res.code == 0) {
|
||||
this.saveData(res)
|
||||
|
||||
} else {
|
||||
Notify({ type: 'danger', message: res.msg })
|
||||
}
|
||||
}
|
||||
finally{
|
||||
this.loading2 = false
|
||||
}
|
||||
|
||||
},
|
||||
//通过年份和客户id查询数据
|
||||
async getReportByYear() {
|
||||
this.loading2 = true
|
||||
try {
|
||||
const res = await getReportByYear(this.energyData)
|
||||
|
||||
if(res.code == 0) {
|
||||
this.saveData(res)
|
||||
} else {
|
||||
Notify({ type: 'danger', message: res.msg })
|
||||
}
|
||||
}
|
||||
finally {
|
||||
this.loading2 = false
|
||||
}
|
||||
|
||||
},
|
||||
//数据保存
|
||||
saveData(res) {
|
||||
this.EnergyReportInfo = res.data
|
||||
this.setEnergyReportInfo(res.data)
|
||||
// this.setEnergyReportInfo(res.data)
|
||||
// localStorage.setItem('reportId', this.$route.params.customerId)
|
||||
// localStorage.setItem('reportCustomerId',this.$route.params.customerId)
|
||||
// localStorage.setItem('reportTaskId',this.$route.params.taskId)
|
||||
localStorage.setItem('show', true)
|
||||
// 修改雷达图的radar里面的indicator
|
||||
if (res.data.evaluateSituation) {
|
||||
this.radarOption.radar.indicator = JSON.parse(res.data.evaluateSituation)['indicator']
|
||||
this.radarOption.series[0].data = []
|
||||
this.radarOption.series[0].data.push(JSON.parse(res.data.evaluateSituation)['seriesData'][0].dataList)
|
||||
this.createRadarChart()
|
||||
} else {
|
||||
this.radarOption.radar.indicator = []
|
||||
this.radarOption.series[0].data = []
|
||||
this.createRadarChart()
|
||||
}
|
||||
this.$toast.clear();
|
||||
// this.getTime()
|
||||
|
||||
},
|
||||
|
||||
// getLoginCustomerAPI获取登录客户信息
|
||||
async getLoginCustomer() {
|
||||
this.loading2 = true
|
||||
try {
|
||||
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
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 雷达图
|
||||
createRadarChart() {
|
||||
let that = this
|
||||
let radarChart = document.querySelector('.radarChart')
|
||||
let myChart = this.$echarts.init(radarChart)
|
||||
const ai = sessionStorage.getItem('saikey')
|
||||
const level = sessionStorage.getItem('level')
|
||||
myChart.setOption(this.radarOption)
|
||||
const path = process.env.VUE_APP_CITY_TYPE
|
||||
// 雷达图点击事件
|
||||
myChart.on('click', function(params) {
|
||||
if (params.name == '清洁能源利用') {
|
||||
if(level != 2) {
|
||||
const data = {
|
||||
fullUrl:`/proxy-${path}/effcicency/#/energyReport?ai=${ai}`,
|
||||
conciseUrl:`/proxy-${path}/effcicency/#/cleanEnery?ai=${ai}`
|
||||
}
|
||||
pushWebviewVC(data)
|
||||
} else {
|
||||
that.$router.push('/cleanEnery')
|
||||
}
|
||||
|
||||
}
|
||||
if (params.name == '主要设备水平') {
|
||||
if(level != 2) {
|
||||
const data = {
|
||||
fullUrl:`/proxy-${path}/effcicency/#/energyReport?ai=${ai}`,
|
||||
conciseUrl:`/proxy-${path}/effcicency/#/device?ai=${ai}`
|
||||
}
|
||||
pushWebviewVC(data)
|
||||
} else {
|
||||
that.$router.push(`/device`)
|
||||
}
|
||||
|
||||
}
|
||||
if (params.name == '能源管理措施') {
|
||||
if(level != 2) {
|
||||
const data = {
|
||||
fullUrl:`/proxy-${path}/effcicency/#/energyReport?ai=${ai}`,
|
||||
conciseUrl:`/proxy-${path}/effcicency/#/manage?ai=${ai}`
|
||||
}
|
||||
pushWebviewVC(data)
|
||||
} else {
|
||||
that.$router.push('/manage')
|
||||
}
|
||||
|
||||
}
|
||||
if (params.name == '节能改造措施') {
|
||||
if(level != 2) {
|
||||
const data = {
|
||||
fullUrl:`/proxy-${path}/effcicency/#/energyReport?ai=${ai}`,
|
||||
conciseUrl:`/proxy-${path}/effcicency/#/transform?ai=${ai}`
|
||||
}
|
||||
pushWebviewVC(data)
|
||||
} else {
|
||||
that.$router.push('/transform')
|
||||
}
|
||||
|
||||
}
|
||||
if (params.name == '能耗定额指标') {
|
||||
if(level != 2) {
|
||||
const data = {
|
||||
fullUrl:`/proxy-${path}/effcicency/#/energyReport?ai=${ai}`,
|
||||
conciseUrl:`/proxy-${path}/effcicency/#/energquota?ai=${ai}`
|
||||
}
|
||||
pushWebviewVC(data)
|
||||
} else {
|
||||
that.$router.push('/energquota')
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
// 跳转到全部
|
||||
goEneryReport() {
|
||||
localStorage.setItem('show', false)
|
||||
this.$router.push({path: '/energyReport'})
|
||||
},
|
||||
// 重新生成
|
||||
async generateReport() {
|
||||
let data = {
|
||||
customerId: this.energyData.customerId,
|
||||
taskId: this.energyData.taskId
|
||||
}
|
||||
this.$toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true,
|
||||
message: '正在重新生成,请稍后...',
|
||||
})
|
||||
try{
|
||||
try {
|
||||
let params = {
|
||||
customerId: this.energyData.customerId,
|
||||
yearDate: this.EnergyReportInfo.reportYear
|
||||
}
|
||||
let result = await energyQuotaTaskCalc(params)
|
||||
console.log(result, '能耗算分');
|
||||
} catch (error) {
|
||||
console.log('能耗算分失败');
|
||||
}
|
||||
const res = await genReport(data)
|
||||
if (res.code == 0) {
|
||||
if(this.energyData.year) {
|
||||
this.getReportByYear()
|
||||
} else {
|
||||
this.getEnergyReportInfoAPI()
|
||||
}
|
||||
localStorage.setItem('show', true)
|
||||
} else {
|
||||
this.$toast.clear()
|
||||
Notify({ type: 'danger', message: res.msg })
|
||||
}
|
||||
}catch{
|
||||
this.$toast.clear()
|
||||
}
|
||||
},
|
||||
// 获取报告时间
|
||||
async getTime() {
|
||||
const res = await getReportTimeListAPI({ customerId: this.energyData.customerId })
|
||||
this.timeShow = false
|
||||
if(res.code == 0){
|
||||
this.yearList = res.data.map(v => {
|
||||
if(v && v.reportYear) {
|
||||
return {
|
||||
text: `报告${v.reportYear}`,
|
||||
value: v.id
|
||||
}
|
||||
}
|
||||
})
|
||||
if(this.EnergyReportInfo.reportYear) {
|
||||
const obj = res.data.find((ele)=> ele.reportYear == this.EnergyReportInfo.reportYear)
|
||||
this.yearVal = obj.id
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
//点击时间时，切换报告
|
||||
handelChangeTime(value) {
|
||||
const obj = this.yearList.find((ele)=> ele.value == value)
|
||||
const getYear = obj.text.split('报告')[1]
|
||||
this.energyData.year = getYear
|
||||
sessionStorage.setItem('tidCid', JSON.stringify(this.energyData))
|
||||
// delete this.energyData.taskId
|
||||
this.getReportByYear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.report {
|
||||
height: 100%;
|
||||
.energyReport-navbar {
|
||||
color: #64ccc4;
|
||||
}
|
||||
::v-deep.van-icon-arrow-left {
|
||||
font-size: 15px;
|
||||
color: #64ccc4;
|
||||
}
|
||||
.energyReport-detail {
|
||||
background: url('~@/assets/GB@2X.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
color: #f2f2f2;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0.2rem;
|
||||
box-sizing: border-box;
|
||||
.detail1 {
|
||||
float: right;
|
||||
color: #ffffff;
|
||||
background-color: #27aba0;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
}
|
||||
.float-clear {
|
||||
clear: both;
|
||||
}
|
||||
.detail2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.detail2-left {
|
||||
width:17vw;
|
||||
height: 1.82rem;
|
||||
margin-left: 0.2rem;
|
||||
border-radius: 50%;
|
||||
color: #10968b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.detail2-left-div1 {
|
||||
font-weight: 700;
|
||||
// border-bottom: 1px dashed #62c8c0;
|
||||
margin: 0 0 -0.15rem 0.3rem;
|
||||
font-size: 16px;
|
||||
background: url('~@/assets/aro_pic@2x.png') no-repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 1.7rem;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.detail2-left-div2 {
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.detail2-right {
|
||||
flex: 1;
|
||||
margin: 0 0.2rem;
|
||||
.detail2-right-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
::v-deep .van-dropdown-menu__bar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
height: 12px;
|
||||
padding: 2px 5px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.detail2-right-top-scholl {
|
||||
// width: 130px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.c{
|
||||
width: 7rem;
|
||||
}
|
||||
.d{
|
||||
width: 5rem;
|
||||
}
|
||||
::v-deep .van-dropdown-menu__title {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
.timeSelect {
|
||||
border: 1px solid #34dec4;
|
||||
margin: 0 5px;
|
||||
border-radius: 3px;
|
||||
widows: 65px;
|
||||
}
|
||||
.detail2-right-top-rpt {
|
||||
font-size: 11px;
|
||||
padding: 0 3px;
|
||||
margin: 0 2px;
|
||||
box-sizing: border-box;
|
||||
// margin: auto 10px;
|
||||
// box-shadow: 1px 1px 1px 1px #ffffff;
|
||||
border: 1px solid #ffffff;
|
||||
width: 50px;
|
||||
}
|
||||
.detail2-right-top-reset {
|
||||
border: 1px solid #ffffff;
|
||||
color: #ffffff;
|
||||
// padding: 3px;
|
||||
// margin-left: 50px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.detail2-right-bottom {
|
||||
display: flex;
|
||||
border-top: 1px solid;
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
> div {
|
||||
width: 4rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.energyReport-info {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
border-bottom: 1px solid;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
.detail-border {
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #f2f2f2;
|
||||
font-size: 13px;
|
||||
}
|
||||
.energyReport-info-flex {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.detail-border {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #f2f2f2;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.energyReport-address {
|
||||
margin-top: 5px;
|
||||
margin-left: 18px;
|
||||
.energyReport-address-border {
|
||||
margin-top: 5px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #f2f2f2;
|
||||
font-size: 13px;
|
||||
max-height: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.energyReport-address-flex {
|
||||
display: flex;
|
||||
.address-border {
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #f2f2f2;
|
||||
font-size: 13px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radarDetail {
|
||||
background-color: #fff;
|
||||
margin: 10px;
|
||||
padding: 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;
|
||||
width: 330px;
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-btn {
|
||||
height: 35px;
|
||||
padding: 0 0.4rem;
|
||||
> div {
|
||||
background: #34baae;
|
||||
border-radius: 10px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div class="tarnsform">
|
||||
<!-- <reportHeader v-if="show" title="清洁能源利用"></reportHeader> -->
|
||||
<div class="tarnsform-content" v-if="this.flagModule">
|
||||
<div class="tarnsform-title">
|
||||
<img src="@/assets/energyReport-left.png" alt="" />
|
||||
<div class="tarnsform-title-color">节能改造措施</div>
|
||||
<img src="@/assets/energyReport-right.png" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
近年来，贵单位一贯重视节能工作。积极采取了一些措施降低能耗，具体改造内容如下：
|
||||
</div>
|
||||
<div class="tarnsform-card" v-if="centralizeModifyYear">
|
||||
<div class="card-img">
|
||||
<img
|
||||
class="tarnsform-card-img"
|
||||
src="@/assets/jzs.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<h1>空调制冷系统-集中式空调改造方式</h1>
|
||||
<div
|
||||
v-for="(item, index) in JSON.parse(
|
||||
EnergyReportInfo.centralizeModifyYear
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}、 {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tarnsform-card" v-if="multiCtrlModifyYear">
|
||||
<div class="card-img">
|
||||
<img
|
||||
class="tarnsform-card-img"
|
||||
src="@/assets/jlkt.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<h1>空调制冷系统-多联式空调改造方式</h1>
|
||||
<div
|
||||
v-for="(item, index) in JSON.parse(
|
||||
EnergyReportInfo.multiCtrlModifyYear
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}、 {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tarnsform-card" v-if="heatDeviceModifyYear">
|
||||
<div class="card-img">
|
||||
<img class="tarnsform-card-img" src="@/assets/cn.png" alt="" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<h1>采暖系统改造方式</h1>
|
||||
<div
|
||||
v-for="(item, index) in JSON.parse(
|
||||
EnergyReportInfo.heatDeviceModifyYear
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}、 {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tarnsform-card" v-if="ratioLedModifyYear">
|
||||
<div class="card-img">
|
||||
<img class="tarnsform-card-img" src="@/assets/zm.png" alt="" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<h1>照明系统改造方式</h1>
|
||||
<div
|
||||
v-for="(item, index) in JSON.parse(
|
||||
EnergyReportInfo.ratioLedModifyYear
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}、 {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tarnsform-card" v-if="distributeMakeModifyYear">
|
||||
<div class="card-img">
|
||||
<img class="tarnsform-card-img" src="@/assets/pd.png" alt="" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<h1>配电系统改造方式</h1>
|
||||
<div
|
||||
v-for="(item, index) in JSON.parse(
|
||||
EnergyReportInfo.distributeMakeModifyYear
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}、 {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tarnsform-card" v-if="hotWaterCtrlModifyYear">
|
||||
<div class="card-img">
|
||||
<img class="tarnsform-card-img" src="@/assets/rs.png" alt="" />
|
||||
</div>
|
||||
<div class="card-text">
|
||||
<h1>生活热水系统改造方式</h1>
|
||||
<div
|
||||
v-for="(item, index) in JSON.parse(
|
||||
EnergyReportInfo.hotWaterCtrlModifyYear
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
{{ index + 1 }}、 {{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- {{levelShow}}
|
||||
{{imageUrl}} -->
|
||||
<div
|
||||
class="tarnsform-footer"
|
||||
@click="goSignature"
|
||||
v-if="levelShow && !imageUrl && EnergyReportInfo.grsgState == 1"
|
||||
>
|
||||
签名
|
||||
</div>
|
||||
|
||||
<div v-if='imageUrl' class="img-box">
|
||||
<img :src="imageUrl" >
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import reportHeader from './report-header.vue'
|
||||
import { downloadUrl } from '@/settings'
|
||||
import { mapState,mapMutations } from 'vuex'
|
||||
import { setTitle } from '@/utils/dsbridge.js'
|
||||
import { Notify } from 'vant'
|
||||
import { getLoginCustomerAPI,getReport } from '@/api/energyReport.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
check: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signed: '',
|
||||
signFile: '',
|
||||
flagModule:false,
|
||||
isState: false
|
||||
// EnergyReportInfo: {}
|
||||
|
||||
}
|
||||
},
|
||||
// components: { reportHeader },
|
||||
created() {
|
||||
setTitle('节能改造措施')
|
||||
this.getEnergyReportInfo()
|
||||
|
||||
this.signed = sessionStorage.getItem('signed')
|
||||
|
||||
const obj = JSON.parse(sessionStorage.getItem('tidCid'))
|
||||
if(obj.item && obj.item.isState) {
|
||||
this.isState = obj.item.isState
|
||||
}
|
||||
|
||||
|
||||
if(this.centralizeModifyYear ||
|
||||
this.multiCtrlModifyYear ||
|
||||
this.heatDeviceModifyYear ||
|
||||
this.ratioLedModifyYear ||
|
||||
this.distributeMakeModifyYear ||
|
||||
this.hotWaterCtrlModifyYear ){
|
||||
this.flagModule = true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('report', ['EnergyReportInfo']),
|
||||
levelShow() {
|
||||
if(this.$store.getters.userLevel != 2) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
imageUrl() {
|
||||
if(this.$store.getters.imageUrl) {
|
||||
return `${downloadUrl}${this.$store.getters.imageUrl}`
|
||||
}
|
||||
return null
|
||||
},
|
||||
show() {
|
||||
return localStorage.getItem('show') === 'true'
|
||||
},
|
||||
|
||||
// 以下是判断接口是否返回对应字段
|
||||
centralizeModifyYear() {
|
||||
if (!this.EnergyReportInfo.centralizeModifyYear) return false
|
||||
if (!this.EnergyReportInfo.centralizeModifyYear) return false
|
||||
return JSON.parse(this.EnergyReportInfo.centralizeModifyYear).length > 0
|
||||
},
|
||||
multiCtrlModifyYear() {
|
||||
if (!this.EnergyReportInfo.multiCtrlModifyYear) return false
|
||||
if (!this.EnergyReportInfo.multiCtrlModifyYear) return false
|
||||
return JSON.parse(this.EnergyReportInfo?.multiCtrlModifyYear).length > 0
|
||||
},
|
||||
heatDeviceModifyYear() {
|
||||
if (!this.EnergyReportInfo.heatDeviceModifyYear) return false
|
||||
if (!this.EnergyReportInfo.heatDeviceModifyYear) return false
|
||||
return JSON.parse(this.EnergyReportInfo?.heatDeviceModifyYear).length > 0
|
||||
},
|
||||
ratioLedModifyYear() {
|
||||
if (!this.EnergyReportInfo.ratioLedModifyYear) return false
|
||||
return JSON.parse(this.EnergyReportInfo?.ratioLedModifyYear).length > 0
|
||||
},
|
||||
distributeMakeModifyYear() {
|
||||
if (!this.EnergyReportInfo.distributeMakeModifyYear) return false
|
||||
return (
|
||||
JSON.parse(this.EnergyReportInfo?.distributeMakeModifyYear).length > 0
|
||||
)
|
||||
},
|
||||
hotWaterCtrlModifyYear() {
|
||||
if (!this.EnergyReportInfo.hotWaterCtrlModifyYear) return false
|
||||
return (
|
||||
JSON.parse(this.EnergyReportInfo?.hotWaterCtrlModifyYear).length > 0
|
||||
)
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
|
||||
// },
|
||||
methods: {
|
||||
...mapMutations('report', ['setEnergyReportInfo']),
|
||||
|
||||
// 跳转到签名页面
|
||||
goSignature() {
|
||||
this.$router.push('/comment')
|
||||
},
|
||||
// 集中式空调改造方式-”字段
|
||||
formaterall(val) {
|
||||
let reg = '集中式空调改造方式-'
|
||||
return val.replace(reg, '')
|
||||
},
|
||||
// 多联式空调-”字段
|
||||
formatersome(val) {
|
||||
let reg = '多联式空调-'
|
||||
return val.replace(reg, '')
|
||||
},
|
||||
// 采暖系统改造方式-”字段
|
||||
formaterhot(val) {
|
||||
let reg = '采暖系统改造方式-'
|
||||
return val.replace(reg, '')
|
||||
},
|
||||
|
||||
|
||||
//不同角色，不同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 {
|
||||
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)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tarnsform {
|
||||
.tarnsform-content {
|
||||
margin-top: 10px;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.tarnsform-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
margin-bottom: 17px;
|
||||
img {
|
||||
// height: 10px;
|
||||
width: 100px!important;
|
||||
}
|
||||
.tarnsform-title-color {
|
||||
// width: 280px;
|
||||
color: #146660;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.tarnsform-card {
|
||||
margin-top: 10px;
|
||||
// background-color: #f1f1f1;
|
||||
box-shadow: 1px 1px 10px 1px #f1f1f1;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.card-img {
|
||||
margin-right: 10px;
|
||||
width: 80px;
|
||||
.tarnsform-card-img {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
.card-text {
|
||||
h1 {
|
||||
color: #23b2a4;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
div {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tarnsform-footer {
|
||||
background-color: #63cdd6;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.img-box{
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-top: 10px;
|
||||
>img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user