增加四季功能

RuoYi-Vue3/src/components/CreateScenario.vue

@@ -0,0 +1,359 @@
+<template>
+  <Teleport to="body">
+    <div 
+      v-if="props.modelValue" 
+      class="create-scenario-container"
+    >
+      <div 
+        class="create-scenario-dialog"
+        :style="{ top: '68px', right: '60px' }"
+      >
+        <div class="dialog-header">
+          <span class="dialog-title">创建业务场景</span>
+          <button class="close-btn" @click="handleClose">
+            <span class="close-icon">×</span>
+          </button>
+        </div>
+        
+        <div class="dialog-body">
+          <div class="form-item">
+            <label class="form-label">场景名称</label>
+            <input 
+              v-model="scenarioName" 
+              class="form-input"
+              placeholder="请输入场景名称"
+            />
+          </div>
+          
+          <div class="form-item">
+            <label class="form-label">场景中心点</label>
+            <div class="coordinate-container">
+              <div class="coordinate-item">
+                <label>经度：</label>
+                <input 
+                  v-model="scenarioCenterPoint.longitude" 
+                  class="coordinate-input"
+                  placeholder="经度"
+                />
+              </div>
+              <div class="coordinate-item">
+                <label>纬度：</label>
+                <input 
+                  v-model="scenarioCenterPoint.latitude" 
+                  class="coordinate-input"
+                  placeholder="纬度"
+                />
+              </div>
+              <div class="coordinate-item">
+                <label>高度：</label>
+                <input 
+                  v-model.number="scenarioCenterPoint.height" 
+                  class="coordinate-input"
+                  placeholder="高度（米）"
+                />
+              </div>
+              <button 
+                class="use-current-btn"
+                @click="useCurrentViewAsCenter"
+              >
+                <span class="location-icon">📍</span> 使用当前视图位置
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <div class="dialog-footer">
+          <button class="btn btn-cancel" @click="handleClose">取消</button>
+          <button class="btn btn-confirm" @click="handleConfirm">确认创建</button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+let Cesium = null
+onMounted(() => {
+  if (window.Cesium) {
+    Cesium = window.Cesium
+  }
+})
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const scenarioName = ref('')
+
+const scenarioCenterPoint = reactive({
+  longitude: '',
+  latitude: '',
+  height: 500
+})
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    initData()
+  }
+})
+
+const initData = () => {
+  scenarioName.value = ''
+  scenarioCenterPoint.longitude = ''
+  scenarioCenterPoint.latitude = ''
+  scenarioCenterPoint.height = 500
+  
+  if (window.viewer && window.viewer.camera && Cesium) {
+    const position = window.viewer.camera.positionCartographic
+    if (position) {
+      scenarioCenterPoint.longitude = Cesium.Math.toDegrees(position.longitude).toFixed(6)
+      scenarioCenterPoint.latitude = Cesium.Math.toDegrees(position.latitude).toFixed(6)
+      scenarioCenterPoint.height = Math.round(position.height)
+    }
+  }
+}
+
+const handleConfirm = () => {
+  if (!scenarioName.value || !scenarioName.value.trim()) {
+    ElMessage.warning('请输入场景名称')
+    return
+  }
+  if (!scenarioCenterPoint.longitude || !scenarioCenterPoint.latitude) {
+    ElMessage.warning('请设置场景中心点坐标')
+    return
+  }
+  
+  const scenarioData = {
+    name: scenarioName.value,
+    centerPoint: {
+      longitude: parseFloat(scenarioCenterPoint.longitude),
+      latitude: parseFloat(scenarioCenterPoint.latitude),
+      height: scenarioCenterPoint.height
+    }
+  }
+  
+  emit('confirm', scenarioData)
+  emit('update:modelValue', false)
+}
+
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+const useCurrentViewAsCenter = () => {
+  if (window.viewer && window.viewer.camera && Cesium) {
+    const position = window.viewer.camera.positionCartographic
+    if (position) {
+      scenarioCenterPoint.longitude = Cesium.Math.toDegrees(position.longitude).toFixed(6)
+      scenarioCenterPoint.latitude = Cesium.Math.toDegrees(position.latitude).toFixed(6)
+      scenarioCenterPoint.height = Math.round(position.height)
+      ElMessage.success('已使用当前视图位置')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.create-scenario-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 2000;
+}
+
+.create-scenario-dialog {
+  position: absolute;
+  width: 320px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid #e8e8e8;
+  background-color: #fafafa;
+}
+
+.dialog-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.close-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.close-icon {
+  font-size: 20px;
+  color: #999;
+  line-height: 1;
+}
+
+.close-btn:hover .close-icon {
+  color: #666;
+}
+
+.dialog-body {
+  padding: 15px;
+}
+
+.form-item {
+  margin-bottom: 15px;
+}
+
+.form-item:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.form-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.form-input:focus {
+  border-color: #409eff;
+}
+
+.form-input::placeholder {
+  color: #c0c4cc;
+}
+
+.coordinate-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.coordinate-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.coordinate-item label {
+  width: 40px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.coordinate-input {
+  width: 150px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #606266;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.coordinate-input:focus {
+  border-color: #409eff;
+}
+
+.use-current-btn {
+  align-self: flex-start;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: #409eff;
+  font-size: 12px;
+  cursor: pointer;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.use-current-btn:hover {
+  color: #67c23a;
+}
+
+.location-icon {
+  font-size: 14px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 15px;
+  border-top: 1px solid #e8e8e8;
+  background-color: #fafafa;
+}
+
+.btn {
+  padding: 6px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.btn-cancel {
+  background-color: #fff;
+  color: #606266;
+  border: 1px solid #dcdfe6;
+}
+
+.btn-cancel:hover {
+  background-color: #f5f7fa;
+}
+
+.btn-confirm {
+  background-color: #409eff;
+  color: #fff;
+}
+
+.btn-confirm:hover {
+  background-color: #67b8ff;
+}
+</style>

RuoYi-Vue3/src/supermap-cesium-module/components/custom-service/custom-service.vue

@@ -106,6 +106,8 @@ export default {
     const uploadProgress = ref(0);
     const isUploading = ref(false);
 
+    const panelStyle = reactive({});
+
     let state = reactive({
       layersType: "SCENE",
       layerURL: null,

RuoYi-Vue3/src/supermap-cesium-module/components/layer/custom-service/custom-service.vue

@@ -150,6 +150,8 @@ export default {
     const uploadProgress = ref(0);
     const isUploading = ref(false);
 
+    const panelStyle = reactive({});
+
     let state = reactive({
       layersType: "SCENE",
       layerURL: null,

RuoYi-Vue3/src/supermap-cesium-module/components/scene/scene-attribute/scene-attribute.js

@@ -41,7 +41,11 @@ function s3mlayerAttribute(props) {
         snowType: '0',
         compass: false,
         isCompass: '',
-        currentTime: defaultTime
+        currentTime: defaultTime,
+        spring: false,
+        summer: false,
+        autumn: false,
+        winter: false
     });
 
     state.skyboxSources = {
@@ -88,6 +92,7 @@ function s3mlayerAttribute(props) {
 
     let cloudBox = new Cesium.CloudBox({ url: state.cloudsUrl });
     let skyboxs = {}, defaultSkybox;
+    let savedRainParams = null, savedSnowParams = null;
     for (let key in state.skyboxSources) {
         let skybox = new Cesium.SkyBox({ sources: state.skyboxSources[key] });
         skybox.USpeed = state.uspeed;
@@ -217,6 +222,158 @@ function s3mlayerAttribute(props) {
         updateSkyEffect(julianTime);
     }
 
+    // 处理季节变化
+    function handleSeasonChange() {
+        if (!viewer) return;
+        
+        // 确保只有一个季节被选中
+        const seasons = ['spring', 'summer', 'autumn', 'winter'];
+        let selectedSeason = null;
+        
+        seasons.forEach(season => {
+            if (state[season]) {
+                selectedSeason = season;
+            }
+        });
+        
+        // 如果选中了一个季节，取消其他季节的选中状态
+        if (selectedSeason) {
+            seasons.forEach(season => {
+                if (season !== selectedSeason) {
+                    state[season] = false;
+                }
+            });
+            
+            // 根据季节设置天气效果
+            switch(selectedSeason) {
+                case 'spring':
+                    // 春季：阴天，小雨
+                    setSpringWeather();
+                    break;
+                case 'summer':
+                    // 夏季：晴天，大气雾比较薄
+                    setSummerWeather();
+                    break;
+                case 'autumn':
+                    // 秋季：阴天
+                    setAutumnWeather();
+                    break;
+                case 'winter':
+                    // 冬季：雪
+                    setWinterWeather();
+                    break;
+            }
+        } else {
+            // 如果没有选中任何季节，重置天气效果
+            resetWeather();
+        }
+    }
+
+    // 设置春季天气：阴天，小雨
+    function setSpringWeather() {
+        // 设置阴天效果
+        viewer.scene.skyAtmosphere.hueShift = 0.1;
+        viewer.scene.skyAtmosphere.saturationShift = -0.3;
+        viewer.scene.skyAtmosphere.brightnessShift = -0.4;
+        
+        // 开启小雨效果（直接操作后处理阶段，不修改state参数）
+        viewer.scene.postProcessStages.snow.enabled = false;
+        viewer.scene.postProcessStages.rain.enabled = true;
+        
+        // 保存当前雨雪参数，用于恢复
+        savedRainParams = {
+            speed: viewer.scene.postProcessStages.rain.uniforms.speed,
+            angle: viewer.scene.postProcessStages.rain.uniforms.angle
+        };
+        
+        // 小雨：比默认雨更小的速度和角度（直接设置后处理参数，不修改state）
+        viewer.scene.postProcessStages.rain.uniforms.speed = 4;
+        viewer.scene.postProcessStages.rain.uniforms.angle = 20;
+    }
+
+    // 设置夏季天气：晴天，大气雾比较薄
+    function setSummerWeather() {
+        // 设置晴天效果
+        viewer.scene.skyAtmosphere.hueShift = 0.0;
+        viewer.scene.skyAtmosphere.saturationShift = 0.1;
+        viewer.scene.skyAtmosphere.brightnessShift = 0.2;
+        
+        // 设置大气雾比较薄
+        state.fogEffect = true;
+        viewer.scene.fog.enabled = true;
+        viewer.scene.fog.density = 0.0001;
+        
+        // 关闭雨雪后处理阶段
+        viewer.scene.postProcessStages.rain.enabled = false;
+        viewer.scene.postProcessStages.snow.enabled = false;
+    }
+
+    // 设置秋季天气：阴天
+    function setAutumnWeather() {
+        // 设置阴天效果
+        viewer.scene.skyAtmosphere.hueShift = 0.1;
+        viewer.scene.skyAtmosphere.saturationShift = -0.3;
+        viewer.scene.skyAtmosphere.brightnessShift = -0.4;
+        
+        // 关闭雨雪后处理阶段
+        viewer.scene.postProcessStages.rain.enabled = false;
+        viewer.scene.postProcessStages.snow.enabled = false;
+    }
+
+    // 设置冬季天气：大雪
+    function setWinterWeather() {
+        // 设置阴天效果
+        viewer.scene.skyAtmosphere.hueShift = 0.1;
+        viewer.scene.skyAtmosphere.saturationShift = -0.3;
+        viewer.scene.skyAtmosphere.brightnessShift = -0.4;
+        
+        // 开启大雪效果（直接操作后处理阶段，不修改state参数）
+        viewer.scene.postProcessStages.rain.enabled = false;
+        viewer.scene.postProcessStages.snow.enabled = true;
+        
+        // 保存当前雪参数，用于恢复
+        savedSnowParams = {
+            density: viewer.scene.postProcessStages.snow.uniforms.density,
+            speed: viewer.scene.postProcessStages.snow.uniforms.speed,
+            angle: viewer.scene.postProcessStages.snow.uniforms.angle
+        };
+        
+        // 大雪：比默认雪更大的密度和速度（直接设置后处理参数，不修改state）
+        viewer.scene.postProcessStages.snow.uniforms.density = 20;
+        viewer.scene.postProcessStages.snow.uniforms.speed = 10;
+        viewer.scene.postProcessStages.snow.uniforms.angle = 10;
+    }
+
+    // 重置天气效果
+    function resetWeather() {
+        // 重置大气效果
+        viewer.scene.skyAtmosphere.hueShift = 0.0;
+        viewer.scene.skyAtmosphere.saturationShift = 0.0;
+        viewer.scene.skyAtmosphere.brightnessShift = 0.0;
+        
+        // 重置雾效果
+        state.fogEffect = true;
+        viewer.scene.fog.enabled = true;
+        viewer.scene.fog.density = 0.0002;
+        
+        // 关闭雨雪后处理阶段
+        viewer.scene.postProcessStages.rain.enabled = false;
+        viewer.scene.postProcessStages.snow.enabled = false;
+        
+        // 恢复雨雪参数到之前保存的值（如果有保存的话）
+        if (savedRainParams) {
+            viewer.scene.postProcessStages.rain.uniforms.speed = savedRainParams.speed;
+            viewer.scene.postProcessStages.rain.uniforms.angle = savedRainParams.angle;
+            savedRainParams = null;
+        }
+        if (savedSnowParams) {
+            viewer.scene.postProcessStages.snow.uniforms.density = savedSnowParams.density;
+            viewer.scene.postProcessStages.snow.uniforms.speed = savedSnowParams.speed;
+            viewer.scene.postProcessStages.snow.uniforms.angle = savedSnowParams.angle;
+            savedSnowParams = null;
+        }
+    }
+
     if (storeState.isViewer) {
         defaultSkybox = viewer.scene.skyBox;
         viewer.scene.postRender.addEventListener(initialSkyBox);
@@ -353,7 +510,61 @@ function s3mlayerAttribute(props) {
         state.compass = val ? 'Sm3dCompass' : '';
     });
 
-    return { ...toRefs(state), handleTimeChange };
+    // 监听季节变化
+    watch(() => state.spring, val => {
+        if (val) {
+            state.summer = false;
+            state.autumn = false;
+            state.winter = false;
+            handleSeasonChange();
+        } else {
+            // 如果所有季节都未选中，重置天气
+            if (!state.summer && !state.autumn && !state.winter) {
+                resetWeather();
+            }
+        }
+    });
+
+    watch(() => state.summer, val => {
+        if (val) {
+            state.spring = false;
+            state.autumn = false;
+            state.winter = false;
+            handleSeasonChange();
+        } else {
+            if (!state.spring && !state.autumn && !state.winter) {
+                resetWeather();
+            }
+        }
+    });
+
+    watch(() => state.autumn, val => {
+        if (val) {
+            state.spring = false;
+            state.summer = false;
+            state.winter = false;
+            handleSeasonChange();
+        } else {
+            if (!state.spring && !state.summer && !state.winter) {
+                resetWeather();
+            }
+        }
+    });
+
+    watch(() => state.winter, val => {
+        if (val) {
+            state.spring = false;
+            state.summer = false;
+            state.autumn = false;
+            handleSeasonChange();
+        } else {
+            if (!state.spring && !state.summer && !state.autumn) {
+                resetWeather();
+            }
+        }
+    });
+
+    return { ...toRefs(state), handleTimeChange, handleSeasonChange };
 };
 
 export default s3mlayerAttribute;

RuoYi-Vue3/src/supermap-cesium-module/components/scene/scene-attribute/scene-attribute.vue

@@ -50,7 +50,22 @@
           <input type="checkbox" v-model="isCompass" />
           {{Resource.compass}}
         </label>
-        <label style="width:33%"></label>
+        <label style="width:25%;display:inline-block;">
+          <input type="checkbox" v-model="spring" @change="handleSeasonChange" />
+          春
+        </label>
+        <label style="width:25%;display:inline-block;">
+          <input type="checkbox" v-model="summer" @change="handleSeasonChange" />
+          夏
+        </label>
+        <label style="width:25%;display:inline-block;">
+          <input type="checkbox" v-model="autumn" @change="handleSeasonChange" />
+          秋
+        </label>
+        <label style="width:25%;display:inline-block;">
+          <input type="checkbox" v-model="winter" @change="handleSeasonChange" />
+          冬
+        </label>
       </div>
       <div class="sm-half-L">
         <label style="width:35%">{{Resource.viewMode}}</label>
@@ -116,7 +131,12 @@ export default {
       isCompass,
       compass,
       currentTime,
-      handleTimeChange
+      handleTimeChange,
+      spring,
+      summer,
+      autumn,
+      winter,
+      handleSeasonChange
     } = sceneAttribute();
     return {
       earthShow,
@@ -136,7 +156,12 @@ export default {
       isCompass,
       compass,
       currentTime,
-      handleTimeChange
+      handleTimeChange,
+      spring,
+      summer,
+      autumn,
+      winter,
+      handleSeasonChange
     };
   }
 };

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

@@ -4,7 +4,7 @@
       <input
         v-model="searchText"
         type="text"
-        placeholder="搜索地名，例如：北京"
+        placeholder="搜索地名或经纬度，例如：北京 或 116.4074, 39.9042"
         @keyup.enter="search"
         @input="handleInput"
       />
@@ -67,7 +67,15 @@ const handleInput = async () => {
 const search = async () => {
   if (searchText.value.trim()) {
     try {
-      // 调用天地图API获取位置信息
+      // 先尝试解析经纬度
+      const latLng = parseLatLng(searchText.value.trim());
+      if (latLng) {
+        flyToLocation(latLng);
+        showResults.value = false;
+        return;
+      }
+      
+      // 如果不是经纬度，调用天地图API获取位置信息
       const location = await getLonLatByTianditu(searchText.value.trim());
       if (location) {
         flyToLocation(location);
@@ -80,6 +88,26 @@ const search = async () => {
   }
 };
 
+// 解析经纬度字符串
+// 支持格式: "116.4074, 39.9042" 或 "116.4074 39.9042"
+const parseLatLng = (text) => {
+  // 匹配经纬度格式：数字, 数字 或 数字 数字
+  const regex = /^\s*(-?\d+\.?\d*)\s*[,，\s]\s*(-?\d+\.?\d*)\s*$/;
+  const match = text.match(regex);
+  
+  if (match) {
+    const lng = parseFloat(match[1]);
+    const lat = parseFloat(match[2]);
+    
+    // 验证经纬度范围
+    if (lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90) {
+      return { name: `${lng}, ${lat}`, lng: lng, lat: lat, height: 3000 };
+    }
+  }
+  
+  return null;
+};
+
 // 选择搜索结果
 const selectResult = (result) => {
   searchText.value = result.name;

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

@@ -196,6 +196,30 @@
           </el-menu-item>
         </el-sub-menu>
 
+        <!-- 业务场景菜单 -->
+        <el-sub-menu index="business-scenario">
+          <template #title>
+            <i class="iconfont iconxingcheng iconfont2"></i>
+            <span>业务场景</span>
+          </template>
+          <el-menu-item index="business-scenario-1" @click="loadBusinessScenario('flood-control')">
+            <span>防洪排涝</span>
+          </el-menu-item>
+          <el-menu-item index="business-scenario-2" @click="loadBusinessScenario('water-resource')">
+            <span>水资源管理</span>
+          </el-menu-item>
+          <el-menu-item index="business-scenario-3" @click="loadBusinessScenario('project-supervision')">
+            <span>水利工程监管</span>
+          </el-menu-item>
+          <el-menu-item index="business-scenario-4" @click="loadBusinessScenario('eco-environment')">
+            <span>生态环境保护</span>
+          </el-menu-item>
+          <el-menu-item index="business-scenario-create" @click="handleCreateScenario" class="no-active-style">
+            <el-icon @click.stop="handleCreateScenario" class="square-plus-icon"><Plus /></el-icon>
+            <span>创建场景</span>
+          </el-menu-item>
+        </el-sub-menu>
+
 
       </el-menu>
     </el-aside>
@@ -254,7 +278,7 @@
           </div>
         </el-dialog>
       </teleport>
-      
+
       <!-- 鹰眼组件 -->
       <Sm3dOverviewMap 
         v-if="view === 'Sm3dOverviewMap'" 
@@ -917,6 +941,49 @@ export default {
       ElMessage.success('台风路径加载成功')
     },
 
+    // 加载业务场景
+    loadBusinessScenario(scenarioType) {
+      console.log('加载业务场景:', scenarioType)
+
+      if (!window.viewer) {
+        ElMessage.error('Cesium viewer 未初始化')
+        return
+      }
+
+      const scenarioConfig = {
+        'flood-control': {
+          title: '防洪排涝',
+          description: '加载防洪排涝业务场景相关数据'
+        },
+        'water-resource': {
+          title: '水资源管理',
+          description: '加载水资源管理业务场景相关数据'
+        },
+        'project-supervision': {
+          title: '水利工程监管',
+          description: '加载水利工程监管业务场景相关数据'
+        },
+        'eco-environment': {
+          title: '生态环境保护',
+          description: '加载生态环境保护业务场景相关数据'
+        }
+      }
+
+      const config = scenarioConfig[scenarioType]
+      if (config) {
+        ElMessage.info(`${config.title}：${config.description}`)
+        console.log(config.description)
+      } else {
+        ElMessage.warning('未知的业务场景类型')
+      }
+    },
+
+    // 创建业务场景 - 通知父组件打开弹窗
+    handleCreateScenario() {
+      console.log('触发创建业务场景事件')
+      this.$emit('open-create-scenario')
+    },
+
 
 
     // 区分地质体组件（需销毁）和其他组件

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

@@ -1,6 +1,6 @@
 <template>
   <div style="width:100%;height:100%">
-    <layout-aside></layout-aside>
+    <layout-aside @open-create-scenario="handleOpenCreateScenario"></layout-aside>
   </div>
 </template>
 
@@ -11,7 +11,11 @@ export default {
     components: {
       LayoutAside
   },
-  // mounted() {}
+  methods: {
+    handleOpenCreateScenario() {
+      this.$emit('open-create-scenario')
+    }
+  }
 };
 </script>
 

RuoYi-Vue3/src/views/front/HydrologicalPlatform.vue

@@ -7,10 +7,15 @@
 
     <!-- 嵌入 supermap-cesium-module -->
     <div class="supermap-cesium-container">
-      <layout />
+      <layout @open-create-scenario="showCreateScenarioDialog = true" />
+      
+      <!-- 创建业务场景组件 -->
+      <CreateScenario 
+        v-model="showCreateScenarioDialog" 
+        @confirm="handleCreateScenarioConfirm"
+      />
     </div>
 
-
     <!-- 页面底部 -->
     <footer class="page-footer">
       <p>&copy; 2024 省水利三维模型资源汇聚平台 - 金水内部测试系统</p>
@@ -19,8 +24,20 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import PageHeader from './PageHeader.vue'
 import layout from '@/supermap-cesium-module/views/layout/index.vue'
+import CreateScenario from '@/components/CreateScenario.vue'
+import { ElMessage } from 'element-plus'
+
+// 创建业务场景弹窗相关
+const showCreateScenarioDialog = ref(false)
+
+// 处理创建场景确认
+const handleCreateScenarioConfirm = (scenarioData) => {
+  console.log('创建业务场景:', scenarioData)
+  ElMessage.success(`已创建业务场景：${scenarioData.name}`)
+}
 </script>
 
 <style scoped>

RuoYi-Vue3/src/views/front/PageHeader.vue

@@ -14,7 +14,7 @@
         <router-link to="/" class="nav-item" :class="{ active: currentRoute === '/' }">首页</router-link>
         <router-link to="/model-management" class="nav-item" :class="{ active: currentRoute === '/model-management' }">模型管理</router-link>
         
-        <router-link to="/admin" class="nav-item">后台管理</router-link>
+        <span class="nav-item">后台管理</span>
       </nav>
       
       <div class="header-right">