吉安感知网项目-前端
罗广辉
2026-01-26 beb95fb5fc166804056abafd70fc01ac27de7621
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!--
 * @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 = (item) => ({
    alarmRecordId: item.id,
    areaCode: item.areaCode,
    counterEffect: '',
    coverRadiusM: item.coverRadiusM,
    deployLatitude: item.latitude,
    deployLongitude: item.longitude,
    deviceCode: item.deviceCode,
    deviceId: item.deviceId,
    deviceModel: item.deviceModel,
    deviceName: item.deviceName,
    deviceType: item.deviceType,
    droneDeviceCode: item.droneSerialNo,
    droneName: item.droneName,
    droneType: item.droneType,
    findTime: item.alarmTime,
    id: item.id,
    workMode: ''
})
 
const handleAction = async (type, item) => {
    const actionText = actionTextMap[type] || '操作'
    try {
        const res = await interferenceAndExpulsionApi(buildPayload(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>