LSSE-front/src/views/subsystem/scene/components/LonLatInput.vue

<template>
  <div class="lon-lat-input">
    <div class="lon-input" style="padding: 10px 0">
      <a-select v-model="lonSelect" style="width: 76px; margin-right: 20px">
        <a-select-option :value="1">东经</a-select-option>
        <a-select-option :value="-1">西经</a-select-option>
      </a-select>
      <a-input-number v-model="lonNumber" :min="0" :max="180" :precision="8" style="width: 152px" />
      <span style="margin: 0 8px">°</span>
      <span style="margin: 0 12px">或</span>
      <a-input-number v-model="lonDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
      <span style="margin: 0 8px">°</span>
      <a-input-number v-model="lonMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
      <span style="margin: 0 8px">′</span>
      <a-input-number v-model="lonSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
      <span style="margin: 0 8px">″</span>
    </div>
    <div class="lat-input" style="padding: 10px 0">
      <a-select v-model="latSelect" style="width: 76px; margin-right: 20px">
        <a-select-option :value="1">北纬</a-select-option>
        <a-select-option :value="-1">南纬</a-select-option>
      </a-select>
      <a-input-number v-model="latNumber" :min="0" :max="180" :precision="8" style="width: 152px" />
      <span style="margin: 0 8px">°</span>
      <span style="margin: 0 12px">或</span>
      <a-input-number v-model="latDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
      <span style="margin: 0 8px">°</span>
      <a-input-number v-model="latMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
      <span style="margin: 0 8px">′</span>
      <a-input-number v-model="latSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
      <span style="margin: 0 8px">″</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lon: { type: Number, required: true },
    lat: { type: Number, required: true },
  },
  data() {
    return {
      EWSelect: 1,
      NSSelect: 1,
    }
  },
  computed: {
    lonSelect: {
      get() {
        return this.lon ? this.lon / this.lonNumber : this.EWSelect
      },
      set(v) {
        this.$emit('update:lon', this.lonNumber * v)
        this.EWSelect = v
      },
    },
    lonNumber: {
      get() {
        return Math.abs(this.lon)
      },
      set(v) {
        this.$emit('update:lon', Math.abs(v) * this.lonSelect)
      },
    },
    lonDegree: {
      get() {
        return Math.floor(this.lonNumber)
      },
      set(v) {
        this.$emit('update:lon', Math.abs(v) * this.lonSelect + this.lonMinute / 60 + this.lonSecond / 3600)
      },
    },
    lonMinute: {
      get() {
        return Math.floor(this.lonNumber * 60) % 60
      },
      set(v) {
        this.$emit('update:lon', this.lonDegree * this.lonSelect + Math.abs(v) / 60 + this.lonSecond / 3600)
      },
    },
    lonSecond: {
      get() {
        return Math.floor(this.lonNumber * 3600) % 60
      },
      set(v) {
        this.$emit('update:lon', this.lonDegree * this.lonSelect + this.lonMinute / 60 + Math.abs(v) / 3600)
      },
    },
    latSelect: {
      get() {
        return this.lat ? this.lat / this.latNumber : this.NSSelect
      },
      set(v) {
        this.$emit('update:lat', this.latNumber * v)
        this.NSSelect = v
      },
    },
    latNumber: {
      get() {
        return Math.abs(this.lat)
      },
      set(v) {
        this.$emit('update:lat', Math.abs(v) * this.latSelect)
      },
    },
    latDegree: {
      get() {
        return Math.floor(this.latNumber)
      },
      set(v) {
        this.$emit('update:lat', Math.abs(v) * this.latSelect + this.latMinute / 60 + this.latSecond / 3600)
      },
    },
    latMinute: {
      get() {
        return Math.floor(this.latNumber * 60) % 60
      },
      set(v) {
        this.$emit('update:lat', this.latDegree * this.latSelect + Math.abs(v) / 60 + this.latSecond / 3600)
      },
    },
    latSecond: {
      get() {
        return Math.floor(this.latNumber * 3600) % 60
      },
      set(v) {
        this.$emit('update:lat', this.latDegree * this.latSelect + this.latMinute / 60 + Math.abs(v) / 3600)
      },
    },
  },
  created() {
    if (this.lon < 0) {
      this.EWSelect = 'W'
    }
    if (this.lat < 0) {
      this.NSSelect = 'S'
    }
  },
}
</script>

<style lang="less" scoped></style>