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

<template>
	<Card title="项目总体计划">
		<!-- {{pageInfo.yearList.length}} {{pageInfo.milestoneList.length}} -->
		
		<div
			class="fullHeight"
			v-loading.lock="isLoading"
			element-loading-text="正在转换中"
			element-loading-background="rgba(0, 0, 0, 0.8)"
		>
			<div class="searchBox whiteBlock">
				<el-select size="small" @change="onProjectTypeChange" v-model="searchForm.projectType" placeholder="Select">
					<el-option v-for="item in projectTypeList" :key="item.id" :label="item.projectTypeName" :value="item.id" />
				</el-select>
				<el-cascader
					class="ml_20"
					size="small"
					@change="onChildCategoryChange"
					v-model="searchForm.childCategoryId"
					:options="planWorkCategoryList"
					:props="{ checkStrictly: true, value: 'id', label: 'categoryName', children: 'children' }"
					clearable
				></el-cascader>
				<div class="rhombus ml_20">
					图例：
					<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>
				<el-tooltip v-if="pageInfo.yearList.length > 0" class="box-item" effect="dark" content="转换" placement="top">
					<el-icon @click="showDomIsImage" class="elSwitch"><Switch /></el-icon>
				</el-tooltip>
			</div>
			<div
				v-if="pageInfo.yearList.length > 0 && pageInfo.isLoadingAll"
				class="table_wrap whiteBlock"
				:class="{ table_wrap_active: props.showDown && pageInfo.domIsImage }"
			>
				<template v-if="!pageInfo.domIsImage">
					<GanttChart
						:yearList="pageInfo.yearList"
						:monthList="pageInfo.monthList"
						:milestoneList="pageInfo.milestoneList"
						:projectItemList="pageInfo.projectItemList"
						:showDwon="props.showDown"
					/>
				</template>
				<template v-if="!pageInfo.imageUrl && pageInfo.domIsImage">
					<OldGanttChart
						:yearList="pageInfo.yearList"
						:monthList="pageInfo.monthList"
						:milestoneList="pageInfo.milestoneList"
						:projectItemList="pageInfo.projectItemList"
						:showDwon="props.showDown"
						@onImgData="onImgData"
					/>
				</template>
				<el-image
					class="elImage"
					v-if="pageInfo.imageUrl && pageInfo.domIsImage"
					:src="pageInfo.imageUrl"
					:preview-src-list="[pageInfo.imageUrl]"
				></el-image>
			</div>
			<div class="not-data" v-else>
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import { base64ToFile, base64ToUrl } from "@/utils/util";
import dayjs from "dayjs";
import {
	getMilestoneListApi,
	getPlanRecordPageApi,
	getProjectPlanGraphApi,
	getProjectMilestonePlanRecord,
	getPlanWorkCategoryTreePage
} from "@/api/modules/schedulePlan";
import { computed, reactive, ref, onMounted, onBeforeMount, watch, nextTick, defineAsyncComponent } from "vue";
import { uploadImgNew } from "@/api/modules/upload";
import { GlobalStore } from "@/stores";
import Card from "@/components/card.vue";
import { ElMessage } from "element-plus";
import { is } from "date-fns/locale";
// import lrz from "lrz";
const GanttChart = defineAsyncComponent(() => import("./ganttChart.vue"));
const OldGanttChart = defineAsyncComponent(() => import("./oldGanttChart.vue"));

// import GanttChart from "./ganttChart.vue";
// import OldGanttChart from "./oldGanttChart.vue";

const BASEURL = import.meta.env.VITE_API_URL;
const store = GlobalStore();

const props = defineProps({
	showDown: {
		type: Boolean,
		default: true
	}
});

const pageInfo = reactive({
	pageNo: 1,
	pageSize: 10,
	total: 10,
	milestoneList: [],
	yearList: [] as any[],
	monthList: [] as any[],
	projectItemList: [],
	projectSn: "",
	imageUrl: "",
	isLoading: true,
	domIsImage: true,
	isLoadingAll: false
});

