zhulizhen 5 år sedan
förälder
incheckning
718228aec7
1 ändrade filer med 269 tillägg och 276 borttagningar
  1. 269 276
      src/views/evaluate/evIndoorTemperature.vue

+ 269 - 276
src/views/evaluate/evIndoorTemperature.vue

@@ -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>