|
@@ -10,113 +10,72 @@
|
|
|
<el-menu-item-group>
|
|
<el-menu-item-group>
|
|
|
<template #title><span style="font-size: 1.45rem; font-weight: 600; color: #303133;">模型分类</span></template>
|
|
<template #title><span style="font-size: 1.45rem; font-weight: 600; color: #303133;">模型分类</span></template>
|
|
|
|
|
|
|
|
- <!-- 1. 水利工程实体 (核心工程类) -->
|
|
|
|
|
|
|
+ <!-- 水利工程模型 -->
|
|
|
<el-sub-menu index="1">
|
|
<el-sub-menu index="1">
|
|
|
<template #title>
|
|
<template #title>
|
|
|
- <el-icon><Menu /></el-icon>
|
|
|
|
|
- <span>水利工程实体</span>
|
|
|
|
|
|
|
+ <div @click.stop="handleMenuSelect('1')" style="cursor: pointer; width: 100%; display: flex; align-items: center;">
|
|
|
|
|
+ <el-icon><Menu /></el-icon>
|
|
|
|
|
+ <span>水利工程模型</span>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 1. 水利工程实体 -->
|
|
|
<el-sub-menu index="1-1">
|
|
<el-sub-menu index="1-1">
|
|
|
- <template #title>水库工程</template>
|
|
|
|
|
- <el-menu-item index="1-1-1">大坝</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-1-2">溢洪道</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-1-3">泄洪洞/输水洞</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-1-4">水电站厂房</el-menu-item>
|
|
|
|
|
|
|
+ <template #title>水利工程实体</template>
|
|
|
|
|
+ <el-menu-item index="1-1-1">水库工程</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-1-2">水闸工程</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-1-3">泵站工程</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-1-4">灌区工程</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-1-5">堤防与护岸工程</el-menu-item>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 2. 水系与水利设施 -->
|
|
|
<el-sub-menu index="1-2">
|
|
<el-sub-menu index="1-2">
|
|
|
- <template #title>水闸工程</template>
|
|
|
|
|
- <el-menu-item index="1-2-1">节制闸</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-2-2">分洪闸</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-2-3">进水闸/取水口</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-2-4">船闸</el-menu-item>
|
|
|
|
|
|
|
+ <template #title>水系水利设施</template>
|
|
|
|
|
+ <el-menu-item index="1-2-1">河流</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-2-2">湖泊与水库水面</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-2-3">渠道与输水管道</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-2-4">河口与海岸带</el-menu-item>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 3. 地理与环境要素 -->
|
|
|
<el-sub-menu index="1-3">
|
|
<el-sub-menu index="1-3">
|
|
|
- <template #title>泵站工程</template>
|
|
|
|
|
- <el-menu-item index="1-3-1">泵站主厂房</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-3-2">进出水建筑物</el-menu-item>
|
|
|
|
|
|
|
+ <template #title>地理环境要素</template>
|
|
|
|
|
+ <el-menu-item index="1-3-1">地形地貌</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-3-2">行政区划</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-3-3">重要地物</el-menu-item>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 4. 自然景观与生态 -->
|
|
|
<el-sub-menu index="1-4">
|
|
<el-sub-menu index="1-4">
|
|
|
- <template #title>灌区工程</template>
|
|
|
|
|
- <el-menu-item index="1-4-1">渡槽</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-4-2">倒虹吸</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-4-3">渠系建筑物 (分水闸、涵洞等)</el-menu-item>
|
|
|
|
|
|
|
+ <template #title>自然生态景观</template>
|
|
|
|
|
+ <el-menu-item index="1-4-1">湖泊湿地</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-4-2">森林公园</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-4-3">地质公园</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-4-4">海岸带景观</el-menu-item>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 5. 模型集与项目 -->
|
|
|
<el-sub-menu index="1-5">
|
|
<el-sub-menu index="1-5">
|
|
|
- <template #title>堤防与护岸工程</template>
|
|
|
|
|
- <el-menu-item index="1-5-1">防洪堤</el-menu-item>
|
|
|
|
|
- <el-menu-item index="1-5-2">护岸/护坡</el-menu-item>
|
|
|
|
|
|
|
+ <template #title>模型集与项目</template>
|
|
|
|
|
+ <el-menu-item index="1-5-1">待分类模型</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="1-5-2">XX市防洪排涝工程</el-menu-item>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
|
|
|
|
|
- <!-- 2. 水系与水利设施 (线性与面状水系) -->
|
|
|
|
|
|
|
+ <!-- 自定义服务 -->
|
|
|
<el-sub-menu index="2">
|
|
<el-sub-menu index="2">
|
|
|
<template #title>
|
|
<template #title>
|
|
|
- <el-icon><Menu /></el-icon>
|
|
|
|
|
- <span>水系水利设施</span>
|
|
|
|
|
|
|
+ <div @click.stop="handleMenuSelect('2')" style="cursor: pointer; width: 100%; display: flex; align-items: center;">
|
|
|
|
|
+ <el-icon><Menu /></el-icon>
|
|
|
|
|
+ <span>自定义服务</span>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
- <el-sub-menu index="2-1">
|
|
|
|
|
- <template #title>河流</template>
|
|
|
|
|
- <el-menu-item index="2-1-1">河道</el-menu-item>
|
|
|
|
|
- <el-menu-item index="2-1-2">滩地/湿地</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- <el-menu-item index="2-2">湖泊与水库水面</el-menu-item>
|
|
|
|
|
- <el-sub-menu index="2-3">
|
|
|
|
|
- <template #title>渠道与输水管道</template>
|
|
|
|
|
- <el-menu-item index="2-3-1">灌溉渠道</el-menu-item>
|
|
|
|
|
- <el-menu-item index="2-3-2">城市供排水管网 (可选)</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- <el-sub-menu index="2-4">
|
|
|
|
|
- <template #title>河口与海岸带</template>
|
|
|
|
|
- <el-menu-item index="2-4-1">河口</el-menu-item>
|
|
|
|
|
- <el-menu-item index="2-4-2">海堤/防波堤</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 3. 地理与环境要素 (基础地理与背景) -->
|
|
|
|
|
- <el-sub-menu index="3">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <el-icon><Menu /></el-icon>
|
|
|
|
|
- <span>地理环境要素</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- <el-sub-menu index="3-1">
|
|
|
|
|
- <template #title>地形地貌</template>
|
|
|
|
|
- <el-menu-item index="3-1-1">数字高程模型 (DEM)</el-menu-item>
|
|
|
|
|
- <el-menu-item index="3-1-2">地形晕渲图</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- <el-sub-menu index="3-2">
|
|
|
|
|
- <template #title>行政区划</template>
|
|
|
|
|
- <el-menu-item index="3-2-1">省级边界</el-menu-item>
|
|
|
|
|
- <el-menu-item index="3-2-2">市级边界</el-menu-item>
|
|
|
|
|
- <el-menu-item index="3-2-3">县级边界</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- <el-sub-menu index="3-3">
|
|
|
|
|
- <template #title>重要地物</template>
|
|
|
|
|
- <el-menu-item index="3-3-1">城镇/村庄模型</el-menu-item>
|
|
|
|
|
- <el-menu-item index="3-3-2">交通设施 (桥梁、道路)</el-menu-item>
|
|
|
|
|
- <el-menu-item index="3-3-3">植被覆盖</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 4. 自然景观与生态 (自然与生态类) -->
|
|
|
|
|
- <el-sub-menu index="4">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <el-icon><Menu /></el-icon>
|
|
|
|
|
- <span>自然生态景观</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- <el-menu-item index="4-1">湖泊湿地</el-menu-item>
|
|
|
|
|
- <el-menu-item index="4-2">森林公园</el-menu-item>
|
|
|
|
|
- <el-menu-item index="4-3">地质公园</el-menu-item>
|
|
|
|
|
- <el-menu-item index="4-4">海岸带景观</el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 5. 模型集与项目 (管理与组织类) -->
|
|
|
|
|
- <el-sub-menu index="5">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <el-icon><Menu /></el-icon>
|
|
|
|
|
- <span>模型集与项目</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- <el-menu-item index="5-1">待分类模型</el-menu-item>
|
|
|
|
|
- <el-menu-item index="5-2">XX市防洪排涝工程</el-menu-item>
|
|
|
|
|
|
|
+ <el-menu-item index="2-1">场景</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="2-2">S3M</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="2-3">影像</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="2-4">地形</el-menu-item>
|
|
|
|
|
+ <el-menu-item index="2-5">矢量瓦片</el-menu-item>
|
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
|
</el-menu-item-group>
|
|
</el-menu-item-group>
|
|
|
</el-menu>
|
|
</el-menu>
|
|
@@ -125,7 +84,7 @@
|
|
|
<!-- 右侧内容区域 -->
|
|
<!-- 右侧内容区域 -->
|
|
|
<section class="right-content">
|
|
<section class="right-content">
|
|
|
<!-- 面包屑导航已移除 -->
|
|
<!-- 面包屑导航已移除 -->
|
|
|
- <component :is="activeComponent" />
|
|
|
|
|
|
|
+ <ShuiliGongcheng :selected-category="selectedCategory" />
|
|
|
</section>
|
|
</section>
|
|
|
</main>
|
|
</main>
|
|
|
<!-- 页面底部 -->
|
|
<!-- 页面底部 -->
|
|
@@ -151,15 +110,17 @@ const JidianShebeiRaw = markRaw(JidianShebei)
|
|
|
const ShuiliSheshiRaw = markRaw(ShuiliSheshi)
|
|
const ShuiliSheshiRaw = markRaw(ShuiliSheshi)
|
|
|
|
|
|
|
|
const activeMenu = ref('1')
|
|
const activeMenu = ref('1')
|
|
|
-const activeMenuName = ref('水利工程')
|
|
|
|
|
|
|
+const activeMenuName = ref('水利工程模型')
|
|
|
|
|
+const selectedCategory = ref(null)
|
|
|
const activeComponent = ref(ShuiliGongchengRaw)
|
|
const activeComponent = ref(ShuiliGongchengRaw)
|
|
|
|
|
|
|
|
const handleOpen = (key, keyPath) => {
|
|
const handleOpen = (key, keyPath) => {
|
|
|
console.log('Menu opened:', key, keyPath)
|
|
console.log('Menu opened:', key, keyPath)
|
|
|
if (key === '1') {
|
|
if (key === '1') {
|
|
|
activeMenu.value = key
|
|
activeMenu.value = key
|
|
|
- activeMenuName.value = '水利工程'
|
|
|
|
|
|
|
+ activeMenuName.value = '水利工程模型'
|
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
|
|
|
+ selectedCategory.value = null
|
|
|
console.log('Set active component to ShuiliGongcheng')
|
|
console.log('Set active component to ShuiliGongcheng')
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -173,27 +134,38 @@ const handleMenuSelect = (key) => {
|
|
|
activeMenu.value = key
|
|
activeMenu.value = key
|
|
|
|
|
|
|
|
// 根据选择的菜单项更新活动菜单名称和组件
|
|
// 根据选择的菜单项更新活动菜单名称和组件
|
|
|
- if (key.startsWith('1')) {
|
|
|
|
|
- activeMenuName.value = '水利工程实体'
|
|
|
|
|
- activeComponent.value = ShuiliGongchengRaw
|
|
|
|
|
- } else if (key.startsWith('2')) {
|
|
|
|
|
- activeMenuName.value = '水系与水利设施'
|
|
|
|
|
- activeComponent.value = ShuiliSheshiRaw
|
|
|
|
|
- } else if (key.startsWith('3')) {
|
|
|
|
|
- activeMenuName.value = '地理与环境要素'
|
|
|
|
|
|
|
+ if (key.startsWith('2')) {
|
|
|
|
|
+ // 自定义服务及其子菜单
|
|
|
|
|
+ activeMenuName.value = '自定义服务'
|
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
|
- } else if (key.startsWith('4')) {
|
|
|
|
|
- activeMenuName.value = '自然景观与生态'
|
|
|
|
|
- activeComponent.value = ShuiliSheshiRaw
|
|
|
|
|
- } else if (key.startsWith('5')) {
|
|
|
|
|
- activeMenuName.value = '模型集与项目'
|
|
|
|
|
|
|
+ selectedCategory.value = key
|
|
|
|
|
+ } else if (key.startsWith('1')) {
|
|
|
|
|
+ // 水利工程模型及其子菜单
|
|
|
|
|
+ if (key === '1') {
|
|
|
|
|
+ activeMenuName.value = '水利工程模型'
|
|
|
|
|
+ selectedCategory.value = null
|
|
|
|
|
+ } else if (key.startsWith('1-1')) {
|
|
|
|
|
+ activeMenuName.value = '水利工程实体'
|
|
|
|
|
+ } else if (key.startsWith('1-2')) {
|
|
|
|
|
+ activeMenuName.value = '水系水利设施'
|
|
|
|
|
+ } else if (key.startsWith('1-3')) {
|
|
|
|
|
+ activeMenuName.value = '地理环境要素'
|
|
|
|
|
+ } else if (key.startsWith('1-4')) {
|
|
|
|
|
+ activeMenuName.value = '自然生态景观'
|
|
|
|
|
+ } else if (key.startsWith('1-5')) {
|
|
|
|
|
+ activeMenuName.value = '模型集与项目'
|
|
|
|
|
+ }
|
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
|
|
|
+ // 设置选中的分类,用于筛选模型
|
|
|
|
|
+ selectedCategory.value = key
|
|
|
} else {
|
|
} else {
|
|
|
- activeMenuName.value = '水利工程'
|
|
|
|
|
|
|
+ activeMenuName.value = '水利工程模型'
|
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
activeComponent.value = ShuiliGongchengRaw
|
|
|
|
|
+ selectedCategory.value = null
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
console.log('Active component:', activeComponent.value)
|
|
console.log('Active component:', activeComponent.value)
|
|
|
|
|
+ console.log('Selected category:', selectedCategory.value)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|