修改Header路由方式，菜单配置放到Store中，简化菜单选中逻辑；运行管理Echarts提那家resize事件监听。微功能样式优化；

src/App.vue

@@ -174,7 +174,8 @@ html {
 }
 
 #app {
-  width: 1920px;
+  width: 100vw;
+  min-width: 1440px;
   height: 100%;
   position: fixed;
   left: 50%;

src/components/AppVue/Header.vue

@@ -4,10 +4,10 @@
     <div class="menu">
       <ul class="menu_ul">
         <li
-          v-for="(item, index) in menuList"
-          :key="index"
-          :class="{ active: item.isActive }"
-          @click="menuClick(item.index, $event)"
+          v-for="item in $store.state.menuList"
+          :key="item.path"
+          :class="{ active: $route.path == item.path }"
+          @click="$router.push(item.path)"
         >
           {{ item.label }}
         </li>
@@ -19,57 +19,20 @@
 <script>
 export default {
   data() {
-    return {
-      menuList: [
-        { index: 1, path: "/", label: "首页", isActive: true },
-        { index: 2, path: "/sksjgl", label: "时空数据管理", isActive: false },
-        // { index: 3, path: "/skmh/scene", label: "二维GIS引擎", isActive: false },
-        { index: 4, path: "/skmh", label: "时空门户", isActive: false },
-        { index: 5, path: "/wgn", label: "微功能", isActive: false },
-        { index: 6, path: "/yygl", label: "应用管理", isActive: false },
-        { index: 7, path: "/yxgl", label: "运行管理", isActive: false },
-      ],
-    };
-  },
-  mounted() {
-    // 初始化判断路径并自动选中菜单
-    let path = this.$route.path;
-    console.log(path);
-    this.menuList.map(function (item) {
-      if (item.path == path) {
-        item.isActive = true;
-      } else {
-        item.isActive = false;
-      }
-    });
-  },
-  methods: {
-    menuClick(index) {
-      let that = this;
-      this.menuList.map(function (item) {
-        if (item.index == index) {
-          item.isActive = true;
-          that.$router.push(item.path);
-        } else {
-          item.isActive = false;
-        }
-      });
-      this.$nextTick(() => {
-        this.$emit("updateScroll");
-      });
-    },
+    return {};
   },
+  mounted() {},
+  methods: {},
 };
 </script>
 
 <style lang="less" scoped>
 #header {
-  width: 1920px;
+  width: 100vw;
   height: 70px;
   background: linear-gradient(180deg, #2c2f74, #494d98);
   color: #ffffff;
   margin: 0 auto;
-
   .logo {
     display: inline-block;
     height: 70px;

src/components/yxgl/EchartsDome.vue

@@ -82,6 +82,10 @@ export default {
         },
       });
       chartInstance.setOption(mergedOption, true);
+      // 添加resize事件监听
+      window.addEventListener("resize", () => {
+        chartInstance.resize();
+      });
     },
   },
 };

src/store/index.js

@@ -11,6 +11,14 @@ export default createStore({
     DMSTypes: ["appstatus"],
     // appstatus: 应用状态
     DmsTypesMap: localStorage.getItem("DmsTypesMap") ? JSON.parse(localStorage.getItem("DmsTypesMap")) : {},
+    menuList: [
+      { path: "/", label: "首页" },
+      { path: "/sksjgl", label: "时空数据管理" },
+      // { path: "/skmh/scene", label: "二维GIS引擎"},
+      { path: "/skmh", label: "时空门户" },
+      { path: "/wgn", label: "微功能" },
+      { path: "/yygl", label: "应用管理" },
+      { path: "/yxgl", label: "运行管理" },],
     sksjgl: {},
     skmh: {},
     wgn: {},

src/views/Root.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <Header @updateScroll="updateScrollbar"></Header>
+    <Header />
     <el-scrollbar ref="pagescrollbar">
       <router-view />
     </el-scrollbar>
@@ -30,16 +30,17 @@ export default {
     };
   },
   components: {
-    Header: defineAsyncComponent(() =>
-      import("@/components/AppVue/Header.vue")
-    ),
-    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue"))
+    Header: defineAsyncComponent(() => import("@/components/AppVue/Header.vue")),
+    Footer: defineAsyncComponent(() => import("@/components/AppVue/Footer.vue")),
   },
-  methods: {
-    updateScrollbar() {
-      this.$refs.pagescrollbar.setScrollTop(0)
-    }
+  watch: {
+    $route(to, from) {
+      this.$nextTick(() => {
+        this.$refs.pagescrollbar.setScrollTop(0);
+      });
+    },
   },
+  methods: {},
 };
 </script>
 

src/views/Wgn.vue

@@ -3,7 +3,7 @@
     <el-backtop target=".wgn_box" :right="20" :bottom="70" />
     <div class="server_title">
       <el-image
-        style="width: 824px; height: calc(100vh - 70px)"
+        style="width: 43vw; height: calc(100vh - 120px)"
         src="static/images/wgn_title.png"
         fit="cover"
       />
@@ -19,7 +19,7 @@
     </div>
     <div class="server_list_box">
       <div class="server_list_box_title">微功能列表</div>
-      <el-affix :offset="0">
+      <el-affix :offset="80">
         <div class="server_list_box_search">
           <el-input
             v-model="searchStr"
@@ -332,15 +332,15 @@ export default {
   align-items: center;
 }
 .server_title_text {
-  width: calc(100vw - 824px);
-  height: calc(100vh - 70px);
+  width: calc(77vw - 200px);
+  height: calc(100vh - 120px);
   background-color: #1c2631;
   color: #fff;
-  padding: 0 160px 0 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
+  padding: 0 100px;
   &_title {
     font-size: 64px;
     font-weight: bold;
@@ -370,7 +370,7 @@ export default {
     z-index: 1;
   }
   &_title {
-    margin-top: 100px;
+    margin: 100px 0;
     font-size: 35px;
     font-weight: bold;
     position: relative;
@@ -386,7 +386,7 @@ export default {
     }
   }
   &_search {
-    margin-top: 100px;
+    // margin-top: 100px;
     font-size: 25px;
     display: flex;
     flex-wrap: nowrap;

src/views/Yxgl.vue

@@ -124,7 +124,7 @@ export default {
 }
 iframe {
   width: 100%;
-  height: calc(100% - 10px);
+  height: calc(100%);
   background: #08224a;
 }
 </style>