新增 首页;样式更新

index.html

@@ -14,6 +14,7 @@
       * {
         margin: 0;
         padding: 0;
+        box-sizing: border-box;
       }
       html,
       body {

src/App.vue

@@ -73,8 +73,9 @@ export default {
 
 .main-section {
   margin: 24px 0 0 24px;
-  height: calc(100% - 76px);
+  height: calc(100vh - 136px);
   overflow-y: auto;
+  border: 1px solid red;
 }
 
 .line-container-p18 {

src/components/Header.vue

@@ -6,7 +6,7 @@
       <img class="logo" src="../assets/white-logo.png" alt="" />
       <div
         class="ml20"
-        style="color: #fff; font-size: 18px; height: 60px; padding-top: 50px"
+        style="color: #fff; font-size: 18px; height: 60px; padding-top: 30px"
       >
         version：{{ timelineData[0]?.version }}
       </div>

src/main.js

@@ -32,17 +32,17 @@ router.beforeEach(async (to, from, next) => {
     if (store.state.menuData.length) {
       let path = store.state?.menuData[0]?.items[0].path;
       if (0 === to.matched.length) {
-        next(path);
+        next("/");
       } else if (to.path == "/login" || to.path == "/") {
-        next(path);
+        next("/");
       } else if (rolePermission?.indexOf(to.meta.code) == -1) {
-        next(path);
+        next("/");
       } else {
         next();
       }
     } else {
       if (to.path == "/") {
-        next("/voyage/voyageList");
+        next();
       } else {
         next();
       }

src/router/index.js

@@ -5,11 +5,20 @@ import {
   createRouter,
 } from "vue-router";
 import Login from "../views/index/Login.vue";
+import Index from "../views/index/Index.vue";
 import VoyageList from "../views/voyage/voyageList.vue";
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
+    {
+      path: "/",
+      name: "index",
+      meta: {
+        title: "主页",
+      },
+      component: Index,
+    },
     {
       path: "/login",
       name: "login",

src/views/index/Index.vue

@@ -1,2 +1,89 @@
-<template>主页</template>
-<script setup></script>
+<template>
+  <div class="df">
+    <div id="map-container" class="map-container"></div>
+    <div
+      style="width: 200px; height: calc(100vh - 256px); border: 1px solid grey"
+    ></div>
+  </div>
+  <div class="df">
+    <div
+      style="width: calc(100% - 200px); height: 118px; border: 1px solid green"
+    ></div>
+    <div style="width: 200px; height: 118px; border: 1px solid blue"></div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, toRefs, computed, onMounted } from "vue";
+import { ElNotification } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+
+import md5 from "md5";
+import api from "../../apis/fetch";
+let map = ref({});
+
+function initMap() {
+  map.value = new AMap.Map("map-container", {
+    zoom: 11, //级别
+    center: [120.563757, 31.891174], //中心点坐标
+    mapStyle: "amap://styles/f48d96805f5fa7f5aada657c5ee37017",
+    zoomEnable: false,
+    dragEnable: false,
+  });
+  let toolBar = new AMap.ToolBar({
+    position: {
+      top: "40px",
+      right: "40px",
+    },
+  });
+  let hawkEye = new AMap.HawkEye({
+    opened: false,
+  });
+  // map.value.addControl(toolBar);
+  map.value.addControl(hawkEye);
+  return;
+  let markers = [];
+  for (let i of medias.value) {
+    let content = `<div style='width:160px'>
+        ${
+          i.audit == 1
+            ? `<img id='img${i.id}' style='width:160px;height:160px;object-fit:contain;' src='${i.viewUrl}'/>`
+            : ``
+        }
+        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+      </div>`;
+
+    let marker = new AMap.Marker({
+      content,
+      position: new AMap.LngLat(i.longitude, i.latitude),
+      offset: new AMap.Pixel(-75, i.audit == 1 ? -195 : -30),
+    });
+    if (i.audit == 1) {
+      marker.on("click", () => {
+        openMediaModal(i.viewUrl, 1, "航次图片", i);
+      });
+    }
+
+    markers.push(marker);
+  }
+
+  let overlayGroups = new AMap.OverlayGroup(markers);
+  map.value.on("complete", function () {
+    let t = setTimeout(() => {
+      map.value.add(overlayGroups);
+      map.value.setFitView(markers, true, [200, 50, 0, 0], 18);
+      clearTimeout(t);
+    }, 2000);
+  });
+}
+onMounted(() => {
+  initMap();
+});
+</script>
+
+<style scoped>
+.map-container {
+  width: calc(100% - 200px);
+  height: calc(100vh - 256px);
+}
+</style>

src/views/index/Login.vue

@@ -229,7 +229,7 @@ function login() {
           localStorage.loginAccountId
         );
 
-        router.replace({ path: store.state.menuData[0]?.items[0].path });
+        router.replace("/");
         store.commit("changeLogin", true);
       } else {
         ElNotification.error({

src/views/voyage/voyageDetail.vue

@@ -136,7 +136,11 @@
         </div>
       </div>
       <div class="line">
-        <div class="info-line" v-for="(item, index) in voyage.voyageDetails">
+        <div
+          class="info-line"
+          v-for="(item, index) in voyage.voyageDetails"
+          :key="item.portId"
+        >
           <div class="info-line-title">卸货港{{ " # " + (index + 1) }}</div>
           <el-input
             class="info-line-text"
@@ -253,6 +257,7 @@
           <el-tab-pane
             v-for="(item, index) in voyage.voyageDetails"
             :label="item.portName + ' # ' + (index + 1)"
+            :key="item.portId"
             :name="item.portId + ''"
           >
             <div class="line">
@@ -392,6 +397,7 @@
       <el-tab-pane
         v-for="(item, index) in voyage.voyageDetails"
         :label="item.portName + ' # ' + (index + 1)"
+        :key="item.portId"
         :name="item.portId + ''"
       ></el-tab-pane>
     </el-tabs>