feat 压实作业骨架

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>