From 9650dd9f1d1088118af59ded79f5cce18fdb7280 Mon Sep 17 00:00:00 2001
From: sean.zhou <sean.zhou@dji.com>
Date: Fri, 24 Feb 2023 19:36:13 +0800
Subject: [PATCH] Fixed some issues
---
src/pages/page-web/projects/dock.vue | 86 ++++++++++++++++++++++++++++++-------------
1 files changed, 60 insertions(+), 26 deletions(-)
diff --git a/src/pages/page-web/projects/dock.vue b/src/pages/page-web/projects/dock.vue
index 0575267..6e4febf 100644
--- a/src/pages/page-web/projects/dock.vue
+++ b/src/pages/page-web/projects/dock.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="height-100">
<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
<a-row>
<a-col :span="1"></a-col>
@@ -7,23 +7,25 @@
<a-col :span="1"></a-col>
</a-row>
</div>
- <div v-if="docksData.data.length !== 0">
- <div v-for="dock in docksData.data" :key="dock.device_sn">
- <div v-if="dock?.children" class="panel" style="padding-top: 5px;" @click="selectDock(dock)">
- <div class="title">
- <a-tooltip :title="dock.nickname">
- <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ dock.nickname }}</div>
- </a-tooltip>
- </div>
- <div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
- <span><RocketOutlined /></span>
- <span class="ml5">{{ dock.children?.nickname }}</span>
+ <div class="scrollbar height-100" :style="{ height: scorllHeight + 'px'}">
+ <div id="data" class=" uranus-scrollbar" v-if="docksData.data.length !== 0" @scroll="onScroll">
+ <div v-for="dock in docksData.data" :key="dock.device_sn">
+ <div class="panel" style="padding-top: 5px;" @click="selectDock(dock)">
+ <div class="title">
+ <a-tooltip :title="dock.nickname">
+ <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{ dock.nickname }}</div>
+ </a-tooltip>
+ </div>
+ <div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
+ <span><RocketOutlined /></span>
+ <span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
+ </div>
</div>
</div>
</div>
- </div>
- <div v-else>
- <a-empty :image-style="{ height: '60px', marginTop: '60px' }" />
+ <div v-else>
+ <a-empty :image-style="{ height: '60px', marginTop: '60px' }" />
+ </div>
</div>
</div>
</template>
@@ -47,28 +49,54 @@
})
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
+const scorllHeight = ref()
+const canRefresh = ref(true)
onMounted(() => {
+ const parent = document.getElementsByClassName('scrollbar').item(0)?.parentNode as HTMLDivElement
+ scorllHeight.value = document.body.clientHeight - parent.firstElementChild!.clientHeight
getDocks()
+ const key = setInterval(() => {
+ const data = document.getElementById('data')?.lastElementChild as HTMLDivElement
+ if (body.total === 0 || Math.ceil(body.total / body.page_size) <= body.page || scorllHeight.value <= data?.clientHeight + data?.offsetTop) {
+ clearInterval(key)
+ return
+ }
+ body.page++
+ getDocks()
+ }, 1000)
})
const body: IPage = {
page: 1,
- total: 0,
- page_size: 100
+ total: -1,
+ page_size: 10,
}
-function getDocks () {
- getBindingDevices(workspaceId, body, EDeviceTypeName.Dock).then(res => {
+
+async function getDocks () {
+ if (!canRefresh.value) {
+ return
+ }
+ canRefresh.value = false
+
+ await getBindingDevices(workspaceId, body, EDeviceTypeName.Dock).then(res => {
if (res.code !== 0) {
return
}
- docksData.data = []
- res.data.list.forEach((dock: any) => {
- if (dock.child_device_sn) {
- docksData.data.push(dock)
- }
- })
- console.info(docksData.data)
+ docksData.data.push(...res.data.list)
+ body.page = res.data.pagination.page
+ body.page_size = res.data.pagination.page_size
+ body.total = res.data.pagination.total
+ }).finally(() => {
+ canRefresh.value = true
})
+}
+
+function onScroll (e: any) {
+ const element = e.srcElement
+ if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(body.total / body.page_size) > body.page && canRefresh.value) {
+ body.page++
+ getDocks()
+ }
}
function selectDock (dock: Device) {
@@ -97,4 +125,10 @@
margin: 0px 10px 0 10px;
}
}
+.uranus-scrollbar {
+ overflow: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #c5c8cc transparent;
+ height: 100%;
+}
</style>
--
Gitblit v1.9.3