123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- <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":maxArr[0]=="--"?0+ "px":((current.tempOutdoor!="--"?current.tempOutdoor:0)/maxArr[0])*160 + "px"}'
- >
- <span>{{current.tempOutdoor=="--"?"--":current.tempOutdoor.toFixed(1)}}℃</span>
- </div>
- <div
- class='outdoor-right'
- :style='{"height":maxArr[0]=="--"?0+ "px":((similarDay.tempOutdoor!="--"?similarDay.tempOutdoor:0)/maxArr[0])*160 + "px"}'
- >
- <span>{{similarDay.tempOutdoor=="--"?"--":similarDay.tempOutdoor.toFixed(1)}}℃</span>
- </div>
- </div>
- <div class='indoor'>
- <div
- class='indoor-left'
- :style='{"height":maxArr[1]=="--"?0+ "px": ((current.tempIndoor!="--"?current.tempIndoor:0)/maxArr[1])*160 + "px"}'
- >
- <span>{{current.tempIndoor=="--"?"--":current.tempIndoor.toFixed(1)}}℃</span>
- </div>
- <div
- class='indoor-right'
- :style='{"height":maxArr[1]=="--"?0+ "px": ((similarDay.tempIndoor!="--"?similarDay.tempIndoor:0)/maxArr[1])*160 + "px"}'
- >
- <span>{{similarDay.tempIndoor=="--"?"--":similarDay.tempIndoor.toFixed(1)}}℃</span>
- </div>
- </div>
- <div class='coldWar'>
- <div class='coldWar-left' :style='{"height":maxArr[2]=="--"?0+ "px": ((current.energy!="--"?current.energy:0)/maxArr[2])*160 + "px"}'>
- <span>{{current.energy=="--"?"--":current.energy.toFixed(0)}}kWh</span>
- </div>
- <div
- class='coldWar-right'
- :style='{"height": maxArr[2]=="--"?0+ "px":((similarDay.energy!="--"?similarDay.energy:0)/maxArr[2])*160 + "px"}'
- >
- <span>{{similarDay.energy=="--"?"--":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() {
- this.init()
- },
- methods: {
- init() {
- if (this.current) {
- if (this.current.tempOutdoor == '-9999' || this.current.tempOutdoor == '-9998') {
- this.current.tempOutdoor = '--'
- }
- if (this.current.tempIndoor == '-9999' || this.current.tempIndoor == '-9998') {
- this.current.tempIndoor = '--'
- }
- if (this.current.energy == '-9999' || this.current.energy == '-9998') {
- this.current.energy = '--'
- }
- }
- console.log('11111', this.current.tempOutdoor, this.current.tempIndoor, this.current.energy)
- console.log('22222', this.similarDay.tempOutdoor, this.similarDay.tempIndoor, this.similarDay.energy)
- console.log('33333', this.maxArr)
- }
- },
- 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;
- 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;
- }
- }
- .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 {
- 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;
- }
- }
- </style>
|