tianditu/hwasmart-beidou-satellite-data-monitor-beidou-satellite-data-monitor-/src/render/components/BaseInfoView.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>