大屏左侧图

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}

ui/.env.development

@@ -3,7 +3,7 @@ ENV = 'development'
 
 # CPMS管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
-#VUE_APP_BASE_API = 'http://47.114.101.16:8090'
+VUE_APP_BASE_API = 'http://47.114.101.16:8090'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

ui/src/views/front/materialBalance.vue

@@ -11,109 +11,107 @@
       </div>
       <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
         height: 100%;">
-        <span class="layout">
-          <span class="layout_left" style="">
-            <img src="@/assets/img/EBO框.png" style="">
-            <img src="@/assets/img/EBO框.png" style="">
-            <img src="@/assets/img/EBO框.png" style="">
-            <img src="@/assets/img/EBO框.png" style="">
-            <img src="@/assets/img/EBO框.png" style="">
-          </span>
-          <!-- 需要做动效 -->
-          <span class="layout_center">
-            <img src="@/assets/img/left 进箭头.png" style="">
-            <img src="@/assets/img/left 进箭头.png" style="">
-            <img src="@/assets/img/left 进箭头.png" style="">
-            <img src="@/assets/img/left 进箭头.png" style="">
-            <img src="@/assets/img/left 进箭头.png" style="">
-          </span>
-          <span class="layout_right">
-            <el-row class="row"> 
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-            </el-row>
-            <el-row class="row"> 
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉-red.png" style="">
-              </el-col>
-            </el-row>
-            <el-row class="row"> 
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉-yellow.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-            </el-row>
-            <el-row class="row"> 
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-              <el-col class="col" :span="8">
-                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-              </el-col>
-            </el-row>
-            <!-- <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-            <img src="@/assets/img/冷炼炉 拷贝 2.png" style=""> -->
-            <!-- <img src="@/assets/img/冷炼炉-yellow.png" style="">
-            <img src="@/assets/img/冷炼炉-yellow.png" style="">
-            <img src="@/assets/img/冷炼炉-yellow.png" style="">
-            <img src="@/assets/img/冷炼炉-red.png" style="">
-            <img src="@/assets/img/冷炼炉-red.png" style="">
-            <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-            <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
-            <img src="@/assets/img/冷炼炉 拷贝 2.png" style=""> -->
-          </span>
-          <!-- 需要做动效 -->
-          <span class="layout_arrow">
-            <img src="@/assets/img/粗箭头5.png" alt="">
-          </span>
-          <span class="layout_EOB">
-            <img class="thin_EOB" src="@/assets/img/EBO框.png" style="">
-          </span>
-          <span class="layout_thin_arrow">
-            <!-- 需要做动效 -->
-            <img class="thin_arrow" src="@/assets/img/细出箭头1.png" alt="">
-            <img src="@/assets/img/炉子.png" alt="">
-          </span>
-          <span>
-            <!-- 需要做动效 -->
-            <img src="@/assets/img/左上箭头3.png" alt="" style="width: width: 20px;
-            height: 10em;
-            position: relative;
-            right: 10em;
-            top: 10em;">
-          </span>
-          <span class="layout_stove">
-            <img src="@/assets/img/压缩机.png" alt="">
-          </span>
-          <span class="layout_cricle_stove">
-            <img class="stove_1" src="@/assets/img/炉子.png" alt="">
-            <img class="stove_2" src="@/assets/img/炉子.png" alt="">
-            <img class="stove_3" src="@/assets/img/炉子.png" alt="">
-            <img class="stove_4" src="@/assets/img/炉子.png" alt="">
-          </span>
-          <span class="layout__right"></span>
-        </span>
+        <div class="layout">
+          <div class="layout_left" style="">
+            <div class="flex">
+                <span class="box_one">Nap</span>
+                <div class="arror_one">
+                    <p class="textOne">7326</p>
+                    <img src="@/assets/img/arror1.png" class="arror1">
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">乙烷</span>
+                <div class="arror_one">
+                    <p class="textOne">4</p>
+                    <img src="@/assets/img/arror1.png" class="arror1">
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">C5</span>
+                <div class="arror_one">
+                    <p class="textOne">7326</p>
+                    <img src="@/assets/img/arror1.png" class="arror1">
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">C6-C8</span>
+                <div class="arror_one">
+                    <p class="textOne">7326</p>
+                    <img src="@/assets/img/arror1.png" class="arror1">
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">LPG</span>
+                <div class="arror_one">
+                    <p class="textOne">0</p>
+                    <img src="@/assets/img/arror1.png" class="arror1">
+                </div>
+            </div>
+          </div>
+
+          <div class="layout_left">
+            <div class="box_two">
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-yellow.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-red.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png">
+                      <p class="text2">310-H-109B</p>
+                </div>
+            </div>
+
+            <div class="furnace">Furnace</div>
+          </div>
+         
+         
+
+        </div>
       </div>
   </div>
 </template>
@@ -129,4 +127,75 @@
 </script>
 
 <style lang="scss">
+
+  .box_one{
+    width: 101px;
+    height: 55px;
+    background: url(../../assets/img/ebo.png);
+    background-size: 100% 100%;
+    margin-bottom: 20px;
+    font-size: 18px;
+    color: rgb(178, 201, 255);
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .textOne{
+    font-size: 16px;
+    color: rgb(32, 99, 255);
+    text-align: center;
+
+  }
+  #materialBalance .layout .layout_left img.arror1{
+    width: 39px;
+    height: 18px;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  .flex{
+    display: flex;
+  }
+  .box_two{
+    width: 350px;
+    height: 400px;
+    z-index: 627;
+    border: 1px dotted rgb(78, 128, 248);
+    margin-top: -20px;
+    margin-left: 10px;
+    display: flex;
+    flex-flow: wrap;
+  }
+
+  .arror_one{
+    margin-left: 10px;
+  }
+
+  #materialBalance .layout .layout_left .luziBox img{
+      width: 55px;
+      height: 62px;
+      margin-bottom: 0;
+      padding-bottom: 0;
+      margin-top: 10px;
+  }
+  .text2{
+    font-size: 12px;
+    color: rgb(178, 201, 255);
+    text-align: center;
+
+  }
+  .luziBox{
+    width: 33%;
+  }
+  .furnace {
+    font-size: 20px;
+    color: rgb(178, 201, 255);
+    text-align: center;
+    display: block;
+    width: 100%;
+    margin-top: 10px;
+  }
+
 </style>