ts/src/views/BaseMB/index.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 { isLoading, 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 }) => {
  // console.log(option, 'option')
  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 })
      }
    },
  }
}

const renderSuffix = ({ option }: { option: TreeOption }) => {}
</script>

<template>
  <div class="w-h-full" v-loading="isLoading">
    <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>