refactor: 更新地面站和卫星状态接口,优化类型命名和属性结构
This commit is contained in:
@ -83,6 +83,7 @@ export default defineConfigWithVueTs(
|
|||||||
{
|
{
|
||||||
rules: {
|
rules: {
|
||||||
'perfectionist/sort-classes': 'off',
|
'perfectionist/sort-classes': 'off',
|
||||||
|
"perfectionist/sort-interfaces": 'off',
|
||||||
'perfectionist/sort-objects': 'off',
|
'perfectionist/sort-objects': 'off',
|
||||||
'perfectionist/sort-imports': ['error'],
|
'perfectionist/sort-imports': ['error'],
|
||||||
'perfectionist/sort-modules':'off'
|
'perfectionist/sort-modules':'off'
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { GroundStationState, SatelliteState } from './useHCesiumManager.types';
|
import type { HCesiumManagerStationState, HCesiumManagerSatelliteState } from './useHCesiumManager.types';
|
||||||
|
|
||||||
import { useHCesiumManager } from './useHCesiumManager';
|
import { useHCesiumManager } from './useHCesiumManager';
|
||||||
import { useHCesiumManagerSatellite } from './useHCesiumManager.卫星';
|
import { useHCesiumManagerSatellite } from './useHCesiumManager.卫星';
|
||||||
@ -8,8 +8,8 @@ import { useHCesiumManagerStation } from './useHCesiumManager.站点';
|
|||||||
import 'cesium/Build/Cesium/Widgets/widgets.css';
|
import 'cesium/Build/Cesium/Widgets/widgets.css';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
groundStationState?: GroundStationState;
|
groundStationState?: HCesiumManagerStationState;
|
||||||
satelliteState?: SatelliteState;
|
satelliteState?: HCesiumManagerSatelliteState;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
// 1. 管理 Cesium Viewer 实例生命周期
|
// 1. 管理 Cesium Viewer 实例生命周期
|
||||||
@ -19,7 +19,7 @@ const { hCesiumViewerManager } = useHCesiumManager('cesium-container'); // 获
|
|||||||
// 将实例的 getter 和 props 的 getter 传递给组合函数
|
// 将实例的 getter 和 props 的 getter 传递给组合函数
|
||||||
useHCesiumManagerStation(
|
useHCesiumManagerStation(
|
||||||
() => hCesiumViewerManager, // 传递 Manager 实例的 getter
|
() => hCesiumViewerManager, // 传递 Manager 实例的 getter
|
||||||
() => props.groundStationState?.groundStations, // 从新的 prop 中获取列表
|
() => props.groundStationState?.stations, // 从新的 prop 中获取列表
|
||||||
() => props.groundStationState?.selectedIds, // 从新的 prop 中获取选中 ID
|
() => props.groundStationState?.selectedIds, // 从新的 prop 中获取选中 ID
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -4,9 +4,9 @@ import type { I卫星, I站点 } from './managers/HCesiumManager.types'; // 从
|
|||||||
* 地面站状态接口
|
* 地面站状态接口
|
||||||
* 包含地面站列表和当前选中的地面站 ID 列表
|
* 包含地面站列表和当前选中的地面站 ID 列表
|
||||||
*/
|
*/
|
||||||
export interface GroundStationState {
|
export interface HCesiumManagerStationState {
|
||||||
/** 地面站配置数组 */
|
/** 地面站配置数组 */
|
||||||
groundStations: I站点[];
|
stations: I站点[];
|
||||||
/** 选中的地面站 ID 集合 */
|
/** 选中的地面站 ID 集合 */
|
||||||
selectedIds: Set<string>;
|
selectedIds: Set<string>;
|
||||||
}
|
}
|
||||||
@ -15,7 +15,7 @@ export interface GroundStationState {
|
|||||||
* 卫星状态接口
|
* 卫星状态接口
|
||||||
* 包含卫星列表和当前选中的卫星 ID 列表
|
* 包含卫星列表和当前选中的卫星 ID 列表
|
||||||
*/
|
*/
|
||||||
export interface SatelliteState {
|
export interface HCesiumManagerSatelliteState {
|
||||||
/** 卫星配置数组 */
|
/** 卫星配置数组 */
|
||||||
satellites: I卫星[];
|
satellites: I卫星[];
|
||||||
/** 选中的卫星 ID 集合 */
|
/** 选中的卫星 ID 集合 */
|
||||||
|
@ -4,21 +4,21 @@ meta:
|
|||||||
</route>
|
</route>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { GroundStationState, SatelliteState } from '@/components/h-cesium-viewer/useHCesiumManager.types';
|
import type { HCesiumManagerSatelliteState, HCesiumManagerStationState } from '@/components/h-cesium-viewer/useHCesiumManager.types';
|
||||||
|
|
||||||
// 地面站和选中状态
|
// 地面站和选中状态
|
||||||
const groundStationState = reactive<GroundStationState>({
|
const groundStationState = reactive<HCesiumManagerStationState>({
|
||||||
groundStations: [],
|
stations: [],
|
||||||
selectedIds: new Set<string>(),
|
selectedIds: new Set<string>(),
|
||||||
});
|
});
|
||||||
groundStationState.groundStations = [
|
groundStationState.stations = [
|
||||||
{ height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
|
{ height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
|
||||||
{ height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
|
{ height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
|
||||||
{ height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
|
{ height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
|
||||||
];
|
];
|
||||||
|
|
||||||
// >>>>>>>>> 卫星状态管理 >>>>>>>>>
|
// >>>>>>>>> 卫星状态管理 >>>>>>>>>
|
||||||
const satelliteState = reactive<SatelliteState>({
|
const satelliteState = reactive<HCesiumManagerSatelliteState>({
|
||||||
satellites: [],
|
satellites: [],
|
||||||
selectedIds: new Set<string>(),
|
selectedIds: new Set<string>(),
|
||||||
});
|
});
|
||||||
@ -63,7 +63,7 @@ const selectedSatelliteIdsArray = computed({
|
|||||||
|
|
||||||
// 计算 Checkbox Group 的 options
|
// 计算 Checkbox Group 的 options
|
||||||
const stationCheckboxOptions = computed(() =>
|
const stationCheckboxOptions = computed(() =>
|
||||||
groundStationState.groundStations.map((station) => ({ label: station.name, value: station.id })),
|
groundStationState.stations.map((station) => ({ label: station.name, value: station.id })),
|
||||||
);
|
);
|
||||||
|
|
||||||
// 添加一个随机站点
|
// 添加一个随机站点
|
||||||
@ -72,7 +72,7 @@ const addRandomStation = () => {
|
|||||||
const randomLon = Math.random() * 360 - 180; // -180 to 180
|
const randomLon = Math.random() * 360 - 180; // -180 to 180
|
||||||
const randomLat = Math.random() * 180 - 90; // -90 to 90
|
const randomLat = Math.random() * 180 - 90; // -90 to 90
|
||||||
const randomHeight = Math.random() * 1000; // 0 to 1000 meters
|
const randomHeight = Math.random() * 1000; // 0 to 1000 meters
|
||||||
groundStationState.groundStations.push({
|
groundStationState.stations.push({
|
||||||
height: randomHeight,
|
height: randomHeight,
|
||||||
id: randomId,
|
id: randomId,
|
||||||
latitude: randomLat,
|
latitude: randomLat,
|
||||||
@ -81,13 +81,13 @@ const addRandomStation = () => {
|
|||||||
});
|
});
|
||||||
// 创建新的 Set 以触发响应式更新
|
// 创建新的 Set 以触发响应式更新
|
||||||
groundStationState.selectedIds = new Set([randomId, ...groundStationState.selectedIds]); // ESLint: 调整顺序
|
groundStationState.selectedIds = new Set([randomId, ...groundStationState.selectedIds]); // ESLint: 调整顺序
|
||||||
consola.info('添加随机站点:', groundStationState.groundStations.at(-1)); // 使用 .at() 访问最后一个元素
|
consola.info('添加随机站点:', groundStationState.stations.at(-1)); // 使用 .at() 访问最后一个元素
|
||||||
};
|
};
|
||||||
|
|
||||||
// 移除最后一个站点
|
// 移除最后一个站点
|
||||||
const removeLastStation = () => {
|
const removeLastStation = () => {
|
||||||
if (groundStationState.groundStations.length > 0) {
|
if (groundStationState.stations.length > 0) {
|
||||||
const removedStation = groundStationState.groundStations.pop();
|
const removedStation = groundStationState.stations.pop();
|
||||||
if (removedStation) {
|
if (removedStation) {
|
||||||
consola.info('移除站点:', removedStation);
|
consola.info('移除站点:', removedStation);
|
||||||
// 同时从选中项中移除
|
// 同时从选中项中移除
|
||||||
@ -101,7 +101,7 @@ const removeLastStation = () => {
|
|||||||
|
|
||||||
// 清空所有选中项
|
// 清空所有选中项
|
||||||
const clearAllStations = () => {
|
const clearAllStations = () => {
|
||||||
groundStationState.groundStations = [];
|
groundStationState.stations = [];
|
||||||
groundStationState.selectedIds = new Set(); // 创建新的空 Set 以触发响应式更新
|
groundStationState.selectedIds = new Set(); // 创建新的空 Set 以触发响应式更新
|
||||||
consola.info('清空所有站点');
|
consola.info('清空所有站点');
|
||||||
};
|
};
|
||||||
@ -122,21 +122,21 @@ const selectedStationIdsArray = computed({
|
|||||||
<a-card title="地面站控制" size="small">
|
<a-card title="地面站控制" size="small">
|
||||||
<div class="space-x-2">
|
<div class="space-x-2">
|
||||||
<a-button size="small" type="primary" @click="addRandomStation">添加随机站点</a-button>
|
<a-button size="small" type="primary" @click="addRandomStation">添加随机站点</a-button>
|
||||||
<a-button size="small" @click="removeLastStation" :disabled="groundStationState.groundStations.length === 0"
|
<a-button size="small" @click="removeLastStation" :disabled="groundStationState.stations.length === 0"
|
||||||
>移除最后一个</a-button
|
>移除最后一个</a-button
|
||||||
>
|
>
|
||||||
<a-button
|
<a-button
|
||||||
size="small"
|
size="small"
|
||||||
danger
|
danger
|
||||||
@click="clearAllStations"
|
@click="clearAllStations"
|
||||||
:disabled="groundStationState.groundStations.length === 0"
|
:disabled="groundStationState.stations.length === 0"
|
||||||
>清空所有</a-button
|
>清空所有</a-button
|
||||||
>
|
>
|
||||||
<span>当前站点数: {{ groundStationState.groundStations.length }}</span>
|
<span>当前站点数: {{ groundStationState.stations.length }}</span>
|
||||||
<span> | 选中站点数: {{ groundStationState.selectedIds.size }}</span>
|
<span> | 选中站点数: {{ groundStationState.selectedIds.size }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 站点选择 -->
|
<!-- 站点选择 -->
|
||||||
<div mt-2 v-if="groundStationState.groundStations.length > 0">
|
<div mt-2 v-if="groundStationState.stations.length > 0">
|
||||||
<span class="mr-2">选择要显示的站点:</span>
|
<span class="mr-2">选择要显示的站点:</span>
|
||||||
<a-checkbox-group v-model:value="selectedStationIdsArray" :options="stationCheckboxOptions" />
|
<a-checkbox-group v-model:value="selectedStationIdsArray" :options="stationCheckboxOptions" />
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user