|
|
|
@ -1,36 +1,24 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="total-center"> |
|
|
|
<div class="total-center"> |
|
|
|
<!-- 园区能耗总体情况 --> |
|
|
|
<!-- 园区能耗总体情况 --> |
|
|
|
<div |
|
|
|
<div class="analy-total" :style="{ |
|
|
|
class="analy-total" |
|
|
|
height: area == 1 ? '26.937rem' : '24.937rem', |
|
|
|
:style="{ |
|
|
|
backgroundImage: |
|
|
|
height: area == 1 ? '26.937rem' : '24.937rem', |
|
|
|
'url(' + |
|
|
|
backgroundImage: |
|
|
|
require(area == 1 |
|
|
|
'url(' + |
|
|
|
? '../../../public/img/analysis/total-analy.png' |
|
|
|
require(area == 1 |
|
|
|
: '../../../public/img/analysis/tower-total-analy.png') + |
|
|
|
? '../../../public/img/analysis/total-analy.png' |
|
|
|
')', |
|
|
|
: '../../../public/img/analysis/tower-total-analy.png') + |
|
|
|
}"> |
|
|
|
')', |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<p class="yq-title">{{ area == 1 ? "园区" : "塔台" }}能耗总体情况</p> |
|
|
|
<p class="yq-title">{{ area == 1 ? "园区" : "塔台" }}能耗总体情况</p> |
|
|
|
<div class="change-time"> |
|
|
|
<div class="change-time"> |
|
|
|
<div |
|
|
|
<div @click="selectDate(1)" :style="{ backgroundColor: choseTime == 1 ? 'rgb(8,166,255)' : '' }"> |
|
|
|
@click="selectDate(1)" |
|
|
|
|
|
|
|
:style="{ backgroundColor: choseTime == 1 ? 'rgb(8,166,255)' : '' }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
年 |
|
|
|
年 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div @click="selectDate(2)" :style="{ backgroundColor: choseTime == 2 ? 'rgb(8,166,255)' : '' }"> |
|
|
|
@click="selectDate(2)" |
|
|
|
|
|
|
|
:style="{ backgroundColor: choseTime == 2 ? 'rgb(8,166,255)' : '' }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
月 |
|
|
|
月 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div @click="selectDate(3)" :style="{ backgroundColor: choseTime == 3 ? 'rgb(8,166,255)' : '' }"> |
|
|
|
@click="selectDate(3)" |
|
|
|
|
|
|
|
:style="{ backgroundColor: choseTime == 3 ? 'rgb(8,166,255)' : '' }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
日 |
|
|
|
日 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -39,203 +27,128 @@ |
|
|
|
<img src="../../../public/img/analysis/total-icon.png" /> |
|
|
|
<img src="../../../public/img/analysis/total-icon.png" /> |
|
|
|
<div class="analy-total-detail-all-left"> |
|
|
|
<div class="analy-total-detail-all-left"> |
|
|
|
消耗量 |
|
|
|
消耗量 |
|
|
|
<span class="big-size" |
|
|
|
<span class="big-size"><span>{{ |
|
|
|
><span>{{ |
|
|
|
(consumeSituation.totalKgce + "").substring(".") > 2 |
|
|
|
(consumeSituation.totalKgce + "").substring(".") > 2 |
|
|
|
? consumeSituation.totalKgce.toFixed(2) |
|
|
|
? consumeSituation.totalKgce.toFixed(2) |
|
|
|
: consumeSituation.totalKgce |
|
|
|
: consumeSituation.totalKgce |
|
|
|
}}</span>kgce</span> |
|
|
|
}}</span |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem">同比</span> |
|
|
|
>kgce</span |
|
|
|
<img class="compare" :src=" |
|
|
|
> |
|
|
|
srcImg( |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem" |
|
|
|
consumeSituation.totalKgce, |
|
|
|
>同比</span |
|
|
|
consumeSituation.preTotalKgce |
|
|
|
> |
|
|
|
) |
|
|
|
<img |
|
|
|
" /> |
|
|
|
class="compare" |
|
|
|
<span :style="{ |
|
|
|
:src=" |
|
|
|
color: styleColor( |
|
|
|
srcImg( |
|
|
|
consumeSituation.totalKgce, |
|
|
|
consumeSituation.totalKgce, |
|
|
|
consumeSituation.preTotalKgce |
|
|
|
consumeSituation.preTotalKgce |
|
|
|
), |
|
|
|
) |
|
|
|
}">{{ |
|
|
|
" |
|
|
|
consumePercent( |
|
|
|
/> |
|
|
|
consumeSituation.totalKgce, |
|
|
|
<span |
|
|
|
consumeSituation.preTotalKgce |
|
|
|
:style="{ |
|
|
|
) |
|
|
|
color: styleColor( |
|
|
|
}}%</span> |
|
|
|
consumeSituation.totalKgce, |
|
|
|
|
|
|
|
consumeSituation.preTotalKgce |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
>{{ |
|
|
|
|
|
|
|
consumePercent( |
|
|
|
|
|
|
|
consumeSituation.totalKgce, |
|
|
|
|
|
|
|
consumeSituation.preTotalKgce |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
}}%</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-all-center"> |
|
|
|
<p class="analy-total-detail-all-center"> |
|
|
|
单位面积总能耗 |
|
|
|
单位面积总能耗 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitAreaTotalKgce }}</span>kgce</span> |
|
|
|
><span>{{ consumeSituation.unitAreaTotalKgce }}</span |
|
|
|
|
|
|
|
>kgce</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-all-right"> |
|
|
|
<p class="analy-total-detail-all-right"> |
|
|
|
人均能耗 |
|
|
|
人均能耗 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitPersonTotalKgce }}</span>kgce</span> |
|
|
|
><span>{{ consumeSituation.unitPersonTotalKgce }}</span |
|
|
|
|
|
|
|
>kgce</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="analy-total-detail-electric" style="margin-top: 1.875rem"> |
|
|
|
<div class="analy-total-detail-electric" style="margin-top: 1.875rem"> |
|
|
|
<img src="../../../public/img/analysis/electric-icon.png" /> |
|
|
|
<img src="../../../public/img/analysis/electric-icon.png" /> |
|
|
|
<div class="analy-total-detail-electric-left"> |
|
|
|
<div class="analy-total-detail-electric-left"> |
|
|
|
消耗量 |
|
|
|
消耗量 |
|
|
|
<span class="big-size" |
|
|
|
<span class="big-size"><span>{{ consumeSituation.elect }}</span>kw·h</span> |
|
|
|
><span>{{ consumeSituation.elect }}</span |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem">同比</span> |
|
|
|
>kw·h</span |
|
|
|
<img class="compare" :src="srcImg(consumeSituation.elect, consumeSituation.preElect)" /> |
|
|
|
> |
|
|
|
<span :style="{ |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem" |
|
|
|
color: styleColor( |
|
|
|
>同比</span |
|
|
|
consumeSituation.elect, |
|
|
|
> |
|
|
|
consumeSituation.preElect |
|
|
|
<img |
|
|
|
), |
|
|
|
class="compare" |
|
|
|
}">{{ |
|
|
|
:src="srcImg(consumeSituation.elect, consumeSituation.preElect)" |
|
|
|
consumePercent( |
|
|
|
/> |
|
|
|
consumeSituation.elect, |
|
|
|
<span |
|
|
|
consumeSituation.preElect |
|
|
|
:style="{ |
|
|
|
) |
|
|
|
color: styleColor( |
|
|
|
}}%</span> |
|
|
|
consumeSituation.elect, |
|
|
|
|
|
|
|
consumeSituation.preElect |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
>{{ |
|
|
|
|
|
|
|
consumePercent( |
|
|
|
|
|
|
|
consumeSituation.elect, |
|
|
|
|
|
|
|
consumeSituation.preElect |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
}}%</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-electric-center"> |
|
|
|
<p class="analy-total-detail-electric-center"> |
|
|
|
单位面积耗电量 |
|
|
|
单位面积耗电量 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitAreaElect }}</span>kw·h</span> |
|
|
|
><span>{{ consumeSituation.unitAreaElect }}</span |
|
|
|
|
|
|
|
>kw·h</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-electric-right"> |
|
|
|
<p class="analy-total-detail-electric-right"> |
|
|
|
人均能耗 |
|
|
|
人均能耗 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitPersonElect }}</span>kw·h</span> |
|
|
|
><span>{{ consumeSituation.unitPersonElect }}</span |
|
|
|
|
|
|
|
>kw·h</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div class="analy-total-detail-water" :style="{ marginTop: area == 1 ? '1.875rem' : '2.812rem' }"> |
|
|
|
class="analy-total-detail-water" |
|
|
|
|
|
|
|
:style="{ marginTop: area == 1 ? '1.875rem' : '2.812rem' }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<img src="../../../public/img/analysis/water-icon.png" /> |
|
|
|
<img src="../../../public/img/analysis/water-icon.png" /> |
|
|
|
<div class="analy-total-detail-water-left"> |
|
|
|
<div class="analy-total-detail-water-left"> |
|
|
|
消耗量 |
|
|
|
消耗量 |
|
|
|
<span class="big-size" |
|
|
|
<span class="big-size"><span>{{ consumeSituation.water }}</span>m³</span> |
|
|
|
><span>{{ consumeSituation.water }}</span |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem">同比</span> |
|
|
|
>m³</span |
|
|
|
<img class="compare" :src="srcImg(consumeSituation.water, consumeSituation.preWater)" /> |
|
|
|
> |
|
|
|
<span :style="{ |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem" |
|
|
|
color: styleColor( |
|
|
|
>同比</span |
|
|
|
consumeSituation.water, |
|
|
|
> |
|
|
|
consumeSituation.preWater |
|
|
|
<img |
|
|
|
), |
|
|
|
class="compare" |
|
|
|
}"> |
|
|
|
:src="srcImg(consumeSituation.water, consumeSituation.preWater)" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span |
|
|
|
|
|
|
|
:style="{ |
|
|
|
|
|
|
|
color: styleColor( |
|
|
|
|
|
|
|
consumeSituation.water, |
|
|
|
|
|
|
|
consumeSituation.preWater |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ |
|
|
|
{{ |
|
|
|
consumePercent( |
|
|
|
consumePercent( |
|
|
|
consumeSituation.water, |
|
|
|
consumeSituation.water, |
|
|
|
consumeSituation.preWater |
|
|
|
consumeSituation.preWater |
|
|
|
) |
|
|
|
) |
|
|
|
}}%</span |
|
|
|
}}%</span> |
|
|
|
> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-water-center"> |
|
|
|
<p class="analy-total-detail-water-center"> |
|
|
|
单位面积耗水量 |
|
|
|
单位面积耗水量 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitAreaWater }}</span>m³</span> |
|
|
|
><span>{{ consumeSituation.unitAreaWater }}</span |
|
|
|
|
|
|
|
>m³</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-water-right"> |
|
|
|
<p class="analy-total-detail-water-right"> |
|
|
|
人均能耗 |
|
|
|
人均能耗 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitPersonWater }}</span>m³</span> |
|
|
|
><span>{{ consumeSituation.unitPersonWater }}</span |
|
|
|
|
|
|
|
>m³</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div class="analy-total-detail-warm" style="margin-top: 1.875rem" v-show="area == 1"> |
|
|
|
class="analy-total-detail-warm" |
|
|
|
|
|
|
|
style="margin-top: 1.875rem" |
|
|
|
|
|
|
|
v-show="area == 1" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<img src="../../../public/img/analysis/warm-icon.png" /> |
|
|
|
<img src="../../../public/img/analysis/warm-icon.png" /> |
|
|
|
<div class="analy-total-detail-warm-left"> |
|
|
|
<div class="analy-total-detail-warm-left"> |
|
|
|
消耗量 |
|
|
|
消耗量 |
|
|
|
<span class="big-size" |
|
|
|
<span class="big-size"><span>{{ consumeSituation.heat }}</span>MJ</span> |
|
|
|
><span>{{ consumeSituation.heat }}</span |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem">同比</span> |
|
|
|
>MJ</span |
|
|
|
<img class="compare" :src="srcImg(consumeSituation.heat, consumeSituation.preHeat)" /> |
|
|
|
> |
|
|
|
<span :style="{ |
|
|
|
<span style="margin-left: 1.25rem; margin-right: 0.312rem" |
|
|
|
color: styleColor( |
|
|
|
>同比</span |
|
|
|
consumeSituation.heat, |
|
|
|
> |
|
|
|
consumeSituation.preHeat |
|
|
|
<img |
|
|
|
), |
|
|
|
class="compare" |
|
|
|
}"> |
|
|
|
:src="srcImg(consumeSituation.heat, consumeSituation.preHeat)" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span |
|
|
|
|
|
|
|
:style="{ |
|
|
|
|
|
|
|
color: styleColor( |
|
|
|
|
|
|
|
consumeSituation.heat, |
|
|
|
|
|
|
|
consumeSituation.preHeat |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
}" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ |
|
|
|
{{ |
|
|
|
consumePercent(consumeSituation.heat, consumeSituation.preHeat) |
|
|
|
consumePercent(consumeSituation.heat, consumeSituation.preHeat) |
|
|
|
}}%</span |
|
|
|
}}%</span> |
|
|
|
> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-warm-center"> |
|
|
|
<p class="analy-total-detail-warm-center"> |
|
|
|
单位面积耗热量 |
|
|
|
单位面积耗热量 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitAreaHeat }}</span>MJ</span> |
|
|
|
><span>{{ consumeSituation.unitAreaHeat }}</span |
|
|
|
|
|
|
|
>MJ</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<!-- <div class="border-line"></div> --> |
|
|
|
<p class="analy-total-detail-warm-right"> |
|
|
|
<p class="analy-total-detail-warm-right"> |
|
|
|
人均能耗 |
|
|
|
人均能耗 |
|
|
|
<span |
|
|
|
<span><span>{{ consumeSituation.unitPersonHeat }}</span>MJ</span> |
|
|
|
><span>{{ consumeSituation.unitPersonHeat }}</span |
|
|
|
|
|
|
|
>MJ</span |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -282,6 +195,7 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
unitData: [], |
|
|
|
unitData: [], |
|
|
|
peopleData: [], |
|
|
|
peopleData: [], |
|
|
|
|
|
|
|
intervalTime2: null, |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
computed: { |
|
|
|
@ -317,8 +231,18 @@ export default { |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
beforeDestroy() { |
|
|
|
|
|
|
|
if (this.intervalTime2) { |
|
|
|
|
|
|
|
console.log('clearInterval2') |
|
|
|
|
|
|
|
clearInterval(this.intervalTime2); |
|
|
|
|
|
|
|
this.intervalTime2 = null; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
this.getData(); |
|
|
|
this.getData(); |
|
|
|
|
|
|
|
this.intervalTime2 = setInterval(() => { |
|
|
|
|
|
|
|
this.getData(); |
|
|
|
|
|
|
|
}, 30 * 60 * 1000) |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
getData() { |
|
|
|
getData() { |
|
|
|
|