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

<template>
	<Card title="项目总体计划">
		<div
			class="fullHeight"
			v-loading.lock="isLoading"
			element-loading-text="正在转换中"
			element-loading-background="rgba(0, 0, 0, 0.8)"
		>
			<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>
				<el-tooltip class="box-item" effect="dark" content="转换" placement="top">
					<el-icon @click="showDomIsImage" class="elSwitch"><Switch /></el-icon>
				</el-tooltip>
			</div>
			<div class="table_wrap whiteBlock" :class="{ table_wrap_active: props.showDown && pageInfo.domIsImage }">
				<GanttChart
					:yearList="pageInfo.yearList"
					:milestoneList="pageInfo.milestoneList"
					:projectItemList="pageInfo.projectItemList"
					:showDwon="props.showDown"
					v-if="!pageInfo.domIsImage"
				/>
				<OldGanttChart
					:yearList="pageInfo.yearList"
					:milestoneList="pageInfo.milestoneList"
					:projectItemList="pageInfo.projectItemList"
					:showDwon="props.showDown"
					@onImgData="onImgData"
					v-if="!pageInfo.imageUrl && pageInfo.domIsImage"
				/>
				<el-image
					class="elImage"
					v-if="pageInfo.imageUrl && pageInfo.domIsImage"
					:src="pageInfo.imageUrl"
					:preview-src-list="[pageInfo.imageUrl]"
				></el-image>
			</div>
		</div>
	</Card>
</template>

<script setup lang="tsx" name="ProjectSupervisionRecord">
import GanttChart from "./ganttChart.vue";
import OldGanttChart from "./oldGanttChart.vue";
import { base64ToFile, base64ToUrl } from "@/utils/util";
import dayjs from "dayjs";
import { getMilestoneListApi, getProjectPlanGraphApi, getProjectMilestonePlanRecord } from "@/api/modules/schedulePlan";
import { computed, reactive, ref, onMounted, onBeforeMount, watch, nextTick } from "vue";
import { uploadImgNew } from "@/api/modules/upload";
import { GlobalStore } from "@/stores";
import Card from "@/components/card.vue";
import { ElMessage } from "element-plus";
import lrz from "lrz";
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[],
	projectItemList: [],
	projectSn: "",
	imageUrl: "",
	isLoading: true,
	domIsImage: true
});

const onImgData = (data: any) => {
	// console.log(11111111111111, base64ToFile(data, "项目总体计划"));
	// const url = 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", url, "项目总体计划.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);
	// 	} 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);
	return pageInfo.isLoading && pageInfo.domIsImage;
});

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

const showDomIsImage = () => {
	pageInfo.domIsImage = !pageInfo.domIsImage;
	if (pageInfo.domIsImage) {
		// pageInfo.imageUrl = store.schedulePlanImage;
	}
};

const loadCardData = () => {
	let data = {
		projectSn: store.sn,
		deviceUnitId: "",
		pageNo: 1,
		pageSize: -1,
		timeAsc: 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);
	});
};

const getProjectMilestonePlanRecordList = () => {
      getProjectMilestonePlanRecord({
        projectSn:store.sn
      }).then((res: any) => {
        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'));
            }
          }
          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);
        }
      });
    };

	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) {
          return {
            ...ele,
            firstQuarterList: newRestul.map(ele => {
              return {
                ...ele,
                isShowHidden: true
              };
            }),
            minStartTime: newRestul.length > 0 ? newRestul[0].plannedStart : -1,
            maxEndTime: newRestul2.length > 0 ? newRestul2[newRestul2.length - 1].plannedFinish : -1
          };
        }
        return {
          ...ele,
          minStartTime: -1,
          maxEndTime: -1
        };
      });
    };

onMounted(() => {
	// loadCardData();
	// getProjectPlanGraph();
	getProjectMilestonePlanRecordList();
	nextTick(() => {
		// pageInfo.imageUrl = store.schedulePlanImage;
		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>
/* 加载前 */
.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%;
	}
}
.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;
	.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>