ts/src/views/Daodan/index.jsx

88 lines
2.7 KiB
React
Raw Normal View History

2025-01-23 01:05:13 +00:00
import { NTabs, NTabPane, NButton, NScrollbar } from 'naive-ui'
import TrajTable from './components/TrajTable'
import TrajUpload from './components/TrajUpload'
import Panel from '@/components/Panel/index.vue'
import { useDaodan } from './daodan'
const panels = ['手动配置', 'STK轨迹文件配置']
export default defineComponent({
setup() {
const { daodanData, showOrHideDdConfig } = useDaodan()
const name = ref('手动配置')
const data = ref([
{
name: '起始点',
lon: 120,
lat: 21,
alt: 0,
time: 1183135260000,
},
{
name: '中间特征点',
lon: 120,
lat: 21,
alt: 0,
time: 1183135260000,
detached: false,
},
{
name: '落点',
lon: 120,
lat: 21,
alt: 0,
time: 1183135260000,
},
])
const handleClose = () => {}
return () => (
<div>
<Panel title={`${daodanData.value.targetName}配置`}>
<div class="flex h-full w-full flex-col gap-2 p-2">
<NTabs
class="flex h-[calc(100%-42px)] flex-col"
v-model:value={name.value}
type="card"
tab-style="min-width: 80px;"
onClose={handleClose}
>
{panels.map(panel => (
<NTabPane
class="flex-1 overflow-y-auto rounded-b-[var(--n-tab-border-radius)] border border-[var(--n-tab-border-color)] border-t-transparent"
key={panel}
tab={panel}
name={panel}
>
<NScrollbar>
<div class="px-4 pb-4">
<div class="detail-container">
{panel === '手动配置' ? (
<>
<TrajTable title="轨迹点" data={data.value} />
<TrajTable title="拦截弹" data={data.value} />
</>
) : (
<>
<TrajUpload title="轨迹点" />
<TrajUpload title="拦截弹" />
</>
)}
</div>
</div>
</NScrollbar>
</NTabPane>
))}
</NTabs>
<div class="flex justify-end gap-2">
<NButton type="primary" onClick={() => showOrHideDdConfig({})}>
确认
</NButton>
<NButton onClick={() => showOrHideDdConfig({})}>取消</NButton>
</div>
</div>
</Panel>
</div>
)
},
})