feat 仪表盘

src/components/work/dashboard.vue

@@ -1,11 +1,141 @@
 <script setup lang="ts">
-// 实时数据仪表盘组件
+import { computed } from 'vue'
+
+// 压实度 (假数据，后续替换)
+const compactionValue = 25
+
+// 车速 (假数据，范围 0-12，中间值 6)
+const speedValue = 4.2
+const speedMax = 12
+
+// 指针旋转角度：0km/h → 180°（左），12km/h → 0°（右）
+const needleRotation = computed(() => 180 * (1 - speedValue / speedMax))
+
+// 今日作业概览数据 (假数据)
+const overviewData = [
+  { label: '作业时长', value: '8h' },
+  { label: '压实面积', value: '28.5m²' },
+  { label: '碾压遍数', value: '10遍' },
+  { label: '异常次数', value: '0' },
+]
 </script>
 
 <template>
   <view class="card">
-    <view class="placeholder">
+    <!-- 标题 -->
+    <text class="card-title">
       实时数据仪表盘
+    </text>
+
+    <!-- 仪表盘区域 - 左右flex布局 -->
+    <view class="gauge-section">
+      <!-- 左侧 -->
+      <view class="gauge-left">
+        <!-- 压实度 -->
+        <view class="gauge-item">
+          <view class="gauge-header">
+            <text class="gauge-icon">
+              🚜
+            </text>
+            <text class="gauge-label">
+              压实度
+            </text>
+          </view>
+          <!-- 圆环进度（使用 wotui 的 wd-circle 组件） -->
+          <view class="ring-wrap">
+            <wd-circle v-model="compactionValue" :text="`${compactionValue}%`" />
+          </view>
+        </view>
+
+        <!-- 行驶速度 -->
+        <view class="gauge-item">
+          <view class="gauge-header">
+            <text class="gauge-icon">
+              🚜
+            </text>
+            <text class="gauge-label">
+              行驶速度
+            </text>
+          </view>
+          <text class="gauge-value">
+            {{ speedValue }}KM/H
+          </text>
+        </view>
+      </view>
+
+      <!-- 右侧 -->
+      <view class="gauge-right">
+        <!-- 振动频率 -->
+        <view class="freq-item">
+          <text class="freq-label">
+            振动频率
+          </text>
+          <text class="freq-value">
+            8939HZ
+          </text>
+        </view>
+
+        <view class="freq-item">
+          <text class="freq-label">
+            振动频率
+          </text>
+          <text class="freq-value">
+            8939HZ
+          </text>
+        </view>
+
+        <!-- 车速仪表 SVG 半圆弧 -->
+        <view class="speed-gauge">
+          <svg viewBox="0 0 120 70" class="speed-svg">
+            <!-- 左半弧：蓝色 (0~6) -->
+            <path
+              d="M 10 60 A 50 50 0 0 1 60 10"
+              fill="none"
+              stroke="#3b82f6"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+            <!-- 右半弧：橙色 (6~12) -->
+            <path
+              d="M 60 10 A 50 50 0 0 1 110 60"
+              fill="none"
+              stroke="#f97316"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+            <!-- 指针：y 轴取反（SVG y 向下） -->
+            <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 class="divider" />
+
+    <!-- 今日作业概览 -->
+    <text class="section-title">
+      今日作业概览
+    </text>
+    <view class="overview-section">
+      <view v-for="item in overviewData" :key="item.label" class="overview-item">
+        <text class="overview-label">
+          {{ item.label }}
+        </text>
+        <text class="overview-value">
+          {{ item.value }}
+        </text>
+      </view>
     </view>
   </view>
 </template>
@@ -17,14 +147,124 @@
   padding: 16px;
 }
 
-.placeholder {
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+/* 仪表盘区域 - 左右分布 */
+.gauge-section {
+  display: flex;
+  gap: 12px;
+}
+
+.gauge-left,
+.gauge-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 左侧仪表项 */
+.gauge-item {
+  margin-bottom: 16px;
+}
+
+.gauge-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  min-height: 120px;
-  color: #999;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.gauge-icon {
+  font-size: 16px;
+}
+
+.gauge-label {
   font-size: 14px;
-  border: 1px dashed #ddd;
-  border-radius: 8px;
+  color: #666;
+}
+
+.gauge-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* ===== 压实度圆环 ===== */
+.ring-wrap {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+/* ===== 右侧频率项 ===== */
+.freq-item {
+  margin-bottom: 16px;
+}
+
+.freq-label {
+  font-size: 14px;
+  color: #666;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.freq-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+/* ===== 车速 SVG 半圆仪表 ===== */
+.speed-gauge {
+  width: 100px;
+  height: 60px;
+}
+
+.speed-svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ===== 分割线 ===== */
+.divider {
+  height: 1px;
+  background: #eee;
+  margin: 16px 0;
+}
+
+/* ===== 今日作业概览 ===== */
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.overview-section {
+  display: flex;
+  justify-content: space-between;
+}
+
+.overview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.overview-label {
+  font-size: 13px;
+  color: #999;
+}
+
+.overview-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
 }
 </style>

src/main.ts

@@ -1,12 +1,9 @@
-import * as echarts from 'echarts'
-import { provideEcharts } from 'uni-echarts'
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import 'uno.css'
 
 export function createApp() {
   const app = createSSRApp(App)
-  provideEcharts(echarts)
   return {
     app,
   }