1. 修改

src/views/officesale/ticketingSales.vue

@@ -81,23 +81,30 @@
         <!-- 选择座位  -->
         <div class="seat-list-box">
             <!--  座位排版  -->
-            <div v-loading="loading" class="dialog">
-                <div class="seat-box-class clearfix" v-if="seatMapList">
-                    <div
-                    class="seat-item-class-box" 
-                    v-for="(item1, index1) in Object.keys(seatMapList)" 
-                    :key="index1"
+            <div v-loading="loading" id="seatbox-me" @scroll="scroll" ref="seatbox" class="dialog">
+                <div class="dialog-box" :style="{width: width + 'px', margin: justifyContent ? 'auto' : 'unset'}">
+                    <div 
+                    style="width: 100%;position: absolute;"
+                    class="seat-box-class clearfix" v-if="seatMapList"
                     >
-                        <div 
-                        class="seat-item-class" 
-                        :class="item.occupyStatus==0?'occupy-status': item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
-                         v-for="(item, index) in seatMapList[item1]" 
-                         @click.stop="seatClick(item)" 
-                         :key="index">
-                            <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
-                        </div>
+                            <div
+                           
+                            class="seat-item-class-box" 
+                            v-for="(item1, index1) in Object.keys(seatMapList)" 
+                            :key="index1"
+                            >
+                                <div 
+                                class="seat-item-class" 
+                                :class="item.occupyStatus==0?'occupy-status': item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
+                                v-for="(item, index) in seatMapList[item1]" 
+                                @click.stop="seatClick(item)" 
+                                :key="index">
+                                    <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
+                                </div>
+                            </div>
                     </div>
                 </div>
+                
             </div>
             <div style="margin-top: 5px; margin-left: 30px;display: flex;">
                 <div style="flex-shrink: 0;">
@@ -176,6 +183,9 @@
 
         performId: '',// 剧目ID
         scaleNum: 30,
+
+        width: 0,
+        justifyContent: false
       };
     },
     created() {
@@ -296,6 +306,10 @@
                 console.error("error===",error)
             }
         },
+        /** scroll */
+        scroll(e){
+            console.log("滚动位置",e)
+        },
         // 设置座位集合
         setSeatMapList(list) {
             if(list && list.length > 0) {
@@ -312,9 +326,27 @@
                         }
                     }
                 })
-                // Object.keys(listCopy).forEach((item)=>{
-                //     lisyCopy[item]
-                // })
+                let width = 0
+                let flog = 0
+                Object.keys(listCopy).forEach((item)=>{
+                    if(listCopy[item].length>flog) {
+                        flog = listCopy[item].length
+                    }
+                })
+                this.width = 70*flog
+                this.$nextTick(()=>{
+                    if(this.$refs.seatbox) {
+                        var ele = document.getElementById('seatbox-me');
+                        console.log(ele.getBoundingClientRect().width); // 100
+                        if(this.width<ele.getBoundingClientRect().width) {
+                            this.justifyContent = true
+                        }else {
+                            this.justifyContent = false
+                        }
+                        this.$refs.seatbox.scrollTo(this.width/4,0)
+                    }
+                })
+                
                 console.log("list====",listCopy)
                 this.seatMapList = JSON.parse(JSON.stringify(listCopy))
             }
@@ -510,6 +542,10 @@
     overflow: auto;
     border-radius: 10px;
     border: 1px  solid #323333;
