ts/src/views/Mubiao/index.vue

<script setup lang="ts">
import { h } from 'vue'
import { NButton } from 'naive-ui'
import type { TreeOption } from 'naive-ui'
// import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import Tree from '@/components/Tree/index.vue'
import HeatMap from './components/HeatMap/index.vue'
import { useMubiao } from './hooks/mubiao'
import { useMuBiaoPositionWS } from './hooks/mubiaoPos'
import { useMuBiaoDisappearWS } from './hooks/mubiaoDisappear'
import { useMubiaoDetail } from './hooks/mubiaoDetail'
import { useMBTrajectory } from './components/HisTrajectory/hooks/mbTraj'
import { useDaodan } from '../Daodan/ddHooks'
import { useEarth } from '../Earth/hooks/earth'
import { parseWKT } from '@/utils/parseWKT'
import { difference } from 'lodash'
import { useEntity } from '@/hooks/entity'
import { cartesian32LonLat } from '@/utils/pos'

const { getMubiaoData, data, addMubiao, checkedKeys } = useMubiao()
const useMbPosWS = useMuBiaoPositionWS()

const useMbDisappearWS = useMuBiaoDisappearWS()

onMounted(() => {
  getMubiaoData()
})

// const checkedKeys = ref<Array<string | number>>([])

watch(checkedKeys, val => {
  console.log('watch', val)
  addMubiao(val)
})

const { showDetailsMubiao } = useMubiaoDetail()
const { showOrHideHisTraj } = useMBTrajectory()
const { mubiaoMap } = useEntity()

// const { showOrHideDdConfig } = useDaodan()
const { flyTo } = useEarth()
const latValue = {}
const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    onclick: () => {
      if (option.children) {
        return
      }
      setTimeout(() => {
        if (mubiaoMap.size > 0) {
          mubiaoMap.forEach((entity, key) => {
            const positions = entity.position._value
            const [lon, lat, height] = cartesian32LonLat(positions)
            const {
              dataId,
              // data: { geom },
            } = option
            if (checkedKeys.value.includes(dataId as string)) {
              flyTo({ lon, lat })
            }
          })
        }
      }, 500)
    },
  }
}
const renderSuffix = ({ option }: { option: TreeOption }) => {
  // console.log(option.data)
  if (!option.data) {
    return undefined
  }
  return h('div', { class: 'flex items-center gap-2 pr-2' }, [
    h(
      NButton,
      {
        text: true,
        size: 'tiny',
        type: 'info',
        onClick: () => showDetailsMubiao(option.data),
      },
      { default: () => '详情' }
    ),
    // option.data.targetType === '丙' &&
    //   h(
    //     NButton,
    //     {
    //       text: true,
    //       size: 'tiny',
    //       type: 'info',
    //       onClick: () => showOrHideDdConfig(option.data),
    //     },
    //     { default: () => '试验配置' }
    //   ),
    // option.data.targetType !== '丙' &&
    h(
      NButton,
      {
        text: true,
        size: 'tiny',
        type: 'info',
        onClick: () => showOrHideHisTraj(option.data),
      },
      { default: () => '轨迹回放' }
    ),
  ])
}
</script>

<template>
  <div class="flex flex-col gap-2 w-h-full">
    <!-- <heat-map /> -->
    <!-- <div class="flex items-center gap-2">
      <div class="whitespace-nowrap">国别</div>
      <n-select v-model:value="country" :options="countryOptions" />
      <div class="whitespace-nowrap">性质</div>
      <n-select v-model:value="type" :options="typeOptions" />
    </div>

    <div class="flex items-center gap-2">
      <div class="whitespace-nowrap">类型</div>
      <n-select v-model:value="type" :options="typeOptions" />
    </div> -->
    <!-- <n-data-table
      class="flex-1"
      :columns="columns"
      :data="data"
      :row-key="(rowData: Record<string, any>) => rowData.id"
      flex-height
      @update:checked-row-keys="handleCheck"
    /> -->
    <div class="h-0 flex-1">
      <tree
        :data="data"
        :key-field="'dataId'"
        :label-field="'nodeName'"
        v-model:checked="checkedKeys"
        showSearch
        :renderSuffix="renderSuffix"
        :nodeProps="nodeProps"
      />
    </div>

    <!-- :nodeProps="nodeProps" -->
  </div>
</template>

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