fix 修复安卓不展示svg的问题
This commit is contained in:
@@ -11,7 +11,7 @@ withDefaults(defineProps<Props>(), {
|
||||
rtkFixed: true,
|
||||
})
|
||||
|
||||
const { speedTextSpaced, frequencyText, amplitudeText } = useRtkLive()
|
||||
const { speedTextSpaced } = useRtkLive()
|
||||
|
||||
function handleToggle() {
|
||||
uni.switchTab({
|
||||
@@ -53,22 +53,22 @@ function handleToggle() {
|
||||
{{ speedTextSpaced }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
<!-- <view class="data-item">
|
||||
<text class="data-label">
|
||||
振动频率
|
||||
</text>
|
||||
<text class="data-value">
|
||||
{{ frequencyText }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
</view> -->
|
||||
<!-- <view class="data-item">
|
||||
<text class="data-label">
|
||||
振幅
|
||||
</text>
|
||||
<text class="data-value">
|
||||
{{ amplitudeText }}
|
||||
</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="rtk-status">
|
||||
<view class="rtk-dot" :class="{ 'rtk-dot--active': rtkFixed }" />
|
||||
<text class="rtk-text">
|
||||
|
||||
@@ -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(() => {
|
||||
</view>
|
||||
<!-- 圆环进度(使用 wotui 的 wd-circle 组件) -->
|
||||
<view class="ring-wrap">
|
||||
<wd-circle :model-value="compactionValue" :text="compactionText" />
|
||||
<wd-circle :model-value="compactionValue" :text="compactionText" :size="80" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -97,57 +103,38 @@ const overviewData = computed(() => {
|
||||
|
||||
<!-- 右侧 -->
|
||||
<view class="gauge-right">
|
||||
<!-- 振动频率 -->
|
||||
<!-- 钢轮温度 -->
|
||||
<view class="freq-item">
|
||||
<text class="freq-label">
|
||||
振动频率
|
||||
钢轮温度
|
||||
</text>
|
||||
<text class="freq-value">
|
||||
{{ frequencyText }}
|
||||
{{ tempText }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="freq-item">
|
||||
<text class="freq-label">
|
||||
振动频率
|
||||
压实遍数
|
||||
</text>
|
||||
<text class="freq-value">
|
||||
{{ frequencyText }}
|
||||
{{ passCountText }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 车速仪表 SVG 3/4圆弧 (270°) -->
|
||||
<!-- 车速仪表:App 端不支持内联 SVG,改用 view + CSS -->
|
||||
<view class="speed-gauge">
|
||||
<svg viewBox="0 0 120 110" class="speed-svg">
|
||||
<!-- 左半弧:蓝色 (0~6) 从225°到90° -->
|
||||
<path
|
||||
d="M 24.64 95.36 A 50 50 0 0 1 60 10"
|
||||
fill="none"
|
||||
stroke="#3b82f6"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<!-- 右半弧:橙色 (6~12) 从90°到-45° -->
|
||||
<path
|
||||
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 class="gauge-clip gauge-clip--left">
|
||||
<view class="gauge-ring gauge-ring--blue" />
|
||||
</view>
|
||||
<view class="gauge-clip gauge-clip--right">
|
||||
<view class="gauge-ring gauge-ring--orange" />
|
||||
</view>
|
||||
<view class="gauge-mask" />
|
||||
<view class="needle-wrap" :style="{ transform: `rotate(${needleRotation}deg)` }">
|
||||
<view class="needle" />
|
||||
</view>
|
||||
<view class="needle-hub" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* ===== 分割线 ===== */
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user