+
-
-
{{ item }}舱段
-
-
No：WOW240001
-
沃尔沃XC90：20
-
位置RORO-1-1-1-1
+
+
{{ items }}舱段
+
+
No：{{ item.billNo }}
+
+ {{ item.brandName }}：{{ item.brandNum }}
+
+
位置：{{ item.boatInfo }}
船舶舱层数据映射关系图 - 此图根据舱单数据生成，仅供参考。
+
+
+
+
+
+
+
+
No：{{ item.billNo }}
+
+ {{ item.brandName }}：{{ item.brandNum }}
+
+
位置：{{ item.boatInfo }}
+
+
@@ -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;
+ }
+ }
+ }
+ }
}