修改接口

src/views/board/foaming/index.vue

@@ -58,6 +58,21 @@
       <div>发泡机 - 运行状态：</div>
     </div>
     <div class="foamingMachine"></div>
+    <div class="left1">
+      <span>A</span>
+    </div>
+    <div class="left2">
+      <span>B</span>
+    </div>
+    <div class="right1" v-if="$route.query.id === '1' || id === '1'">
+      <span>C</span>
+    </div>
+    <div class="right2" v-if="$route.query.id === '1' || id === '1'">
+      <span>D</span>
+    </div>
+
+    <div class="chartSpan1">东线</div>
+    <div class="chartSpan2">西线</div>
 
     <div class="supplementInfo">注射压力标准范围：10.0-14.0Mpa A、B组份枪头压力差＜1Mpa</div>
     <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
@@ -541,7 +556,7 @@ export default {
                   value4: val.TARGET,
                   value5: val.PLAN_SUM,
                   value6: val.PRO_SUM,
-                  value7: ((val.PRO_SUM / val.TARGET) * 100).toFixed(2) + '%',
+                  value7: ((val.PRO_SUM / val.PLAN_SUM) * 100).toFixed(2) + '%',
                   value8: val.ANHOUR,
                   value9: val.TWOHOUR,
                   value10: val.THREEHOUR,
@@ -1719,7 +1734,7 @@ export default {
   }
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .title {
   position: absolute;
   transform: translateY(-50%);
@@ -2010,4 +2025,104 @@ export default {
   background: #00ff00;
   border-radius: 50%;
 }
+.left1{
+  background-image: url("../../../assets/board/left.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 38%;
+  left: 32%;
+  width: 5vw;
+  height: 4.05vw;
+  span{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 28%;
+    left: 43%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+.left2{
+  background-image: url("../../../assets/board/left.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 44%;
+  left: 43%;
+  width: 5vw;
+  height: 4.05vw;
+  span{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 28%;
+    left: 43%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+.right1{
+  background-image: url("../../../assets/board/right.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 36%;
+  left: 57%;
+  width: 5vw;
+  height: 2.86vw;
+  span{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 37%;
+    left: 57%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+.right2{
+  background-image: url("../../../assets/board/right.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 39%;
+  left: 68%;
+  width: 5vw;
+  height: 2.86vw;
+  span{
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 37%;
+    left: 57%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+.chartSpan1{
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 94.3%;
+  left: 73%;
+  font-size: 0.8vw;
+  color: #fff;
+}
+.chartSpan1{
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 94.3%;
+  left: 73%;
+  font-size: 0.8vw;
+  color: #fff;
+}
+.chartSpan2{
+  position: absolute;
+  transform: translate(-50%,-50%);
+  top: 94.3%;
+  left: 96%;
+  font-size: 0.8vw;
+  color: #fff;
+}
 </style>