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

<template>
	<div class="leftTop">
		<Card title="项目信息">
			<div class="projectInfo" v-if="projectData">
				<div><span>项目名称：</span> {{ projectData.projectName }}</div>
				<div>
					<span>项目地址：</span> {{ projectData.provinceName }}{{ projectData.cityName }} {{ projectData.areaName
					}}{{ projectData.projectAddress }}
				</div>
				<div><span>项目经理：</span> {{ projectData.projectManage }}</div>
				<div><span>联系电话：</span> {{ projectData.projectTel }}</div>
				<div><span>建筑面积：</span> {{ projectData.projectAcreage }} ㎡</div>
				<div><span>开工日期：</span> {{ projectData.startWorkDate }}</div>
				<div><span>工程类别：</span> {{ projectData.projectType ? projectTypeEnum[projectData.projectType - 1].name : "" }}</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
import { projectTypeEnum } from "@/enums/project/projectTypeEnum";
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: null
});
// 项目信息
const projectData = ref(null as any);

watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	.projectInfo {
		width: 100%;
		height: 100%;
		color: #fff;
		padding: 3% 0 0 4%;

		div {
			height: 13%;
			font-size: 14px;
			span {
				color: #ccc;
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
</style>