zhgdlarge/src/views/commandScreen/commandCenter/centerBottom.vue

<template>
	<div class="centerBottom">
		
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, watch, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const progressList = ref([
	// {
	// 	name: "施工证获取",
	// 	status: 0
	// },
	// {
	// 	name: "土方开挖",
	// 	status: 0
	// },
	// {
	// 	name: "桩基",
	// 	status: 0
	// },
	// {
	// 	name: "支护开始",
	// 	status: 0
	// },
	// {
	// 	name: "垫层完成",
	// 	status: 0
	// },
	// {
	// 	name: "正负零",
	// 	status: 0
	// },
	// {
	// 	name: "工程达到预售条件",
	// 	status: 0
	// }
] as any);
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);

watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
			console.log("当前阶段", projectData.value.constructionStage);
			if (progressList.value.length > 0) {
				progressList.value[projectData.value.constructionStage - 1].status = 1;
			}
		}
	}
);

//获取里程碑option
const getProgressOption = async () => {
	const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage", projectSn: store.sn });
	if (res.result.length > 0) {
		let newArray = res.result.map((item: any) => {
			return {
				name: item.name,
				status: 0
			};
		});
		progressList.value = newArray;
		console.log(projectData.value, "里程碑option", res);
		if (projectData.value.constructionStage) {
			progressList.value[projectData.value.constructionStage - 1].status = 1;
		}
	}
};
//将方法暴露给父组件
defineExpose({
	getProgressOption
})
onMounted( async () => {
	getProgressOption();
});
</script>

<style lang="scss" scoped>
.centerBottom{
	background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
	// background: #fff;
	background-size: 100% 100%;
}
</style>