zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue

<template>
	<div class="leftTop">
		<Card title="进度概况">
			<div class="progressContent">
				<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
					<div><i>倒计时</i></div>
				</div>
				<div class="totalDay">
					<div style="line-height: 45px">
						项目总天数
						<span v-if="!projectData.totalProjectDay" class="dayImg">0</span>
						<span v-else class="dayImg" v-for="item in projectData.totalProjectDay" :key="item">{{ item }}</span>
						<!-- <span class="dayImg">0</span>
						<span class="dayImg">4</span>
						<span class="dayImg">7</span> -->
						<span style="margin-left: 4%">天</span>
					</div>
				</div>
				<div class="residueDay">
					<div style="line-height: 45px">
						项目剩余天数
						<span v-if="!projectData.surplusDay" class="dayImg">0</span>
						<span v-else class="dayImg" v-for="item in projectData.surplusDay" :key="item">{{ item }}</span>
						<!-- <span class="dayImg">2</span>
						<span class="dayImg">8</span>
						<span class="dayImg">6</span> -->
						<span style="margin-left: 4%">天</span>
					</div>
				</div>
				<div
					style="display: flex; margin-top: 3%; margin-left: 0.5%; color: #fff; font-size: 16px; width: 30%; position: absolute"
				>
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
					<div><i>里程碑</i></div>
				</div>
				<div class="progressData">
					<div class="data" v-for="item in progressList">
						<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
						<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
						<div
							v-if="item.status == 1"
							style="color: #fff; font-size: 18px; margin-top: -8%"
							:title="item.name"
							class="statusImg1"
						>
							{{ item.name }}
							<div v-if="item.status == 1" class="statusImg"></div>
						</div>
						<img
							v-if="item.status == 1"
							style="width: 40px; margin-top: 2%"
							src="@/assets/images/comprehensiveManage/project11.png"
							alt=""
						/>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, watch } from "vue";
const progressList = ref([
	{
		name: "施工证获取",
		status: 0
	},
	{
		name: "土方开挖",
		status: 0
	},
	{
		name: "桩基",
		status: 0
	},
	{
		name: "支护开始",
		status: 0
	},
	{
		name: "垫层完成",
		status: 0
	},
	{
		name: "正负零",
		status: 0
	},
	{
		name: "工程达到预售条件",
		status: 0
	},
	{
		name: "主体施工",
		status: 0
	}
]);
// 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);
			progressList.value[projectData.value.constructionStage - 1].status = 1;
		}
	}
);
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
}
.progressContent {
	width: 100%;
	height: 100%;
	.totalDay {
		width: 40%;
		float: left;
		color: #ccc;
		font-size: 16px;
		margin-left: 10%;
	}
	.residueDay {
		width: 40%;
		float: right;
		color: #ccc;
		font-size: 16px;
		margin-right: 5%;
	}
	.dayImg {
		margin-left: 2%;
		font-size: 26px;
		display: inline-block;
		width: 35px;
		height: 45px;
		font-family: sadigitalNumber;
		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #4ac0f3;
	}
	.progressData {
		width: 96%;
		height: 15%;
		margin: 13.5% 2% 0 2%;
		background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		cursor: pointer;
		.data {
			color: #ccc;
			font-size: 15px;
			margin-top: -1%;
			margin-left: 5%;
			.text {
				width: 60px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			img {
				width: 20px;
				margin-top: 18%;
				margin-left: 15%;
			}
		}
		.statusImg {
			position: absolute;
			top: 190%;
			left: -40%;
			width: 120px;
			height: 2px;
			background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
			background-size: 100% 100%;
		}
		.statusImg1 {
			position: relative;
			background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
			background-size: 100% 100%;
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
	margin-top: 1.8%;
}
</style>