From a53ece5036c1fa61a63fe5f9e0cd3519210ab928 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 07 Aug 2026 09:44:27 +0800
Subject: [PATCH] feat:兼容分辨率低不出现滚动条
---
applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue | 115 +++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 83 insertions(+), 32 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue b/applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue
index 15531ce..7e3c7eb 100644
--- a/applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/EquipmentWarning.vue
@@ -9,44 +9,85 @@
* 2026-01-08 09:29:07
-->
<template>
- <div class="equipment-warning">
- <EquipmentTemplate v-for="(item, ind) in equipmentWarningData" :key="ind" :data="item" @click="onCardClick" />
+ <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([
- {
- id: 'dev_001',
- name: '反制设备名称',
- status: '离线',
- statusType: 'offline', // offline | fault | online
- type: '察打一体',
- vendor: '厂商名称',
- azimuth: 14, // 方位角(°)
- pitch: 14, // 俯仰角(°)
- range: '1.2KM', // 有效范围
- model: 'TDOAX1A', // 设备型号
- longitude: 113.877571,
- latitude: 22.547155
- },
- {
- id: 'dev_002',
- name: '反制设备名称',
- status: '故障',
- statusType: 'fault',
- type: '察打一体',
- vendor: '厂商名称',
- azimuth: 14,
- pitch: 14,
- range: '1.2KM',
- model: 'TDOAX1A',
- longitude: 113.877571,
- latitude: 22.547155
+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)
@@ -55,7 +96,17 @@
<style lang="scss" scoped>
.equipment-warning {
+ display: flex;
+ flex-direction: column;
width: 100%;
height: 100%;
+ overflow: hidden;
}
-</style>
\ No newline at end of file
+
+.list-content {
+ height: 0;
+ flex: 1;
+ overflow-y: auto;
+}
+
+</style>
--
Gitblit v1.9.3