fix 修复安卓不展示svg的问题
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== 分割线 ===== */
|
/* ===== 分割线 ===== */
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user