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

<template>
	<div class="leftTop">
		<Card title="项目信息" headerIcon @edit="openDialog">
			<div class="projectInfo" v-if="isCustom">
				<div v-for="(item, index) in customList" :key="index">
					<span>{{ item.name }}：</span>
					{{ item.content }}
				</div>
			</div>
			<div class="projectInfo" v-else>
				<div><span>项目名称：</span> {{ projectData.projectName || "" }}</div>
				<div :title="projectLocal"><span>项目地址：</span> {{ projectLocal }}</div>
				<div><span>项目经理：</span> {{ projectData.projectManage || "" }}</div>
				<div><span>联系电话：</span> {{ projectData.projectTel || "" }}</div>
				<div v-if="COMPANY == 'gsgs'"><span>桥梁长度(m)：</span> {{ projectData.bridgeLength || "" }}</div>
				<div v-else><span>建筑面积：</span> {{ projectData.projectAcreage || "" }} ㎡</div>
				<div><span>开工日期：</span> {{ projectData.startWorkDate || "" }}</div>
				<div><span>项目编号：</span> {{ projectData.projectNumber || "" }}</div>
				<div>
					<span>工程类别：</span>
					{{
						projectData.projectType && projectTypeEnumList.length > 0 ? projectTypeEnumList[projectData.projectType - 1].name : ""
					}}
				</div>
			</div>
			<!-- <div class="projectInfo">
				<div><span>建设地点：</span> 南平市建阳区</div>
				<div><span>变电容量：</span> 2x50兆伏安</div>
				<div><span>间隔名称：</span> 110千伏江坑问隔</div>
				<div><span>架空线路：</span> 67.49公里</div>
				<div><span>电缆长度：</span> 0.31公里</div>
				<div><span>通讯光缆：</span> 74.79公里</div>
				<div><span>总投资：</span> 11762万元</div>
			</div> -->
		</Card>
		<projectInfoDialog ref="projectInfoDialogRef" @refresh="getLargeScreenConfig"></projectInfoDialog>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch, computed } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import { queryByProject } from "@/api/modules/config";
import projectInfoDialog from "./projectInfoDialog.vue";
import { COMPANY } from "@/config/config";
const customList = computed(() => {
	let { list } = JSON.parse(customData.value?.configValue || "{}");
	return list;
});
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);
const projectInfoDialogRef = ref();
const customData = ref(null);
const isCustom = ref(false 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 = [];
	}
};

const getLargeScreenConfig = async () => {
	const res: any = await queryByProject({ configKey: "project_info", projectSn: store.sn });
	console.log(res, "res");
	if (res.code === 200) {
		const { isCustom: curIsCustom } = JSON.parse(res.result?.configValue || "{}");
		isCustom.value = curIsCustom;
		customData.value = res.result;
	}
};

const openDialog = () => {
	projectInfoDialogRef.value.openDialog(customData.value);
};
//将方法暴露给父组件
defineExpose({
	projectTypeEnum
});
onMounted(async () => {
	await projectTypeEnum();
	await getLargeScreenConfig();
});
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 {
	width: 100%;
	height: 100%;
	.projectInfo {
		width: 100%;
		height: 100%;
		color: #fff;
		padding: 2% 0 0 4%;

		div {
			width: 95%;
			height: 12%;
			font-size: 15px;
			white-space: nowrap; //单行
			overflow: hidden;
			text-overflow: ellipsis;
			span {
				margin-right: 3%;
				color: #ccc;
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
::v-deep .h-card {
	position: relative;
}
</style>