zhgdyun/src/views/sevenLargeScreen/vehicleManagement/bottom.vue

<template>
	<div class="bottomBox">
		<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.dev }}</div> -->
					<div>{{ item.entrance }}</div>
					<div>{{ item.entranceTime }}</div>
					<div>{{ item.exit }}</div>
					<div>{{ item.exitTime }}</div>
					<div>{{ item.releaseOperation }}</div>
					<div>{{ item.vehicleStateName }}</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 { onMounted, ref } from "vue";
// import * as echarts from "echarts";
import { getEntryAndExitRecordsApi } from "@/api/modules/vehicle";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// import Card from "@/components/card.vue";
const list = reactive([
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},

	{
		carNum: "贵A52132H",
		dev: "未知",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		dev: "未知",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		dev: "未知",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		dev: "未知",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	},
	{
		carNum: "贵A52132H",
		dev: "未知",
		own: "东南口",
		oWntime: "2023-01-01 12:00:00",
		goOwn: "西南口",
		goTime: "2023-01-01 12:00:00",
		dev: "正常放行",
		status: "已出场"
	}
]);

let vehicleData = ref([] as any);
const getVehicleList = async () => {
	const res: any = await getEntryAndExitRecordsApi({
		projectSn: store.sn
	});
	if (res.result) {
		vehicleData.value = res.result;
		console.log("车辆管理下反列表", res.result);
	}
};

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

<style lang="scss" scoped>
.bottomBox {
	width: 100%;
	height: 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: 10%;
			}
		}
		.listBox {
			height: 300px;
			overflow: scroll;
			.listStyle {
				display: flex;
				justify-content: space-around;
				color: #fff;
				height: 10%;
				line-height: 25px;
				font-size: calc(100vw * 12 / 1920);
				div {
					text-align: center;
					width: 10%;
				}
			}
			.listStyle:hover {
				background: #091f3f;
			}
		}
	}
}
.notoDta {
		top: 73%;
		width: 12%;
		left: 44%;
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: calc(100vw * 14 / 1920);
			margin: -6% 37%;
		}
	}
</style>