吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/drone-command/src/views/dataCockpit/components/templateComponents/RealEquipmentTemplate.vue
@@ -1,29 +1,25 @@
<script setup>
defineProps({
   data: {
      type: Object,
      required: true,
      default: () => ({})
   }
})
const emit = defineEmits(['history', 'click'])
</script>
<template>
   <div class="counter-card" @click="emit('click', data)">
      <!-- 头部 -->
      <div class="header">
         <div class="title">
            <span class="name">{{ data.name }}</span>
            <el-tooltip
               class="title-tooltip"
               :content="data.name || '-'"
               placement="top"
               effect="dark"
               :show-after="200"
            >
               <span class="name">{{ data.name }}</span>
            </el-tooltip>
            <span class="status">
               <span :class="data.actionType">
               <span :class="getWorkModeType(data.workMode)">
               </span>
               <span>
                  {{ data.actionText }}
                  {{ getWorkModeText(data.workMode) }}
               </span>
            </span>
         </div>
@@ -38,7 +34,7 @@
            </div>
            <div class="col">
               <span class="label">电量</span>
               {{ data.battery }}%
               {{ data.batteryPct }}%
            </div>
         </div>
@@ -49,29 +45,29 @@
            </div>
            <div class="col">
               <span class="label">俯仰角</span>
               {{ data.pitch }}°
               {{ data.elevation }}°
            </div>
         </div>
         <div class="row">
            <div class="col">
               <span class="label">状态</span>
               {{ data.statusText }}
               {{ getStatusText(data.status) }}
            </div>
            <div class="col">
               <span class="label">厂商</span>
               {{ data.vendor }}
               {{ data.manufacturer }}
            </div>
         </div>
         <div class="row">
            <div class="col">
               <span class="label">侦测目标</span>
               {{ data.targetCount }}台
               {{ data.detectTargetCnt }}台
            </div>
            <div class="col">
               <span class="label">有效范围</span>
               {{ data.range }}KM
               {{ Number(data.effectiveRangeKm).toFixed(0) }}m
            </div>
         </div>
      </div>
@@ -82,6 +78,42 @@
      </div>
   </div>
</template>
<script setup>
defineProps({
   data: {
      type: Object,
      required: true,
      default: () => ({})
   }
})
const emit = defineEmits(['history', 'click'])
const getStatusText = (value) => {
   if (value === 0 || value === '0') return '在线'
   if (value === 1 || value === '1') return '离线'
   if (value === 2 || value === '2') return '故障'
   if (value === 3 || value === '3') return '报废'
   return value || '-'
}
const getWorkModeText = (value) => {
   if (value === 1 || value === '1') return '侦测中'
   if (value === 2 || value === '2') return '信号干扰中'
   if (value === 3 || value === '3') return '诱导驱离中'
   if (value === 4 || value === '4') return '待机'
   return value || '-'
}
const getWorkModeType = (value) => {
   if (value === 1 || value === '1') return 'detecting'
   if (value === 2 || value === '2') return 'jamming'
   if (value === 3 || value === '3') return 'driving'
   if (value === 4 || value === '4') return 'standby'
   return ''
}
</script>
<style scoped lang="scss">
.counter-card {
@@ -104,8 +136,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;
@@ -113,9 +154,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;
@@ -148,6 +193,20 @@
               width: 4px;
               height: 4px;
               background: #FF4444;
               border-radius: 50%;
            }
            span.driving {
               width: 4px;
               height: 4px;
               background: #FFB020;
               border-radius: 50%;
            }
            span.standby {
               width: 4px;
               height: 4px;
               background: #9AA4B2;
               border-radius: 50%;
            }
         }
@@ -196,4 +255,4 @@
      }
   }
}
</style>
</style>