jiangyinzhi
1087 lines
33 KiB
Vue
1087 lines
33 KiB
Vue
<template>
|
||
<div class="system" @scroll="handScroll" :class="show ? 'scroll' : ''">
|
||
<!-- <reportHeader v-if="show" title="主要设备水平"></reportHeader> -->
|
||
<!-- 锚点 -->
|
||
<anchorPoint
|
||
ref="anchorChild"
|
||
v-if="show"
|
||
v-show="anchorPointshow"
|
||
class="anchor-point"
|
||
></anchorPoint>
|
||
<!-- 正文 -->
|
||
|
||
<div class="device" @click="mouse('.device')">
|
||
<div class="device-title">
|
||
<img src="@/assets/energyReport-left.png" alt="" />
|
||
<div class="device-title-color">主要设备水平</div>
|
||
<img src="@/assets/energyReport-right.png" alt="" />
|
||
</div>
|
||
<div v-if="
|
||
EnergyReportInfo.existCentralize == 'true' ||
|
||
EnergyReportInfo.existMultiple == 'true'
|
||
">
|
||
通过设备信息收集结合现场节能问询诊断分析，贵单位主要用能设备的运行情况:
|
||
</div>
|
||
<div
|
||
class="module-airConditioning"
|
||
v-if="
|
||
EnergyReportInfo.existCentralize == 'true' ||
|
||
EnergyReportInfo.existMultiple == 'true'
|
||
"
|
||
>
|
||
<div class="device-same">
|
||
<div class="device-div">
|
||
<img class="device-img1" src="@/assets/summarize.png" alt="" />
|
||
<h1>空调制冷系统</h1>
|
||
</div>
|
||
<div class="device-table">
|
||
<div class="device-table-header">空调制冷系统</div>
|
||
<div class="device-table-main">
|
||
{{ EnergyReportInfo.refrigeType }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="device-table"
|
||
v-if="EnergyReportInfo.existSplitting == 'true'"
|
||
>
|
||
<div class="device-table-header">分体式空调</div>
|
||
<div class="device-table-main con">
|
||
合计{{ EnergyReportInfo.splittingNum }}台，<span>负载系数为{{ EnergyReportInfo.splittingLoadFactor }}，每日运行{{
|
||
EnergyReportInfo.splittingRunHours
|
||
}}小时，</span>年平均运行时间为{{ EnergyReportInfo.splittingRunDays }}天，单位面积冷量为{{ EnergyReportInfo.splittingColdPerArea
|
||
}}千瓦/平方米，淘汰设备数量{{EnergyReportInfo.splittingDieoutNum}}台。
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="device-table"
|
||
v-if="EnergyReportInfo.existCentralize == 'true'"
|
||
>
|
||
<div class="device-table-header">集中式空调</div>
|
||
<div class="device-table-main">
|
||
<table>
|
||
<tr v-if="EnergyReportInfo.centralizeNum">
|
||
<td>
|
||
{{ EnergyReportInfo.centralizeType }}
|
||
</td>
|
||
<td>
|
||
合计{{ EnergyReportInfo.centralizeNum }}台， 日常使用为{{
|
||
EnergyReportInfo.centralizeStandby
|
||
}}备{{ EnergyReportInfo.centralizeUsing }}用,
|
||
总（耗用量或功率）为{{
|
||
EnergyReportInfo.centralizeRatedPower
|
||
}}（吨/立方米/千瓦）， 总制冷量为{{
|
||
EnergyReportInfo.centralizeCoolCapacity
|
||
}}千瓦。 机组平均能效比为{{
|
||
EnergyReportInfo.centralizeAverageCop
|
||
}}， 机组最长投运年限为{{
|
||
EnergyReportInfo.centralizeMinUseYear
|
||
}}年。
|
||
</td>
|
||
</tr>
|
||
<tr v-if="EnergyReportInfo.pumpNum">
|
||
<td>冷冻、冷却泵</td>
|
||
<td>
|
||
合计{{ EnergyReportInfo.pumpNum }}台， 日常使用为{{
|
||
EnergyReportInfo.pumpStandbyNum
|
||
}}备{{ EnergyReportInfo.pumpUsingNum }}用， 总额定功率为{{
|
||
EnergyReportInfo.pumpRatedPower
|
||
}}千瓦， 设备最长投运年限为{{
|
||
EnergyReportInfo.pumpMinUseYear
|
||
}}年。
|
||
</td>
|
||
</tr>
|
||
<tr v-if="EnergyReportInfo.towerNum">
|
||
<td>冷却塔</td>
|
||
<td>
|
||
合计{{ EnergyReportInfo.towerNum }}台， 日常使用为{{
|
||
EnergyReportInfo.towerUsingNum
|
||
}}备{{ EnergyReportInfo.towerStandbyNum }}用，
|
||
总额定功率为{{ EnergyReportInfo.towerRatedPower }}千瓦，
|
||
设备最长投运年限为{{ EnergyReportInfo.towerMinUseYear }}年。
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="device-table"
|
||
v-if="EnergyReportInfo.existMultiple == 'true'"
|
||
>
|
||
<div class="device-table-header">多联式空调</div>
|
||
<div class="device-table-main con">
|
||
合计{{ EnergyReportInfo.multipleNum }}台，
|
||
<span v-if="false">总额定功率为{{ EnergyReportInfo.multipleRatedPower }}千瓦，机组平均能效比为{{
|
||
EnergyReportInfo.multipleAverageCop
|
||
}}，</span>设备最长投运年限为{{ EnergyReportInfo.multipleMinUseYear }}年。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="device-same">
|
||
<div class="device-div">
|
||
<img class="device-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>诊断分析</h1>
|
||
</div>
|
||
<div class="device-text">
|
||
通过现场调研及数据分析，空调制冷系统的整体设备工况{{ EnergyReportInfo.wholeDeviceCondition }}，整体运营管理水平{{ EnergyReportInfo.refrigeOverallLevel }},
|
||
<span v-if="EnergyReportInfo.energyConsumingDevices">
|
||
主要用能设备存在{{ EnergyReportInfo.energyConsumingDevices }}问题、</span>智能化控制系统{{ EnergyReportInfo.controlSystem }}。
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="device-same"
|
||
v-if="EnergyReportInfo.existCentralize == 'true'"
|
||
>
|
||
<div class="device-div" v-if="centralizeAdvice">
|
||
<img class="device-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>集中式空调提升建议</h1>
|
||
</div>
|
||
<div class="device-list" v-if="centralizeAdvice">
|
||
<div class="device-list-div">
|
||
<div v-if="centralizeAdvice">
|
||
<h1 class="device-list-item">运营管理</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(
|
||
this.EnergyReportInfo.centralizeAdvice
|
||
).overallManage"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、{{ item }}
|
||
</div>
|
||
</div>
|
||
<div v-if="centralizeAdvice">
|
||
<h1>技术改造</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(
|
||
this.EnergyReportInfo.centralizeAdvice
|
||
).transform"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="device-same"
|
||
v-if="EnergyReportInfo.existMultiple == 'true'"
|
||
>
|
||
<div class="device-div">
|
||
<img class="device-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>多联式空调提升建议</h1>
|
||
</div>
|
||
<div class="device-list">
|
||
<div class="device-list-div">
|
||
<div v-if="multipleAdvice">
|
||
<h1 class="device-list-item">运营管理</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(
|
||
this.EnergyReportInfo.multipleAdvice
|
||
).overallManage"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、{{ item }}
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="multipleAdvice">
|
||
<h1>技术改造</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(
|
||
this.EnergyReportInfo.multipleAdvice
|
||
).transform"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 采暖/照明/配电/生活热水系统 -->
|
||
<!-- 采暖系统 -->
|
||
<div
|
||
v-if="EnergyReportInfo.existHeat == 'true'"
|
||
class="heating-system"
|
||
@click="mouse('.heating-system')"
|
||
>
|
||
<div class="heating-div-head">
|
||
<img class="heating-img1" src="@/assets/summarize.png" alt="" />
|
||
<h1>采暖系统</h1>
|
||
</div>
|
||
<div class="heating-header">
|
||
<div class="heating-border">
|
||
<div class="heating-bgc">主要供应方式</div>
|
||
<div class="heating-pad">{{ EnergyReportInfo.heatModeName }}</div>
|
||
</div>
|
||
<div class="heating-border">
|
||
<div class="heating-bgc">采暖设备类型</div>
|
||
<div class="heating-pad">{{ EnergyReportInfo.heatTypeName }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="heating-header-test">
|
||
<!-- existHeatUnit是否存在采暖系统机组 -->
|
||
<span v-if="EnergyReportInfo.existHeatUnit == 'true'?true: false">
|
||
合计{{ EnergyReportInfo.heatNum }}台，日常使用为{{
|
||
EnergyReportInfo.useExpl
|
||
}}用{{ EnergyReportInfo.backupExpl }}备，总额定（耗用量或功率）为{{
|
||
EnergyReportInfo.heatRatedPower
|
||
}}（吨/立方米/千瓦），总制热量为{{
|
||
EnergyReportInfo.heatCapacity
|
||
}}千瓦，机组最长投运年限为{{ EnergyReportInfo.heatUnitMinUseYear }}年。
|
||
</span>
|
||
|
||
采暖泵合计{{ EnergyReportInfo.heatPumpNum}}台，总额定功率为{{
|
||
EnergyReportInfo.ratedPower}}千瓦
|
||
<span v-if="EnergyReportInfo.heatDeviceMinUseYear">，设备最长投运年限为{{ EnergyReportInfo.heatDeviceMinUseYear }}年</span> 。
|
||
</div>
|
||
<div class="heating-div">
|
||
<img class="heating-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>诊断分析</h1>
|
||
</div>
|
||
<div class="heating-text">
|
||
通过现场调研及数据分析，采暖系统的整体设备工况{{ EnergyReportInfo.heatWholeDeviceCondition }}，整体运营管理水平{{ EnergyReportInfo.heatManagementLevel }}，
|
||
<span v-if="EnergyReportInfo.heatDeviceCondition">主要用能设备存在{{ EnergyReportInfo.heatDeviceCondition }}问题、</span>智能化控制系统{{ EnergyReportInfo.heatControlSystem }}。
|
||
</div>
|
||
<div class="heating-div">
|
||
<img class="heating-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>提升建议</h1>
|
||
</div>
|
||
<!-- {{JSON.parse(EnergyReportInfo.heatOverall)[]}}
|
||
{{JSON.parse(EnergyReportInfo.heatTransform)}} -->
|
||
<div class="device-list" v-if="EnergyReportInfo.heatOverall">
|
||
<div class="device-list-div">
|
||
<h1 v-if="JSON.parse(EnergyReportInfo.heatOverall).length > 0" >
|
||
运营管理
|
||
</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(EnergyReportInfo.heatOverall)"
|
||
:key="index + item"
|
||
>
|
||
{{ index + 1 }}、 {{ item }}
|
||
</div>
|
||
<h1 v-if="EnergyReportInfo.heatTransform&&JSON.parse(EnergyReportInfo.heatTransform).length > 0">
|
||
技术改造
|
||
</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(EnergyReportInfo.heatTransform)"
|
||
:key="index + item"
|
||
>
|
||
{{ index + 1 }}、 {{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 照明系统 -->
|
||
<div
|
||
v-if="EnergyReportInfo.existLight == 'true'"
|
||
class="lighting-system"
|
||
@click="mouse('.lighting-system')"
|
||
>
|
||
<div class="lighting-div-head">
|
||
<img class="lighting-img" src="@/assets/summarize.png" alt="" />
|
||
<h1>照明系统</h1>
|
||
</div>
|
||
<div class="lighting-header">
|
||
<div class="lighting-header-div1">主要设备类型</div>
|
||
<div class="lighting-header-div2">{{ EnergyReportInfo.ratioType }}</div>
|
||
</div>
|
||
<div class="lighting-header-top">
|
||
其中LED高效灯具占比为{{
|
||
ledProportion
|
||
}}%，其他灯具占比为{{
|
||
Number(EnergyReportInfo.otherProportion)
|
||
}}%，合计照明数量为{{ EnergyReportInfo.ratioNum }}盏。
|
||
</div>
|
||
<div class="lighting-same">
|
||
<div class="lighting-div">
|
||
<img
|
||
class="lighting-img-width"
|
||
src="@/assets/manage-img.png"
|
||
alt=""
|
||
/>
|
||
<h1>诊断分析</h1>
|
||
</div>
|
||
<div class="lighting-text">
|
||
通过现场诊断及数据分析，照明系统的整体设备工况{{ EnergyReportInfo.ratioWholeDeviceCondition }}，整体运营管理水平{{ EnergyReportInfo.ratioOverallLevel }}。
|
||
智能化控制系统{{ EnergyReportInfo.ratioControlSystem }}。
|
||
</div>
|
||
</div>
|
||
<div class="lighting-same" v-if="lightTransform">
|
||
<div class="lighting-div">
|
||
<img
|
||
class="lighting-img-width"
|
||
src="@/assets/manage-img.png"
|
||
alt=""
|
||
/>
|
||
<h1>提升建议</h1>
|
||
</div>
|
||
<div class="lighting-text" v-if="EnergyReportInfo.lightTransform&&JSON.parse(EnergyReportInfo.lightTransform).length > 0">
|
||
<h1>技术改造</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(EnergyReportInfo.lightTransform)"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、 {{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 配电系统 -->
|
||
<div
|
||
v-if="EnergyReportInfo.existDistribute == 'true'"
|
||
class="distributing-system"
|
||
@click="mouse('.distributing-system')"
|
||
>
|
||
<div class="distributing-div-head">
|
||
<img class="distributing-img1" src="@/assets/summarize.png" alt="" />
|
||
<h1>配电系统</h1>
|
||
</div>
|
||
<div class="distributing-disp">
|
||
<div class="distributing-center">
|
||
<div class="distributing-color">电压等级</div>
|
||
<div class="distributing-border">
|
||
{{ EnergyReportInfo.voltageLevelName }}
|
||
</div>
|
||
</div>
|
||
<div class="distributing-center">
|
||
<div class="distributing-color">额定容量</div>
|
||
<div class="distributing-border">
|
||
{{ EnergyReportInfo.distributeCapacity }}
|
||
</div>
|
||
</div>
|
||
<div class="distributing-center">
|
||
<div class="distributing-color">最大需量</div>
|
||
<div class="distributing-border">
|
||
{{ EnergyReportInfo.maxNeed }}千瓦
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="distributingStyle-disp">
|
||
<div class="distributingStyle-center1">
|
||
<div class="distributingStyle-width">变压器</div>
|
||
<div class="distributingStyle-border">
|
||
{{ EnergyReportInfo.transformerInfo }}
|
||
</div>
|
||
</div>
|
||
<div class="distributingStyle-center2">
|
||
<div class="distributingStyle-color">最长设备投运年限</div>
|
||
<div class="distributingStyle-border">
|
||
{{ EnergyReportInfo.useYear }}年
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="distributing-text">
|
||
{{ EnergyReportInfo.charging }}新能源充电桩，
|
||
<span v-if=" chargingTypeName ">设备类型为{{ EnergyReportInfo.chargingTypeName }}，</span>
|
||
{{ EnergyReportInfo.inteVehicle }}车联网平台。
|
||
</div>
|
||
<div class="distributing-div">
|
||
<img class="distributing-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>诊断分析</h1>
|
||
</div>
|
||
<div class="distributing-radius">
|
||
通过现场调研及数据分析，配电系统的整体设备工况 {{ EnergyReportInfo.distributeDeviceCondition }}，整体运营管理水平{{ EnergyReportInfo.distributeOverallLevel }}。
|
||
</div>
|
||
<div class="distributing-div">
|
||
<img class="distributing-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>提升建议</h1>
|
||
</div>
|
||
<div class="distributing-list">
|
||
<div class="distributing-list-div">
|
||
<h1>运营管理</h1>
|
||
<div>1、 建议根据季节性负荷变化指定变压器投运方案。</div>
|
||
<div v-if="distributeTransform">
|
||
<h1>技术改造</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(
|
||
EnergyReportInfo.distributeTransform
|
||
)"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、 {{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 生活热水系统 -->
|
||
<div
|
||
v-if="EnergyReportInfo.existHotWater == 'true'"
|
||
class="hotwator-system"
|
||
@click="mouse('.hotwator-system')"
|
||
>
|
||
<div class="hotwator-title-head">
|
||
<img class="hotwator-img1" src="@/assets/summarize.png" alt="" />
|
||
<h1>生活热水系统</h1>
|
||
</div>
|
||
<div class="hotwator-text">
|
||
主要设备类型为{{ EnergyReportInfo.hotWaterType }},
|
||
集中式热水设备：{{
|
||
EnergyReportInfo.deviceChildType
|
||
}},消耗能源种类为{{ EnergyReportInfo.hotWaterEnergyType }},日用水量{{
|
||
EnergyReportInfo.waterDay
|
||
}}升，设定水温:{{ EnergyReportInfo.setWaterWarm }}摄氏度。
|
||
</div>
|
||
<div class="hotwator-title">
|
||
<img class="hotwator-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>诊断分析</h1>
|
||
</div>
|
||
<div class="hotwator-bgc">
|
||
|
||
通过现场诊断及数据分析， 生活热水系统的整体设备工况{{ EnergyReportInfo.hotWaterDeviceCondition }}，整体运营管理水平{{ EnergyReportInfo.hotWaterOverallLevel}}。
|
||
<span v-if="EnergyReportInfo.hotWaterDeviceProblem"
|
||
>同时生活热水系统的主要用能设备存在{{ EnergyReportInfo.hotWaterDeviceProblem }}、</span>智能化控制系统 {{ EnergyReportInfo.hotWaterCtrlSystem }}。
|
||
</div>
|
||
<div class="hotwator-title hot-last-title">
|
||
<img class="hotwator-img" src="@/assets/manage-img.png" alt="" />
|
||
<h1>提升建议</h1>
|
||
</div>
|
||
<div class="hotwator-list">
|
||
<div class="hotwator-list-div">
|
||
<div>
|
||
<h1>运营管理</h1>
|
||
<div>
|
||
<div>1、对设备和配套装置定期进行保养。</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="EnergyReportInfo.hotWaterTransform&&JSON.parse(EnergyReportInfo.hotWaterTransform).length>0">
|
||
<h1>技术改造</h1>
|
||
<div
|
||
v-for="(item, index) in JSON.parse(EnergyReportInfo.hotWaterTransform)"
|
||
:key="index"
|
||
>
|
||
{{ index + 1 }}、 {{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import anchorPoint from './anchor-point1.vue'
|
||
// 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 {
|
||
// 定时器
|
||
t1: 0,
|
||
t2: 0,
|
||
timer: null,
|
||
anchorPointshow: false, //锚点显示
|
||
reportTimer: null,
|
||
// EnergyReportInfo: {}
|
||
|
||
}
|
||
},
|
||
components: { anchorPoint },
|
||
computed: {
|
||
...mapState('report', ['EnergyReportInfo']),
|
||
show() {
|
||
return localStorage.getItem('show') == 'true'
|
||
},
|
||
ledProportion() {
|
||
if(this.EnergyReportInfo && (!this.EnergyReportInfo.ledProportion || this.EnergyReportInfo.ledProportion == 'null')) {
|
||
return 0
|
||
}
|
||
return this.EnergyReportInfo.ledProportion
|
||
},
|
||
useYear() {
|
||
if(this.EnergyReportInfo && this.EnergyReportInfo.useYear == 0) {
|
||
return 1
|
||
}
|
||
return this.EnergyReportInfo.useYear
|
||
},
|
||
centralizeAdvice() {
|
||
if (!this.EnergyReportInfo.centralizeAdvice) {
|
||
return false
|
||
}
|
||
return (
|
||
JSON.parse(this.EnergyReportInfo.centralizeAdvice).overallManage.length > 0
|
||
)
|
||
},
|
||
multipleAdvice() {
|
||
if (!this.EnergyReportInfo.multipleAdvice) {
|
||
return false
|
||
}
|
||
return (
|
||
JSON.parse(this.EnergyReportInfo.multipleAdvice).overallManage.length >
|
||
0
|
||
)
|
||
},
|
||
lightTransform() {
|
||
if (!this.EnergyReportInfo.lightTransform) {
|
||
return false
|
||
}
|
||
return this.EnergyReportInfo.lightTransform
|
||
},
|
||
distributeTransform() {
|
||
if (!this.EnergyReportInfo.distributeTransform) {
|
||
return false
|
||
}
|
||
return this.EnergyReportInfo.distributeTransform
|
||
},
|
||
hotWaterTransform() {
|
||
if (!this.EnergyReportInfo.hotWaterTransform) {
|
||
return false
|
||
}
|
||
return this.EnergyReportInfo.hotWaterTransform
|
||
},
|
||
chargingTypeName() {
|
||
if(this.EnergyReportInfo.chargingTypeName && this.EnergyReportInfo.chargingTypeName != '无') {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
},
|
||
created() {
|
||
setTitle('主要设备水平')
|
||
this.getEnergyReportInfo()
|
||
|
||
},
|
||
methods: {
|
||
...mapMutations('report', ['setEnergyReportInfo']),
|
||
|
||
// 右边锚点功能
|
||
mouse(v) {
|
||
if (this.show) {
|
||
this.$refs.anchorChild.checkoutAnchor(v)
|
||
}
|
||
},
|
||
// 去除“技术改造-”字段
|
||
formater(val) {
|
||
let reg = '技术改造-'
|
||
return val.replace(reg, '')
|
||
},
|
||
// 去除“运营管理-”字段
|
||
formater1(val) {
|
||
let reg = '运营管理-'
|
||
return val.replace(reg, '')
|
||
},
|
||
// 滚动
|
||
handScroll(e) {
|
||
this.anchorPointshow = true
|
||
if (e.target.scrollTop < this.getHeight('.heating-system')) {
|
||
this.mouse('.device')
|
||
} else if (
|
||
e.target.scrollTop >= this.getHeight('.device') &&
|
||
e.target.scrollTop < this.getHeight('.lighting-system')
|
||
) {
|
||
this.mouse('.heating-system')
|
||
} else if (
|
||
e.target.scrollTop >= this.getHeight('.heating-system') &&
|
||
e.target.scrollTop < this.getHeight('.distributing-system')
|
||
) {
|
||
this.mouse('.lighting-system')
|
||
} else if (
|
||
e.target.scrollTop >= this.getHeight('.lighting-system') &&
|
||
e.target.scrollTop < this.getHeight('.hotwator-system')
|
||
) {
|
||
this.mouse('.distributing-system')
|
||
} else if (e.target.scrollTop >= this.getHeight('.distributing-system')) {
|
||
this.mouse('.hotwator-system')
|
||
}
|
||
clearTimeout(this.timer)
|
||
this.timer = setTimeout(this.isScrollEnd, 1000)
|
||
this.t1 = document.documentElement.scrollTop || document.body.scrollTop
|
||
},
|
||
// 滚动条隐藏
|
||
isScrollEnd() {
|
||
this.t2 = document.documentElement.scrollTop || document.body.scrollTop
|
||
if (this.t2 == this.t1) {
|
||
this.anchorPointshow = false
|
||
}
|
||
},
|
||
// 获取元素距离顶部的距离
|
||
getHeight(dom) {
|
||
let selectDom = document.querySelector(dom)
|
||
if(!selectDom) {
|
||
return
|
||
}
|
||
let realTop = selectDom.offsetTop
|
||
realTop += selectDom.offsetParent.offsetTop
|
||
return realTop
|
||
},
|
||
|
||
|
||
|
||
//不同角色，不同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">
|
||
.scroll {
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.system {
|
||
background-color: #f5f5f5;
|
||
.device {
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
.device-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 700;
|
||
margin-bottom: 17px;
|
||
img {
|
||
// height: 10px;
|
||
width: 100px !important;
|
||
}
|
||
.device-title-color {
|
||
// margin: 0 10px;
|
||
// width: 280px;
|
||
color: #146660;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
.device-same {
|
||
margin-top: 10px;
|
||
.device-div {
|
||
margin: 10px 0;
|
||
display: flex;
|
||
.device-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
.device-img1 {
|
||
width: 30px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.device-text {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
.device-table {
|
||
margin-top: 10px;
|
||
.device-table-header {
|
||
text-align: center;
|
||
color: #fff;
|
||
background-color: #40aba2;
|
||
}
|
||
|
||
.device-table-main {
|
||
border: 1px solid #40aba2;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
table {
|
||
border-collapse: collapse;
|
||
border: 1px solid #40aba2;
|
||
box-sizing: border-box;
|
||
tr > td:first-child {
|
||
color: #40aba2;
|
||
}
|
||
td {
|
||
border: 1px solid #40aba2;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
.con:nth-child(2) {
|
||
padding: 0 0.2rem;
|
||
}
|
||
}
|
||
|
||
.device-list {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
.device-list-div {
|
||
h1 {
|
||
margin: 10px 0;
|
||
}
|
||
.device-list-item {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.anchor-point {
|
||
position: fixed;
|
||
top: -120px;
|
||
right: -165px;
|
||
z-index: 9999;
|
||
}
|
||
.heating-system {
|
||
background-color: #fff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
border-radius: 0.266667rem;
|
||
|
||
.heating-div,
|
||
.heating-div-head {
|
||
margin: 10px 0;
|
||
display: flex;
|
||
.heating-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
.heating-img1 {
|
||
width: 30px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.heating-div-head {
|
||
margin: 0 0 10px 0;
|
||
}
|
||
.heating-header {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.heating-border:last-child {
|
||
margin-right: 0px;
|
||
}
|
||
.heating-border {
|
||
border: 1px solid #40aba2;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
margin-right: 3px;
|
||
.heating-bgc {
|
||
background-color: #40aba2;
|
||
color: #fff;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
.heating-pad {
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
.heating-header-test {
|
||
margin-top: 10px;
|
||
}
|
||
.device-list {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
.device-list-div {
|
||
h1 {
|
||
margin-bottom: 10px;
|
||
}
|
||
div {
|
||
margin: 0px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.lighting-system {
|
||
background-color: #fff;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 0.266667rem;
|
||
.lighting-div,
|
||
.lighting-div-head {
|
||
margin: 10px 0;
|
||
display: flex;
|
||
.lighting-img {
|
||
width: 30px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
.lighting-img-width {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.lighting-div-head {
|
||
margin: 0 0 10px 0;
|
||
}
|
||
.lighting-header {
|
||
text-align: center;
|
||
border: 1px solid #10968b;
|
||
.lighting-header-div1 {
|
||
color: #fff;
|
||
background-color: #10968b;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
.lighting-header-div2 {
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.lighting-header-top {
|
||
margin-top: 10px;
|
||
}
|
||
.lighting-same {
|
||
margin-top: 10px;
|
||
.lighting-div {
|
||
margin: 10px 0;
|
||
display: flex;
|
||
.lighting-img {
|
||
width: 30px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.lighting-text {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
h1 {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
} // 配电系统
|
||
.distributing-system {
|
||
background-color: #fff;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 0.266667rem;
|
||
.distributing-div,
|
||
.distributing-div-head {
|
||
margin: 10px 0;
|
||
display: flex;
|
||
.distributing-img1 {
|
||
width: 30px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
.distributing-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.distributing-div-head {
|
||
margin: 0 0 10px 0;
|
||
}
|
||
.distributing-disp {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.distributing-center:last-child {
|
||
margin-right: 0;
|
||
}
|
||
.distributing-center {
|
||
text-align: center;
|
||
flex: 1;
|
||
margin-right: 5px;
|
||
.distributing-color {
|
||
background-color: #10968b;
|
||
padding: 5px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
.distributing-width {
|
||
background-color: #10968b;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
flex: 1.5 !important;
|
||
}
|
||
.distributing-border {
|
||
border: 1px solid #10968b;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
.distributingStyle-disp {
|
||
display: flex;
|
||
margin-top: 5px;
|
||
.distributingStyle-center1 {
|
||
flex: 1.5;
|
||
margin-right: 5px;
|
||
text-align: center;
|
||
.distributingStyle-width {
|
||
background-color: #10968b;
|
||
padding: 5px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
.distributingStyle-border {
|
||
border: 1px solid #10968b;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
font-size: 13px;
|
||
height: 1.2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.distributingStyle-center2 {
|
||
flex: 1;
|
||
text-align: center;
|
||
.distributingStyle-color {
|
||
background-color: #10968b;
|
||
color: #fff;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
}
|
||
.distributingStyle-border {
|
||
border: 1px solid #10968b;
|
||
padding: 5px;
|
||
box-sizing: border-box;
|
||
height: 1.2rem;
|
||
line-height: 1.2rem;
|
||
}
|
||
}
|
||
}
|
||
.distributing-text {
|
||
margin-top: 10px;
|
||
}
|
||
.distributing-radius {
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
border-radius: 10px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.distributing-list {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
.distributing-list-div {
|
||
h1 {
|
||
margin-bottom: 10px;
|
||
}
|
||
div {
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
} // 生活热水系统
|
||
.hotwator-system {
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 0.266667rem;
|
||
.hotwator-title,
|
||
.hotwator-title-head {
|
||
// margin: 10px 0;
|
||
display: flex;
|
||
.hotwator-img1 {
|
||
width: 30px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
.hotwator-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.hot-last-title {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.hotwator-text {
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
.hotwator-bgc {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
border-radius: 10px;
|
||
}
|
||
.hotwator-list {
|
||
background-color: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-sizing: border-box;
|
||
.hotwator-list-div {
|
||
h1 {
|
||
margin-bottom: 10px;
|
||
}
|
||
div {
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.heating-text{
|
||
background-color: #f5f5f5;
|
||
padding: 0.266667rem;
|
||
border-radius: 0.133333rem;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|