Ver código fonte

室内平均温度

guoxiaohuan 4 anos atrás
pai
commit
e7217f40f9
1 arquivos alterados com 326 adições e 306 exclusões
  1. 326 306
      src/components/strategyLine.vue

+ 326 - 306
src/components/strategyLine.vue

@@ -1,336 +1,356 @@
 <template>
-    <div class='line-container'>
-        <div class='leftL'>
-            <div class='leftLengend'>
-                <i class='outIcon'></i> 室外温度
-                <i class='innerIcon'></i> 室内平均温度
-                <i class='innerMax'></i> 室内最高温度
-            </div>
+  <div class="line-container">
+    <div class="leftL">
+      <div class="leftLengend">
+        <i class="outIcon"></i> 室外温度 <i class="innerIcon"></i> 室内平均温度
+        <i class="innerMax"></i> 室内最高温度
+      </div>
 
-            <div style='width:100%;height:100%;'>
-                <div id='leftLine' style='width:100%;height:100%;'></div>
-            </div>
-        </div>
-        <div class='rightL'>
-            <div class='rightLengend'>
-                <i class='blue-bg'></i> 实际供冷量
-                <i class='preCool'></i>
-                预测冷量
-            </div>
+      <div style="width:100%;height:100%;">
+        <div id="leftLine" style="width:100%;height:100%;"></div>
+      </div>
+    </div>
+    <div class="rightL">
+      <div class="rightLengend">
+        <i class="blue-bg"></i> 实际供冷量
+        <i class="preCool"></i>
+        预测冷量
+      </div>
 
