xiaohuan il y a 5 ans
Parent
commit
dde80be6d3
2 fichiers modifiés avec 612 ajouts et 585 suppressions
  1. 382 371
      src/views/strategy/animationBox.vue
  2. 230 214
      src/views/strategy/bomBox.vue

+ 382 - 371
src/views/strategy/animationBox.vue

@@ -1,408 +1,419 @@
 <template>
-  <div class="an-content">
-    <div class="snapshotss-center2">
-      <div class="snapshotss-cont2-box1 MicrYaHei">
-        <span>数据传输情况</span>
-        <span :class="data.isExecuted==1?'span1':'span2'">
-          能耗
-          <img v-if="data.energyErrorFlag==1" src="../../assets/finish.png" alt />
-          <img v-else src="../../assets/wrong.png" alt />
-        </span>
-        <span :class="data.isExecuted==1?'span1':'span2'">
-          环境
-          <img v-if="data.environmentErrorFlag==1" src="../../assets/finish.png" alt />
-          <img v-else src="../../assets/wrong.png" alt />
-        </span>
-        <span :class="data.isExecuted==1?'span1':'span2'">
-          BA
-          <img v-if="data.baErrorFalg==1" src="../../assets/finish.png" alt />
-          <img v-else src="../../assets/wrong.png" alt />
-        </span>
-      </div>
-      <div class="snapshotss-cont2-box2 MicrYaHei">
-        <span>实际冷量</span>
-        <span>{{data.nowPlantLoad || 0}} KW</span>
-        <span>未来1小时预测冷量</span>
-        <span>{{data.predictedLoad1h || 0}} KW</span>
-      </div>
-    </div>
-    <div class="an-bottom">
-      <div class="leftL">
-        <div class="leftLengend">
-          <i class="outIcon"></i> 室外温度
-          <i class="innerIcon"></i> 室内平均温度
-          <i class="innerMax"></i> 室内最高温度
+    <div class='an-content'>
+        <div class='snapshotss-center2'>
+            <div class='snapshotss-cont2-box1 MicrYaHei'>
+                <span>数据传输情况</span>
+                <span :class='data.isExecuted==true?"span1":"span2"'>
+                    能耗
+                    <img v-if='data.energyErrorFlag==1' src='../../assets/finish.png' alt />
+                    <img v-else src='../../assets/wrong.png' alt />
+                </span>
+                <span :class='data.isExecuted==true?"span1":"span2"'>
+                    环境
+                    <img v-if='data.environmentErrorFlag==1' src='../../assets/finish.png' alt />
+                    <img v-else src='../../assets/wrong.png' alt />
+                </span>
+                <span :class='data.isExecuted==true?"span1":"span2"'>
+                    BA
+                    <img v-if='data.baErrorFalg==1' src='../../assets/finish.png' alt />
+                    <img v-else src='../../assets/wrong.png' alt />
+                </span>
+            </div>
+            <div class='snapshotss-cont2-box2 MicrYaHei'>
+                <span>实际冷量</span>
+                <span>{{data.nowPlantLoad || 0}} KW</span>
+                <span>未来1小时预测冷量</span>
+                <span>{{data.predictedLoad1h || 0}} KW</span>
+            </div>
         </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 class='an-bottom'>
+            <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 id="rightLine" style="width:100%;height:350px;"></div>
-      </div>
-    </div>
 
-    <div class="side-r" v-if="data.isExecuted">
-      <div v-if="!showDraw" class="float-r" @click="showDraw = true">
-        <img src="../../assets/open.png" alt />
-        <p>当前策略</p>
-      </div>
-    </div>
+        <div class='side-r' :class='data.isExecuted==true?"green":"red"'>
+            <div v-if='!showDraw' class='float-r' @click='showDraw = true'>
+                <div class='float-line' :class='data.isExecuted==true?"green":"red"'></div>
+                <img src='../../assets/open.png' alt />
+                <p>当前策略</p>
+            </div>
+        </div>
 
