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="dateRange"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				/>
			</div> -->
		</div>
		<div class="content">
			<div class="content-info">
				<span>项目名称：</span>
				<span>{{ projectData.projectName || "" }}</span>
			</div>
			<div class="content-info">
				<span>项目地址：</span>
				<span>{{addressData()}}</span>
			</div>
			<div class="content-info">
				<span>项目经理：</span>
				<span>{{ projectData.projectManage || "" }}</span>
			</div>
			<div class="content-info">
				<span>联系电话：</span>
				<span>{{ projectData.projectTel || "" }}</span>
			</div>
			<div class="content-info">
				<span>建筑面积：</span>
				<span>{{ projectData.projectAcreage || "" }} ㎡</span>
			</div>
			<div class="content-info">
				<span>开工日期：</span>
				<span>{{ projectData.startWorkDate || "" }}</span>
			</div>
			<div class="content-info">
				<span>项目编号：</span>
				<span>{{ projectData.projectNumber || "" }}</span>
			</div>
			<div class="content-info">
				<span>工程类别：</span>
				<span>{{ projectData.projectType &&  projectTypeEnumList.length > 0 ? projectTypeEnumList[projectData.projectType - 1].name : "" }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { getProjectDetail, getStageOption } from "@/api/modules/projectOverview";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const projectData = ref({} as any);
const projectTypeEnumList:any = ref([]); //工程类别
const addressData = () => {
	return 	projectData.value.provinceName +
				projectData.value.cityName +
				projectData.value.areaName +
				projectData.value.projectAddress;
}
// 工程类别字典数据
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 getProjectInfo = async () => {
	const res = await getProjectDetail({ projectSn: store.sn });
	console.log("获取项目信息666", res);
	// console.log("获取工程类别", projectTypeEnum);
	projectData.value = res.result;
};
onMounted(async () => {
	getProjectInfo();
	projectTypeEnum();
});
</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: 35%;
	.header {
		// width: 100%;
		// height: 100%;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		padding: 20px 20px;
		border-bottom: 1px solid #0059ff;
		.hLeft {
			width: 50%;
			// color: white;
			font-size: 20px;
			font-weight: bold;
			background-image: linear-gradient(to bottom left, #c8E3FF, #007AFF);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
		.hRight {
			width: 50%;
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		margin-left: 20px;
		&-info:not(:first-child){
			margin-top: 11px;
		}
		&-info{
			display: flex;
			align-items: center;
			color: white;
			font-size: 14px;
			span:nth-child(2){
				display: inline-block;
				width: 80%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
::v-deep .el-input__wrapper {
	width: 85%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
.dialogContainer {
	padding: 0 50px;
	// height: 600px;
	::v-deep .el-tabs__item {
		color: #fff;
	}
	::v-deep .el-tabs__nav-wrap::after {
		background-color: rgba(255, 0, 0, 0);
	}
	.tabList {
		display: flex;
		width: 100%;
		height: 14%;
		background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
		// background-color: #00224f;
		background-size: 100% 100%;
		left: 75.5%;
		top: 75%;
		color: #fff;
		font-size: 14px;
		line-height: 30px;
		justify-content: space-around;
		text-align: center;

		div {
			width: 100px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.listBox {
		// height: 10%;
		.listStyle {
			display: flex;
			justify-content: space-around;
			color: #fff;
			height: 12%;
			line-height: 25px;
			font-size: 12px;
			text-align: center;
			div {
				width: 100px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.listStyle:hover {
			background: #003c84;
		}
	}
	.notoDta {
		top: 40%;
		width: 30%;
		left: 35%;
		text-align: center;
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: 14px;
			margin: -6% 37%;
		}
	}
}
::v-deep .el-dialog{
	background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
	// background-color: #fff;
	background-size: 100% 100%;
	margin-top: 12%;
}
::v-deep .el-dialog__headerbtn{
	right: 35px;
	top: 25px;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__title{
	margin-left: 30px;
	margin-top: 10px;
	font-size: 18px;
	color: #fff;
	position: absolute;
}
::v-deep el-dialog__header{
	margin-top: 20px;
}
</style>