|
@@ -1,304 +1,297 @@
|
|
|
<template>
|
|
|
- <div class="p-echarts">
|
|
|
- <div class="pLegend">
|
|
|
- <i class="icon1"></i>按照策略执行
|
|
|
- <i class="icon2"></i>未按照策略执行
|
|
|
- <i class="icon3"></i>未按照策略执行,申诉通过
|
|
|
- <i class="icon4"></i>室内温度满足率
|
|
|
- <i class="icon5"></i>节能率
|
|
|
+ <div class='p-echarts'>
|
|
|
+ <div class='pLegend'>
|
|
|
+ <i class='icon1'></i>按照策略执行
|
|
|
+ <i class='icon2'></i>未按照策略执行
|
|
|
+ <i class='icon3'></i>未按照策略执行,申诉通过
|
|
|
+ <i class='icon4'></i>室内温度满足率
|
|
|
+ <i class='icon5'></i>节能率
|
|
|
+ </div>
|
|
|
+ <div id='pCharts2' style='width: 100%;height: 100%;margin-top:20px;'></div>
|
|
|
</div>
|
|
|
- <div id="pCharts2" style="width: 100%;height: 100%;margin-top:20px;"></div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-var echarts = require("echarts");
|
|
|
+var echarts = require('echarts')
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dataX: [],
|
|
|
- energyY: [],
|
|
|
- indoorY: [],
|
|
|
- strategy1: [],
|
|
|
- strategy2: [],
|
|
|
- strategy3: []
|
|
|
- };
|
|
|
- },
|
|
|
- props: ["energyDataList"],
|
|
|
- mounted() {
|
|
|
- this.$nextTick(function() {
|
|
|
- this.getDrawData();
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getDrawData() {
|
|
|
- this.dataX = [];
|
|
|
- this.energyY = [];
|
|
|
- this.indoorY = [];
|
|
|
- this.strategy1 = [];
|
|
|
- this.strategy2 = [];
|
|
|
- this.strategy3 = [];
|
|
|
- if (this.energyDataList) {
|
|
|
- this.energyDataList.forEach(el => {
|
|
|
- el.time = el.date.slice(4, 6) + "." + el.date.slice(6, 8);
|
|
|
- this.dataX.push(el.time);
|
|
|
- this.indoorY.push(
|
|
|
- el.tindoorFillRate ? el.tindoorFillRate.toFixed(2) : 0
|
|
|
- );
|
|
|
- this.energyY.push(
|
|
|
- el.energySavingRate ? el.energySavingRate.toFixed(2) : 0
|
|
|
- );
|
|
|
- if (el.chillerExecuteRateReal >= 75) {
|
|
|
- //绿色
|
|
|
- this.strategy1.push(2);
|
|
|
- this.strategy2.push(null);
|
|
|
- this.strategy3.push(null);
|
|
|
- } else if (el.chillerExecuteRate >= 75) {
|
|
|
- // 灰色
|
|
|
- this.strategy1.push(null);
|
|
|
- this.strategy2.push(null);
|
|
|
- this.strategy3.push(2);
|
|
|
- } else {
|
|
|
- this.strategy1.push(null);
|
|
|
- this.strategy2.push(2);
|
|
|
- this.strategy3.push(null);
|
|
|
- }
|
|
|
- // if (el.chillerExecuteRateReal < 75 && el.chillerExecuteRate >= 75) {
|
|
|
- // //红色
|
|
|
- // this.strategy2.push(2);
|
|
|
- // } else {
|
|
|
- // this.strategy2.push(null);
|
|
|
- // }
|
|
|
- // if (el.chillerExecuteRateReal < 75 || el.chillerExecuteRate < 75) {
|
|
|
- // //灰色
|
|
|
- // this.strategy3.push(2);
|
|
|
- // } else {
|
|
|
- // this.strategy3.push(null);
|
|
|
- // }
|
|
|
- });
|
|
|
- console.log(this.strategy3)
|
|
|
- this.drawIt();
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataX: [],
|
|
|
+ energyY: [],
|
|
|
+ indoorY: [],
|
|
|
+ strategy1: [],
|
|
|
+ strategy2: [],
|
|
|
+ strategy3: []
|
|
|
+ }
|
|
|
},
|
|
|
- drawIt() {
|
|
|
- let myCharts = echarts.init(document.getElementById("pCharts2"));
|
|
|
- var colors = ["#34C724", "#8D9399", "#F54E45", "#00D6B9", "#0091FF"];
|
|
|
- var option = {
|
|
|
- color: colors,
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "shadow"
|
|
|
- },
|
|
|
- formatter:function(params){
|
|
|
- return params[0].name +'<br/>'+params[0].seriesName+'<br/>'+'<i class="icon1"></i> 室内温度:'+ (params[1].value || 0) +'% <br/>'+'<i class="icon2"></i>节能率:' + (params[2].value || 0) + '%'
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- grid: {
|
|
|
- right: "5%",
|
|
|
- left: "5%"
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "#8D9399"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0 //代表显示所有x轴标签显示
|
|
|
- },
|
|
|
- data: this.dataX
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "节能率",
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "#8D9399"
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- position: "right",
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value} %"
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- show: false,
|
|
|
- name: "",
|
|
|
- min: 0,
|
|
|
- max: 1,
|
|
|
- position: "right",
|
|
|
- offset: 80,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: function() {
|
|
|
- return "";
|
|
|
- }
|
|
|
+ props: ['energyDataList'],
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.getDrawData()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDrawData() {
|
|
|
+ this.dataX = []
|
|
|
+ this.energyY = []
|
|
|
+ this.indoorY = []
|
|
|
+ this.strategy1 = []
|
|
|
+ this.strategy2 = []
|
|
|
+ this.strategy3 = []
|
|
|
+ if (this.energyDataList) {
|
|
|
+ this.energyDataList.forEach(el => {
|
|
|
+ el.time = el.date.slice(4, 6) + '.' + el.date.slice(6, 8)
|
|
|
+ this.dataX.push(el.time)
|
|
|
+ this.indoorY.push(el.tindoorFillRate ? el.tindoorFillRate.toFixed(2) : 0)
|
|
|
+ this.energyY.push(el.energySavingRate ? el.energySavingRate.toFixed(2) : 0)
|
|
|
+ if (el.chillerExecuteRateReal >= 75) {
|
|
|
+ //绿色
|
|
|
+ this.strategy1.push(2)
|
|
|
+ this.strategy2.push(null)
|
|
|
+ this.strategy3.push(null)
|
|
|
+ } else if (el.chillerExecuteRate >= 75) {
|
|
|
+ // 灰色
|
|
|
+ this.strategy1.push(null)
|
|
|
+ this.strategy2.push(null)
|
|
|
+ this.strategy3.push(2)
|
|
|
+ } else {
|
|
|
+ this.strategy1.push(null)
|
|
|
+ this.strategy2.push(2)
|
|
|
+ this.strategy3.push(null)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.strategy3)
|
|
|
+ this.drawIt()
|
|
|
}
|
|
|
- },
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "室内温度满足率",
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "#8D9399"
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- position: "left",
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value} %"
|
|
|
+ },
|
|
|
+ drawIt() {
|
|
|
+ let myCharts = echarts.init(document.getElementById('pCharts2'))
|
|
|
+ var colors = ['#34C724', '#8D9399', '#F54E45', '#00D6B9', '#0091FF']
|
|
|
+ var option = {
|
|
|
+ color: colors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ return (
|
|
|
+ params[0].name +
|
|
|
+ '<br/>' +
|
|
|
+ params[0].seriesName +
|
|
|
+ '<br/>' +
|
|
|
+ '<i class="icon1"></i> 室内温度:' +
|
|
|
+ (params[1].value || 0) +
|
|
|
+ '% <br/>' +
|
|
|
+ '<i class="icon2"></i>节能率:' +
|
|
|
+ (params[2].value || 0) +
|
|
|
+ '%'
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ right: '5%',
|
|
|
+ left: '5%'
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#8D9399'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0 //代表显示所有x轴标签显示
|
|
|
+ },
|
|
|
+ data: this.dataX
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '节能率',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#8D9399'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ position: 'right',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ show: false,
|
|
|
+ name: '',
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ position: 'right',
|
|
|
+ offset: 80,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function() {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '室内温度满足率',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#8D9399'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ position: 'left',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '按照策略执行',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 40,
|
|
|
+ data: this.strategy1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '未按照策略执行',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 40,
|
|
|
+ data: this.strategy2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '未按照策略执行,申诉通过',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 40,
|
|
|
+ data: this.strategy3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '室内温度满足率',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 2,
|
|
|
+ data: this.indoorY
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '节能率',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 2,
|
|
|
+ data: this.energyY
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "按照策略执行",
|
|
|
- type: "bar",
|
|
|
- barWidth: 38,
|
|
|
- data: this.strategy1
|
|
|
- },
|
|
|
- {
|
|
|
- name: "未按照策略执行",
|
|
|
- type: "bar",
|
|
|
- barWidth: 38,
|
|
|
- data: this.strategy2
|
|
|
- },
|
|
|
- {
|
|
|
- name: "未按照策略执行,申诉通过",
|
|
|
- type: "bar",
|
|
|
- barWidth: 38,
|
|
|
- data: this.strategy3
|
|
|
- },
|
|
|
- {
|
|
|
- name: "室内温度满足率",
|
|
|
- type: "line",
|
|
|
- yAxisIndex: 2,
|
|
|
- data: this.indoorY
|
|
|
- },
|
|
|
- {
|
|
|
- name: "节能率",
|
|
|
- type: "line",
|
|
|
- yAxisIndex: 2,
|
|
|
- data: this.energyY
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myCharts.setOption(option);
|
|
|
- myCharts.on("click", param => {
|
|
|
- this.$router.push("/evaluate/evTwoLevelMenu");
|
|
|
- if (param.seriesName == "室内温度满足率") {
|
|
|
- this.$router.push({
|
|
|
- path: "/evaluate/evTwoLevelMenu",
|
|
|
- query: { type: 1, name: param.name }
|
|
|
- });
|
|
|
- } else if (param.seriesName == "节能率") {
|
|
|
- this.$router.push({
|
|
|
- path: "/evaluate/evTwoLevelMenu",
|
|
|
- query: { type: 2, name: param.name }
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$router.push({
|
|
|
- path: "/evaluate/evTwoLevelMenu",
|
|
|
- query: { type: 3, name: param.name }
|
|
|
- });
|
|
|
+ myCharts.setOption(option)
|
|
|
+ myCharts.on('click', param => {
|
|
|
+ this.$router.push('/evaluate/evTwoLevelMenu')
|
|
|
+ if (param.seriesName == '室内温度满足率') {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/evaluate/evTwoLevelMenu',
|
|
|
+ query: { type: 1, name: param.name }
|
|
|
+ })
|
|
|
+ } else if (param.seriesName == '节能率') {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/evaluate/evTwoLevelMenu',
|
|
|
+ query: { type: 2, name: param.name }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/evaluate/evTwoLevelMenu',
|
|
|
+ query: { type: 3, name: param.name }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- energyDataList: {
|
|
|
- immediate: true,
|
|
|
- handler(val, old) {
|
|
|
- if (old) {
|
|
|
- this.getDrawData();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ energyDataList: {
|
|
|
+ immediate: true,
|
|
|
+ handler(val, old) {
|
|
|
+ if (old) {
|
|
|
+ this.getDrawData()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.p-echarts {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- #pCharts2 {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- }
|
|
|
- .pLegend {
|
|
|
- font-size: 12px;
|
|
|
- color: #000000;
|
|
|
- text-align: center;
|
|
|
- margin-top: 20px;
|
|
|
-
|
|
|
- }
|
|
|
- .icon1 {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: rgba(52, 199, 36, 1);
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 3px;
|
|
|
+ #pCharts2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .pLegend {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .icon1 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: rgba(52, 199, 36, 1);
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
}
|
|
|
.icon2 {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: #f54e45;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 3px;
|
|
|
- margin-left: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: #f54e45;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
.icon3 {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: #8d9399;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 3px;
|
|
|
- margin-left: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: #8d9399;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
.icon4 {
|
|
|
- display: inline-block;
|
|
|
- height: 6px;
|
|
|
- width: 16px;
|
|
|
- background: #00d6b9;
|
|
|
- border-radius: 3px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 3px;
|
|
|
- margin-left: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ height: 6px;
|
|
|
+ width: 16px;
|
|
|
+ background: #00d6b9;
|
|
|
+ border-radius: 3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
.icon5 {
|
|
|
- display: inline-block;
|
|
|
- height: 6px;
|
|
|
- width: 16px;
|
|
|
- background: rgba(0, 145, 255, 1);
|
|
|
- border-radius: 3px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 3px;
|
|
|
- margin-left: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ height: 6px;
|
|
|
+ width: 16px;
|
|
|
+ background: rgba(0, 145, 255, 1);
|
|
|
+ border-radius: 3px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 3px;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|