105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
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>
|