jiangyinzhi
988 lines
28 KiB
Vue
988 lines
28 KiB
Vue
<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 { 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&&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&&this.EnergyReportInfo.coalSituation) {
|
||
this.pieOption.series[0].data = JSON.parse(
|
||
this.EnergyReportInfo.coalSituation
|
||
)
|
||
this.pieOption.series[0].type = 'pie'
|
||
this.createPieChart()
|
||
}
|
||
// 扇形图
|
||
if (this.EnergyReportInfo&&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 {
|
||
let reportCustomerId = localStorage.getItem('reportCustomerId')
|
||
if(reportCustomerId&&this.$route.name=='energyReport'){
|
||
return
|
||
}
|
||
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>
|