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

<template>
	<div class="leftTop">
		<div class="header">
			<div class="hLeft">
				人员履职情况分析
			</div>
			<div class="hRight">
				<el-date-picker style="width: 85%" v-model="value1" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" :size="size"/>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";

// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);

const projectLocal = ref("" as any);
const store = GlobalStore();
const projectTypeEnumList:any = ref([]); //工程类别
// 工程类别字典数据
const projectTypeEnum = async () => {
	const res: any = await getStageOption({ dictionaryEncoding: "project_type", projectSn: store.sn });
	if (res.result.length > 0) {
		let newArray = res.result.map((item: any) => {
			return {
				name: item.name,
				id: Number(item.data)
			};
		});
		projectTypeEnumList.value = newArray
	} else {
		projectTypeEnumList.value = []
	}
};
//将方法暴露给父组件
defineExpose({
	projectTypeEnum
})
onMounted( async () => {
	await projectTypeEnum();
})
watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
			projectLocal.value =
				projectData.value.provinceName +
				projectData.value.cityName +
				projectData.value.areaName +
				projectData.value.projectAddress;
		}
	}
);
</script>
<style lang="scss" scoped>
.leftTop {
	background: url("@/assets/images/commandScreen/card-left-top.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	.header{
		// width: 100%;
		// height: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
		// border-bottom: 1px solid #0644b7;
		border-bottom: 2px solid #0644b7;
		.hLeft{
			width: 50%;
			color: white;
		}
		.hRight{
			width: 50%;
		}
	}
}
</style>