<template>
|
<el-dialog
|
class="ztzf-dialog-mange data-cockpit-history-dialog"
|
append-to-body
|
v-model="visibleModel"
|
:title="dialogTitle"
|
width="1100px"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
>
|
<div class="dialog-body">
|
<div class="device-summary">
|
<div class="item">
|
<span class="label">设备名称</span>
|
<span class="value">{{ device?.name || '反制设备名称' }}</span>
|
</div>
|
<div class="item">
|
<span class="label">类型</span>
|
<span class="value">{{ device?.type || '-' }}</span>
|
</div>
|
<div class="item">
|
<span class="label">厂商</span>
|
<span class="value">{{ device?.vendor || '-' }}</span>
|
</div>
|
<div class="item">
|
<span class="label">状态</span>
|
<span class="value">{{ device?.statusText || '-' }}</span>
|
</div>
|
</div>
|
|
<div class="table">
|
<div class="thead">
|
<div class="cell index">序号</div>
|
<div class="cell">无人机名称</div>
|
<div class="cell">无人机序列号</div>
|
<div class="cell">无人机类型</div>
|
<div class="cell">区域</div>
|
<div class="cell">数据来源</div>
|
<div class="cell">信号频段</div>
|
<div class="cell">发现时间</div>
|
<div class="cell">停留时间</div>
|
<div class="cell">反制方式</div>
|
</div>
|
<div class="tbody">
|
<div class="tr" v-for="(row, index) in historyList" :key="row.id">
|
<div class="cell index">{{ index + 1 }}</div>
|
<div class="cell">{{ row.droneName }}</div>
|
<div class="cell">{{ row.serialNumber }}</div>
|
<div class="cell">{{ row.droneType }}</div>
|
<div class="cell">{{ row.area }}</div>
|
<div class="cell">{{ row.dataSource }}</div>
|
<div class="cell">{{ row.frequency }}</div>
|
<div class="cell">{{ row.discoveredAt }}</div>
|
<div class="cell">{{ row.stayTime }}</div>
|
<div class="cell">{{ row.counterMethod }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
device: {
|
type: Object,
|
default: () => null
|
}
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const visibleModel = computed({
|
get: () => props.modelValue,
|
set: (val) => emit('update:modelValue', val)
|
})
|
|
const dialogTitle = computed(() => {
|
return `反制设备名称 ${props.device?.name || ''}`.trim()
|
})
|
|
const historyList = computed(() => {
|
const dataSource = props.device?.name || '侦测反制设备名称'
|
return [
|
{
|
id: 'his_001',
|
droneName: '无人机名称',
|
serialNumber: 'XLH789456',
|
droneType: '微型机',
|
area: '古村区',
|
dataSource,
|
frequency: '5800MHZ',
|
discoveredAt: '2025/12/26 12:15:26',
|
stayTime: '00:10:50',
|
counterMethod: '信号干扰'
|
},
|
{
|
id: 'his_002',
|
droneName: '无人机名称',
|
serialNumber: 'XLH789456',
|
droneType: '微型机',
|
area: '古村区',
|
dataSource,
|
frequency: '5800MHZ',
|
discoveredAt: '2025/12/26 12:18:06',
|
stayTime: '00:08:12',
|
counterMethod: '信号干扰'
|
},
|
{
|
id: 'his_003',
|
droneName: '无人机名称',
|
serialNumber: 'XLH789456',
|
droneType: '微型机',
|
area: '古村区',
|
dataSource,
|
frequency: '2400MHZ',
|
discoveredAt: '2025/12/26 12:22:31',
|
stayTime: '00:06:09',
|
counterMethod: '诱导驱离'
|
},
|
{
|
id: 'his_004',
|
droneName: '无人机名称',
|
serialNumber: 'XLH789456',
|
droneType: '微型机',
|
area: '古村区',
|
dataSource,
|
frequency: '2400MHZ',
|
discoveredAt: '2025/12/26 12:28:44',
|
stayTime: '00:12:03',
|
counterMethod: '诱导驱离'
|
},
|
{
|
id: 'his_005',
|
droneName: '无人机名称',
|
serialNumber: 'XLH789456',
|
droneType: '微型机',
|
area: '古村区',
|
dataSource,
|
frequency: '5800MHZ',
|
discoveredAt: '2025/12/26 12:32:10',
|
stayTime: '00:04:39',
|
counterMethod: '信号干扰'
|
},
|
{
|
id: 'his_006',
|
droneName: '无人机名称',
|
serialNumber: 'XLH789456',
|
droneType: '微型机',
|
area: '古村区',
|
dataSource,
|
frequency: '5800MHZ',
|
discoveredAt: '2025/12/26 12:36:42',
|
stayTime: '00:07:21',
|
counterMethod: '信号干扰'
|
}
|
]
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.dialog-body {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
color: #C3C3DD;
|
}
|
|
.device-summary {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 16px 24px;
|
|
.item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 14px;
|
|
.label {
|
color: #8B8BA7;
|
}
|
|
.value {
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.table {
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 6px;
|
overflow: hidden;
|
}
|
|
.thead,
|
.tr {
|
display: grid;
|
grid-template-columns: 60px 1.1fr 1.1fr 0.9fr 0.8fr 1.2fr 0.9fr 1.3fr 0.9fr 0.9fr;
|
align-items: center;
|
}
|
|
.thead {
|
background: rgba(20, 24, 48, 0.9);
|
color: #FFFFFF;
|
font-size: 13px;
|
height: 42px;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
}
|
|
.tbody {
|
max-height: 360px;
|
overflow-y: auto;
|
background: rgba(10, 14, 34, 0.6);
|
}
|
|
.tr {
|
font-size: 12px;
|
color: #C3C3DD;
|
height: 40px;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
&:nth-child(2n) {
|
background: rgba(255, 255, 255, 0.02);
|
}
|
}
|
|
.cell {
|
padding: 0 10px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
&.index {
|
text-align: center;
|
color: #86909C;
|
}
|
}
|
</style>
|
