中铁十一局 水位 安全帽-分页

src/api/modules/smartSafeHat.ts

@@ -67,6 +67,11 @@ 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/views/sevenLargeScreen/digitalConstruction/smartSafeHat/indexer.vue

@@ -428,32 +428,32 @@
 				</div>
 				<div class="alarm-bottom">
 					<Card title="报警信息">
-						<div class="bottom-left">
+					<div class="bottom-left">
-							<div class="left-content">
+						<div class="left-content">
-								<div class="tab-list">
+							<div class="tab-list">
-									<div style="width: 7%">序号</div>
+								<div style="width: 7%">序号</div>
-									<div style="width: 13%">人员名称</div>
+								<div style="width: 13%">人员名称</div>
-									<div style="width: 17%">围栏名称</div>
+								<div style="width: 17%">围栏名称</div>
-									<div style="width: 15%">设备序号</div>
+								<div style="width: 15%">设备序号</div>
-									<div style="width: 20%">报警时间</div>
+								<div style="width: 20%">报警时间</div>
-									<div style="width: 30%">报警信息</div>
+								<div style="width: 30%">报警信息</div>
-								</div>
-								<el-scrollbar class="list-box">
-									<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>
-										<div style="width: 17%">{{ item.fenceName }}</div>
-										<div style="width: 15%">{{ item.devSn }}</div>
-										<div style="width: 20%">{{ item.alarmTime }}</div>
-										<div style="width: 30%">{{ item.alarmInfo }}</div>
-									</div>
-									<div class="not-data" v-if="listData.length == 0">
-										<img src="@/assets/images/noData.png" alt />
-										<p>暂无数据</p>
-									</div>
-								</el-scrollbar>
 							</div>
+							<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>
+									<div style="width: 17%">{{ item.fenceName }}</div>
+									<div style="width: 15%">{{ item.devSn }}</div>
+									<div style="width: 20%">{{ item.alarmTime }}</div>
+									<div style="width: 30%">{{ item.alarmInfo }}</div>
+								</div>
+								<div class="not-data" v-if="listData.length == 0">
+									<img src="@/assets/images/noData.png" alt />
+									<p>暂无数据</p>
+								</div>
+							</el-scrollbar>
 						</div>
+					</div>
 					</Card>
 				</div>
 			</div>
@@ -465,6 +465,7 @@
 // import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
 import {
 	getAlarmRecordInfoApi,
+	getAlarmRecordInfoApiPage,
 	getHatDevOptionApi,
 	addstandardDevApi,
 	getRealtimeRecordInfo,
@@ -500,7 +501,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, onBeforeMount, watch, nextTick } from "vue";
 var mouseTool;
 var marker;
 var lineArr;
@@ -555,7 +556,7 @@ let addForm = ref({
 });
 let pagInfo = ref({
 	pageNo: 1, //页数
-	pageSize: 10, //条数
+	pageSize: 30, //条数
 	total: 0 //总条数
 });
 let pagLabor = ref({
@@ -573,7 +574,7 @@ let queryInfo = ref({
 	devSn: ""
 });
 let alarmDevSn = ref(" " as any);
-let listData = ref([]);
+let listData = ref([]) as any;
 let Popup = ref({
 	type: "add",
 	show: false
@@ -1309,24 +1310,70 @@ function getCrewListData() {
 		}
 	});
 }
+
+const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
+const moreScroll = ref(true as any);
+
 // 智能安全帽--查询报警信息
 function getProgressListData() {
 	let data = {
-		// pageNo: pagInfo.value.pageNo,
+		pageNo: pagInfo.value.pageNo,
-		// pageSize: pagInfo.value.pageSize,
+		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) {
+	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;

src/views/sevenLargeScreen/greenConstruct/sewageMonitor/leftTop.vue

@@ -137,11 +137,16 @@ const getMeterTotal = async () => {
 // let alarmData6 = ref({}) as any;
 // let alarmData7 = ref({}) as any;
 
+import { MapViewdata } from "@/stores/modules/map3D";
+const EntityMap = MapViewdata();
+
 let realTimeData = ref({} as any);
 const getRealTimeData = async () => {
 	const res: any = await getSewageNewestData({ projectSn: store.sn, devSn: selectDay.value});
 	if (res.result) {
 		realTimeData.value = res.result;
+		EntityMap.waterlevel = res.result.waterLevel
+		EntityMap.conductivity = res.result.conductivity
 	}
 	console.log("获取实时监测", res);
 };

src/views/sevenLargeScreen/greenConstruct/sewageMonitor/rightTop.vue

@@ -59,7 +59,7 @@
 					<div class="num">
 						<div class="text" v-if="COMPANY == 'ztsyj'">
 							{{ EntityMap.waterlevel
-							|| 0 }}
+							|| 0 }} 
 						</div>
 						<div class="text" v-else>{{ meterRead.waterTemperature || "--" }}</div>
 						<div class="unit" style="margin-top: 12%">{{COMPANY == 'ztsyj' ? 'm' : '°C' }}</div>
@@ -127,6 +127,9 @@ const sewageWarnThreshold = async () => {
 onMounted(async () => {
 	mitts.on("sewageMonitorId", e => {
 		// console.log("当前设备对应的devSn", e);
+		// console.log("============EntityMap===========", EntityMap.waterlevel);
+		// console.log("============EntityMap===========", EntityMap.conductivity);
+
 		meterId.value = e;
 		getMeterTotal();
 		sewageWarnThreshold();