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

<template>
  <Dialog ref="baseDialog" title="地形开挖" left="180px" top="100px" :closeCallback="closeCallBack">
    <template #content>
      <span class="custom-divider"></span>
      <div class="div-item">
        <div class="row">
          <div class="col">
            <span class="label" style="flex: 0 0 70px">挖掘高度</span>
            <div class="input-number input-number-unit-1">
              <input
                class="input"
                type="number"
                id="height"
                title=""
                min="0"
                max="5000000"
                v-model="height"
                @input="heightInput"
                @change="changeHeight"
              />
              <span class="unit">m</span>
              <span class="arrow"></span>
            </div>
          </div>
        </div>
      </div>
      <span class="custom-divider"></span>
      <div class="div-item">
        <div class="row">
          <div class="col">
            <span class="label">绘制开挖区域</span>
            <button class="start-excavation" @click="draw">
              <svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>绘制
            </button>
          </div>
          <div class="col">
            <span class="label">清除开挖区域</span>
            <button class="clean-excavation" @click="clear">
              <svg class="icon-close"><use xlink:href="#yj-icon-close"></use></svg>清除
            </button>
          </div>
        </div>
      </div>
    </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 height: any = ref(10)

var excavation: any = reactive([])
eventBus.on('terrainExcavationDialog', () => {
  baseDialog.value?.open()

  excavation = new (window as any).YJ.Analysis.TerrainExcavation(window.earth, { height: 10 })
})

const open = () => {
  baseDialog.value?.open()

  excavation = new (window as any).YJ.Analysis.TerrainExcavation(window.earth, { height: 10 })
}
const changeHeight = () => {
  excavation.height = height.value
}
const heightInput = () => {
  let dom: any = document.getElementById('height')
  if (height.value < dom.min * 1) {
    height.value = dom.min * 1
  } else if (height.value > dom.max * 1) {
    height.value = dom.max * 1
  }
}
const closeCallBack = (e) => {
  height.value = 10
}
onBeforeUnmount(() => {
  closeCallBack('')
})
const close = (e) => {
  baseDialog.value?.close()
}
const draw = (e) => {
  excavation.startCreate()
}
const clear = (e) => {
  excavation.clear()
}
defineExpose({
  open
})
</script>

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