更新 菜单icon;首页,header样式

src/layout/Aside.vue

@@ -47,7 +47,7 @@ let menu = [
     ],
   },
   {
-    icon: "Document",
+    icon: "Notification",
     title: "海事公告",
     items: [
       {
@@ -57,7 +57,7 @@ let menu = [
     ],
   },
   {
-    icon: "Avatar",
+    icon: "User",
     title: "船东管理",
     items: [
       {
@@ -77,7 +77,7 @@ let menu = [
     ],
   },
   {
-    icon: "Ship",
+    icon: "FolderChecked",
     title: "船舶安检",
     items: [
       {

src/layout/Header.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="header">
     <div class="left">
-      <img class="first" src="../assets/three.png" alt="" />
+      <!-- <img class="first" src="../assets/three.png" alt="" /> -->
       <div class="shu"></div>
-      <div class="cf fs20">{{ shippingCompany }}</div>
+      <div class="cf fs20">
+        欢迎来到 {{ shippingCompany }} 智慧远程海事管理系统
+      </div>
       <!-- <img class="logo" src="../assets/white-logo.png" alt="" />
       <div class="ml20" style="color: #fff; font-size: 18px">
         version：{{ timelineData[0]?.version }}

src/main.js

@@ -61,8 +61,5 @@ router.afterEach((to, from) => {
   store.commit("setCurrentMenuItem", to.path);
   store.commit("changefirstTitle", title);
 });
-app.config.globalProperties.check = () => {
-  console.log("check");
-};
 
 app.use(router).use(store).mount("#app");

src/views/index/Index.vue

@@ -1,11 +1,69 @@
 <template>
   <div class="df">
-    <div id="map-container" class="map-container"></div>
+    <div id="map-container" class="map-container">
+      <div class="safety-time">安全航行 {{ 100 }} 天</div>
+      <div class="ship-info" v-if="ship.code">
+        <div class="df aic">
+          <div class="c3 mr20">船名</div>
+          <div class="c7 fs16">{{ ship.shipname }}</div>
+        </div>
+        <div class="df aic">
+          <div class="c3 mr20">MMSI</div>
+          <div class="c7 fs16">{{ ship.mmsi }}</div>
+        </div>
+        <div class="df aic">
+          <div class="c3 mr20">IMO</div>
+          <div class="c7 fs16">{{ ship.imo }}</div>
+        </div>
+        <div class="df aic">
+          <div class="c3 mr20">船长</div>
+          <div class="c7 fs16">{{ ship.length }}</div>
+          <div class="unit c7">米</div>
+        </div>
+        <div class="df aic">
+          <div class="c3 mr20">船宽</div>
+          <div class="c7 fs16">{{ ship.breadth }}</div>
+          <div class="unit c7">米</div>
+        </div>
+        <div class="df aic">
+          <div class="c3 mr20">吨位</div>
+          <div class="c7 fs16">{{ ship.loadTons }}</div>
+          <div class="unit c7">吨</div>
+        </div>
+        <div class="df aic">
+          <div class="c3 mr20">满载吃水</div>
+          <div class="c7 fs16">{{ ship.draught }}</div>
+          <div class="unit c7">米</div>
+        </div>
+        <div class="df aic c5">
+          <div class="c3 mr20">船龄</div>
+          <div class="c7 fs16">{{ ship.age }}</div>
+          <div class="unit c7">年</div>
+        </div>
+
+        <div class="df jcc mt20">
+          <el-button
+            style="width: 120px"
+            type="primary"
+            @click="
+              router.push({
+                path: '/shipManage/shipDetail',
+                query: {
+                  shipCode: ship.code,
+                },
+              })
+            "
+          >
+            查看详情
+          </el-button>
+        </div>
+      </div>
+    </div>
     <div class="info">
       <div class="data">
         <div class="df aic">
           <div class="shu"></div>
-          <div class="right-title">数据统计</div>
+          <div class="right-title">船舶资产统计</div>
         </div>
         <div class="df data-line">
           <img class="icon" src="../../assets/ship.png" />
@@ -37,12 +95,12 @@
             </div>
           </div>
         </div>
-        <div class="df aic jcsb mt30 mb10 aic" v-if="ship.code">
+        <div class="df aic jcsb mt30 mb10 aic">
           <div class="df aic">
             <div class="shu"></div>
-            <div class="right-title">船舶信息</div>
+            <div class="right-title">工作台通知</div>
           </div>
-          <el-button
+          <!-- <el-button
             size="small"
             type="primary"
             @click="
@@ -55,16 +113,9 @@
             "
           >
             详情
-          </el-button>
+          </el-button> -->
         </div>
-        <div class="pl20 ship-info" v-if="ship.code">
-          <!-- <div class="df aic">
-            <div class="c3 mr20" style="padding-top: 4px">
-              <img style="width: 20px; height: 20px" :src="icon" alt="" />
-            </div>
-            <div class="c7 fs16">汇很多科技认证</div>
-          </div> -->
-
+        <!-- <div class="pl20 ship-info" v-if="ship.code">
           <div class="df aic">
             <div class="c3 mr20">船名</div>
             <div class="c7 fs16">{{ ship.shipname }}</div>
@@ -102,24 +153,6 @@
             <div class="c7 fs16">{{ ship.age }}</div>
             <div class="unit c7">年</div>
           </div>
-
-          <!-- <div class="df jcc mt50">
-            <el-button
-              style="width: 160px"
-              type="primary"
-              size="large"
-              @click="
-                router.push({
-                  path: '/shipManage/shipDetail',
-                  query: {
-                    shipCode: ship.code,
-                  },
-                })
-              "
-            >
-              查看详情
-            </el-button>
-          </div> -->
         </div>
         <div v-if="ship.code">
           <div class="status">
@@ -146,7 +179,7 @@
               alt=""
             />
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -290,11 +323,11 @@ function initMap() {
       right: "40px",
     },
   });
-  let hawkEye = new AMap.HawkEye({
-    opened: false,
-  });
+  // let hawkEye = new AMap.HawkEye({
+  //   opened: false,
+  // });
   map.value.addControl(toolBar);
-  map.value.addControl(hawkEye);
+  // map.value.addControl(hawkEye);
   drawMarkers();
 }
 
@@ -520,6 +553,17 @@ onMounted(() => {
   margin-left: 10px;
 }
 
+.ship-info {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 10;
+  background: #fff;
+  padding: 20px;
+  padding-top: 10px;
+  border-radius: 10px;
+}
+
 .ship-info > div {
   margin-top: 10px;
 }
@@ -549,4 +593,19 @@ onMounted(() => {
   right: 20px;
   top: 11px;
 }
+
+:deep().amap-logo,
+:deep().amap-copyright {
+  display: none !important;
+}
+
+.safety-time {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  background: #3c9aecac;
+  padding: 8px 30px;
+  color: #fff;
+  font-size: 14px;
+}
 </style>