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

src/api/modules/smartSafeHat.ts

@@ -72,6 +72,10 @@ export const getSuroundInfoApi = (params: {}) => {
 export const getAlarmRecordInfoApi = (params: {}) => {
 	return http.get(BASEURL + `/xmgl/safetyHatAlarm/list`, params);
 };
+// 智能安全帽--分页查询报警信息
+export const getAlarmRecordInfoApiPage = (params: {}) => {
+	return http.get(BASEURL + `/xmgl/safetyHatAlarm/page`, params);
+};
 // 智能安全帽--查询实时数据信息
 export const getRealtimeDataApi = (params: {}) => {
 	return http.get(BASEURL + `/xmgl/safetyHatData/list`, params);

src/routers/index.ts

@@ -67,9 +67,9 @@ router.beforeEach(async (to, from, next) => {
 	NProgress.start();
 
 	// 2.动态设置标题
-	const title = import.meta.env.VITE_GLOB_APP_TITLE;
+	// const title = import.meta.env.VITE_GLOB_APP_TITLE;
 	// document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
-	document.title = to.meta.title ? `${to.meta.title} ` : title;
+	// document.title = to.meta.title ? `${to.meta.title} ` : title;
 	// 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
 	if (to.path === LOGIN_URL) {
 		console.log("判断是访问登陆页，有:", from.fullPath);

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

@@ -426,7 +426,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="refScrollbarer">
 									<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>
@@ -498,6 +498,7 @@ import moment from "moment";
 // import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
 import {
 	getAlarmRecordInfoApi,
+	getAlarmRecordInfoApiPage,
 	getHatDevOptionApi,
 	getEnterpriseTreeApi,
 	addstandardDevApi,
@@ -609,7 +610,7 @@ let addForm = ref({
 });
 let pagInfo = ref({
 	pageNo: 1, //页数
-	pageSize: 10, //条数
+	pageSize: 30, //条数
 	total: 0 //总条数
 });
 let pagLabor = ref({
@@ -1504,24 +1505,71 @@ function flattenTree(tree) {
 	return result;
 }
 
+const refScrollbarer = 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);
+
+	refScrollbarer.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;

src/views/sevenLargeScreen/indexL.vue

@@ -53,7 +53,7 @@
 							<div class="loginOutIcon">
 								<img src="@/assets/images/dustNoise/jumpIcon.png" />
 							</div>
-							<div class="userName">{{ [2, 7].includes(store.accountType) ? '企业前台' : '项目后台' }}</div>
+							<div class="userName">项目后台</div>
 						</div>
 						<div class="loginOut" @click="loginOut">
 							<div class="loginOutIcon">
@@ -175,6 +175,7 @@ const getProjectInfo = async () => {
 	const res: any = await getTaskTimeDetail({ projectSn: store.sn });
 	console.log("获取项目信息", res);
 	projectTimeInfo.value = res.result;
+	document.title = res.result.companyName;
 	projectPassDay.value = calculateDaysPassed(projectTimeInfo.value.contractPeriodStartTime);
 };
 
@@ -685,8 +686,10 @@ function jumpBgd() {
 	} else if (COMPANY === "as") {
 		window.location.replace("http://182.90.224.237:15551/#/login?token=" + store.token);
 	} else if (envList.includes(COMPANY)) {
-		window.location.replace(BASEURL + "/#/login?token=" + store.token);
-		// window.location.replace("http://192.168.34.216:8081" + "/#/login?token=" + store.token);
+		const isCompany = [2, 7].includes(store.accountType);
+		const str = isCompany ? "&projectSn=" + store.sn : "";
+		window.location.replace(BASEURL + "/#/login?token=" + store.token + str);
+		// window.location.replace("http://192.168.34.216:8081" + "/#/login?token=" + store.token + str);
 	} else {
 		// 新项目通用(百色服务器)
 		window.location.replace("http://101.43.164.214:11111/#/login?token=" + store.token);