-
+
@@ -388,7 +390,7 @@
计划开始：
{{ tooltipData.planStartTime || '-' }}
-
+
计划完成：
{{ tooltipData.planEndTime || '-' }}
@@ -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,12 +1332,12 @@ export default {
.info-item-txt i {
font-style: normal;
}
-.info-item-info{
+.info-item-info {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 15px;
-
+
}
.info-title-cell {
@@ -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轴区域样式 */