|
@@ -1,219 +1,236 @@
|
|
|
<template>
|
|
|
- <div class="MicrYaHei">
|
|
|
- <p>
|
|
|
- <span class="Micbold">根据历史数据计算</span>
|
|
|
- <span></span>
|
|
|
- <span>本日概况</span>
|
|
|
- <span></span>
|
|
|
- <span>相似日概况</span>
|
|
|
- </p>
|
|
|
- <div class="count-data">
|
|
|
- <div class="outdoor">
|
|
|
- <div class="outdoor-left" :style="{'height':((current.tempOutdoor)/maxArr[0])*160 + 'px'}">
|
|
|
- <span>{{current.tempOutdoor.toFixed(1)}}℃</span>
|
|
|
+ <div class='MicrYaHei'>
|
|
|
+ <p>
|
|
|
+ <span class='Micbold'>根据历史数据计算</span>
|
|
|
+ <span></span>
|
|
|
+ <span>本日概况</span>
|
|
|
+ <span></span>
|
|
|
+ <span>相似日概况</span>
|
|
|
+ </p>
|
|
|
+ <div class='count-data'>
|
|
|
+ <div class='outdoor'>
|
|
|
+ <div class='outdoor-left' :style='{"height":((current.tempOutdoor)/maxArr[0])*160 + "px"}'>
|
|
|
+ <span>{{current.tempOutdoor.toFixed(1)}}℃</span>
|
|
|
+ </div>
|
|
|
+ <div class='outdoor-right' :style='{"height":((similarDay.tempOutdoor)/maxArr[0])*160 + "px"}'>
|
|
|
+ <span>{{similarDay.tempOutdoor.toFixed(1)}}℃</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='indoor'>
|
|
|
+ <div class='indoor-left' :style='{"height": ((current.tempIndoor)/maxArr[1])*160 + "px"}'>
|
|
|
+ <span>{{current.tempIndoor.toFixed(1)}}℃</span>
|
|
|
+ </div>
|
|
|
+ <div class='indoor-right' :style='{"height": ((similarDay.tempIndoor)/maxArr[1])*160 + "px"}'>
|
|
|
+ <span>{{similarDay.tempIndoor.toFixed(1)}}℃</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='coldWar'>
|
|
|
+ <div class='coldWar-left' :style='{"height": ((current.energy)/maxArr[2])*160 + "px"}'>
|
|
|
+ <span>{{current.energy.toFixed(0)}}kWh</span>
|
|
|
+ </div>
|
|
|
+ <div class='coldWar-right' :style='{"height": ((similarDay.energy)/maxArr[2])*160 + "px"}'>
|
|
|
+ <span>{{similarDay.energy.toFixed(0)}}kWh</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="outdoor-right"
|
|
|
- :style="{'height':((similarDay.tempOutdoor)/maxArr[0])*160 + 'px'}"
|
|
|
- >
|
|
|
- <span>{{similarDay.tempOutdoor.toFixed(1)}}℃</span>
|
|
|
+ <div class='count-text'>
|
|
|
+ <div class='outdoor-text'>室外平均温度</div>
|
|
|
+ <div class='indoor-text'>室内平均温度</div>
|
|
|
+ <div class='coldWar-text'>冷站能耗</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="indoor">
|
|
|
- <div class="indoor-left" :style="{'height': ((current.tempIndoor)/maxArr[1])*160 + 'px'}">
|
|
|
- <span>{{current.tempIndoor.toFixed(1)}}℃</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="indoor-right"
|
|
|
- :style="{'height': ((similarDay.tempIndoor)/maxArr[1])*160 + 'px'}"
|
|
|
- >
|
|
|
- <span>{{similarDay.tempIndoor.toFixed(1)}}℃</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="coldWar">
|
|
|
- <div class="coldWar-left" :style="{'height': ((current.energy)/maxArr[2])*160 + 'px'}">
|
|
|
- <span>{{current.energy.toFixed(0)}}kWh</span>
|
|
|
- </div>
|
|
|
- <div class="coldWar-right" :style="{'height': ((similarDay.energy)/maxArr[2])*160 + 'px'}">
|
|
|
- <span>{{similarDay.energy.toFixed(0)}}kWh</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="count-text">
|
|
|
- <div class="outdoor-text">室外平均温度</div>
|
|
|
- <div class="indoor-text">室内平均温度</div>
|
|
|
- <div class="coldWar-text">冷站能耗</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- props: ["current", "similarDay", "maxArr"],
|
|
|
- mounted() {}
|
|
|
-};
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ props: ['current', 'similarDay', 'maxArr'],
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ if (this.current) {
|
|
|
+ if (this.current.tempOutdoor == '-9999' || this.current.tempOutdoor == '-9998') {
|
|
|
+ this.current.tempOutdoor = 0
|
|
|
+ }
|
|
|
+ if (this.current.tempIndoor == '-9999' || this.current.tempIndoor == '-9998') {
|
|
|
+ this.current.tempIndoor = 0
|
|
|
+ }
|
|
|
+ if (this.current.energy == '-9999' || this.current.energy == '-9998') {
|
|
|
+ this.current.energy = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ current(val, old) {
|
|
|
+ this.current = val
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
p {
|
|
|
- margin: 0;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 30px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- span:nth-of-type(1) {
|
|
|
- height: 24px;
|
|
|
- font-size: 16px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 21px;
|
|
|
- margin-right: 24px;
|
|
|
- }
|
|
|
- span:nth-of-type(2) {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- span:nth-of-type(3) {
|
|
|
- height: 18px;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 16px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- span:nth-of-type(4) {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background: rgba(0, 214, 185, 1);
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- span:nth-of-type(5) {
|
|
|
- height: 18px;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
-}
|
|
|
-.count-data {
|
|
|
- height: 200px;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 1px solid #e4e6e7;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- .outdoor {
|
|
|
- width: 208px;
|
|
|
- height: 200px;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 50px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
+ align-items: center;
|
|
|
span {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: -25px;
|
|
|
- left: 0;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 19px;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
- .outdoor-left {
|
|
|
- width: 100px;
|
|
|
- // height: 121px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 21px;
|
|
|
+ margin-right: 24px;
|
|
|
}
|
|
|
- .outdoor-right {
|
|
|
- width: 100px;
|
|
|
- height: 141px;
|
|
|
- background: rgba(0, 214, 185, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
+ span:nth-of-type(2) {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
- }
|
|
|
- .indoor {
|
|
|
- width: 208px;
|
|
|
- height: 200px;
|
|
|
- position: relative;
|
|
|
- span {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: -25px;
|
|
|
- left: 0;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 19px;
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 16px;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
- .indoor-left {
|
|
|
- width: 100px;
|
|
|
- height: 121px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
+ span:nth-of-type(4) {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background: rgba(0, 214, 185, 1);
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
- .indoor-right {
|
|
|
- width: 100px;
|
|
|
- height: 131px;
|
|
|
- background: rgba(0, 214, 185, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
+ span:nth-of-type(5) {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 16px;
|
|
|
}
|
|
|
- }
|
|
|
- .coldWar {
|
|
|
- width: 208px;
|
|
|
+}
|
|
|
+.count-data {
|
|
|
height: 200px;
|
|
|
- position: relative;
|
|
|
- span {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: -25px;
|
|
|
- left: 0;
|
|
|
- height: 22px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(31, 36, 41, 1);
|
|
|
- line-height: 19px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #e4e6e7;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .outdoor {
|
|
|
+ width: 208px;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: -25px;
|
|
|
+ left: 0;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .outdoor-left {
|
|
|
+ width: 100px;
|
|
|
+ // height: 121px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .outdoor-right {
|
|
|
+ width: 100px;
|
|
|
+ height: 141px;
|
|
|
+ background: rgba(0, 214, 185, 1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- .coldWar-left {
|
|
|
- width: 100px;
|
|
|
- height: 84px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
+ .indoor {
|
|
|
+ width: 208px;
|
|
|
+ height: 200px;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: -25px;
|
|
|
+ left: 0;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .indoor-left {
|
|
|
+ width: 100px;
|
|
|
+ height: 121px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .indoor-right {
|
|
|
+ width: 100px;
|
|
|
+ height: 131px;
|
|
|
+ background: rgba(0, 214, 185, 1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- .coldWar-right {
|
|
|
- width: 100px;
|
|
|
- height: 137px;
|
|
|
- background: rgba(0, 214, 185, 1);
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
+ .coldWar {
|
|
|
+ width: 208px;
|
|
|
+ height: 200px;
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: -25px;
|
|
|
+ left: 0;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .coldWar-left {
|
|
|
+ width: 100px;
|
|
|
+ height: 84px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .coldWar-right {
|
|
|
+ width: 100px;
|
|
|
+ height: 137px;
|
|
|
+ background: rgba(0, 214, 185, 1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.count-text {
|
|
|
- height: 16px;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(100, 108, 115, 1);
|
|
|
- line-height: 16px;
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- margin-top: 12px;
|
|
|
- margin-bottom: 34px;
|
|
|
- justify-content: space-around;
|
|
|
- .outdoor-text,
|
|
|
- .indoor-text,
|
|
|
- .coldWar-text {
|
|
|
- width: 208px;
|
|
|
- }
|
|
|
+ height: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 16px;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-bottom: 34px;
|
|
|
+ justify-content: space-around;
|
|
|
+ .outdoor-text,
|
|
|
+ .indoor-text,
|
|
|
+ .coldWar-text {
|
|
|
+ width: 208px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|