flx：优化进度渲染的效率

src/views/commandScreen/dialogCompnnents/progress-tree.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="row-groups" :class="{ open: p.openedIndex === p.id }" v-for="(p, i) in props.treeData" :key="p.taskName">
 		<div class="row">
-			<div class="td fixed_1" @click="handleOpen(p.id, p)" style="color: #fff; padding-left: 25px">
+			<div class="td fixed_1" @click.prevent="handleOpen(p.id, p)" style="color: #fff; padding-left: 25px">
 				<el-icon
 					size="16"
 					v-if="p.openedIndex === p.id && p.children.length > 0"
@@ -45,15 +45,16 @@
 		</div>
 		<!-- 第二层 -->
 		<div v-if="p.openedIndex === p.id && p.children.length > 0">
-			<myTree :treeData="p.children" :dateList="props.dateList"></myTree>
+			<myTree :pageNo="-1" :treeData="p.children" :pageSize="10" :dateList="props.dateList"></myTree>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import myTree from "@/views/commandScreen/dialogCompnnents/progress-tree.vue";
-import { ref, watch, nextTick, reactive, onMounted } from "vue";
+import { ref, watch, nextTick, reactive, onMounted, defineAsyncComponent } from "vue";
-const props = defineProps(["treeData", "dateList"]);
+// const myTree = defineAsyncComponent(() => import("@/views/commandScreen/dialogCompnnents/progress-tree.vue"));
+const props = defineProps(["treeData", "dateList", "pageSize", "pageNo"]);
 
 // 甘特图详情弹窗
 const ganttDetailRef = ref();
@@ -220,13 +221,15 @@ const configGantts = (projects: any[]) => {
 		// 	}
 		// }
 		// if (project.children.length > 0) {
-		// 	project.children && configGantts(project.children, type);
+		// 	project.children && configGantts(project.children);
 		// }
 	});
 };
 const setGantts = (treeData: any[]) => {
 	if (treeData.length == 0) return;
+	nextTick(() => {
 		configGantts(treeData);
+	});
 };
 const increaseDate = (date: any, delay: any) => {
 	const timestamp = new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
@@ -266,9 +269,32 @@ const getDays = (date: any) => {
 		return days;
 	})();
 };
