flx：优化进度渲染的效率
This commit is contained in:
parent
8471c36973
commit
79c6a59308
@ -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";
|
||||
const props = defineProps(["treeData", "dateList"]);
|
||||
import { ref, watch, nextTick, reactive, onMounted, defineAsyncComponent } from "vue";
|
||||
// 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;
|
||||
configGantts(treeData);
|
||||
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(() => {
|
||||
setGantts(props.treeData);
|
||||
const pageInfo = reactive({
|
||||
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>
|
||||
|
||||
|
||||
@ -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);
|
||||
// if (projectsInfo.projects.length >= projectsInfo.projectListAll.length) return;
|
||||
// projectsInfo.pageNo += 1;
|
||||
// const resultList = projectsInfo.projectListAll.slice(
|
||||
// (projectsInfo.pageNo - 1) * projectsInfo.pageSize,
|
||||
// projectsInfo.pageNo * projectsInfo.pageSize
|
||||
// );
|
||||
// projectsInfo.projects = projectsInfo.projects.concat(resultList);
|
||||
// return;
|
||||
// // console.log(e.target.scrollLeft, e.target.scrollTop, e.target.scrollBottom);
|
||||
// // if (projectsInfo.projects.length >= projectsInfo.projectListAll.length) return;
|
||||
// // projectsInfo.pageNo += 1;
|
||||
// // const resultList = projectsInfo.projectListAll.slice(
|
||||
// // (projectsInfo.pageNo - 1) * projectsInfo.pageSize,
|
||||
// // projectsInfo.pageNo * projectsInfo.pageSize
|
||||
// // );
|
||||
// // projectsInfo.projects = projectsInfo.projects.concat(resultList);
|
||||
// // 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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user