|
|
@@ -8,9 +8,9 @@
|
|
|
:uniqueOpened="true"
|
|
|
default-active=""
|
|
|
class="el-menu-vertical-demo"
|
|
|
- text-color="#fff"
|
|
|
- background-color="#424242"
|
|
|
- active-text-color="#FFFFFF"
|
|
|
+ text-color="#303133"
|
|
|
+ background-color="#f8f9fa"
|
|
|
+ active-text-color="#409eff"
|
|
|
:collapse-transition="false"
|
|
|
>
|
|
|
<!-- 展开收缩控制按钮 -->
|
|
|
@@ -28,7 +28,7 @@
|
|
|
<i class="iconfont iconshuju iconfont2"></i>
|
|
|
<span>数据服务</span>
|
|
|
</template>
|
|
|
- <el-sub-menu v-for="(data,index) in server_config" :key="data.id" :index="data.id">
|
|
|
+ <el-sub-menu v-for="(data,index) in server_config" :key="data.id" :index="data.id" popper-append-to-body="false">
|
|
|
<template #title>{{data.name}}</template>
|
|
|
<div class="box" :index="index">
|
|
|
<div
|
|
|
@@ -110,24 +110,27 @@
|
|
|
<loading-bar></loading-bar>
|
|
|
<!-- 添加自定义服务组件 -->
|
|
|
<component
|
|
|
+ v-if="addService"
|
|
|
:is="addService"
|
|
|
:clear-callback="addCustomService"
|
|
|
:add-callback="addCallback"
|
|
|
:get-layer-name="getName"
|
|
|
></component>
|
|
|
<!-- viewer组件 -->
|
|
|
- <component :is="initViewer" :after-initviewer="removeLoad" :opening-animation="true"></component>
|
|
|
+ <component v-if="initViewer" :is="initViewer" :after-initviewer="removeLoad" :opening-animation="true"></component>
|
|
|
<!-- 分析功能组件 -->
|
|
|
<keep-alive>
|
|
|
<component
|
|
|
+ v-if="view"
|
|
|
:is="view"
|
|
|
+ :key="view"
|
|
|
:delete-callback="deleteCallback"
|
|
|
data-url="/data/netcdf/result_100_200_9_40.nc"
|
|
|
skylineSpatialAnalysisUrl="http://www.supermapol.com/realspace/services/spatialAnalysis-data_all/restjsr/spatialanalyst/geometry/3d/skylinesectorbody.json"
|
|
|
></component>
|
|
|
</keep-alive>
|
|
|
<!-- 地质体组件,单独展示，需要销毁 -->
|
|
|
- <component :is="view2"></component>
|
|
|
+ <component v-if="view2" :is="view2" :key="view2"></component>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
@@ -147,8 +150,6 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // activeIndex: "1",
|
|
|
- // activeIndex2: "1",
|
|
|
isCollapse: false,
|
|
|
asideWidth: "asideWidth1",
|
|
|
view: "",
|
|
|
@@ -248,7 +249,6 @@ export default {
|
|
|
case "TIANDITU":
|
|
|
imageryProvider = new Cesium.TiandituImageryProvider({
|
|
|
url: url,
|
|
|
- // mapStyle: Cesium.TiandituMapsStyle["IMG_C"],
|
|
|
token: "3fb1e9fda20ee995dc815c8243553ce8"
|
|
|
});
|
|
|
break;
|
|
|
@@ -286,10 +286,6 @@ export default {
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
- // if (type === "IMAGE") {
|
|
|
- // imageryLayerCollection.remove(layer);
|
|
|
- // return;
|
|
|
- // }
|
|
|
if (type != "GRIDIMAGERY") {
|
|
|
imageryLayerCollection.addImageryProvider(imageryProvider, 0);
|
|
|
imageryLayerCollection.remove(layer);
|
|
|
@@ -533,16 +529,15 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
document.getElementById("el-aside").classList.add("disable"); //禁止点击
|
|
|
- window.onload = () => {
|
|
|
+ // 直接初始化 viewer，不使用 window.onload
|
|
|
+ this.$nextTick(() => {
|
|
|
this.initViewer = "Sm3dViewer";
|
|
|
- // document.getElementById("el-aside").classList.remove("disable"); //解除禁止点击
|
|
|
- };
|
|
|
+ });
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
.container {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
@@ -553,7 +548,7 @@ export default {
|
|
|
|
|
|
/* 侧边栏宽度控制 */
|
|
|
.asideWidth1 {
|
|
|
- width: 246px !important;
|
|
|
+ width: 280px !important;
|
|
|
transition-duration: 0.3s;
|
|
|
height: 100% !important;
|
|
|
}
|
|
|
@@ -561,6 +556,8 @@ export default {
|
|
|
transition-duration: 0.5s;
|
|
|
width: 40px !important;
|
|
|
height: 100% !important;
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: center !important;
|
|
|
}
|
|
|
|
|
|
/* 确保el-container能够铺满整个容器 */
|
|
|
@@ -639,18 +636,111 @@ export default {
|
|
|
|
|
|
/* 侧边栏样式增强 */
|
|
|
.el-aside {
|
|
|
- background-color: #424242;
|
|
|
+ background-color: #f8f9fa;
|
|
|
overflow-y: scroll;
|
|
|
overflow-x: hidden;
|
|
|
scrollbar-width: none;
|
|
|
/* firefox */
|
|
|
-ms-overflow-style: none;
|
|
|
height: 100% !important;
|
|
|
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
.el-menu--collapse {
|
|
|
width: 40px;
|
|
|
height: 100% !important;
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse.el-menu) {
|
|
|
+ width: 40px !important;
|
|
|
+ margin: 0 auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-menu-item),
|
|
|
+ :deep(.el-menu--collapse .el-submenu__title),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__title) {
|
|
|
+ padding: 0 !important;
|
|
|
+ text-align: center !important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ position: relative !important;
|
|
|
+ left: 0 !important;
|
|
|
+ right: 0 !important;
|
|
|
+ width: 40px !important;
|
|
|
+ height: 45px !important;
|
|
|
+ margin: 0 auto !important;
|
|
|
+ /* 强制开启hover触发，解决折叠后无法识别子项问题 */
|
|
|
+ pointer-events: auto !important;
|
|
|
+ cursor: pointer !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu) {
|
|
|
+ width: 40px !important;
|
|
|
+ /* 二级弹框容器相对定位，让三级能基于它定位 */
|
|
|
+ position: relative !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-menu-item > *),
|
|
|
+ :deep(.el-menu--collapse .el-submenu__title > *),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__title > *) {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ position: static !important;
|
|
|
+ left: auto !important;
|
|
|
+ right: auto !important;
|
|
|
+ top: auto !important;
|
|
|
+ bottom: auto !important;
|
|
|
+ transform: none !important;
|
|
|
+ float: none !important;
|
|
|
+ display: inline-block !important;
|
|
|
+ width: auto !important;
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-menu-item i.rotate),
|
|
|
+ :deep(.el-menu--collapse .el-submenu__title i.rotate),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__title i.rotate) {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ display: inline-block !important;
|
|
|
+ text-align: center !important;
|
|
|
+ width: auto !important;
|
|
|
+ height: auto !important;
|
|
|
+ position: static !important;
|
|
|
+ left: auto !important;
|
|
|
+ right: auto !important;
|
|
|
+ transform: rotate(-90deg) !important;
|
|
|
+ line-height: normal !important;
|
|
|
+ float: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-submenu__title .iconfont2),
|
|
|
+ :deep(.el-menu--collapse .el-menu-item .iconfont2),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__title .iconfont2) {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ display: inline-block !important;
|
|
|
+ text-align: center !important;
|
|
|
+ width: auto !important;
|
|
|
+ height: auto !important;
|
|
|
+ position: static !important;
|
|
|
+ left: auto !important;
|
|
|
+ right: auto !important;
|
|
|
+ transform: none !important;
|
|
|
+ float: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-submenu__title span),
|
|
|
+ :deep(.el-menu--collapse .el-menu-item span),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__title span) {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-submenu__icon-arrow),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__icon-arrow) {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
.el-menu {
|
|
|
border-right: none;
|
|
|
height: 100% !important;
|
|
|
@@ -659,14 +749,43 @@ export default {
|
|
|
height: 45px;
|
|
|
line-height: 45px;
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.el-menu--collapse .el-menu-item),
|
|
|
+ :deep(.el-menu--collapse .el-submenu__title),
|
|
|
+ :deep(.el-menu--collapse .el-sub-menu__title) {
|
|
|
+ padding: 0 !important;
|
|
|
+ text-align: center !important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ position: relative !important;
|
|
|
+ left: 0 !important;
|
|
|
+ right: 0 !important;
|
|
|
+ width: 40px !important;
|
|
|
+ height: 45px !important;
|
|
|
+ line-height: normal !important;
|
|
|
+ }
|
|
|
|
|
|
#fold {
|
|
|
height: 35px;
|
|
|
transition-duration: 1s;
|
|
|
- color: #ffffff !important;
|
|
|
- padding-left: 8px !important;
|
|
|
+ color: #303133 !important;
|
|
|
+ padding: 0 !important;
|
|
|
text-align: center !important;
|
|
|
line-height: 35px !important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: center !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #fold.is-active {
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #303133 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ #fold:hover {
|
|
|
+ background-color: rgba(64, 158, 255, 0.1) !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -690,6 +809,14 @@ export default {
|
|
|
font-size: 20px !important;
|
|
|
margin-right: 10px;
|
|
|
vertical-align: middle;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+/* 子菜单项文字颜色 */
|
|
|
+.el-menu--vertical .el-sub-menu .el-menu-item {
|
|
|
+ color: #909399 !important;
|
|
|
+ font-size: 0.875rem !important;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
/* 滚动条隐藏 */
|
|
|
@@ -718,15 +845,21 @@ export default {
|
|
|
justify-content: center;
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
- color: #ffffff;
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
.img {
|
|
|
width: 100%;
|
|
|
height: 72px;
|
|
|
border-radius: 4px;
|
|
|
+ background-color: #585858;
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
}
|
|
|
.img:hover {
|
|
|
- border: 2px solid rgb(39, 148, 190);
|
|
|
+ border: 2px solid #409eff;
|
|
|
+ box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
|
|
|
+ transform: translateY(-2px);
|
|
|
}
|
|
|
.cross {
|
|
|
width: 25px;
|
|
|
@@ -740,10 +873,11 @@ export default {
|
|
|
position: absolute;
|
|
|
right: 0px;
|
|
|
top: 3px;
|
|
|
- color: #ffffff;
|
|
|
+ color: #303133;
|
|
|
+ z-index: 99999 !important;
|
|
|
}
|
|
|
[class^="el-icon-"]:hover {
|
|
|
- color: #fce5e5;
|
|
|
+ color: #409eff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -779,7 +913,52 @@ export default {
|
|
|
font-size: 20px !important;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+// ########### 关键修复：折叠状态下 二级弹框保留原位置 + 三级强制弹出 ###########
|
|
|
+// 1. 折叠状态二级弹框：强制保留原有正确位置，不做任何改动
|
|
|
+:deep(.el-menu--collapse .el-sub-menu > .el-sub-menu__popper) {
|
|
|
+ position: fixed !important;
|
|
|
+ margin-left: 0 !important;
|
|
|
+ transform: none !important;
|
|
|
+ z-index: 9998 !important;
|
|
|
+}
|
|
|
|
|
|
+// 2. 折叠状态二级弹框容器：hover时强制显示三级内容，核心触发逻辑
|
|
|
+:deep(.el-menu--collapse .el-sub-menu__popper) {
|
|
|
+ pointer-events: auto !important;
|
|
|
+ &:hover .box {
|
|
|
+ display: flex !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 3. 折叠状态三级内容（box）：强制定位在二级弹框右侧，顶对齐
|
|
|
+:deep(.el-menu--collapse .el-sub-menu__popper .box) {
|
|
|
+ position: absolute !important;
|
|
|
+ left: 100% !important; // 紧贴二级弹框右侧
|
|
|
+ top: 0 !important; // 和二级弹框顶对齐
|
|
|
+ z-index: 9999 !important;
|
|
|
+ width: 300px !important; // 适配你的imgbox布局
|
|
|
+ background: #f8f9fa !important;
|
|
|
+ border: 1px solid #e4e7ed !important;
|
|
|
+ border-left: none !important;
|
|
|
+ box-shadow: 2px 2px 10px rgba(0,0,0,0.05) !important;
|
|
|
+ padding: 10px !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ // 强制显示，解决折叠后被隐藏问题
|
|
|
+ display: flex !important;
|
|
|
+ pointer-events: auto !important;
|
|
|
+}
|
|
|
|
|
|
+// 4. 折叠状态三级imgbox布局适配：清除多余间距，正常显示
|
|
|
+:deep(.el-menu--collapse .el-sub-menu__popper .box .imgbox) {
|
|
|
+ margin: 0 10px 10px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+// 5. 展开状态：恢复原有布局，不影响任何效果
|
|
|
+:deep(.el-menu--not-collapse .el-sub-menu__popper .box) {
|
|
|
+ position: static !important;
|
|
|
+ width: 100% !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+</style>
|
WQQ