63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import type { TreeOption } from 'naive-ui'
|
||
|
|
import Tree from '@/components/Tree/index.vue'
|
||
|
|
import { useBase } from './hooks/base'
|
||
|
|
import { useEarth } from '../Earth/hooks/earth'
|
||
|
|
import { parseWKT } from '@/utils/parseWKT'
|
||
|
|
|
||
|
|
const { treeData, allKeys, addBaseFacilities } = useBase()
|
||
|
|
|
||
|
|
watch(allKeys, val => {
|
||
|
|
nextTick(() => {
|
||
|
|
checkedKeys.value = val
|
||
|
|
})
|
||
|
|
})
|
||
|
|
// onMounted(() => {
|
||
|
|
// nextTick(() => {
|
||
|
|
// console.log(allKeys, 'val---')
|
||
|
|
// checkedKeys.value = allKeys.value
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
const checkedKeys = ref<Array<string | number>>([])
|
||
|
|
|
||
|
|
watch(checkedKeys, val => {
|
||
|
|
addBaseFacilities(val)
|
||
|
|
})
|
||
|
|
|
||
|
|
const { flyTo } = useEarth()
|
||
|
|
const nodeProps = ({ option }: { option: TreeOption }) => {
|
||
|
|
return {
|
||
|
|
onclick: () => {
|
||
|
|
if (option.children) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const {
|
||
|
|
dataId,
|
||
|
|
data: { geom },
|
||
|
|
} = option
|
||
|
|
const [lon, lat] = parseWKT(geom).coordinates
|
||
|
|
|
||
|
|
if (checkedKeys.value.includes(dataId as string)) {
|
||
|
|
flyTo({ lon, lat })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="w-h-full">
|
||
|
|
<tree
|
||
|
|
:data="treeData"
|
||
|
|
:key-field="'dataId'"
|
||
|
|
:label-field="'nodeName'"
|
||
|
|
v-model:checked="checkedKeys"
|
||
|
|
:defaultCheckedKeys="allKeys"
|
||
|
|
showSearch
|
||
|
|
:nodeProps="nodeProps"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|