examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

fix: 整理代码

Browse Source
This commit is contained in:
严浩
2025-04-01 16:33:02 +08:00
parent 99b5aeb042
commit 21660cd9fa
2 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/h-cesium-viewer/index.vue
View File

@ -1,14 +1,11 @@
<script setup lang="ts">
import 'cesium/Build/Cesium/Widgets/widgets.css';
// GroundStationOptions 不再直接使用，已在 types.ts 中被 GroundStationState 引用
import type { GroundStationState } from './types'; // 从 types.ts 导入
import type { GroundStationState } from './types';
import { useHCesiumViewerCls } from './useHCesiumViewerCls';
import { useHCesiumViewerClsGroundStation } from './useHCesiumViewerClsGroundStation';
// GroundStationState 接口已移至 types.ts
const props = defineProps<{
groundStationState?: GroundStationState;
}>();

25
src/pages/cesium-viewer.page.vue
View File

@ -4,22 +4,21 @@ meta:
</route>
<script setup lang="ts">
// GroundStationOptions 不再直接使用，已在 types.ts 中被 GroundStationState 引用
import type { GroundStationState } from '@/components/h-cesium-viewer/types'; // 导入共享的接口
import type { GroundStationState } from '@/components/h-cesium-viewer/types';
// 使用 reactive 管理地面站和选中状态
// 地面站和选中状态
const groundStationState = reactive<GroundStationState>({
// 使用导入的接口
groundStations: [
{ 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: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
],
groundStations: [],
selectedIds: [],
});
groundStationState.groundStations = [
{ 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: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
];
// 计算 Checkbox Group 的 options
const stationOptions = computed(() =>
const stationCheckboxOptions = computed(() =>
groundStationState.groundStations.map((station) => ({ label: station.name, value: station.id })),
);
@ -74,15 +73,15 @@ const clearAllStations = () => {
<span>当前站点数: {{ groundStationState.groundStations.length }}</span>
<span> | 选中站点数: {{ groundStationState.selectedIds.length }}</span>
</div>
<!-- 新增：站点选择区域 -->
<!-- 站点选择 -->
<div v-if="groundStationState.groundStations.length > 0">
<span class="mr-2">选择要高亮的站点:</span>
<a-checkbox-group v-model:value="groundStationState.selectedIds" :options="stationOptions" />
<a-checkbox-group v-model:value="groundStationState.selectedIds" :options="stationCheckboxOptions" />
</div>
</div>
<div class="flex-grow w-full rounded-lg border overflow-hidden">
<!-- 将响应式列表和选中 ID 列表绑定到 prop -->
<h-cesium-viewer :ground-station-state="groundStationState">
<h-cesium-viewer :ground-station-state>
<div class="absolute top-0 left-0 z-10 p-2 bg-black/30 rounded-br-lg">
<span class="text-white text-xs">叠加 UI 示例</span>
</div>