驾驶舱

src/App.vue

@@ -10,6 +10,7 @@ export default {
   data() {
     return {};
   },
+  created() {},
   methods: {},
   components: {},
 };

src/router/index.js

@@ -12,7 +12,6 @@ const routes = [
         name: "datacollect",
         component: () => import("../views/DataCollect.vue"),
       },
-
       // 刘龙龙新加的全部路由
       //db网关-ip配置-无线网关
       {
@@ -30,7 +29,7 @@ const routes = [
       {
         path: "/dbcollectiongate",
         name: "dbcollectiongate",
-        component: () => import("../views/DbCollectiongate.vue")
+        component: () => import("../views/DbCollectiongate.vue"),
       },
       // db网关-数据采集配置-网口配置
       {

src/views/Cockpit.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="container">
-    <div class="btns">
-      <div class="btnOne">提交</div>
-      <div class="btnTwo">网关配置</div>
-      <div class="btnThree">网关维护</div>
-      <div class="btnFour">网关监控</div>
-    </div>
     <div class="title">
       <img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
       <span class="date">{{ data }}</span>
@@ -44,23 +38,19 @@
         </p>
         <div id="productChart"></div>
       </div>
-      <div class="mainshaftChart">
+
-        <p>
-          <span>主轴转换监控</span>
-        </p>
-        <div id="mainshaftChart"></div>
-      </div>
       <div class="loadChart">
         <p>
           <span>负载电流监控</span>
         </p>
         <div id="loadChart"></div>
       </div>
-      <div class="ratedChart">
+      <div class="chartsDiv">
+        <div class="mainshaftChart">
           <p>
-          <span>额定电流监控</span>
+            <span>主轴转换监控</span>
           </p>
-        <div id="ratedChart"></div>
+          <div id="mainshaftChart"></div>
         </div>
         <div class="two">
           <p>
@@ -74,6 +64,13 @@
           </p>
           <div id="one"></div>
         </div>
+        <div class="ratedChart">
+          <p>
+            <span>额定电流监控</span>
+          </p>
+          <div id="ratedChart"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -170,41 +167,11 @@ export default {
   width: 100vw;
   height: 100vh;
   background-color: #fff;
-  background-image: url("../assets/image/图片 2 Copy@1x.png");
+  // background-image: url("../assets/image/图片 2 Copy@1x.png");
   background-size: cover; /* 图像大小适应容器 */
   background-repeat: no-repeat; /* 防止图像平铺 */
   background-position: center; /* 图像在容器中居中 */
-  .btns {
+
-    div {
-      width: 146px;
-      height: 39px;
-      position: absolute;
-      background-image: url("../assets/image/未选中-文字背景_06.png");
-      background-size: cover; /* 图像大小适应容器 */
-      background-repeat: no-repeat; /* 防止图像平铺 */
-      background-position: center; /* 图像在容器中居中 */
-      color: #fff;
-      font-size: 20px;
-      text-align: center;
-      line-height: 39px;
-      right: 10px;
-      font-family: "Microsoft Yahei";
-    }
-    .btnOne {
-      top: 80px;
-    }
-    .btnTwo {
-      top: 129px;
-    }
-    .btnThree {
-      top: 178px;
-    }
-    .btnFour {
-      top: 227px;
-      color: #6b92fd;
-      background-image: url("../assets/image/选中-文字背景_07.png");
-    }
-  }
   .title {
     height: 11%;
     display: flex;
@@ -279,30 +246,35 @@ export default {
       margin-left: 45px;
       position: relative;
     }
-    .mainshaftChart {
+    // .mainshaftChart {
-      margin-left: 45px;
+    //   margin-left: 45px;
-      margin-top: 45px;
+    //   margin-top: 45px;
-      position: relative;
+    //   position: relative;
-    }
+    // }
     .loadChart {
       position: absolute;
       right: 45px;
       top: 180px;
     }
-    .ratedChart {
+    // .ratedChart {
-      position: absolute;
+    //   position: absolute;
-      right: 45px;
+    //   right: 45px;
-      top: 533px;
+    //   top: 533px;
-    }
+    // }
-    .one {
+    // .one {
-      position: absolute;
+    //   position: absolute;
-      right: 560px;
+    //   right: 560px;
-      top: 533px;
+    //   top: 533px;
-    }
+    // }
-    .two {
+    // .two {
-      position: absolute;
+    //   position: absolute;
-      left: 560px;
+    //   left: 560px;
-      top: 533px;
+    //   top: 533px;
+    // }
+    .chartsDiv {
+      display: flex;
+      justify-content: space-between;
+      margin: 45px;
     }
     .one,
     .two,