From 3ba7b31681bb0e5580256a5734b38dab495a87ce Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Sun, 25 Jan 2026 15:31:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA+=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss                  |   2 +-
 src/layout/components/Navbar.vue              | 290 +++++++++---------
 src/layout/components/TagsView/index.vue      | 109 ++++---
 src/views/EquipmentLedger/index.vue           |   1 -
 src/views/home/components/MunicipalChart.vue  | 161 +++++++---
 src/views/home/components/ProvincialChart.vue | 136 +++++---
 6 files changed, 420 insertions(+), 279 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 9d87a05f..af202193 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -121,7 +121,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  height: calc(100vh - 84px);
+  height: calc(100vh - 90px);
   padding: 20px;
   box-sizing: border-box;
   // display: flex;
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index df3debbd..b8a55388 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -54,81 +54,82 @@
         </el-dropdown>
       </div>
     </div>
+    <div style="height: 50px"></div>
 
-    <div class="menu-box" v-show="showMenuBox" @mouseenter="handleBoxEnter" @mouseleave="handleBoxLeave">
-      <div class="menu-list">
-        <div class="list-box">
-          <!-- 顶部标题 -->
-          <div class="menu-title-top" v-if="currentMenu && currentMenu.meta">
-            <div class="title-tip"></div>
-            <span style="font-weight: bold; font-size: 16px">{{ currentMenu.meta.title }}</span>
-          </div>
+    <div class="menu-box" v-show="showMenuBox" @mouseenter="handleBoxEnter">
+      <div class="menu-warp" @mouseleave="handleBoxLeave">
+        <div class="menu-list">
+          <div class="list-box">
+            <div class="menu-title-top" v-if="currentMenu && currentMenu.meta">
+              <div class="title-tip"></div>
+              <span class="title-text">{{ currentMenu.meta.title }}</span>
+            </div>
 
-          <!-- 一级 -->
-          <div v-for="(child, i) in currentMenu.children || []" :key="i" class="sub-menu-item" v-if="!child.hidden">
-            <!-- 一级有子级 -->
-            <div v-if="child.children && child.children.length">
-              <!-- 一级父节点（点击展开） -->
-              <div class="menu-title" @click="toggleLevel1(child)">
-                <div class="children-title-tip"></div>
-                <span>
-                  <span style="margin-right: 5px">{{ child.meta.title }}</span>
-                  <img
-                    v-if="openLevel1 == child.path"
-                    src="@/assets/images/up.png"
-                    style="width: 14px; height: 14px"
-                    alt=""
-                  />
-                  <img v-else src="@/assets/images/down.png" style="width: 14px; height: 14px" alt="" />
-                </span>
-                <span class="menu-star">
-                  <img src="@/assets/images/star.png" style="width: 10px; height: 9px" alt="" />
-                </span>
-              </div>
+            <div v-for="(child, i) in currentMenu.children || []" :key="i" class="sub-menu-item" v-if="!child.hidden">
+              <div v-if="child.children && child.children.length">
+                <div class="menu-title" @click="toggleLevel1(child)">
+                  <div class="children-title-tip"></div>
+                  <span>
+                    <span style="margin-right: 5px">{{ child.meta.title }}</span>
+                    <img
+                      v-if="openLevel1.includes(child.path)"
+                      src="@/assets/images/up.png"
+                      style="width: 14px; height: 14px"
+                    />
+                    <img v-else src="@/assets/images/down.png" style="width: 14px; height: 14px" />
+                  </span>
+                  <span class="menu-star">
+                    <img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
+                  </span>
+                </div>
 
-              <!-- 二级区域（只在当前一级展开时显示） -->
-              <div v-show="openLevel1 === child.path">
-                <!-- 二级 -->
-                <div v-for="(c2, j) in child.children" :key="j" class="sub-menu-item" v-if="!c2.hidden">
-                  <!-- 二级还有子级 -->
-                  <div v-if="c2.children && c2.children.length">
-                    <!-- 二级父节点 -->
-                    <div class="menu-title" @click="toggleLevel2(c2)">
-                      {{ c2.meta.title }}
-                    </div>
+                <div v-show="openLevel1.includes(child.path)">
+                  <div v-for="(c2, j) in child.children" :key="j" class="sub-menu-item" v-if="!c2.hidden">
+                    <div v-if="c2.children && c2.children.length">
+                      <div class="menu-title" @click="toggleLevel2(c2)">
+                        {{ c2.meta.title }}
+                        <img
+                          v-if="openLevel2.includes(c2.path)"
+                          src="@/assets/images/up.png"
+                          style="width: 12px; height: 12px; margin-left: 6px"
+                        />
+                        <img
+                          v-else
+                          src="@/assets/images/down.png"
+                          style="width: 12px; height: 12px; margin-left: 6px"
+                        />
+                      </div>
 
