|
|
@@ -133,6 +133,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ dutyScrollTimer: null,
|
|
|
// 在线状态面板
|
|
|
controlInfoData: [
|
|
|
{ name: '定周期控制', value: 400, color: '#33a3ff' }, // 蓝色
|
|
|
@@ -208,7 +209,12 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+ // 组件挂载时启动自动滚动
|
|
|
+ this.startDutyScroll();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 离开页面时务必销毁定时器,防止内存泄漏
|
|
|
+ this.pauseDutyScroll();
|
|
|
},
|
|
|
methods: {
|
|
|
// 处理忽略逻辑
|
|
|
@@ -222,18 +228,61 @@ export default {
|
|
|
console.log('点击了查看:', item.title);
|
|
|
// 这里可以触发打开一个弹窗 (调用你之前的 SmartDialog 或者路由跳转)
|
|
|
},
|
|
|
- handleView(row) {
|
|
|
- console.log('点击了查看,当前行数据:', row);
|
|
|
- // 这里可以触发弹窗或路由跳转
|
|
|
- },
|
|
|
onIntersectionRowClick({ row, index }) {
|
|
|
- console.log(`用户点击了第 ${index + 1} 行,路口名称是:`, row.intersection);
|
|
|
+ console.log(`准备跳转查看关键路口详情,当前路口:`, row.intersection);
|
|
|
|
|
|
+ // 使用 Vue Router 跳转,将信息通过 URL 参数 (query) 带过去
|
|
|
+ // 注意:这里的 path 请替换为你项目中“状态监控”页面的真实路由路径
|
|
|
+ this.$router.push({
|
|
|
+ path: '/surve', // 替换为真实的路由
|
|
|
+ query: {
|
|
|
+ tab: 'crossing', // 告诉目标页面:把 Tab 切到“路口”页
|
|
|
+ action: 'open-dialog', // 告诉目标页面:直接打开弹窗
|
|
|
+ id: row.id, // 传递路口 ID
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 处理搜索
|
|
|
handleSearch() {
|
|
|
console.log('搜索', this.currentMapSearch);
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 勤务执行自动轮播逻辑
|
|
|
+ startDutyScroll() {
|
|
|
+ // 如果数据较少不需要滚动
|
|
|
+ if (this.tableData.length <= 4) return;
|
|
|
+ this.pauseDutyScroll(); // 开启前先清除旧的,防止防抖问题
|
|
|
+ this.dutyScrollTimer = setInterval(() => {
|
|
|
+ // 将第一条数据切下来,放到数组最后,实现无限循环
|
|
|
+ if (this.tableData.length > 0) {
|
|
|
+ const firstItem = this.tableData.shift();
|
|
|
+ this.tableData.push(firstItem);
|
|
|
+ }
|
|
|
+ }, 2500); // 每 2.5 秒滚动一次,时间可根据需要调整
|
|
|
+ },
|
|
|
+ pauseDutyScroll() {
|
|
|
+ if (this.dutyScrollTimer) {
|
|
|
+ clearInterval(this.dutyScrollTimer);
|
|
|
+ this.dutyScrollTimer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resumeDutyScroll() {
|
|
|
+ this.startDutyScroll();
|
|
|
+ },
|
|
|
+ // 跳转逻辑修改
|
|
|
+ handleView(row) {
|
|
|
+ console.log('准备跳转查看特勤线路,当前数据:', row);
|
|
|
+
|
|
|
+ // 使用 Vue Router 跳转,将信息通过 URL 参数 (query) 带过去
|
|
|
+ // 注意:这里的 path 请替换为你项目中“状态监控”页面的真实路由路径
|
|
|
+ this.$router.push({
|
|
|
+ path: '/surve', // 或者使用 name: 'StatusMonitoring'
|
|
|
+ query: {
|
|
|
+ tab: 'special-route', // 告诉目标页面:把 Tab 切到“特勤线路”
|
|
|
+ action: 'open-dialog', // 告诉目标页面:直接弹窗
|
|
|
+ id: row.id // 传递这条特勤线路的唯一 ID,用来请求弹窗详情接口
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|