From 59379dff798188f1010f36ce9fc8bb2e8d8b1949 Mon Sep 17 00:00:00 2001 From: Ironsp <1522278303@qq.com> Date: Thu, 17 Sep 2026 16:50:24 +0800 Subject: [PATCH] =?UTF-8?q?fix=20=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=8D=93?= =?UTF-8?q?=E4=B8=8D=E5=B1=95=E7=A4=BAsvg=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FullscreenNav.vue | 10 +- src/components/work/dashboard.vue | 148 +++++++++++++++++++++--------- src/composables/useRtkLive.ts | 2 + src/mock/rtkTrack.ts | 27 +++--- 4 files changed, 122 insertions(+), 65 deletions(-) diff --git a/src/components/FullscreenNav.vue b/src/components/FullscreenNav.vue index fd76917..22afd46 100644 --- a/src/components/FullscreenNav.vue +++ b/src/components/FullscreenNav.vue @@ -11,7 +11,7 @@ withDefaults(defineProps(), { rtkFixed: true, }) -const { speedTextSpaced, frequencyText, amplitudeText } = useRtkLive() +const { speedTextSpaced } = useRtkLive() function handleToggle() { uni.switchTab({ @@ -53,22 +53,22 @@ function handleToggle() { {{ speedTextSpaced }} - + + diff --git a/src/components/work/dashboard.vue b/src/components/work/dashboard.vue index b4b5d10..eadd3bb 100644 --- a/src/components/work/dashboard.vue +++ b/src/components/work/dashboard.vue @@ -8,7 +8,8 @@ const { compactionValue: liveCompaction, speed, compactionText: liveCompactionText, - frequencyText: liveFrequencyText, + tempText: liveTempText, + passCountText: livePassCountText, } = useRtkLive() const compactionValue = computed(() => { @@ -30,9 +31,14 @@ const speedText = computed(() => { }) const speedMax = 12 -const needleRotation = computed(() => 225 - (speedValue.value / speedMax) * 270) +/** 数学角（0=东，逆时针）→ CSS 旋转（0=上，顺时针） */ +const needleRotation = computed(() => { + const mathDeg = 225 - (speedValue.value / speedMax) * 270 + return 90 - mathDeg +}) -const frequencyText = computed(() => (hasCurrentProject.value ? liveFrequencyText.value : '--')) +const tempText = computed(() => (hasCurrentProject.value ? liveTempText.value : '--')) +const passCountText = computed(() => (hasCurrentProject.value ? livePassCountText.value : '--')) const overviewData = computed(() => { if (!hasCurrentProject.value) { @@ -75,7 +81,7 @@ const overviewData = computed(() => { - + @@ -97,57 +103,38 @@ const overviewData = computed(() => { - + - 振动频率 + 钢轮温度 - {{ frequencyText }} + {{ tempText }} - 振动频率 + 压实遍数 - {{ frequencyText }} + {{ passCountText }} - + - - - - - - - - - - + + + + + + + + + + + @@ -255,15 +242,88 @@ const overviewData = computed(() => { color: #333; } -/* ===== 车速 SVG 3/4圆仪表 ===== */ +/* ===== 车速仪表（view+CSS，兼容 Android App） ===== */ .speed-gauge { + position: relative; width: 110px; height: 100px; + margin-top: 4px; } -.speed-svg { - width: 100%; - height: 100%; +.gauge-clip { + position: absolute; + top: 0; + width: 50px; + height: 100px; + overflow: hidden; +} + +.gauge-clip--left { + left: 5px; +} + +.gauge-clip--right { + left: 55px; +} + +.gauge-ring { + width: 90px; + height: 90px; + margin-top: 5px; + border-radius: 50%; + border-style: solid; + border-width: 10px; + box-sizing: border-box; +} + +/* 左半：蓝弧约 225°→90° */ +.gauge-ring--blue { + margin-left: 5px; + border-color: #3b82f6 transparent transparent #3b82f6; + transform: rotate(-45deg); +} + +/* 右半：橙弧约 90°→-45° */ +.gauge-ring--orange { + margin-left: -45px; + border-color: #f97316 #f97316 transparent transparent; + transform: rotate(45deg); +} + +.gauge-mask { + position: absolute; + left: 5px; + bottom: 0; + width: 100px; + height: 42px; + background: #fff; +} + +.needle-wrap { + position: absolute; + left: 52px; + top: 12px; + width: 6px; + height: 38px; + transform-origin: 50% 100%; +} + +.needle { + width: 4px; + height: 36px; + margin: 0 auto; + border-radius: 2px; + background: #f97316; +} + +.needle-hub { + position: absolute; + left: 50px; + top: 45px; + width: 10px; + height: 10px; + border-radius: 50%; + background: #f97316; } /* ===== 分割线 ===== */ diff --git a/src/composables/useRtkLive.ts b/src/composables/useRtkLive.ts index fad63d7..b364074 100644 --- a/src/composables/useRtkLive.ts +++ b/src/composables/useRtkLive.ts @@ -73,6 +73,7 @@ export function useRtkLive() { const speedTextSpaced = computed(() => (speed.value == null ? '--' : `${speed.value} km/h`)) const tempText = computed(() => (steelWheelTemp.value == null ? '--' : `${steelWheelTemp.value}°C`)) const compactionText = computed(() => (compactionValue.value == null ? '--' : `${Math.round(compactionValue.value)}%`)) + const passCountText = computed(() => (passCount.value == null ? '--' : `${passCount.value}遍`)) const frequencyText = computed(() => (vibrationHz.value == null ? '--' : `${vibrationHz.value}HZ`)) const amplitudeText = computed(() => (amplitudeMm.value == null ? '--' : `${amplitudeMm.value} mm`)) @@ -92,6 +93,7 @@ export function useRtkLive() { speedTextSpaced, tempText, compactionText, + passCountText, frequencyText, amplitudeText, publishRtkPoint, diff --git a/src/mock/rtkTrack.ts b/src/mock/rtkTrack.ts index 5b59a06..ab2de2f 100644 --- a/src/mock/rtkTrack.ts +++ b/src/mock/rtkTrack.ts @@ -2,24 +2,19 @@ * RTK 轨迹假数据：蛇形碾压路径 + 持续推送 * 字段与 `@/service/rtkTrack` 的 RtkTrack 对齐 */ -import type { RtkTrack } from '@/service/rtkTrack' /** 假数据点：与 rtk_track 表结构一致（坐标类字段必填便于绘制） */ -export type MockRtkPoint = Required< - Pick< - RtkTrack, - | 'latitude' - | 'longitude' - | 'speed' - | 'heading' - | 'steel_wheel_temp' - | 'compaction_value' - | 'pass_count' - | 'qualified_rate' - > -> & { - work_record_id?: number - created_at?: string +export interface MockRtkPoint { + latitude: number // 纬度 + longitude: number // 经度 + speed: number // 行驶速度 km/h + heading: number // 航向角度（度，0=北，顺时针） + steel_wheel_temp: number // 钢轮温度 ℃ + compaction_value: number // 压实度 % + pass_count: number // 压实遍数 + qualified_rate: number // 压实合格率 % + work_record_id?: number // 所属作业记录 ID，关联 work_record.id + created_at?: string // 创建时间 } export interface MockRtkStreamOptions {