|
@@ -1,29 +1,45 @@
|
|
|
<template>
|
|
|
<div class="an-content">
|
|
|
- <div class="an-box">
|
|
|
- <div class="an-box-1">
|
|
|
- <span class="span2">数据传输情况</span>
|
|
|
- <el-tag
|
|
|
- v-for="item in items"
|
|
|
- :key="item.label"
|
|
|
- :type="item.type"
|
|
|
- closable
|
|
|
- effect="dark">
|
|
|
- {{ item.label }}
|
|
|
- </el-tag>
|
|
|
- </div>
|
|
|
- <div class="an-box-1">
|
|
|
- <span class="span2">实际冷量</span> {{data.nowPlantLoad || 0}} kw <span class="span1"><span class="span2">未来1小时预测冷量 </span>{{data.predictedLoad1h || 0}} kw</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="an-center">
|
|
|
- <bom-box></bom-box>
|
|
|
- </div>
|
|
|
+ <div class="snapshotss-center2">
|
|
|
+ <div class="snapshotss-cont2-box1 MicrYaHei">
|
|
|
+ <span>数据传输情况</span>
|
|
|
+ <span :class="data.isExecuted==1?'span1':'span2'" >
|
|
|
+ 能耗
|
|
|
+ <img v-if="data.energyErrorFlag==1" src="../../assets/finish.png" alt />
|
|
|
+ <img v-else src="../../assets/wrong.png" alt />
|
|
|
+ </span>
|
|
|
+ <span :class="data.isExecuted==1?'span1':'span2'" >
|
|
|
+ 环境
|
|
|
+ <img v-if="data.environmentErrorFlag==1" src="../../assets/finish.png" alt />
|
|
|
+ <img v-else src="../../assets/wrong.png" alt />
|
|
|
+ </span>
|
|
|
+ <span :class="data.isExecuted==1?'span1':'span2'">
|
|
|
+ BA
|
|
|
+ <img v-if="data.baErrorFalg==1" src="../../assets/finish.png" alt />
|
|
|
+ <img v-else src="../../assets/wrong.png" alt />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="snapshotss-cont2-box2 MicrYaHei">
|
|
|
+ <span>实际冷量</span>
|
|
|
+ <span>{{data.nowPlantLoad || 0}} KW</span>
|
|
|
+ <span>未来1小时预测冷量</span>
|
|
|
+ <span>{{data.predictedLoad1h || 0}} KW</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="an-bottom">
|
|
|
<div id="leftLine" style="width:574px;height:350px;margin-right:;24px;">
|
|
|
</div>
|
|
|
<div id="rightLine" style="width:573px;height:350px;"></div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="side-r" v-if="data.isExecuted!=0">
|
|
|
+ <div v-if="!showDraw" class="float-r" @click="showDraw = true">
|
|
|
+ <img src="../../assets/open.png" alt="">
|
|
|
+ <p>当前策略</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <bom-box :class="['draw', {'open': showDraw}]" :data='data' @close="showDraw = false"></bom-box>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
@@ -34,17 +50,36 @@ import bomBox from './bomBox'
|
|
|
export default {
|
|
|
data(){
|
|
|
return{
|
|
|
- items: [
|
|
|
- { type: 'success', label: '能耗' },
|
|
|
- { type: 'success', label: '环境' },
|
|
|
- { type: 'danger', label: 'BA' },
|
|
|
-
|
|
|
- ]
|
|
|
+ showDraw: false,
|
|
|
+ dataX:[],
|
|
|
+ dataY1:[],
|
|
|
+ dataY2:[],
|
|
|
+ dataY3:[],
|
|
|
+ loadX:[],
|
|
|
+ loadY1:[],
|
|
|
+ loadY2:[],
|
|
|
+ loadY3:[]
|
|
|
}
|
|
|
},
|
|
|
components:{bomBox},
|
|
|
props:['data'],
|
|
|
methods:{
|
|
|
+ getData(){
|
|
|
+ let chillerList = this.data.chillerHourList ? this.data.chillerHourList:[]
|
|
|
+ chillerList.forEach(el=>{
|
|
|
+ el.value = el.time.slice('0,2')+':'+el.time.slice('2,4')
|
|
|
+ this.dataX .push(el.value)
|
|
|
+ this.loadX.push(el.value)
|
|
|
+ this.dataY1.push(el.tout)
|
|
|
+ this.dataY2.push(el.meanTindoor)
|
|
|
+ this.dataY3.push(el.maxTindoor)
|
|
|
+ this.loadY1.push(el.nowPlantLoad)
|
|
|
+ this.loadY2.push(el.predictedLoadUpLimit)
|
|
|
+ this.loadY3.push(el.redictedLoadDownLimit)
|
|
|
+ })
|
|
|
+ this.drawLeft()
|
|
|
+ this.drawRight()
|
|
|
+ },
|
|
|
drawLeft(){
|
|
|
var leftLine = echarts.init(document.getElementById('leftLine'))
|
|
|
let option = {
|
|
@@ -64,7 +99,7 @@ export default {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
|
|
|
+ data: this.dataX,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
@@ -74,19 +109,19 @@ export default {
|
|
|
name: '室外温度',
|
|
|
type: 'line',
|
|
|
stack: '总量',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210,112,150,]
|
|
|
+ data: thus.dataY1
|
|
|
},
|
|
|
{
|
|
|
name: '室内平均温度',
|
|
|
type: 'line',
|
|
|
stack: '总量',
|
|
|
- data: [220, 182, 191, 234, 290, 330, 310,220,280]
|
|
|
+ data: this.dataY2
|
|
|
},
|
|
|
{
|
|
|
name: '室内最高温度',
|
|
|
type: 'line',
|
|
|
stack: '总量',
|
|
|
- data: [150, 232, 201, 154, 190, 330, 410,300,340]
|
|
|
+ data: this.dataY3
|
|
|
},
|
|
|
|
|
|
]
|
|
@@ -123,12 +158,10 @@ export default {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
|
|
|
+ data: this.loadX,
|
|
|
|
|
|
},
|
|
|
yAxis: {
|
|
|
-
|
|
|
-
|
|
|
splitNumber: 3,
|
|
|
splitLine: {
|
|
|
show: false
|
|
@@ -137,7 +170,7 @@ export default {
|
|
|
series: [{
|
|
|
name: 'L',
|
|
|
type: 'line',
|
|
|
- data: [20,30,40,50,60,50,40,30,20],
|
|
|
+ data: this.loadY1,
|
|
|
lineStyle: {
|
|
|
opacity: 0
|
|
|
},
|
|
@@ -146,7 +179,7 @@ export default {
|
|
|
}, {
|
|
|
name: 'U',
|
|
|
type: 'line',
|
|
|
- data: [20,30,50,60,50,40,30,20,40],
|
|
|
+ data: this.loadY2,
|
|
|
lineStyle: {
|
|
|
opacity: 0
|
|
|
},
|
|
@@ -157,7 +190,7 @@ export default {
|
|
|
symbol: 'none'
|
|
|
}, {
|
|
|
type: 'line',
|
|
|
- data: [20,30,40,50,60,40,30,20,50],
|
|
|
+ data: thus.loadY3,
|
|
|
hoverAnimation: false,
|
|
|
symbolSize: 6,
|
|
|
itemStyle: {
|
|
@@ -169,37 +202,124 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
mounted(){
|
|
|
- this.drawLeft()
|
|
|
- this.drawRight()
|
|
|
+ if(this.data.chillerHourList ){
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
.an-content{
|
|
|
- .an-box{
|
|
|
- display:flex;
|
|
|
- justify-content:space-between;
|
|
|
- margin-top: 20px;
|
|
|
- .an-box-1{
|
|
|
+ .snapshotss-center2 {
|
|
|
+ padding: 20px 0;
|
|
|
+ margin-bottom: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .snapshotss-cont2-box1,
|
|
|
+ .snapshotss-cont2-box2 {
|
|
|
flex:1;
|
|
|
- border:1px dashed #ccc;
|
|
|
- padding-top: 30px;
|
|
|
+ height: 80px;
|
|
|
+ background: url("../../assets/copy.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
padding-left: 24px;
|
|
|
- padding-bottom:30px;
|
|
|
- background: #F8F9FA;
|
|
|
+ }
|
|
|
+ .snapshotss-cont2-box1 {
|
|
|
+
|
|
|
margin-right: 12px;
|
|
|
- .span2{
|
|
|
- color: #646C73;
|
|
|
+ span:nth-of-type(1) {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ span:not(:first-child) {
|
|
|
+ height: 28px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 6px 0 12px;
|
|
|
+ margin-right: 20px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .span1 {
|
|
|
+ border: 1px solid rgba(52, 199, 36, 1);
|
|
|
+ }
|
|
|
+ .span2 {
|
|
|
+ border: 1px solid rgba(245, 78, 69, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .snapshotss-cont2-box2 {
|
|
|
+ span:nth-of-type(1),
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(100, 108, 115, 1);
|
|
|
+ line-height: 19px;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2),
|
|
|
+ span:nth-of-type(4) {
|
|
|
+ height: 32px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: Persagy;
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
+ line-height: 29px;
|
|
|
+ margin-right: 64px;
|
|
|
+ }
|
|
|
+ span:nth-of-type(3) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .side-r {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ .float-r {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 60px 40px 60px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ height: 10px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .span1{
|
|
|
- margin-left:64px;
|
|
|
+ p {
|
|
|
+ width: 0;
|
|
|
}
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ background: #efefef;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .an-center{
|
|
|
- display: none;
|
|
|
+ .draw {
|
|
|
+ position: fixed;
|
|
|
+ left: 100%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ box-shadow:0px 0px 8px 0px rgba(0,0,0,0.1);
|
|
|
+ background: #ffffff;
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
+ &.open {
|
|
|
+ transform: translate(-100%,-50%);
|
|
|
+ }
|
|
|
}
|
|
|
.an-bottom{
|
|
|
margin-top: 45px;
|