前端大屏页面

ui/src/main.js

@@ -13,7 +13,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 import permission from './directive/permission'
-
+import '@/style/common.scss'
 import '@/assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";

ui/src/style/common.scss

@@ -0,0 +1,180 @@
+#materialBalance {
+    padding: 0.2rem;
+    height: 8.7rem;
+    min-width: 3.75rem;
+    border-radius: 0.0625rem;
+    .bg-color-black {
+        height: 8.5rem;
+        border-radius: 0.125rem;
+      }
+      .text {
+        color: #c3cbde;
+      }
+      .chart-box {
+        margin-top: 0.2rem;
+        width: 2.125rem;
+        height: 2.125rem;
+        .active-ring-name {
+          padding-top: 0.125rem;
+        }
+      }
+  
+      .bottom-data {
+        .item-box {
+          float: right;
+          position: relative;
+          width: 50%;
+          color: #d3d6dd;
+          // 金币
+          .coin {
+            position: absolute;
+            left: 0.1rem;
+            top: 0.2125rem;
+            font-size: 0.25rem;
+            color: #ffc107;
+          }
+          .colorYellow {
+            color: yellowgreen;
+          }
+        }
+      }
+      .arrow {
+        width: 120px;
+        height: 20px;
+        background: skyblue;
+        // transform: rotate(-10deg);
+        // animation:  ;
+        background-color: red; /* 针对不支持渐变的浏览器 */
+        background-image: linear-gradient(to right, black, skyblue);
+      }
+    .layout {
+        display: flex;
+        flex-direction: row;
+        .layout_left {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            align-content: center;
+            align-items: flex-start;
+            justify-content: flex-start;
+            padding-top: 20px;
+            img {
+              width: 6em;
+              height: 4.8em;
+              margin-bottom: 1.2em;
+              padding-bottom: 1.6em;
+            }
+        }
+        .layout_center {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            align-content: center;
+            align-items: flex-start;
+            justify-content: flex-start;
+            padding-top: 20px;
+            padding-left: 23px;
+            img {
+              width: 6em;
+              height: 4.8em;
+              margin-bottom: 1.2em;
+              padding-bottom: 1.6em;
+            }
+        }
+        .layout_right {
+            padding-top: 2em;
+            // padding-left: 23px;
+            border: 1px dashed;
+            width: 25em;
+            margin-left: 2em;
+            .row {
+                width: 100%;
+                display: flex;
+                flex-direction: row;
+                .col {
+                    img {
+                      width: 6em;
+                      height: 7.8em;
+                      padding-bottom: 0.9em;
+                    }
+                }
+            }
+        }
+        .layout_arrow {
+            margin-left: 2em;
+            img {
+              position: relative;
+              top: 26em;
+              /* right: 0em; */
+              padding-bottom: 1.2em;
+              width: 12em;
+              width: 10em;
+              height: 4.8em;
+            }
+        }
+        .layout_EOB {
+          .thin_EOB {
+            width: 7em;
+            height: 5.8em;
+            margin-bottom: 1.2em;
+            padding-bottom: 1.6em;
+            position: relative;
+            right: 1em;
+          }
+        }
+        .layout_thin_arrow {
+          position: relative;
+          right: 10em;
+          bottom: 2em;
+          .thin_arrow {
+            width: 2em;
+            height: 18em;
+            position: relative;
+            left: 4em;
+            top: 7em;
+          }
+          img {
+            position: relative;
+            top: 18em;
+            right: -1em;
+            padding-bottom: 0.9em;
+            width: 4.9em;
+          }
+        }
+        .layout_stove {
+          img {
+            position: relative;
+            right: 9em;
+            top: 4.5em;
+            padding-bottom: 1em;
+            width: 12em;
+          }
+        }
+        .layout_cricle_stove {
+          .stove_1 {
+            position: relative;
+            top: 22.3em;
+            right: 19em;
+          }
+          .stove_2 {
+            position: relative;
+            top: 22.3em;
+            right: 8em;
+          }
+          .stove_3 {
+            position: relative;
+            right: 13em;
+            top: 5em;
+          }
+          .stove_4 {
+            position: relative;
+            top: 40em;
+            left: -33.7em;
+          }
+          img {
+            padding-bottom: 0.9em;
+            width: 4.9em;
+          }
+        }
+    }
+}

ui/src/views/bccHome.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="front">
+    <div id="front" style="width: 100%; height: 100%">
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body bg">
         <div class="d-flex jc-center">
@@ -62,7 +62,7 @@
               <material-balance />
             </div>
             <div>
-              <chart-right />
+              <chart-right/>
             </div>
           </div>
           <div class="three-bototm-box">

ui/src/views/front/materialBalance.vue

@@ -9,15 +9,112 @@
           <span class="fs-xl text mx-2">物料平衡表</span>
         </div>
       </div>
-      <div style="text-align: center">
-        <img src="@/assets/image/liBlack.png" style="height: 8.2rem; width: 1300px">
-        <!--<video-player  class="video-player vjs-custom-skin"
-                       ref="videoPlayer"
-                       :playsinline="true"
-                       :options="playerOptions"
-        ></video-player>-->
+      <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>
-    <!--</div>-->
   </div>
 </template>
 
@@ -32,45 +129,4 @@
 </script>
 
 <style lang="scss">
-  #materialBalance {
-    padding: 0.2rem;
-    height: 8.7rem;
-    min-width: 3.75rem;
-    border-radius: 0.0625rem;
-    .bg-color-black {
-      height: 8.5rem;
-      border-radius: 0.125rem;
-    }
-    .text {
-      color: #c3cbde;
-    }
-    .chart-box {
-      margin-top: 0.2rem;
-      width: 2.125rem;
-      height: 2.125rem;
-      .active-ring-name {
-        padding-top: 0.125rem;
-      }
-    }
-
-    .bottom-data {
-      .item-box {
-        float: right;
-        position: relative;
-        width: 50%;
-        color: #d3d6dd;
-        // 金币
-        .coin {
-          position: absolute;
-          left: 0.1rem;
-          top: 0.2125rem;
-          font-size: 0.25rem;
-          color: #ffc107;
-        }
-        .colorYellow {
-          color: yellowgreen;
-        }
-      }
-    }
-  }
 </style>

ui/src/views/index.vue

@@ -1,7 +1,7 @@
 <template>
 
   <bcchome v-if="homeType== 1"></bcchome>
-  <semshome v-else="homeType== 2"></semshome>
+  <semshome v-else-if="homeType == 2"></semshome>
 </template>
 
 <script>
@@ -22,7 +22,7 @@
     },
     mounted() {
       console.log(this.$store.state.user.homeType)
-      this.homeType = this.$store.state.user.homeType
+      this.homeType = 1
     },
     beforeDestroy(){
     },

ui/src/views/index2.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="app-main" style="background: #11285a">
   <div class="dashboard-editor-container" style="width:100%;height:100%">
-
-    <!--<panel-group @handleSetLineChartData="handleSetLineChartData" />
+<!-- 
+    <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
       <line-chart :chart-data="lineChartData" />
-    </el-row>-->
+    </el-row> -->
 
     <el-row :gutter="10">