<template>
|
<mars-pannel :visible="true" right="10" top="10">
|
<a-space>
|
<mars-button @click="locate">定位至卫星</mars-button>
|
<span class="mars-pannel-item-label">参考系</span>
|
<a-checkbox v-model:checked="formState.enabledShowMatrix" @change="chkShowModelMatrix">显示/隐藏</a-checkbox>
|
</a-space>
|
<table class="mars-table tb-border f-mt">
|
<tr>
|
<td class="nametd">名称</td>
|
<td id="td_name">{{ formState.name }}</td>
|
</tr>
|
<tr>
|
<td class="nametd">TLE1</td>
|
<td id="td_tle1">{{ formState.tle1 }}</td>
|
</tr>
|
<tr>
|
<td class="nametd">TLE2</td>
|
<td id="td_tle2">{{ formState.tle2 }}</td>
|
</tr>
|
<tr>
|
<td class="nametd">时间</td>
|
<td id="td_time">{{ formState.time }}</td>
|
</tr>
|
|
<tr>
|
<td class="nametd">经度</td>
|
<td id="td_jd">{{ formState.td_jd }}</td>
|
</tr>
|
<tr>
|
<td class="nametd">经度</td>
|
<td id="td_wd">{{ formState.td_wd }}</td>
|
</tr>
|
<tr>
|
<td class="nametd">高程</td>
|
<td id="td_gd">{{ formState.td_gd }}</td>
|
</tr>
|
</table>
|
</mars-pannel>
|
</template>
|
|
<script lang="ts" setup>
|
import { reactive } from "vue"
|
import type { UnwrapRef } from "vue"
|
import * as mapWork from "./map.js"
|
|
interface FormState {
|
enabledShowMatrix: boolean // 参考轴系
|
name: string
|
tle1: string
|
tle2: string
|
time: string
|
td_jd: number
|
td_wd: number
|
td_gd: number
|
}
|
|
const formState: UnwrapRef<FormState> = reactive({
|
enabledShowMatrix: false,
|
name: "",
|
tle1: "",
|
tle2: "",
|
time: "",
|
td_jd: 0,
|
td_wd: 0,
|
td_gd: 0
|
})
|
|
mapWork.eventTarget.on("satelliteChange", (e: any) => {
|
const nowData = e.weixinData
|
formState.name = nowData.name
|
formState.tle1 = nowData.tle1
|
formState.tle2 = nowData.tle2
|
formState.time = nowData.time
|
formState.td_jd = nowData.td_jd
|
formState.td_wd = nowData.td_wd
|
formState.td_gd = nowData.td_gd
|
})
|
|
// 定位至卫星
|
const locate = () => {
|
mapWork.locate()
|
}
|
|
// 参考轴系显示与隐藏
|
const chkShowModelMatrix = () => {
|
mapWork.chkShowModelMatrix(formState.enabledShowMatrix)
|
}
|
</script>
|
<style scoped lang="less">
|
th.column-money,
|
td.column-money {
|
text-align: right !important;
|
}
|
.ant-slider {
|
width: 110px;
|
}
|
.mars-table {
|
width: 280px;
|
border-collapse: collapse;
|
border-spacing: 0;
|
}
|
|
.mars-table tr td {
|
padding: 5px 10px;
|
text-align: left;
|
}
|
|
.mars-table tr td:first-child {
|
border-left: none;
|
}
|
|
.mars-table .nametd {
|
padding: 5px 20px 5px 10px;
|
}
|
.tb-border {
|
border: 1px solid #4db3ff70;
|
}
|
|
.tb-border tr td {
|
border: 1px solid #4db3ff70;
|
}
|
</style>
|
