zhgdlarge/src/views/sevenLargeScreen/vehicleManagement/topRight.vue

<template>
	<div class="topLeFtBox">
		<div class="title"><i>出场车辆</i></div>
		<div class="content" v-if="entryCarData">
			<div class="leftImg">
				<div class="imgDiv">
					<!-- 全景图 panoramaUrl -->
					<img v-if="entryCarData.panoramaUrl" :src="BASEURL + '/image/' + entryCarData.panoramaUrl" alt="" />
					<img v-else src="@/assets/images/vehicleManagement/goCar.png" alt="" />
				</div>
			</div>
			<div class="rightMenu">
				<!-- <div class="searchInpu">
					<el-input class="inputDeep" v-model="input4" placeholder="">
						<template #prefix>
							<el-icon class="el-input__icon"><search /></el-icon>
						</template>
					</el-input>
				</div> -->
				<!-- 车牌图片 imageurl -->
				<div class="carNumOne">
					<img v-if="entryCarData.imageUrl" :src="BASEURL + '/image/' + entryCarData.imageUrl" alt="" />
					<img v-else src="@/assets/images/vehicleManagement/goCarNum.png" alt="" />
				</div>
				<div class="carNumTwo">
					<div>识别车牌号</div>
					<div class="styleColor">{{ entryCarData.carNumber }}</div>
				</div>
				<div class="carNumTwo">
					<div>车辆类型</div>
					<!-- 车辆类型 1白名单，2黑名单，3临时车辆 -->
					<div class="styleColor">{{ carTypeEnum[entryCarData.carType] }}</div>
				</div>
				<div class="carNumTwo">
					<div>出场时间</div>
					<div class="styleColor">{{ entryCarData.passTime }}</div>
				</div>
			</div>
		</div>
		<div class="content" v-else>
			<div class="notoDta" >
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
// import * as echarts from "echarts";
import { getCarPassRecordApi } from "@/api/modules/vehicle";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const BASEURL = import.meta.env.VITE_API_URL;
// let input4 = ref("" as any);
const store = GlobalStore();
// 定义车辆类型枚举类 1 白名单 ，2 黑名单，3 临时车辆
const carTypeEnum = ref({
	1: "白名单",
	2: "黑名单",
	3: "临时车辆"
});
let entryCarData = ref(null as any);
const getExitList = async () => {
	const res: any = await getCarPassRecordApi({
		type: 1,
		projectSn: store.sn
	});
	if (res.result) {
		entryCarData.value = res.result;
		console.log("右侧入场车辆数据", res.result);
	}
};

onMounted(async () => {
	await getExitList();
});
</script>

<style lang="scss" scoped>
.topLeFtBox {
	width: 100%;
	height: 100%;
	.title {
		height: 10%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 90%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		display: flex;
		.leftImg {
			width: 80%;
			.imgDiv {
				margin: 3% 3%;
				width: 100%;
				height: 90%;
				background: url("@/assets/images/vehicleManagement/leftImg.png") no-repeat;
				background-size: 100% 100%;
				img {
					width: 91%;
					height: 92%;
					margin: 2% 4%;
				}
			}
		}
		.rightMenu {
			width: 25%;
			margin: 3% 2% 3% 5%;
			.searchInpu {
				margin-top: -3%;
			}
			.carNumOne {
				margin-top: 5%;
				height: 21%;
				width: 100%;
				background: url("@/assets/images/vehicleManagement/carNumImg.png") no-repeat;
				background-size: 100% 100%;
				img {
					width: 91%;
					height: 86%;
					margin: 2% 4%;
				}
			}
			.carNumTwo {
				margin-top: 7%;
				width: 100%;
				height: 18%;
				background: url("@/assets/images/vehicleManagement/carContent.png") no-repeat;
				background-size: 100% 100%;
				div {
					margin-left: 10%;
					padding-top: 3%;
					font-size: calc(100vw * 14 / 1920);
				}
				.styleColor {
					color: #4ac0f3;
					font-size: calc(100vw * 16 / 1920);
				}
			}
		}
	}
}
.inputDeep {
	:deep(.el-input__wrapper) {
		box-shadow: 25 60 128 0px var(--el-input-border-color, var(--el-border-color)) inset;
		border: 1px solid #668ddd;
		cursor: default;
	}
}

.notoDta {
	top: 30%;
	width: 12%;
	left: 70%;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}

::v-deep .el-input__prefix {
	color: #4ac0f3;
}
::v-deep .el-input__wrapper {
	background: transparent;
}
::v-deep .el-input__inner {
	color: #fff;
}
</style>