| New file |
| | |
| | | <template> |
| | | <div class="drone-info-card" @click="emit('click', data)"> |
| | | <div class="title"> |
| | | <span class="name"> |
| | | {{ data.droneName }} |
| | | </span> |
| | | </div> |
| | | |
| | | <div class="rows"> |
| | | <div class="row"> |
| | | <span class="label">序列号</span> |
| | | <span class="value">{{ data.droneSerialNo }}</span> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <span class="label">数据源</span> |
| | | <span class="value">{{ getDataSource(data) }}</span> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <span class="label">信号频段</span> |
| | | <span class="value">{{ formatFrequency(data.signalFreqMhz) }}</span> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <span class="label">发现时间</span> |
| | | <span class="value"> |
| | | <span class="date">{{ getAlarmDate(data.alarmTime) }}</span> |
| | | <span class="time">{{ getAlarmTime(data.alarmTime) }}</span> |
| | | </span> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <span class="label">停留时间</span> |
| | | <span class="value">{{ data.stayDuration }}</span> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <span class="label">反制方式</span> |
| | | <span class="value">{{ getCounterWayText(data.counterWay) }}</span> |
| | | </div> |
| | | |
| | | <div class="row"> |
| | | <span class="label">飞行状态</span> |
| | | <span class="value">{{ getFlightStatusText(data.flightStatus) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | defineProps({ |
| | | data: { |
| | | type: Object, |
| | | required: true, |
| | | default: () => ({}) |
| | | } |
| | | }) |
| | | |
| | | const emit = defineEmits(['click']) |
| | | |
| | | const getDataSource = (item) => { |
| | | return item?.deviceName || item?.areaName || '-' |
| | | } |
| | | |
| | | const formatFrequency = (value) => { |
| | | if (value == null || value === '') return '-' |
| | | return `${value}MHZ` |
| | | } |
| | | |
| | | const getAlarmDate = (value) => { |
| | | if (!value) return '-' |
| | | const parts = value.replace('T', ' ').split(' ') |
| | | return parts[0] || value |
| | | } |
| | | |
| | | const getAlarmTime = (value) => { |
| | | if (!value) return '-' |
| | | const parts = value.replace('T', ' ').split(' ') |
| | | return parts[1] || value |
| | | } |
| | | |
| | | const getFlightStatusText = (value) => { |
| | | if (value === 1 || value === '1') return '侦测中' |
| | | if (value === 2 || value === '2') return '反制中' |
| | | return value || '-' |
| | | } |
| | | |
| | | const getCounterWayText = (value) => { |
| | | if (value === 1 || value === '1') return '信号干扰' |
| | | if (value === 2 || value === '2') return '诱导驱离' |
| | | if (value === 3 || value === '3') return '无' |
| | | return value || '-' |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .drone-info-card { |
| | | margin-top: 10px; |
| | | padding: 10px; |
| | | color: #fff; |
| | | background: #191933; |
| | | border-radius: 6px 6px 6px 6px; |
| | | |
| | | &:hover { |
| | | filter: brightness(1.05); |
| | | } |
| | | |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 6px; |
| | | |
| | | .name { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 14px; |
| | | color: #FFFFFF; |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | } |
| | | } |
| | | |
| | | .rows { |
| | | margin-top: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 12px; |
| | | color: #9E9EBA; |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | |
| | | .row { |
| | | line-height: 22px; |
| | | |
| | | .label { |
| | | margin-right: 10px; |
| | | color: #D4D5D7; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |