From a6f3f2d1445ba86d70057b5266b0eba455a4f956 Mon Sep 17 00:00:00 2001
From: Ironsp <1522278303@qq.com>
Date: Sat, 5 Sep 2026 11:51:59 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=8E=8B=E5=AE=9E=E4=BD=9C=E4=B8=9A?=
 =?UTF-8?q?=E9=AA=A8=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                |   2 +
 src/components/work/rtkCanvas.vue  |  46 ++++++++
 src/components/work/rtkHeader.vue  | 172 +++++++++++++++++++++++++++++
 src/components/work/rtkMonitor.vue | 102 +++++++++++++++--
 4 files changed, 312 insertions(+), 10 deletions(-)
 create mode 100644 src/components/work/rtkCanvas.vue
 create mode 100644 src/components/work/rtkHeader.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 15a74eb..851009d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -38,6 +38,8 @@ declare module 'vue' {
     WarningItem: typeof import('./components/warning/item.vue')['default']
     WorkDashboard: typeof import('./components/work/dashboard.vue')['default']
     WorkDeviceControl: typeof import('./components/work/deviceControl.vue')['default']
+    WorkRtkCanvas: typeof import('./components/work/rtkCanvas.vue')['default']
+    WorkRtkHeader: typeof import('./components/work/rtkHeader.vue')['default']
     WorkRtkMonitor: typeof import('./components/work/rtkMonitor.vue')['default']
   }
 }
diff --git a/src/components/work/rtkCanvas.vue b/src/components/work/rtkCanvas.vue
new file mode 100644
index 0000000..485fd9c
--- /dev/null
+++ b/src/components/work/rtkCanvas.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// RTK 轨迹画布 - 占位组件，后续实现轨迹动画
+</script>
+
+<template>
+  <view class="rtk-canvas">
+    <view class="canvas-placeholder">
+      <text class="placeholder-text">
+        轨迹动画区域
+      </text>
+      <text class="placeholder-hint">
+        （Canvas 绘制行驶轨迹 + 压实热力图）
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.rtk-canvas {
+  width: 100%;
+  height: 300px;
+  background: #f0fdf4;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.canvas-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.placeholder-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.placeholder-hint {
+  font-size: 12px;
+  color: #999;
+}
+</style>
diff --git a/src/components/work/rtkHeader.vue b/src/components/work/rtkHeader.vue
new file mode 100644
index 0000000..109c109
--- /dev/null
+++ b/src/components/work/rtkHeader.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+// RTK 轨迹实时监测 - 状态头部组件
+
+interface Props {
+  deviceName?: string
+  speed?: number
+  frequency?: number
+  amplitude?: number
+  rtkFixed?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  deviceName: '徐工XS65H #01',
+  speed: 4.2,
+  frequency: 28.5,
+  amplitude: 1.86,
+  rtkFixed: true,
+})
+</script>
+
+<template>
+  <view class="rtk-header">
+    <!-- 标题行 -->
+    <view class="title-row">
+      <text class="title">
+        RTK轨迹实时监测
+      </text>
+      <text class="subtitle">
+        压实热力图
+      </text>
+    </view>
+
+    <!-- 设备状态 -->
+    <view class="device-status">
+      <view class="status-dot" />
+      <text class="device-name">
+        {{ deviceName }}
+      </text>
+      <text class="status-text">
+        实时监测中
+      </text>
+    </view>
+
+    <!-- 数据行 -->
+    <view class="data-row">
+      <view class="data-item">
+        <text class="data-label">
+          车速
+        </text>
+        <text class="data-value">
+          {{ speed }} km/h
+        </text>
+      </view>
+      <view class="data-item">
+        <text class="data-label">
+          振动频率
+        </text>
+        <text class="data-value">
+          {{ frequency }} HZ
+        </text>
+      </view>
+      <view class="data-item">
+        <text class="data-label">
+          振幅
+        </text>
+        <text class="data-value">
+          {{ amplitude }} mm
+        </text>
+      </view>
+      <view class="rtk-status">
+        <view class="rtk-dot" :class="{ 'rtk-dot--active': rtkFixed }" />
+        <text class="rtk-text">
+          RTK固定
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.rtk-header {
+  padding-bottom: 12px;
+}
+
+.title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #666;
+}
+
+.device-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.device-name {
+  font-size: 13px;
+  color: #666;
+}
+
+.status-text {
+  font-size: 13px;
+  color: #999;
+}
+
+.data-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.data-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.data-label {
+  font-size: 12px;
+  color: #999;
+}
+
+.data-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.rtk-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.rtk-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ccc;
+}
+
+.rtk-dot--active {
+  background: #22c55e;
+}
+
+.rtk-text {
+  font-size: 12px;
+  color: #666;
+}
+</style>
diff --git a/src/components/work/rtkMonitor.vue b/src/components/work/rtkMonitor.vue
index f18ca52..77b56bf 100644
--- a/src/components/work/rtkMonitor.vue
+++ b/src/components/work/rtkMonitor.vue
@@ -1,11 +1,45 @@
 <script setup lang="ts">
-// RTK轨迹实时监测 + 压实热力图组件
+// RTK轨迹实时监测 + 压实热力图 - 父组件（组合头部 + 画布）
 </script>
 
 <template>
   <view class="card">
-    <view class="placeholder">
-      RTK轨迹实时监测 + 压实热力图
+    <!-- 状态头部 -->
+    <work-rtkHeader />
+
+    <!-- 轨迹画布 -->
+    <work-rtkCanvas />
+
+    <!-- 底部信息 -->
+    <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>
   </view>
 </template>
@@ -17,14 +51,62 @@
   padding: 16px;
 }
 
-.placeholder {
+.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;
-  justify-content: center;
-  min-height: 120px;
-  color: #999;
-  font-size: 14px;
-  border: 1px dashed #ddd;
-  border-radius: 8px;
+  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>