From a53ece5036c1fa61a63fe5f9e0cd3519210ab928 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 07 Aug 2026 09:44:27 +0800
Subject: [PATCH] feat:兼容分辨率低不出现滚动条
---
applications/drone-command/src/views/dataCockpit/components/templateComponents/RealEquipmentTemplate.vue | 107 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 81 insertions(+), 26 deletions(-)
diff --git a/applications/drone-command/src/views/dataCockpit/components/templateComponents/RealEquipmentTemplate.vue b/applications/drone-command/src/views/dataCockpit/components/templateComponents/RealEquipmentTemplate.vue
index c33a208..adfa1ab 100644
--- a/applications/drone-command/src/views/dataCockpit/components/templateComponents/RealEquipmentTemplate.vue
+++ b/applications/drone-command/src/views/dataCockpit/components/templateComponents/RealEquipmentTemplate.vue
@@ -1,29 +1,20 @@
-<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 +29,7 @@
</div>
<div class="col">
<span class="label">电量</span>
- {{ data.battery }}%
+ {{ data.batteryPct }}%
</div>
</div>
@@ -49,30 +40,31 @@
</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 }}
+ <span class="label">侦测目标</span>
+ {{ data.detectTargetCnt }}台
</div>
</div>
<div class="row">
<div class="col">
- <span class="label">侦测目标</span>
- {{ data.targetCount }}台
- </div>
- <div class="col">
<span class="label">有效范围</span>
- {{ data.range }}KM
+ {{ Number(data.effectiveRangeKm).toFixed(0) }}m
</div>
+ </div>
+
+ <div class="col">
+ <span class="label">厂商</span>
+ {{ data.manufacturer }}
</div>
</div>
@@ -82,6 +74,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 +132,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 +150,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 +189,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 +251,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3