flx：修复进度模块 底部菜单模块显示 进度轮播出现bug问题

src/views/sevenLargeScreen/qualityControl/schedulePlan/ganttChart.vue

@@ -169,6 +169,7 @@ const userInfo = reactive({
 	pageSize: 10,
 	isLoading: false,
 	scheduleSwitchFlag: false,
+	minLength: 6
 });
 dayjs.extend(quarterOfYear);
 dayjs.extend(isBetween);
@@ -186,7 +187,7 @@ const load = () => {
 	}
 	console.log("我触发了");
 	userInfo.isLoading = true;
-	userInfo.pageSize += 5;
+	userInfo.pageSize += props.showDwon ? 3 : 5;
 };
 
 const projectChildList = computed(() => {
@@ -222,7 +223,7 @@ const planChildren = (row: any) => {
 const splitData = computed(() => {
 	const newResult = projectChildList.value.slice(userInfo.pageNo - 1, userInfo.pageSize * userInfo.pageNo);
 	console.log(888, newResult);
-	if(newResult.length < 6) {
+	if(newResult.length < userInfo.minLength) {
 		userInfo.scheduleSwitchFlag = true;
 	}
 	return newResult
@@ -298,16 +299,40 @@ const monthListUp = computed(() => {
 	};
 });
 
+const gasanalysisInfo = reactive({
+	setIntervalScrollLeft: 0,
+	setIntervalTime: null as any,
+	setIntervalScrollTop: 0,
+	setIntervalTime2: null as any,
+})
+
 watch(
 	() => {
 		props.showDwon;
 	},
 	(val: any) => {
-		if (!val) {
+		console.log("触发了", val, props.showDwon);
-			load();
+		gasanalysisInfo.setIntervalScrollTop = 0;
+		nextTick(() => {
+			const tbodyTable = document.querySelector("#tbody_table") as any;
+			tbodyTable.scrollTop = gasanalysisInfo.setIntervalScrollTop;
+		})
+		if (!props.showDwon) {
+			userInfo.pageSize = 10;
+			userInfo.pageNo = 1;
+			userInfo.minLength = 6;
+			// load();
+		} else {
+			userInfo.pageSize = 6;
+			userInfo.pageNo = 1;
+			userInfo.minLength = 6;
 		}
+		// if (!props.showDwon) {
+		// 	load();
+		// }
 	},
 	{
+		immediate: true,
 		deep: true
 	}
 );
@@ -316,20 +341,18 @@ onUpdated(() => {
 	console.log("更新");
 	cancelAnimationFrame(gasanalysisInfo.setIntervalTime2);
 	cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
-	gasanalysisInfo.setIntervalScrollLeft = 0;
+	if(store.schedulePlanFlag) {
-	setIntervalTimeFn();
+		gasanalysisInfo.setIntervalScrollLeft = 0;
+		setIntervalTimeFn();
+	}
+
 	nextTick(() => {
 		setTimeout(() => {
 			userInfo.isLoading = false;
 		}, 1000);
 	});
 });
-const gasanalysisInfo = reactive({
+
-	setIntervalScrollLeft: 0,
-	setIntervalTime: null as any,
-	setIntervalScrollTop: 0,
-	setIntervalTime2: null as any,
-})
 // 移入
 const handleMouseEnter = () => {
 	if(!store.schedulePlanFlag) return;
@@ -351,13 +374,14 @@ const setIntervalTimeFn = () => {
 	cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
 	const gasanalysisTable1 = document.querySelector(".gasanalysis-table1") as any;
 	gasanalysisInfo.setIntervalScrollLeft = gasanalysisInfo.setIntervalScrollLeft + 0.1;
-	console.log(gasanalysisTable1.scrollLeft + gasanalysisTable1.clientWidth, gasanalysisTable1.scrollWidth, gasanalysisInfo.setIntervalScrollLeft);
+	// console.log(gasanalysisTable1.scrollLeft + gasanalysisTable1.clientWidth, gasanalysisTable1.scrollWidth, gasanalysisInfo.setIntervalScrollLeft);
 	if(Math.ceil(gasanalysisTable1.scrollLeft + gasanalysisTable1.clientWidth) >= gasanalysisTable1.scrollWidth) {
 		cancelAnimationFrame(gasanalysisInfo.setIntervalTime);
 		gasanalysisTable1.scrollLeft = 0;
 		gasanalysisInfo.setIntervalScrollLeft = 0;
 		if(userInfo.scheduleSwitchFlag) {
 			userInfo.pageSize = 10;
+			gasanalysisTable1.scrollTop = 0;
 			emits("scheduleSwitchChange", true);
 			return
 		}
@@ -389,13 +413,34 @@ const setIntervalTimeFn2 = () => {
 
 onMounted(() => {
 	console.log("挂载了");
+	console.log(props.showDwon);
 	nextTick(() => {
 		// const gasanalysisTable1 = document.querySelector(".gasanalysis-table1") as any;
 		// console.log(gasanalysisTable1.scrollWidth);
-		
 		if(store.schedulePlanFlag) {
 			setIntervalTimeFn();
 		};
+
+		// io 为 IntersectionObserver对象 - 由IntersectionObserver()构造器创建
+        // var io = new IntersectionObserver((entries) => {
+        //     //entries 为 IntersectionObserverEntry对像数组
+        //     entries.forEach((item: any) => {
+        //         //item 为 IntersectionObserverEntry对像
+        //         // isIntersecting是一个Boolean值，判断目标元素当前是否可见
+        //         if (item.isIntersecting) {
+        //             //div 可见时 进行相关操作
+        //             console.log(1122333, item, item.target.__vnode, item.target.__vnode.el);
+		// 			// console.log(document.getElementsByClassName(item.target.className) as any);
+		// 			console.log(item.target.__vnode.el.previousElementSibling);
+		// 			// console.log(item.currentTarget.previousElementSibling);
+		// 			// console.log(item.currentTarget.previousElementSibling.getBoundingClientRect());
+		// 			console.log(item.target.__vnode.el.nextElementSibling);
+        //             io.unobserve(item.target); //停止监听该div DOM节点
+        //         }
+        //     });
+        // }); //不传options参数，默认根元素为浏览器视口
+        // const divArr = [...document.querySelectorAll(".shape") as any];
+        // divArr.forEach((div) => io.observe(div)); // 遍历监听所有div DOM节点
 	})
 })
 

src/views/sevenLargeScreen/qualityControl/schedulePlan/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="schedule-plan">
 		<div class="top" :style="{height: (!showDown ? '100%' : '65%')}">
-			<RightTop class="rightTop" :showDown="showDown"></RightTop>
+			<RightTop @setSchedulePlanShowDownFn="setSchedulePlanShowDownFn" class="rightTop" :showDown="showDown"></RightTop>
 		</div>
 		<div class="bottom" v-if="showDown">
 			<CompletionProjectQuantity class="leftTop"></CompletionProjectQuantity>
@@ -43,11 +43,17 @@ const showDownFn = () => {
 	showDown.value = !showDown.value;
 }
 
-watch(() => store.schedulePlanFlag, (newVal) => {
+const setSchedulePlanShowDownFn = () => {
-	if(newVal) {
+	if(store.schedulePlanFlag) {
 		showDown.value = false;
 	}
-}, { immediate: true, deep: true });
+}
+
+// watch(() => store.schedulePlanFlag, (newVal) => {
+// 	if(newVal) {
+// 		showDown.value = false;
+// 	}
+// }, { immediate: true, deep: true });
 </script>
 <style lang="scss" scoped>
 .schedule-plan {

src/views/sevenLargeScreen/qualityControl/schedulePlan/rightTop.vue

@@ -55,7 +55,7 @@
 			<div
 				v-if="pageInfo.yearList.length > 0 && pageInfo.isLoadingAll"
 				class="table_wrap whiteBlock"
-				:class="{ table_wrap_active: props.showDown && pageInfo.domIsImage }"
+				:class="{ table_wrap_active: pageInfo.showDown && pageInfo.domIsImage }"
 			>
 				<template v-if="!pageInfo.domIsImage">
 					<GanttChart
@@ -63,7 +63,7 @@
 						:monthList="pageInfo.monthList"
 						:milestoneList="pageInfo.milestoneList"
 						:projectItemList="pageInfo.projectItemList"
-						:showDwon="props.showDown"
+						:showDwon="pageInfo.showDown"
 						@scheduleSwitchChange="onScheduleSwitchChange"
 					/>
 				</template>
@@ -73,7 +73,7 @@
 						:monthList="pageInfo.monthList"
 						:milestoneList="pageInfo.milestoneList"
 						:projectItemList="pageInfo.projectItemList"
-						:showDwon="props.showDown"
+						:showDwon="pageInfo.showDown"
 						@onImgData="onImgData"
 					/>
 				</template>
@@ -109,6 +109,7 @@ import { GlobalStore } from "@/stores";
 import Card from "@/components/card.vue";
 import { ElMessage } from "element-plus";
 import { is } from "date-fns/locale";
+const emits = defineEmits(["setSchedulePlanShowDownFn"]);
 // import lrz from "lrz";
 const GanttChart = defineAsyncComponent(() => import("./ganttChart.vue"));
 const OldGanttChart = defineAsyncComponent(() => import("./oldGanttChart.vue"));
@@ -161,9 +162,14 @@ const pageInfo = reactive({
 	imageUrl: "",
 	isLoading: true,
 	domIsImage: true,
-	isLoadingAll: false
+	isLoadingAll: false,
+	showDown: true
 });
 
+watch(() => props.showDown, () => {
+	pageInfo.showDown = props.showDown;
+}, { deep: true })
+
 const onImgData = (data: any) => {
 	// console.log(11111111111111, base64ToFile(data, "项目总体计划"));
 	const file = base64ToFile(data, "项目总体计划");
@@ -181,6 +187,7 @@ const onImgData = (data: any) => {
 					setTimeout(() => {
 						// showDomIsImage();
 						pageInfo.domIsImage = false;
+						emits("setSchedulePlanShowDownFn");
 					}, 30000)
 				}
 			} else {
@@ -272,7 +279,7 @@ const onProjectTypeChange = () => {
 	}
 	searchForm.childCategoryId = "";
 	getPlanWorkCategoryTree();
-	onChildCategoryChange();
+	
 
 	// pageInfo.domIsImage = true;
 };
@@ -291,6 +298,7 @@ const getPlanWorkCategoryTree = async () => {
 		if(searchForm.projectType == 2) {
 			searchForm.childCategoryId = result.result.records[0].id;
 		}
+		onChildCategoryChange();
 	}
 	return result.success;
 };
@@ -452,12 +460,20 @@ const treeChildren = (dataList: any[], result = []) => {
 };
 
 onMounted(async () => {
-	Promise.all([getPlanWorkCategoryTree(), loadCardData(),getProjectMilestonePlanRecordList()]).then((res) => {
+	schedulePlanFlag.value = store.schedulePlanFlag;
+	if(searchForm.projectType == 1) {
+		pageInfo.imageUrl = store.schedulePlanImage1;
+	} else if(searchForm.projectType == 2) {
+		pageInfo.imageUrl = store.schedulePlanImage2;
+	}
+	console.log("图片", pageInfo.imageUrl, pageInfo.domIsImage);
+	Promise.all([getPlanWorkCategoryTree()]).then((res) => {
 		if(schedulePlanFlag.value && pageInfo.imageUrl) {
 			console.log("我进来了11");
 			setTimeout(() => {
 				// showDomIsImage();
 				pageInfo.domIsImage = false;
+				emits("setSchedulePlanShowDownFn");
 			}, 30000)
 		}
 		pageInfo.isLoadingAll = res.every((item) => item === true);
@@ -467,15 +483,6 @@ onMounted(async () => {
 	// loadCardData();
 	// // getProjectPlanGraph();
 	// getProjectMilestonePlanRecordList();
-	nextTick(() => {
-		if(searchForm.projectType == 1) {
-			pageInfo.imageUrl = store.schedulePlanImage1;
-		} else if(searchForm.projectType == 2) {
-			pageInfo.imageUrl = store.schedulePlanImage2;
-		}
-		schedulePlanFlag.value = store.schedulePlanFlag;
-		console.log("图片", pageInfo.imageUrl, pageInfo.domIsImage);
-	});
 
 	// if(localStorage.getItem("shedulePlanImage")) {
 	// 	const shedulePlanImage = localStorage.getItem("shedulePlanImage") as string;