| | |
| | | <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> |
| | |
| | | </div> |
| | | <div class="col"> |
| | | <span class="label">电量</span> |
| | | {{ data.battery }}% |
| | | {{ data.batteryPct }}% |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </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> |
| | |
| | | </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 { |
| | |
| | | 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; |
| | |
| | | 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%; |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |