fix: BUG修改

src/views/sevenLargeScreen/safetyManagement/smokeSensor/smoke-bottom-left.vue

@@ -46,14 +46,13 @@ const deviceStatusOptions = ref([
 	{ label: "心跳", value: 2 },
 ]) as any;
 
-let list = ref([]);
+let list = ref([] as any);
 const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
-const ScrollbarTop = ref(0);
 
 let moreScroll = ref(true as any);
 
 let pageNo = ref(1 as any);
-let pageSize = ref(20 as any);
+let pageSize = ref(30 as any);
 
 // 获取烟感监测告警监测记录列表
 const getSmokeAlarmRecordList = async () => {
@@ -96,7 +95,6 @@ onMounted(() => {
 				getMoreSmokeRecordList();
 			}
 		}
-		ScrollbarTop.value = scrollTop;
 	});
 	getSmokeAlarmRecordList();
 });
@@ -124,7 +122,7 @@ onMounted(() => {
 	padding: 2%;
 	position: relative;
 	.list-content {
-		height: 95%;
+		height: 100%;
 		width: 100%;
 		// background: url("@/assets/images/cardImg.png") no-repeat;
 		// background-size: 100% 100%;
@@ -148,7 +146,7 @@ onMounted(() => {
 			}
 		}
 		.list-box {
-			height: 100%;
+			height: 92%;
 			.list-style:nth-child(even) {
 				background: rgba(39, 88, 192, 0.06);
 			}

src/views/sevenLargeScreen/vehicleManagement/bottom-left.vue

@@ -23,7 +23,7 @@ const store = GlobalStore();
 const realCountTotal = ref({} as any);
 //获取出入场车辆统计
 const getMemberCareList = async () => {
-	const res: any = await getEntryAndExitCountApi({ projectSn: store.sn, isOpen: 1 });
+	const res: any = await getEntryAndExitCountApi({ projectSn: store.sn });
 	console.log("获取出入场车辆统计", res);
 	if (res.success) {
 		realCountTotal.value = res.result;

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

@@ -17,22 +17,22 @@
 				<div>进出场图片</div>
 				<div>全景图照片</div>
 			</div>
-
+			<el-scrollbar class="listBox" ref="refScrollbar">
-			<div class="listBox">
+				<template v-if="vehicleData.length > 0">
 					<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.type == 1 ? "出" : "进" }}</div>
 						<div>{{ item.location }}</div>
 						<div>{{ item.carColor }}</div>
-					<div>{{ item.carType ? carTypeList[item.carType-1].name:''}}</div>
+						<div>{{ item.carType ? carTypeList[item.carType - 1].name : "" }}</div>
 						<div class="list-img">
 							<el-image
 								fit="contain"
 								class="el-img"
-							:src="item.imageUrl"
+								:src="BASEURL + '/image/' + item.imageUrl"
-							:preview-src-list="[item.imageUrl]"
+								:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
 							>
 							</el-image>
 						</div>
@@ -40,17 +40,18 @@
 							<el-image
 								fit="contain"
 								class="el-img"
-							:src="item.panoramaUrl"
+								:src="BASEURL + '/image/' + item.panoramaUrl"
-							:preview-src-list="[item.panoramaUrl]"
+								:preview-src-list="[BASEURL + '/image/' + item.panoramaUrl]"
 							>
 							</el-image>
 						</div>
 					</div>
+				</template>
 				<div class="notoDta" v-if="vehicleData.length == 0">
 					<img src="@/assets/images/noData.png" alt="" />
 					<p>暂无数据</p>
 				</div>
-			</div>
+			</el-scrollbar>
 		</div>
 	</div>
 </template>
@@ -61,41 +62,71 @@ import { getEntryAndExitListApi } from "@/api/modules/vehicle";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 const BASEURL = import.meta.env.VITE_API_URL;
-const carTypeList = ref([{
+const pageNo = ref(1 as any);
-        value: '1',
+const pageSize = ref(10 as any);
-        name: '白名单',
+const moreScroll = ref(true as any);
-      },{
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
-        value: '2',
+const carTypeList = ref([
-        name: '黑名单',
+	{
-      },{
+		value: "1",
-        value: '3',
+		name: "白名单"
-        name: '临时车',
+	},
-    }])
+	{
+		value: "2",
+		name: "黑名单"
+	},
+	{
+		value: "3",
+		name: "临时车"
+	}
+]);
 const vehicleData = ref([] as any);
 // 选中
 const checked = ref(1);
 const getDateData = (type: any) => {
 	checked.value = type;
-	getVehicleList();
+	pageNo.value = 1;
-}
+	moreScroll.value = true;
-const getVehicleList = async () => {
+	refScrollbar.value.wrapRef.scrollTop = 0; // 滚动条置顶
+	getVehicleList("search");
+};
+const getVehicleList = async (tip: any) => {
 	const res: any = await getEntryAndExitListApi({
 		projectSn: store.sn,
-		type: checked.value
+		timeType: checked.value,
+		pageNo: pageNo.value,
+		pageSize: pageSize.value
 	});
 	if (res.result) {
-		vehicleData.value = res.result.records
+		if (tip == "more") {
-		if(vehicleData.value && vehicleData.value.length > 0){
+			vehicleData.value = vehicleData.value.concat(res.result.records);
-			vehicleData.value.map((item:any) => {
+		} else {
-				item.imageUrl = BASEURL + '/' + item.imageUrl
+			vehicleData.value = res.result.records;
-				item.panoramaUrl = BASEURL + '/' + item.panoramaUrl
+		}
-			})
+		if (res.result.pages == pageNo.value) {
+			moreScroll.value = false;
+		} else {
+			pageNo.value = pageNo.value + 1;
 		}
 	}
 };
 
 onMounted(async () => {
-	await getVehicleList();
+	// console.log("滚动容器", refScrollbar.value);
+	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+		// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight) {
+			// console.log("加载更多");
+			if (moreScroll.value) {
+				getVehicleList("more");
+			}
+		}
+	});
+	await getVehicleList("search");
 });
 </script>
 
@@ -178,24 +209,17 @@ onMounted(async () => {
 			}
 		}
 		.listBox {
-			height: 300px;
+			height: 80%;
-			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%;
+						width: 50px;
-						img {
+						height: 25px;
-							display: flex;
-							align-items: center;
-							width: 100%;
-							height: 100%;
-						}
 					}
 				}
 				div {
@@ -224,5 +248,5 @@ onMounted(async () => {
 		margin: -6% 37%;
 		text-align: center;
 	}
-	}
+}
 </style>