feat 仪表盘

src/components/work/dashboard.vue

@@ -8,8 +8,8 @@ const compactionValue = 25
 const speedValue = 4.2
 const speedMax = 12
 
-// 指针旋转角度：0km/h → 180°（左），12km/h → 0°（右）
+// 指针旋转角度：0km/h → 225°（左下），12km/h → -45°（右下），中间90°（正上）
-const needleRotation = computed(() => 180 * (1 - speedValue / speedMax))
+const needleRotation = computed(() => 225 - (speedValue / speedMax) * 270)
 
 // 今日作业概览数据 (假数据)
 const overviewData = [
@@ -84,26 +84,26 @@ const overviewData = [
           </text>
         </view>
 
-        <!-- 车速仪表 SVG 半圆弧 -->
+        <!-- 车速仪表 SVG 3/4圆弧 (270°) -->
         <view class="speed-gauge">
-          <svg viewBox="0 0 120 70" class="speed-svg">
+          <svg viewBox="0 0 120 110" class="speed-svg">
-            <!-- 左半弧：蓝色 (0~6) -->
+            <!-- 左半弧：蓝色 (0~6) 从225°到90° -->
             <path
-              d="M 10 60 A 50 50 0 0 1 60 10"
+              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) -->
+            <!-- 右半弧：橙色 (6~12) 从90°到-45° -->
             <path
-              d="M 60 10 A 50 50 0 0 1 110 60"
+              d="M 60 10 A 50 50 0 0 1 95.36 95.36"
               fill="none"
               stroke="#f97316"
               stroke-width="10"
               stroke-linecap="round"
             />
-            <!-- 指针：y 轴取反（SVG y 向下） -->
+            <!-- 指针 -->
             <line
               x1="60"
               y1="60"
@@ -219,10 +219,10 @@ const overviewData = [
   color: #333;
 }
 
-/* ===== 车速 SVG 半圆仪表 ===== */
+/* ===== 车速 SVG 3/4圆仪表 ===== */
 .speed-gauge {
-  width: 100px;
+  width: 110px;
-  height: 60px;
+  height: 100px;
 }
 
 .speed-svg {