zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat RTK轨迹监测

Browse Source
This commit is contained in:
Ironsp
2026-09-05 15:58:45 +08:00
parent 056a3cbfa9
commit a85f14e79c
4 changed files with 112 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/work/rtkFooter.vue Normal file
View File

@@ -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>

26
src/components/work/rtkHeader.vue
View File

@@ -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 {
font-size: 14px;
color: #666;
}
/* .subtitle {
font-size: 20px;
color: #333;
} */
.device-status {
display: flex;
@@ -115,19 +115,19 @@ withDefaults(defineProps<Props>(), {
}
.device-name {
font-size: 13px;
color: #666;
font-size: 14px;
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;
color: #999;
font-size: 18px;
color: #333;
}
.data-value {

92
src/components/work/rtkMonitor.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
// RTK轨迹实时监测 + 压实热力图 - 父组件（组合头部 + 画布）
// RTK轨迹实时监测 + 压实热力图 - 父组件（组合头部 + 画布 + 底部）
</script>
<template>
@@ -11,36 +11,7 @@
<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>
<work-rtkFooter />
</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>