项目信息管理头部优化

src/views/manage-add/index.vue

@@ -289,6 +289,7 @@ export default {
       },
       projectRemarks: [],
       loading: false,
+      scrollTimeout: null,
     };
   },
   created() {
@@ -473,28 +474,34 @@ export default {
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
     handleScroll() {
-      // 获取滚动容器
       const container = document.querySelector(".containerbody");
       if (!container) return;
-
+      if (this.scrollTimeout) {
-      // 获取容器的滚动位置
+        clearTimeout(this.scrollTimeout);
-      const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮
+      }
-
+      this.scrollTimeout = setTimeout(() => {
-      // 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分
+        const scrollPosition = container.scrollTop;
-      for (let i = this.sections.length - 1; i >= 0; i--) {
+        if (scrollPosition > this.lastScrollTop) {
-        const element = document.getElementById(this.sections[i].id);
+          this.scrollDirection = 'down';
-        if (element) {
+        } else {
-          // 计算元素相对于滚动容器的位置
+          this.scrollDirection = 'up';
-          const elementPosition = element.offsetTop - container.offsetTop;
+        }
-
+        this.lastScrollTop = scrollPosition;
-          if (elementPosition <= scrollPosition) {
+        const offset = this.scrollDirection === 'down' ? 500 : 200;
-            if (this.activeSection !== this.sections[i].id) {
+        const adjustedScrollPosition = scrollPosition + offset;
-              this.activeSection = this.sections[i].id;
+        for (let i = this.sections.length - 1; i >= 0; i--) {
+          const element = document.getElementById(this.sections[i].id);
+          if (element) {
+            const elementPosition = element.offsetTop - container.offsetTop;
+            if (elementPosition <= adjustedScrollPosition) {
+              if (this.activeSection !== this.sections[i].id) {
+                this.activeSection = this.sections[i].id;
+              }
+              break;
             }
-            break;
           }
         }
-      }
+      }, 50);
     },
     handleMenuClick() {
       if (this.$refs.menuRef) {

src/views/manage-info/index.vue

@@ -200,7 +200,7 @@ export default {
         { id: "basic", label: "基本信息" },
         { id: "programme", label: "规划信息" },
         { id: "buildings", label: "建筑信息" },
-        { id: "models", label: "要素模型信息" },
+        { id: "models", label: "五要素模型信息" },
         { id: "months", label: "月度进展信息" },
         { id: "companyenter", label: "企业入驻信息" },
         { id: "projectpicture", label: "项目画像" },
@@ -213,6 +213,9 @@ export default {
       projectId: null,
       isContainerVisible: true,
       isSubmitted: false,
+      lastScrollTop: 0,
+      scrollDirection: 'down',
+      scrollTimeout: null,
       basicInformation: {
         acceptanceTime: "",
         begainTime: "",
@@ -282,10 +285,10 @@ export default {
       },
       projectRemarks: [],
       loading: false,
+      scrollTimeout: null,
     };
   },
   created() {
-    // 从路由参数中获取 projectId
     this.projectId = Number(this.$route.params.id);
     this.loadData();
     this.action = this.$route.query.action;
@@ -296,8 +299,6 @@ export default {
     if (container) {
       container.addEventListener("scroll", this.handleScroll);
     }
-    // 添加全局点击监听器，用于移除菜单焦点
-    // document.addEventListener('click', this.handleGlobalClick);
   },
   beforeDestroy() {
     window.removeEventListener("scroll", this.handleScroll);
@@ -305,8 +306,6 @@ export default {
     if (container) {
       container.removeEventListener("scroll", this.handleScroll);
     }
-    // 移除全局点击监听器
-    // document.removeEventListener('click', this.handleGlobalClick);
   },
   methods: {
     checkPermi,
@@ -348,30 +347,37 @@ export default {
       this.$router.go(-1);
     },
     handleScroll() {
-      // 获取滚动容器
       const container = document.querySelector(".containerbody");
       if (!container) return;
-
+      if (this.scrollTimeout) {
-      // 获取容器的滚动位置
+        clearTimeout(this.scrollTimeout);
-      const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮
+      }
-
+      this.scrollTimeout = setTimeout(() => {
-      // 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分
+        const scrollPosition = container.scrollTop;
-      for (let i = this.sections.length - 1; i >= 0; i--) {
+        if (scrollPosition > this.lastScrollTop) {
-        const element = document.getElementById(this.sections[i].id);
+          this.scrollDirection = 'down';
-        if (element) {
+        } else {
-          // 计算元素相对于滚动容器的位置
+          this.scrollDirection = 'up';
-          const elementPosition = element.offsetTop - container.offsetTop;
+        }
-
+        this.lastScrollTop = scrollPosition;
-          if (elementPosition <= scrollPosition) {
+        const offset = this.scrollDirection === 'down' ? 500 : 200;
-            if (this.activeSection !== this.sections[i].id) {
+        const adjustedScrollPosition = scrollPosition + offset;
-              this.activeSection = this.sections[i].id;
+        for (let i = this.sections.length - 1; i >= 0; i--) {
+          const element = document.getElementById(this.sections[i].id);
+          if (element) {
+            const elementPosition = element.offsetTop - container.offsetTop;
+            if (elementPosition <= adjustedScrollPosition) {
+              if (this.activeSection !== this.sections[i].id) {
+                console.log(`切换到 ${this.sections[i].label}，位置: ${elementPosition}，偏移: ${offset}`);
+                this.activeSection = this.sections[i].id;
+              }
+              break;
             }
-            break;
           }
         }
-      }
+      }, 50);
     },
-    // 子组件的
+    // 子组件的更新
     handleDataUpdate(dataKey, updatedData) {
       if (dataKey === "projectOtherInfos" || dataKey === "wysmxInformations") {
         if (Array.isArray(updatedData)) {