<!--
|
* @Author : yuan
|
* @Date : 2026-01-08 09:29:07
|
* @LastEditors : yuan
|
* @LastEditTime : 2026-01-08 14:49:09
|
* @FilePath : \applications\drone-command\src\views\dataCockpit\components\RealWarning.vue
|
* @Description :
|
* Copyright 2026 OBKoro1, All Rights Reserved.
|
* 2026-01-08 09:29:07
|
-->
|
<template>
|
<div
|
class="real-warning"
|
v-loading="loading"
|
element-loading-background="rgba(5, 5, 15, 0.6)"
|
element-loading-text="加载中..."
|
>
|
<EmptyState v-if="!realWarningData.length" />
|
<RealTemplate
|
v-else
|
v-for="(item, ind) in realWarningData"
|
:key="ind"
|
:data="item"
|
@signal="() => handleAction('signal', item)"
|
@counter="() => handleAction('counter', item)"
|
@favorite="() => console.log('收藏', item.id)"
|
/>
|
</div>
|
</template>
|
|
<script setup>
|
import RealTemplate from './templateComponents/RealTemplate.vue'
|
import { alarmLogApi, interferenceAndExpulsionApi } from '@/api/dataCockpit'
|
import { onMounted, ref } from 'vue'
|
import EmptyState from './EmptyState.vue'
|
import { ElMessage } from 'element-plus'
|
|
const realWarningData = ref([])
|
const loading = ref(true)
|
const minLoadingMs = 400
|
|
const actionTextMap = {
|
signal: '信号干扰',
|
counter: '诱导驱离'
|
}
|
|
const buildPayload = (type, item) => ({
|
counterWay: type === 'signal' ? 1 : type === 'counter' ? 2 : '',
|
deviceId: item.deviceId,
|
droneDeviceCode: item.droneDeviceCode ?? item.droneSerialNo
|
})
|
|
const handleAction = async (type, item) => {
|
const actionText = actionTextMap[type] || '操作'
|
try {
|
const res = await interferenceAndExpulsionApi(buildPayload(type, item))
|
if (res?.data?.success) {
|
ElMessage({ type: 'success', message: `${actionText}成功` })
|
} else {
|
ElMessage({ type: 'error', message: res?.data?.msg || `${actionText}失败` })
|
}
|
} catch (error) {
|
ElMessage({ type: 'error', message: `${actionText}失败` })
|
}
|
}
|
|
const fetchRealWarning = async () => {
|
const startAt = Date.now()
|
loading.value = true
|
try {
|
const params = { current: 1, size: 20, alarmType: '1' }
|
const res = await alarmLogApi(params)
|
const records = res?.data?.data?.records ?? []
|
realWarningData.value = records
|
} finally {
|
const elapsed = Date.now() - startAt
|
if (elapsed < minLoadingMs) {
|
await new Promise((resolve) => setTimeout(resolve, minLoadingMs - elapsed))
|
}
|
loading.value = false
|
}
|
}
|
|
onMounted(() => {
|
fetchRealWarning()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.real-warning {
|
width: 100%;
|
height: 100%;
|
}
|
|
</style>
|
