|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
<!-- 建议放在外层 -->
|
|
|
-<!-- <u-navbar
|
|
|
+ <!-- <u-navbar
|
|
|
title="历史数据"
|
|
|
@leftClick="devicemenuShow"
|
|
|
:safeAreaInsetTop="true"
|
|
|
@@ -11,9 +11,9 @@
|
|
|
</view>
|
|
|
</u-navbar> -->
|
|
|
<!-- 侧边栏 -->
|
|
|
-<!-- <view v-show="menushow" class="menupage">
|
|
|
+ <view v-show="menushow" class="menupage">
|
|
|
<DeviceMenu @menuClick="menuClick"></DeviceMenu>
|
|
|
- </view> -->
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 历史数据列表页 -->
|
|
|
<view v-if="!menushow" class="main">
|
|
|
@@ -184,12 +184,15 @@
|
|
|
</u-list>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view v-if="loading"> 加载中...... </view>
|
|
|
+ <view v-else-if="!hasMoreData"> 没有更多数据了 </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import api from "@/api/api";
|
|
|
import dayjs from "dayjs";
|
|
|
+import DeviceMenu from "../../pages/device/devicemenu/devicemenu";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -251,44 +254,47 @@ export default {
|
|
|
skip: 8, //时间间隔
|
|
|
dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
|
|
historyData: [], //历史数据
|
|
|
+ loading: false, // 是否正在加载数据
|
|
|
+ hasMoreData: true, // 是否还有更多数据可以加载
|
|
|
+ pageNo: 1, // 当前页码（用于请求数据时分页）
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
- props: ["showColum", 'deviceType'],
|
|
|
+ components: {
|
|
|
+ DeviceMenu,
|
|
|
+ },
|
|
|
+ props: ["showColum", "deviceType"],
|
|
|
watch: {
|
|
|
showColum(data) {
|
|
|
this.colums = data;
|
|
|
},
|
|
|
- deviceType: {
|
|
|
- async handler (data) {
|
|
|
- if(data){
|
|
|
- this.TabCur = data;
|
|
|
- this.curlist = this.deviceList[this.TabCur];
|
|
|
-
|
|
|
- if (this.curlist == null) {
|
|
|
- this.curlist = [];
|
|
|
- }
|
|
|
- // 选择设备分类，重新获取数据
|
|
|
- await this.loadData(this.TabCur);
|
|
|
- this.$emit('setMenushow', {
|
|
|
- menushow: false
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
+ deviceType: {
|
|
|
+ async handler(data) {
|
|
|
+ if (data) {
|
|
|
+ this.TabCur = data;
|
|
|
+ this.curlist = this.deviceList[this.TabCur];
|
|
|
+
|
|
|
+ if (this.curlist == null) {
|
|
|
+ this.curlist = [];
|
|
|
+ }
|
|
|
+ // 选择设备分类，重新获取数据
|
|
|
+ await this.loadData(this.TabCur);
|
|
|
+ this.$emit("setMenushow", {
|
|
|
+ menushow: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
this.colums = this.showColum;
|
|
|
- const startTime =new Date().getTime() - 3600 * 1000 * 24 * 30;
|
|
|
+ const startTime = new Date().getTime() - 3600 * 1000 * 24 * 30;
|
|
|
const endTime = new Date();
|
|
|
this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
|
|
|
this.EndTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.TabCur = this.deviceType;
|
|
|
+ this.TabCur = this.deviceType;
|
|
|
},
|
|
|
methods: {
|
|
|
loadData(type) {
|
|
|
@@ -359,8 +365,8 @@ export default {
|
|
|
ttime_end: this.EndTime,
|
|
|
gdeviceid: this.deviceID,
|
|
|
skip: this.skip,
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 10000,
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: 10,
|
|
|
strtype: this.TabCur,
|
|
|
};
|
|
|
new Promise((resolve, reject) => {
|
|
|
@@ -386,6 +392,27 @@ export default {
|
|
|
item.readData.midGateOpen = "关闭";
|
|
|
}
|
|
|
});
|
|
|
+ this.pageNo = response.data.result.datalist.current;
|
|
|
+ // if (infolist.length == 0 && this.pageNo == 1) {
|
|
|
+ // // console.log('首次加载没数据');
|
|
|
+ // this.noData = false;
|
|
|
+ // this.historyData = [];
|
|
|
+ // } else if (infolist.length < 3 && this.pageNo == 1) {
|
|
|
+ // // console.log('首次加载有数据，但少于4条');
|
|
|
+ // this.noData = true;
|
|
|
+ // this.historyData = infolist;
|
|
|
+ // } else if (infolist.length !== 0 && this.pageNo == 1) {
|
|
|
+ // // console.log('首次加载有数据');
|
|
|
+ // this.noData = false;
|
|
|
+ // this.historyData = infolist;
|
|
|
+ // } else if (infolist.length !== 0 && this.pageNo > 1) {
|
|
|
+ // // console.log('上拉加载更多数据');
|
|
|
+ // this.noData = false;
|
|
|
+ // this.historyData = this.historyData.concat(infolist);
|
|
|
+ // } else if (infolist.length == 0 && this.pageNo > 1) {
|
|
|
+ // // console.log('上拉加载没有更多数据了');
|
|
|
+ // this.noData = true;
|
|
|
+ // }
|
|
|
} else {
|
|
|
resolve(response);
|
|
|
}
|
|
|
@@ -395,12 +422,34 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ async loadMoreData() {
|
|
|
+ if (this.loading || !this.hasMoreData) return;
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ // 如果新数据为空，则表示没有更多数据了
|
|
|
+ if (this.historyData.length === 0) {
|
|
|
+ this.hasMoreData = false;
|
|
|
+ } else {
|
|
|
+ // 将新数据追加到数据列表中
|
|
|
+ this.historyData = [...this.historyData, ...newData];
|
|
|
+ // 更新页码以便下次加载下一页数据
|
|
|
+ this.pageNo += 1;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ // 处理请求错误
|
|
|
+ console.error("加载数据失败:", error);
|
|
|
+ } finally {
|
|
|
+ // 无论请求成功还是失败，都要将加载状态设置为false
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
devicemenuShow(e) {
|
|
|
- this.menushow = !this.menushow;
|
|
|
- console.log( this.menushow,'dainjichengg成都多大事');
|
|
|
+ this.menushow = !this.menushow;
|
|
|
+ console.log(this.menushow, "dainjichengg成都多大事");
|
|
|
},
|
|
|
menuClick(id) {
|
|
|
this.TabCur = id;
|
|
|
+ console.log(this.TabCur);
|
|
|
// 显示该分类的数据
|
|
|
this.curlist = this.deviceList[this.TabCur];
|
|
|
if (this.curlist == null) {
|
|
|
@@ -414,6 +463,11 @@ export default {
|
|
|
destroyed() {
|
|
|
// 停止定时器
|
|
|
},
|
|
|
+ onReachBottom() {
|
|
|
+ // uni-app提供的页面滚动到底部钩子函数
|
|
|
+ console.log("上拉加载更多数据");
|
|
|
+ this.loadMoreData();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
