闸门启动弹框和启闭机炸开弹框样式调整

RuoYi-Vue3/src/materials/StylizedWaterMaterial.js

@@ -92,8 +92,8 @@ czm_material czm_getMaterial(czm_materialInput materialInput)
     vec3 finalColor = waterCol * lighting;
     finalColor += specular * sunLight * 0.4;
 
-    // 天空反射 - 简化：直接用 UV 采样，加入法线扰动
-    vec2 skyUV = st * 0.5 + finalNormal.xy * 0.15 + time * 0.02;
+    // 天空反射 - 固定位置，只有法线扰动
+    vec2 skyUV = st * 0.5 + finalNormal.xy * 0.15;
     skyUV = fract(skyUV);
     vec3 skyColor = texture2D(uSwSkyTexture, skyUV).rgb;
     

RuoYi-Vue3/src/supermap-cesium-module/business-scenes/JuKouShuiZhaScene.js

@@ -6,6 +6,8 @@ import waterNormal3Url from '../../texture/Water_3_Normal.PNG';
 import skyTextureUrl from '../../texture/sky.jpg';
 import { createWaterFoamPrimitive } from '../../materials/WaterFoamMaterial.js';
 import { createStylizedWaterMaterial, destroyStylizedWaterAnimation } from '../../materials/StylizedWaterMaterial.js';
+// 导入启闭机图标
+import qibiijiIcon from '../../assets/images/启闭机.png';
 
 /**
  * 超图iClient3D 100%可用 水闸闸门控制
@@ -52,7 +54,7 @@ export const JuKouSceneConfig = {
     longitude: 119.144081,
     latitude: 25.867756,
     height: 42,
-    image: '/img/svg/logo.svg',
+    image: qibiijiIcon,
     width: 40,
     height: 40
   }

RuoYi-Vue3/src/supermap-cesium-module/components/ModelDisassemblyDialog.vue

@@ -0,0 +1,177 @@
+<template>
+    <el-dialog
+      v-model="dialogVisible"
+      title="模型拆解"
+      width="1000px"
+      class="model-disassembly-dialog"
+      top="50vh"
+      destroy-on-close
+      :append-to-body="false"
+      :modal-append-to-body="false"
+      @close="handleClose"
+    >
+      <div class="dialog-content">
+        <ThreeModelViewer 
+          :model-path="modelPath"
+          :model-name="modelName"
+          :auto-load="true"
+        />
+      </div>
+    </el-dialog>
+</template>
+
+<script>
+import ThreeModelViewer from "@/components/ThreeModelViewer/ModelViewer.vue";
+
+export default {
+  name: "ModelDisassemblyDialog",
+  components: {
+    ThreeModelViewer
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    modelPath: {
+      type: String,
+      default: '/models/启闭机.glb'
+    },
+    modelName: {
+      type: String,
+      default: '启闭机模型'
+    },
+    // 场景图标配置
+    iconConfig: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['close', 'icon-click'],
+  data() {
+    return {
+      dialogVisible: this.visible,
+      sceneModelIconEntity: null,
+      sceneModelIconHandler: null
+    };
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val;
+    },
+    dialogVisible(val) {
+      if (!val) {
+        this.$emit('close');
+      }
+    },
+    // 监听图标配置变化
+    iconConfig: {
+      handler(config) {
+        if (config) {
+          this.addSceneModelIcon(config);
+        } else {
+          this.removeSceneModelIcon();
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close');
+    },
+
+    // 添加场景模型拆解图标
+    addSceneModelIcon(config) {
+      if (!window.viewer || !config) return;
+
+      const Cesium = window.Cesium;
+      
+      // 如果已存在图标，先移除
+      this.removeSceneModelIcon();
+      
+      // 创建图标实体
+      const modelIcon = window.viewer.entities.add({
+        name: '模型拆解',
+        position: Cesium.Cartesian3.fromDegrees(config.longitude, config.latitude, config.height || 0),
+        billboard: {
+          image: config.image || '/img/svg/logo.svg',
+          width: config.width || 32,
+          height: config.height || 32,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          pixelOffset: new Cesium.Cartesian2(0, -16),
+          // 禁用深度测试，让图标始终可见不被模型遮挡
+          disableDepthTestDistance: Number.POSITIVE_INFINITY
+        },
+        description: '点击查看模型拆解'
+      });
+      
+      // 保存实体引用
+      this.sceneModelIconEntity = modelIcon;
+      
+      // 使用独立的点击处理器（避免覆盖全局点击事件）
+      const handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);
+      handler.setInputAction((movement) => {
+        const pickedObject = window.viewer.scene.pick(movement.position);
+        if (Cesium.defined(pickedObject) && pickedObject.id === modelIcon) {
+          this.dialogVisible = true;
+          this.$emit('icon-click');
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      
+      // 保存处理器引用
+      this.sceneModelIconHandler = handler;
+    },
+
+    // 移除场景模型拆解图标
+    removeSceneModelIcon() {
+      // 移除实体
+      if (this.sceneModelIconEntity) {
+        if (window.viewer) {
+          window.viewer.entities.remove(this.sceneModelIconEntity);
+        }
+        this.sceneModelIconEntity = null;
+      }
+      
+      // 销毁点击处理器
+      if (this.sceneModelIconHandler) {
+        this.sceneModelIconHandler.destroy();
+        this.sceneModelIconHandler = null;
+      }
+    }
+  },
+  beforeUnmount() {
+    // 组件卸载时清理图标
+    this.removeSceneModelIcon();
+  }
+};
+</script>
+
+<style scoped>
+.dialog-content {
+  width: 100%;
+  height: 600px;
+  max-height: calc(80vh - 100px);
+}
+
+.dialog-content :deep(.model-viewer-container) {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style>
+/* 非 scoped 样式，确保能覆盖 Element Plus 的 dialog 定位 */
+/* class="model-disassembly-dialog" 是直接应用在 el-dialog 元素上的 */
+.el-dialog.model-disassembly-dialog {
+  max-width: calc(100vw - 240px);
+  margin-top: 160px !important;
+}
+
+.el-dialog.model-disassembly-dialog .el-dialog__body {
+  padding: 0;
+  max-height: calc(80vh - 100px);
+  overflow: hidden;
+}
+</style>