const onImgData = (data: any) => {
	// console.log(11111111111111, base64ToFile(data, "项目总体计划"));
	const file = base64ToFile(data, "项目总体计划");
	// console.log(22222222, url, url.size);
	// lrz(url, { quality: 1 }).then((rst: any) => {
	// 	console.log(33333, rst);
	const formData = new FormData();
	formData.append("files", file, "项目总体计划.png");
	uploadImgNew(formData, true).then((res: any) => {
			// console.log(22222222, res);
			if (res.status == "SUCCESS") {
				pageInfo.imageUrl = BASEURL + "/image/" + res.data[0].imageUrl;
				store.setShedulePlanImage(pageInfo.imageUrl, searchForm.projectType);
			} else {
				ElMessage.error("转换失败!");
			}
		});
	// });

	// const url = base64ToUrl(data);
	// pageInfo.imageUrl = url;
	// store.setShedulePlanImage(url);
	// console.log(111111, "赋值");
	// pageInfo.imageUrl = data;
	// localStorage.setItem("shedulePlanImage", data);
	// store.setShedulePlanImage(url);
};

const isLoading = computed(() => {
	console.log(33333, "isLoading", pageInfo.isLoading, pageInfo.domIsImage, pageInfo.isLoading && pageInfo.domIsImage && pageInfo.yearList.length > 0);
	return pageInfo.isLoading && pageInfo.domIsImage && pageInfo.yearList.length > 0;
});

const onChildCategoryChange = () => {
	loadCardData();
	getProjectMilestonePlanRecordList();
};

watch(
	() => pageInfo.imageUrl,
	() => {
		if (pageInfo.imageUrl) {
			nextTick(() => {
				// console.log(111111, "关闭loading");
				pageInfo.isLoading = false;
			});
		}
	}
);

const showDomIsImage = () => {
	pageInfo.domIsImage = !pageInfo.domIsImage;
	if (pageInfo.domIsImage) {
		if(searchForm.projectType == 1) {
			pageInfo.imageUrl = store.schedulePlanImage1;
		} else if(searchForm.projectType == 2) {
			pageInfo.imageUrl = store.schedulePlanImage2;
		}
	}
};

const searchForm = reactive({
	childCategoryId: "",
	projectType: 1
});
const projectTypeList = ref([
	{
		id: 1,
		projectTypeName: "项目里程碑"
	},
	{
		id: 2,
		projectTypeName: "装置里程碑"
	}
]);

const onProjectTypeChange = () => {
	if(pageInfo.domIsImage) {
		if(store.schedulePlanImage1 && searchForm.projectType == 1) {
			pageInfo.imageUrl = store.schedulePlanImage1;
			return
		}
		if(store.schedulePlanImage2 && searchForm.projectType == 2) {
			pageInfo.imageUrl = store.schedulePlanImage2;
			return
		}
		pageInfo.imageUrl = "";
		pageInfo.isLoading = true;
	}
	searchForm.childCategoryId = "";
	getPlanWorkCategoryTree();
	onChildCategoryChange();

	// pageInfo.domIsImage = true;
};

const planWorkCategoryList = ref([]);
const getPlanWorkCategoryTree = async () => {
	const result: any = await getPlanWorkCategoryTreePage({
		projectSn: store.sn,
		pageNo: 1,
		pageSize: -1,
		whichModule: 4,
		projectType: searchForm.projectType
	});
	if (result.success) {
		planWorkCategoryList.value = result.result.records;
	}
	return result.success;
};

const loadCardData = async () => {
	let data = {
		projectSn: store.sn,
		deviceUnitId: "",
		pageNo: 1,
		pageSize: -1,
		// timeAsc: 1,
		projectType: searchForm.projectType,
		isImportantMilestone: 1,
		childCategoryId: searchForm.childCategoryId ? searchForm.childCategoryId[searchForm.childCategoryId.length - 1] : ""
	};
	const res: any = await getPlanRecordPageApi(data);
	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);
	}
	return res.success;
};

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);
	});
};

