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

<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.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"
					:style="{
						visibility: p.openedIndex === p.id && p.children.length > 0 ? 'visible' : 'hidden'
					}"
					><caret-bottom
				/></el-icon>
				<el-icon
					size="16"
					v-else
					:style="{
						visibility: p.openedIndex != p.id && p.children.length > 0 ? 'visible' : 'hidden'
					}"
					><caret-right
				/></el-icon>
				<el-tooltip effect="dark" :content="p.taskName" placement="top-start">
					<span>{{ p.taskName }}</span>
				</el-tooltip>
			</div>
			<div class="td fixed_2">{{ p.startDate }}</div>
			<div class="td fixed_3">{{ p.finishDate }}</div>
			<div class="td" v-for="date in props.dateList" :key="date + 'grid-date'">
				<div class="grids">
					<div
						class="grid"
						v-for="day in getDays(date)"
						:key="'grid' + day.num + Date.now()"
						:ref="(el: any) => setItemRef(el, p.id + '@|@' + day.date)"
					></div>
				</div>
			</div>
			<div
				class="progress"
				:style="gantt"
				v-for="(gantt, index) in p.gantts"
				:key="index"
				:title="p.taskName + ' ' + headerList[p.status].label"
				@click="openGanttDialog(p)"
			></div>
		</div>
		<!-- 第二层 -->
		<div v-if="p.openedIndex === p.id && p.children.length > 0">
			<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, defineAsyncComponent } from "vue";
// const myTree = defineAsyncComponent(() => import("@/views/commandScreen/dialogCompnnents/progress-tree.vue"));
const props = defineProps(["treeData", "dateList", "pageSize", "pageNo"]);

// 甘特图详情弹窗
const ganttDetailRef = ref();
const openGanttDialog = (type: any) => {
	ganttDetailRef.value.openDialog(type);
	// console.log(ganttDetailRef.value);
};

const headerList = reactive([
	{ label: "未开始", color: "#35e5fd" },
	{ label: "进行中", color: "#f1d520" },
	{ label: "已完成", color: "#4fd389" },
	{ label: "已逾期", color: "#F80840" }
	// { label: "逾期未开始", color: "#F80840" },
	// { label: "逾期进行中", color: "#fc6f8e" },
	// { label: "逾期已完成", color: "#C13F5B" }
]);
const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#F80840"] as any);

const itemRefs = [] as any[];
const setItemRef = (el: any, va: any) => {
	if (el) {
		const b = va.split("@|@");

		const dataItem = {
			refData: va,
			item: el
		};
		if (itemRefs.length == 0) {
			const itemList = [];
			itemList.push(dataItem);
			const data = {
				name: b[0],
				itemS: itemList
			};
			itemRefs.push(data);
		} else {
			let isCheck = true;
			for (let index = 0; index < itemRefs.length; index++) {
				const element = itemRefs[index];
				if (element.name === b) {
					isCheck = false;
					element.itemS.push(dataItem);
					break;
				}
			}
			if (isCheck) {
				const itemList = [];
				itemList.push(dataItem);
				const data = {
					name: b[0],
					itemS: itemList
				};
				itemRefs.push(data);
			}
		}
	}
};

