智能安全帽 报警消息模块添加分页功能

src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue

@@ -365,7 +365,7 @@
 									<div style="width: 20%">报警时间</div>
 									<div style="width: 30%">报警信息</div>
 								</div>
-								<el-scrollbar class="list-box">
+								<el-scrollbar class="list-box" @scroll="handleScroll" ref="refScrollbar">
 									<div v-for="(item, index) in listData" class="list-style" :key="item.id">
 										<div style="width: 7%">{{ index + 1 }}</div>
 										<div style="width: 13%">{{ item.workerName }}</div>
@@ -392,6 +392,7 @@
 // import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
 import {
 	getAlarmRecordInfoApi,
+	getAlarmRecordInfoApiPage,
 	getHatDevOptionApi,
 	addstandardDevApi,
 	getRealtimeRecordInfo,
@@ -429,7 +430,7 @@ import type { FormInstance, FormRules } from "element-plus";
 import Card from "@/components/card.vue";
 import * as echarts from "echarts";
 const store = GlobalStore();
-import { computed, reactive, ref, onMounted, onBeforeMount, watch } from "vue";
+import { computed, reactive, ref, onMounted, nextTick, onBeforeMount, watch } from "vue";
 var mouseTool;
 var marker;
 var lineArr;
@@ -484,7 +485,7 @@ let addForm = ref({
 });
 let pagInfo = ref({
 	pageNo: 1, //页数
-	pageSize: 10, //条数
+	pageSize: 30, //条数
 	total: 0 //总条数
 });
 let pagLabor = ref({
@@ -1251,24 +1252,72 @@ function getCrewListData() {
 		}
 	});
 }
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+const moreScroll = ref(true as any);
+
 // 智能安全帽--查询报警信息
 function getProgressListData() {
 	let data = {
-		// pageNo: pagInfo.value.pageNo,
-		// pageSize: pagInfo.value.pageSize,
+		pageNo: pagInfo.value.pageNo,
+		pageSize: pagInfo.value.pageSize,
 		devSns: alarmDevSn.value,
 		type: 1, // 设备类型(1：安全帽;2:安全带)
 		projectSn: store.sn
 	};
-	getAlarmRecordInfoApi(data).then(res => {
+	getAlarmRecordInfoApiPage(data).then(res => {
+		moreScroll.value = false;
 		console.log("👇智能安全帽--查询报警信息");
 		console.log(res);
 		if (res.code == 200) {
-			listData.value = res.result;
+			listData.value = listData.value.concat(res.result.records);
+			// listData.value = res.result.records
+			console.log("listData.value=============", listData.value);
+
 			pagInfo.value.total = res.result.total;
+			nextTick(() => {
+				moreScroll.value = true;
+			});
 		}
 	});
 }
+
+// 新智能安全帽-分页
+function handleScroll(event) {
+	console.log("event", event);
+
+	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
+		const scrollTop = e.target.scrollTop;
+		const scrollHeight = e.target.scrollHeight;
+		const clientHeight = e.target.clientHeight;
+
+		console.log("event", event);
+		// console.log("e.target.scrollTop", e.target.scrollTop);
+		// console.log("e.target.scrollHeight", e.target.scrollHeight);
+		// console.log("e.target.clientHeight", e.target.clientHeight);
+
+		// console.log("moreScroll.value", moreScroll.value);
+
+		// 向上加载更多
+		if (scrollTop >= scrollHeight - clientHeight - 1) {
+			if (moreScroll.value) {
+				console.log("===================加载第二页===================");
+				pagInfo.value.pageNo += 1;
+				console.log("pagInfo.value.pageNo", pagInfo.value.pageNo);
+				moreScroll.value = false;
+				getProgressListData();
+			}
+		}
+	});
+
+	// const { scrollTop, scrollHeight, clientHeight } = event.target;
+	// // 判断是否滚动到底部
+	// if (scrollTop + clientHeight >= scrollHeight) {
+	// 	// 触发滚动到底部的事件
+	// 	console.log("===================加载第二页===================");
+	// }
+}
+
+
 function fenceNameChange(e) {
 	console.log("围栏名称", e);
 	fenceSearch.value = e;