|
@@ -109,9 +109,22 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="snapshotss-foot">
|
|
<div class="snapshotss-foot">
|
|
- <div id="snapshotssLeft"></div>
|
|
|
|
- <div class="snapshotssCenter"></div>
|
|
|
|
- <div id="snapshotssRight"></div>
|
|
|
|
|
|
+ <div class="leftL">
|
|
|
|
+ <div class="leftLengend">
|
|
|
|
+ <i class="outIcon"></i> 室外温度
|
|
|
|
+ <i class="innerIcon"></i> 室内平均温度
|
|
|
|
+ <i class="innerMax"></i> 室内最高温度
|
|
|
|
+ </div>
|
|
|
|
+ <div id="snapshotssLeft" style="width:100%;height:250px;margin-right:;24px;"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="rightL">
|
|
|
|
+ <div class="rightLengend">
|
|
|
|
+ <i class="reactCool"></i> 实际供冷量
|
|
|
|
+ <i class="preCool"></i> 预测冷量
|
|
|
|
+ </div>
|
|
|
|
+ <div id="snapshotssRight" style="width:100%;height:250px;"></div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -191,9 +204,9 @@ export default {
|
|
this.dataY1.push(el.tout);
|
|
this.dataY1.push(el.tout);
|
|
this.dataY2.push(el.meanTindoor);
|
|
this.dataY2.push(el.meanTindoor);
|
|
this.dataY3.push(el.maxTindoor);
|
|
this.dataY3.push(el.maxTindoor);
|
|
- this.loadY1.push(el.nowPlantLoad);
|
|
|
|
- this.loadY2.push(el.predictedLoadUpLimit);
|
|
|
|
- this.loadY3.push(el.redictedLoadDownLimit);
|
|
|
|
|
|
+ this.loadY1.push(el.nowPlantLoad?(el.nowPlantLoad=='-9999'?0:el.nowPlantLoad):0);
|
|
|
|
+ this.loadY2.push(el.predictedLoadUpLimit?el.predictedLoadUpLimit:0);
|
|
|
|
+ this.loadY3.push(el.redictedLoadDownLimit?el.redictedLoadDownLimit:0);
|
|
});
|
|
});
|
|
this.drawSnapshotssLeft();
|
|
this.drawSnapshotssLeft();
|
|
this.drawSnapshotssRight();
|
|
this.drawSnapshotssRight();
|
|
@@ -206,12 +219,12 @@ export default {
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: "axis"
|
|
trigger: "axis"
|
|
},
|
|
},
|
|
- legend: {
|
|
|
|
- data: ["室外温度", "室内平均温度", "室内最高温度"],
|
|
|
|
- icon: "stack",
|
|
|
|
- right: 28
|
|
|
|
|
|
+ title:{
|
|
|
|
+ text:'室内外温度',
|
|
|
|
+ fontSize:'16px',
|
|
|
|
+ color:'#1F2429'
|
|
},
|
|
},
|
|
- color: ["#0091FF", "#00D6B9", "#FFBA6B"],
|
|
|
|
|
|
+
|
|
grid: {
|
|
grid: {
|
|
left: "3%",
|
|
left: "3%",
|
|
right: "4%",
|
|
right: "4%",
|
|
@@ -225,26 +238,30 @@ export default {
|
|
data: this.dataX
|
|
data: this.dataX
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
- type: "value"
|
|
|
|
|
|
+ type: "value",
|
|
|
|
+ axisLabel:{formatter:'{value} ℃'}
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: "室外温度",
|
|
name: "室外温度",
|
|
type: "line",
|
|
type: "line",
|
|
stack: "总量",
|
|
stack: "总量",
|
|
- data: this.dataY1
|
|
|
|
|
|
+ data: this.dataY1,
|
|
|
|
+ color:'#0091FF'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: "室内平均温度",
|
|
name: "室内平均温度",
|
|
type: "line",
|
|
type: "line",
|
|
stack: "总量",
|
|
stack: "总量",
|
|
- data: this.dataY2
|
|
|
|
|
|
+ data: this.dataY2,
|
|
|
|
+ color:'#00D6B9'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: "室内最高温度",
|
|
name: "室内最高温度",
|
|
type: "line",
|
|
type: "line",
|
|
stack: "总量",
|
|
stack: "总量",
|
|
- data: this.dataY3
|
|
|
|
|
|
+ data: this.dataY3,
|
|
|
|
+ color:'#FFBA6B'
|
|
}
|
|
}
|
|
]
|
|
]
|
|
};
|
|
};
|
|
@@ -270,8 +287,8 @@ export default {
|
|
color: "#222"
|
|
color: "#222"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- // formatter: function(params) {
|
|
|
|
- // return params[2].name + "<br />" + params[2].value;
|
|
|
|
|
|
+ // formatter: function (params) {
|
|
|
|
+ // // return params[2].name + '<br />' + params[2].value;
|
|
// }
|
|
// }
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
@@ -280,6 +297,11 @@ export default {
|
|
bottom: "3%",
|
|
bottom: "3%",
|
|
containLabel: true
|
|
containLabel: true
|
|
},
|
|
},
|
|
|
|
+ title:{
|
|
|
|
+ text:'预测冷量',
|
|
|
|
+ fontSize:'16px',
|
|
|
|
+ color:'#1F2429'
|
|
|
|
+ },
|
|
xAxis: {
|
|
xAxis: {
|
|
type: "category",
|
|
type: "category",
|
|
data: this.loadX
|
|
data: this.loadX
|
|
@@ -288,7 +310,156 @@ export default {
|
|
splitNumber: 3,
|
|
splitNumber: 3,
|
|
splitLine: {
|
|
splitLine: {
|
|
show: false
|
|
show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel:{formatter:'{value} KW'}
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: "L",
|
|
|
|
+ type: "line",
|
|
|
|
+ data: this.loadY2,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ opacity: 0
|
|
|
|
+ },
|
|
|
|
+ stack: "confidence-band",
|
|
|
|
+ symbol: "none"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "U",
|
|
|
|
+ type: "line",
|
|
|
|
+ data: this.loadY3,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ opacity: 0
|
|
|
|
+ },
|
|
|
|
+ areaStyle: {
|
|
|
|
+ color: "#ccc"
|
|
|
|
+ },
|
|
|
|
+ stack: "confidence-band",
|
|
|
|
+ symbol: "none"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: "line",
|
|
|
|
+ data: this.loadY1,
|
|
|
|
+ hoverAnimation: false,
|
|
|
|
+ symbolSize: 6,
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#0091FF"
|
|
|
|
+ },
|
|
|
|
+ showSymbol: false
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getData() {
|
|
|
|
+ this.chillerHourList.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?(el.nowPlantLoad=='-9999'?0:el.nowPlantLoad):0);
|
|
|
|
+ this.loadY2.push(el.predictedLoadUpLimit?el.predictedLoadUpLimit:0);
|
|
|
|
+ this.loadY3.push(el.redictedLoadDownLimit?el.redictedLoadDownLimit:0);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ drawLeft() {
|
|
|
|
+ var leftLine = echarts.init(document.getElementById("leftLine"));
|
|
|
|
+ let option = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: "axis"
|
|
|
|
+ },
|
|
|
|
+ title:{
|
|
|
|
+ text:'室内外温度',
|
|
|
|
+ fontSize:'16px',
|
|
|
|
+ color:'#1F2429'
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ grid: {
|
|
|
|
+ left: "3%",
|
|
|
|
+ right: "4%",
|
|
|
|
+ bottom: "3%",
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: "category",
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: this.dataX
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: "value",
|
|
|
|
+ axisLabel:{formatter:'{value} ℃'}
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: "室外温度",
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "总量",
|
|
|
|
+ data: this.dataY1,
|
|
|
|
+ color:'#0091FF'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "室内平均温度",
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "总量",
|
|
|
|
+ data: this.dataY2,
|
|
|
|
+ color:'#00D6B9'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "室内最高温度",
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "总量",
|
|
|
|
+ data: this.dataY3,
|
|
|
|
+ color:'#FFBA6B'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ };
|
|
|
|
+ leftLine.setOption(option);
|
|
|
|
+ },
|
|
|
|
+ drawRight() {
|
|
|
|
+ var rightLine = echarts.init(document.getElementById("rightLine"));
|
|
|
|
+ rightLine.setOption({
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: "axis",
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: "cross",
|
|
|
|
+ animation: false,
|
|
|
|
+ label: {
|
|
|
|
+ backgroundColor: "#ccc",
|
|
|
|
+ borderColor: "#aaa",
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ shadowBlur: 0,
|
|
|
|
+ shadowOffsetX: 0,
|
|
|
|
+ shadowOffsetY: 0,
|
|
|
|
+ color: "#222"
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ // formatter: function (params) {
|
|
|
|
+ // // return params[2].name + '<br />' + params[2].value;
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: "3%",
|
|
|
|
+ right: "4%",
|
|
|
|
+ bottom: "3%",
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ title:{
|
|
|
|
+ text:'预测冷量',
|
|
|
|
+ fontSize:'16px',
|
|
|
|
+ color:'#1F2429'
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: "category",
|
|
|
|
+ data: this.loadX
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ splitNumber: 3,
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel:{formatter:'{value} KW'}
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
@@ -320,7 +491,7 @@ export default {
|
|
hoverAnimation: false,
|
|
hoverAnimation: false,
|
|
symbolSize: 6,
|
|
symbolSize: 6,
|
|
itemStyle: {
|
|
itemStyle: {
|
|
- color: "#c23531"
|
|
|
|
|
|
+ color: "#0091FF"
|
|
},
|
|
},
|
|
showSymbol: false
|
|
showSymbol: false
|
|
}
|
|
}
|
|
@@ -493,19 +664,52 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
height: 300px;
|
|
height: 300px;
|
|
- #snapshotssLeft {
|
|
|
|
- width: 600px;
|
|
|
|
- height: 300px;
|
|
|
|
- margin-right: 24px;
|
|
|
|
- }
|
|
|
|
- .snapshotssCenter {
|
|
|
|
- width: 1px;
|
|
|
|
- height: 300px;
|
|
|
|
- background: rgba(239, 240, 241, 1);
|
|
|
|
|
|
+ .leftL{
|
|
|
|
+ flex:1;
|
|
|
|
+ .leftLengend{
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ i{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width:16px;
|
|
|
|
+ height: 6px;
|
|
|
|
+ border-radius:3px;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+ .innerIcon{
|
|
|
|
+ background:rgba(0,214,185,1);
|
|
|
|
+ margin: 0 20px;
|
|
|
|
+ }
|
|
|
|
+ .outIcon{
|
|
|
|
+ background:rgba(0,145,255,1);
|
|
|
|
+ }
|
|
|
|
+ .innerMax{
|
|
|
|
+ background:rgba(255,186,107,1);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- #snapshotssRight {
|
|
|
|
- width: 600px;
|
|
|
|
- height: 300px;
|
|
|
|
|
|
+ .rightL{
|
|
|
|
+ flex:1;
|
|
|
|
+ .rightLengend{
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ i{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width:16px;
|
|
|
|
+ height: 6px;
|
|
|
|
+ border-radius:3px;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ }
|
|
|
|
+ .reactCool{
|
|
|
|
+ background:rgba(0,214,185,1);
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .preCool{
|
|
|
|
+ background:rgba(0,145,255,1);
|
|
|
|
+ opacity:0.29;
|
|
|
|
+ margin-left:20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|