-    <bom-box
-      v-if="Object.keys(chillerCommandQ).length>0"
-      :class="['draw', {'open': showDraw}]"
-      :data="chillerCommandQ"
-      @close="showDraw = false"
-    ></bom-box>
-  </div>
+        <bom-box v-if='Object.keys(chillerCommandQ).length>0' :class='["draw", {"open": showDraw}]' :data='chillerCommandQ' @close='showDraw = false'></bom-box>
+    </div>
 </template>
 
 <script>
-import echarts from "echarts";
-import bomBox from "./bomBox";
+import echarts from 'echarts'
+import bomBox from './bomBox'
 export default {
-  data() {
-    return {
-      showDraw: false,
-      dataX: [],
-      dataY1: [],
-      dataY2: [],
-      dataY3: [],
-      loadX: [],
-      loadY1: [],
-      loadY2: [],
-      loadY3: []
-    };
-  },
-  components: { bomBox },
-  props: ["data", "chillerHourList", "chillerCommandQ"],
-  methods: {
-    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=='-9999'?0:el.tout);
-        this.dataY2.push(el.meanTindoor);
-        this.dataY3.push(el.maxTindoor);
-        this.loadY1.push(
-          el.nowPlantLoad == '-9999'?0:wl.nowPlantLoad
-        );
-        this.loadY2.push(el.predictedLoadUpLimit!='-9999' ? el.predictedLoadUpLimit : 0);
-        this.loadY3.push(
-          el.redictedLoadDownLimit!='-9999' ? el.redictedLoadDownLimit : 0
-        );
-      });
+    data() {
+        return {
+            showDraw: false,
+            dataX: [],
+            dataY1: [],
+            dataY2: [],
+            dataY3: [],
+            loadX: [],
+            loadY1: [],
+            loadY2: [],
+            loadY3: []
+        }
     },
-    drawLeft() {
-      var leftLine = echarts.init(document.getElementById("leftLine"));
-      let option = {
-        tooltip: {
-          trigger: "axis"
-        },
-        title: {
-          text: "室内外温度",
-          fontSize: "16px",
-          color: "#1F2429"
+    components: { bomBox },
+    props: ['data', 'chillerHourList', 'chillerCommandQ'],
+    methods: {
+        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 == '-9999' ? 0 : el.tout)
+                this.dataY2.push(el.meanTindoor)
+                this.dataY3.push(el.maxTindoor)
+                this.loadY1.push(el.nowPlantLoad == '-9999' ? 0 : el.nowPlantLoad)
+                this.loadY2.push(el.predictedLoadUpLimit != '-9999' ? el.predictedLoadUpLimit : 0)
+                this.loadY3.push(el.redictedLoadDownLimit != '-9999' ? 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
-        },
+                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",
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: this.dataX
+                },
+                yAxis: {
+                    type: 'value',
+                    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"
-          }
-        ]
-      };
-      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"
+                        data: this.dataY3,
+                        color: '#FFBA6B'
+                    }
+                ]
             }
-          }
-          //  formatter: function (params) {
-          // //     return params[2].name + '<br />' + params[2].value;
-          // }
+            leftLine.setOption(option)
         },
-        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: [
-          {
-            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
-          }
-        ]
-      });
+        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: [
+                    {
+                        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
+                    }
+                ]
+            })
+        }
+    },
+    created() {
+        this.getData()
+    },
+    mounted() {
+        this.drawLeft()
+        this.drawRight()
     }