const getGanttStyle = (project: any) => {
	// console.log("进入 getGanttStyle --- ", project);
	let { startDate, finishDate, id } = project;
	const startArr = startDate.split("-");
	const endArr = finishDate.split("-");
	let startRef = null;
	let endRef = null;
	// 抹灰工程1-1-2022/09/03

	const a = true;
	// console.log(a, ":!(startArr[2] % 2:");
	if (a) {
		const day = +startArr[2];
		startArr[2] = day < 10 ? "0" + day : day;
		startDate = startArr.join("-");
	}
	const b = true;
	// console.log(a, ":!(endArr[2] % 2):");
	if (b) {
		const day = +endArr[2];
		endArr[2] = day < 10 ? "0" + day : day;
		finishDate = endArr.join("-");
	}

	// const a = !(startArr[2] % 2);
	// if (a) {
	// 	const day = startArr[2] - 1;
	// 	startArr[2] = day < 10 ? "0" + day : day;
	// 	startDate = startArr.join("-");
	// }
	// const b = !(endArr[2] % 2);
	// if (!(endArr[2] % 2)) {
	// 	const day = endArr[2] - 1;
	// 	endArr[2] = day < 10 ? "0" + day : day;
	// 	finishDate = endArr.join("-");
	// }

	// for (let index = 0; index < itemRefs.length; index++) {
	// 	const data = itemRefs[index];
	// 	// console.log(data, "循环里面甘特图", id);
	// 	if (data.name === id) {
	// 		for (let index = 0; index < data.itemS.length; index++) {
	// 			const element = data.itemS[index];
	// 			if (element.refData === id + "@|@" + startDate) {
	// 				startRef = data.itemS[index].item;
	// 			}

	// 			if (element.refData === id + "@|@" + finishDate) {
	// 				endRef = data.itemS[index].item;
	// 			}
	// 		}
	// 	}
	// }
	itemRefs.reduce((prev, item: any) => {
		if (item.name !== id) return prev;
		item.itemS.forEach((ele: any) => {
			if (ele.refData === id + "@|@" + startDate) {
				startRef = ele.item;
			}

			if (ele.refData === id + "@|@" + finishDate) {
				endRef = ele.item;
			}
		});
		return prev;
	}, []);
	// console.log(startRef, endRef, "甘特图");

	const startLeft = startRef?.offsetLeft;

	const endWidth = endRef?.offsetWidth;

	const endLeft = endRef?.offsetLeft;
	const ganttWidth = endLeft - startLeft + endWidth;

	return { left: startLeft + "px", width: ganttWidth + "px" } as any;
};
const configGantts = (projects: any[]) => {
	console.log("进入渲染 setGantts -- ", projects, projects.length);
	if (projects.length == 0) return;
	Array.from(projects).forEach((project: any) => {
		let { finishDate, name, gantts } = project as any;
		const gantt = getGanttStyle(project);
		if (gantt.background) return;
		// gantt.background = colors.value[project.state - 1];
		gantt.background = colors.value[project.mppStatus];
		if (gantts) {
			gantts.push(gantt);
		} else {
			project.gantts = [gantt];
			project.openedIndex = 9999;
		}
		console.log(1111, project.delay);
		// if (project.delay) {
		// 	const delayStartTime = increaseDate(finishDate, 1);
		// 	const delayEndTime = increaseDate(finishDate, project.delay);
		// 	if (!gantts.background) {
		// 		const gantt = getGanttStyle({
		// 		startDate: delayStartTime,
		// 		finishDate: delayEndTime,
		// 		name
		// 		});
		// 		gantt.background = colors.value[3];
		// 		gantts.push(gantt);
		// 	}
		// }
		// if (project.children.length > 0) {
		// 	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;
	return new Date(timestamp).toISOString().replace(/-/g, "-").slice(0, 10);
};
const getDays = (date: any) => {
	const year = date.split("-")[0];
	const month = +date.split("-")[1];
	const large = [1, 3, 5, 7, 8, 10, 12];
	const normal = [4, 6, 9, 11];
	const small = [2];
	let count = 0;
	switch (true) {
		case large.includes(month):
			count = 31;
			break;
		case normal.includes(month):
			count = 30;
			break;
		case small.includes(month):
			count = year % 4 ? 28 : 29;
			break;
	}

	return (() => {
		const days = new Array(count).fill(0).map((item, index) => {
			let num = index + 1;
			let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
			return { num, date: fulldate };
		});
		// .filter(item => item.num % 2);
		if (count === 28) {
			days.push({ num: 28, date: date + "-28" });
		} else if (count === 30) {
			days.push({ num: 30, date: date + "-30" });
		}
		return days;
	})();
};
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);
	// console.log(openedIndex.value);
	if (index === children.openedIndex) {
		children.openedIndex = 9999;
	} else {
		children.openedIndex = index;
	}
	// nextTick(() => {
	// 	setGantts(children.children);
	// });
	// setTimeout(() => {
	// 	setGantts(children);
	// }, 300);
	// loop();
};
</script>

