|
|
@@ -85,8 +85,6 @@
|
|
|
>
|
|
|
</el-input>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<DeptSelect
|
|
|
v-model="postId"
|
|
|
placeholder="使用单位"
|
|
|
@@ -116,12 +114,17 @@
|
|
|
|
|
|
<!-- 卡片视图 -->
|
|
|
<div
|
|
|
+ ref="cardView"
|
|
|
class="card-view"
|
|
|
:style="{
|
|
|
height: isFullscreen
|
|
|
? 'calc(100vh - 155px)'
|
|
|
: 'calc(100vh - 240px)'
|
|
|
}"
|
|
|
+ v-infinite-scroll="loadMore"
|
|
|
+ :infinite-scroll-distance="50"
|
|
|
+ :infinite-scroll-disabled="loadingMore || deviceData.length >= total"
|
|
|
+ :infinite-scroll-immediate="false"
|
|
|
>
|
|
|
<el-row :gutter="10">
|
|
|
<el-col
|
|
|
@@ -190,6 +193,13 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <!-- 占位块：确保总数超过20条时能出现滚动条 -->
|
|
|
+ <div
|
|
|
+ v-if="deviceData.length > 0 && deviceData.length < total"
|
|
|
+ class="scroll-placeholder"
|
|
|
+ >
|
|
|
+ <i v-if="loadingMore" class="el-icon-loading"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
@@ -222,7 +232,7 @@
|
|
|
import { businessStatus } from '@/utils/dict/warehouse';
|
|
|
import DeptSelect from '@/components/CommomSelect/dept-selectNew.vue';
|
|
|
import { component } from 'vue-fullscreen';
|
|
|
-
|
|
|
+ import { getAssetList } from '@/api/ledgerAssets';
|
|
|
export default {
|
|
|
mixins: [dictMixins, tableColumnsMixin],
|
|
|
components: { DeptSelect, VueFullscreen: component },
|
|
|
@@ -258,7 +268,8 @@
|
|
|
cacheKeyUrl: 'ems-energy-monitoring-list',
|
|
|
deviceData: [],
|
|
|
categoryLevelId: '',
|
|
|
- rootCategoryLevelId: ''
|
|
|
+ rootCategoryLevelId: '',
|
|
|
+ loadingMore: false
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -323,19 +334,28 @@
|
|
|
this.deviceData = [];
|
|
|
}
|
|
|
},
|
|
|
- // 加载设备数据（模拟）
|
|
|
- loadDeviceData() {
|
|
|
- querySubstanceRunningMonitor({
|
|
|
- pageNum: 1,
|
|
|
- size: 9999,
|
|
|
+ // 加载设备数据
|
|
|
+ loadDeviceData(isLoadMore = false) {
|
|
|
+ if (this.loadingMore) return;
|
|
|
+ this.loadingMore = true;
|
|
|
+ if (!isLoadMore) {
|
|
|
+ this.pageNum = 1;
|
|
|
+ if (this.$refs.cardView) {
|
|
|
+ this.$refs.cardView.scrollTop = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getAssetList({
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ size: 20,
|
|
|
categoryLevelId: this.categoryLevelId,
|
|
|
rootCategoryLevelId: this.rootCategoryLevelId,
|
|
|
areaId: this.areaId,
|
|
|
keyWord: this.keyWord,
|
|
|
postId: this.postId
|
|
|
}).then((res) => {
|
|
|
+ this.loadingMore = false;
|
|
|
this.updateTime = dayjs().format('YYYY-M-D HH:mm:ss');
|
|
|
- this.deviceData = res.list.map((item) => {
|
|
|
+ const list = res.list.map((item) => {
|
|
|
let iotList = [];
|
|
|
if (item.iotPointDataList) {
|
|
|
item.iotPointDataList.forEach((element) => {
|
|
|
@@ -362,10 +382,23 @@
|
|
|
: iotList.filter((iotListItem, index) => index < 4);
|
|
|
return item;
|
|
|
});
|
|
|
+ if (isLoadMore) {
|
|
|
+ this.deviceData = this.deviceData.concat(list);
|
|
|
+ } else {
|
|
|
+ this.deviceData = list;
|
|
|
+ }
|
|
|
this.total = res.count;
|
|
|
console.log(res);
|
|
|
+ }).catch(() => {
|
|
|
+ this.loadingMore = false;
|
|
|
});
|
|
|
},
|
|
|
+ // 加载更多
|
|
|
+ loadMore() {
|
|
|
+ if (this.deviceData.length >= this.total) return;
|
|
|
+ this.pageNum++;
|
|
|
+ this.loadDeviceData(true);
|
|
|
+ },
|
|
|
// // 获取设备图标
|
|
|
// getDeviceIcon(type) {
|
|
|
// const iconMap = {
|
|
|
@@ -418,7 +451,7 @@
|
|
|
},
|
|
|
// 重置
|
|
|
handleReset() {
|
|
|
- this.name = '';
|
|
|
+ this.keyWord = '';
|
|
|
this.postId = '';
|
|
|
this.pageNum = 1;
|
|
|
this.loadDeviceData();
|
|
|
@@ -731,6 +764,14 @@
|
|
|
overflow-y: auto;
|
|
|
padding-right: 10px;
|
|
|
|
|
|
+ .scroll-placeholder {
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
.device-card {
|
|
|
height: 170px;
|
|
|
background: linear-gradient(
|
