178 lines
3.2 KiB
Vue
178 lines
3.2 KiB
Vue
<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_value }}%
|
|
</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="label">
|
|
温度
|
|
</text>
|
|
<text class="value">
|
|
{{ point.steel_wheel_temp }}℃
|
|
</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="label">
|
|
碾压遍数
|
|
</text>
|
|
<text class="value">
|
|
{{ point.pass_count }}遍
|
|
</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="label">
|
|
合格率
|
|
</text>
|
|
<text class="value">
|
|
{{ point.qualified_rate }}%
|
|
</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>
|