fix 修复安卓不展示svg的问题

This commit is contained in:
Ironsp
2026-09-17 16:50:24 +08:00
parent 65fc29f777
commit 59379dff79
4 changed files with 122 additions and 65 deletions

View File

@@ -11,7 +11,7 @@ withDefaults(defineProps<Props>(), {
rtkFixed: true, rtkFixed: true,
}) })
const { speedTextSpaced, frequencyText, amplitudeText } = useRtkLive() const { speedTextSpaced } = useRtkLive()
function handleToggle() { function handleToggle() {
uni.switchTab({ uni.switchTab({
@@ -53,22 +53,22 @@ function handleToggle() {
{{ speedTextSpaced }} {{ speedTextSpaced }}
</text> </text>
</view> </view>
<view class="data-item"> <!-- <view class="data-item">
<text class="data-label"> <text class="data-label">
振动频率 振动频率
</text> </text>
<text class="data-value"> <text class="data-value">
{{ frequencyText }} {{ frequencyText }}
</text> </text>
</view> </view> -->
<view class="data-item"> <!-- <view class="data-item">
<text class="data-label"> <text class="data-label">
振幅 振幅
</text> </text>
<text class="data-value"> <text class="data-value">
{{ amplitudeText }} {{ amplitudeText }}
</text> </text>
</view> </view> -->
<view class="rtk-status"> <view class="rtk-status">
<view class="rtk-dot" :class="{ 'rtk-dot--active': rtkFixed }" /> <view class="rtk-dot" :class="{ 'rtk-dot--active': rtkFixed }" />
<text class="rtk-text"> <text class="rtk-text">

View File

@@ -8,7 +8,8 @@ const {
compactionValue: liveCompaction, compactionValue: liveCompaction,
speed, speed,
compactionText: liveCompactionText, compactionText: liveCompactionText,
frequencyText: liveFrequencyText, tempText: liveTempText,
passCountText: livePassCountText,
} = useRtkLive() } = useRtkLive()
const compactionValue = computed(() => { const compactionValue = computed(() => {
@@ -30,9 +31,14 @@ const speedText = computed(() => {
}) })
const speedMax = 12 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(() => { const overviewData = computed(() => {
if (!hasCurrentProject.value) { if (!hasCurrentProject.value) {
@@ -75,7 +81,7 @@ const overviewData = computed(() => {
</view> </view>
<!-- 圆环进度(使用 wotui 的 wd-circle 组件) --> <!-- 圆环进度(使用 wotui 的 wd-circle 组件) -->
<view class="ring-wrap"> <view class="ring-wrap">
<wd-circle :model-value="compactionValue" :text="compactionText" /> <wd-circle :model-value="compactionValue" :text="compactionText" :size="80" />
</view> </view>
</view> </view>
@@ -97,57 +103,38 @@ const overviewData = computed(() => {
<!-- 右侧 --> <!-- 右侧 -->
<view class="gauge-right"> <view class="gauge-right">
<!-- 振动频率 --> <!-- 钢轮温度 -->
<view class="freq-item"> <view class="freq-item">
<text class="freq-label"> <text class="freq-label">
振动频率 钢轮温度
</text> </text>
<text class="freq-value"> <text class="freq-value">
{{ frequencyText }} {{ tempText }}
</text> </text>
</view> </view>
<view class="freq-item"> <view class="freq-item">
<text class="freq-label"> <text class="freq-label">
振动频率 压实遍数
</text> </text>
<text class="freq-value"> <text class="freq-value">
{{ frequencyText }} {{ passCountText }}
</text> </text>
</view> </view>
<!-- 车速仪表 SVG 3/4圆弧 (270°) --> <!-- 车速仪表:App 端不支持内联 SVG,改用 view + CSS -->
<view class="speed-gauge"> <view class="speed-gauge">
<svg viewBox="0 0 120 110" class="speed-svg"> <view class="gauge-clip gauge-clip--left">
<!-- 左半弧:蓝色 (0~6) 从225°到90° --> <view class="gauge-ring gauge-ring--blue" />
<path </view>
d="M 24.64 95.36 A 50 50 0 0 1 60 10" <view class="gauge-clip gauge-clip--right">
fill="none" <view class="gauge-ring gauge-ring--orange" />
stroke="#3b82f6" </view>
stroke-width="10" <view class="gauge-mask" />
stroke-linecap="round" <view class="needle-wrap" :style="{ transform: `rotate(${needleRotation}deg)` }">
/> <view class="needle" />
<!-- 右半弧:橙色 (6~12) 从90°到-45° --> </view>
<path <view class="needle-hub" />
d="M 60 10 A 50 50 0 0 1 95.36 95.36"
fill="none"
stroke="#f97316"
stroke-width="10"
stroke-linecap="round"
/>
<!-- 指针 -->
<line
x1="60"
y1="60"
:x2="60 + 38 * Math.cos(needleRotation * Math.PI / 180)"
:y2="60 - 38 * Math.sin(needleRotation * Math.PI / 180)"
stroke="#f97316"
stroke-width="3"
stroke-linecap="round"
/>
<!-- 中心圆点 -->
<circle cx="60" cy="60" r="5" fill="#f97316" />
</svg>
</view> </view>
</view> </view>
</view> </view>
@@ -255,15 +242,88 @@ const overviewData = computed(() => {
color: #333; color: #333;
} }
/* ===== 车速 SVG 3/4圆仪表 ===== */ /* ===== 车速仪表(view+CSS,兼容 Android App) ===== */
.speed-gauge { .speed-gauge {
position: relative;
width: 110px; width: 110px;
height: 100px; height: 100px;
margin-top: 4px;
} }
.speed-svg { .gauge-clip {
width: 100%; position: absolute;
height: 100%; 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;
} }
/* ===== 分割线 ===== */ /* ===== 分割线 ===== */

View File

@@ -73,6 +73,7 @@ export function useRtkLive() {
const speedTextSpaced = computed(() => (speed.value == null ? '--' : `${speed.value} km/h`)) const speedTextSpaced = computed(() => (speed.value == null ? '--' : `${speed.value} km/h`))
const tempText = computed(() => (steelWheelTemp.value == null ? '--' : `${steelWheelTemp.value}°C`)) const tempText = computed(() => (steelWheelTemp.value == null ? '--' : `${steelWheelTemp.value}°C`))
const compactionText = computed(() => (compactionValue.value == null ? '--' : `${Math.round(compactionValue.value)}%`)) 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 frequencyText = computed(() => (vibrationHz.value == null ? '--' : `${vibrationHz.value}HZ`))
const amplitudeText = computed(() => (amplitudeMm.value == null ? '--' : `${amplitudeMm.value} mm`)) const amplitudeText = computed(() => (amplitudeMm.value == null ? '--' : `${amplitudeMm.value} mm`))
@@ -92,6 +93,7 @@ export function useRtkLive() {
speedTextSpaced, speedTextSpaced,
tempText, tempText,
compactionText, compactionText,
passCountText,
frequencyText, frequencyText,
amplitudeText, amplitudeText,
publishRtkPoint, publishRtkPoint,

View File

@@ -2,24 +2,19 @@
* RTK 轨迹假数据:蛇形碾压路径 + 持续推送 * RTK 轨迹假数据:蛇形碾压路径 + 持续推送
* 字段与 `@/service/rtkTrack` 的 RtkTrack 对齐 * 字段与 `@/service/rtkTrack` 的 RtkTrack 对齐
*/ */
import type { RtkTrack } from '@/service/rtkTrack'
/** 假数据点:与 rtk_track 表结构一致(坐标类字段必填便于绘制) */ /** 假数据点:与 rtk_track 表结构一致(坐标类字段必填便于绘制) */
export type MockRtkPoint = Required< export interface MockRtkPoint {
Pick< latitude: number // 纬度
RtkTrack, longitude: number // 经度
| 'latitude' speed: number // 行驶速度 km/h
| 'longitude' heading: number // 航向角度(度,0=北,顺时针)
| 'speed' steel_wheel_temp: number // 钢轮温度 ℃
| 'heading' compaction_value: number // 压实度 %
| 'steel_wheel_temp' pass_count: number // 压实遍数
| 'compaction_value' qualified_rate: number // 压实合格率 %
| 'pass_count' work_record_id?: number // 所属作业记录 ID,关联 work_record.id
| 'qualified_rate' created_at?: string // 创建时间
>
> & {
work_record_id?: number
created_at?: string
} }
export interface MockRtkStreamOptions { export interface MockRtkStreamOptions {