diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/assets/styles/sidebar.scss b/zdxt-web-client/zdxt-admin-plus-ui/src/assets/styles/sidebar.scss
index 6ffcd336..e591eea2 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/assets/styles/sidebar.scss
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/assets/styles/sidebar.scss
@@ -17,10 +17,10 @@
     transition: width 0.28s;
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
-    height: 100%;
+    height: calc(100% - 50px);
     position: fixed;
     font-size: 0;
-    top: 0;
+    top: 50px;
     bottom: 0;
     left: 0;
     z-index: 1001;
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/components/Breadcrumb/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/components/Breadcrumb/index.vue
index a9cdef42..9b21903d 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/components/Breadcrumb/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/components/Breadcrumb/index.vue
@@ -33,10 +33,6 @@ const getBreadcrumb = () => {
   } else {
     matched = route.matched.filter((item) => item.meta && item.meta.title);
   }
-  // 判断是否为首页
-  if (!isDashboard(matched[0])) {
-    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
-  }
   levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
 };
 const findPathNum = (str, char = '/') => {
@@ -53,13 +49,6 @@ const getMatched = (pathList, routeList, matched) => {
     }
   }
 };
-const isDashboard = (route: RouteLocationMatched) => {
-  const name = route && (route.name as string);
-  if (!name) {
-    return false;
-  }
-  return name.trim() === 'Index';
-};
 const handleLink = (item) => {
   const { redirect, path } = item;
   redirect ? router.push(redirect) : router.push(path);
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/components/TopNav/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/components/TopNav/index.vue
index a7345fe6..85a9c707 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/components/TopNav/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/components/TopNav/index.vue
@@ -32,7 +32,7 @@ const visibleNumber = ref<number>(-1);
 // 当前激活菜单的 index
 const currentIndex = ref<string>();
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ['/home', '/index', '/user/profile'];
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -85,7 +85,7 @@ const childrenMenus = computed(() => {
 // 默认激活的菜单
 const activeMenu = computed(() => {
   let path = route.path;
-  if (path === '/index') {
+  if (path === '/home' || path === '/index') {
     path = '/system/user';
   }
   let activePath = path;
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/AppMain.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/AppMain.vue
index b6c7b61c..78096d5d 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/AppMain.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/AppMain.vue
@@ -53,7 +53,7 @@ function addIframe() {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
+  /* navbar 50px 已由 main-container 的 padding-top 处理 */
   min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
@@ -61,17 +61,19 @@ function addIframe() {
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  /* fixed-header 现仅含 tags-view，无 tags-view 时为空，无需额外 padding */
+  padding-top: 0;
 }
 
 .hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
+    /* 84 = navbar 50 + tags-view 34 */
     min-height: calc(100vh - 84px);
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    /* tags-view 34px 固定在顶部，需让出空间 */
+    padding-top: 34px;
   }
 }
 </style>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Navbar.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Navbar.vue
index 76a0eed8..42d818c8 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Navbar.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Navbar.vue
@@ -1,23 +1,29 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
+    <div class="flex align-center">
+      <div class="logo">执法监督码 执法监督</div>  
+      <hamburger v-if="!permissionStore.iframeMode" id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
       @toggle-click="toggleSideBar" />
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    </div>
+    
+  
+    <!-- <breadcrumb v-if="!settingsStore.topNav && !permissionStore.iframeMode" id="breadcrumb-container" class="breadcrumb-container" /> -->
     <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
 
     <div class="right-menu flex align-center">
       <template v-if="appStore.device !== 'mobile'">
-        <el-select v-model="currentSystemCode" class="min-w-160px mr-8px" placeholder="切换菜单组"
-          @change="handleSystemCodeChange">
-          <el-option v-for="item in permissionStore.visibleSystemCodeOptions" :key="item.value" :label="item.label"
-            :value="item.value">
-            <el-icon style="vertical-align: middle; margin-right: 4px;">
-              <component :is="item.icon" />
-            </el-icon>
+        <div class="system-tabs">
+          <div
+            v-for="item in permissionStore.visibleSystemCodeOptions"
+            :key="item.value"
+            class="system-tab"
+            :class="{ 'is-active': item.value === currentSystemCode }"
+            @click="handleSystemCodeChange(item.value)"
+          >
+            <el-icon><component :is="item.icon" /></el-icon>
             <span>{{ item.label }}</span>
-          </el-option>
-          <template #prefix><svg-icon icon-class="tree-table" class="el-input__icon input-icon" /></template>
-        </el-select>
+          </div>
+        </div>
 
         <!--        <el-select
           v-if="userId === 1 && tenantEnabled"
@@ -136,17 +142,14 @@ const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
 // 当前系统编码
 const currentSystemCode = ref(permissionStore.currentSystemCode);
 
+watch(() => permissionStore.currentSystemCode, (val) => {
+  currentSystemCode.value = val;
+});
+
 /** 切换菜单组 */
 const handleSystemCodeChange = async (systemCode: string) => {
+  currentSystemCode.value = systemCode;
   await permissionStore.switchSystemCode(systemCode);
-  // 非 iframe 模式时跳转到首页并刷新
-  if (!permissionStore.iframeMode) {
-    console.log('切换系统编码', systemCode);
-    const targetPath = systemCode === 'supervisionCode' 
-      ? '/statistics/administrative/enterprise-enforcement' 
-      : '/';
-    await proxy?.$router.replace(targetPath);
-  }
 };
 
 const openSearchMenu = () => {
@@ -231,14 +234,51 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-:deep(.el-select .el-input__wrapper) {
-  height: 30px;
-}
-
 :deep(.el-badge__content.is-fixed) {
   top: 12px;
 }
 
+.system-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 12px;
+}
+
+.system-tab {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #5a5e66;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+
+  &:hover {
+    color: #1e6bb8;
+    background: rgba(58, 174, 251, 0.08);
+  }
+
+  &.is-active {
+    background: rgba(58, 174, 251, 0.12);
+    color: #1e6bb8;
+
+    .el-icon {
+      color: #1e6bb8;
+    }
+  }
+
+  .el-icon {
+    font-size: 16px;
+    color: #5a5e66;
+    transition: color 0.2s;
+  }
+}
+
 .flex {
   display: flex;
 }
@@ -253,7 +293,14 @@ watch(
   position: relative;
   //background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
+  display: flex;
+  justify-content: space-between;
+  .logo {
+    font-size: 18px;
+    color: #5a5e66;
+    font-weight: bold;
+    margin-left: 20px;
+  }
   .hamburger-container {
     line-height: 46px;
     height: 100%;
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Sidebar/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Sidebar/index.vue
index b6ecbfa9..9ca46db2 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Sidebar/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/Sidebar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
         <el-menu
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/TagsView/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/TagsView/index.vue
index 604a4e04..83257384 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/TagsView/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/components/TagsView/index.vue
@@ -49,7 +49,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const route = useRoute();
 const router = useRouter();
 
-const visitedViews = computed(() => useTagsViewStore().getVisitedViews());
+const visitedViews = computed(() => useTagsViewStore().getVisitedViews().filter((v: RouteLocationNormalized) => v.path !== '/home'));
 const routes = computed(() => usePermissionStore().getRoutes());
 const theme = computed(() => useSettingsStore().theme);
 const tagsIcon = computed(() => useSettingsStore().tagsIcon)
@@ -81,7 +81,7 @@ const isAffix = (tag: RouteLocationNormalized) => {
 };
 const isFirstView = () => {
   try {
-    return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
+    return selectedTag.value.fullPath === '/home' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
   } catch (err) {
     return false;
   }
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/index.vue
index 6b11de6c..05953d33 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/layout/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/layout/index.vue
@@ -3,7 +3,7 @@
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <!-- iframe 全屏模式：隐藏侧边栏、标签栏、路由内容，只保留导航栏 + iframe -->
     <template v-if="permissionStore.iframeMode">
-      <div class="main-container" style="margin-left: 0;">
+      <div class="main-container iframe-mode" style="margin-left: 0;">
         <div :class="{ 'fixed-header': fixedHeader }" style="width: 100%;">
           <navbar ref="navbarRef" @set-layout="setLayout" />
         </div>
@@ -16,10 +16,14 @@
     </template>
     <!-- 正常菜单模式 -->
     <template v-else>
+      <!-- 顶部头部整行 -->
+      <div class="top-header">
+        <navbar ref="navbarRef" @set-layout="setLayout" />
+      </div>
+      <!-- 下方：左侧边栏 + 右内容 -->
       <side-bar v-if="!sidebar.hide" class="sidebar-container" />
       <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
         <div :class="{ 'fixed-header': fixedHeader }">
-          <navbar ref="navbarRef" @set-layout="setLayout" />
           <tags-view v-if="needTagsView" />
         </div>
         <app-main />
@@ -125,9 +129,25 @@ const setLayout = () => {
   z-index: 999;
 }
 
-.fixed-header {
+.top-header {
   position: fixed;
   top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 1002;
+  background: $fixed-header-bg;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+}
+
+.main-container {
+  padding-top: 50px;
+  box-sizing: border-box;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 50px;
   right: 0;
   z-index: 9;
   width: calc(100% - #{$base-sidebar-width});
@@ -147,6 +167,14 @@ const setLayout = () => {
   width: 100%;
 }
 
+.iframe-mode {
+  padding-top: 0;
+
+  .fixed-header {
+    top: 0;
+  }
+}
+
 .iframe-main {
   width: 100%;
   position: relative;
@@ -169,4 +197,48 @@ const setLayout = () => {
   min-height: calc(100vh - 50px);
   overflow: auto;
 }
+
+.iframe-mode .navbar {
+  background: linear-gradient(180deg, #0d1d3a 0%, #0a1628 100%);
+  border-bottom: 1px solid rgba(58, 174, 251, 0.2);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.iframe-mode .navbar .right-menu-item,
+.iframe-mode .navbar .breadcrumb-container,
+.iframe-mode .navbar .topmenu-container {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.iframe-mode .navbar .right-menu-item:hover,
+.iframe-mode .navbar .avatar-wrapper:hover {
+  background: rgba(58, 174, 251, 0.15);
+}
+
+.iframe-mode .navbar .user-avatar {
+  border: 2px solid rgba(58, 174, 251, 0.4);
+}
+
+.iframe-mode .navbar .system-tab {
+  color: rgba(255, 255, 255, 0.75);
+
+  .el-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  &:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  &.is-active {
+    background: rgba(58, 174, 251, 0.25);
+    color: #fff;
+    box-shadow: 0 0 12px rgba(58, 174, 251, 0.3);
+
+    .el-icon {
+      color: #3aaefb;
+    }
+  }
+}
 </style>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/router/index.ts b/zdxt-web-client/zdxt-admin-plus-ui/src/router/index.ts
index 2dc51df7..5e0466ce 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/router/index.ts
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/router/index.ts
@@ -57,16 +57,21 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: '/index',
+    redirect: '/home',
+    hidden: true
+  },
   {
     path: '',
     component: Layout,
-    redirect: '/index',
+    redirect: '/home',
     hidden: true,
     children: [
       {
-        path: '/index',
-        component: () => import('@/views/index.vue'),
-        name: 'Index',
+        path: '/home',
+        component: () => import('@/views/home/index.vue'),
+        name: 'Home',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
     ]
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/store/modules/permission.ts b/zdxt-web-client/zdxt-admin-plus-ui/src/store/modules/permission.ts
index b3b6badf..7cbde396 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/store/modules/permission.ts
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/store/modules/permission.ts
@@ -23,14 +23,16 @@ export interface SystemCodeOption {
   iframeUrl?: string;
   /** 当设置了 fullscreenRoute 时，切换到该选项会以全屏 Vue 路由展示 */
   fullscreenRoute?: string;
+  /** 切换到该系统后默认跳转的路由路径 */
+  defaultRoute?: string;
 }
 /** 404 兜底路由名称，方便动态移除和重新添加 */
 export const CATCH_ALL_ROUTE_NAME = 'CatchAll404';
 //http://10.132.108.3:85/loginByUserId
 export const systemCodeOptions: SystemCodeOption[] = [
-  { label: '首页', value: 'planindex', icon: 'HomeFilled', iframeUrl: 'Same-origin/loginByUserId' },
-  { label: '执法监督码', value: 'supervisionCode', icon: 'Document' },
-  { label: '后台管理', value: 'authService', icon: 'Setting' }
+  { label: '首页', value: 'planindex', icon: 'HomeFilled', fullscreenRoute: '/home' },
+  { label: '执法监督码', value: 'supervisionCode', icon: 'Document', defaultRoute: '/statistics/administrative/enterprise-enforcement' },
+  { label: '后台管理', value: 'authService', icon: 'Setting', defaultRoute: '/system-setting/menu' }
 ];
 
 export const usePermissionStore = defineStore('permission', () => {
@@ -220,6 +222,11 @@ export const usePermissionStore = defineStore('permission', () => {
     // 重新添加404兜底路由，确保放在所有动态路由之后
     router.addRoute({ name: CATCH_ALL_ROUTE_NAME, path: '/:pathMatch(.*)*', component: () => import('@/views/error/404.vue') });
     console.log('[路由调试] switchSystemCode 完成, 当前路由列表 =', router.getRoutes().map((r) => ({ name: r.name, path: r.path })));
+
+    // 跳转到默认路由
+    if (option?.defaultRoute) {
+      await router.push(option.defaultRoute);
+    }
   };
 
   /**
@@ -236,15 +243,16 @@ export const usePermissionStore = defineStore('permission', () => {
     currentSystemCode.value = 'planindex';
     sessionStorage.setItem(SYSTEM_CODE_KEY, 'planindex');
     const defaultOption = systemCodeOptions.find((o) => o.value === 'planindex');
-    iframeMode.value = defaultOption?.iframeUrl ? true : false;
+    iframeMode.value = !!(defaultOption?.iframeUrl || defaultOption?.fullscreenRoute);
     iframeUrl.value = defaultOption?.iframeUrl ? buildIframeUrl(defaultOption.iframeUrl) : '';
+    fullscreenRoute.value = defaultOption?.fullscreenRoute || '';
   };
 
   /** 根据后端返回的路由数据，动态过滤可见的系统分类选项（首页始终显示） */
   const visibleSystemCodeOptions = computed(() => {
     return systemCodeOptions.filter((option) => {
-      // 首页（有 iframeUrl 的）始终显示
-      if (option.iframeUrl) return true;
+      // 首页（有 iframeUrl 或 fullscreenRoute 的）始终显示
+      if (option.iframeUrl || option.fullscreenRoute) return true;
       // 其他选项：只有当后端路由中存在匹配的 systemCode 时才显示
       return allRouteDataCache.value.some((route: any) => route.systemCode === option.value);
     });
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/error/404.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/error/404.vue
index 0b20053f..da6475b3 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/error/404.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/error/404.vue
@@ -15,7 +15,7 @@
         <div class="bullshit__info">
           对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
         </div>
-        <router-link to="/index" class="bullshit__return-home"> 返回首页 </router-link>
+        <router-link to="/home" class="bullshit__return-home"> 返回首页 </router-link>
       </div>
     </div>
   </div>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/home/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/home/index.vue
new file mode 100644
index 00000000..7c4fa07e
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/home/index.vue
@@ -0,0 +1,1499 @@
+<template>
+  <div class="home-dashboard">
+    <div class="dashboard-bg"></div>
+
+    <div class="dashboard-content">
+      <!-- 左侧：行政执法 -->
+      <div class="col col-left">
+        <div class="panel">
+          <div class="panel-header">
+            <span class="panel-icon icon-admin"></span>
+            <span class="panel-title">行政执法</span>
+          </div>
+          <div class="panel-body">
+            <div class="stat-list">
+              <!-- 单独执法 -->
+              <div class="stat-item">
+                <div class="stat-label">
+                  <img class="stat-icon-img" src="/statistical/images/icon_jc2.png" alt="单独执法" />
+                  单独执法
+                </div>
+                <div class="stat-value">
+                  <b>{{ coordination.singleNum.toLocaleString() }}</b>
+                  <span class="stat-percent">{{ coordination.singlePer }}<i>%</i></span>
+                </div>
+                <div class="stat-change">
+                  <span class="change-tag" :class="coordination.singleYoy >= 0 ? 'up' : 'down'">
+                    <i class="arrow" :class="coordination.singleYoy >= 0 ? 'up' : 'down'"></i>
+                    {{ Math.abs(coordination.singleYoy) }}%
+                  </span>
+                  <span class="change-label">同比</span>
+                  <span class="change-tag" :class="coordination.singleRr >= 0 ? 'up' : 'down'">
+                    <i class="arrow" :class="coordination.singleRr >= 0 ? 'up' : 'down'"></i>
+                    {{ Math.abs(coordination.singleRr) }}%
+                  </span>
+                  <span class="change-label">环比</span>
+                </div>
+              </div>
+              <!-- 联合执法 -->
+              <div class="stat-item">
+                <div class="stat-label">
+                  <img class="stat-icon-img" src="/statistical/images/icon_jc.png" alt="联合执法" />
+                  联合执法
+                </div>
+                <div class="stat-value">
+                  <b>{{ coordination.unionNum.toLocaleString() }}</b>
+                  <span class="stat-percent">{{ coordination.unionPer }}<i>%</i></span>
+                </div>
+                <div class="stat-change">
+                  <span class="change-tag" :class="coordination.unionYoy >= 0 ? 'up' : 'down'">
+                    <i class="arrow" :class="coordination.unionYoy >= 0 ? 'up' : 'down'"></i>
+                    {{ Math.abs(coordination.unionYoy) }}%
+                  </span>
+                  <span class="change-label">同比</span>
+                  <span class="change-tag" :class="coordination.unionRr >= 0 ? 'up' : 'down'">
+                    <i class="arrow" :class="coordination.unionRr >= 0 ? 'up' : 'down'"></i>
+                    {{ Math.abs(coordination.unionRr) }}%
+                  </span>
+                  <span class="change-label">环比</span>
+                </div>
+              </div>
+              <!-- 被执法企业 -->
+              <div class="stat-item">
+                <div class="stat-label">
+                  <img class="stat-icon-img" src="/statistical/images/icon_qy.png" alt="被执法企业" />
+                  被执法企业
+                </div>
+                <div class="stat-value">
+                  <b>{{ enterprise.num.toLocaleString() }}</b>
+                </div>
+                <div class="stat-change">
+                  <span class="change-tag" :class="enterprise.yoy >= 0 ? 'up' : 'down'">
+                    <i class="arrow" :class="enterprise.yoy >= 0 ? 'up' : 'down'"></i>
+                    {{ Math.abs(enterprise.yoy) }}%
+                  </span>
+                  <span class="change-label">同比</span>
+                  <span class="change-tag" :class="enterprise.rr >= 0 ? 'up' : 'down'">
+                    <i class="arrow" :class="enterprise.rr >= 0 ? 'up' : 'down'"></i>
+                    {{ Math.abs(enterprise.rr) }}%
+                  </span>
+                  <span class="change-label">环比</span>
+                </div>
+              </div>
+              <!-- 入企压减率 -->
+              <div class="stat-item stat-item-rate">
+                <div class="stat-label">
+                  <img class="stat-icon-img" src="/statistical/images/icon_yj.png" alt="入企压减率" />
+                  入企压减率
+                </div>
+                <div class="stat-value-rate">
+                  <b>{{ coordination.cutNum.toLocaleString() }}</b>
+                </div>
+                <div class="rate-box">
+                  <div class="rate-tag">
+                    <span class="rate-percent">{{ coordination.cutPer }}<i>%</i></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div ref="adminPieRef" class="chart-pie"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间：概览 + 地图 -->
+      <div class="col col-center">
+        <div class="center-top">
+          <div class="region-select">
+            <span class="region-name">深圳市</span>
+            <div class="time-filter">
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                clearable
+                @change="onDateChange"
+              />
+            </div>
+          </div>
+          <div class="overview-numbers">
+            <div class="overview-card admin-card">
+              <div class="overview-label">行政执法</div>
+              <div class="overview-value">{{ coordination.allNum.toLocaleString() }}</div>
+              <div class="overview-sub">
+                <span>（市直：<b>{{ sJcNum }}</b></span>
+                <span>各区：<b>{{ qJcNum }}</b>）</span>
+              </div>
+            </div>
+            <div class="overview-card non-card">
+              <div class="overview-label">非行政执法</div>
+              <div class="overview-value">{{ njcAll.toLocaleString() }}</div>
+              <div class="overview-sub">
+                <span>（市直：<b>{{ sNjcNum }}</b></span>
+                <span>各区：<b>{{ qNjcNum }}</b>）</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 链接按钮 -->
+        <div class="link-btn">
+          <a v-if="!hideLeftFlag" :href="leftFlagHref" @click.prevent="goToAnalysis('city')">
+            <span class="link-icon-dept"></span>
+            各市直执法单位综合分析
+            <i class="link-arrow"></i>
+          </a>
+          <a :href="rightFlagHref" @click.prevent="goToAnalysis('district')">
+            <span class="link-icon-dist"></span>
+            {{ rightFlagText }}
+            <i class="link-arrow"></i>
+          </a>
+        </div>
+
+        <div class="center-map">
+          <div class="map-wrapper">
+            <img class="szmap" src="/statistical/images/szmap_3d.png" alt="深圳地图" />
+            <div class="district-labels">
+              <div
+                v-for="config in districtConfigs"
+                :key="config.key"
+                class="district-label"
+                :style="{ top: config.top, left: config.left }"
+              >
+                <a
+                  class="flag-c"
+                  :class="{ active: activeDistrictIdx === config.idx }"
+                  @click="toggleDistrictDetail(config)"
+                >
+                  <span class="dot"></span>
+                  <label>{{ config.name }}</label>
+                </a>
+                <!-- 区域详情弹窗 -->
+                <div
+                  v-show="activeDistrictIdx === config.idx"
+                  class="fold-cont"
+                  :class="[config.key, getPopupDirection(config), districtTab]"
+                >
+                  <div class="pop-tit">
+                    <h5>{{ config.name }}</h5>
+                    <div class="tab-switch">
+                      <a
+                        class="admin"
+                        :class="{ active: districtTab === 'xzzf' }"
+                        @click="switchDistrictTab(config.idx, 'xzzf')"
+                      >行政执法</a>
+                      <a
+                        class="non-admin"
+                        :class="{ active: districtTab === 'fxzzf' }"
+                        @click="switchDistrictTab(config.idx, 'fxzzf')"
+                      >非行政执法</a>
+                    </div>
+                  </div>
+                  <div class="tab-inspect">
+                    <div v-show="districtTab === 'xzzf'" class="tab-inspect-item">
+                      <div class="inspect-count">
+                        （行政执法总数：<b>{{ districtData(config.name)?.allNum ?? 0 }}</b>）
+                      </div>
+                      <ul>
+                        <li>
+                          <label>单独执法</label>
+                          <span>{{ districtData(config.name)?.singleNum ?? 0 }}</span>
+                          <span>{{ districtData(config.name)?.singlePer ?? '0.0' }}%</span>
+                        </li>
+                        <li>
+                          <label>联合执法</label>
+                          <span>{{ districtData(config.name)?.unionNum ?? 0 }}</span>
+                          <span>{{ districtData(config.name)?.unionPer ?? '0.0' }}%</span>
+                        </li>
+                        <li>
+                          <label>入企压减率</label>
+                          <span>{{ districtData(config.name)?.cutNum ?? 0 }}</span>
+                          <span>{{ districtData(config.name)?.cutPer ?? '0.0' }}%</span>
+                        </li>
+                        <li>
+                          <label>被执法企业</label>
+                          <span>{{ districtData(config.name)?.entNum ?? 0 }}</span>
+                          <span></span>
+                        </li>
+                        <li>
+                          <label>涉企投诉</label>
+                          <span>{{ districtData(config.name)?.comNum ?? 0 }}</span>
+                          <span></span>
+                        </li>
+                      </ul>
+                    </div>
+                    <div v-show="districtTab === 'fxzzf'" class="tab-inspect-item">
+                      <div class="inspect-count">
+                        （非行政执法总数：<b>{{ districtData(config.name)?.njcNum ?? 0 }}</b>）
+                      </div>
+                      <ul>
+                        <li>
+                          <label>日常巡查</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_4', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_4', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>普法宣传</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_3', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_3', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>企业服务</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_6', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_6', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>技术指导</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_7', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_7', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>检验检测</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_8', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_8', 'per') }}%</span>
+                        </li>
+                      </ul>
+                      <ul>
+                        <li>
+                          <label>诉求处理</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_5', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_5', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>培训</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_9', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_9', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>调研</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_10', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_10', 'per') }}%</span>
+                        </li>
+                        <li>
+                          <label>其他</label>
+                          <span>{{ getNonTypeVal(config.name, 'key_0', 'num') }}</span>
+                          <span>{{ getNonTypeVal(config.name, 'key_0', 'per') }}%</span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="center-bottom">
+          <div class="trend-panel">
+            <div class="trend-header">
+              <span class="trend-title">涉企执法趋势</span>
+              <div class="trend-tabs">
+                <a :class="{ active: trendTab === 0 }" @click="switchTrendTab(0)">行政执法</a>
+                <a :class="{ active: trendTab === 1 }" @click="switchTrendTab(1)">非行政执法</a>
+              </div>
+            </div>
+            <div class="trend-body">
+              <div v-show="trendTab === 0" ref="adminTrendRef" class="chart-trend"></div>
+              <div v-show="trendTab === 1" ref="nonTrendRef" class="chart-trend"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：非行政执法 -->
+      <div class="col col-right">
+        <div class="panel">
+          <div class="panel-header">
+            <span class="panel-icon icon-non"></span>
+            <span class="panel-title">非行政执法</span>
+          </div>
+          <div class="panel-body">
+            <div class="stat-grid">
+              <div
+                v-for="(item, index) in nonTypeList"
+                :key="item.dict_label"
+                class="stat-grid-item"
+                :class="{
+                  'grid-item-full': index === 0,
+                  'grid-item-alt': [1, 2, 5, 6].includes(index)
+                }"
+              >
+                <label class="grid-label-wrap">
+                  <img class="grid-icon-img" :src="getNonTypeIcon(index)" :alt="item.dict_label" />
+                  {{ item.dict_label }}
+                </label>
+                <span class="grid-num">{{ item.num.toLocaleString() }}</span>
+              </div>
+            </div>
+            <div ref="nonPieRef" class="chart-donut"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import * as echarts from 'echarts';
+import {
+  analysisEnterprises,
+  analysisEnterprisesCoordination,
+  analysisEnterprisesNonAll,
+  analysisNonRegistrationType,
+  analysisRegistrationType,
+  analysisTime,
+  areaRegistration,
+  nonAnalysisTime
+} from '@/api/supervision/statistical/statisticalPanel';
+import type { AreaRegistrationData, DictStatItem } from '@/api/supervision/statistical/types';
+import {
+  normalizeAreaRegistration,
+  normalizeCoordination,
+  normalizeDictStatList,
+  normalizeEnterpriseStat,
+  normalizeTimeSeries,
+  toNum,
+  unwrapData
+} from '@/api/supervision/statistical/adapters';
+import { buildAdminPieOption, buildNonAdminPieOption, buildTrendLineOption } from '@/views/supervision/statistical/utils/chartOptions';
+import { DISTRICT_CONFIGS, DISTRICT_LIST } from '@/views/supervision/statistical/utils/districtConfig';
+
+async function safeLoad<T>(fn: () => Promise<T>): Promise<T | null> {
+  try {
+    return await fn();
+  } catch (e) {
+    console.warn('[首页大屏] 接口加载失败', e);
+    return null;
+  }
+}
+
+const router = useRouter();
+const districtConfigs = DISTRICT_CONFIGS;
+
+const dateRange = ref<[string, string] | null>(null);
+const trendTab = ref(0);
+
+const activeDistrictIdx = ref(-1);
+const districtTab = ref<'xzzf' | 'fxzzf'>('xzzf');
+
+const coordination = reactive({
+  roleFlag: 1,
+  roleDept: '',
+  allNum: 0,
+  nonNum: 0,
+  unionNum: 0,
+  unionYoy: 0,
+  unionRr: 0,
+  unionPer: '0.0',
+  singleNum: 0,
+  singleYoy: 0,
+  singleRr: 0,
+  singlePer: '0.0',
+  cutNum: 0,
+  cutPer: '0.0'
+});
+
+const enterprise = reactive({ num: 0, yoy: 0, rr: 0 });
+const nonTypeList = ref<DictStatItem[]>([]);
+const njcAll = ref(0);
+const qJcNum = ref(0);
+const qNjcNum = ref(0);
+
+const districtDataMap = ref<Record<string, AreaRegistrationData>>({});
+
+const isDistrictUser = computed(() => coordination.roleFlag === 9 || coordination.roleFlag === 4 || coordination.roleFlag === 3);
+
+const sJcNum = computed(() => {
+  if (isDistrictUser.value) return '-';
+  return (coordination.allNum - qJcNum.value).toLocaleString();
+});
+const sNjcNum = computed(() => {
+  if (isDistrictUser.value) return '-';
+  return (njcAll.value - qNjcNum.value).toLocaleString();
+});
+
+const hideLeftFlag = computed(() => coordination.roleFlag === 9 || coordination.roleFlag === 4 || coordination.roleFlag === 3);
+const leftFlagHref = computed(() => '/enforcement-code/statistical/city-direct');
+const rightFlagHref = computed(() => '/enforcement-code/statistical/district-direct');
+const rightFlagText = computed(() => {
+  if (coordination.roleFlag === 9 || coordination.roleFlag === 4 || coordination.roleFlag === 3) {
+    return `${coordination.roleDept || '各区'}综合分析`;
+  }
+  return '各区综合分析';
+});
+
+function goToAnalysis(type: 'city' | 'district') {
+  const path = type === 'city'
+    ? '/enforcement-code/statistical/city-direct'
+    : '/enforcement-code/statistical/district-direct';
+  router.push(path);
+}
+
+function districtData(name: string): AreaRegistrationData | undefined {
+  return districtDataMap.value[name];
+}
+
+function getNonTypeVal(areaName: string, key: string, field: 'num' | 'per') {
+  const data = districtDataMap.value[areaName];
+  if (!data) return field === 'num' ? 0 : '0.0';
+  const item = data.resNonTyps?.[key];
+  if (!item) return field === 'num' ? 0 : '0.0';
+  return field === 'num' ? (item.num ?? 0) : (item.per ?? '0.0');
+}
+
+function toggleDistrictDetail(config: { idx: number; name: string }) {
+  if (activeDistrictIdx.value === config.idx) {
+    activeDistrictIdx.value = -1;
+  } else {
+    activeDistrictIdx.value = config.idx;
+    districtTab.value = 'xzzf';
+  }
+}
+
+function switchDistrictTab(idx: number, flag: 'xzzf' | 'fxzzf') {
+  districtTab.value = flag;
+}
+
+function getNonTypeIcon(index: number) {
+  return `/statistical/images/icon_24_r${index + 1}.png`;
+}
+
+function getPopupDirection(config: { left: string }) {
+  const leftVal = parseFloat(config.left);
+  if (leftVal >= 50) return 'popup-left';
+  if (leftVal <= 20) return 'popup-right';
+  return 'popup-center';
+}
+
+const adminPieRef = ref<HTMLElement>();
+const nonPieRef = ref<HTMLElement>();
+const adminTrendRef = ref<HTMLElement>();
+const nonTrendRef = ref<HTMLElement>();
+
+let adminPieChart: echarts.ECharts | null = null;
+let nonPieChart: echarts.ECharts | null = null;
+let adminTrendChart: echarts.ECharts | null = null;
+let nonTrendChart: echarts.ECharts | null = null;
+
+function getTimeParams() {
+  if (!dateRange.value) return { beginTime: undefined, endTime: undefined };
+  return { beginTime: dateRange.value[0], endTime: dateRange.value[1] };
+}
+
+async function loadCoordination() {
+  const res = await safeLoad(() => analysisEnterprisesCoordination(getTimeParams()));
+  if (!res) return;
+  const data = normalizeCoordination(unwrapData(res));
+  Object.assign(coordination, data);
+  coordination.singleYoy = parseFloat(data.singleYoy);
+  coordination.singleRr = parseFloat(data.singleRr);
+  coordination.unionYoy = parseFloat(data.unionYoy);
+  coordination.unionRr = parseFloat(data.unionRr);
+}
+
+async function loadEnterprise() {
+  const res = await safeLoad(() => analysisEnterprises(getTimeParams()));
+  if (!res) return;
+  const data = normalizeEnterpriseStat(unwrapData(res));
+  enterprise.num = data.num;
+  enterprise.yoy = parseFloat(data.yoy);
+  enterprise.rr = parseFloat(data.rr);
+}
+
+async function loadNjcAll() {
+  const res = await safeLoad(() => analysisEnterprisesNonAll(getTimeParams()));
+  if (!res) return;
+  njcAll.value = toNum(unwrapData(res));
+}
+
+async function loadAdminType() {
+  const res = await safeLoad(() => analysisRegistrationType(getTimeParams()));
+  if (!res) return;
+  const list = normalizeDictStatList(unwrapData(res));
+  const chartData = list.filter((item) => item.dict_label).map((item) => ({ value: item.num, name: item.dict_label }));
+  await nextTick();
+  if (adminPieRef.value && chartData.length) {
+    adminPieChart ??= echarts.init(adminPieRef.value);
+    adminPieChart.setOption(buildAdminPieOption(chartData), true);
+  }
+}
+
+async function loadNonType() {
+  const res = await safeLoad(() => analysisNonRegistrationType(getTimeParams()));
+  if (!res) return;
+  const list = normalizeDictStatList(unwrapData(res));
+  nonTypeList.value = list;
+  const chartData = list.filter((item) => item.dict_label).map((item) => ({ value: item.num, name: item.dict_label }));
+  await nextTick();
+  if (nonPieRef.value && chartData.length) {
+    nonPieChart ??= echarts.init(nonPieRef.value);
+    nonPieChart.setOption(buildNonAdminPieOption(chartData), true);
+  }
+}
+
+async function loadAdminTrend() {
+  const res = await safeLoad(() => analysisTime(getTimeParams()));
+  if (!res) return;
+  const { times, ins, ent } = normalizeTimeSeries(unwrapData(res));
+  await nextTick();
+  if (adminTrendRef.value && times.length) {
+    adminTrendChart ??= echarts.init(adminTrendRef.value);
+    adminTrendChart.setOption(
+      buildTrendLineOption(times, ins.map(Number), ent.map(Number), '行政执法数量', '被检查企业数量', '行政执法数量（宗）'),
+      true
+    );
+  }
+}
+
+async function loadNonTrend() {
+  const res = await safeLoad(() => nonAnalysisTime(getTimeParams()));
+  if (!res) return;
+  const { times, ins, ent } = normalizeTimeSeries(unwrapData(res));
+  await nextTick();
+  if (nonTrendRef.value && times.length) {
+    nonTrendChart ??= echarts.init(nonTrendRef.value);
+    nonTrendChart.setOption(
+      buildTrendLineOption(times, ins.map(Number), ent.map(Number), '非行政执法数量', '被检查企业数量', '行政执法数量（宗）', '被检查企业数量（家）'),
+      true
+    );
+  }
+}
+
+function onDateChange() {
+  refreshAll();
+}
+
+function switchTrendTab(tab: number) {
+  trendTab.value = tab;
+  nextTick(() => {
+    if (tab === 0) adminTrendChart?.resize();
+    else nonTrendChart?.resize();
+  });
+}
+
+function handleResize() {
+  adminPieChart?.resize();
+  nonPieChart?.resize();
+  adminTrendChart?.resize();
+  nonTrendChart?.resize();
+}
+
+async function loadAreaData() {
+  const params = getTimeParams();
+  let jcSum = 0;
+  let njcSum = 0;
+  const dataMap: Record<string, AreaRegistrationData> = {};
+
+  const results = await Promise.allSettled(
+    DISTRICT_LIST.map((area) => areaRegistration({ ...params, deptId: area }))
+  );
+
+  results.forEach((result, index) => {
+    if (result.status !== 'fulfilled') return;
+    const data = normalizeAreaRegistration(unwrapData(result.value));
+    const area = data.area || DISTRICT_LIST[index];
+    dataMap[area] = data;
+    jcSum += data.allNum;
+    njcSum += data.njcNum;
+  });
+
+  districtDataMap.value = dataMap;
+  qJcNum.value = jcSum;
+  qNjcNum.value = njcSum;
+}
+
+async function refreshAll() {
+  await Promise.allSettled([
+    loadCoordination(),
+    loadEnterprise(),
+    loadNjcAll(),
+    loadAdminType(),
+    loadNonType(),
+    loadAdminTrend(),
+    loadNonTrend(),
+    loadAreaData()
+  ]);
+}
+
+onMounted(async () => {
+  await refreshAll();
+  nextTick(() => {
+    handleResize();
+  });
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  adminPieChart?.dispose();
+  nonPieChart?.dispose();
+  adminTrendChart?.dispose();
+  nonTrendChart?.dispose();
+});
+</script>
+
+<style lang="scss" scoped>
+.home-dashboard {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - 50px);
+  overflow: hidden;
+  background: #0a1628;
+  color: #fff;
+}
+
+.dashboard-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse at 20% 50%, rgba(32, 96, 180, 0.35) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 50%, rgba(32, 130, 180, 0.3) 0%, transparent 60%),
+    radial-gradient(ellipse at 50% 50%, rgba(20, 60, 120, 0.4) 0%, transparent 70%),
+    linear-gradient(180deg, #0d1d3a 0%, #0a1628 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.dashboard-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  min-height: calc(100vh - 50px);
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.col-left,
+.col-right {
+  width: 260px;
+  flex-shrink: 0;
+}
+
+.col-center {
+  flex: 1;
+  min-width: 0;
+}
+
+.panel {
+  background: linear-gradient(180deg, rgba(22, 60, 120, 0.45) 0%, rgba(14, 35, 72, 0.55) 100%);
+  border: 1px solid rgba(58, 174, 251, 0.25);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 80, 180, 0.15), inset 0 0 30px rgba(0, 40, 100, 0.2);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(58, 174, 251, 0.2);
+  background: linear-gradient(90deg, rgba(58, 174, 251, 0.15) 0%, transparent 100%);
+}
+
+.panel-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  display: inline-block;
+}
+
+.icon-admin {
+  background: linear-gradient(135deg, #3aaefb 0%, #1e6bb8 100%);
+  box-shadow: 0 0 8px rgba(58, 174, 251, 0.6);
+}
+
+.icon-non {
+  background: linear-gradient(135deg, #7bb06c 0%, #489d61 100%);
+  box-shadow: 0 0 8px rgba(123, 176, 108, 0.6);
+}
+
+.panel-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 1px;
+}
+
+.panel-body {
+  padding: 14px 16px;
+}
+
+/* 左侧统计列表 */
+.stat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stat-item {
+  padding: 10px 12px;
+  background: rgba(30, 60, 120, 0.3);
+  border: 1px solid rgba(58, 174, 251, 0.2);
+  border-radius: 4px;
+}
+
+.stat-item-rate {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.stat-item-rate .stat-label {
+  margin-bottom: 0;
+  flex-shrink: 0;
+}
+
+.stat-item-rate .stat-value-rate {
+  flex: 1;
+}
+
+.stat-item-rate .stat-value-rate b {
+  font-size: 22px;
+  font-weight: 600;
+  color: #fff;
+  font-family: 'DIN Alternate', 'Arial Narrow', sans-serif;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+}
+
+.rate-box {
+  flex-shrink: 0;
+}
+
+.rate-tag {
+  background: rgba(243, 153, 98, 0.12);
+  border: 1px solid rgba(243, 153, 98, 0.3);
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+
+.stat-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 6px;
+}
+
+.stat-icon-img {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.stat-value {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.stat-value b {
+  font-size: 22px;
+  font-weight: 600;
+  color: #fff;
+  font-family: 'DIN Alternate', 'Arial Narrow', sans-serif;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+}
+
+.stat-percent {
+  font-size: 14px;
+  color: #3aaefb;
+  font-weight: 600;
+}
+
+.stat-percent i {
+  font-size: 11px;
+}
+
+.stat-value-rate {
+  display: flex;
+  align-items: center;
+}
+
+.rate-percent {
+  font-size: 22px;
+  font-weight: 700;
+  color: rgba(243, 153, 98, 0.85);
+  font-family: 'DIN Alternate', 'Arial Narrow', sans-serif;
+}
+
+.rate-percent i {
+  font-size: 13px;
+  margin-left: 2px;
+  color: rgba(243, 153, 98, 0.75);
+}
+
+.stat-change {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  font-size: 11px;
+}
+
+.change-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 5px;
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+.change-tag.up {
+  background: rgba(255, 80, 80, 0.15);
+  color: #ff6b6b;
+}
+
+.change-tag.down {
+  background: rgba(80, 200, 120, 0.15);
+  color: #5bc878;
+}
+
+.arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.arrow.up {
+  border-width: 0 4px 6px 4px;
+  border-color: transparent transparent transparent currentColor;
+}
+
+.arrow.down {
+  border-width: 6px 4px 0 4px;
+  border-color: currentColor transparent transparent transparent;
+}
+
+.change-label {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.chart-pie {
+  width: 100%;
+  height: 180px;
+  margin-top: -10%;
+  background: url('/statistical/images/bg_pie.png') no-repeat center;
+  background-size: 48.5% auto;
+  background-position-y: 50.5%;
+}
+
+/* 中间区域 */
+.center-top {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.region-select {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  background: linear-gradient(180deg, rgba(22, 60, 120, 0.5) 0%, rgba(14, 35, 72, 0.6) 100%);
+  border: 1px solid rgba(58, 174, 251, 0.25);
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+
+.region-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  position: relative;
+  padding-left: 14px;
+}
+
+.region-name::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 18px;
+  background: linear-gradient(180deg, #3aaefb 0%, #1e6bb8 100%);
+  border-radius: 2px;
+}
+
+.time-filter :deep(.el-date-editor) {
+  --el-input-bg-color: rgba(0, 30, 80, 0.6);
+  --el-input-border-color: rgba(58, 174, 251, 0.4);
+  --el-input-text-color: rgba(255, 255, 255, 0.85);
+  --el-input-placeholder-color: rgba(255, 255, 255, 0.45);
+  width: 240px;
+}
+
+.time-filter :deep(.el-range-separator) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.overview-numbers {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.overview-card {
+  flex: 1;
+  padding: 14px 18px;
+  background: linear-gradient(180deg, rgba(22, 60, 120, 0.5) 0%, rgba(14, 35, 72, 0.6) 100%);
+  border: 1px solid rgba(58, 174, 251, 0.25);
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden;
+}
+
+.overview-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  border-radius: 0 2px 2px 0;
+}
+
+.admin-card::before {
+  background: linear-gradient(180deg, #3aaefb 0%, #1e6bb8 100%);
+}
+
+.non-card::before {
+  background: linear-gradient(180deg, #7bb06c 0%, #489d61 100%);
+}
+
+.overview-label {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 4px;
+}
+
+.overview-value {
+  font-size: 32px;
+  font-weight: 600;
+  font-family: 'DIN Alternate', 'Arial Narrow', sans-serif;
+  color: #fff;
+  letter-spacing: 1px;
+  line-height: 1.5;
+  background-image: linear-gradient(to right, #d2f5ff, #0394f9);
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.overview-card.non-card .overview-value {
+  background-image: linear-gradient(to right, #f7fbfd, #2ba4b3);
+}
+
+.overview-sub {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 4px;
+  display: flex;
+  gap: 12px;
+}
+
+.overview-sub b {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 600;
+}
+
+/* 链接按钮 */
+.link-btn {
+  text-align: right;
+  margin-bottom: 8px;
+
+  a {
+    position: relative;
+    display: inline-block;
+    padding: 4px 12px 4px 32px;
+    margin: 0 8px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(58, 174, 251, 0.4);
+    border-radius: 3px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: rgba(58, 174, 251, 0.15);
+      color: #fff;
+      border-color: rgba(58, 174, 251, 0.6);
+    }
+  }
+}
+
+.link-icon-dept {
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: url('/statistical/images/icon_dept32.png') no-repeat center;
+  background-size: contain;
+}
+
+.link-icon-dist {
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: url('/statistical/images/icon_dist32.png') no-repeat center;
+  background-size: contain;
+}
+
+.link-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 4px;
+  border-left: 4px solid #1ab5e0;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  vertical-align: middle;
+}
+
+/* 地图区域 */
+.center-map {
+  flex: 1;
+  min-height: 320px;
+  position: relative;
+  background: linear-gradient(180deg, rgba(22, 60, 120, 0.35) 0%, rgba(14, 35, 72, 0.45) 100%);
+  border: 1px solid rgba(58, 174, 251, 0.2);
+  border-radius: 6px;
+  overflow: visible;
+  margin-bottom: 12px;
+}
+
+.map-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.szmap {
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  object-fit: contain;
+  opacity: 0.9;
+}
+
+.district-labels {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.district-label {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+  pointer-events: auto;
+  z-index: 2;
+}
+
+.flag-c {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 3px;
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(58, 174, 251, 0.15);
+  }
+
+  &.active {
+    background: rgba(58, 174, 251, 0.25);
+  }
+}
+
+.district-label .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #3aaefb;
+  box-shadow: 0 0 6px rgba(58, 174, 251, 0.8);
+}
+
+.district-label label {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+  cursor: pointer;
+  margin: 0;
+}
+
+/* 区域详情弹窗 */
+.fold-cont {
+  position: absolute;
+  top: -190px;
+  min-width: 280px;
+  max-width: 340px;
+  height: 190px;
+  background: linear-gradient(180deg, rgba(22, 60, 120, 0.95) 0%, rgba(14, 35, 72, 0.98) 100%);
+  border: 1px solid rgba(58, 174, 251, 0.4);
+  border-radius: 6px;
+  box-shadow: 0 4px 20px rgba(0, 80, 180, 0.4);
+  padding: 12px 14px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.fold-cont.popup-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.fold-cont.popup-left {
+  right: 0;
+  transform: translateX(0);
+}
+
+.fold-cont.popup-right {
+  left: 0;
+  transform: translateX(0);
+}
+
+.fold-cont::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid rgba(58, 174, 251, 0.4);
+}
+
+.fold-cont.popup-center::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.fold-cont.popup-left::after {
+  right: 20px;
+}
+
+.fold-cont.popup-right::after {
+  left: 20px;
+}
+
+.pop-tit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(58, 174, 251, 0.2);
+
+  h5 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+  }
+}
+
+.fold-cont.fxzzf .pop-tit {
+  width: 83%;
+}
+
+.fold-cont.fxzzf#districtSS .pop-tit,
+.fold-cont.fxzzf.districtSS .pop-tit {
+  width: 88%;
+}
+
+.tab-switch {
+  display: flex;
+  gap: 4px;
+
+  a {
+    padding: 3px 10px;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(58, 174, 251, 0.3);
+    border-radius: 3px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #fff;
+    }
+
+    &.active {
+      background: linear-gradient(135deg, #3aaefb 0%, #1e6bb8 100%);
+      color: #fff;
+      border-color: transparent;
+    }
+  }
+}
+
+.tab-inspect {
+  .inspect-count {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 6px;
+
+    b {
+      color: #3aaefb;
+      font-weight: 600;
+    }
+  }
+
+  .tab-inspect-item:first-child ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 3px 0;
+      font-size: 12px;
+      border-bottom: 1px dashed rgba(58, 174, 251, 0.15);
+
+      label {
+        color: #92b3d3;
+        width: 40%;
+      }
+
+      span {
+        color: #06b8f8;
+        font-weight: 500;
+
+        &:nth-child(2) {
+          color: rgba(243, 153, 98, 0.9);
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+
+  .tab-inspect-item:last-child {
+    display: flex;
+    gap: 16px;
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      li {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 3px 0;
+        font-size: 12px;
+        border-bottom: 1px dashed rgba(58, 174, 251, 0.15);
+
+        label {
+          color: #92b3d3;
+          width: 45%;
+        }
+
+        span {
+          color: #06b8f8;
+          font-weight: 500;
+
+          &:nth-child(2) {
+            color: rgba(243, 153, 98, 0.9);
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.fold-cont.xzzf .tab-inspect {
+  margin-top: 64px;
+}
+
+.fold-cont.fxzzf .tab-inspect {
+  margin-top: 28.8px;
+}
+
+.fold-cont.fxzzf .tab-inspect-item:last-child {
+  width: auto;
+  left: auto;
+}
+
+.fold-cont.fxzzf#districtSS .tab-inspect-item:last-child,
+.fold-cont.fxzzf.districtSS .tab-inspect-item:last-child {
+  width: 280px;
+}
+
+.fold-cont.fxzzf#districtDP .tab-inspect-item:last-child .inspect-count,
+.fold-cont.fxzzf.districtDP .tab-inspect-item:last-child .inspect-count {
+  left: 24px;
+}
+
+.fold-cont.fxzzf#districtSS .tab-inspect-item:last-child .inspect-count,
+.fold-cont.fxzzf.districtSS .tab-inspect-item:last-child .inspect-count {
+  left: 38px;
+}
+
+/* 底部趋势 */
+.center-bottom {
+  flex-shrink: 0;
+}
+
+.trend-panel {
+  background: linear-gradient(180deg, rgba(22, 60, 120, 0.45) 0%, rgba(14, 35, 72, 0.55) 100%);
+  border: 1px solid rgba(58, 174, 251, 0.25);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.trend-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(58, 174, 251, 0.2);
+  background: linear-gradient(90deg, rgba(58, 174, 251, 0.12) 0%, transparent 100%);
+}
+
+.trend-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.trend-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.trend-tabs a {
+  padding: 4px 14px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(58, 174, 251, 0.3);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.trend-tabs a:hover {
+  color: #fff;
+  border-color: rgba(58, 174, 251, 0.5);
+}
+
+.trend-tabs a.active {
+  background: linear-gradient(135deg, #3aaefb 0%, #1e6bb8 100%);
+  color: #fff;
+  border-color: transparent;
+}
+
+.trend-body {
+  padding: 10px 14px;
+  height: 200px;
+}
+
+.chart-trend {
+  width: 100%;
+  height: 100%;
+}
+
+/* 右侧网格 */
+.stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 12px;
+}
+
+.stat-grid-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: linear-gradient(to bottom, transparent 50%, rgba(34, 125, 223, 0.35));
+  border: 1px solid rgba(26, 86, 151, 0.6);
+  border-radius: 5px;
+  font-size: 12px;
+  text-align: center;
+}
+
+.stat-grid-item.grid-item-alt {
+  background: linear-gradient(to bottom, transparent 50%, rgba(20, 138, 156, 0.35));
+  border: 1px solid rgba(20, 103, 103, 0.6);
+}
+
+.stat-grid-item.grid-item-full {
+  grid-column: 1 / -1;
+}
+
+.grid-label-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 11px;
+  flex: 1;
+}
+
+.grid-icon-img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.grid-num {
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'DIN Alternate', 'Arial Narrow', sans-serif;
+  background-image: linear-gradient(to right, #f7fbfd, #2ba4b3);
+  -webkit-background-clip: text;
+  color: transparent;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+}
+
+.chart-donut {
+  width: 100%;
+  height: 160px;
+  margin-top: 0;
+  background: url('/statistical/images/bg_pie.png') no-repeat center;
+  background-size: 48.5% auto;
+  background-position-y: 30.5%;
+}
+</style>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/utils/chartOptions.ts b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/utils/chartOptions.ts
index 8080478c..5d0b0660 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/utils/chartOptions.ts
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/utils/chartOptions.ts
@@ -43,7 +43,7 @@ export function buildAdminPieOption(data: { value: number; name: string }[]): EC
         itemStyle: { borderRadius: 1 },
         label: {
           show: true,
-          formatter: '{b|{b}} :\n {a|{c}}{d| ({d}%)}',
+          formatter: '{b|{b}} ' + '{b|:}' + '\n ' + '{a|{c}}' + '{d| ({d}%)}',
           rich: {
             a: { color: '#3aaefb', fontSize: 12, lineHeight: 16 },
             b: { color: 'rgba(255, 255, 255, .6)', fontSize: 12, lineHeight: 16 },
@@ -85,7 +85,7 @@ export function buildNonAdminPieOption(data: { value: number; name: string }[]):
         itemStyle: { borderRadius: 1 },
         label: {
           show: true,
-          formatter: '{b|{b}} :\n {a|{c}}{d| ({d}%)}',
+          formatter: '{b|{b}} ' + '{b|:}' + '\n ' + '{a|{c}}' + '{d| ({d}%)}',
           rich: {
             a: { color: '#3aaefb', fontSize: 12, lineHeight: 16 },
             b: { color: 'rgba(255, 255, 255, .6)', fontSize: 12, lineHeight: 16 },
@@ -105,7 +105,8 @@ export function buildTrendLineOption(
   ent: number[],
   insName: string,
   entName: string,
-  leftAxisName: string
+  leftAxisName: string,
+  rightAxisName: string = '被执法企业数量（家）'
 ): EChartsOption {
   const { max, interval } = getSmartMaxAndInterval(ins, ent, 5);
   return {
@@ -147,7 +148,7 @@ export function buildTrendLineOption(
       },
       {
         type: 'value',
-        name: '被执法企业数量（家）',
+        name: rightAxisName,
         position: 'right',
         axisLine: { lineStyle: { color: 'rgba(245,144,54,.65)' } },
         axisLabel: { formatter: '{value}', color: 'rgba(245,144,54,.65)' },