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 style="font-size: 15px">项目名称：</span>
				<span style="font-size: 15px">{{ projectData.projectName || "" }}</span>
			</div>
			<div class="content-info">
				<span style="font-size: 15px">项目地址：</span>
				<span style="font-size: 15px">{{ addressData() }}</span>
			</div>
			<div class="content-info">
				<span style="font-size: 15px">项目编号：</span>
				<span style="font-size: 15px">{{ projectData.projectNumber || "" }}</span>
			</div>
			<div style="font-size: 15px; line-height: 22px">
				<div style="display: flex; color: white; margin-top: 8px">
					<div style="width: 50%; display: flex">
						<span>项目经理：</span>
						<span>{{ projectData.projectManage || "" }}</span>
					</div>
					<div style="width: 50%; display: flex">
						<span>联系电话：</span>
						<span>{{ projectData.projectTel || "" }}</span>
					</div>
				</div>
				<div style="display: flex; color: white; margin-top: 8px">
					<div style="width: 50%; display: flex">
						<span>建筑面积：</span>
						<span>{{ projectData.projectAcreage || "" }} {{ projectData.projectAcreage ? "㎡" : "" }}</span>
					</div>
					<div style="width: 50%; display: flex">
						<span>开工日期：</span>
						<span>{{ projectData.startWorkDate || "" }}</span>
					</div>
				</div>
				<div style="display: flex; color: white; margin-top: 8px">
					<div style="width: 50%; display: flex">
						<span>工程类别：</span>
						<span>{{
							projectData.projectType && projectTypeEnumList.length > 0
								? projectTypeEnumList[projectData.projectType - 1].name
								: ""
						}}</span>
						<div style="margin-left: 5px; line-height: 20px">
							<img style="width: 25px; height: 25px" src="@/assets/images/mountain-icon.png" alt="" />
						</div>
					</div>
				</div>
			</div>

			<!-- <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 || "" }} {{ 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.provinceName + projectData.value.cityName + projectData.value.areaName + projectData.value.projectAddress
		: "";
};
// 工程类别字典数据
const projectTypeEnum = async (showLoading: boolean) => {
	const res: any = await getStageOption({ dictionaryEncoding: "project_type", projectSn: store.sn }, showLoading);
	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 (showLoading: boolean) => {
	const res = await getProjectDetail({ projectSn: store.sn }, showLoading);
	console.log("获取项目信息666", res);
	// console.log("获取工程类别", projectTypeEnum);
	projectData.value = res.result;
};
const setIntervalFn = (showLoading: boolean) => {
	getProjectInfo(showLoading);
	projectTypeEnum(showLoading);
};

onMounted(async () => {
	setIntervalFn(false);
	setInterval(() => {
		setIntervalFn(true);
	}, 30000);
});
</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: 10px 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: 10px;
		&-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>