-onMounted(() => {
+const pageInfo = reactive({
-	setGantts(props.treeData);
+	treeList: [],
+	newTreeList: [],
+	pageNo: 1,
+	pageSize: 10
 });
+const loop = () => {
+	// const result = JSON.parse(JSON.stringify(props.treeData));
+	// pageInfo.newTreeList = props.pageSize
+	// 	? result
+	// 	: result.slice((pageInfo.pageNo - 1) * pageInfo.pageSize, pageInfo.pageNo * pageInfo.pageSize);
+	// pageInfo.treeList = props.pageSize ? result : pageInfo.treeList.concat(pageInfo.newTreeList);
+	// pageInfo.pageNo += 1;
+	setGantts(props.treeData);
+	// setGantts(props.treeData);
+	console.log("我被调用了");
+	// loop();
+};
+onMounted(() => {
+	pageInfo.pageNo = props.pageNo;
+	if (pageInfo.pageNo == -1) {
+		pageInfo.pageNo += 1;
+		loop();
+	}
+});
+defineExpose({ loop });
 const handleOpen = (index: any, children: any) => {
 	// console.log(666);
 	console.log(index);
@@ -284,6 +310,7 @@ const handleOpen = (index: any, children: any) => {
 	// setTimeout(() => {
 	// 	setGantts(children);
 	// }, 300);
+	// loop();
 };
 </script>
 

src/views/commandScreen/dialogCompnnents/weather-info.vue

@@ -174,7 +174,7 @@
 							</div>
 						</div>
 						<div class="tbody">
-							<myTree :treeData="projectsInfo.projects" :dateList="dateList"></myTree>
+							<myTree ref="childTreeRef" :pageNo="1" :treeData="projectsInfo.projects" :dateList="dateList"></myTree>
 						</div>
 						<div class="tooltips" :style="tooltipsStyle">
 							{{ tooltipContent.taskName }}
@@ -196,6 +196,15 @@
 					<img src="@/assets/images/noData.png" alt="notData" />
 					<div>暂无数据</div>
 				</div>
+				<el-pagination
+					v-if="projectsInfo.projects.length != 0"
+					background
+					:page-size="10"
+					style="justify-content: center; margin-top: 4px"
+					@current-change="onCurrentChange1"
+					layout="prev, pager, next"
+					:total="pageInfo.total"
+				/>
 			</div>
 		</div>
 	</div>
@@ -552,13 +561,27 @@ const tooltipContent = ref({
 // 		setGantts();
 // 	}, 300);
 // };
-
+const pageInfo = reactive({
+	treeList: [],
+	newTreeList: [],
+	pageNo: 1,
+	pageSize: 10,
+	total: 0
+});
+const onCurrentChange1 = (event: number) => {
+	pageInfo.pageNo = event;
+	projectsInfo.projects = pageInfo.treeList.slice((pageInfo.pageNo - 1) * pageInfo.pageSize, pageInfo.pageNo * pageInfo.pageSize);
+};
 const getDataList = () => {
 	getXzParentChildTaskListApi({
 		projectSn: searchSn.value,
-		enterpriseId: treeData.value.id
+		enterpriseId: treeData.value.id,
+		pageNo: 1,
+		pageSize: 10
 	}).then(res => {
-		projectsInfo.projects = dealArr(res.result);
+		pageInfo.treeList = dealArr(res.result);
+		pageInfo.total = pageInfo.treeList.length;
+		onCurrentChange1(1);
 		// projectsInfo.projectListAll = dealArr(res.result);
 		// projectsInfo.projects = projectsInfo.projectListAll.slice(
 		// 	(projectsInfo.pageNo - 1) * projectsInfo.pageSize,
@@ -629,18 +652,28 @@ const getDays = (date: any) => {
 		return days;
 	})();
 };
-
+const childTreeRef = ref(null as any);
+watch(
+	() => childTreeRef.value,
+	() => {
+		console.log("我是子组件");
+		childTreeRef.value && childTreeRef.value.loop();
+	}
+);
 const handleScroll = (e: any) => {
 	// if (e.target.clientHeight + e.target.scrollTop === e.target.scrollHeight) {
-	// 	console.log(e.target.scrollLeft, e.target.scrollTop, e.target.scrollBottom);
+	// 	// console.log(e.target.scrollLeft, e.target.scrollTop, e.target.scrollBottom);
-	// 	if (projectsInfo.projects.length >= projectsInfo.projectListAll.length) return;
+	// 	// if (projectsInfo.projects.length >= projectsInfo.projectListAll.length) return;
-	// 	projectsInfo.pageNo += 1;
+	// 	// projectsInfo.pageNo += 1;
-	// 	const resultList = projectsInfo.projectListAll.slice(
+	// 	// const resultList = projectsInfo.projectListAll.slice(
-	// 		(projectsInfo.pageNo - 1) * projectsInfo.pageSize,
+	// 	// 	(projectsInfo.pageNo - 1) * projectsInfo.pageSize,
-	// 		projectsInfo.pageNo * projectsInfo.pageSize
+	// 	// 	projectsInfo.pageNo * projectsInfo.pageSize
-	// 	);
+	// 	// );
-	// 	projectsInfo.projects = projectsInfo.projects.concat(resultList);
+	// 	// projectsInfo.projects = projectsInfo.projects.concat(resultList);
-	// 	return;
+	// 	// return;
+	// 	// childTreeRef.value && childTreeRef.value.loop();
+	// 	// console.log("我到底部了");
+	// 	// return;
 	// }
 	if (scrollTimer.value) {
 		clearTimeout(scrollTimer.value);
@@ -1064,13 +1097,14 @@ onMounted(() => {
 				}
 			}
 			.gantt-chart {
-				height: calc(90% - 45px);
+				height: calc(87% - 45px);
 				transform: translateX(-10px);
 				overflow: hidden;
 				.table {
 					position: relative;
 					height: 100%;
 					overflow-x: auto;
+					// overflow-y: hidden;
 
 					&::-webkit-scrollbar {
 						width: 6px;