图标替换

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

@@ -72,17 +72,24 @@ function s3mlayerAttribute(props) {
     }
 
     // 初始化数据
-    let cloudBox = new Cesium.CloudBox({ url: state.cloudsUrl });
+    let cloudBox = null;
     let skyboxs = {}, defaultSkybox;
-    for (let key in state.skyboxSources) {
-        let skybox = new Cesium.SkyBox({ sources: state.skyboxSources[key] });
-        skybox.USpeed = state.uspeed;
-        skybox.VSpeed = state.vspeed;
-        skybox.WSpeed = state.wspeed;
-        skyboxs[key] = skybox;
-    };
+    
+    function initializeCesiumObjects() {
+        if (typeof Cesium !== 'undefined' && storeState.isViewer) {
+            cloudBox = new Cesium.CloudBox({ url: state.cloudsUrl });
+            for (let key in state.skyboxSources) {
+                let skybox = new Cesium.SkyBox({ sources: state.skyboxSources[key] });
+                skybox.USpeed = state.uspeed;
+                skybox.VSpeed = state.vspeed;
+                skybox.WSpeed = state.wspeed;
+                skyboxs[key] = skybox;
+            };
+        }
+    }
+    
     function initialSkyBox() {
-        if (viewer.scene.frameState.passes.render) {
+        if (viewer && viewer.scene && viewer.scene.frameState && viewer.scene.frameState.passes.render) {
             for (let key in skyboxs) {
                 skyboxs[key].update(viewer.scene.frameState, true);
                 skyboxs[key].show = false;
@@ -92,7 +99,7 @@ function s3mlayerAttribute(props) {
     };
 
     function watchCameraHeight() {
-        if (state.skyBox) {
+        if (state.skyBox && viewer && viewer.scene && viewer.scene.camera) {
             let cameraHeight = viewer.scene.camera.positionCartographic.height;
             if (cameraHeight > 22e4) {
                 viewer.scene.skyBox.show = false;
@@ -105,154 +112,228 @@ function s3mlayerAttribute(props) {
     }
 
     if (storeState.isViewer) {
-        defaultSkybox = viewer.scene.skyBox;
-        viewer.scene.postRender.addEventListener(initialSkyBox);
-        viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(state.snowDesity);
-        viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(state.snowSpeed);
-        viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(state.rainSpeed);
-        watchCameraHeight();
+        initializeCesiumObjects();
+        if (viewer && viewer.scene) {
+            defaultSkybox = viewer.scene.skyBox;
+            viewer.scene.postRender.addEventListener(initialSkyBox);
+            if (viewer.scene.postProcessStages) {
+                if (viewer.scene.postProcessStages.snow) {
+                    viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(state.snowDesity);
+                    viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(state.snowSpeed);
+                }
+                if (viewer.scene.postProcessStages.rain) {
+                    viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(state.rainSpeed);
+                }
+            }
+            watchCameraHeight();
+        }
     }
     //viewer 初始化完成的监听
     watch(() => storeState.isViewer, val => {
         if (val) {
-            defaultSkybox = viewer.scene.skyBox;
-            viewer.scene.postRender.addEventListener(initialSkyBox);
-            viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(state.snowDesity);
-            viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(state.snowSpeed);
-            viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(state.rainSpeed);
-            watchCameraHeight();
+            initializeCesiumObjects();
+            if (viewer && viewer.scene) {
+                defaultSkybox = viewer.scene.skyBox;
+                viewer.scene.postRender.addEventListener(initialSkyBox);
+                if (viewer.scene.postProcessStages) {
+                    if (viewer.scene.postProcessStages.snow) {
+                        viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(state.snowDesity);
+                        viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(state.snowSpeed);
+                    }
+                    if (viewer.scene.postProcessStages.rain) {
+                        viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(state.rainSpeed);
+                    }
+                }
+                watchCameraHeight();
+            }
         }
     });
 
     // 销毁
     onBeforeUnmount(() => {
-        cloudBox.destroy();
+        if (cloudBox) {
+            cloudBox.destroy();
+        }
         for (let key in skyboxs) {
-            skyboxs[key].destroy();
+            if (skyboxs[key]) {
+                skyboxs[key].destroy();
+            }
         };
-        viewer.scene.skyBox = defaultSkybox;
+        if (viewer && viewer.scene && defaultSkybox) {
+            viewer.scene.skyBox = defaultSkybox;
+        }
     });
 
     // 监听
     watch(() => state.earthShow, val => {
-        viewer.scene.globe.show = val;
+        if (viewer && viewer.scene && viewer.scene.globe) {
+            viewer.scene.globe.show = val;
+        }
     });
     watch(() => state.shadows, val => {
-        viewer.scene.shadows = val;
+        if (viewer && viewer.scene) {
+            viewer.scene.shadows = val;
+        }
     });
     watch(() => state.sunShow, val => {
-        viewer.scene.globe.enableLighting = val;
+        if (viewer && viewer.scene && viewer.scene.globe) {
+            viewer.scene.globe.enableLighting = val;
+        }
     });
     watch(() => state.timeline, val => {
         let timeline = document.getElementsByClassName(
             "cesium-viewer-timelineContainer"
         )[0];
-        if (val) {
-            timeline.style.visibility = "visible";
-        } else {
-            timeline.style.visibility = "hidden";
+        if (timeline) {
+            if (val) {
+                timeline.style.visibility = "visible";
+            } else {
+                timeline.style.visibility = "hidden";
+            }
         }
     });
     watch(() => state.depthAgainst, val => {
-        viewer.scene.globe.depthTestAgainstTerrain = val;
+        if (viewer && viewer.scene && viewer.scene.globe) {
+            viewer.scene.globe.depthTestAgainstTerrain = val;
+        }
     });
     watch(() => state.atomsphereRender, val => {
-        viewer.scene.skyAtmosphere.show = val;
+        if (viewer && viewer.scene && viewer.scene.skyAtmosphere) {
+            viewer.scene.skyAtmosphere.show = val;
+        }
     });
     watch(() => state.fogEffect, val => {
-        viewer.scene.fog.enabled = val;
+        if (viewer && viewer.scene && viewer.scene.fog) {
+            viewer.scene.fog.enabled = val;
+        }
     });
     watch(() => state.surfaceTransparency, val => {
-        viewer.scene.globe.globeAlpha = parseFloat(val);
+        if (viewer && viewer.scene && viewer.scene.globe) {
+            viewer.scene.globe.globeAlpha = parseFloat(val);
+        }
     });
     watch(() => state.underground, val => {
-        viewer.scene.undergroundMode = val;
+        if (viewer && viewer.scene) {
+            viewer.scene.undergroundMode = val;
+        }
     });
     watch(() => state.frameRate, val => {
-        viewer.scene.debugShowFramesPerSecond = val;
+        if (viewer && viewer.scene) {
+            viewer.scene.debugShowFramesPerSecond = val;
+        }
     });
     watch(() => state.cloud, val => {
-        if (val) {
-            viewer.scene.cloudBox = cloudBox;
-        } else {
-            viewer.scene.cloudBox = null;
+        if (viewer && viewer.scene) {
+            if (val) {
+                viewer.scene.cloudBox = cloudBox;
+            } else {
+                viewer.scene.cloudBox = null;
+            }
         }
     });
     watch(() => state.cloudsUrl, val => {
-        viewer.scene.cloudBox.url = val;
+        if (viewer && viewer.scene && viewer.scene.cloudBox) {
+            viewer.scene.cloudBox.url = val;
+        }
     });
     watch(() => state.skyBox, val => {
-        if (val) {
-            let cameraHeight = viewer.scene.camera.positionCartographic.height;
-            viewer.scene.postRender.addEventListener(watchCameraHeight);
-            viewer.scene.skyBox = skyboxs[state.skyboxType];
-            if (cameraHeight < 22e4) {
-                viewer.scene.skyBox.show = true;
-                state.atomsphereRender = false
+        if (viewer && viewer.scene) {
+            if (val) {
+                let cameraHeight = viewer.scene.camera.positionCartographic.height;
+                viewer.scene.postRender.addEventListener(watchCameraHeight);
+                viewer.scene.skyBox = skyboxs[state.skyboxType];
+                if (cameraHeight < 22e4) {
+                    viewer.scene.skyBox.show = true;
+                    state.atomsphereRender = false
+                } else {
+                    state.atomsphereRender = true
+                }
             } else {
-                state.atomsphereRender = true
+                state.atomsphereRender = true;
+                if (viewer.scene.skyBox) {
+                    viewer.scene.skyBox.show = false;
+                }
+                viewer.scene.skyBox = defaultSkybox;
+                viewer.scene.postRender.removeEventListener(watchCameraHeight);
             }
-        } else {
-            state.atomsphereRender = true;
-            viewer.scene.skyBox.show = false;
-            viewer.scene.skyBox = defaultSkybox;
-            viewer.scene.postRender.removeEventListener(watchCameraHeight);
         }
     });
     watch(() => state.skyboxType, val => {
-        if (state.skyBox) {
+        if (state.skyBox && viewer && viewer.scene && skyboxs[val]) {
             skyboxs[val].show = true;
             viewer.scene.skyBox = skyboxs[val];
         }
     });
     watch(() => state.uspeed, val => {
-        skyboxs[state.skyboxType].USpeed = Number(val);
-        if (state.skyBox) {
+        if (skyboxs[state.skyboxType]) {
+            skyboxs[state.skyboxType].USpeed = Number(val);
+        }
+        if (state.skyBox && viewer && viewer.scene && viewer.scene.skyBox) {
             viewer.scene.skyBox.USpeed = Number(val);
         }
     });
     watch(() => state.vspeed, val => {
-        skyboxs[state.skyboxType].VSpeed = Number(val);
-        if (state.skyBox) {
+        if (skyboxs[state.skyboxType]) {
+            skyboxs[state.skyboxType].VSpeed = Number(val);
+        }
+        if (state.skyBox && viewer && viewer.scene && viewer.scene.skyBox) {
             viewer.scene.skyBox.VSpeed = Number(val);
         }
     });
     watch(() => state.wspeed, val => {
-        skyboxs[state.skyboxType].WSpeed = Number(val);
-        if (state.skyBox) {
+        if (skyboxs[state.skyboxType]) {
+            skyboxs[state.skyboxType].WSpeed = Number(val);
+        }
+        if (state.skyBox && viewer && viewer.scene && viewer.scene.skyBox) {
             viewer.scene.skyBox.WSpeed = Number(val);
         }
     });
     watch(() => state.viewMode, val => {
-        if (val === "2D") {
-            viewer.scene.mode = Cesium.SceneMode.SCENE2D;
-        } else if (val === "3D") {
-            viewer.scene.mode = Cesium.SceneMode.SCENE3D;
-        } else {
-            viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
+        if (viewer && viewer.scene && typeof Cesium !== 'undefined') {
+            if (val === "2D") {
+                viewer.scene.mode = Cesium.SceneMode.SCENE2D;
+            } else if (val === "3D") {
+                viewer.scene.mode = Cesium.SceneMode.SCENE3D;
+            } else {
+                viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
+            }
         }
     });
     watch(() => state.rain, val => {
-        viewer.scene.postProcessStages.rain.enabled = val;
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.rain) {
+            viewer.scene.postProcessStages.rain.enabled = val;
+        }
     });
     watch(() => state.snow, val => {
-        viewer.scene.postProcessStages.snow.enabled = val;
-        console.log(viewer.scene.postProcessStages.snow.uniforms)
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow) {
+            viewer.scene.postProcessStages.snow.enabled = val;
+            console.log(viewer.scene.postProcessStages.snow.uniforms)
+        }
     });
     watch(() => state.rainAngle, val => {
-        viewer.scene.postProcessStages.rain.uniforms.angle = parseFloat(val);
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.rain && viewer.scene.postProcessStages.rain.uniforms) {
+            viewer.scene.postProcessStages.rain.uniforms.angle = parseFloat(val);
+        }
     });
     watch(() => state.rainSpeed, val => {
-        viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(val)
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.rain && viewer.scene.postProcessStages.rain.uniforms) {
+            viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(val)
+        }
     });
     watch(() => state.snowDesity, val => {
-        viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(val);
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow && viewer.scene.postProcessStages.snow.uniforms) {
+            viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(val);
+        }
     });
     watch(() => state.snowSpeed, val => {
-        viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(val);
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow && viewer.scene.postProcessStages.snow.uniforms) {
+            viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(val);
+        }
     });
     watch(() => state.snowAngle, val => {
-        viewer.scene.postProcessStages.snow.uniforms.angle = parseFloat(val);
+        if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow && viewer.scene.postProcessStages.snow.uniforms) {
+            viewer.scene.postProcessStages.snow.uniforms.angle = parseFloat(val);
+        }
     });
     watch(() => state.snowType, val => {
         switch (val) {

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

@@ -27,7 +27,7 @@
           {{Resource.depthAgainst}}
         </label>
         <label style="width:28%">
-          <input type="checkbox" v-model="shadowMap" />
+          <input type="checkbox" v-model="shadows" />
           {{Resource.shadowMap}}
         </label>
         <label style="width:33%">

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

@@ -6,7 +6,7 @@
           <img src="@/assets/images/水利logo.png" alt="水利logo" class="water-logo">
         </div>
         <div class="title-container">
-          <h1 class="site-title">水利部模型平台</h1>
+          <h1 class="site-title">水利部模型平台<span class="sub-title">可视化模型库</span></h1>
         </div>
       </div>
       
@@ -133,6 +133,20 @@ onUnmounted(() => {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1.3;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.8rem;
+}
+
+.sub-title {
+  font-size: 1rem;
+  font-weight: 600;
+  opacity: 0.9;
+  background: linear-gradient(45deg, #e6f7ff, #fff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  padding-top: 1rem;
 }
 
 
@@ -162,12 +176,28 @@ onUnmounted(() => {
   min-width: 60px;
 }
 
-.nav-item::before {
+.nav-item:nth-child(1)::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background: url('@/assets/images/首页.png') no-repeat center center;
+  background-size: contain;
+}
+
+.nav-item:nth-child(2)::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background: url('@/assets/images/模型管理.png') no-repeat center center;
+  background-size: contain;
+}
+
+.nav-item:nth-child(3)::before {
   content: '';
   width: 16px;
   height: 16px;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 2px;
+  background: url('@/assets/images/后台管理.png') no-repeat center center;
+  background-size: contain;
 }
 
 .nav-item:hover {