From df4e3452ecdc510faa09c7310ba4857ed432553d Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 12 Apr 2025 17:47:19 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/Home/HomeLeft/MachineNestList.vue | 74 ++++++++++++++++++++++++++-----------
1 files changed, 52 insertions(+), 22 deletions(-)
diff --git a/src/views/Home/HomeLeft/MachineNestList.vue b/src/views/Home/HomeLeft/MachineNestList.vue
index 34dc865..f629fd2 100644
--- a/src/views/Home/HomeLeft/MachineNestList.vue
+++ b/src/views/Home/HomeLeft/MachineNestList.vue
@@ -1,11 +1,23 @@
<!-- 机巢详情列表 -->
<template>
<common-title title="机巢概况" text="返回" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
+
<div class="machine-nest-list">
<MachineNestTotal @searchNickName="handleSearch" />
<div class="content-wrapper">
- <div class="table-list">
- <div :class="[index % 2 ==1 ? 'table-itemeven':'table-item']" v-for="(item,index) in tableList" :key="index">
+ <div
+ class="table-list"
+ v-if="tableList.length > 0"
+ infinite-scroll-distance="6"
+ v-infinite-scroll="loadMore"
+ :infinite-scroll-disabled="busy"
+ infinite-scroll-immediate="true"
+ >
+ <div
+ :class="[index % 2 == 1 ? 'table-itemeven' : 'table-item']"
+ v-for="(item, index) in tableList"
+ :key="index"
+ >
<img src="/src/assets/images/home/homeLeft/machinenestlist-sign.png" alt="" />
<div class="middle">
<div class="title">{{ item.nickname }}</div>
@@ -19,14 +31,17 @@
>个 飞行时长：<span>{{ item.hour }}</span
>h
</div>
- <div class="numbering">23HK1453</div>
</div>
- <div class="right" :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE'? 'offine' :'freetime' " @click="signMachineNestClick(item)">
+ <div
+ class="right"
+ :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE' ? 'offine' : 'freetime'"
+ @click="signMachineNestClick(item)"
+ >
{{ item.status === 'OFFLINE' ? '离线中' : item.status === 'WORKING' ? '作业中' : '空闲中' }}
</div>
</div>
</div>
- <div class="pagination-container">
+ <!-- <div class="pagination-container">
<el-pagination
v-model:current-page="pageParams.current"
v-model:page-size="pageParams.size"
@@ -37,7 +52,7 @@
@current-change="handleCurrentChange"
background
/>
- </div>
+ </div> -->
</div>
</div>
</template>
@@ -49,7 +64,9 @@
import { useStore } from 'vuex'
const store = useStore()
-
+const isMore = ref(true)
+// 控制加载状态
+const busy = ref(false)
const searchText = ref('')
// 分页参数
const pageParams = ref({
@@ -69,11 +86,18 @@
}
selectDevicePage(params).then(res => {
if (res.data.code !== 0) return
- tableList.value = res.data.data.records
- pageParams.value.total = res.data.data.total
+ if (res.data.data.records.length === 0) return (isMore.value = false)
+ pageParams.value.current += 1
+ tableList.value = [...tableList.value, ...res.data.data.records]
+ busy.value = false
})
}
-
+// 加载更多数据
+const loadMore = async () => {
+ busy.value = true
+ if (!isMore.value) return
+ getTableList()
+}
// 搜索数据
const handleSearch = name => {
searchText.value = name
@@ -129,6 +153,13 @@
font-weight: 500;
font-size: 16px;
color: #fff;
+ // 滚动条
+ &::-webkit-scrollbar {
+ width: 0;
+ display: none;
+ }
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
.table-item {
display: flex;
justify-content: space-between;
@@ -136,7 +167,7 @@
padding-top: 6px;
margin-top: 10px;
- height: 120px;
+ height: 100px;
background: linear-gradient(
90deg,
rgba(0, 122, 255, 0) 0%,
@@ -144,7 +175,7 @@
rgba(0, 73, 153, 0) 100%
);
}
- .table-itemeven {
+ .table-itemeven {
display: flex;
justify-content: space-between;
justify-items: center;
@@ -152,7 +183,6 @@
margin-top: 10px;
height: 120px;
-
}
img {
width: 45px;
@@ -182,15 +212,15 @@
cursor: pointer;
font-size: 16px;
}
- // 离线中
- .offine {
- color: #fff;
- }
- // 空闲中
- .freetime{
- color: #FFA768;
- }
- // 作业中
+ // 离线中
+ .offine {
+ color: #fff;
+ }
+ // 空闲中
+ .freetime {
+ color: #ffa768;
+ }
+ // 作业中
.atcive {
color: #04f020;
background: linear-gradient(90deg, rgba(12, 45, 92, 1) 0%, #154671 50%, rgba(12, 45, 92, 1) 100%),
--
Gitblit v1.9.3