ts/src/views/Mubiao/index.vue

148 lines
4.0 KiB
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>