能效诊断

This commit is contained in:
jiangyinzhi
2024-07-10 10:25:32 +08:00
parent b7aa6f87f1
commit 04f0606430
262 changed files with 58693 additions and 1 deletions
+712
View File
@@ -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>