<!--
|
* @Author : yuan
|
* @Date : 2026-01-08 09:29:07
|
* @LastEditors : yuan
|
* @LastEditTime : 2026-01-08 14:49:25
|
* @FilePath : \applications\drone-command\src\views\dataCockpit\components\EquipmentWarning.vue
|
* @Description :
|
* Copyright 2026 OBKoro1, All Rights Reserved.
|
* 2026-01-08 09:29:07
|
-->
|
<template>
|
<div
|
class="equipment-warning"
|
v-loading="loading"
|
element-loading-background="rgba(5, 5, 15, 0.6)"
|
element-loading-text="加载中..."
|
>
|
<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>
|
|
<script setup>
|
import { onMounted, ref } from 'vue'
|
import EquipmentTemplate from './templateComponents/EquipmentTemplate.vue'
|
import { deviceSearchApi } from '@/api/dataCockpit'
|
import EmptyState from './EmptyState.vue'
|
|
const equipmentWarningData = ref([])
|
const loading = ref(false)
|
const loadingTimer = ref(null)
|
|
const statusMap = {
|
0: { text: '在线', statusType: 'online' },
|
1: { text: '离线', statusType: 'offline' },
|
2: { text: '故障', statusType: 'fault' },
|
3: { text: '报废', statusType: 'offline' }
|
}
|
const deviceTypeMap = {
|
1: '便捷侦测箱',
|
2: '反制枪',
|
3: '察打一体'
|
}
|
|
const formatDeviceItem = (item) => {
|
const statusInfo = statusMap[item?.status] || { text: '-', statusType: '' }
|
return {
|
id: item.id,
|
name: item.deviceName || item.deviceModel || '-',
|
status: statusInfo.text,
|
statusType: statusInfo.statusType,
|
type: deviceTypeMap[item.deviceType] || item.deviceType || '-',
|
manufacturer: item.manufacturer || '-',
|
azimuth: item.azimuth ?? 0,
|
pitch: item.elevation ?? 0,
|
range: item.effectiveRangeKm ?? 0,
|
model: item.deviceModel || '-',
|
longitude: item.longitude ?? '-',
|
latitude: item.latitude ?? '-'
|
}
|
}
|
|
const fetchDeviceWarning = async () => {
|
// 只有超过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 {
|
if (loadingTimer.value) clearTimeout(loadingTimer.value)
|
loading.value = false
|
}
|
}
|
|
onMounted(() => {
|
fetchDeviceWarning()
|
})
|
|
const onCardClick = (item) => {
|
console.log('点击设备卡片：', item.id)
|
}
|
</script>
|
|
<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>
|