RuoYi-Vue3/src/supermap-cesium-module/components/gate-control/GateControl.vue

@@ -345,10 +345,12 @@ export default {
 
 <style scoped>
 .gate-control-panel {
+  position: absolute !important;
   width: 320px;
-  max-height: 80vh;  /* 使用视口高度的80%作为最大高度 */
-  top: 100px;
-  right: 20px;
+  max-height: calc(100% - 15px);  /* 不超过父容器高度 */
+  top: 30px !important;
+  right: 20px !important;
+  left: auto !important;
   padding: 15px;
   overflow-y: auto;
 }
@@ -447,7 +449,7 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  max-height: calc(80vh - 200px);  /* 根据面板高度减去其他部分的高度 */
+  max-height: 600px;
   overflow-y: auto;
 }
 

RuoYi-Vue3/src/supermap-cesium-module/views/layout/aside.vue

@@ -348,23 +348,14 @@
       <component v-if="view2" :is="view2" :key="view2"></component>
       
       <!-- 模型拆解弹框 -->
-      <teleport to="body">
-        <el-dialog
-          v-model="showModelDialog"
-          title="模型拆解"
-          width="70%"
-          destroy-on-close
-          style="top: 50% !important; left: 50% !important; transform: translate(-60%, -50%) !important;"
-        >
-          <div style="width: 100%; height: 600px;">
-            <ThreeModelViewer 
-              :model-path="'/models/启闭机.glb'"
-              :model-name="'启闭机模型'"
-              :auto-load="true"
-            />
-          </div>
-        </el-dialog>
-      </teleport>
+      <ModelDisassemblyDialog
+        ref="modelDisassemblyDialog"
+        :visible="showModelDialog"
+        :model-path="'/models/启闭机.glb'"
+        :model-name="'启闭机模型'"
+        :icon-config="modelIconConfig"
+        @close="showModelDialog = false"
+      />
 
       <!-- 鹰眼组件 -->
       <Sm3dOverviewMap 
@@ -404,7 +395,7 @@ import camera from "../../js/common/camera.js";  //相机操作
 import loadingBar from "../../components/loading.vue";  //加载动画
 import TyphoonVisualization from "../../components/typhoon-visualization/typhoon-visualization.vue";  //台风可视化组件
 import CesiumThreeFusion from "@/components/ThreeCesiumIntegration/CesiumThreeFusion.vue";  //Three.js与Cesium融合组件
