zhgdlarge/src/views/sevenLargeScreen/vehicleManagement/bottom-right.vue

<template>
	<div class="bottomBox">
		<div class="select-right">
			<div class="day selected" @click="getDateData(1)" :class="checked == 1 ? 'active' : ''">今日记录</div>
			<div class="week selected" @click="getDateData(2)" :class="checked == 2 ? 'active' : ''">历史记录</div>
		</div>
		<div class="title"><i>出入场记录</i></div>
		<div class="content">
			<div class="tabList">
				<div>序号</div>
				<div>车牌号</div>
				<div>进出时间</div>
				<div>进出标识</div>
				<div>进出位置</div>
				<div>车辆颜色</div>
				<div>车辆类型</div>
				<div>进出场图片</div>
				<div>全景图照片</div>
			</div>

			<div class="listBox">
				<div v-for="(item, index) in vehicleData" class="listStyle" :key="item.id">
					<div>{{ index + 1 }}</div>
					<div>{{ item.carNumber }}</div>
					<div>{{ item.passTime }}</div>
					<div>{{ item.type==1?'出':'进' }}</div>
					<div>{{ item.location }}</div>
					<div>{{ item.carColor }}</div>
					<div>{{ item.carType ? carTypeList[item.carType-1].name:''}}</div>
					<div class="list-img">
						<el-image
							fit="contain"
							class="el-img"
							:src="item.imageUrl"
							:preview-src-list="[item.imageUrl]"
						>
						</el-image>
					</div>
					<div class="list-img">
						<el-image
							fit="contain"
							class="el-img"
							:src="item.panoramaUrl"
							:preview-src-list="[item.panoramaUrl]"
						>
						</el-image>
					</div>
				</div>
				<div class="notoDta" v-if="vehicleData.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { getEntryAndExitListApi } from "@/api/modules/vehicle";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL;
const carTypeList = ref([{
        value: '1',
        name: '白名单',
      },{
        value: '2',
        name: '黑名单',
      },{
        value: '3',
        name: '临时车',
    }])
const vehicleData = ref([] as any);
// 选中
const checked = ref(1);
const getDateData = (type: any) => {
	checked.value = type;
	getVehicleList();
}
const getVehicleList = async () => {
	const res: any = await getEntryAndExitListApi({
		projectSn: store.sn,
		type: checked.value
	});
	if (res.result) {
		vehicleData.value = res.result.records
		if(vehicleData.value && vehicleData.value.length > 0){
			vehicleData.value.map((item:any) => {
				item.imageUrl = BASEURL + '/' + item.imageUrl
				item.panoramaUrl = BASEURL + '/' + item.panoramaUrl
			})
		}
	}
};

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

<style lang="scss" scoped>
.bottomBox {
	width: 100%;
	height: 100%;
	position: relative;
	.select-right {
			width: 20%;
			display: flex;
			position: absolute;
			z-index: 10;
			color: #fff;
			font-size: 10px;
			text-align: center;
			line-height: 20px;
			left: 21%;
			top: 2.7%;
			.selected {
				height: 5%;
				background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
				background-size: 100% 100%;
				cursor: pointer;
			}
			.day {
				padding: 0 6%;
				margin-right: 5%;
				z-index: 99;
			}
			.week {
				padding: 0 6%;
				margin-right: 5%;
				z-index: 99;
			}
			.month {
				padding: 0 6%;
				z-index: 99;
			}
			.active {
				background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
				background-size: 100% 100%;
			}
		}
	.title {
		height: 10%;
		line-height: 35px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
		background-size: 100% 100%;
		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content {
		height: 88%;
		width: 100%;
		margin-top: 10px;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		.tabList {
			display: flex;
			width: 100%;
			height: 10%;
			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
			background-size: 100% 100%;
			// position: absolute;
			left: 75.5%;
			top: 75%;
			color: #ccc;
			font-size: calc(100vw * 14 / 1920);
			line-height: 30px;
			justify-content: space-around;
			div {
				text-align: center;
				width: 11%;
			}
		}
		.listBox {
			height: 300px;
			overflow-y: scroll;
			.listStyle {
				display: flex;
				justify-content: space-around;
				color: #fff;
				height: 10%;
				line-height: 25px;
				font-size: calc(100vw * 12 / 1920);
				.list-img {
					.el-img {
						width: 35%;
						img {
							display: flex;
							align-items: center;
							width: 100%;
							height: 100%;
						}
					}
				}
				div {
					text-align: center;
					width: 11%;
				}
			}
			.listStyle:hover {
				background: #091f3f;
			}
		}
	}
}
.notoDta {
		top: 45%;
		width: 20%;
		left: 39%;
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: calc(100vw * 14 / 1920);
			margin: -6% 37%;
			text-align: center;
		}
	}
</style>