feat RTK轨迹监测

src/components.d.ts

@@ -39,6 +39,7 @@ declare module 'vue' {
     WorkDashboard: typeof import('./components/work/dashboard.vue')['default']
     WorkDeviceControl: typeof import('./components/work/deviceControl.vue')['default']
     WorkRtkCanvas: typeof import('./components/work/rtkCanvas.vue')['default']
+    WorkRtkFooter: typeof import('./components/work/rtkFooter.vue')['default']
     WorkRtkHeader: typeof import('./components/work/rtkHeader.vue')['default']
     WorkRtkMonitor: typeof import('./components/work/rtkMonitor.vue')['default']
   }

src/components/work/rtkFooter.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+// RTK 轨迹底部信息组件（图例 + 位置信息）
+</script>
+
+<template>
+  <view class="footer-info">
+    <view class="legend">
+      <view class="legend-item">
+        <view class="legend-line legend-line--blue" />
+        <text class="legend-text">
+          行驶轨迹
+        </text>
+      </view>
+      <view class="legend-item">
+        <view class="legend-area" />
+        <text class="legend-text">
+          已压实区域
+        </text>
+      </view>
+      <view class="legend-item">
+        <view class="legend-dot" />
+        <text class="legend-text">
+          当前位置
+        </text>
+      </view>
+    </view>
+    <view class="location-info">
+      <text class="location-text">
+        航向：NE45°
+      </text>
+      <text class="location-text">
+        114.39°E, 39.9087°N
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.footer-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 20px;
+}
+
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-line {
+  width: 20px;
+  height: 2px;
+}
+
+.legend-line--blue {
+  background: #3b82f6;
+}
+
+.legend-area {
+  width: 16px;
+  height: 12px;
+  background: #bbf7d0;
+  border-radius: 2px;
+}
+
+.legend-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #f97316;
+}
+
+.legend-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.location-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.location-text {
+  font-size: 14px;
+  color: #666;
+}
+</style>

src/components/work/rtkHeader.vue

@@ -25,9 +25,9 @@ withDefaults(defineProps<Props>(), {
       <text class="title">
         RTK轨迹实时监测
       </text>
-      <text class="subtitle">
+      <wd-button variant="text">
         压实热力图
-      </text>
+      </wd-button>
     </view>
 
     <!-- 设备状态 -->
@@ -90,15 +90,15 @@ withDefaults(defineProps<Props>(), {
 }
 
 .title {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
   color: #333;
 }
 
-.subtitle {
+/* .subtitle {
-  font-size: 14px;
+  font-size: 20px;
-  color: #666;
+  color: #333;
-}
+} */
 
 .device-status {
   display: flex;
@@ -115,19 +115,19 @@ withDefaults(defineProps<Props>(), {
 }
 
 .device-name {
-  font-size: 13px;
+  font-size: 14px;
-  color: #666;
+  color: #999;
 }
 
 .status-text {
-  font-size: 13px;
+  font-size: 14px;
   color: #999;
 }
 
 .data-row {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 100px;
 }
 
 .data-item {
@@ -137,8 +137,8 @@ withDefaults(defineProps<Props>(), {
 }
 
 .data-label {
-  font-size: 12px;
+  font-size: 18px;
-  color: #999;
+  color: #333;
 }
 
 .data-value {

src/components/work/rtkMonitor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// RTK轨迹实时监测 + 压实热力图 - 父组件（组合头部 + 画布）
+// RTK轨迹实时监测 + 压实热力图 - 父组件（组合头部 + 画布 + 底部）
 </script>
 
 <template>
@@ -11,36 +11,7 @@
     <work-rtkCanvas />
 
     <!-- 底部信息 -->
-    <view class="footer-info">
+    <work-rtkFooter />
-      <view class="legend">
-        <view class="legend-item">
-          <view class="legend-line legend-line--blue" />
-          <text class="legend-text">
-            行驶轨迹
-          </text>
-        </view>
-        <view class="legend-item">
-          <view class="legend-area" />
-          <text class="legend-text">
-            已压实区域
-          </text>
-        </view>
-        <view class="legend-item">
-          <view class="legend-dot" />
-          <text class="legend-text">
-            当前位置
-          </text>
-        </view>
-      </view>
-      <view class="location-info">
-        <text class="location-text">
-          航向：NE45°
-        </text>
-        <text class="location-text">
-          114.39°E, 39.9087°N
-        </text>
-      </view>
-    </view>
   </view>
 </template>
 
@@ -50,63 +21,4 @@
   border-radius: 12px;
   padding: 16px;
 }
-
-.footer-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-top: 12px;
-}
-
-.legend {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.legend-line {
-  width: 20px;
-  height: 2px;
-}
-
-.legend-line--blue {
-  background: #3b82f6;
-}
-
-.legend-area {
-  width: 16px;
-  height: 12px;
-  background: #bbf7d0;
-  border-radius: 2px;
-}
-
-.legend-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #f97316;
-}
-
-.legend-text {
-  font-size: 12px;
-  color: #666;
-}
-
-.location-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.location-text {
-  font-size: 12px;
-  color: #666;
-}
 </style>