+
+    .dialog-box {
+        position: relative;
+    }
     .upload-btn {
       width: 100px;
       height: 100px;
@@ -538,6 +574,7 @@
       margin-bottom: 20px;
     }
     .seat-box-class{
+      width: 3000px;
       padding: 5px;
       transform-origin: 50% 0;
       transform: scale(var(--scaleNum));
@@ -578,6 +615,7 @@
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
+        margin: auto 0;
         text-align: center;
       }
       .seat-item-class{

src/views/windowTicketSales/ticketingSales.vue

@@ -81,23 +81,30 @@
         <!-- 选择座位  -->
         <div class="seat-list-box">
             <!--  座位排版  -->
-            <div v-loading="loading" class="dialog">
-                <div class="seat-box-class clearfix" v-if="seatMapList">
-                    <div
-                    class="seat-item-class-box" 
-                    v-for="(item1, index1) in Object.keys(seatMapList)" 
-                    :key="index1"
+            <div v-loading="loading" id="seatbox-me" @scroll="scroll" ref="seatbox" class="dialog">
+                <div class="dialog-box" :style="{width: width + 'px', margin: justifyContent ? 'auto' : 'unset'}">
+                    <div 
+                    style="width: 100%;position: absolute;"
+                    class="seat-box-class clearfix" v-if="seatMapList"
                     >
-                        <div 
-                        class="seat-item-class" 
-                        :class="item.occupyStatus==0?'occupy-status': item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
-                         v-for="(item, index) in seatMapList[item1]" 
-                         @click.stop="seatClick(item)" 
-                         :key="index">
-                            <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
-                        </div>
+                            <div
+                           
+                            class="seat-item-class-box" 
+                            v-for="(item1, index1) in Object.keys(seatMapList)" 
+                            :key="index1"
+                            >
+                                <div 
+                                class="seat-item-class" 
+                                :class="item.occupyStatus==0?'occupy-status': item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
+                                v-for="(item, index) in seatMapList[item1]" 
+                                @click.stop="seatClick(item)" 
+                                :key="index">
+                                    <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
+                                </div>
+                            </div>
                     </div>
                 </div>
+                
             </div>
             <div style="margin-top: 5px; margin-left: 30px;display: flex;">
                 <div style="flex-shrink: 0;">
@@ -176,6 +183,9 @@
 
         performId: '',// 剧目ID
         scaleNum: 30,
+
+        width: 0,
+        justifyContent: false
       };
     },
     created() {
@@ -296,6 +306,10 @@
                 console.error("error===",error)
             }
         },
+        /** scroll */
+        scroll(e){
+            console.log("滚动位置",e)
+        },
         // 设置座位集合
         setSeatMapList(list) {
             if(list && list.length > 0) {
@@ -312,9 +326,27 @@
                         }
                     }
                 })
-                // Object.keys(listCopy).forEach((item)=>{
-                //     lisyCopy[item]
-                // })
+                let width = 0
+                let flog = 0
+                Object.keys(listCopy).forEach((item)=>{
+                    if(listCopy[item].length>flog) {
+                        flog = listCopy[item].length
+                    }
+                })
+                this.width = 70*flog
+                this.$nextTick(()=>{
+                    if(this.$refs.seatbox) {
+                        var ele = document.getElementById('seatbox-me');
+                        console.log(ele.getBoundingClientRect().width); // 100
+                        if(this.width<ele.getBoundingClientRect().width) {
+                            this.justifyContent = true
+                        }else {
+                            this.justifyContent = false
+                        }
+                        this.$refs.seatbox.scrollTo(this.width/4,0)
+                    }
+                })
+                
                 console.log("list====",listCopy)
                 this.seatMapList = JSON.parse(JSON.stringify(listCopy))
             }
@@ -510,6 +542,10 @@
     overflow: auto;
     border-radius: 10px;
     border: 1px  solid #323333;
+
+    .dialog-box {
+        position: relative;
+    }
     .upload-btn {
       width: 100px;
       height: 100px;
@@ -538,6 +574,7 @@
       margin-bottom: 20px;
     }
     .seat-box-class{
+      width: 3000px;
       padding: 5px;
       transform-origin: 50% 0;
       transform: scale(var(--scaleNum));
@@ -578,6 +615,7 @@
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
+        margin: auto 0;
         text-align: center;
       }
       .seat-item-class{