| | |
| | | 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> |
| | | |
| | |
| | | |
| | | const equipmentWarningData = ref([]) |
| | | const loading = ref(false) |
| | | const minLoadingMs = 400 |
| | | const loadingTimer = ref(null) |
| | | |
| | | const statusMap = { |
| | | 0: { text: '在线', statusType: 'online' }, |
| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | | } |
| | |
| | | |
| | | <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> |