diff --git a/src/api/Boat/info.ts b/src/api/Boat/info.ts
index 465f11e..885a4b3 100644
--- a/src/api/Boat/info.ts
+++ b/src/api/Boat/info.ts
@@ -83,10 +83,14 @@ export function getSailScheduleImportAPI(data: { file: File }) {
  * @param {BoatInfoPageType} data 分页信息
  * @return 返回请求分页列表接口的结果
  */
-export function getSailScheduleExportAPI(data: Partial<BoatInfoPageType>) {
-  return http.get<ArrayBuffer>(api.sailScheduleExport, data, {
-    responseType: 'arraybuffer',
-  });
+export function getSailScheduleExportAPI() {
+  return http.get<ArrayBuffer>(
+    api.sailScheduleExport,
+    {},
+    {
+      responseType: 'arraybuffer',
+    }
+  );
 }
 
 /**
diff --git a/src/assets/icons/FileDown.svg b/src/assets/icons/FileDown.svg
new file mode 100644
index 0000000..e7dfa27
--- /dev/null
+++ b/src/assets/icons/FileDown.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="85" height="86" viewBox="0 0 85 86" fill="none">
+<rect x="16" y="14" width="54" height="49"   fill="url(#pattern_fill_0_2)" >
+</rect>
+<rect x="3" y="47" width="81" height="32"   fill="url(#pattern_fill_0_3)" >
+</rect>
+<defs>
+<pattern id="pattern_fill_0_2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use transform="translate(0, -0.008634222919937212) scale(0.038461538461538464, 0.0423861852433281) rotate(0)" xlink:href="#image0" />
+</pattern>
+
+<image id="image0" width="26" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAYCAYAAADkgu3FAAAAAXNSR0IArs4c6QAAAnlJREFUSEvtVTtoFFEUPedtEkEUTWUKq4AoKGJhjJUaUCTZiUJAIQgKih+EmCofwkzWddYkrI2YQlGxUCSgENCZZQsDmnLFQvwgCKayiE0CKooJ+67syLpvzcx+bHW6ee983n2cdy8R9Q37zWyQHMlNkRhjQ4D3olQbkl2fw/CMFLEzZxXlRi0mRYwGT8ON367TyOtX5NU6jfrhxq/VaeT3KSIgieCdQM6HChDXCW4p7GnBBaSsyTqNShUJkBPX2h0q4HjPCbYFRuDfVPTf6N+8upHMDii93kyVAntA9AXxrpQ628+R2BVwBZMaMl2WTt2wgLHOV4STGVaQ8UoPs9Z4R2loYIC0/dcktlU0EjyTlNUR+o5sf5bEnir8l1R2JgHKxSigCESEJ3A5fi8UY/unFBHa30o9UJxfTdXxBimcIGE0Waa1Gx+qp9cp20uDHChygkNChpDqvlIStv0eUqYINhniD/WnlmO4uXO5ouGZF41qw/x9AEd+m0CWRNiLlBWEo3xMOJl2imRJNBuEWfmhu5E+/CXUbPDRWq5SHsG9RiWLQnbCjeeKayvnUcJvpcYTAq2G2VtRaj+S8fkys0SmhVrPENxawmJOFA4gac2Z2PDBV5iujcgSaDcEPoqofUh1fQjW7OxmMj9DYKOByckyOjFhLf5ZffSETTxoYn71FIkeQ2hBNA9C6UYKC1e8zriuaYl960Xy6FLoM6iWKuV44wCHS4LyHUSsLDQCV6es0Upa0RWZLMc7TsEdkjFzWUTyQpyE23232oFrMyqojPodFHlMcE3hVyBfhTyES9bTaiYr412NMZLdTpW/BWJZ8jiHMetNNUpx/yeqgyZ5VgWLrgAAAABJRU5ErkJggg==" />
+
+<pattern id="pattern_fill_0_3" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use transform="translate(-0.007936507936507974, 0) scale(0.028218694885361557, 0.07142857142857142) rotate(0)" xlink:href="#image1" />
+</pattern>
+
+<image id="image1" width="36" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAOCAYAAABHN77IAAAAAXNSR0IArs4c6QAAAPNJREFUSEvtlLFKA0EURe+ZUqz9CQtLbWwDsmtjLRZiqY1Y7guYxB9Ib2UtFjMWIoJY6Sf4BSkFxXae7GoqiUEIm2ZfO8M7h8vjIovHSIYT86g80hKGKkagzM4pWPxErNQeWWxpWLy06mS3m0H+XDPd9Uaw5FOBDD0NivtWharYC3A3ZXZCv9LvEpp3kF1C/00Iix+I1aaHMge6KK7m7Vjou6XDIF02PSS9g6UnpO2fYpq4OJfy60Khs5etg/qItW8hf0BV2gvouiWBPzHZ2aH+Eao0FjpZqpRrmEdlvxFqxtI+8jPERpti7nr04GMNdm9q7hdmVXK3tcmcAgAAAABJRU5ErkJggg==" />
+
+</defs>
+</svg>
diff --git a/src/config/permission.ts b/src/config/permission.ts
index 5ac99e3..3dc31fc 100644
--- a/src/config/permission.ts
+++ b/src/config/permission.ts
@@ -35,8 +35,12 @@ router.beforeEach(async (to, _, next) => {
       // 如果已登录，重定向到主页
       next({ path: '/' });
     } else {
-      // 如果不传参数就会重新执行路由拦截，重新进到这里
-      next();
+      try {
+        // 如果不传参数就会重新执行路由拦截，重新进到这里
+        next();
+      } catch (error) {
+        next(`/login?redirect=${to.path}`);
+      }
     }
   } else {
     // 用户未登录
diff --git a/src/layouts/Main/index.vue b/src/layouts/Main/index.vue
index f68d040..51b87b4 100644
--- a/src/layouts/Main/index.vue
+++ b/src/layouts/Main/index.vue
@@ -2,7 +2,9 @@
   <div class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" :key="route.path" />
+        <div style="width: 100%; height: 100%">
+          <component :is="Component" :key="route.path" />
+        </div>
       </transition>
     </router-view>
   </div>
diff --git a/src/layouts/Sidebar/index.vue b/src/layouts/Sidebar/index.vue
index 233725e..5a5a431 100644
--- a/src/layouts/Sidebar/index.vue
+++ b/src/layouts/Sidebar/index.vue
@@ -36,14 +36,9 @@ interface menuListType {
 const menuList = ref<menuListType[]>([
   {
     path: '/boat',
-    title: '船舶信息',
+    title: '船货信息',
     icon: 'BoatInfo',
   },
-  {
-    path: '/manifest',
-    title: '舱单信息',
-    icon: 'ManifestInfo',
-  },
   {
     path: '/send',
     title: '发布信息',
diff --git a/src/router/index.ts b/src/router/index.ts
index 84065c1..43e5dd4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -89,12 +89,12 @@ export const constantRoutes: Array<RouteRecordRaw> = [
           title: '船舶信息',
         },
       },
-      {
-        path: '/manifest',
-        name: 'Manifest',
-        component: () => import('@/views/Manifest/index.vue'),
-        meta: { title: '舱单信息' },
-      },
+      // {
+      //   path: '/manifest',
+      //   name: 'Manifest',
+      //   component: () => import('@/views/Manifest/index.vue'),
+      //   meta: { title: '舱单信息' },
+      // },
       {
         path: '/send',
         name: 'sendInfo',
@@ -119,6 +119,11 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'notFound',
+    redirect: '/404',
+  },
 ];
 
 /**
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6861d92..062977d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,6 @@
 @import './variables.scss';
-@import './reset.scss';
+
+// @import './reset.scss';
 @import './theme/theme-default.scss';
 @import './theme/theme-dark.scss';
 @import './transition.scss';
@@ -25,6 +26,7 @@ html {
   height: 100%;
 }
 body {
+  margin: 0;
   background: #f0f2f5;
 }
 #app {
diff --git a/src/views/Boat/components/BoatAddress.vue b/src/views/Boat/components/BoatAddress.vue
new file mode 100644
index 0000000..d2e86f8
--- /dev/null
+++ b/src/views/Boat/components/BoatAddress.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="boat-address">
+    <div class="boatAddress-left">
+      <svg-icon icon="return" className="side-icon" @click="onClickReturn"></svg-icon>
+      <div class="left-content">
+        <div class="search">
+          <el-form :model="searchTableForm" ref="tableFormRef">
+            <el-form-item>
+              <div class="search-wrap">
+                <div class="search-top">
+                  <div class="card-title">请选择船名</div>
+                  <div class="card-text">
+                    <RemoteSelect
+                      v-model:value="searchTableForm.scheduleId"
+                      :api="postSaleShipListAPI"
+                      placeholder=""
+                    />
+                  </div>
+                </div>
+                <div class="search-tips">* 查询仅限于用户 近期的有效船期表 中的船舶数据。</div>
+              </div>
+            </el-form-item>
+            <div class="search-bottom">
+              <div class="bottom-one" @click="onClickSearch">查询</div>
+            </div>
+          </el-form>
+        </div>
+
+        <div class="left-tips">* 用户承诺：船图资料保密，仅用于船舶配载计划编制参考使用。</div>
+      </div>
+    </div>
+    <div class="boatAddress-right">
+      <div class="api-btn">
+        <div
+          class="btn"
+          :class="{ 'btn-active': '船位跟踪' === item }"
+          v-for="item in subscribeNavList"
+          :key="item"
+          @click="onClickChangeSubscribeType(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+      <div class="right-table"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+import { reactive, ref } from 'vue';
+import { postSaleShipListAPI } from '@/api/Boat/info';
+import RemoteSelect from '@/components/RemoteSelect/index.vue';
+
+const emits = defineEmits(['ReturnRouter', 'CurrentNav']);
+
+const subscribeNavList = ref(['船货信息', '积载图', '船位跟踪']);
+
+// 查询条件
+const searchTableForm = reactive({
+  scheduleId: '',
+});
+
+// 查询
+const onClickSearch = async () => {
+  if (searchTableForm.scheduleId === '') {
+    ElMessage({
+      message: '请选择船名',
+      type: 'warning',
+    });
+    return;
+  }
+};
+
+const onClickChangeSubscribeType = (item: string) => {
+  emits('CurrentNav', item);
+};
+
+const onClickReturn = () => {
+  emits('ReturnRouter');
+};
+</script>
+
+<style lang="scss" scoped>
+.boat-address {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .boatAddress-left {
+    display: flex;
+    height: 100%;
+    .side-icon {
+      width: 36px;
+      height: 32px;
+      font-weight: 400;
+      line-height: normal;
+      color: #b4b4b4;
+    }
+    .left-content {
+      width: 430px;
+      margin-left: 20px;
+      .search {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 430px;
+        margin-top: 10px;
+        :deep(.el-form-item) {
+          margin: 0;
+        }
+        .search-wrap {
+          display: flex;
+          .search-top {
+            position: relative;
+            box-sizing: border-box;
+            width: 215px;
+            height: 45px;
+            margin-bottom: 5px;
+            border: 3px solid #d7d7d7;
+            border-radius: 7px;
+            .card-title {
+              position: absolute;
+              top: -14px; /* 使标题悬浮在边框上方 */
+              left: 20px; /* 根据需要调整水平位置 */
+              padding: 0 8px; /* 增加一点内边距 */
+              font-size: 15px;
+              color: #fff;
+              background-color: #555;
+            }
+            .card-text {
+              display: flex;
+              align-items: center;
+              width: 100%;
+              height: 100%;
+              :deep(.el-select__wrapper) {
+                background-color: transparent;
+                box-shadow: none;
+              }
+              :deep(.el-select__input) {
+                color: #ff0 !important;
+              }
+              :deep(.el-select__placeholder) {
+                font-size: 21px;
+                color: #ff0;
+              }
+            }
+          }
+          .search-tips {
+            width: 120px;
+            margin-left: 10px;
+            font-size: 15px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 25px;
+            color: #80ffff;
+          }
+        }
+        .search-bottom {
+          width: 100%;
+          margin-top: 15px;
+          .bottom-one {
+            width: 90px;
+            height: 40px;
+            font-size: 18px;
+            line-height: 40px; /* 让文字垂直居中 */
+            color: #fff;
+            text-align: center;
+            background-color: rgb(22 155 213 / 100%);
+            border-radius: 5px;
+          }
+        }
+      }
+      .left-tips {
+        box-sizing: border-box;
+        margin-top: 20px;
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+        color: #f60;
+      }
+    }
+  }
+  .boatAddress-right {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+    .api-btn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 150px;
+        height: 50px;
+        margin-left: 10px;
+        font-size: 18px;
+        color: #d7d7d7;
+        background-color: rgb(51 51 51 / 100%);
+        border-radius: 75px;
+        box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
+      }
+      .btn-active {
+        color: #000;
+        background-color: #f2f2f2;
+        box-shadow: none;
+      }
+    }
+    .right-table {
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 16px;
+      margin-top: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/views/Boat/components/BoatDialog.vue b/src/views/Boat/components/BoatDialog.vue
index 42bc1e8..494e2e3 100644
--- a/src/views/Boat/components/BoatDialog.vue
+++ b/src/views/Boat/components/BoatDialog.vue
@@ -1,50 +1,50 @@
 <template>
-  <el-dialog v-model="dialogVisible" width="866px" style="padding: 0" :show-close="false">
+  <el-dialog v-model="dialogVisible" width="802px" style="padding: 0" :show-close="false">
     <template #header>
       <div class="header">船期信息详情</div>
     </template>
     <div class="content">
       <div class="content-left">
-        <div class="item">
-          <div class="title">起运港：</div>
-          <div class="text">{{ dialogProps.loadPort?.name }}</div>
-        </div>
-        <div class="item">
-          <div class="title">目的港:</div>
-          <div class="text">{{ dialogProps.dischargePort?.name }}</div>
-        </div>
-        <div class="item">
-          <div class="title">船名:</div>
-          <div class="text">{{ dialogProps.ship?.name }}</div>
-        </div>
-        <div class="item">
-          <div class="title">航次:</div>
-          <div class="text">{{ dialogProps.voyage }}</div>
-        </div>
-        <div class="item">
-          <div class="title">计划装载:</div>
-          <div class="text">{{ dialogProps.carNumPlan }}(辆)</div>
-        </div>
-        <div class="item">
-          <div class="title">实际装载:</div>
-          <div class="text">{{ dialogProps.carNumActual }}(辆)</div>
-        </div>
-        <div class="item">
-          <div class="title">计划离港时间:</div>
-          <div class="text">{{ dialogProps.departureDatePlan }}</div>
-        </div>
-        <div class="item">
-          <div class="title">实际离港时间:</div>
-          <div class="text">{{ dialogProps.departureDateActual }}</div>
-        </div>
-        <div class="item">
-          <div class="title">当前状态:</div>
-          <div class="text">{{ dialogProps.shipStatus }}</div>
+        <div class="right-info">
+          <div class="item">
+            <div class="title">起运港：</div>
+            <div class="text">{{ dialogProps.loadPort?.name }}</div>
+          </div>
+          <div class="item">
+            <div class="title">目的港:</div>
+            <div class="text">{{ dialogProps.dischargePort?.name }}</div>
+          </div>
+          <div class="item">
+            <div class="title">船名:</div>
+            <div class="text">{{ dialogProps.ship?.name }}</div>
+          </div>
+          <div class="item">
+            <div class="title">航次:</div>
+            <div class="text">{{ dialogProps.voyage }}</div>
+          </div>
+          <div class="item">
+            <div class="title">计划装载:</div>
+            <div class="text">{{ dialogProps.carNumPlan }}(辆)</div>
+          </div>
+          <div class="item">
+            <div class="title">实际装载:</div>
+            <div class="text">{{ dialogProps.carNumActual }}(辆)</div>
+          </div>
+          <div class="item">
+            <div class="title">计划离港时间:</div>
+            <div class="text">{{ dialogProps.departureDatePlan }}</div>
+          </div>
+          <div class="item">
+            <div class="title">实际离港时间:</div>
+            <div class="text">{{ dialogProps.departureDateActual }}</div>
+          </div>
+          <div class="item">
+            <div class="title">当前状态:</div>
+            <div class="text">{{ dialogProps.shipStatus }}</div>
+          </div>
         </div>
       </div>
       <div class="content-right">
-        <div class="btn-img">查看船图</div>
-        <div class="btn-address">查看船位</div>
         <div class="info">
           <div class="info-item">
             <div class="info-title">发布单位：</div>
@@ -67,14 +67,11 @@
             <div class="info-text">暂无</div>
           </div>
         </div>
+        <div class="footer">
+          <div class="btn" @click="dialogVisible = false">关闭</div>
+        </div>
       </div>
     </div>
-
-    <template #footer>
-      <div class="footer">
-        <div class="btn" @click="dialogVisible = false">确定</div>
-      </div>
-    </template>
   </el-dialog>
 </template>
 
@@ -123,19 +120,23 @@ const { userInfo } = storeToRefs(userState);
   .content-left {
     width: 319px;
     height: 342px;
-    font-size: 21px;
-    font-weight: 400;
-    color: #333;
-    .item {
-      display: flex;
+    .right-info {
       width: 100%;
-      line-height: 38px;
-      .title {
-        width: 147px;
-      }
-      .text {
-        flex: 1;
-        color: #027db4;
+      height: 342px;
+      font-weight: 400;
+      color: #333;
+      .item {
+        display: flex;
+        width: 100%;
+        font-size: 18px;
+        line-height: 38px;
+        .title {
+          width: 147px;
+        }
+        .text {
+          flex: 1;
+          color: #027db4;
+        }
       }
     }
   }
@@ -145,33 +146,12 @@ const { userInfo } = storeToRefs(userState);
     justify-content: space-between;
     width: 238px;
     height: 342px;
-
-    // margin-left: 160px;
-    .btn-img {
-      width: 120px;
-      height: 40px;
-      font-size: 15px;
-      line-height: 40px;
-      color: #fff;
-      text-align: center;
-      background-color: rgb(0 128 128 / 100%);
-      border-radius: 5px;
-    }
-    .btn-address {
-      width: 120px;
-      height: 40px;
-      font-size: 15px;
-      line-height: 40px;
-      color: #fff;
-      text-align: center;
-      background-color: rgb(22 155 213 / 100%);
-      border-radius: 5px;
-    }
     .info {
       box-sizing: border-box;
       width: 238px;
       height: 180px;
       padding: 15px 20px;
+      margin-bottom: 10px;
       font-family: 'Arial Normal', Arial;
       font-size: 15px;
       font-style: normal;
@@ -193,26 +173,26 @@ const { userInfo } = storeToRefs(userState);
         }
       }
     }
-  }
-}
-.footer {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding-bottom: 40px;
-  background-color: #fff;
-  .btn {
-    width: 170px;
-    height: 55px;
-    font-size: 18px;
-    line-height: 55px;
-    color: #fff;
-    text-align: center;
-    background-color: #027db4;
-    border-radius: 5px;
-    box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
+    .footer {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      padding: 40px 0 0;
+      background-color: #fff;
+      .btn {
+        width: 170px;
+        height: 45px;
+        font-size: 18px;
+        line-height: 45px;
+        color: #fff;
+        text-align: center;
+        background-color: #027db4;
+        border-radius: 5px;
+        box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/Boat/components/BoatTable.vue b/src/views/Boat/components/BoatTable.vue
index c5dc436..fa4dc36 100644
--- a/src/views/Boat/components/BoatTable.vue
+++ b/src/views/Boat/components/BoatTable.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="table">
-    <div class="header">船期信息表</div>
+    <div class="header">
+      <div class="title">
+        <svg-icon icon="BoatList" className="side-icon"></svg-icon>
+        <div class="text">近期收到 <span>4</span> 条船期信息</div>
+      </div>
+      <div class="header-title">船货信息表</div>
+      <div></div>
+    </div>
+
     <div class="footer">
       <!-- 表格 -->
       <div class="footer-table">
@@ -10,53 +18,57 @@
           max-height="400px"
           v-el-table-infinite-scroll="tableDataLoad"
           :infinite-scroll-disabled="disabled"
-          @row-click="onClickOpenDetail"
+          @row-click="onClickCellOpenDetail"
         >
-          <!-- <el-table-column prop="enterprise.name" label="企业" align="center" width="150" /> -->
           <el-table-column prop="ship.name" label="船名" align="center" width="150" />
           <el-table-column prop="voyage" label="航次" align="center" width="180" />
-          <el-table-column prop="loadPort.name" label="装货港口" align="center" width="150" />
-          <el-table-column prop="loadWharf.name" label="装货码头" align="center" width="150" />
-          <el-table-column prop="dischargePort.name" label="卸货港口" align="center" width="150" />
-          <el-table-column prop="dischargeWharf.name" label="卸货码头" align="center" width="150" />
-          <el-table-column prop="carNumPlan" label="计划商品车数量" align="center" width="180" />
-          <el-table-column prop="carNumActual" label="实际商品车数量" align="center" width="180" />
-          <el-table-column prop="spareNumPlan" label="计划件杂货数量" align="center" width="180" />
-          <el-table-column
-            prop="spareNumActual"
-            label="实际件杂货数量"
-            align="center"
-            width="180"
-          />
+          <el-table-column label="装货港 / 装货码头" align="center" width="300">
+            <template #default="scope">
+              <div class="goods-name">
+                {{ scope.row.loadPort.name }} / {{ scope.row.loadWharf.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="卸货港 / 卸货码头" align="center" width="300">
+            <template #default="scope">
+              <div class="goods-name">
+                {{ scope.row.dischargePort.name }} / {{ scope.row.dischargeWharf.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="carNumPlan" label="计划商品车数量" align="center" width="180" /> -->
+          <el-table-column prop="carNumActual" label="商品车数量" align="center" width="180" />
+          <!-- <el-table-column prop="spareNumPlan" label="计划件杂货数量" align="center" width="180" /> -->
+          <el-table-column prop="spareNumActual" label="件杂货数量" align="center" width="180" />
           <el-table-column
             prop="departureDatePlan"
-            label="计划离泊时间"
+            label="计划离港时间"
             align="center"
             width="200"
           />
           <el-table-column
             prop="departureDateActual"
-            label="实际离泊时间"
+            label="实际离港时间"
             align="center"
             width="200"
           />
           <el-table-column prop="tradeType" label="贸易类型" align="center" width="150" />
           <el-table-column prop="shipStatus" label="当前状态" align="center" width="150" />
-          <!-- <el-table-column prop="operator" label="操作" width="200px" align="center" fixed="right">
+          <el-table-column prop="operator" label="操作" width="200px" align="center" fixed="right">
             <template #default="scope">
-              <el-button type="primary" size="small" link @click="onClickOpenDetail(scope.row)">
-                查看
-              </el-button>
+              <div class="update-btn">
+                <div class="btn" @click.stop="onClickOpenDetail(scope.row)">详细</div>
+              </div>
             </template>
-          </el-table-column> -->
+          </el-table-column>
         </el-table>
       </div>
+      <div class="left-export">
+        <svg-icon icon="Export" className="icon"></svg-icon>
+        <div class="export-text" @click="onClickExportBoat">导出船期表</div>
+      </div>
       <!-- 分页 -->
       <div class="footer-pagination">
-        <div class="btn-export" @click="onClickExport">
-          <svg-icon icon="Export" className="icon"></svg-icon>
-          船期导出
-        </div>
         <div class="notice">仅列出最近十日收到的订阅船期信息</div>
       </div>
     </div>
@@ -122,7 +134,7 @@ const tableDataLoad = async () => {
 };
 
 // 导出
-const onClickExport = () => {
+const onClickExportBoat = () => {
   ElMessageBox.confirm(`你确定要导出船期信息吗?`, '温馨提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -131,11 +143,7 @@ const onClickExport = () => {
   })
     .then(async () => {
       try {
-        let params: any = {
-          rows: 10,
-          page: currentPage.value,
-        };
-        const { data } = await getSailScheduleExportAPI(params);
+        const { data } = await getSailScheduleExportAPI();
         const blob = new Blob([data], {
           type: 'application/vnd.ms-excel;charset=utf-8',
         });
@@ -165,6 +173,14 @@ const boatDialogRef = ref<InstanceType<typeof BoatDialog> | null>(null);
 const onClickOpenDetail = async (row: BoatInfoType) => {
   boatDialogRef.value?.isShowDialog(row);
 };
+
+// 触发父组件方法
+const emits = defineEmits(['openDetail']);
+
+// 点击历史数据查看当前数据
+const onClickCellOpenDetail = (row: BoatInfoType) => {
+  emits('openDetail', row);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -175,14 +191,44 @@ const onClickOpenDetail = async (row: BoatInfoType) => {
   flex-direction: column;
   width: 100%;
   .header {
+    box-sizing: border-box;
     display: flex;
-    justify-content: center;
-    padding: 0 16px;
-    font-family: 'Arial Negreta', 'Arial Normal', Arial;
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 700;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 0;
+    margin-bottom: 15px;
     color: #fff;
+    .title {
+      display: flex;
+      font-size: 28px;
+      font-weight: 700;
+      .side-icon {
+        width: 32px;
+        height: 32px;
+        margin-right: 10px;
+      }
+      .text {
+        font-family: 'Arial Negreta', 'Arial Normal', Arial;
+        font-size: 21px;
+        font-style: normal;
+        font-weight: 700;
+        color: #aaa;
+        span {
+          margin: 0 4px;
+          color: #fff;
+        }
+      }
+    }
+    .header-title {
+      display: flex;
+      justify-content: center;
+      padding: 0 16px;
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 700;
+      color: #fff;
+    }
   }
   .footer {
     position: relative;
@@ -198,31 +244,63 @@ const onClickOpenDetail = async (row: BoatInfoType) => {
       justify-content: flex-end;
       margin-bottom: 15px;
     }
-    .footer-pagination {
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      margin-top: 40px;
-      .btn-export {
+    .footer-table {
+      position: relative;
+      .update-btn {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 200px;
-        height: 60px;
-        font-size: 21px;
-        color: #fff;
-        background-color: rgb(0 128 128 / 100%);
-        border-radius: 5px;
-        box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
-        .icon {
-          width: 32px;
-          height: 32px;
-          margin-right: 10px;
-          color: #80fffe;
+        width: 100%;
+        height: 100%;
+        .btn {
+          width: 136px;
+          height: 40px;
+          font-size: 15px;
+          line-height: 40px;
+          color: #aaa;
+          background-color: rgb(51 51 51 / 100%);
+          border-radius: 26px;
+        }
+        .btn:hover {
+          color: #fff;
+          background-color: rgb(109 0 14 / 100%);
         }
       }
+    }
+    .left-export {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      height: 50px;
+      padding: 0 20px 0 15px;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      font-size: 18px;
+      color: #00bfbf;
+      border-bottom: #00bfbf 1px solid;
+      .icon {
+        width: 40px;
+        height: 40px;
+        font-weight: 400;
+        line-height: normal;
+        color: #00bfbf;
+      }
+      .export-text {
+        margin-left: 15px;
+      }
+      .export-text:hover {
+        color: rgb(2 167 240);
+        cursor: pointer;
+      }
+    }
+    .footer-pagination {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      margin-top: 40px;
       .notice {
         display: flex;
         align-items: center;
diff --git a/src/views/Boat/components/HistoryTable.vue b/src/views/Boat/components/HistoryTable.vue
new file mode 100644
index 0000000..569159c
--- /dev/null
+++ b/src/views/Boat/components/HistoryTable.vue
@@ -0,0 +1,374 @@
+<template>
+  <div class="historyTable">
+    <div class="header">
+      <svg-icon icon="return" className="side-icon" @click="onClickReturn"></svg-icon>
+      <div class="title">船期信息</div>
+      <div class="api-btn">
+        <div
+          class="btn"
+          :class="{ 'btn-active': '船货信息' === item }"
+          v-for="item in historyNavList"
+          :key="item"
+          @click="onClickChangeHistoryNav(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+
+    <el-table :data="historyData">
+      <el-table-column prop="ship.name" label="船名" align="center" width="150" />
+      <el-table-column prop="voyage" label="航次" align="center" width="180" />
+      <el-table-column prop="loadPort.name" label="装货港" align="center" width="150" />
+      <el-table-column prop="dischargePort.name" label="卸货港" align="center" width="150" />
+      <el-table-column prop="carNumActual" label="商品车数量" align="center" width="180" />
+      <el-table-column prop="spareNumActual" label="件杂货数量" align="center" width="180" />
+      <el-table-column prop="departureDatePlan" label="计划离港时间" align="center" width="200" />
+      <el-table-column prop="departureDateActual" label="实际离港时间" align="center" width="200" />
+      <el-table-column prop="createDate" label="发布日期时间" align="center" width="200" />
+    </el-table>
+
+    <div class="table-content">
+      <div class="table-header">
+        <div style="width: 36px"></div>
+        <div class="table-header-title">
+          舱单信息
+          <div class="left-export">
+            <svg-icon icon="Export" className="icon"></svg-icon>
+            <div class="export-text" @click="onClickExportManifest">导出舱单</div>
+          </div>
+        </div>
+        <div style="width: 480px"></div>
+      </div>
+      <el-table
+        :data="manifestTable"
+        style="width: 100%"
+        max-height="400px"
+        @row-click="onClickOpenManifestDetail"
+      >
+        <el-table-column type="index" label="No." width="50" />
+        <el-table-column prop="schedule.ship.name" label="船名" align="center" width="120" />
+        <el-table-column prop="schedule.voyage" label="航次" align="center" width="120" />
+        <el-table-column prop="deck" label="舱层" align="center" width="80" />
+        <el-table-column prop="cabin" label="舱段" align="center" width="80" />
+        <el-table-column prop="billNo" label="贸易类型" align="center" width="160" />
+        <el-table-column prop="billNo" label="提单号" align="center" width="160" />
+        <el-table-column label="货名/品牌/型号" align="center" width="200">
+          <template #default="scope">
+            <div class="goods-name">
+              {{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="shippingMark" label="唛头" align="center" width="180" />
+        <el-table-column prop="carNum" label="商品车" align="center" width="100" />
+        <el-table-column prop="spareNum" label="件杂货" align="center" width="100" />
+        <el-table-column prop="weight" label="重量 (kg)" align="center" width="100" />
+        <el-table-column prop="volume" label="体积 (m3)" align="center" width="100" />
+        <!-- TODO:港口没有 -->
+        <el-table-column prop="consigner" label="发货人" align="center" width="180" />
+        <el-table-column prop="consignee" label="收货人" align="center" width="180" />
+        <el-table-column prop="goodsStatus" label="货物状态" align="center" width="150" />
+      </el-table>
+    </div>
+
+    <div class="table-content">
+      <div class="table-header">
+        <div style="width: 36px"></div>
+        <div class="table-header-title" style="margin-left: 183px">
+          舱单明细
+          <div class="left-export">
+            <svg-icon icon="Export" className="icon"></svg-icon>
+            <div class="export-text" @click="onClickExportManifestDetail">导出舱单明细</div>
+          </div>
+        </div>
+        <div style="width: 480px"></div>
+      </div>
+      <el-table v-loading="tableLoading" :data="manifestDetail" max-height="400px">
+        <el-table-column type="index" label="No." width="50" />
+        <el-table-column prop="billNo" label="提单号" align="center" width="150" />
+        <el-table-column prop="brand.name" label="品牌" align="center" width="150" />
+        <el-table-column prop="vehicleType.name" label="车型" align="center" width="150" />
+        <el-table-column
+          prop="vehicleTypeDetail.name"
+          label="车型明细"
+          align="center"
+          width="180"
+        />
+        <el-table-column prop="model" label="型号" align="center" width="150" />
+        <el-table-column prop="vin" label="VIN" align="center" width="200" />
+        <el-table-column prop="weight" label="重量(kg)" align="center" width="150" />
+        <el-table-column prop="volume" label="体积(m3)" align="center" width="150" />
+        <el-table-column prop="length" label="长 mm" align="center" width="150" />
+        <el-table-column prop="width" label="宽 mm" align="center" width="150" />
+        <el-table-column prop="height" label="高 mm" align="center" width="150" />
+        <el-table-column prop="bamm" label="BAmm" align="center" width="150" />
+        <el-table-column prop="lrmm" label="LRmm" align="center" width="150" />
+        <el-table-column prop="damage" label="有无质损" align="center" width="150" />
+        <el-table-column prop="damageDesc" label="质损描述" align="center" width="200" />
+        <el-table-column prop="updateDate" label="更新时间" align="center" width="180" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { onMounted, ref } from 'vue';
+import { getManifestFileExportAPI, getManifestListAPI } from '@/api/Manifest';
+import { getManifestDetailFileExportAPI, getManifestDetailListAPI } from '@/api/Manifest/detail';
+import { BoatInfoType } from '@/types/boatInfo';
+import { ManifestDetailType, ManifestType } from '@/types/manifest';
+
+const emits = defineEmits(['ReturnRouter', 'CurrentNav']);
+
+const onClickReturn = () => {
+  emits('ReturnRouter');
+};
+
+// 导航列表
+const historyNavList = ref(['船货信息', '积载图', '船位跟踪']);
+const onClickChangeHistoryNav = (item: string) => {
+  emits('CurrentNav', item);
+};
+
+// 获取父组件传递的值
+const props = defineProps<{
+  historyData: BoatInfoType[];
+}>();
+
+// 舱单信息
+const manifestTable = ref<ManifestType[]>([]);
+
+// 获取舱单信息
+const getManifestTable = async () => {
+  const scheduleId = props.historyData[0].shipId;
+  const { data } = await getManifestListAPI({
+    scheduleId,
+  });
+  manifestTable.value = data;
+};
+
+// 导出舱单信息
+const onClickExportManifest = () => {
+  ElMessageBox.confirm(`你确定要导出舱单信息吗?`, '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+    .then(async () => {
+      try {
+        const { data } = await getManifestFileExportAPI({
+          scheduleId: props.historyData[0].id,
+        });
+        const blob = new Blob([data], {
+          type: 'application/vnd.ms-excel;charset=utf-8',
+        });
+        const downloadUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.download = '舱单信息.xlsx';
+        link.click();
+        ElMessage({
+          message: '导出成功',
+          type: 'success',
+        });
+      } catch (error) {
+        ElMessage({
+          message: '导出失败',
+          type: 'error',
+        });
+      }
+    })
+    .catch(() => {
+      console.log('用户点击了取消');
+    });
+};
+
+onMounted(async () => {
+  await getManifestTable();
+});
+
+// 表格是否加载
+const tableLoading = ref(false);
+
+// 舱单明细
+const manifestDetail = ref<ManifestDetailType[]>([]);
+
+// 当前选中的舱单明细ID
+const currentManifestDetailId = ref(0);
+
+// 查看舱单明细
+const onClickOpenManifestDetail = async (row: ManifestType) => {
+  tableLoading.value = true;
+
+  currentManifestDetailId.value = row.id;
+
+  const { data } = await getManifestDetailListAPI({
+    manifestId: [row.id],
+  });
+  manifestDetail.value = data.map((item) => {
+    item.createDate = dayjs(item.createDate).format('YYYY-MM-DD HH:mm');
+    item.updateDate = dayjs(item.updateDate).format('YYYY-MM-DD HH:mm');
+    return item;
+  });
+
+  tableLoading.value = false;
+};
+
+// 导出提单明细
+const onClickExportManifestDetail = () => {
+  if (!currentManifestDetailId.value) {
+    ElMessage({
+      message: '暂无舱单明细，无法导出',
+      type: 'warning',
+    });
+    return;
+  }
+  ElMessageBox.confirm(`你确定要导出提单明细吗?`, '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+    .then(async () => {
+      try {
+        const { data } = await getManifestDetailFileExportAPI({
+          manifestId: [currentManifestDetailId.value],
+        });
+        const blob = new Blob([data], {
+          type: 'application/vnd.ms-excel;charset=utf-8',
+        });
+        const downloadUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.download = '提单明细.xlsx';
+        link.click();
+        ElMessage({
+          message: '导出成功',
+          type: 'success',
+        });
+      } catch (error) {
+        ElMessage({
+          message: '导出失败',
+          type: 'error',
+        });
+      }
+    })
+    .catch(() => {
+      console.log('用户点击了取消');
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.historyTable {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  .header {
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 0;
+    margin-bottom: 15px;
+    color: #fff;
+    .side-icon {
+      width: 36px;
+      height: 32px;
+      font-weight: 400;
+      line-height: normal;
+      color: #b4b4b4;
+    }
+    .title {
+      font-size: 32px;
+      font-weight: 700;
+    }
+    .api-btn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 150px;
+        height: 50px;
+        margin-left: 10px;
+        font-size: 18px;
+        color: #d7d7d7;
+        background-color: rgb(51 51 51 / 100%);
+        border-radius: 75px;
+        box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
+      }
+      .btn-active {
+        color: #000;
+        background-color: #f2f2f2;
+        box-shadow: none;
+      }
+    }
+  }
+  .table-content {
+    box-sizing: border-box;
+    flex: 1;
+    padding: 16px;
+    .table-header {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 16px 0;
+      margin-bottom: 15px;
+      color: #fff;
+      .table-header-title {
+        display: flex;
+        align-items: center;
+        margin-left: 157px;
+        font-size: 32px;
+        font-weight: 700;
+        .left-export {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          width: fit-content;
+          height: 50px;
+          padding: 0 10px;
+          margin-left: 10px;
+          font-size: 18px;
+          color: #00bfbf;
+          border-bottom: #00bfbf 1px solid;
+          .icon {
+            width: 40px;
+            height: 40px;
+            font-weight: 400;
+            line-height: normal;
+            color: #00bfbf;
+          }
+          .export-text {
+            margin-left: 15px;
+          }
+          .export-text:hover {
+            color: rgb(2 167 240);
+            cursor: pointer;
+          }
+        }
+      }
+      .sort {
+        display: flex;
+        align-items: flex-end;
+        height: 100%;
+        font-family: 'Arial Normal', Arial;
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 400;
+        color: #aaa;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Boat/components/LoadMap.vue b/src/views/Boat/components/LoadMap.vue
new file mode 100644
index 0000000..a6b6baf
--- /dev/null
+++ b/src/views/Boat/components/LoadMap.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="manifest">
+    <div class="manifest-left">
+      <svg-icon icon="return" className="side-icon" @click="onClickReturn"></svg-icon>
+      <div class="left-content">
+        <div class="left-title">积载图</div>
+        <div class="search">
+          <el-form :model="searchTableForm" ref="tableFormRef">
+            <el-form-item>
+              <div class="search-top">
+                <div class="card-title">请选择船名</div>
+                <div class="card-text">
+                  <RemoteSelect
+                    v-model:value="searchTableForm.scheduleId"
+                    :api="postSaleShipListAPI"
+                    placeholder=""
+                  />
+                </div>
+              </div>
+            </el-form-item>
+            <div class="search-bottom">
+              <div class="bottom-one" @click="onClickSearch">查询</div>
+            </div>
+          </el-form>
+        </div>
+
+        <div class="deck">
+          <div
+            class="deck-btn"
+            v-for="item in 12"
+            :class="{ 'deck-btn-active': item === currentDesk }"
+            :key="item"
+            @click="onClickOpenDeck(item)"
+          >
+            {{ item < 10 ? '0' + item : item }}层
+          </div>
+        </div>
+
+        <div class="left-export">
+          <svg-icon icon="Export" className="icon"></svg-icon>
+          <div class="export-text" @click="onClickExportManifest">导出（分舱层）舱单</div>
+        </div>
+
+        <div class="left-tips">
+          <span>备注：</span
+          >原则上，积载编号就是提单号，但是，如果提单数量过大，超出积载单元的额定数量，则将提单拆分为1到多个，同时创建1到多个积载编号，一般以提单号添加“-X”来区分。
+        </div>
+      </div>
+    </div>
+    <div class="manifest-right">
+      <div class="api-btn">
+        <div
+          class="btn"
+          :class="{ 'btn-active': '积载图' === item }"
+          v-for="item in subscribeNavList"
+          :key="item"
+          @click="onClickChangeSubscribeType(item)"
+        >
+          {{ item }}
+        </div>
+      </div>
+      <div class="right-table">
+        <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" height="400px">
+          <el-table-column type="index" label="No." width="50" />
+          <el-table-column prop="cabin" label="舱段" align="center" width="80" />
+          <el-table-column prop="billNo" label="贸易类型" align="center" width="160" />
+          <el-table-column prop="billNo" label="提单号" align="center" width="160" />
+          <el-table-column label="货名/品牌/型号" align="center" width="200">
+            <template #default="scope">
+              <div class="goods-name">
+                {{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="shippingMark" label="唛头" align="center" width="180" />
+          <el-table-column prop="carNum" label="商品车" align="center" width="100" />
+          <el-table-column prop="spareNum" label="件杂货" align="center" width="100" />
+          <el-table-column prop="weight" label="重量 (kg)" align="center" width="100" />
+          <el-table-column prop="volume" label="体积 (m3)" align="center" width="100" />
+          <!-- TODO:港口没有 -->
+          <el-table-column prop="consigner" label="发货人" align="center" width="180" />
+          <el-table-column prop="consignee" label="收货人" align="center" width="180" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { reactive, ref } from 'vue';
+import { postSaleShipListAPI } from '@/api/Boat/info';
+import { getManifestFileExportAPI, getManifestListAPI } from '@/api/Manifest';
+import RemoteSelect from '@/components/RemoteSelect/index.vue';
+import { ManifestType } from '@/types/manifest';
+
+const emits = defineEmits(['ReturnRouter', 'CurrentNav']);
+
+const subscribeNavList = ref(['船货信息', '积载图', '船位跟踪']);
+
+const onClickChangeSubscribeType = (item: string) => {
+  emits('CurrentNav', item);
+};
+
+// 表格数据
+const tableData = ref<ManifestType[]>([]);
+
+// 查询条件
+const searchTableForm = reactive({
+  scheduleId: '',
+});
+
+// 表格是否加载
+const tableLoading = ref(false);
+
+// 查询
+const onClickSearch = async () => {
+  if (searchTableForm.scheduleId === '') {
+    ElMessage({
+      message: '请选择船名',
+      type: 'warning',
+    });
+    return;
+  }
+  tableLoading.value = true;
+
+  const { data } = await getManifestListAPI({
+    scheduleId: searchTableForm.scheduleId,
+  });
+  tableData.value = data;
+
+  tableLoading.value = false;
+};
+
+// 当前选中的舱层
+const currentDesk = ref(0);
+
+// 舱层搜索
+const onClickOpenDeck = async (item: number) => {
+  // 判断用户是否传递了船ID
+  if (searchTableForm.scheduleId) {
+    currentDesk.value = item;
+    const { data } = await getManifestListAPI({
+      scheduleId: searchTableForm.scheduleId,
+      desk: item,
+    });
+    tableData.value = data;
+  } else {
+    ElMessage({
+      type: 'warning',
+      message: '请先选择船舶!',
+    });
+  }
+};
+
+// 导出舱单-分舱层
+const onClickExportManifest = () => {
+  if (!currentDesk.value) {
+    ElMessage({
+      type: 'warning',
+      message: '请先选择舱层!',
+    });
+    return;
+  }
+  ElMessageBox.confirm(`你确定要导出舱单信息吗?`, '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+    .then(async () => {
+      try {
+        const { data } = await getManifestFileExportAPI({
+          deck: currentDesk.value,
+        });
+        const blob = new Blob([data], {
+          type: 'application/vnd.ms-excel;charset=utf-8',
+        });
+        const downloadUrl = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.download = '舱单信息.xlsx';
+        link.click();
+        ElMessage({
+          message: '导出成功',
+          type: 'success',
+        });
+      } catch (error) {
+        ElMessage({
+          message: '导出失败',
+          type: 'error',
+        });
+      }
+    })
+    .catch(() => {
+      console.log('用户点击了取消');
+    });
+};
+
+const onClickReturn = () => {
+  emits('ReturnRouter');
+};
+</script>
+
+<style lang="scss" scoped>
+.manifest {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .manifest-left {
+    display: flex;
+    width: 326px;
+    height: 100%;
+    .side-icon {
+      width: 36px;
+      height: 32px;
+      font-weight: 400;
+      line-height: normal;
+      color: #b4b4b4;
+    }
+    .left-content {
+      width: 270px;
+      margin-left: 20px;
+      .left-title {
+        margin-bottom: 20px;
+        font-size: 32px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .search {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 215px;
+        :deep(.el-form-item) {
+          margin: 0;
+        }
+        .search-top {
+          position: relative;
+          box-sizing: border-box;
+          width: 215px;
+          height: 45px;
+          margin-bottom: 5px;
+          border: 3px solid #d7d7d7;
+          border-radius: 7px;
+          .card-title {
+            position: absolute;
+            top: -14px; /* 使标题悬浮在边框上方 */
+            left: 20px; /* 根据需要调整水平位置 */
+            padding: 0 8px; /* 增加一点内边距 */
+            font-size: 15px;
+            color: #fff;
+            background-color: #555;
+          }
+          .card-text {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            :deep(.el-select__wrapper) {
+              background-color: transparent;
+              box-shadow: none;
+            }
+            :deep(.el-select__input) {
+              color: #ff0 !important;
+            }
+            :deep(.el-select__placeholder) {
+              font-size: 21px;
+              color: #ff0;
+            }
+          }
+        }
+        .search-bottom {
+          width: 100%;
+          margin-top: 15px;
+          .bottom-one {
+            width: 90px;
+            height: 40px;
+            font-size: 18px;
+            line-height: 40px; /* 让文字垂直居中 */
+            color: #fff;
+            text-align: center;
+            background-color: rgb(22 155 213 / 100%);
+            border-radius: 5px;
+          }
+        }
+      }
+      .deck {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 260px; /* 6 个按钮宽度 + 间隙 */
+        margin-top: 20px;
+        .deck-btn {
+          width: 60px;
+          font-size: 18px;
+          line-height: 36px; /* 让文字垂直居中 */
+          color: #fff;
+          text-align: center;
+          background-color: rgb(0 191 191 / 100%);
+          border-radius: 5px;
+          box-shadow: none;
+        }
+        .deck-btn-active {
+          color: #000;
+          background-color: rgb(255 255 128 / 100%);
+        }
+        .deck-btn:hover {
+          color: #000;
+          background-color: rgb(255 255 128 / 100%);
+        }
+        .deck-btn:nth-child(-n + 8) {
+          margin-bottom: 10px;
+        }
+      }
+      .left-export {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        width: 270px;
+        height: 50px;
+        padding: 0 10px;
+        margin: 50px 0;
+        font-size: 18px;
+        color: #00bfbf;
+        border-bottom: #00bfbf 1px solid;
+        .icon {
+          width: 40px;
+          height: 40px;
+          font-weight: 400;
+          line-height: normal;
+          color: #00bfbf;
+        }
+        .export-text {
+          margin-left: 15px;
+        }
+        .export-text:hover {
+          color: rgb(2 167 240);
+          cursor: pointer;
+        }
+      }
+      .left-tips {
+        box-sizing: border-box;
+        width: 261px;
+        height: 170px;
+        padding: 12px 15px 2px;
+        margin-top: 20px;
+        font-size: 15px;
+        line-height: 24px;
+        color: #333;
+        background-color: rgb(242 242 242 / 100%);
+        border-radius: 7px;
+        span {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  .manifest-right {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 326px);
+    height: 100%;
+    .api-btn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 150px;
+        height: 50px;
+        margin-left: 10px;
+        font-size: 18px;
+        color: #d7d7d7;
+        background-color: rgb(51 51 51 / 100%);
+        border-radius: 75px;
+        box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
+      }
+      .btn-active {
+        color: #000;
+        background-color: #f2f2f2;
+        box-shadow: none;
+      }
+    }
+    .right-table {
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 16px;
+      margin-top: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/views/Boat/index.vue b/src/views/Boat/index.vue
index c2e8561..1a11d72 100644
--- a/src/views/Boat/index.vue
+++ b/src/views/Boat/index.vue
@@ -1,112 +1,78 @@
 <template>
-  <div class="table">
-    <div class="header">
-      <div class="title" v-if="currentSubscribeNav === '船期信息'">
-        <svg-icon icon="BoatList" className="side-icon"></svg-icon>
-        <div class="text">近期收到 <span>4</span> 条船期信息</div>
-      </div>
-      <div class="api-btn">
-        <div
-          class="btn"
-          :class="{ 'btn-active': currentSubscribeNav === item }"
-          v-for="item in subscribeNavList"
-          :key="item"
-          @click="onClickChangeSubscribeType(item)"
-        >
-          {{ item }}
-        </div>
-      </div>
-    </div>
+  <div class="boatInfo">
+    <BoatTable v-if="!isViewHistory" @openDetail="onClickOpenDetail" />
 
-    <div class="content">
-      <BoatTable v-if="currentSubscribeNav === '船期信息'" />
-      <!-- <ManifestDetailTable v-if="currentSubscribeNav === '船图查询'" /> -->
-      <!-- <ReceiveTable v-if="currentSubscribeNav === '船位跟踪'" /> -->
+    <div class="history-table" v-else>
+      <HistoryTable
+        :historyData="historyData!"
+        v-if="currentHistoryNav === '船货信息'"
+        @ReturnRouter="onClickReturn"
+        @CurrentNav="onClickChangeHistoryNav"
+      />
+      <LoadMap
+        v-if="currentHistoryNav === '积载图'"
+        @ReturnRouter="onClickReturn"
+        @CurrentNav="onClickChangeHistoryNav"
+      />
+      <BoatAddress
+        v-if="currentHistoryNav === '船位跟踪'"
+        @ReturnRouter="onClickReturn"
+        @CurrentNav="onClickChangeHistoryNav"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-// import ManifestDetailTable from './components/ManifestDetailTable.vue';
+import { useRouter } from 'vue-router';
+import { BoatInfoType } from '@/types/boatInfo';
+import BoatAddress from './components/BoatAddress.vue';
 import BoatTable from './components/BoatTable.vue';
+import HistoryTable from './components/HistoryTable.vue';
+import LoadMap from './components/LoadMap.vue';
 
-// 订阅导航列表
-const subscribeNavList = ref(['船期信息', '船图查询', '船位跟踪']);
-const currentSubscribeNav = ref('船期信息');
-const onClickChangeSubscribeType = async (item: string) => {
-  if (item === currentSubscribeNav.value) return;
-  currentSubscribeNav.value = item;
+const router = useRouter();
+
+// 返回上一级
+const onClickReturn = () => {
+  // 判断是否显示了历史数据
+  if (isViewHistory.value) {
+    isViewHistory.value = false;
+  } else {
+    router.back();
+  }
+};
+
+// 导航列表
+const currentHistoryNav = ref('船货信息');
+const onClickChangeHistoryNav = (item: string) => {
+  if (currentHistoryNav.value === item) return;
+  currentHistoryNav.value = item;
+};
+
+// 是否查看历史数据
+const isViewHistory = ref(false);
+const historyData = ref<BoatInfoType[]>([]);
+
+// 查看历史数据
+const onClickOpenDetail = (row: BoatInfoType) => {
+  historyData.value = [row];
+  isViewHistory.value = true;
 };
 </script>
 
 <style lang="scss" scoped>
-.table {
+.boatInfo {
   position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  .header {
-    box-sizing: border-box;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 16px 0;
-    margin-bottom: 15px;
-    color: #fff;
-    .title {
-      display: flex;
-      font-size: 28px;
-      font-weight: 700;
-      .side-icon {
-        width: 32px;
-        height: 32px;
-        margin-right: 10px;
-      }
-      .text {
-        font-family: 'Arial Negreta', 'Arial Normal', Arial;
-        font-size: 21px;
-        font-style: normal;
-        font-weight: 700;
-        color: #aaa;
-        span {
-          margin: 0 4px;
-          color: #fff;
-        }
-      }
-    }
-    .api-btn {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-content: flex-end;
-      .btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 150px;
-        height: 50px;
-        margin-left: 10px;
-        font-size: 18px;
-        color: #d7d7d7;
-        background-color: rgb(51 51 51 / 100%);
-        border-radius: 75px;
-        box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
-      }
-      .btn-active {
-        color: #000;
-        background-color: #f2f2f2;
-        box-shadow: none;
-      }
-    }
-  }
-  .content {
-    box-sizing: border-box;
-    flex: 1;
-    padding: 16px;
+  .history-table {
+    width: 100%;
+    height: 100%;
   }
 }
 </style>
diff --git a/src/views/Notice/index.vue b/src/views/Notice/index.vue
index 21e5f0d..1c07aaa 100644
--- a/src/views/Notice/index.vue
+++ b/src/views/Notice/index.vue
@@ -161,9 +161,6 @@ const onClickOpenDialog = async (row: NoticeType) => {
       width: 1100px;
       height: 510px;
       margin: 0 100px;
-      font-size: 21px;
-      font-style: normal;
-      font-weight: 700;
       background-color: #333;
       border: 5px solid #fff;
       border-radius: 9px;