feat: 完善船图

src/views/Boat/components/LoadMap.vue

@@ -81,24 +81,52 @@
           <el-table-column prop="consignee" label="收货人" align="center" width="180" />
         </el-table>
       </div>
-      <div class="right-map">
+      <div class="right-map" v-if="currentDesk > 0">
         <div class="map-content">
           <div>
             <div style="height: 30px"></div>
             <div class="triangle-right"></div>
           </div>
-          <div class="map-deck" v-for="item in deskShipData?.fragment" :key="item">
+          <div class="map-deck" v-for="items in deskShipData?.fragment" :key="items">
-            <div class="map-deck-title">{{ item }}舱段</div>
+            <div class="map-deck-title">{{ items }}舱段</div>
-            <div class="map-deck-item">
+            <div
-              <div class="item-wrap"><span>No：</span>WOW240001</div>
+              class="map-deck-item"
-              <div class="item-wrap"><span>沃尔沃XC90：</span>20</div>
+              v-for="item in handleFragment(tableData, items).slice(0, 3)"
-              <div class="item-wrap"><span>位置</span>RORO-1-1-1-1</div>
+              :key="item.billNo"
+              :style="{ backgroundColor: item.color, height: item.height }"
+              @click="onClickOpenBoatInfo(tableData, items)"
+            >
+              <div class="item-wrap"><span>No：</span>{{ item.billNo }}</div>
+              <div class="item-wrap">
+                <span>{{ item.brandName }}：</span>{{ item.brandNum }}
+              </div>
+              <div class="item-wrap"><span>位置：</span>{{ item.boatInfo }}</div>
             </div>
           </div>
         </div>
         <div class="map-bottom">船舶舱层数据映射关系图 - 此图根据舱单数据生成，仅供参考。</div>
       </div>
     </div>
+
+    <el-dialog v-model="isShowBoatInfo" width="50%" style="padding: 0" :show-close="false">
+      <template #header>
+        <div class="header">{{ boatInfoList.deck }}舱段完整船图</div>
+      </template>
+      <div class="dialog-content">
+        <div
+          class="dialog-deck"
+          v-for="item in boatInfoList.list"
+          :key="item.billNo"
+          :style="{ backgroundColor: item.color }"
+        >
+          <div class="item-wrap"><span>No：</span>{{ item.billNo }}</div>
+          <div class="item-wrap">
+            <span>{{ item.brandName }}：</span>{{ item.brandNum }}
+          </div>
+          <div class="item-wrap"><span>位置：</span>{{ item.boatInfo }}</div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -192,6 +220,58 @@ const onClickOpenDeck = async (item: number) => {
   }
 };
 
+// 船图颜色列表
+const colorList = ref(['#80ffff', '#facd91', '#ffff80', '#caf982']);
+
+// 处理舱段的值
+const handleFragment = (list: ManifestType[], deck: number) => {
+  const result = list
+    .filter((item) => item.deck === deck)
+    .map((item, index, arr) => {
+      let height = '90px';
+      if (arr.length === 1) height = '270px';
+      if (arr.length === 2) height = '135px';
+
+      const colorIndex = (index + deck) % colorList.value.length; // 绑定 deck，控制起始偏移
+
+      return {
+        billNo: item.billNo,
+        brandName: item.brand?.name,
+        brandNum: item.carNum,
+        boatInfo: `${item.schedule?.ship.name}-${item.deck}-${item.cabin}`,
+        color: colorList.value[colorIndex],
+        height,
+      };
+    });
+
+  return result;
+};
+
+// 完整的船图
+const boatInfoList = ref<{
+  list: {
+    billNo: string;
+    brandName: string;
+    brandNum: number;
+    boatInfo: string;
+    color: string;
+    height: string;
+  }[];
+  deck: number;
+}>({
+  list: [],
+  deck: 0,
+});
+const isShowBoatInfo = ref(false);
+
+// 查看完整的船图
+const onClickOpenBoatInfo = (list: ManifestType[], deck: number) => {
+  const result = handleFragment(list, deck);
+  boatInfoList.value.list = result;
+  boatInfoList.value.deck = deck;
+  isShowBoatInfo.value = true;
+};
+
 // 导出舱单-分舱层
 const onClickExportManifest = () => {
   if (!currentDesk.value) {
@@ -434,7 +514,7 @@ const onClickReturn = () => {
       box-sizing: border-box;
       width: 100%;
       height: 374px;
-      padding: 16px;
+      padding: 15px;
       margin-top: 20px;
       background-color: rgb(51 51 51 / 100%);
       border-radius: 13px;
@@ -445,6 +525,13 @@ const onClickReturn = () => {
         max-width: 100%;
         overflow-x: auto;
         white-space: nowrap;
+
+        /* 隐藏滚动条 */
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE 10+ */
+        .map-content::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Opera */
+        }
         .triangle-right {
           width: 0;
           height: 0;
@@ -453,6 +540,7 @@ const onClickReturn = () => {
           border-left: 217px solid #f2f2f2;
         }
         .map-deck {
+          flex-shrink: 0; /* 不允许收缩，确保宽度为 258px */
           width: 258px;
           height: 300px;
           margin-right: 3px;
@@ -465,13 +553,17 @@ const onClickReturn = () => {
             text-align: center;
           }
           .map-deck-item {
+            box-sizing: border-box;
             display: flex;
             flex-direction: column;
             justify-content: center;
             width: 100%;
+            padding-left: 10px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            border: 1px solid #797979;
+            transition: height 0.3s ease; /* 平滑过渡，避免闪烁 */
             .item-wrap {
               font-size: 13px;
               font-style: normal;
@@ -496,5 +588,44 @@ const onClickReturn = () => {
       }
     }
   }
+  .header {
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+    line-height: 50px;
+    color: #fff;
+    text-align: center;
+    background-color: #015478;
+  }
+  .dialog-content {
+    box-sizing: border-box;
+    width: 100%;
+    height: 400px;
+    padding: 20px 40px;
+    overflow-y: auto;
+    .dialog-deck {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      height: 90px;
+      padding: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-bottom: 1px solid #797979;
+      .item-wrap {
+        font-size: 13px;
+        font-style: normal;
+        line-height: 18px;
+        color: #333;
+        span {
+          font-weight: 700;
+          color: #000;
+        }
+      }
+    }
+  }
 }
 </style>