feat RTK热力图绘制

src/components/heatmap/pointDetail.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { MockRtkPoint } from '@/mock/rtkTrack'
+import { headingText } from './heatUtils'
+
+defineProps<{
+  visible: boolean
+  point: MockRtkPoint | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+</script>
+
+<template>
+  <view v-if="visible && point" class="mask" @tap="emit('close')">
+    <view class="card" @tap.stop>
+      <view class="card-head">
+        <view class="pin" />
+        <view class="head-text">
+          <text class="title">
+            点位详情
+          </text>
+          <text class="sub">
+            点击地图任意位置查看
+          </text>
+        </view>
+      </view>
+
+      <view class="row">
+        <text class="label">
+          点位坐标
+        </text>
+        <text class="value">
+          {{ point.longitude.toFixed(4) }}°E, {{ point.latitude.toFixed(4) }}°N
+        </text>
+      </view>
+      <view class="row">
+        <text class="label">
+          航向角
+        </text>
+        <text class="value">
+          {{ headingText(point.heading) }}
+        </text>
+      </view>
+      <view class="row">
+        <text class="label">
+          压实速度
+        </text>
+        <text class="value">
+          {{ point.speed }}km/h
+        </text>
+      </view>
+      <view class="row">
+        <text class="label">
+          压实度
+        </text>
+        <text class="value">
+          {{ point.compaction }}%
+        </text>
+      </view>
+      <view class="row">
+        <text class="label">
+          温度
+        </text>
+        <text class="value">
+          {{ point.temperature }}℃
+        </text>
+      </view>
+      <view class="row">
+        <text class="label">
+          碾压遍数
+        </text>
+        <text class="value">
+          {{ point.passCount }}遍
+        </text>
+      </view>
+
+      <text class="hint">
+        点击空白处关闭
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.25);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.card {
+  width: 100%;
+  max-width: 420px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.pin {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  border-radius: 50% 50% 50% 0;
+  background: #2563eb;
+  transform: rotate(-45deg);
+}
+
+.head-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111;
+}
+
+.sub {
+  font-size: 12px;
+  color: #999;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.label {
+  font-size: 14px;
+  color: #666;
+}
+
+.value {
+  font-size: 14px;
+  color: #111;
+  font-weight: 600;
+}
+
+.hint {
+  display: block;
+  text-align: right;
+  margin-top: 12px;
+  font-size: 12px;
+  color: #999;
+}
+</style>