From ed8c5f14ca3bc17dce63242d584ba37e140be0e5 Mon Sep 17 00:00:00 2001
From: jxj_yjl <1490736767@qq.com>
Date: Thu, 29 Jun 2023 18:37:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=98=E7=89=B9=E5=9B=BE=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 .../progressManagement/ganttChart/index.vue   | 896 ++++++++++++++++++
 2 files changed, 898 insertions(+), 2 deletions(-)
 create mode 100644 src/views/hz-project/progressManagement/ganttChart/index.vue

diff --git a/.env.development b/.env.development
index 8b7619c..6db3b59 100644
--- a/.env.development
+++ b/.env.development
@@ -2,9 +2,9 @@
 NODE_ENV = 'development'
 
 # 本地环境接口地址(/api/index.ts文件中使用)
-# VITE_API_URL = 'http://192.168.34.155:6688'
+VITE_API_URL = 'http://192.168.34.155:6688'
 VITE_WPAPI_URL = "http://182.90.224.147:8081"
-VITE_API_URL = "http://182.90.224.147:9013"
+# VITE_API_URL = "http://182.90.224.147:9013"
 
 # 上传
 # VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
diff --git a/src/views/hz-project/progressManagement/ganttChart/index.vue b/src/views/hz-project/progressManagement/ganttChart/index.vue
new file mode 100644
index 0000000..aa46c2f
--- /dev/null
+++ b/src/views/hz-project/progressManagement/ganttChart/index.vue
@@ -0,0 +1,896 @@
+<template>
+	<div class="gantt-box">
+		<div class="header">
+			<div class="left-content">
+				<div class="item" v-for="(item, index) in headerList" :key="index">
+					<div class="color-block" :style="{ background: item.color }"></div>
+					<div class="label">{{ item.label }}</div>
+				</div>
+			</div>
+			<div class="right-content">备注：更新（进度填报）内容后该甘特图将自动更新</div>
+		</div>
+		<div class="gantt-chart">
+			<div class="table" @scroll="handleScroll">
+				<div class="thead">
+					<div class="row">
+						<div class="td">分部分项工程名称</div>
+						<div class="td">开始日期</div>
+						<div class="td" style="border-right: 1px solid #0a769a">完成日期</div>
+						<div class="td" v-for="date in dateList" :key="date">
+							<div class="date">
+								<div class="month">
+									{{ date }}
+								</div>
+								<div class="days">
+									<div class="day" v-for="day in getDays('2023/06')" :key="day.num">
+										{{ day.num }}
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="tbody">
+					<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
+						<div class="row">
+							<div class="td" @click="handleOpen(i)" style="color: #35e5fd">{{ p.pName }}</div>
+							<div class="td">{{ p.startTime }}</div>
+							<div class="td">{{ p.endTime }}</div>
+							<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
+								<div class="grids">
+									<div
+										class="grid"
+										v-for="day in getDays('2023/06')"
+										:key="'grid' + day.num"
+										:ref="p.pName + '-' + day.date"
+									></div>
+								</div>
+							</div>
+							<div
+								class="progress"
+								:style="gantt"
+								v-for="(gantt, index) in p.gantts"
+								:key="index"
+								@mouseenter="handleHover"
+								@mouseleave="handleLeave"
+							></div>
+						</div>
+						<div class="children">
+							<div class="row" v-for="child in p.children" :key="'child-' + child.pName">
+								<div class="td">{{ child.pName }}</div>
+								<div class="td">{{ child.startTime }}</div>
+								<div class="td">{{ child.endTime }}</div>
+								<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
+									<div class="grids">
+										<div class="grid" v-for="day in getDays('2023/06')" :key="'grid' + day.num" :ref="refList"></div>
+									</div>
+								</div>
+								<div
+									class="progress"
+									:style="gantt"
+									v-for="(gantt, index) in child.gantts"
+									:key="index"
+									@mouseenter="handleHover"
+									@mouseleave="handleLeave"
+								></div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="tooltips" :style="tooltipsStyle">
+					<div class="status">已逾期5天</div>
+					<div class="charger">负责人：史蒂夫</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="tsx" name="ProjectSupervisionRecord">
+import { computed, reactive, ref, onMounted } from "vue";
+const refChart = ref();
+const headerList = reactive([
+	{ label: "阶段完成", color: "#35e5fd" },
+	{ label: "任务完成", color: "#4fd389" },
+	{ label: "进行中", color: "#f1d520" },
+	{ label: "逾期", color: "#fc6f8e" }
+]);
+const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#fc6f8e"]);
+const projects = reactive([
+	{
+		pName: "抹灰工程1",
+		startTime: "2023-06-29",
+		endTime: "2023-07-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "抹灰工程1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "抹灰工程2",
+		startTime: "2023-06-29",
+		endTime: "2023-07-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "抹灰工程2-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "抹灰工程3",
+		startTime: "2023-06-29",
+		endTime: "2023-08-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "抹灰工程3-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "抹灰工程4",
+		startTime: "2023-06-29",
+		endTime: "2023-09-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "抹灰工程4-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收1",
+		startTime: "2023-06-29",
+		endTime: "2023-10-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: [
+			{
+				pName: "竣工验收1-1",
+				startTime: "2023-06-29",
+				endTime: "2023-07-29",
+				status: 1,
+				delay: 0,
+				gantts: []
+			}
+		]
+	},
+	{
+		pName: "竣工验收2",
+		startTime: "2023-06-29",
+		endTime: "2023-11-29",
+		status: 1,
+		delay: 0,
+		gantts: [],
+		children: []
+	}
+]);
+const scrollLeft = ref(0);
+const scrollTimer = ref(0);
+const openedIndex = ref(9999);
+const refList = ref(""); // 存放dom节点的数组的 获取到的dom节点都在这里
+let tooltipsStyle = reactive({
+	display: "none",
+	left: 0,
+	top: 0
+});
+onMounted(() => {
+	setGantts();
+	console.log(getDays("2022/09"), "月日期分布");
+	console.log("refList:", refList.value);
+});
+const getGanttStyle = (project: any) => {
+	console.log("进入 getGanttStyle --- ", project);
+
+	let { startTime, endTime, pName } = project;
+	const startArr = startTime.split("/");
+	const endArr = endTime.split("/");
+	let startRef = null;
+	let endRef = null;
+
+	if (!(startArr[2] % 2)) {
+		const day = startArr[2] - 1;
+		startArr[2] = day < 10 ? "0" + day : day;
+		startTime = startArr.join("/");
+		console.log(startTime, "startTime----------");
+	}
+	if (!(endArr[2] % 2)) {
+		const day = endArr[2] - 1;
+		endArr[2] = day < 10 ? "0" + day : day;
+		endTime = endArr.join("/");
+		console.log(endTime, "endTime ------------", pName);
+	}
+	startRef = [`${pName}-${startTime}`][0]; //此项需看下是否生效
+
+	const startLeft = startRef.offsetLeft;
+
+	endRef = [`${pName}-${endTime}`][0]; //此项需看下是否生效
+
+	const endWidth = endRef.offsetWidth; //此项需看下是否生效
+	console.log("endWidth--------", endWidth);
+
+	const endLeft = endRef.offsetLeft; //此项需看下是否生效
+	console.log("endLeft--------", endLeft);
+	const ganttWidth = endLeft - startLeft + endWidth; //此项需看下是否生效
+	console.log("ganttWidth--------", ganttWidth);
+
+	return { left: startLeft + "px", width: ganttWidth + "px" }; //此项需看下是否生效
+};
+const setGantts = () => {
+	const configGantts = (projects: any) => {
+		console.log("进入渲染 setGantts -- ", projects);
+		projects.map(project => {
+			let { endTime, pName, gantts } = project;
+			const gantt = getGanttStyle(project);
+			gantt.background = colors.value[project.status];
+
+			if (gantts) {
+				gantts.push(gantt);
+			} else {
+				project.gantts = [gantt];
+			}
+			if (project.delay) {
+				const delayStartTime = increaseDate(endTime, 1);
+				const delayEndTime = increaseDate(endTime, project.delay);
+				const gantt = getGanttStyle({
+					startTime: delayStartTime,
+					endTime: delayEndTime,
+					pName
+				});
+				gantt.background = colors.value[3];
+				gantts.push(gantt);
+			}
+			project.children && configGantts(project.children);
+		});
+	};
+	configGantts(projects);
+};
+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 handleOpen = (index: any) => {
+	if (index === openedIndex.value) {
+		openedIndex.value = 9999;
+	} else {
+		openedIndex.value = index;
+	}
+};
+
+const handleScroll = (e: any) => {
+	if (scrollTimer.value) {
+		clearTimeout(scrollTimer.value);
+	}
+	scrollTimer.value = setTimeout(() => {
+		scrollLeft.value = e.target.scrollLeft;
+		scrollTimer.value = null;
+	}, 100);
+};
+const handleHover = (e: any) => {
+	const { clientX, clientY } = e;
+	const decreaseLeft = clientX - 680;
+	const decreaseTop = clientY - 200;
+	tooltipsStyle = {
+		left: decreaseLeft + scrollLeft.value + "px",
+		top: decreaseTop + "px",
+		display: "block"
+	};
+};
+const handleLeave = () => {
+	tooltipsStyle.display = "none";
+};
+const dateList = computed(() => {
+	let dates = [];
+	const mapDates = data => {
+		data.map(p => {
+			dates.push(p.startTime);
+			dates.push(p.endTime);
+			p.children && mapDates(p.children);
+		});
+	};
+	mapDates(projects);
+	dates = dates.map(date => date.slice(0, 7)).sort();
+	dates = [...new Set(dates)];
+	console.log("dateList----", dates);
+	return dates;
+});
+</script>
+
+<style scoped lang="scss">
+.gantt-box {
+	box-sizing: border-box;
+	width: 100%px;
+	height: 100%;
+	padding: 18px;
+	background: #09405f;
+	.header {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 60px;
+
+		.left-content {
+			display: flex;
+			width: 40%;
+			height: 100%;
+
+			.item {
+				display: flex;
+				align-items: center;
+				width: calc(100% / 4);
+
+				.color-block {
+					margin-right: 10px;
+					width: 15px;
+					height: 15px;
+					border-radius: 2px;
+				}
+
+				.label {
+					color: #ccc;
+					font-size: 13px;
+				}
+			}
+		}
+
+		.right-content {
+			font-size: 13px;
+			line-height: 60px;
+			color: #ccc;
+		}
+	}
+	.gantt-chart {
+		height: calc(100% - 145px);
+
+		.table {
+			position: relative;
+			height: 100%;
+			overflow-x: auto;
+
+			&::-webkit-scrollbar {
+				width: 10px;
+				height: 8px;
+				cursor: pointer;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				border-radius: 10px;
+				background-color: skyblue;
+			}
+
+			.thead {
+				border-left: 1px solid #0a769a;
+
+				.row {
+					display: flex;
+
+					.td {
+						flex-shrink: 0;
+						box-sizing: border-box;
+						height: 42px;
+						line-height: 42px;
+						background-color: #092945;
+						color: #fff;
+						border-top: 1px solid #0a769a;
+						.date {
+							line-height: 21px;
+							border-left: 1px solid #0a769a;
+
+							.month {
+								border-bottom: 1px solid #0a769a;
+							}
+
+							.days {
+								display: flex;
+
+								.day {
+									flex: 1;
+								}
+							}
+						}
+
+						&:nth-child(1) {
+							padding-left: 40px;
+							width: 200px;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+						}
+
+						&:not(:nth-child(1)) {
+							width: 100px;
+							text-align: center;
+						}
+
+						&:nth-child(n + 4) {
+							width: 400px;
+						}
+					}
+				}
+			}
+
+			.tbody {
+				border-left: 1px solid #0a769a;
+
+				.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 #0a769a;
+
+						.td {
+							flex-shrink: 0;
+							box-sizing: border-box;
+							height: 42px;
+							line-height: 42px;
+							background-color: #092945;
+							border-right: 1px solid #0a769a;
+							border-bottom: 1px solid #0a769a;
+							color: #fff;
+							border-top: 1px solid #0a769a;
+
+							.grids {
+								height: 100%;
+								display: flex;
+
+								.grid {
+									position: relative;
+									flex: 1;
+									height: 100%;
+
+									&:not(:last-child) {
+										border-right: 1px solid #0a769a;
+									}
+								}
+							}
+
+							&: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;
+							}
+						}
+
+						.progress {
+							flex-shrink: 0;
+							position: absolute;
+							top: calc(50% - 7px);
+							width: 20px;
+							height: 14px;
+							background: #557dee;
+						}
+					}
+
+					.children {
+						.td {
+							height: 38px;
+							line-height: 38px;
+							font-size: 14px;
+						}
+					}
+				}
+			}
+
+			.tooltips {
+				position: absolute;
+				box-sizing: border-box;
+				padding: 10px;
+				width: 130px;
+				height: 65px;
+				font-size: 14px;
+				color: #fff;
+				border-radius: 8px;
+				background-color: #50a6b3;
+
+				.status {
+					display: inline-block;
+					margin-bottom: 6px;
+					padding: 0 10px;
+					height: 20px;
+					min-width: 60px;
+					line-height: 20px;
+					font-size: 12px;
+					border-radius: 10px;
+					background-color: #ff6c7f;
+				}
+			}
+		}
+	}
+}
+</style>