zhulizhen 5 years ago
parent
commit
afc9dcea89
1 changed files with 79 additions and 14 deletions
  1. 79 14
      src/views/strategy/animationBox.vue

+ 79 - 14
src/views/strategy/animationBox.vue

@@ -27,8 +27,21 @@
       </div>
     </div>
     <div class="an-bottom">
-      <div id="leftLine" style="width:45%;height:350px;margin-right:;24px;"></div>
-      <div id="rightLine" style="width:45%;height:350px;"></div>
+      <div class="leftL">
+        <div class="leftLengend">
+          <i class="outIcon"></i> 室外温度
+          <i class="innerIcon"></i> 室内平均温度
+          <i class="innerMax"></i> 室内最高温度
+        </div>
+         <div id="leftLine" style="width:100%;height:350px;margin-right:;24px;"></div>
+      </div>
+      <div class="rightL">
+        <div class="rightLengend">
+          <i class="reactCool"></i> 实际供冷量
+          <i class="preCool"></i> 预测冷量
+        </div>
+        <div id="rightLine" style="width:100%;height:350px;"></div>
+      </div>
     </div>
 
     <div class="side-r" v-if="data.isExecuted!=0">
@@ -70,9 +83,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);
       });
     },
     drawLeft() {
@@ -82,11 +95,11 @@ export default {
           trigger: "axis"
         },
         title:{
-          text:'室内外温度'
-        },
-        legend: {
-          data: ["室外温度", "室内平均温度", "室内最高温度"]
+          text:'室内外温度',
+          fontSize:'16px',
+          color:'#1F2429'
         },
+       
         grid: {
           left: "3%",
           right: "4%",
@@ -107,19 +120,22 @@ export default {
             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'
           }
         ]
       };
@@ -154,7 +170,9 @@ export default {
           containLabel: true
         },
         title:{
-          text:'预测冷量'
+          text:'预测冷量',
+          fontSize:'16px',
+          color:'#1F2429'
         },
         xAxis: {
           type: "category",
@@ -196,7 +214,7 @@ export default {
             hoverAnimation: false,
             symbolSize: 6,
             itemStyle: {
-              color: "#c23531"
+              color: "#0091FF"
             },
             showSymbol: false
           }
@@ -328,6 +346,53 @@ export default {
   .an-bottom {
     margin-top: 45px;
     display: flex;
+    .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);
+        }
+      }
+    }
+    .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;
+        }
+      }
+    }
   }
 }
 </style>