吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/drone-command/src/views/dataCockpit/components/templateComponents/RealTemplate.vue
@@ -2,33 +2,39 @@
   <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>
@@ -37,33 +43,39 @@
         <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,
@@ -72,7 +84,84 @@
   }
})
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">
@@ -101,8 +190,17 @@
         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;
@@ -110,9 +208,13 @@
            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;
@@ -155,6 +257,11 @@
         gap: 8px;
         font-size: 16px;
         cursor: pointer;
         .favorite-icon {
            width: 16px;
            height: 16px;
         }
      }
   }