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

src/components/FullscreenNav.vue

@@ -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">

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(() => {
           </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;
 }
 
 /* ===== 分割线 ===== */