-import ThreeModelViewer from "@/components/ThreeModelViewer/ModelViewer.vue";  //模型查看器组件
+import ModelDisassemblyDialog from "../../components/ModelDisassemblyDialog.vue";  //模型拆解弹框组件
 import { CircleClose, Plus, CirclePlus, Setting, Delete } from '@element-plus/icons-vue';  //删除图标
 import { listModel, getModel } from '@/api/watershed/model';  //模型API
 import { getDefaultMapConfig, saveMapConfig } from '@/api/cesium/mapConfig';  //地图配置API
@@ -428,7 +419,7 @@ export default {
     CircleClose,
     TyphoonVisualization,
     CesiumThreeFusion,
-    ThreeModelViewer,
+    ModelDisassemblyDialog,
     MvtAttributePopup,
     GateControl
   },
@@ -483,9 +474,8 @@ export default {
       // MVT点击处理器
       mvtClickHandler: null,  //MVT点击处理器实例
       _hasMvtLayer: false,  //是否有MVT图层加载
-      // 模型拆解图标相关
-      sceneModelIconEntity: null,  //场景模型拆解图标实体
-      sceneModelIconHandler: null,  //场景模型拆解图标点击处理器
+      // 模型拆解图标配置
+      modelIconConfig: null,  //场景模型拆解图标配置
     };
   },
 
@@ -1532,7 +1522,7 @@ export default {
 
         // 加载模型拆解图标
         if (scene.modelDisassemblyIcon) {
-          this.addSceneModelIcon(scene.modelDisassemblyIcon)
+          this.modelIconConfig = scene.modelDisassemblyIcon
         }
         
         ElMessage.success(`已加载固定场景：${scene.sceneName}`)
@@ -1568,10 +1558,10 @@ export default {
       // 关闭闸门控制面板
       this.showGateControl = false
       this.gatePosition = 0
-      
-      // 移除模型拆解图标
-      this.removeSceneModelIcon()
-      
+
+      // 清除模型拆解图标配置
+      this.modelIconConfig = null
+
       // 清除当前场景ID
       this.currentSceneId = null
       
@@ -2357,62 +2347,6 @@ export default {
         }
       );
     },
-    
-    // 添加场景模型拆解图标
-    addSceneModelIcon(config) {
-      if (!window.viewer || !config) return
-
-      const Cesium = window.Cesium
-      
-      // 如果已存在图标，先移除
-      this.removeSceneModelIcon()
-      
-      // 创建图标实体
-      const modelIcon = window.viewer.entities.add({
-        name: '模型拆解',
-        position: Cesium.Cartesian3.fromDegrees(config.longitude, config.latitude, config.height || 0),
-        billboard: {
-          image: config.image || '/img/svg/logo.svg',
-          width: config.width || 32,
-          height: config.height || 32,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          pixelOffset: new Cesium.Cartesian2(0, -16)
-        },
-        description: '点击查看模型拆解'
-      })
-      
-      // 保存实体引用
-      this.sceneModelIconEntity = modelIcon
-      
-      // 使用独立的点击处理器（避免覆盖全局点击事件）
-      const handler = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas)
-      handler.setInputAction((movement) => {
-        const pickedObject = window.viewer.scene.pick(movement.position)
-        if (Cesium.defined(pickedObject) && pickedObject.id === modelIcon) {
-          this.showModelDialog = true
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-      
-      // 保存处理器引用
-      this.sceneModelIconHandler = handler
-    },
-
-    // 移除场景模型拆解图标
-    removeSceneModelIcon() {
-      // 移除实体
-      if (this.sceneModelIconEntity) {
-        if (window.viewer) {
-          window.viewer.entities.remove(this.sceneModelIconEntity)
-        }
-        this.sceneModelIconEntity = null
-      }
-      
-      // 销毁点击处理器
-      if (this.sceneModelIconHandler) {
-        this.sceneModelIconHandler.destroy()
-        this.sceneModelIconHandler = null
-      }
-    },
 
     // 删除场景公共服务
     DeleteDates(datatype, obj) {