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

<template>
	<Card title="项目总体计划">
		<div class="fullHeight">
			<div class="searchBox whiteBlock">
				<div class="rhombus">
					图例：
					<div>
						<div class="rhombus_bg"></div>
						<div>关键控制点</div>
					</div>
					<div>
						<div class="rhombus_bg1"></div>
						<div>重要事件的控制</div>
					</div>
					<div>
						<div class="rhombus_bg2"></div>
						<div>作业项目的节点</div>
					</div>
					<div>
						<div class="rhombus_bg3"></div>
						<div>非关键路径</div>
					</div>
					<div>
						<div class="rhombus_bg4"></div>
						<div>关键路径</div>
					</div>
				</div>
			</div>
			<div class="table_wrap whiteBlock">
				<GanttChart
					:yearList="pageInfo.yearList"
					:milestoneList="pageInfo.milestoneList"
					:projectItemList="pageInfo.projectItemList"
				/>
			</div>
		</div>
	</Card>
</template>

<script setup lang="tsx" name="ProjectSupervisionRecord">
import GanttChart from "./ganttChart.vue";
import dayjs from "dayjs";
import { getMilestoneListApi, getProjectPlanGraphApi } from "@/api/modules/schedulePlan";
import { computed, reactive, ref, onMounted, onBeforeMount, watch } from "vue";
import { GlobalStore } from "@/stores";
import Card from "@/components/card.vue";
const store = GlobalStore();

const pageInfo = reactive({
	pageNo: 1,
	pageSize: 10,
	total: 10,
	milestoneList: [],
	yearList: [],
	projectItemList: [],
	projectSn: ""
});

const loadCardData = () => {
	let data = {
		projectSn: store.sn,
		deviceUnitId: "",
		pageNo: 1,
		pageSize: -1
	};
	getMilestoneListApi(data).then((res: any) => {
		if (res.code == 200) {
			pageInfo.yearList = Array.from(
				new Set(
					res.result.records.map((ele: any) => {
						return dayjs(ele.milestoneTime).format("YYYY");
					})
				)
			);
			pageInfo.milestoneList = res.result.records.reduce((pre: any[], cur: any, index: number) => {
				if (pre.length == 0) {
					pre.push({
						id: "id-" + Math.random().toString(36).substr(2, 9),
						firstQuarterList: []
					});
				}
				pre[0].firstQuarterList.push({
					...cur,
					yearTime: cur.milestoneTime,
					name: cur.milestoneName
				});
				return pre;
			}, []);

			// pageInfo.tableData = res.result.records;
			pageInfo.total = res.result.total;
			console.log(pageInfo.yearList);
		}
	});
};

const getProjectPlanGraph = () => {
	let data = {
		projectSn: store.sn
	};
	getProjectPlanGraphApi(data).then((res: any) => {
		if (res.code == 200) {
			pageInfo.projectItemList = res.result.reduce((pre: any[], cur: any) => {
				console.log(cur, cur.children);
				const children = cur.children.map((ele: any) => {
					const newRestul = ele.schedules.sort((a: any, b: any) => Date.parse(a.timeNode) - Date.parse(b.timeNode));
					console.log(newRestul, ele.schedules);
					return {
						...ele,
						firstQuarterList: newRestul.map((ele: any) => {
							return {
								...ele,
								isShowHidden: true
							};
						}),
						minStartTime: newRestul.length > 0 ? newRestul[0].timeNode : -1,
						maxEndTime: newRestul.length > 0 ? newRestul[newRestul.length - 1].timeNode : -1
					};
				});
				pre.push({
					...cur,
					children: children
				});
				return pre;
			}, []);
			console.log(pageInfo.projectItemList);
		}
		console.log(res);
	});
};

onMounted(() => {
	loadCardData();
	getProjectPlanGraph();
});
</script>
<style lang="scss" scoped>

.searchBox {
	height: 40px;
	display: flex;
	align-items: center;
	color: white;
	padding: 0 20px;
}
.rhombus {
	display: flex;
	align-items: center;
	> div {
		display: flex;
		align-items: center;
		margin-right: 10px;
		> div:last-child {
			margin-left: 4px;
			font-size: 14px;
		}
	}
	.rhombus_bg {
		width: 10px;
		height: 10px;
		background-color: #ff0000;
		transform: rotateZ(45deg) skew(15deg, 15deg);
	}
	.rhombus_bg1 {
		width: 6px;
		height: 6px;
		background-color: #fff;
		border: 2px solid #000000;
		transform: rotateZ(45deg) skew(15deg, 15deg);
	}
	.rhombus_bg2 {
		width: 10px;
		height: 10px;
		background-color: #fff;
		border: 2px solid #000000;
		border-radius: 50%;
	}
	.rhombus_bg3 {
		width: 30px;
		height: 4px;
		background-color: #13c865;
	}
	.rhombus_bg4 {
		width: 30px;
		height: 4px;
		background-color: #ff0000;
	}
}

.download {
	color: #1684fc;
	cursor: pointer;
}
</style>