排产看板提交

src/views/productionSchedulingPlan/schedulingDashboard/index.vue

@@ -126,7 +126,7 @@
               :style="{ '--checkbox-color': '#6c757d' }"
               @change="handleLegendChange('pending')"
             >
-              <span class="legend-text">未开始</span>
+              <span class="legend-text" style="color: #6c757d">未开始</span>
             </el-checkbox>
           </div>
 
@@ -136,7 +136,7 @@
               :style="{ '--checkbox-color': '#007bff' }"
               @change="handleLegendChange('processing')"
             >
-              <span class="legend-text">进行中</span>
+              <span class="legend-text" style="color: #007bff">进行中</span>
             </el-checkbox>
           </div>
           <div class="legend-item">
@@ -145,7 +145,7 @@
               :style="{ '--checkbox-color': '#28a745' }"
               @change="handleLegendChange('completed')"
             >
-              <span class="legend-text">已完成</span>
+              <span class="legend-text" style="color: #28a745">已完成</span>
             </el-checkbox>
           </div>
         </div>
@@ -159,7 +159,7 @@
             <div class="info-title-cell info-title-num">序号</div>
             <div class="info-title-cell">订单信息</div>
           </div>
-          <div class="info-container">
+          <div class="info-container" ref="leftScrollContainer">
             <div
               v-for="(order, index) in currentPageOrders"
               :key="index"
@@ -174,7 +174,8 @@
                 <el-row>
                   <el-col :span="24">
                     <div class="info-item-txt info-item-info">
-                      <span style="font-weight:600;">{{ order.woCode }}</span>/
+                      <span style="font-weight: 600">{{ order.woCode }}</span
+                      >/
                       <span>{{ order.partCode }}</span>
                     </div>
                   </el-col>
@@ -266,7 +267,7 @@
           </div>
 
           <!-- 甘特图内容区域 -->
-          <div class="chart-content" :style="{ width: `${timelineWidth}%` }">
+          <div class="chart-content" ref="timelineContainerTest" :style="{ width: `${timelineWidth}%` }">
             <div class="grid-lines">
               <div
                 v-for="(time, index) in majorTickLabels"
@@ -336,14 +337,15 @@
         </div>
       </div>
 
-      <!-- 分页控件 sizes  :page-sizes="[10, 20, 50]" ,sizes-->
+      <!-- 分页控件   :page-sizes="[10, 20, 50]" ,sizes-->
       <div class="pagination-container">
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage"
           :page-size="pageSize"
-          layout="total, prev, pager, next, jumper"
+          :page-sizes="[10, 20, 50]"
+          layout="total,sizes, prev, pager, next, jumper"
           :total="totalOrders"
         ></el-pagination>
       </div>
@@ -460,7 +462,7 @@ export default {
 
       // 分页参数
       currentPage: 1,
-      pageSize: 8,
+      pageSize: 10,
 
       // 提示框相关
       tooltipVisible: false,
@@ -674,6 +676,13 @@ export default {
     this.updateTimeAxis();
     this.$nextTick(() => {
       this.calcCurrentTimePosition();
+      // 添加滚动事件监听器
+      if (this.$refs.timelineContainerTest) {
+        this.$refs.timelineContainerTest.addEventListener('scroll', this.handleRightScrollBound);
+      }
+      if (this.$refs.leftScrollContainer) {
+        this.$refs.leftScrollContainer.addEventListener('scroll', this.handleLeftScrollBound);
+      }
     });
 
     // 定时更新当前时间线位置
@@ -681,7 +690,39 @@ export default {
     //   this.calcCurrentTimePosition();
     // }, 60000);
   },
+  created() {
+    // 绑定方法，确保this指向正确
+    this.handleRightScrollBound = this.handleRightScroll.bind(this);
+    this.handleLeftScrollBound = this.handleLeftScroll.bind(this);
+  },
+  beforeDestroy() {
+    // 移除事件监听器
+    if (this.$refs.timelineContainerTest) {
+      this.$refs.timelineContainerTest.removeEventListener('scroll', this.handleRightScrollBound);
+    }
+    if (this.$refs.leftScrollContainer) {
+      this.$refs.leftScrollContainer.removeEventListener('scroll', this.handleLeftScrollBound);
+    }
+  },
   methods: {
+    // 右侧滚动时同步左侧滚动
+    handleRightScroll(event) {
+      if (this.$refs.leftScrollContainer) {
+        const rightScrollTop = event.target.scrollTop;
+        console.log('右侧',rightScrollTop)
+        this.$refs.leftScrollContainer.scrollTop = rightScrollTop;
+      }
+    },
+    
+    // 左侧滚动时同步右侧滚动
+    handleLeftScroll(event) {
+      
+      if (this.$refs.timelineContainerTest) {
+        const leftScrollTop = event.target.scrollTop;
+        this.$refs.timelineContainerTest.scrollTop = leftScrollTop;
+        console.log('左侧',leftScrollTop,this.$refs.timelineContainerTest.scrollTop)
+      }
+    },
     updateTime() {
       // 设置默认时间范围为今天到后两天
       const today = new Date();
@@ -755,6 +796,7 @@ export default {
 
     // 滚动到当前时间位置
     scrollToCurrentTime() {
+      debugger
       const container = this.$refs.timelineContainer;
       if (container && this.currentTimePosition >= 0 && this.currentTimePosition <= 100) {
         // 计算当前时间位置的像素值
@@ -1100,7 +1142,6 @@ export default {
 
       // 确保百分比在有效范围内
       const percent = (startHour / totalDuration) * 100;
-      console.log('percent',percent)
       return Math.max(0, Math.min(100, percent));
     },
 
@@ -1118,7 +1159,7 @@ export default {
       }
 
       // 确保宽度在有效范围内
-      const width = ((duration / totalDuration) * 100);
+      const width = (duration / totalDuration) * 100;
 
       return Math.max(0, Math.min(100, width));
     },
@@ -1258,9 +1299,17 @@ export default {
   width: 330px;
   background-color: #f8f9fa;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
 }
 .info-container {
- 
+  flex: 1;
+  overflow-y: auto; /* 允许垂直滚动 */
+  overflow-x: hidden; /* 隐藏水平滚动条 */
+}
+/* 隐藏滚动条的样式（Webkit浏览器） */
+.info-container::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条 */
 }
 
 .info-item-title {
@@ -1283,7 +1332,7 @@ export default {
 .info-item-txt i {
   font-style: normal;
 }
-.info-item-info{
+.info-item-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1310,6 +1359,7 @@ export default {
 .info-item {
   display: flex;
   height: 100%;
+  
   /* padding: 5px; */
 }
 
@@ -1328,8 +1378,8 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow-y: hidden;
-  overflow-x: auto; /* 确保支持横向滚动 */
+  overflow-y: auto; /* 允许垂直滚动 */
+  overflow-x: auto; /* 允许水平滚动 */
 }
 
 /* 图表X轴区域样式 */