caoyan/energy_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

能效诊断

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/views/industrialReport/partialReport.vue
+705
View File
@@ -0,0 +1,705 @@
<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>{{ reportYear }}</span></div>
<!-- <div class="detail2-left-div2">
2月
</div> -->
</div>
<div class="detail2-right">
<div class="detail2-right-top">
<div class="detail2-right-top-scholl">
{{ EnergyReportInfo.templaTitle }}
</div>
<!-- <div v-if="timeShow" class="detail2-right-top-rpt" @click="getTime">
报告20220301<van-icon name="arrow-down" />
</div> -->
<!-- <van-dropdown-menu
class="timeSelect"
v-if="isLevel && this.option1.length > 0"
>
<van-dropdown-item v-model="value1" :options="option1" />
</van-dropdown-menu> -->
<div class="detail2-right-top-reset" @click="generateReport" v-if="isLevel">
重新生成
</div>
</div>
<div class="detail2-right-bottom">
用电户号: <div>{{ EnergyReportInfo.consNo }}</div>
</div>
</div>
</div>
<div class="energyReport-info">
<div class="detail-border">
客户类型：{{ EnergyReportInfo.customerType }}
</div>
<div class="energyReport-info-flex">
<div class="detail-border">
产品类型：{{ EnergyReportInfo.productTypeName }}
</div>
<div class="detail-border">
产品单耗：{{ EnergyReportInfo.productUnitConsume }}
</div>
</div>
<div class="energyReport-info-flex">
<div class="detail-border">
接入电压：{{ EnergyReportInfo.inVoltage }}
</div>
<div class="detail-border">
诊断时间：{{ EnergyReportInfo.diagnosisTime }}
</div>
</div>
</div>
<div class="energyReport-address">
<div class="energyReport-address-flex">
<div class="address-border">
工业总产值：{{ EnergyReportInfo.totalOutput }}元
</div>
<div class="address-border">
工业增加值：{{ EnergyReportInfo.addOutput }}元
</div>
</div>
<div class="energyReport-address-border">
详细地址：{{ EnergyReportInfo.detailAddress }}
</div>
</div>
</div>
<div class="radarDetail">
<div class="editTitle">
<div class="editTitle-img"><img src="@/assets/energyReport-left.png" alt="" /></div>
<div class="editTitle-word">综合诊断评定</div>
<div class="editTitle-img"><img src="@/assets/energyReport-right.png" alt="" /></div>
</div>
<!-- <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">
贵单位整体能效情况为
{{ EnergyReportInfo.energySituation }}，
其在能源管理水平、节能改造措施、用电能效水平、通用
系统能效、能源资源利用水平五个维度的综合诊断评定结果如下图所示。
</div>
<!-- 建筑综合评定雷达图 -->
<div class="radarChart"></div>
</div>
<!-- <div class="energyReport-navbar" ></div>/ -->
<div class="footer-btn" v-if="isRouteFullReport" @click="goFullReport">
<div>完整报告</div>
</div>
</div>
</div>
</template>
<script>
import {
getEnergyReportInfoAPI,
getLoginCustomerAPI,
getReportTimeListAPI,
getReport
} from '@/api/energyReport.js'
import { mapMutations } from 'vuex'
import { pushWebviewVC } from '@/utils/dsbridge.js'
import { genReport } from '@/api/api.js'
import { Notify } from 'vant'
import Loading from '@/components/loading'
// import {
// getEnergyReportInfoAPI,
// getLoginCustomerAPI,
// getReportTimeListAPI
// } from '@/api/energyReport.js'
// import * as echarts from 'echarts'
export default {
data() {
return {
loading2: false,
level: null,
fromPath: '', //from路由
timeShow: true, //报告时间
value1: 0,
option1: [],
// 雷达图配置项
radarOption: {
radar: {
radius: 58, //雷达图大小
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: [
{
// value: [70, 80, 90, 70, 50]
// value: this.seriesList.dataList,
// name: this.seriesList.name,
}
]
}
]
},
clearTimeOut:null,
flag: false,
EnergyReportInfo: {},
//请求参数
energyData: {
taskId: '',
customerId: '',
// year: ''
},
toast:null
}
},
components:{
Loading
},
activated() {
// alert(this.$route.query.ai)
// this.getEnergyReportInfo()
// this.getTime()
},
computed: {
reportYear() {
if (this.EnergyReportInfo.reportYear) {
return this.EnergyReportInfo.reportYear
}
return null
},
isLevel() {
if(sessionStorage.getItem('level') == 2 && this.energyData.taskId && this.taskType != 5 && !this.EnergyReportInfo.handState && this.EnergyReportInfo.grsgState == '2') {
return true
}
return false
},
isRouteFullReport() {
if(sessionStorage.getItem('level') == 2 ) {
return true
}
return false
},
taskType() {
return this.$route.params.item? this.$route.params.item.taskType: 0
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.fromPath = from.name
if(from.name != 'fullreport') {
sessionStorage.setItem('fromPath', from.name)
}
})
},
// activated() {
// },
created() {
this.userLevel()
},
mounted() {
},
methods: {
...mapMutations('report', ['setEnergyReportInfo']),
// getFlag() {
// },
//判断是否是客户还是客户经理
userLevel() {
this.level = sessionStorage.getItem('level')
// this.$route.params.customerId :JSON.parse(sessionStorage.getItem('tidCid')).customerId
// const cid = this.$route.params.customerId? this.$route.params.customerId: JSON.parse(sessionStorage.getItem('tidCid')).customerId
// const tid = this.$route.params.taskId? this.$route.params.taskId :localStorage.getItem('reportTaskId')
if(this.level != 2) {
this.getLoginCustomer()
} else {
this.energyData = JSON.parse(sessionStorage.getItem('tidCid'))
this.getEnergyReportInfo()
}
},
// getLoginCustomerAPI获取登录客户信息
async getLoginCustomer() {
this.loading2 = true
try {
const res = await getLoginCustomerAPI()
if (res.code == 0) {
localStorage.setItem('reportCustomerId', res.data.customerId)
const data = {
customerId: res.data.customerId,
ai: this.$route.query.ai? this.$route.query.ai: sessionStorage.getItem('saikey')
}
this.getReport(data)
} else {
Notify({ type: 'danger', message: res.msg })
}
}
finally{
this.loading2 = false
}
},
//通过新接口获取页面数据
async getReport(data) {
this.loading2 = true
const res = await getReport(data)
try {
if(res.code == 0) {
this.saveData(res)
} else {
this.flag = false
Notify({ type: 'danger', message: res.msg })
}
} finally{
this.loading2 = false
}
},
// 获取当前页面数据
async getEnergyReportInfo() {
this.loading2 = true
try {
let res = await getEnergyReportInfoAPI({customerId: this.energyData.customerId, taskId: this.energyData.taskId})
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)
if (res.data.energySituationRadar) {
this.radarOption.radar.indicator = JSON.parse(res.data.energySituationRadar )['indicator']
this.radarOption.series[0].data = []
this.radarOption.series[0].data.push(JSON.parse(res.data.energySituationRadar)['seriesData'][0].dataList)
this.createRadarChart()
} else {
this.radarOption.radar.indicator = []
this.radarOption.series[0].data = []
this.createRadarChart()
}
this.$toast.clear();
},
// 跳转到完整报告
goFullReport() {
this.$router.push({path: '/fullreport' })
},
// 雷达图
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/#/fullreport?ai=${ai}`,
conciseUrl: `/proxy-${path}/effcicency/#/managementlevel?ai=${ai}`
}
pushWebviewVC(data)
} else {
that.$router.push('/managementlevel')
}
}
if (params.name == '节能改造措施') {
if (level != 2) {
const data = {
fullUrl: `/proxy-${path}/effcicency/#/fullreport?ai=${ai}`,
conciseUrl: `/proxy-${path}/effcicency/#/refrom?ai=${ai}`
}
pushWebviewVC(data)
} else {
that.$router.push(`/refrom`)
}
}
if (params.name == '用电能效水平') {
if (level != 2) {
const data = {
fullUrl: `/proxy-${path}/effcicency/#/fullreport?ai=${ai}`,
conciseUrl: `/proxy-${path}/effcicency/#/electro?ai=${ai}`
}
pushWebviewVC(data)
} else {
that.$router.push('/electro')
}
}
if (params.name == '通用能源系统能效') {
if (level != 2) {
const data = {
fullUrl: `/proxy-${path}/effcicency/#/fullreport?ai=${ai}`,
conciseUrl: `/proxy-${path}/effcicency/#/universal?ai=${ai}`
}
pushWebviewVC(data)
} else {
that.$router.push('/universal')
}
}
if (params.name == '能源资源利用水平') {
if (level != 2) {
const data = {
fullUrl: `/proxy-${path}/effcicency/#/fullreport?ai=${ai}`,
conciseUrl: `/proxy-${path}/effcicency/#/utilize?ai=${ai}`
}
pushWebviewVC(data)
} else {
that.$router.push('/utilize')
}
}
})
},
// 获取报告时间
async getTime() {
const res = await getReportTimeListAPI({customerId: this.energyData.customerId})
// this.timeShow = false
let arr = []
let value = 0
res.data.forEach(v => {
if (v.reportYear == null) {
return arr
} else {
arr.push({
text: `报告${v.reportYear}`,
value: value++
})
}
})
this.option1 = arr
},
// 重新生成
async generateReport() {
let data = {
customerId:
this.$route.params.customerId || JSON.parse(sessionStorage.getItem('tidCid')).customerId,
taskId: this.$route.params.taskId|| JSON.parse(sessionStorage.getItem('tidCid')).taskId
}
// this.$toast('正在重新生成,请稍后...')
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: '正在重新生成,请稍后...',
})
const res = await genReport(data)
if (res.code == 0) {
this.getEnergyReportInfo(data)
}else {
Notify({ type: 'danger', message: res.msg })
}
}
}
}
</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;
// height: 250px;
color: #f2f2f2;
margin: 10px;
border-radius: 10px;
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;
.detail2-left {
// width: 2.2rem;
width:17vw;
margin-top: 16px;
margin-left: 0;
margin-right:4vw;
color: #10968b;
position: relative;
.detail2-left-div1 {
font-weight: 700;
width:100%;
text-align: center;
padding-bottom: 3px;
box-sizing: border-box;
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;
padding-top: 3px;
box-sizing: border-box;
text-align: center;
font-size: 13px;
}
}
.detail2-right {
margin-top: 36px;
margin-right: 0.2rem;
flex: 1;
.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 {
flex: 1;
// width: 130px;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
::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: 18px;
border-bottom: 1px solid;
padding: 10px 0px;
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 {
flex: 1;
padding-left: 10px;
box-sizing: border-box;
border-left: 1px solid #f2f2f2;
font-size: 13px;
}
}
}
.energyReport-address {
margin-top: 10px;
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;
text-align: center;
img {
width: 100px !important;
// height: 10px;
}
.bar-title-color {
// margin: 0 10px;
// width: 280px;
color: #146660;
font-size: 15px;
}
}
.wholeAlgorithmScore {
color: #4d4d4d;
line-height: 21px;
}
.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;
}
}
.editTitle {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 18px;
.editTitle-img {
width: 100px;
img {
width: 100%;
}
}
.editTitle-word {
color: #146660;
font-size: 15px;
font-weight: bold;
line-height: 15px;
}
}
</style>