100100</div >
101101</div >
102102<div class =" slot-grid-container" >
103- <div class =" slot-grid" >
103+ <div class =" slot-grid" v-if = " slotList.length > 0 " :style = " { gridTemplateColumns: `repeat(${currentX || 10}, 100px)` } " >
104104<div
105105v-for =" slot in slotList"
106106:key =" slot.id"
111111<span class =" slot-label" >{{ slot.label }}</span >
112112</div >
113113</div >
114+ <div class =" slot-grid-empty" v-else >
115+ <el-empty description =" 暂无仓位" />
116+ </div >
114117</div >
115118</div >
116119</div >
@@ -213,14 +216,25 @@ const onLoadTreeData = async (status) => {
213216treeLoading .value = false ;
214217};
215218
219+ let currentX= ref (null );
220+ let currentY= ref (null );
221+
216222// 树节点点击事件
217223const handleNodeClick = (data )=> {
218224// 只处理二级节点(仓库)
219225if (! data .children || data .children .length === 0 ) {
226+ currentX .value = data .rawData .spatialinformationX || 0 ;
227+ currentY .value = data .rawData .spatialinformationY || 0 ;
220228currentWarehouseId .value = data .id ;
221- currentWarehouseTitle .value = ` ${ data .label } 的仓位` ;
229+ currentWarehouseTitle .value = ` ${ data .label } 的仓位( ${ currentX . value } * ${ currentY . value } ) ` ;
222230// 使用原始数据中的ID或当前节点ID
223231const warehouseId = data .rawData ? .basicInformationoftheWarehouseId ;
232+
233+ // 没有坐标信息,不加载仓位数据
234+ if (! currentX .value || ! currentY .value ){
235+ slotList .value = [];
236+ return ;
237+ }
224238loadSlotData (warehouseId);
225239}
226240};
@@ -570,6 +584,7 @@ const handleEdit = (data) => {
570584
571585.slot - grid- container {
572586flex: 1 ;
587+ overflow- x: auto;
573588overflow- y: auto;
574589padding: 20px ;
575590
@@ -600,8 +615,9 @@ const handleEdit = (data) => {
600615
601616.slot - grid {
602617display: grid;
603- grid- template- columns: repeat (10 ,1fr );
604618gap: 10px ;
619+ width: fit- content;
620+ min- width: 100 % ;
605621
606622.slot - cell {
607623aspect- ratio: 1 ;
@@ -612,11 +628,12 @@ const handleEdit = (data) => {
612628justify- content: center;
613629cursor: pointer;
614630transition: all0 .2s ;
615- min- height: 60px ;
616-
631+ width: 100px ;
632+ height: 100px ;
633+ box- sizing: border- box;
634+ padding: 0 5px ;
617635.slot - label {
618- font- size: 12px ;
619- font- weight: 500 ;
636+ font- size: 13px ;
620637color: #303133 ;
621638}
622639
@@ -659,6 +676,13 @@ const handleEdit = (data) => {
659676}
660677}
661678
679+ .slot - grid- empty {
680+ display: flex;
681+ align- items: center;
682+ justify- content: center;
683+ height: 60 % ;
684+ }
685+
662686.help - text {
663687font- size: 12px ;
664688color: #f56c6c;