<style lang="scss" scoped>
.row-groups {
	position: relative;
	height: 42px;
	// &::before {
	// 	content: "";
	// 	position: absolute;
	// 	left: 26px;
	// 	top: 16px;
	// 	width: 0;
	// 	height: 0;
	// 	border-top: 4px solid transparent;
	// 	border-right: 4px solid transparent;
	// 	border-bottom: 4px solid transparent;
	// 	border-left: 4px solid #5be1f4;
	// 	z-index: 99;
	// }

	&.open {
		height: unset;

		// &::before {
		// 	border-left-color: transparent;
		// 	border-top-color: #5be1f4;
		// }
	}

	> .row .td:first-child {
		user-select: none;
		cursor: pointer;
	}

	.row {
		position: relative;
		display: flex;
		border-top: 1px solid #3e5a8d;
		.fixed_1,
		.fixed_2,
		.fixed_3 {
			width: 200px;
			position: relative;
			background: #11306a;
			z-index: 10;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.fixed_1 {
			left: 0;
			border-left: 1px solid #3e5a8d;
		}
		.fixed_2 {
			left: 0px;
		}
		.fixed_3 {
			left: 0px;
		}
		.td {
			flex-shrink: 0;
			box-sizing: border-box;
			height: 42px;
			line-height: 42px;
			// background-color: #fff;
			border-right: 1px solid #3e5a8d;
			border-bottom: 1px solid #3e5a8d;
			border-top: 1px solid #3e5a8d;
			color: #fff;
			font-size: 16px;

			.grids {
				height: 100%;
				display: flex;

				.grid {
					position: relative;
					// flex: 1;
					width: 26px;
					height: 100%;

					&:not(:last-child) {
						width: 25px;
						border-right: 1px solid #3e5a8d;
					}
				}
			}

			&:nth-child(1) {
				padding-left: 40px;
				width: 200px;
			}

			&:not(:nth-child(1)) {
				width: 100px;
				font-size: 14px;
				text-align: center;
			}

			&:nth-child(n + 4) {
				// width: 600px;
				width: initial;
			}
		}

		.progress {
			// flex-shrink: 0;
			position: absolute;
			top: calc(50% - 7px);
			width: 20px;
			height: 14px;
			cursor: pointer;
			background: #557dee;
		}
	}

	.children {
		.td {
			height: 38px;
			line-height: 38px;
			font-size: 14px;
		}
		.row {
			position: relative;
			display: flex;
			border-top: 1px solid #3e5a8d;
			.fixed_1,
			.fixed_2,
			.fixed_3 {
				width: 200px;
				position: relative;
				background: #11306a;
				z-index: 10;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.fixed_1 {
				left: 0;
				border-left: 1px solid #3e5a8d;
			}
			.fixed_2 {
				left: 0px;
			}
			.fixed_3 {
				left: 0px;
			}
			.td {
				flex-shrink: 0;
				box-sizing: border-box;
				height: 42px;
				line-height: 42px;
				// background-color: #fff;
				border-right: 1px solid #3e5a8d;
				border-bottom: 1px solid #3e5a8d;
				border-top: 1px solid #3e5a8d;
				color: #fff;
				font-size: 16px;

				.grids {
					height: 100%;
					display: flex;

					.grid {
						position: relative;
						// flex: 1;
						width: 26px;
						height: 100%;

						&:not(:last-child) {
							width: 25px;
							border-right: 1px solid #3e5a8d;
						}
					}
				}

				&:nth-child(1) {
					padding-left: 40px;
					width: 200px;
				}

				&:not(:nth-child(1)) {
					width: 100px;
					font-size: 14px;
					text-align: center;
				}

				&:nth-child(n + 4) {
					// width: 400px;
					width: initial;
				}
			}

			.progress {
				flex-shrink: 0;
				position: absolute;
				top: calc(50% - 7px);
				width: 20px;
				height: 14px;
				cursor: pointer;
				background: #557dee;
			}
		}
	}
}
</style>