const getProjectMilestonePlanRecordList = async () => {
	const res: any = await getProjectMilestonePlanRecord({
		projectSn: store.sn,
		projectType: searchForm.projectType,
		childCategoryId: searchForm.childCategoryId ? searchForm.childCategoryId[searchForm.childCategoryId.length - 1] : ""
	});
	if (res.code == 200) {
		console.log(res, "获取项目里程碑计划记录列表");
		const timeDiff = dayjs(res.result.end).diff(dayjs(res.result.begin), "year");
		if (res.result.begin) {
			pageInfo.yearList = [dayjs(res.result.begin).format("YYYY")];
			if (timeDiff > 0) {
				for (let i = 0; i < timeDiff; i++) {
					const year = dayjs(res.result.begin).format("YYYY");
					pageInfo.yearList.push(Number(year) + (i + 1));
				}
			} else if (dayjs(res.result.begin).format("YYYY") != dayjs(res.result.end).format("YYYY")) {
				pageInfo.yearList.push(dayjs(res.result.end).format("YYYY"));
			}
		}
		pageInfo.monthList = [res.result.begin, res.result.end];
		console.log(pageInfo.yearList, timeDiff);
		pageInfo.projectItemList = res.result.list.reduce((pre: any[], cur: any) => {
			// console.log(cur, cur.children);
			const children = treeChildren(cur.children);
			pre.push({
				...cur,
				children: children
			});
			return pre;
		}, []);
		console.log(22222, pageInfo.projectItemList);
	}
	return res.success;
};

const treeChildren = (dataList: any[], result = []) => {
	return dataList.map(ele => {
		if (ele.children instanceof Array && ele.children.length > 0) {
			ele.children = treeChildren(ele.children, result);
		}
		const newRestul =
			ele.records instanceof Array &&
			ele.records.sort((a: any, b: any) => Date.parse(a.plannedStart) - Date.parse(b.plannedStart));
		const newRestul2 =
			ele.records instanceof Array &&
			ele.records.sort((a: any, b: any) => Date.parse(a.plannedFinish) - Date.parse(b.plannedFinish));

		// console.log(newRestul, ele.schedules);
		if (newRestul instanceof Array && newRestul.length > 0) {
			const newPlannedStart = newRestul.filter((item: any) => item.milestoneType == 1);
			const newPlannedFinish = newRestul2.filter((item: any) => item.milestoneType == 2);
			return {
				...ele,
				firstQuarterList: newRestul.map(ele => {
				return {
					...ele,
					isShowHidden: true
				};
				}),
				minStartTime: newPlannedStart.length > 0 ? newPlannedStart[0].plannedStart : -1,
				maxEndTime: newPlannedFinish.length > 0 ? newPlannedFinish[newPlannedFinish.length - 1].plannedFinish : -1
			};
		}
		return {
			...ele,
			minStartTime: -1,
			maxEndTime: -1
		};
	});
};

onMounted(async () => {
	Promise.all([getPlanWorkCategoryTree(), loadCardData(),getProjectMilestonePlanRecordList()]).then((res) => {
		pageInfo.isLoadingAll = res.every((item) => item === true);
		console.log("我是共同执行的",res, pageInfo.isLoadingAll);
	});
	// getPlanWorkCategoryTree();
	// loadCardData();
	// // getProjectPlanGraph();
	// getProjectMilestonePlanRecordList();
	nextTick(() => {
		// if(searchForm.projectType == 1) {
		// 	pageInfo.imageUrl = store.schedulePlanImage1;
		// } else if(searchForm.projectType == 2) {
		// 	pageInfo.imageUrl = store.schedulePlanImage2;
		// }
		
		console.log("图片", pageInfo.imageUrl, pageInfo.domIsImage);
	});

	// if(localStorage.getItem("shedulePlanImage")) {
	// 	const shedulePlanImage = localStorage.getItem("shedulePlanImage") as string;
	// 	pageInfo.imageUrl = shedulePlanImage;
	// }
});
</script>
<style lang="scss" scoped>
.not-data {
	top: 50%;
	width: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
/* 加载前 */
.elImage :deep(.el-image__placeholder) {
	background-color: #f5f7fa;
	background-image: url("@/assets/images/bthgIcon/loading.gif");
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: 50% 50%;
}
.fullHeight {
	height: 100%;
}
.table_wrap {
	height: calc(100%);
	.elImage {
		height: 100%;
		width: 100%;
	}
}
.table_wrap_active {
	height: calc(98%);
	display: flex;
	justify-content: center;
}
.searchBox {
	height: 40px;
	display: flex;
	align-items: center;
	color: white;
	padding: 0 20px;
	justify-content: space-between;
	position: absolute;
	top: 0;
	right: 10px;
	.ml_20,
	:deep(.el-cascader) {
		margin-left: 20px;
	}
	.elSwitch {
		font-size: 20px;
		cursor: pointer;
	}
}
.rhombus {
	display: flex;
	align-items: center;
	font-size: 16px;
	> 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>