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>