Fixed some issues

sean.zhou

2023-02-24 9650dd9f1d1088118af59ded79f5cce18fdb7280

 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>