修改界面显示

src/views/model/equipment.vue

@@ -37,6 +37,125 @@
         <Chart ref="chart6"></Chart>
       </div>
     </div>
+    <div class="box7">
+      <div class="boxTitle">保养看板</div>
+      <div class="scrollTable">
+        <div style="background-color: #09417066">
+          <div class="scrollTableItem" style="font-weight: bold;">
+            序号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备编号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备名称
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            保养项目
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            指派人
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            当前状态
+          </div>
+        </div>
+        <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: 84%;overflow: hidden;"
+        >
+          <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+          >
+            <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value2 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value3 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value4 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value5 }}
+              </div>
+            </div>
+          </div>
+        </vue-seamless-scroll>
+      </div>
+    </div>
+    <div class="box8">
+      <div class="boxTitle">异常看板</div>
+      <div class="scrollTable">
+        <div style="background-color: #09417066">
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备编号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备名称
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            报警时间
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            报警描述
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            状态持续时间
+          </div>
+        </div>
+        <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: 84%;overflow: hidden;"
+        >
+          <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+          >
+            <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value2 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value3 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value4 }}
+              </div>
+            </div>
+          </div>
+        </vue-seamless-scroll>
+      </div>
+    </div>
 
     <div class="chart11">
       <Chart ref="chart11"></Chart>
@@ -69,6 +188,7 @@
 </template>
 
 <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
 import Chart from "@/components/board/Chart";
 import {getData} from "@/api/board/getData";
 import * as echarts from 'echarts'
@@ -76,7 +196,8 @@ import * as echarts from 'echarts'
 export default {
   name: "Liner",
   components: {
-    Chart
+    Chart,
+    vueSeamlessScroll,
   },
   props: {
     exit: {
@@ -1193,6 +1314,63 @@ export default {
   }
 }
 
+.box7 {
+  position: absolute;
+  top: 79%;
+  left: 1%;
+  width: 37%;
+  height: 20%;
+  border: 1px solid #123061;
+
+  .scrollTable {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+
+  .scrollTableItem {
+    color: rgb(185, 186, 192);
+    margin: auto 0px;
+    padding: 4px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    display: inline-block;
+    width: calc(100% / 6);
+  }
+}
+
+.box8 {
+  position: absolute;
+  top: 79%;
+  left: 62%;
+  width: 37%;
+  height: 20%;
+  border: 1px solid #123061;
+
+
+  .scrollTable {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+
+  .scrollTableItem {
+    color: rgb(185, 186, 192);
+    margin: auto 0px;
+    padding: 4px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    display: inline-block;
+    width: calc(100% / 5);
+  }
+}
+
 .chart11 {
   position: absolute;
   top: 20%;
@@ -1278,7 +1456,7 @@ export default {
 
   .span2 {
     position: absolute;
-    bottom: 55%;
+    bottom: 52%;
     left: 50%;
     transform: translateX(-50%);
     color:#FFF;
@@ -1287,7 +1465,7 @@ export default {
 
   .span3 {
     position: absolute;
-    top: 55%;
+    top: 52%;
     left: 50%;
     transform: translateX(-50%);
     color:#2ffae0;

src/views/model/model.vue

@@ -6,49 +6,49 @@
         <el-row>
           <el-col :span="3">
             <div class="toolItem" @click="click1('factoryIntroduction')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/factoryIntroduction.png" />
               <div class="grid-content bg-purple">工厂介绍</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('productDistribution')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/productDistribution.png" />
               <div class="grid-content bg-purple-light">产品分布</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('dataCentre')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/dataCentre.png" />
               <div class="grid-content bg-purple">数据中心</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('live')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/live.png" />
               <div class="grid-content bg-purple">现场直播</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click2()">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/process.png" />
               <div class="grid-content bg-purple-light">工艺流程</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('production')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/production.png" />
               <div class="grid-content bg-purple">生产</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('quality')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/quality.png" />
               <div class="grid-content bg-purple-light">质量</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('equipment')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/equipment.png" />
               <div class="grid-content bg-purple-light">设备</div>
             </div>
           </el-col>
@@ -645,6 +645,11 @@ export default {
   padding: 0
 }
 
+.icon {
+  width:2vw;
+  margin:0 auto ;
+}
+
 .container {
   width: 100vw;
   height: 33.33vw;