zhulizhen před 5 roky
rodič
revize
588374d47f
2 změnil soubory, kde provedl 249 přidání a 40 odebrání
  1. 234 30
      src/views/evaluate/evSnapshotsDialog.vue
  2. 15 10
      src/views/strategy/bomBox.vue

+ 234 - 30
src/views/evaluate/evSnapshotsDialog.vue

@@ -109,9 +109,22 @@
       </div>
     </div>
     <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>
 </template>
@@ -191,9 +204,9 @@ export default {
         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.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.drawSnapshotssRight();
@@ -206,12 +219,12 @@ export default {
         tooltip: {
           trigger: "axis"
         },
-        legend: {
-          data: ["室外温度", "室内平均温度", "室内最高温度"],
-          icon: "stack",
-          right: 28
+        title:{
+          text:'室内外温度',
+          fontSize:'16px',
+          color:'#1F2429'
         },
-        color: ["#0091FF", "#00D6B9", "#FFBA6B"],
+       
         grid: {
           left: "3%",
           right: "4%",
@@ -225,26 +238,30 @@ export default {
           data: this.dataX
         },
         yAxis: {
-          type: "value"
+          type: "value",
+          axisLabel:{formatter:'{value}  ℃'}
         },
         series: [
           {
             name: "室外温度",
             type: "line",
             stack: "总量",
-            data: this.dataY1
+            data: this.dataY1,
+            color:'#0091FF'
           },
           {
             name: "室内平均温度",
             type: "line",
             stack: "总量",
-            data: this.dataY2
+            data: this.dataY2,
+            color:'#00D6B9'
           },
           {
             name: "室内最高温度",
             type: "line",
             stack: "总量",
-            data: this.dataY3
+            data: this.dataY3,
+            color:'#FFBA6B'
           }
         ]
       };
@@ -270,8 +287,8 @@ export default {
               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: {
@@ -280,6 +297,11 @@ export default {
           bottom: "3%",
           containLabel: true
         },
+        title:{
+          text:'预测冷量',
+          fontSize:'16px',
+          color:'#1F2429'
+        },
         xAxis: {
           type: "category",
           data: this.loadX
@@ -288,7 +310,156 @@ export default {
           splitNumber: 3,
           splitLine: {
             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: [
           {
@@ -320,7 +491,7 @@ export default {
             hoverAnimation: false,
             symbolSize: 6,
             itemStyle: {
-              color: "#c23531"
+              color: "#0091FF"
             },
             showSymbol: false
           }
@@ -493,19 +664,52 @@ export default {
     display: flex;
     justify-content: space-between;
     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;
+        }
+      }
     }
   }
 }

+ 15 - 10
src/views/strategy/bomBox.vue

@@ -75,7 +75,7 @@ export default {
       });
     },
     getData() {
-      this.circle1 = this.data.strategyReliability || 0;
+      this.circle1 = this.data.strategyReliability.toFixed(2) || 0;
       this.circle2 = 100 - this.circle1;
       this.drawCircle();
     },
@@ -84,20 +84,25 @@ export default {
         document.getElementById("circleEcharts")
       );
       let option = {
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        },
+        // tooltip: {
+        //   trigger: "item",
+        //   formatter: "{a} <br/>{b}: {c} ({d}%)"
+        // },
+        color:['#E1F2FF','#0091FF'],
         series: [
           {
-            name: "访问来源",
+            name: "",
             type: "pie",
             radius: ["50%", "70%"],
             avoidLabelOverlap: false,
             label: {
               normal: {
-                show: false,
-                position: "center"
+                show: true,
+                position: "center",
+                formatter:function(formatter){
+                  console.log(formatter)
+                  return (formatter.percent)+'%'
+                }
               },
               emphasis: {
                 show: true,
@@ -113,8 +118,8 @@ export default {
               }
             },
             data: [
-              { value: this.circle1, name: "直接访问" },
-              { value: this.circle2, name: "邮件营销" }
+              { value: this.circle1, name: "" },
+              { value: this.circle2, name: "" }
             ]
           }
         ]