-  },
-  created() {
-    this.getData();
-  },
-  mounted() {
-    this.drawLeft();
-    this.drawRight();
-  }
-};
+}
 </script>
 
 <style lang='scss' scoped>
 .an-content {
-  .snapshotss-center2 {
-    padding: 20px 0;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    .snapshotss-cont2-box1,
-    .snapshotss-cont2-box2 {
-      flex: 1;
-      height: 80px;
-      background: url("../../assets/copy.png");
-      background-size: 100% 100%;
-      display: flex;
-      align-items: center;
-      padding-left: 24px;
-    }
-    .snapshotss-cont2-box1 {
-      margin-right: 12px;
-      span:nth-of-type(1) {
-        height: 22px;
-        font-size: 14px;
-        color: rgba(100, 108, 115, 1);
-        line-height: 19px;
-        margin-right: 20px;
-      }
-      span:not(:first-child) {
-        height: 28px;
-        background: rgba(255, 255, 255, 1);
-        border-radius: 16px;
-        font-size: 14px;
-        color: rgba(31, 36, 41, 1);
+    .snapshotss-center2 {
+        padding: 20px 0;
+        margin-bottom: 20px;
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 0 6px 0 12px;
-        margin-right: 20px;
-        img {
-          width: 20px;
-          height: 20px;
-          margin-left: 8px;
+        overflow: hidden;
+        .snapshotss-cont2-box1,
+        .snapshotss-cont2-box2 {
+            flex: 1;
+            height: 80px;
+            background: url('../../assets/copy.png');
+            background-size: 100% 100%;
+            display: flex;
+            align-items: center;
+            padding-left: 24px;
+        }
+        .snapshotss-cont2-box1 {
+            margin-right: 12px;
+            span:nth-of-type(1) {
+                height: 22px;
+                font-size: 14px;
+                color: rgba(100, 108, 115, 1);
+                line-height: 19px;
+                margin-right: 20px;
+            }
+            span:not(:first-child) {
+                height: 28px;
+                background: rgba(255, 255, 255, 1);
+                border-radius: 16px;
+                font-size: 14px;
+                color: rgba(31, 36, 41, 1);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0 6px 0 12px;
+                margin-right: 20px;
+                img {
+                    width: 20px;
+                    height: 20px;
+                    margin-left: 8px;
+                }
+            }
+            .span1 {
+                border: 1px solid rgba(52, 199, 36, 1);
+            }
+            .span2 {
+                border: 1px solid rgba(245, 78, 69, 1);
+            }
+        }
+        .snapshotss-cont2-box2 {
+            span:nth-of-type(1),
+            span:nth-of-type(3) {
+                height: 22px;
+                font-size: 14px;
+                color: rgba(100, 108, 115, 1);
+                line-height: 19px;
+                margin-right: 16px;
+            }
+            span:nth-of-type(2),
+            span:nth-of-type(4) {
+                height: 32px;
+                font-size: 24px;
+                font-family: Persagy;
+                color: rgba(31, 36, 41, 1);
+                line-height: 29px;
+                margin-right: 64px;
+            }
+            span:nth-of-type(3) {
+                margin-right: 16px;
+            }
         }
-      }
-      .span1 {
-        border: 1px solid rgba(52, 199, 36, 1);
-      }
-      .span2 {
-        border: 1px solid rgba(245, 78, 69, 1);
-      }
     }
-    .snapshotss-cont2-box2 {
-      span:nth-of-type(1),
-      span:nth-of-type(3) {
-        height: 22px;
-        font-size: 14px;
-        color: rgba(100, 108, 115, 1);
-        line-height: 19px;
-        margin-right: 16px;
-      }
-      span:nth-of-type(2),
-      span:nth-of-type(4) {
-        height: 32px;
-        font-size: 24px;
-        font-family: Persagy;
-        color: rgba(31, 36, 41, 1);
-        line-height: 29px;
-        margin-right: 64px;
-      }
-      span:nth-of-type(3) {
-        margin-right: 16px;
-      }
+    .side-r {
+        position: fixed;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+        display: flex;
+        width: 8px;
+        border-radius: 8px 0 0 8px;
+        cursor: pointer;
+        height: 357px;
+        .float-r {
+            width: 8px;
+            display: flex;
+            align-items: center;
+            border-radius: 8px 0 0 8px;
+            cursor: pointer;
+            .float-line {
+                width: 8px;
+                height: 357px;
+                border-radius: 8px 0 0 8px;
+            }
+            img {
+                height: 10px;
+                margin: 0 10px;
+            }
+            p {
+                width: 0;
+            }
+        }
     }
-  }
-  .side-r {
-    position: fixed;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-    background: #ffffff;
-    display: flex;
-    .float-r {
-      display: flex;
-      align-items: center;
-      padding: 60px 40px 60px 10px;
-      cursor: pointer;
-      img {
-        height: 10px;
-        margin-right: 10px;
-      }
-      p {
-        width: 0;
-      }
-      &:hover {
-        background: #efefef;
-      }
+    .red {
+        background: #f54e45ff;
     }
-  }
-  .draw {
-    position: fixed;
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-    background: #ffffff;
-    transition: transform 0.3s ease-in-out;
-    &.open {
-      transform: translate(-100%, -50%);
+    .green {
+        background: #34c724ff;
     }
-  }
-  .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);
-        }
-      }
+    .side-r:hover {
+        width: 68px;
+        background: #fff;
     }
-    .rightL {
-      flex: 1;
-      .rightLengend {
-        text-align: center;
-        margin-bottom: 10px;
-        i {
-          display: inline-block;
-          width: 16px;
-          height: 6px;
-          border-radius: 3px;
-          vertical-align: middle;
+    .side-r:hover .float-r {
+        width: 68px;
+    }
+    .draw {
+        position: fixed;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+        background: #ffffff;
+        transition: transform 0.3s ease-in-out;
+        &.open {
+            transform: translate(-100%, -50%);
         }
-        .reactCool {
-          background: rgba(0, 214, 185, 1);
+    }
+    .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);
+                }
+            }
         }
-        .preCool {
-          background: rgba(0, 145, 255, 1);
-          opacity: 0.29;
-          margin-left: 20px;
+        .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>

+ 230 - 214
src/views/strategy/bomBox.vue

@@ -1,241 +1,257 @@
 <template>
-  <div class="bomb">
-    <div class="close" @click="$emit('close')">
-      <img src="../../assets/close.png" alt />
-    </div>
-    <div class="bomb-left">
-      <div class="bomb-left1">当前策略</div>
-      <div
-        class="bomb-left2"
-      >应执行时间 {{data.executeTime?(data.executeTime.slice(8,10)+":"+ data.executeTime.slice(10,12)):'--'}} - {{data.pushTime?timestamp2String(data.pushTime).slice(8,10)+":"+timestamp2String(data.pushTime).slice(10,12): '--'}}</div>
-      <div class="bomb-left3">策略可靠度</div>
-      <div id="circleEcharts" style="width:104px;height:104px"></div>
-    </div>
-    <div class="bomb-right">
-      <water-unit :data="data" :type=2></water-unit>
-      <div class="snapshotss-center2">
-        <div class="snapshotss-cont2-box1 MicrYaHei">
-          <span>数据传输情况</span>
-          <span :class="data.isExecuted==1?'span1':'span2'">
-            能耗
-            <img v-if="data.energyErrorFlag==1" src="../../assets/finish.png" alt />
-            <img v-else src="../../assets/wrong.png" alt />
-          </span>
-          <span :class="data.isExecuted==1?'span1':'span2'">
-            环境
-            <img v-if="data.environmentErrorFlag==1" src="../../assets/finish.png" alt />
-            <img v-else src="../../assets/wrong.png" alt />
-          </span>
-          <span :class="data.isExecuted==1?'span1':'span2'">
-            BA
-            <img v-if="data.baErrorFalg==1" src="../../assets/finish.png" alt />
-            <img v-else src="../../assets/wrong.png" alt />
-          </span>
+    <div class='bomb'>
+        <div class='bomb-line' :class='data.isExecuted==true?"green":"red"'></div>
+        <div class='close' @click='$emit("close")'>
+            <img src='../../assets/close.png' alt />
+        </div>
+        <div class='bomb-left'>
+            <div class='bomb-left1'>当前策略</div>
+            <div
+                class='bomb-left2'
+            >应执行时间 {{data.executeTime?(data.executeTime.slice(8,10)+":"+ data.executeTime.slice(10,12)):'--'}} - {{data.pushTime?timestamp2String(data.pushTime).slice(8,10)+":"+timestamp2String(data.pushTime).slice(10,12): '--'}}</div>
+            <div class='bomb-left3'>策略可靠度</div>
+            <div id='circleEcharts' style='width:104px;height:104px'></div>
         </div>
-        <div class="snapshotss-cont2-box2 MicrYaHei">
-          <span>实际冷量</span>
-          <span>{{data.nowPlantLoad || 0}} KW</span>
-          <span>未来1小时预测冷量</span>
-          <span>{{data.predictedLoad1h || 0}} KW</span>
+        <div class='bomb-right'>
+            <water-unit :data='data' :type='2'></water-unit>
+            <div class='snapshotss-center2'>
+                <div class='snapshotss-cont2-box1 MicrYaHei'>
+                    <span>数据传输情况</span>
+                    <span :class='data.isExecuted==1?"span1":"span2"'>
+                        能耗
+                        <img v-if='data.energyErrorFlag==1' src='../../assets/finish.png' alt />
+                        <img v-else src='../../assets/wrong.png' alt />
+                    </span>
+                    <span :class='data.isExecuted==1?"span1":"span2"'>
+                        环境
+                        <img v-if='data.environmentErrorFlag==1' src='../../assets/finish.png' alt />
+                        <img v-else src='../../assets/wrong.png' alt />
+                    </span>
+                    <span :class='data.isExecuted==1?"span1":"span2"'>
+                        BA
+                        <img v-if='data.baErrorFalg==1' src='../../assets/finish.png' alt />
+                        <img v-else src='../../assets/wrong.png' alt />
+                    </span>
+                </div>
+                <div class='snapshotss-cont2-box2 MicrYaHei'>
+                    <span>实际冷量</span>
+                    <span>{{data.nowPlantLoad || 0}} KW</span>
+                    <span>未来1小时预测冷量</span>
+                    <span>{{data.predictedLoad1h || 0}} KW</span>
+                </div>
+            </div>
+            <div class='bomb-right-bottom'>
+                <el-input placeholder='你可以在此处填写备注信息' v-model='remarks' @blur='saveRemarks'></el-input>
+            </div>
         </div>
-      </div>
-      <div class="bomb-right-bottom">
-        <el-input placeholder="你可以在此处填写备注信息" v-model="remarks" @blur="saveRemarks"></el-input>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import echarts from "echarts";
-import waterUnit from "./waterUnit";
-import { updateCommand } from "@/api/strategy/strategy.js";
-import {timestamp2String} from '@/utils/helper.js'
+import echarts from 'echarts'
+import waterUnit from './waterUnit'
+import { updateCommand } from '@/api/strategy/strategy.js'
+import { timestamp2String } from '@/utils/helper.js'
 export default {
-  data() {
-    return {
-      timestamp2String,
-      circle1: 0,
-      circle2: 0,
-      remarks: ""
-    };
-  },
-  props: ["data"],
-  components: { waterUnit },
-  methods: {
-    saveRemarks() {
-      let postParams = {
-          id: this.data.id,
-          remarks: this.remarks
-      };
-      updateCommand({ postParams }).then(res => {
-        if (res.result == "success") {
-          this.$message.success("添加备注成功!");
+    data() {
+        return {
+            timestamp2String,
+            circle1: 0,
+            circle2: 0,
+            remarks: ''
         }
-      });
     },
-    getData() {
-      this.circle1 = this.data.strategyReliability.toFixed(2) || 0;
-      this.circle2 = 100 - this.circle1;
-      this.drawCircle();
-    },
-    drawCircle() {
-      var circleEcharts = echarts.init(
-        document.getElementById("circleEcharts")
-      );
-      let option = {
-        color:['#E1F2FF','#0091FF'],
-        series: [
-          {
-            name: "",
-            type: "pie",
-            radius: ["50%", "70%"],
-            avoidLabelOverlap: false,
-            label: {
-              normal: {
-                show: true,
-                position: "center",
-                formatter:function(formatter){
-                  return (formatter.percent)+'%'
-                }
-              },
-              emphasis: {
-                show: true,
-                textStyle: {
-                  fontSize: "30",
-                  fontWeight: "bold"
+    props: ['data'],
+    components: { waterUnit },
+    methods: {
+        saveRemarks() {
+            let postParams = {
+                id: this.data.id,
+                remarks: this.remarks
+            }
+            updateCommand({ postParams }).then(res => {
+                if (res.result == 'success') {
+                    this.$message.success('添加备注成功!')
                 }
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: [
-              { value: this.circle1, name: "" },
-              { value: this.circle2, name: "" }
-            ]
-          }
-        ]
-      };
-      circleEcharts.setOption(option);
+            })
+        },
+        getData() {
+            this.circle1 = this.data.strategyReliability ? this.data.strategyReliability.toFixed(2) : 0
+            this.circle2 = 100 - this.circle1
+            this.drawCircle()
+        },
+        drawCircle() {
+            var circleEcharts = echarts.init(document.getElementById('circleEcharts'))
+            let option = {
+                color: ['#E1F2FF', '#0091FF'],
+                series: [
+                    {
+                        name: '',
+                        type: 'pie',
+                        radius: ['50%', '70%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'center',
+                                formatter: function(formatter) {
+                                    return formatter.percent + '%'
+                                }
+                            },
+                            emphasis: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: '30',
+                                    fontWeight: 'bold'
+                                }
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: false
+                            }
+                        },
+                        data: [
+                            { value: this.circle1, name: '' },
+                            { value: this.circle2, name: '' }
+                        ]
+                    }
+                ]
+            }
+            circleEcharts.setOption(option)
+        }
+    },
+    mounted() {
+        this.getData()
     }
-  },
-  mounted() {
-    this.getData();
-  }
-};
+}
 </script>
 
 <style lang='scss' scoped>
 .bomb {
-  background: #cccccc;
-  width: 98%;
-  display: flex;
-  align-items: center;
-  padding: 20px 0;
-  border-left:8px solid #34C724;
-  .close {
-    cursor: pointer;
-    margin-left: 10px;
-  }
-  .bomb-left {
-    width: 240px;
-    padding-left: 30px;
-    .bomb-left1 {
-      font-size: 16px;
-      margin: 38px 0 16px 0;
+    background: #cccccc;
+    width: 98%;
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+    border-left: 8px solid #fff;
+    position: relative;
+    border-radius: 8px 0 0 8px;
+
+    .bomb-line {
+        position: absolute;
+        top: 0;
+        left: -8px;
+        width: 8px;
+        height: 357px;
+        border-radius: 8px 0 0 8px;
     }
-    .bomb-left2 {
-      color: #646c73;
-      font-size: 14px;
-      margin-bottom: 16px;
+    .red {
+        background: #f54e45ff;
     }
-    .bomb-left3 {
-      color: #646c73;
-      font-size: 14px;
-      margin-bottom: 22px;
+    .green {
+        background: #34c724ff;
     }
-  }
-  .bomb-right {
-    flex: 1;
-    margin-right:20px;
-    .snapshotss-center2 {
-      padding: 20px 0;
-      margin-bottom: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .snapshotss-cont2-box1,
-      .snapshotss-cont2-box2 {
-        flex: 1;
-        height: 80px;
-        background: url("../../assets/copy.png");
-        background-size: 100% 100%;
-        display: flex;
-        align-items: center;
-        padding-left: 24px;
-      }
-      .snapshotss-cont2-box1 {
-        margin-right: 12px;
-        span:nth-of-type(1) {
-          height: 22px;
-          font-size: 14px;
-          color: rgba(100, 108, 115, 1);
-          line-height: 19px;
-          margin-right: 20px;
-        }
-        span:not(:first-child) {
-          height: 28px;
-          background: rgba(255, 255, 255, 1);
-          border-radius: 16px;
-          font-size: 14px;
-          color: rgba(31, 36, 41, 1);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 0 6px 0 12px;
-          margin-right: 20px;
-          img {
-            width: 20px;
-            height: 20px;
-            margin-left: 8px;
-          }
-        }
-        .span1 {
-          border: 1px solid rgba(52, 199, 36, 1);
+    .close {
+        cursor: pointer;
+        margin-left: 10px;
+    }
+    .bomb-left {
+        width: 240px;
+        padding-left: 30px;
+        .bomb-left1 {
+            font-size: 16px;
+            margin: 38px 0 16px 0;
         }
-        .span2 {
-          border: 1px solid rgba(245, 78, 69, 1);
+        .bomb-left2 {
+            color: #646c73;
+            font-size: 14px;
+            margin-bottom: 16px;
         }
-      }
-      .snapshotss-cont2-box2 {
-        span:nth-of-type(1),
-        span:nth-of-type(3) {
-          height: 22px;
-          font-size: 14px;
-          color: rgba(100, 108, 115, 1);
-          line-height: 19px;
-          margin-right: 16px;
+        .bomb-left3 {
+            color: #646c73;
+            font-size: 14px;
+            margin-bottom: 22px;
         }
-        span:nth-of-type(2),
-        span:nth-of-type(4) {
-          height: 32px;
-          font-size: 24px;
-          font-family: Persagy;
-          color: rgba(31, 36, 41, 1);
-          line-height: 29px;
-          margin-right: 64px;
+    }
+    .bomb-right {
+        flex: 1;
+        margin-right: 20px;
+        .snapshotss-center2 {
+            padding: 20px 0;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .snapshotss-cont2-box1,
+            .snapshotss-cont2-box2 {
+                flex: 1;
+                height: 80px;
+                background: url('../../assets/copy.png');
+                background-size: 100% 100%;
+                display: flex;
+                align-items: center;
+                padding-left: 24px;
+            }
+            .snapshotss-cont2-box1 {
+                margin-right: 12px;
+                span:nth-of-type(1) {
+                    height: 22px;
+                    font-size: 14px;
+                    color: rgba(100, 108, 115, 1);
+                    line-height: 19px;
+                    margin-right: 20px;
+                }
+                span:not(:first-child) {
+                    height: 28px;
+                    background: rgba(255, 255, 255, 1);
+                    border-radius: 16px;
+                    font-size: 14px;
+                    color: rgba(31, 36, 41, 1);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0 6px 0 12px;
+                    margin-right: 20px;
+                    img {
+                        width: 20px;
+                        height: 20px;
+                        margin-left: 8px;
+                    }
+                }
+                .span1 {
+                    border: 1px solid rgba(52, 199, 36, 1);
+                }
+                .span2 {
+                    border: 1px solid rgba(245, 78, 69, 1);
+                }
+            }
+            .snapshotss-cont2-box2 {
+                span:nth-of-type(1),
+                span:nth-of-type(3) {
+                    height: 22px;
+                    font-size: 14px;
+                    color: rgba(100, 108, 115, 1);
+                    line-height: 19px;
+                    margin-right: 16px;
+                }
+                span:nth-of-type(2),
+                span:nth-of-type(4) {
+                    height: 32px;
+                    font-size: 24px;
+                    font-family: Persagy;
+                    color: rgba(31, 36, 41, 1);
+                    line-height: 29px;
+                    margin-right: 64px;
+                }
+                span:nth-of-type(3) {
+                    margin-right: 16px;
+                }
+            }
         }
-        span:nth-of-type(3) {
-          margin-right: 16px;
+        .bomb-right-bottom {
+            margin-top: 16px;
         }
-      }
-    }
-    .bomb-right-bottom {
-      margin-top: 16px;
     }
-  }
 }
 </style>