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'
import { useDaodan } from '../Daodan/daodan'

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 { showOrHideDdConfig } = useDaodan()
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"
      />
    </div>

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

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