| | |
| | | <div class="drone-card"> |
| | | <div class="header"> |
| | | <div class="title"> |
| | | <span class="name">{{ data.name }}</span> |
| | | <el-tooltip class="title-tooltip" :content="data.droneName || '-'" placement="top" effect="dark" |
| | | :show-after="200"> |
| | | <span class="name">{{ data.droneName }}</span> |
| | | </el-tooltip> |
| | | <span class="status"> |
| | | <span :class="data.statusType"> |
| | | <span :class="getStatusType(data)"> |
| | | |
| | | </span> |
| | | |
| | | <span> |
| | | {{ data.status }} |
| | | {{ getStatusText(data) }} |
| | | </span> |
| | | </span> |
| | | </div> |
| | | |
| | | <div class="actions"> |
| | | <span class="star" @click="emit('favorite')"> |
| | | {{ data.isFavorite ? '★' : '☆' }} |
| | | </span> |
| | | <img |
| | | class="favorite-icon" |
| | | :src="favoriteIcon" |
| | | alt="收藏" |
| | | @click="emit('favorite')" |
| | | /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="content"> |
| | | <div> |
| | | <span class="label">序列号</span> |
| | | {{ data.serialNumber }} |
| | | {{ data.droneSerialNo }} |
| | | </div> |
| | | <div> |
| | | <span class="label">数据源</span> |
| | | {{ data.dataSource }} |
| | | {{ getDataSource(data) }} |
| | | </div> |
| | | <div> |
| | | <span class="label">经纬度</span> |
| | |
| | | <div class="row"> |
| | | <div class="col"> |
| | | <span class="label">信号频段</span> |
| | | {{ data.frequency }} |
| | | {{ formatFrequency(data.signalFreqMhz) }} |
| | | </div> |
| | | <div class="col"> |
| | | <span class="label">发现时间</span> |
| | | {{ data.discoverTime }} |
| | | {{ getAlarmTime(data.alarmTime) }} |
| | | </div> |
| | | </div> |
| | | <div class="row"> |
| | | <div class="col"> |
| | | <span class="label">飞行高度</span> |
| | | {{ data.altitude }} |
| | | {{ formatHeight(data.flightHeightM) }} |
| | | </div> |
| | | <div class="col"> |
| | | <span class="label">飞行速度</span> |
| | | {{ data.speed }} |
| | | {{ formatSpeed(data.flightSpeedMs) }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="footer"> |
| | | <el-button class="general" color="#2B2B4C" @click="emit('signal')">信号干扰</el-button> |
| | | <el-button color="#284FE3" type="primary" @click="emit('counter')">诱导驱离</el-button> |
| | | <el-button class="general" color="#2B2B4C" @click="handleSignal">信号干扰</el-button> |
| | | <el-button color="#284FE3" type="primary" @click="handleCounter">诱导驱离</el-button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { computed } from 'vue' |
| | | import { saveOperationLog } from '@ztzf/apis' |
| | | import { useRoute } from 'vue-router' |
| | | import favoriteNo from '@/assets/images/dataCockpit/favorite-n.png' |
| | | import favoriteYes from '@/assets/images/dataCockpit/favorite-y.png' |
| | | |
| | | const props = defineProps({ |
| | | data: { |
| | | type: Object, |
| | |
| | | } |
| | | }) |
| | | |
| | | const route = useRoute() |
| | | const emit = defineEmits(['signal', 'counter', 'favorite']) |
| | | const favoriteIcon = computed(() => (props.data?.isFavorite ? favoriteYes : favoriteNo)) |
| | | |
| | | // 信号干扰操作 |
| | | const handleSignal = () => { |
| | | saveOperationLog({ |
| | | requestUri: route.path, |
| | | title: `${route.name || '数据驾驶舱'}-信号干扰`, |
| | | type: 1 |
| | | }) |
| | | emit('signal') |
| | | } |
| | | |
| | | const handleCounter = () => { |
| | | saveOperationLog({ |
| | | requestUri: route.path, |
| | | title: `${route.name || '数据驾驶舱'}-诱导驱离`, |
| | | type: 1 |
| | | }) |
| | | emit('counter') |
| | | } |
| | | |
| | | const getStatusText = (item) => { |
| | | const status = item?.flightStatus |
| | | if (status === 1 || status === '1') return '侦测中' |
| | | if (status === 2 || status === '2') return '反制中' |
| | | return status || '侦测中' |
| | | } |
| | | |
| | | const getStatusType = (item) => { |
| | | const statusText = getStatusText(item) |
| | | const counterWay = item?.counterWay |
| | | if (statusText.includes('反制') || counterWay === 2 || counterWay === '2' || counterWay === '诱导驱离') { |
| | | return 'countering' |
| | | } |
| | | return 'detecting' |
| | | } |
| | | |
| | | const normalizeCounterWay = (value) => { |
| | | if (value == null) return '' |
| | | return String(value).trim() |
| | | } |
| | | |
| | | const showSignalBtn = (item) => { |
| | | const counterWay = normalizeCounterWay(item?.counterWay) |
| | | return counterWay !== '1' |
| | | } |
| | | |
| | | const showCounterBtn = (item) => { |
| | | const counterWay = normalizeCounterWay(item?.counterWay) |
| | | return counterWay !== '2' |
| | | } |
| | | |
| | | const getDataSource = (item) => { |
| | | return item?.deviceName || item?.areaName || '-' |
| | | } |
| | | |
| | | const formatFrequency = (value) => { |
| | | if (value == null || value === '') return '-' |
| | | return `${value}MHz` |
| | | } |
| | | |
| | | const getAlarmTime = (value) => { |
| | | if (!value) return '-' |
| | | const parts = value.replace('T', ' ').split(' ') |
| | | return parts[1] || value |
| | | } |
| | | |
| | | const formatHeight = (value) => { |
| | | if (value == null || value === '') return '-' |
| | | return `${value}m` |
| | | } |
| | | |
| | | const formatSpeed = (value) => { |
| | | if (value == null || value === '') return '-' |
| | | return `${value}m/s` |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 6px; |
| | | min-width: 0; |
| | | |
| | | .title-tooltip { |
| | | flex: 1; |
| | | min-width: 0; |
| | | display: block; |
| | | } |
| | | |
| | | .name { |
| | | display: inline-block; |
| | | max-width: 100%; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 14px; |
| | |
| | | text-align: left; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .status { |
| | | flex-shrink: 0; |
| | | padding: 0 10px; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | gap: 8px; |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | |
| | | .favorite-icon { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | } |
| | | } |
| | | |