-                    <!-- 三级（只展开当前二级） -->
-                    <div v-show="openLevel2 === c2.path">
-                      <div
-                        v-for="(c3, k) in c2.children"
-                        :key="k"
-                        class="sub-menu-item"
-                        v-if="!c3.hidden"
-                        @click="goRoute(c3)"
-                      >
-                        {{ c3.meta.title }}
+                      <div v-show="openLevel2.includes(c2.path)">
+                        <div
+                          v-for="(c3, k) in c2.children"
+                          :key="k"
+                          class="sub-menu-item"
+                          v-if="!c3.hidden"
+                          @click="goRoute(c3)"
+                        >
+                          {{ c3.meta.title }}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <!-- 二级叶子节点 -->
-                  <div v-else class="menu-title" @click="goRoute(c2)">
-                    <span class="child-left">- {{ c2.meta.title }}</span>
-                    <span class="menu-star">
-                      <img src="@/assets/images/star.png" style="width: 10px; height: 9px" alt="" />
-                    </span>
+                    <div v-else class="menu-title" @click="goRoute(c2)">
+                      <span class="child-left">- {{ c2.meta.title }}</span>
+                      <span class="menu-star">
+                        <img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
-            <!-- 一级就是叶子节点 -->
-            <div v-else class="menu-title" @click="goRoute(child)">
-              <div class="children-title-tip"></div>
-              <span>{{ child.meta.title }}</span>
-              <span class="menu-star">
-                <img src="@/assets/images/star.png" style="width: 10px; height: 9px" alt="" />
-              </span>
+              <div v-else class="menu-title" @click="goRoute(child)">
+                <div class="children-title-tip"></div>
+                <span>{{ child.meta.title }}</span>
+                <span class="menu-star">
+                  <img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -139,43 +140,24 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-import bonusGit from '@/components/bonus/Git'
-import bonusDoc from '@/components/bonus/Doc'
 import { getUserProfile } from '@/api/system/user'
 
 export default {
-  components: {
-    Breadcrumb,
-    TopNav,
-    Hamburger,
-    Screenfull,
-    SizeSelect,
-    Search,
-    bonusGit,
-    bonusDoc,
-  },
+  components: { Search },
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
       user: {},
-      onlyOneChild: null,
-      basePath: null,
-      basePath2: null,
       menuList: [],
       showMenuBox: false,
-      currentMenu: {}, // 当前 hover 的一级菜单
-      openLevel1: '', // 当前展开的一级菜单 path
-      openLevel2: '', // 当前展开的二级菜单 path
+      currentMenu: {},
+      openLevel1: [],
+      openLevel2: [],
     }
   },
   computed: {
-    ...mapGetters(['sidebarRouters', 'sidebar', 'avatar', 'device']),
+    ...mapGetters(['sidebarRouters', 'avatar', 'device']),
     setting: {
       get() {
         return this.$store.state.settings.showSettings
@@ -187,27 +169,17 @@ export default {
         })
       },
     },
-    topNav: {
-      get() {
-        return this.$store.state.settings.topNav
-      },
-    },
   },
   created() {
     this.getUser()
-    // 过滤掉 sidebarRouters 中隐藏的路由
     this.menuList = this.sidebarRouters.filter((route) => !route.hidden)
   },
