electron-4/src/renderer/src/views/components/propertyBox/ProjectionConvert.vue

<template>
  <Dialog
    ref="baseDialog"
    class="projection-convert"
    title="投影转换"
    left="180px"
    top="100px"
    width="634px"
    :closeCallback="closeCallBack"
  >
    <template #content v-if="status1">
      <span class="custom-divider"></span>
      <div style="width: 585px; display: flex">
        <div class="row left" style="flex: 1; margin-bottom: 0">
          <div
            style="
              margin: 10px 0;
              flex: 1;
              display: flex;
              align-items: center;
              flex: 1;
              justify-content: space-between;
            "
          >
            <span class="lable-left-line">源坐标</span>
            <button class="btn pick" style="margin-left: 15px">
              <svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>坐标拾取
            </button>
            <button
              class="btn sourceCopy"
              data-clipboard-action="copy"
              data-clipboard-target=".input"
              style="margin-left: 5px"
            >
              <svg class="icon-copy"><use xlink:href="#yj-icon-copy"></use></svg>复制
            </button>
          </div>
          <div>
            <div style="display: flex; margin-bottom: 12px; align-items: center">
              <span class="label" style="flex: 0 0 60px">椭圆基准</span>
              <div class="datalist_left"></div>
            </div>
            <div style="display: flex; margin-bottom: 12px; align-items: center">
              <span class="label" style="flex: 0 0 60px">经度(x)</span>
              <input class="input left-x" type="number" title="" />
            </div>
            <div style="display: flex; margin-bottom: 10px; align-items: center">
              <span class="label" style="flex: 0 0 60px">纬度(y)</span>
              <input class="input left-y" type="number" title="" />
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 28px 15px 0 15px;
          "
        >
          <button class="btn convert">
            <svg-icon name="turn" :size="11" color="rgba(255, 255, 255, 1)"></svg-icon>
            转换
          </button>
        </div>
        <div class="row right" style="flex: 1; margin-bottom: 0">
          <div
            style="
              margin: 10px 0;
              height: 32px;
              display: flex;
              align-items: center;
              flex: 1;
              justify-content: space-between;
            "
          >
            <span class="lable-left-line">目标坐标</span>
            <button
              class="btn copy"
              data-clipboard-action="copy"
              data-clipboard-target=".input"
              style="margin-left: 20px"
            >
              <svg class="icon-copy"><use xlink:href="#yj-icon-copy"></use></svg>复制
            </button>
          </div>
          <div>
            <div style="display: flex; margin-bottom: 12px; align-items: center">
              <span class="label" style="flex: 0 0 60px">椭圆基准</span>
              <div class="datalist_right"></div>
            </div>
            <div style="display: flex; margin-bottom: 12px; align-items: center">
              <span class="label" style="flex: 0 0 60px">经度(x)</span>
              <input class="input right-x" readonly />
            </div>
            <div style="display: flex; margin-bottom: 10px; align-items: center">
              <span class="label" style="flex: 0 0 60px">纬度(y)</span>
              <input class="input right-y" readonly />
            </div>
          </div>
        </div>
      </div>
      <span class="custom-divider"></span>
    </template>
    <template #footer>
      <button @click="close">关闭</button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from 'vue'
import { inject } from 'vue'
import Dialog from '@/components/dialog/baseDialog.vue'

const baseDialog: any = ref(null)
const eventBus: any = inject('bus')

var status1: any = ref(false)
var tools: any = reactive([])
eventBus.on('ProjectionConvertDialog', () => {
  baseDialog.value?.open()
  if (status1.value) {
    reset()
    status1.value = false
    tools && tools.projectionConvert(status1.value, () => {})
  }
  status1.value = !status1.value
  setTimeout(() => {
    tools = new YJ.Tools(window.earth)
    tools.projectionConvert(status1.value, () => {
      status1.value = false
    })
  }, 100)
})

const open = () => {
  baseDialog.value?.open()
  if (status1.value) {
    reset()
    status1.value = false
    tools && tools.projectionConvert(status1.value, () => {})
  }
  status1.value = !status1.value
  setTimeout(() => {
    tools = new YJ.Tools(window.earth)
    tools.projectionConvert(status1.value, () => {
      status1.value = false
    })
  }, 100)
}

const closeCallBack = (e) => {
  status1.value = false
  tools && tools.projectionConvert(status1.value, () => {})
}
onBeforeUnmount(() => {
  closeCallBack('')
})
const reset = () => {
  let contentElm: any = document
    .getElementsByClassName('projection-convert')[0]
    .getElementsByClassName('content')[0]
  contentElm.getElementsByClassName('left-x')[0].value = null
  contentElm.getElementsByClassName('left-y')[0].value = null
  contentElm.getElementsByClassName('right-x')[0].value = null
  contentElm.getElementsByClassName('right-y')[0].value = null
}
const close = (e) => {
  baseDialog.value?.close()
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
::v-deep .content > div {
  display: flex !important;
  flex-direction: column !important;
}
::v-deep .content .cy_datalist input {
  background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
  border: unset;
}
::v-deep .content input[type='number'] {
  font-size: 16px !important;
  // font-weight: 700 !important;
  color: var(--color-sdk-auxiliary-public) !important;
}
</style>