吉安感知网项目-前端
罗广辉
10 hours ago 493a27022ad30291934db825bab591c7efdcbc09
applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue
@@ -15,14 +15,16 @@
      element-loading-background="rgba(5, 5, 15, 0.6)"
      element-loading-text="加载中..."
   >
      <EmptyState v-if="!equipmentWarningData.length" />
      <EquipmentTemplate
         v-else
         v-for="(item, ind) in equipmentWarningData"
         :key="ind"
         :data="item"
         @click="onCardClick"
      />
      <div class="list-content">
         <EmptyState v-if="!equipmentWarningData.length" />
         <EquipmentTemplate
            v-else
            v-for="(item, ind) in equipmentWarningData"
            :key="ind"
            :data="item"
            @click="onCardClick"
         />
      </div>
   </div>
</template>
@@ -34,7 +36,7 @@
const equipmentWarningData = ref([])
const loading = ref(false)
const minLoadingMs = 400
const loadingTimer = ref(null)
const statusMap = {
   0: { text: '在线', statusType: 'online' },
@@ -67,18 +69,18 @@
}
const fetchDeviceWarning = async () => {
   const startAt = Date.now()
   loading.value = true
   // 只有超过200ms才显示loading,避免闪烁
   loadingTimer.value = setTimeout(() => {
      loading.value = true
   }, 200)
   try {
      const params = { current: 1, size: 20, deviceStatusList: '1,2,3' }
      const res = await deviceSearchApi(params)
      const records = res?.data?.data?.records ?? []
      equipmentWarningData.value = records.map(formatDeviceItem)
   } finally {
      const elapsed = Date.now() - startAt
      if (elapsed < minLoadingMs) {
         await new Promise((resolve) => setTimeout(resolve, minLoadingMs - elapsed))
      }
      if (loadingTimer.value) clearTimeout(loadingTimer.value)
      loading.value = false
   }
}
@@ -94,8 +96,17 @@
<style lang="scss" scoped>
.equipment-warning {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.list-content {
   height: 0;
   flex: 1;
   overflow-y: auto;
}
</style>