108 lines
4.2 KiB
Vue
108 lines
4.2 KiB
Vue
<template>
|
||
<div>
|
||
<SubTitleView :title="'基础信息'" />
|
||
<div class="text-center text-2xl leading-loose text-blue-100">
|
||
<div>
|
||
<div class="label">经 度：</div>
|
||
<div class="content">{{ baseInfo.longitude ? baseInfo.longitude : '' }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">经度度分：</div>
|
||
<div class="content">{{ baseInfo.longitude ? longitudeD + ' ' + longitudeM : '' }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">经度分秒：</div>
|
||
<div class="content">{{ baseInfo.longitude ? longitudeD + ' ' + longitudeM + ' ' + longitudeS : '' }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">纬 度：</div>
|
||
<div class="content">{{ baseInfo.latitude ? baseInfo.latitude : '' }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">纬度度分：</div>
|
||
<div class="content">{{ baseInfo.latitude ? latitudeD + ' ' + latitudeM : '' }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">纬度分秒：</div>
|
||
<div class="content">{{ baseInfo.latitude ? latitudeD + ' ' + latitudeM + ' ' + latitudeS : '' }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">海 拔：</div>
|
||
<div class="content">{{ baseInfo.altitude }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">日 期：</div>
|
||
<div class="content">{{ baseInfo.date }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">UTC时间：</div>
|
||
<div class="content">{{ baseInfo.UTCTime }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">北京时间：</div>
|
||
<div class="content">{{ baseInfo.BJTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive, ref } from 'vue'
|
||
import SubTitleView from './SubTitleView.vue'
|
||
import { getBaseInfo } from '../api/util'
|
||
|
||
|
||
let baseInfo = reactive({
|
||
longitude : '',
|
||
latitude : '',
|
||
altitude : '',
|
||
date : '',
|
||
UTCTime : '',
|
||
BJTime : '',
|
||
})
|
||
|
||
let longitudeD = ref()
|
||
let longitudeM = ref()
|
||
let longitudeS = ref()
|
||
|
||
let latitudeD = ref()
|
||
let latitudeM = ref()
|
||
let latitudeS = ref()
|
||
|
||
const update = (nmea) => {
|
||
const newBaseInfo = getBaseInfo(nmea)
|
||
if (!newBaseInfo) return
|
||
|
||
Object.assign(baseInfo, newBaseInfo)
|
||
|
||
longitudeD.value = baseInfo.longitude.substring(0,baseInfo.longitude.indexOf("."))+'°'
|
||
longitudeM.value = String((Number('0.'+baseInfo.longitude.substring(baseInfo.longitude.indexOf(".")+1,baseInfo.longitude.length))*60).toFixed(10)).substring(0,String((Number('0.'+baseInfo.longitude.substring(baseInfo.longitude.indexOf(".")+1,baseInfo.longitude.length))*60).toFixed(10)).indexOf("."))+'′'
|
||
longitudeS.value = (Number('0.'+(Number('0.'+baseInfo.longitude.substring(baseInfo.longitude.indexOf(".")+1,baseInfo.longitude.length))*60).toFixed(10).substring(String((Number('0.'+baseInfo.longitude.substring(baseInfo.longitude.indexOf(".")+1,baseInfo.longitude.length))*60).toFixed(10)).indexOf(".")+1,((Number('0.'+baseInfo.longitude.substring(baseInfo.longitude.indexOf(".")+1,baseInfo.longitude.length))*60).toFixed(10)).length))*60).toFixed(6)+'″'
|
||
|
||
latitudeD.value = baseInfo.latitude.substring(0,baseInfo.latitude.indexOf("."))+'°'
|
||
latitudeM.value = String((Number('0.'+baseInfo.latitude.substring(baseInfo.latitude.indexOf(".")+1,baseInfo.latitude.length))*60).toFixed(10)).substring(0,String((Number('0.'+baseInfo.latitude.substring(baseInfo.latitude.indexOf(".")+1,baseInfo.latitude.length))*60).toFixed(10)).indexOf("."))+'′'
|
||
latitudeS.value = (Number('0.'+(Number('0.'+baseInfo.latitude.substring(baseInfo.latitude.indexOf(".")+1,baseInfo.latitude.length))*60).toFixed(10).substring(String((Number('0.'+baseInfo.latitude.substring(baseInfo.latitude.indexOf(".")+1,baseInfo.latitude.length))*60).toFixed(10)).indexOf(".")+1,((Number('0.'+baseInfo.latitude.substring(baseInfo.latitude.indexOf(".")+1,baseInfo.latitude.length))*60).toFixed(10)).length))*60).toFixed(6)+'″'
|
||
}
|
||
|
||
defineExpose({ update })
|
||
</script>
|
||
|
||
<style scoped>
|
||
@layer components {
|
||
.label {
|
||
@apply float-left text-right w-2/5;
|
||
min-width: 120px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
|
||
@layer components {
|
||
.content {
|
||
@apply float-left text-left w-3/5;
|
||
min-width: 165px;
|
||
height: 36px;
|
||
/* min-height: 48px; */
|
||
}
|
||
}
|
||
</style>
|