-            <div style='width:100%;height:100%;'>
-                <div id='RightLine' style='width:100%;height:100%;'></div>
-            </div>
-        </div>
+      <div style="width:100%;height:100%;">
+        <div id="RightLine" style="width:100%;height:100%;"></div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import echarts from 'echarts'
+import echarts from "echarts";
 
 export default {
-    data() {
-        return {
-            dataX: [],
-            loadX: [],
-            dataY1: [],
-            dataY2: [],
-            dataY3: [],
-            loadY1: [],
-            loadY2: [],
-            loadY3: [],
-            dataY1Min: '',
-            dataY1Max: ''
+  data() {
+    return {
+      dataX: [],
+      loadX: [],
+      dataY1: [],
+      dataY2: [],
+      dataY3: [],
+      loadY1: [],
+      loadY2: [],
+      loadY3: [],
+      dataY1Min: "",
+      dataY1Max: ""
+    };
+  },
+  props: ["chillerList"],
+  methods: {
+    getMax(arr) {
+      var max = arr[0];
+      for (var i = 0; i < arr.length; i++) {
+        if (max < arr[i]) {
+          max = arr[i];
         }
+      }
+      return max;
     },
-    props: ['chillerList'],
-    methods: {
-        getMax(arr) {
-            var max = arr[0]
-            for (var i = 0; i < arr.length; i++) {
-                if (max < arr[i]) {
-                    max = arr[i]
-                }
-            }
-            return max
-        },
-        getMin(arr) {
-            var min = arr[0]
-            for (var i = 0; i < arr.length; i++) {
-                if (arr[i] == '') {
-                    arr.splice(arr[i], 1)
-                }
-                if (min > arr[i]) {
-                    min = arr[i]
-                }
-            }
+    getMin(arr) {
+      var min = arr[0];
+      for (var i = 0; i < arr.length; i++) {
+        if (arr[i] == "") {
+          arr.splice(arr[i], 1);
+        }
+        if (min > arr[i]) {
+          min = arr[i];
+        }
+      }
 
-            return min
+      return min;
+    },
+    drawData() {
+      this.dataY1 = [];
+      this.dataX = [];
+      this.loadX = [];
+      this.dataY2 = [];
+      this.dataY3 = [];
+      this.loadY1 = [];
+      this.loadY2 = [];
+      this.loadY3 = [];
+      this.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 == "-9999" ? undefined : el.tout);
+        this.dataY2.push(
+          el.meanTindoor == "-9999" ? undefined : el.meanTindoor
+        );
+        this.dataY3.push(el.maxTindoor == "-9999" ? undefined : el.maxTindoor);
+        this.loadY1.push(
+          el.nowPlantLoad == "-9999" && el.nowPlantLoad == "-9998"
+            ? undefined
+            : el.nowPlantLoad
+        );
+        this.loadY2.push(
+          el.predictedLoadUpLimit != "-9999" &&
+            el.predictedLoadUpLimit != "-9998"
+            ? el.predictedLoadUpLimit
+            : undefined
+        );
+        this.loadY3.push(
+          el.redictedLoadDownLimit != "-9999" &&
+            el.redictedLoadDownLimit != "-9998"
+            ? el.redictedLoadDownLimit
+            : undefined
+        );
+      });
+      let arr = [];
+      arr = arr
+        .concat(this.dataY1)
+        .concat(this.dataY2)
+        .concat(this.dataY3);
+      this.dataY1Min = this.getMin(arr);
+      this.dataY1Max = this.getMax(arr);
+      let minG = parseInt(this.dataY1Min % 10),
+        minS = parseInt((this.dataY1Min % 100) / 10),
+        maxG = parseInt(this.dataY1Max % 10),
+        maxS = parseInt((this.dataY1Max % 100) / 10);
+      if (minG > 5) {
+        this.dataY1Min = String(minS) + "5";
+      } else if (minG <= 5) {
+        this.dataY1Min = String(minS) + "0";
+      }
+      if (maxG > 5) {
+        this.dataY1Max = String(maxS + 1) + "0";
+      } else if (maxG <= 5) {
+        this.dataY1Max = String(maxS) + "5";
+      }
+      this.drawLeft();
+      this.drawRight();
+    },
+    drawLeft() {
+      var leftLine = echarts.init(document.getElementById("leftLine"));
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          formatter: function(data) {
+            let val1 = "",
+              val2 = "",
+              val3 = "";
+            data.forEach(i => {
+              console.log(i);
+              if (i.seriesName == "室外温度") {
+                val1 = `<br/>室外温度:${i.value ? i.value.toFixed(1) : ""}`;
+              }
+              if (i.seriesName == "室内平均温度") {
+                val2 = `<br/>室内平均温度:${
+                  i.value ? i.value.toFixed(1) : ""
+                }`;
+              }
+              if (i.seriesName == "室内最高温度") {
+                val3 = `<br/>室内最高温度:${
+                  i.value ? i.value.toFixed(1) : ""
+                }`;
+              }
+            });
+            return `${data[0].name}${val1}${val2}${val3}`;
+          }
         },
-        drawData() {
-            this.dataY1 = []
-            this.dataX = []
-            this.loadX = []
-            this.dataY2 = []
-            this.dataY3 = []
-            this.loadY1 = []
-            this.loadY2 = []
-            this.loadY3 = []
-            this.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 == '-9999' ? undefined : el.tout)
-                this.dataY2.push(el.meanTindoor == '-9999' ? undefined : el.meanTindoor)
-                this.dataY3.push(el.maxTindoor == '-9999' ? undefined : el.maxTindoor)
-                this.loadY1.push(el.nowPlantLoad == '-9999' && el.nowPlantLoad == '-9998' ? undefined : el.nowPlantLoad)
-                this.loadY2.push(el.predictedLoadUpLimit != '-9999' && el.predictedLoadUpLimit != '-9998' ? el.predictedLoadUpLimit : undefined)
-                this.loadY3.push(el.redictedLoadDownLimit != '-9999' && el.redictedLoadDownLimit != '-9998' ? el.redictedLoadDownLimit : undefined)
-            })
-            let arr = []
-            arr = arr
-                .concat(this.dataY1)
-                .concat(this.dataY2)
-                .concat(this.dataY3)
-            this.dataY1Min = this.getMin(arr)
-            this.dataY1Max = this.getMax(arr)
-            let minG = parseInt(this.dataY1Min % 10),
-                minS = parseInt((this.dataY1Min % 100) / 10),
-                maxG = parseInt(this.dataY1Max % 10),
-                maxS = parseInt((this.dataY1Max % 100) / 10)
-            if (minG > 5) {
-                this.dataY1Min = String(minS) + '5'
-            } else if (minG <= 5) {
-                this.dataY1Min = String(minS) + '0'
-            }
-            if (maxG > 5) {
-                this.dataY1Max = String(maxS + 1) + '0'
-            } else if (maxG <= 5) {
-                this.dataY1Max = String(maxS) + '5'
-            }
-            this.drawLeft()
-            this.drawRight()
+        title: {
+          text: "室内外温度",
+          fontSize: "16px",
+          color: "#1F2429"
         },
-        drawLeft() {
-            var leftLine = echarts.init(document.getElementById('leftLine'))
-            let option = {
-                tooltip: {
-                    trigger: 'axis',
-                    formatter: function(data) {
-                        let val1 = '',
-                            val2 = '',
-                            val3 = ''
-                        data.forEach(i => {
-                            if (i.seriesName == '室外温度') {
-                                val1 = `<br/>室外温度:${i.value ? i.value.toFixed(1) : ''}`
-                            }
-                            if (i.seriesName == ' 室内平均温度') {
-                                val2 = `<br/>室内平均温度:${i.value ? i.value.toFixed(1) : ''}`
-                            }
-                            if (i.seriesName == '室内最高温度') {
-                                val3 = `<br/>室内最高温度:${i.value ? i.value.toFixed(1) : ''}`
-                            }
-                        })
-                        return `${data[0].name}${val1}${val2}${val3}`
-                    }
-                },
-                title: {
-                    text: '室内外温度',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
 
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
 
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    data: this.dataX
-                },
-                yAxis: {
-                    type: 'value',
-                    min: Number(this.dataY1Min),
-                    max: Number(this.dataY1Max),
-                    interval: 2,
-                    axisLabel: { formatter: '{value}  ℃' }
-                },
-                series: [
-                    {
-                        name: '室外温度',
-                        type: 'line',
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.dataX
+        },
+        yAxis: {
+          type: "value",
+          min: Number(this.dataY1Min),
+          max: Number(this.dataY1Max),
+          interval: 2,
+          axisLabel: { formatter: "{value}  ℃" }
+        },
+        series: [
+          {
+            name: "室外温度",
+            type: "line",
 
-                        data: this.dataY1,
-                        color: '#0091FF'
-                    },
-                    {
-                        name: '室内平均温度',
-                        type: 'line',
+            data: this.dataY1,
+            color: "#0091FF"
+          },
+          {
+            name: "室内平均温度",
+            type: "line",
 
-                        data: this.dataY2,
-                        color: '#00D6B9'
-                    },
-                    {
-                        name: '室内最高温度',
-                        type: 'line',
+            data: this.dataY2,
+            color: "#00D6B9"
+          },
+          {
+            name: "室内最高温度",
+            type: "line",
 
-                        data: this.dataY3,
-                        color: '#FFBA6B'
-                    }
-                ]
+            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"
             }
-            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'
-                        }
-                    }
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    containLabel: true
-                },
-                title: {
-                    text: '预测冷量',
-                    fontSize: '16px',
-                    color: '#1F2429'
-                },
-                xAxis: {
-                    type: 'category',
-                    data: this.loadX
-                },
-                yAxis: {
-                    splitLine: {
-                        lineStyle: {
-                            type: 'dotted'
-                        }
-                    },
-                    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
-                    }
-                ]
-            })
-        }
-    },
-    mounted() {
-        this.$nextTick(function() {
-            this.drawData()
-        })
-    },
-    watch: {
-        chillerList: {
-            immediate: true,
-            handler(val, old) {
-                if (old) {
-                    this.drawData()
-                }
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        title: {
+          text: "预测冷量",
+          fontSize: "16px",
+          color: "#1F2429"
+        },
+        xAxis: {
+          type: "category",
+          data: this.loadX
+        },
+        yAxis: {
+          splitLine: {
+            lineStyle: {
+              type: "dotted"
             }
+          },
+          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
+          }
+        ]
+      });
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.drawData();
+    });
+  },
+  watch: {
+    chillerList: {
+      immediate: true,
+      handler(val, old) {
+        if (old) {
+          this.drawData();
         }
+      }
     }
-}
+  }
+};
 </script>
 <style lang="scss" scoped>
 .line-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    .leftL {
-        width: 45%;
-        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);
-            }
-        }
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .leftL {
+    width: 45%;
+    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);
+      }
     }
-    .rightL {
-        flex: 1;
-        width: 45%;
-        .rightLengend {
-            text-align: center;
-            margin-bottom: 10px;
-            i {
-                display: inline-block;
-                width: 16px;
-                height: 6px;
-                border-radius: 3px;
-                vertical-align: middle;
-            }
-            .preCool {
-                background: #0091ff;
-                opacity: 0.29;
-                margin-left: 20px;
-            }
-        }
+  }
+  .rightL {
+    flex: 1;
+    width: 45%;
+    .rightLengend {
+      text-align: center;
+      margin-bottom: 10px;
+      i {
+        display: inline-block;
+        width: 16px;
+        height: 6px;
+        border-radius: 3px;
+        vertical-align: middle;
+      }
+      .preCool {
+        background: #0091ff;
+        opacity: 0.29;
+        margin-left: 20px;
+      }
     }
+  }
 }
-</style>
+</style>