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 { getMubiao, getMubiaoPos } from '@/api/Mubiao'
// 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'

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

const useMbDisappearWS = useMuBiaoDisappearWS()

const getMubiaoData = async () => {
  const { code, data: resData } = await getMubiao()
  if (code === '200') {
    data.value = [resData]
  }
}

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

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

watch(checkedKeys, val => {
  addMubiao(val)
})

const { showDetailsMubiao } = useMubiaoDetail()
const { showOrHideHisTraj } = useMBTrajectory()
const renderSuffix = ({ option }: { option: TreeOption }) => {
  // console.log(option.data)
  return option.data
    ? h('div', { class: 'flex items-center gap-2 pr-2' }, [
      h(
        NButton,
        {
          text: true,
          size: 'tiny',
          type: 'info',
          onClick: () => showDetailsMubiao(option.data),
        },
        { default: () => '详情' }
      ),
      // h(
      //   NButton,
      //   {
      //     text: true,
      //     size: 'tiny',
      //     type: 'info',
      //     onClick: () => showDetailsMubiao(option.data),
      //   },
      //   { default: () => '载荷' }
      // ),
      h(
        NButton,
        {
          text: true,
          size: 'tiny',
          type: 'info',
          onClick: () => showOrHideHisTraj(option.data),
        },
        { default: () => '轨迹回放' }
      ),
    ])
    : undefined
}
</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" />
    </div>

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

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