feat 添加剩余部分

2026-09-07 08:54:01 +08:00
parent a85f14e79c
commit 569eb49228
7 changed files with 294 additions and 2 deletions
--- a/src/components/FullscreenNav.vue
+++ b/src/components/FullscreenNav.vue
@@ -0,0 +1,192 @@
+<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,
+})
+
+function handleToggle() {
+  console.log('缩小缩小')
+}
+</script>
+
+<template>
+  <view class="rtk-header">
+    <!-- 顶部行：标题 + 缩小按钮 -->
+    <view class="top-row">
+      <view class="title-area">
+        <text class="title">
+          RTK轨迹实时监测
+        </text>
+        <view class="device-status">
+          <view class="status-dot" />
+          <text class="device-name">
+            {{ deviceName }}
+          </text>
+          <text class="status-text">
+            实时监测中
+          </text>
+        </view>
+      </view>
+      <view class="toggle-btn" @click="handleToggle">
+        <wd-icon name="fullscreen-exit" size="24px" />
+      </view>
+    </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 {
+  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.title-area {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.device-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #4ade80;
+}
+
+.device-name {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.status-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.toggle-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  /* background: rgba(255, 255, 255, 0.2); */
+}
+
+.toggle-btn:active {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.data-row {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.data-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.data-label {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.data-value {
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.rtk-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.rtk-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.rtk-dot--active {
+  background: #4ade80;
+}
+
+.rtk-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+}
+</style>