-  mounted() {},
   methods: {
     getUser() {
       getUserProfile().then((response) => {
         this.user = response.data
       })
     },
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
@@ -216,8 +188,6 @@ export default {
       })
         .then(() => {
           this.$store.dispatch('LogOut').then((res) => {
-            console.log('🚀 ~ res-退出登录:', res)
-            console.log('logout', process.env.VUE_APP_BASE_API)
             this.$store.dispatch('tagsView/delAllViews')
             if (process.env.VUE_APP_BASE_API == '/iws/jxhzb-api') {
               window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws'
@@ -231,11 +201,8 @@ export default {
         })
     },
     handleMenuClick(item) {
-      console.log('🚀 ~ item.redirect:', item.redirect)
       if (item.redirect == 'index' || item.redirect == 'index1') {
-        this.$router.push({
-          path: '/' + item.redirect,
-        })
+        this.$router.push({ path: '/' + item.redirect })
       }
     },
     handleMenuEnter(item) {
@@ -243,22 +210,17 @@ export default {
         this.showMenuBox = false
         return
       }
+
       this.showMenuBox = true
 
-      // 构建带 fullPath 的菜单树
       const buildPath = (nodes, parentPath = '') => {
         return nodes.map((n) => {
           let currentPath = n.path || ''
-
-          // 子路由不带 /，拼父路径
           if (!currentPath.startsWith('/')) {
             currentPath = parentPath.replace(/\/$/, '') + '/' + currentPath
           }
 
-          const newNode = {
-            ...n,
-            fullPath: currentPath,
-          }
+          const newNode = { ...n, fullPath: currentPath }
 
           if (n.children && n.children.length) {
             newNode.children = buildPath(n.children, currentPath)
@@ -268,57 +230,55 @@ export default {
         })
       }
 
+      const children = buildPath(item.children || [], item.path)
+
       this.currentMenu = {
         ...item,
         fullPath: item.path,
-        children: buildPath(item.children || [], item.path),
+        children,
       }
-    },
 
+      const level1 = []
+      const level2 = []
+
+      children.forEach((l1) => {
+        if (l1.children && l1.children.length) {
+          level1.push(l1.path)
+          l1.children.forEach((l2) => {
+            if (l2.children && l2.children.length) {
+              level2.push(l2.path)
+            }
+          })
+        }
+      })
+
+      this.openLevel1 = level1
+      this.openLevel2 = level2
+    },
     handleMenuLeave() {
       this.showMenuBox = false
     },
-
     handleBoxEnter() {
       this.showMenuBox = true
     },
-
     handleBoxLeave() {
       this.showMenuBox = false
     },
-
     goRoute(route) {
-      console.log('🚀 ~ route:', route)
       if (route.fullPath) {
-        this.$router.push({
-          path: route.fullPath,
-          query: route.query,
-        })
+        this.$router.push({ path: route.fullPath, query: route.query })
         this.showMenuBox = false
       }
     },
-    // 点击一级父节点
     toggleLevel1(item) {
-      console.log('🚀 ~ item:', item)
-      if (this.openLevel1 === item.path) {
-        // 已展开 → 收起
-        this.openLevel1 = ''
-        this.openLevel2 = ''
-      } else {
-        // 展开当前，关闭其它
-        this.openLevel1 = item.path
-        this.openLevel2 = ''
-      }
+      const idx = this.openLevel1.indexOf(item.path)
+      if (idx > -1) this.openLevel1.splice(idx, 1)
+      else this.openLevel1.push(item.path)
     },
-
-    // 点击二级父节点
     toggleLevel2(item) {
-      console.log('🚀 ~ item:', item)
-      if (this.openLevel2 === item.path) {
-        this.openLevel2 = ''
-      } else {
-        this.openLevel2 = item.path
-      }
+      const idx = this.openLevel2.indexOf(item.path)
+      if (idx > -1) this.openLevel2.splice(idx, 1)
+      else this.openLevel2.push(item.path)
     },
   },
 }
@@ -326,9 +286,10 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
+  width: 100%;
   height: 50px;
   overflow: hidden;
-  position: relative;
+  position: fixed;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -339,6 +300,7 @@ export default {
   // background-position: center;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
+  z-index: 10;
   .app-title {
     width: 314px;
     height: 50px;
@@ -473,7 +435,15 @@ export default {
   position: absolute;
   z-index: 99999999;
   width: 100%;
-  background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
+  height: calc(100% - 50px);
+  // background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
+  // 蒙层
+  background: rgba(0, 0, 0, 0.5);
+  .menu-warp {
+    width: 100%;
+    background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
+    border-radius: 0 0 16px 16px;
+  }
   .menu-list {
     padding: 16px 20px;
     width: 100%;
@@ -483,15 +453,16 @@ export default {
     font-family: Microsoft YaHei, Microsoft YaHei;
     font-weight: 400;
     font-size: 14px;
-    color: #095A4D;
+    color: #095a4d;
     line-height: 30px;
 
     .list-box {
       padding: 16px;
       width: 290px;
       height: 100%;
-      background: linear-gradient(0deg, rgba(44, 186, 178, 0.1) 0%, rgba(44, 186, 178, 0) 100%);
-      border-radius: 8px;
+      // background: linear-gradient(0deg, rgba(44, 186, 178, 0) 0%, rgba(44, 186, 178, 0.1) 100%);
+      background: linear-gradient(180deg, #e6ffff, rgba(233, 255, 255, 0) 90px);
+      border-radius: 12px;
     }
   }
   .menu-title-top {
@@ -499,7 +470,7 @@ export default {
     display: flex;
     align-items: center;
     span {
-      color: #095A4D;
+      color: #095a4d;
       font-weight: 800;
     }
   }
@@ -511,7 +482,7 @@ export default {
 
     // 移入效果
     &:hover {
-      color: #2CBAB2;
+      color: #2cbab2;
       background: rgba(44, 186, 178, 0.1);
       border-radius: 4px;
     }
@@ -533,9 +504,18 @@ export default {
     margin-right: 4px;
     width: 8px;
     height: 16px;
+    line-height: 24px;
     background: #2cbab2;
+    margin-bottom: 20px;
     border-radius: 4px 4px 4px 4px;
   }
+  .title-text {
+    font-size: 18px;
+    // color: #0f7969;
+    line-height: 24px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
   .children-title-tip {
     margin-right: 4px;
     width: 8px;
@@ -548,4 +528,20 @@ export default {
     margin-left: 1rem;
   }
 }
+/* 只改“下一级里的”二级、三级颜色 */
+.menu-box {
+  /* 二级：child.children 里面的 menu-title */
+  .sub-menu-item {
+    .sub-menu-item {
+      > .menu-title {
+        color: #333;
+      }
+
+      /* 三级：最里面的 sub-menu-item */
+      .sub-menu-item {
+        color: #333;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 7ef27dc7..564c955b 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,54 +1,57 @@
 <template>
-  <div class="box-card">
-    <div id="tags-view-container" class="tags-view-container">
-      <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-        <router-link
-          v-for="tag in visitedViews"
-          ref="tag"
-          :key="tag.path"
-          :class="isActive(tag) ? 'active' : ''"
-          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-          tag="span"
-          class="tags-view-item"
-          :style="activeStyle(tag)"
-          @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-          @contextmenu.prevent.native="openMenu(tag, $event)"
-        >
-          <!-- {{ tag.title }} -->
-          <span>
-            <i v-if="showBackHome(tag)" class="el-icon-arrow-left back-icon" />
-            {{ renderTitle(tag) }}
-          </span>
-          <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-        </router-link>
-      </scroll-pane>
-      <div class="right-tag-fixed">
-        <div class="line" />
-        <i class="el-icon-arrow-down right-icon" @click.stop="toggleDropDown" />
-        <div class="line" />
-        <i class="el-icon-close right-icon" @click="handleClose" />
-      </div>
-      <transition name="ant-popover-br">
-        <div v-if="showDropDown" class="drop-down" ref="dropDown">
-          <div class="drop-item" v-for="(item, index) in dropDownViews" :key="index">
-            <div style="cursor: pointer" :class="{ 'active-title': isActive(item) }" @click="handleDownJump(item)">
-              {{ item.title }}
-            </div>
-            <i class="el-icon-close" style="cursor: pointer" @click="closeSelectedTag(item)" />
-          </div>
+  <div class="warp">
+    <div class="box-card">
+      <div id="tags-view-container" class="tags-view-container">
+        <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+          <router-link
+            v-for="tag in visitedViews"
+            ref="tag"
+            :key="tag.path"
+            :class="isActive(tag) ? 'active' : ''"
+            :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+            tag="span"
+            class="tags-view-item"
+            :style="activeStyle(tag)"
+            @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+            @contextmenu.prevent.native="openMenu(tag, $event)"
+          >
+            <!-- {{ tag.title }} -->
+            <span>
+              <i v-if="showBackHome(tag)" class="el-icon-arrow-left back-icon" />
+              {{ renderTitle(tag) }}
+            </span>
+            <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+          </router-link>
+        </scroll-pane>
+        <div class="right-tag-fixed">
+          <div class="line" />
+          <i class="el-icon-arrow-down right-icon" @click.stop="toggleDropDown" />
+          <div class="line" />
+          <i class="el-icon-close right-icon" @click="handleClose" />
         </div>
-      </transition>
-      <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-        <li @click="refreshSelectedTag(selectedTag)"> <i class="el-icon-refresh-right"></i> 刷新页面 </li>
-        <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-          <i class="el-icon-close"></i> 关闭当前
-        </li>
-        <li @click="closeOthersTags"> <i class="el-icon-circle-close"></i> 关闭其他 </li>
-        <li v-if="!isFirstView()" @click="closeLeftTags"> <i class="el-icon-back"></i> 关闭左侧 </li>
-        <li v-if="!isLastView()" @click="closeRightTags"> <i class="el-icon-right"></i> 关闭右侧 </li>
-        <li @click="closeAllTags(selectedTag)"> <i class="el-icon-circle-close"></i> 全部关闭 </li>
-      </ul>
+        <transition name="ant-popover-br">
+          <div v-if="showDropDown" class="drop-down" ref="dropDown">
+            <div class="drop-item" v-for="(item, index) in dropDownViews" :key="index">
+              <div style="cursor: pointer" :class="{ 'active-title': isActive(item) }" @click="handleDownJump(item)">
+                {{ item.title }}
+              </div>
+              <i class="el-icon-close" style="cursor: pointer" @click="closeSelectedTag(item)" />
+            </div>
+          </div>
+        </transition>
+        <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+          <li @click="refreshSelectedTag(selectedTag)"> <i class="el-icon-refresh-right"></i> 刷新页面 </li>
+          <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+            <i class="el-icon-close"></i> 关闭当前
+          </li>
+          <li @click="closeOthersTags"> <i class="el-icon-circle-close"></i> 关闭其他 </li>
+          <li v-if="!isFirstView()" @click="closeLeftTags"> <i class="el-icon-back"></i> 关闭左侧 </li>
+          <li v-if="!isLastView()" @click="closeRightTags"> <i class="el-icon-right"></i> 关闭右侧 </li>
+          <li @click="closeAllTags(selectedTag)"> <i class="el-icon-circle-close"></i> 全部关闭 </li>
+        </ul>
+      </div>
     </div>
+    <div style="height: 40px"></div>
   </div>
 </template>
 
@@ -330,17 +333,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.warp {
+  width: 100%;
+}
 .box-card {
   width: 100%;
   height: 40px;
+  z-index: 11;
+  position: fixed;
   background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
+  box-sizing: border-box;
 }
 .tags-view-container {
-  position: relative;
+  position: fixed;
   height: 40px;
   width: 100%;
   background: #fff;
   border-radius: 16px 16px 0px 0px;
+  box-sizing: border-box;
+  z-index: 10;
 
   .tags-view-wrapper {
     padding-right: 100px;
diff --git a/src/views/EquipmentLedger/index.vue b/src/views/EquipmentLedger/index.vue
index 551192a7..60bdfda9 100644
--- a/src/views/EquipmentLedger/index.vue
+++ b/src/views/EquipmentLedger/index.vue
@@ -1830,7 +1830,6 @@ export default {
 .app-container {
   padding: 12px;
   background-color: #f5f7fa;
-  height: calc(100vh - 84px);
 }
 
 /* 搜索区域收起/展开按钮 */
diff --git a/src/views/home/components/MunicipalChart.vue b/src/views/home/components/MunicipalChart.vue
index 9843924a..d53d282b 100644
--- a/src/views/home/components/MunicipalChart.vue
+++ b/src/views/home/components/MunicipalChart.vue
@@ -1,50 +1,55 @@
 <template>
-  <div class="app-container">
-    <div class="top">
-      <div class="top-1">
-        <Top1  @openDialog="openSystemEquip"/>
-      </div>
-      <div class="top-2" style="padding: 0;">
-        <Top2 />
-      </div>
-      <div class="top-3">
-        <Top3 @openDialog="openEquipItemMore"/>
-      </div>
-    </div>
-
-    <div class="center">
-      <div class="center-1">
-        <Center1 @openDialog="openRetirementWarning"/>
-      </div>
-      <div class="center-2">
-        <Center2 @openDialog="openProEquip"/>
-      </div>
-    </div>
-
-    <div class="bottom">
-      <div class="bottom-1">
-        <Bottom1 @openDialog="openWarning"/>
-        <!-- <div class="bottom-1-1">
-          <Bottom1 />
+  <div class="viewport">
+    <div class="screen" :style="screenStyle">
+      <div class="app-container">
+        <div style="height: 90px"></div>
+        <div class="top">
+          <div class="top-1">
+            <Top1 @openDialog="openSystemEquip" />
+          </div>
+          <div class="top-2" style="padding: 0">
+            <Top2 />
+          </div>
+          <div class="top-3">
+            <Top3 @openDialog="openEquipItemMore" />
+          </div>
         </div>
-        <div class="bottom-1-2">
-          <Bottom2 />
-        </div> -->
-      </div>
-      <div class="bottom-2">
-        <Bottom2 @openDialog="openEquipStatusMore"/>
-      </div>
-      <div class="bottom-3">
-        <Bottom3 @openDialog="openEquipTurnroundRate"/>
+
+        <div class="center">
+          <div class="center-1">
+            <Center1 @openDialog="openRetirementWarning" />
+          </div>
+          <div class="center-2">
+            <Center2 @openDialog="openProEquip" />
+          </div>
+        </div>
+
+        <div class="bottom">
+          <div class="bottom-1">
+            <Bottom1 @openDialog="openWarning" />
+            <!-- <div class="bottom-1-1">
+              <Bottom1 />
+            </div>
+            <div class="bottom-1-2">
+              <Bottom2 />
+            </div> -->
+          </div>
+          <div class="bottom-2">
+            <Bottom2 @openDialog="openEquipStatusMore" />
+          </div>
+          <div class="bottom-3">
+            <Bottom3 @openDialog="openEquipTurnroundRate" />
+          </div>
+        </div>
+        <EquipTurnroundRate ref="equipTurnroundRate" />
+        <EquipWarning ref="equipWarning" />
+        <ProEquip ref="proEquip" />
+        <RetirementWarning ref="retirementWarning" />
+        <EquipItemMore ref="equipItemMore" />
+        <EquipStatusMore ref="equipStatusMore" />
+        <SystemEquip ref="systemEquip" />
       </div>
     </div>
-    <EquipTurnroundRate ref="equipTurnroundRate" />
-    <EquipWarning ref="equipWarning" />
-    <ProEquip ref="proEquip" />
-    <RetirementWarning ref="retirementWarning" />
-    <EquipItemMore ref="equipItemMore" />
-    <EquipStatusMore ref="equipStatusMore" />
-    <SystemEquip ref="systemEquip" />
   </div>
 </template>
 
@@ -75,12 +80,59 @@ export default {
     Bottom1,
     Bottom2,
     Bottom3,
-    EquipTurnroundRate,EquipWarning,ProEquip,RetirementWarning,EquipItemMore,EquipStatusMore,SystemEquip
+    EquipTurnroundRate,
+    EquipWarning,
+    ProEquip,
+    RetirementWarning,
+    EquipItemMore,
+    EquipStatusMore,
+    SystemEquip,
   },
   data() {
-    return {}
+    return {
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0,
+    }
+  },
+  computed: {
+    screenStyle() {
+      return {
+        width: '1920px',
+        height: '1080px',
+        transform: `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`,
+        transformOrigin: '0 0',
+      }
+    },
+  },
+  mounted() {
+    this.calcScale()
+    window.addEventListener('resize', this.calcScale)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcScale)
   },
   methods: {
+    calcScale() {
+      const baseW = 1920
+      const baseH = 1080
+
+      const vw = document.documentElement.clientWidth
+      const vh = document.documentElement.clientHeight
+
+      const scale = Math.min(vw / baseW, vh / baseH)
+
+      const realW = baseW * scale
+      const realH = baseH * scale
+
+      // ✅ 横向：仍然居中
+      this.offsetX = (vw - realW) / 2 / scale
+
+      // ✅ 纵向：贴顶（不再居中）
+      this.offsetY = 0
+
+      this.scale = scale
+    },
     openEquipTurnroundRate() {
       this.$refs.equipTurnroundRate.openDialog()
     },
@@ -106,8 +158,25 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
+/* 外层视口：锁满屏 */
+.viewport {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: #e1ebf7; /* 大屏底色 */
+}
+
+/* 被缩放的 1920×1080 画布 */
+.screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .app-container {
+  width: 1920px;
+  height: 1080px;
   background: #e1ebf7;
 }
 .top {
diff --git a/src/views/home/components/ProvincialChart.vue b/src/views/home/components/ProvincialChart.vue
index eee7a29a..bc9fea51 100644
--- a/src/views/home/components/ProvincialChart.vue
+++ b/src/views/home/components/ProvincialChart.vue
@@ -1,37 +1,42 @@
 <template>
-  <div class="app-container">
-    <div class="top">
-      <div class="top-1">
-        <Top1 />
-      </div>
-      <div class="top-2">
-        <Top2 />
-      </div>
-      <div class="top-3">
-        <Top3 />
-      </div>
-    </div>
-
-    <div class="center">
-      <div class="center-1">
-        <Center1 />
-      </div>
-      <div class="center-2">
-        <Center2 />
-      </div>
-    </div>
-
-    <div class="bottom">
-      <div class="bottom-1">
-        <div class="bottom-1-1">
-          <Bottom11 />
+  <div class="viewport">
+    <div class="screen" :style="screenStyle">
+      <div class="app-container">
+        <div style="height: 90px"></div>
+        <div class="top">
+          <div class="top-1">
+            <Top1 />
+          </div>
+          <div class="top-2">
+            <Top2 />
+          </div>
+          <div class="top-3">
+            <Top3 />
+          </div>
         </div>
-        <div class="bottom-1-2">
-          <Bottom12 />
+
+        <div class="center">
+          <div class="center-1">
+            <Center1 />
+          </div>
+          <div class="center-2">
+            <Center2 />
+          </div>
+        </div>
+
+        <div class="bottom">
+          <div class="bottom-1">
+            <div class="bottom-1-1">
+              <Bottom11 />
+            </div>
+            <div class="bottom-1-2">
+              <Bottom12 />
+            </div>
+          </div>
+          <div class="bottom-2">
+            <Bottom2 />
+          </div>
         </div>
-      </div>
-      <div class="bottom-2">
-        <Bottom2 />
       </div>
     </div>
   </div>
@@ -60,15 +65,76 @@ export default {
     Bottom2,
   },
   data() {
-    return {}
+    return {
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0,
+    }
+  },
+  computed: {
+    screenStyle() {
+      return {
+        width: '1920px',
+        height: '1080px',
+        transform: `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`,
+        transformOrigin: '0 0',
+      }
+    },
+  },
+  mounted() {
+    this.calcScale()
+    window.addEventListener('resize', this.calcScale)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcScale)
+  },
+  methods: {
+    calcScale() {
+      const baseW = 1920
+      const baseH = 1080
+
+      const vw = document.documentElement.clientWidth
+      const vh = document.documentElement.clientHeight
+
+      const scale = Math.min(vw / baseW, vh / baseH)
+
+      const realW = baseW * scale
+      const realH = baseH * scale
+
+      // ✅ 横向：仍然居中
+      this.offsetX = (vw - realW) / 2 / scale
+
+      // ✅ 纵向：贴顶（不再居中）
+      this.offsetY = 0
+
+      this.scale = scale
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
+/* 外层视口：锁满屏 */
+.viewport {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background: #e1ebf7; /* 大屏底色 */
+}
+
+/* 被缩放的 1920×1080 画布 */
+.screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .app-container {
+  width: 1920px;
+  height: 1080px;
   background: #e1ebf7;
 }
+
 .top {
   margin-bottom: 16px;
   display: flex;
@@ -104,7 +170,7 @@ export default {
 
   .center-1,
   .center-2 {
-    width: 50%;
+    width: 928px;
     height: 390px;
     padding: 24px;
     background: rgba(255, 255, 255, 0.91);
@@ -125,7 +191,7 @@ export default {
   justify-content: space-between;
 
   .bottom-1 {
-    width: 50%;
+    width: 928px;
     height: 350px;
     display: flex;
     align-items: center;
@@ -148,7 +214,7 @@ export default {
     }
   }
   .bottom-2 {
-    width: 50%;
+    width: 928px;
     height: 350px;
     padding: 24px;
     background: rgba(255, 255, 255, 0.91);