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 5e0466ce..2406319c 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
@@ -70,7 +70,8 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: '/home',
-        component: () => import('@/views/home/index.vue'),
+        // component: () => import('@/views/home/index.vue'),
+        component: () => import('@/views/supervision/statistical/home/index.vue'),
         name: 'Home',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
@@ -314,31 +315,31 @@ export const constantRoutes: RouteRecordRaw[] = [
       }
     ]
   },
-  // {
-  //   path: '/enforcement-code/statistical',
-  //   component: Layout,
-  //   hidden: true,
-  //   children: [
-  //     {
-  //       path: 'home',
-  //       component: () => import('@/views/supervision/statistical/home/index.vue'),
-  //       name: 'StatisticalHome',
-  //       meta: { title: '首页统计分析', fullscreen: true }
-  //     },
-  //     {
-  //       path: 'city-direct',
-  //       component: () => import('@/views/supervision/statistical/city-direct/index.vue'),
-  //       name: 'StatisticalCityDirect',
-  //       meta: { title: '市直综合分析', fullscreen: true }
-  //     },
-  //     {
-  //       path: 'district-direct',
-  //       component: () => import('@/views/supervision/statistical/district-direct/index.vue'),
-  //       name: 'StatisticalDistrictDirect',
-  //       meta: { title: '各区综合分析', fullscreen: true }
-  //     }
-  //   ]
-  // }
+  {
+    path: '/enforcement-code/statistical',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'home',
+        component: () => import('@/views/supervision/statistical/home/index.vue'),
+        name: 'StatisticalHome',
+        meta: { title: '首页统计分析', fullscreen: true }
+      },
+      {
+        path: 'city-direct',
+        component: () => import('@/views/supervision/statistical/city-direct/index.vue'),
+        name: 'StatisticalCityDirect',
+        meta: { title: '市直综合分析', fullscreen: true }
+      },
+      {
+        path: 'district-direct',
+        component: () => import('@/views/supervision/statistical/district-direct/index.vue'),
+        name: 'StatisticalDistrictDirect',
+        meta: { title: '各区综合分析', fullscreen: true }
+      }
+    ]
+  }
 ];
 
 // 动态路由，基于用户权限动态去加载
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
index a0ce1b78..b5a7da0d 100644
--- 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
@@ -548,7 +548,7 @@ async function loadAdminTrend() {
   let { times, ins, ent } = res ? normalizeTimeSeries(unwrapData(res)) : { times: [] as string[], ins: [] as number[], ent: [] as number[] };
   if (!times.length) {
     times = ['2024-08', '2024-10', '2024-12', '2025-02', '2025-04', '2025-06', '2025-08', '2025-10', '2025-12', '2026-02', '2026-04', '2026-06', '2026-08'];
-    ins = [2800, 3200, 3800, 3500, 4200, 4800, 5200, 5800, 6400, 6000, 6800, 7200, 7600];
+    ins = ['2800', '3200', '3800', '3500', '4200', '4800', '5200', '5800', '6400', '6000', '6800', '7200', '7600'];
     ent = [1200, 1500, 1800, 1600, 2200, 2500, 2800, 3100, 3400, 3200, 3600, 3900, 4100];
   }
   await nextTick();
@@ -557,7 +557,7 @@ async function loadAdminTrend() {
       adminTrendChart = echarts.init(adminTrendRef.value);
     }
     adminTrendChart.setOption(
-      buildTrendLineOption(times, ins, ent, '行政执法数量', '被检查企业数量', '行政执法数量（宗）', '被执法企业数量（家）'),
+      buildTrendLineOption(times, ins.map(Number), ent.map(Number), '行政执法数量', '被检查企业数量', '行政执法数量（宗）', '被执法企业数量（家）'),
       true
     );
     adminTrendChart.resize();
@@ -578,7 +578,7 @@ async function loadNonTrend() {
       nonTrendChart = echarts.init(nonTrendRef.value);
     }
     nonTrendChart.setOption(
-      buildTrendLineOption(times, ins, ent, '非行政执法数量', '被检查企业数量', '行政执法数量（宗）', '被检查企业数量（家）'),
+      buildTrendLineOption(times, ins.map(Number), ent.map(Number), '非行政执法数量', '被检查企业数量', '非行政执法数量（宗）', '被检查企业数量（家）'),
       true
     );
     nonTrendChart.resize();
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/city-direct/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/city-direct/index.vue
index 303d5684..a81cb142 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/city-direct/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/city-direct/index.vue
@@ -19,19 +19,21 @@
           </dl>
         </div>
         <div class="select_item">
-          <label class="select_time">时间筛选</label>
+          <label class="select_time">时间筛选<a></a></label>
           <el-date-picker
             v-model="dateRange"
             type="daterange"
             range-separator="至"
             value-format="YYYY-MM-DD"
             clearable
+            popper-class="analysis-date-picker"
             @change="refreshAll"
           />
           <span>综合数据</span>
         </div>
       </div>
-      <div class="link_btn">
+      <div class="link_btn" style="text-align: right;">
+        <a href="javascript:void(0)" style="display: none;">各市直执法部门综合分析</a>
         <router-link to="/enforcement-code/statistical/district-direct">各区执法综合分析</router-link>
       </div>
 
@@ -339,7 +341,10 @@ async function loadEntCSort() {
   );
   if (!res) return;
   await nextTick();
-  rankComplaintChart = renderRankChart(rankComplaintRef.value, rankComplaintChart, normalizeRankList(unwrapData(res)), 'bureau_dept_name', '排行')!;
+  const data = normalizeRankList(unwrapData(res));
+  // rankComplaint uses 'complaint_departments' field, others use 'bureau_dept_name'
+  const nameKey = isCityWide.value ? 'complaint_departments' as const : 'bureau_dept_name' as const;
+  rankComplaintChart = renderRankChart(rankComplaintRef.value, rankComplaintChart, data, nameKey, '被投诉单位次数')!;
 }
 
 async function loadAutoRate() {
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/components/TopSixMetrics.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/components/TopSixMetrics.vue
index 3326f839..d471960b 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/components/TopSixMetrics.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/components/TopSixMetrics.vue
@@ -9,8 +9,18 @@
           <div class="percent-tag"><label>本月</label><span class="data-change">{{ m.singleLaw?.thisMonth ?? '-' }}</span></div>
         </div>
       </div>
-      <div class="percent-tag"><label>同比</label><span class="data-change">{{ fmt(m.singleLaw?.yoy) }}</span></div>
-      <div class="percent-tag"><label>环比</label><span class="data-change">{{ fmt(m.singleLaw?.mom) }}</span></div>
+      <div class="percent-tag">
+        <label>同比</label>
+        <span class="data-rise" :style="{ display: isRise(m.singleLaw?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.singleLaw?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.singleLaw?.yoy) }}</span>
+      </div>
+      <div class="percent-tag">
+        <label>环比</label>
+        <span class="data-rise" :style="{ display: isRise(m.singleLaw?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.singleLaw?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.singleLaw?.mom) }}</span>
+      </div>
     </div>
     <div class="data_item">
       <div class="cont-title">联合执法数量</div>
@@ -21,8 +31,18 @@
           <div class="percent-tag"><label>本月</label><span class="data-change">{{ m.unionLaw?.thisMonth ?? '-' }}</span></div>
         </div>
       </div>
-      <div class="percent-tag"><label>同比</label><span class="data-change">{{ fmt(m.unionLaw?.yoy) }}</span></div>
-      <div class="percent-tag"><label>环比</label><span class="data-change">{{ fmt(m.unionLaw?.mom) }}</span></div>
+      <div class="percent-tag">
+        <label>同比</label>
+        <span class="data-rise" :style="{ display: isRise(m.unionLaw?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.unionLaw?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.unionLaw?.yoy) }}</span>
+      </div>
+      <div class="percent-tag">
+        <label>环比</label>
+        <span class="data-rise" :style="{ display: isRise(m.unionLaw?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.unionLaw?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.unionLaw?.mom) }}</span>
+      </div>
     </div>
     <div class="data_item">
       <div class="cont-title">被执法企业数量</div>
@@ -33,8 +53,18 @@
           <div class="percent-tag"><label>本月</label><span class="data-change">{{ m.enfEnt?.thisMonth ?? '-' }}</span></div>
         </div>
       </div>
-      <div class="percent-tag"><label>同比</label><span class="data-change">{{ fmt(m.enfEnt?.yoy) }}</span></div>
-      <div class="percent-tag"><label>环比</label><span class="data-change">{{ fmt(m.enfEnt?.mom) }}</span></div>
+      <div class="percent-tag">
+        <label>同比</label>
+        <span class="data-rise" :style="{ display: isRise(m.enfEnt?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.enfEnt?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.enfEnt?.yoy) }}</span>
+      </div>
+      <div class="percent-tag">
+        <label>环比</label>
+        <span class="data-rise" :style="{ display: isRise(m.enfEnt?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.enfEnt?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.enfEnt?.mom) }}</span>
+      </div>
     </div>
     <div class="data_item">
       <div class="cont-title">入企压减率</div>
@@ -56,8 +86,18 @@
           <div class="percent-tag"><label>本月</label><span class="data-change">{{ m.entComplaint?.thisMonth ?? '-' }}</span></div>
         </div>
       </div>
-      <div class="percent-tag"><label>同比</label><span class="data-change">{{ fmt(m.entComplaint?.yoy) }}</span></div>
-      <div class="percent-tag"><label>环比</label><span class="data-change">{{ fmt(m.entComplaint?.mom) }}</span></div>
+      <div class="percent-tag">
+        <label>同比</label>
+        <span class="data-rise" :style="{ display: isRise(m.entComplaint?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.entComplaint?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.entComplaint?.yoy) }}</span>
+      </div>
+      <div class="percent-tag">
+        <label>环比</label>
+        <span class="data-rise" :style="{ display: isRise(m.entComplaint?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.entComplaint?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.entComplaint?.mom) }}</span>
+      </div>
     </div>
     <div class="data_item">
       <div class="cont-title">企业数量</div>
@@ -68,8 +108,18 @@
           <div class="percent-tag"><label>本月</label><span class="data-change">{{ m.ent?.thisMonth ?? '-' }}</span></div>
         </div>
       </div>
-      <div class="percent-tag"><label>同比</label><span class="data-change">{{ fmt(m.ent?.yoy) }}</span></div>
-      <div class="percent-tag"><label>环比</label><span class="data-change">{{ fmt(m.ent?.mom) }}</span></div>
+      <div class="percent-tag">
+        <label>同比</label>
+        <span class="data-rise" :style="{ display: isRise(m.ent?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.ent?.yoy) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.ent?.yoy) }}</span>
+      </div>
+      <div class="percent-tag">
+        <label>环比</label>
+        <span class="data-rise" :style="{ display: isRise(m.ent?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-up"></i></span>
+        <span class="data-fall" :style="{ display: isFall(m.ent?.mom) ? '' : 'none' }"><i class="fa fa-long-arrow-down"></i></span>
+        <span class="data-change">{{ fmt(m.ent?.mom) }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -84,4 +134,14 @@ function fmt(val?: string | number) {
   if (val === undefined || val === null || val === '-') return '-%';
   return formatPercent(val);
 }
+
+function isRise(val?: string | number) {
+  if (val === undefined || val === null || val === '-') return false;
+  return parseFloat(String(val)) >= 0;
+}
+
+function isFall(val?: string | number) {
+  if (val === undefined || val === null || val === '-') return false;
+  return parseFloat(String(val)) < 0;
+}
 </script>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index copy.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index copy.vue
new file mode 100644
index 00000000..9f7ccbd4
--- /dev/null
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index copy.vue	
@@ -0,0 +1,439 @@
+<template>
+  <div class="statistical-home">
+    <div class="wrap_all">
+      <!-- 左侧：行政执法 -->
+      <div class="wrap_left">
+        <div class="cont_left">
+          <h1 class="block_tit">行政执法</h1>
+          <div class="count_admin_wrap">
+            <div class="count_admin">
+              <label><img src="/statistical/images/icon_jc2.png" alt="单独执法" />单独执法</label>
+              <div class="count_admin_num">
+                <b>{{ coordination.singleNum }}</b>
+                <span class="number_percent">{{ coordination.singlePer }}<i>%</i></span>
+              </div>
+              <div class="percent_box">
+                <div class="percent-tag">
+                  <span class="data-rise"><i class="fa fa-long-arrow-up"></i></span>
+                  <span class="data-change">{{ coordination.singleYoy }}%</span>
+                  <label>同比</label>
+                </div>
+                <div class="percent-tag">
+                  <span class="data-fall"><i class="fa fa-long-arrow-down"></i></span>
+                  <span class="data-change">{{ coordination.singleRr }}%</span>
+                  <label>环比</label>
+                </div>
+              </div>
+            </div>
+            <div class="count_admin">
+              <label><img src="/statistical/images/icon_jc.png" alt="联合执法" />联合执法</label>
+              <div class="count_admin_num">
+                <b>{{ coordination.unionNum }}</b>
+                <span class="number_percent">{{ coordination.unionPer }}<i>%</i></span>
+              </div>
+              <div class="percent_box">
+                <div class="percent-tag">
+                  <span class="data-rise"><i class="fa fa-long-arrow-up"></i></span>
+                  <span class="data-change">{{ coordination.unionYoy }}%</span>
+                  <label>同比</label>
+                </div>
+                <div class="percent-tag">
+                  <span class="data-fall"><i class="fa fa-long-arrow-down"></i></span>
+                  <span class="data-change">{{ coordination.unionRr }}%</span>
+                  <label>环比</label>
+                </div>
+              </div>
+            </div>
+            <div class="count_admin">
+              <label><img src="/statistical/images/icon_qy.png" alt="被执法企业" />被执法企业</label>
+              <div class="count_admin_num"><b>{{ enterprise.num }}</b></div>
+              <div class="percent_box">
+                <div class="percent-tag">
+                  <span class="data-rise"><i class="fa fa-long-arrow-up"></i></span>
+                  <span class="data-change">{{ enterprise.yoy }}%</span>
+                  <label>同比</label>
+                </div>
+                <div class="percent-tag">
+                  <span class="data-fall"><i class="fa fa-long-arrow-down"></i></span>
+                  <span class="data-change">{{ enterprise.rr }}%</span>
+                  <label>环比</label>
+                </div>
+              </div>
+            </div>
+            <div class="count_admin">
+              <label><img src="/statistical/images/icon_yj.png" alt="入企压减率" />入企压减率</label>
+              <div class="count_admin_num"><b>{{ coordination.cutNum }}</b></div>
+              <div class="percent_box">
+                <div class="percent-tag yjlv">
+                  <span class="number_percent">{{ coordination.cutPer }}<i>%</i></span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div ref="adminPieRef" class="chartbox_right" style="margin-top: -10%"></div>
+        </div>
+      </div>
+
+      <!-- 右侧：非行政执法 -->
+      <div class="wrap_right">
+        <div class="cont_left">
+          <h1 class="block_tit">非行政执法</h1>
+          <div class="count_wrap">
+            <div v-for="(item, index) in nonTypeList" :key="item.dict_label" class="count_item">
+              <label>
+                <img :src="`/statistical/images/icon_24_r${index + 1}.png`" :alt="item.dict_label" />
+                {{ item.dict_label }}
+              </label>
+              <span class="number_count">{{ item.num }}</span>
+            </div>
+          </div>
+          <div ref="nonPieRef" class="chartbox_right"></div>
+        </div>
+      </div>
+
+      <!-- 中间：地图 -->
+      <div class="wrap_cent">
+        <div class="select_set">
+          <div class="select_item">
+            <span>深圳市</span>
+            <span class="time_wrap">
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                :disabled-date="disabledDate"
+                clearable
+                @change="onDateChange"
+              />
+            </span>
+          </div>
+        </div>
+        <div class="link_btn" style="text-align: right">
+          <router-link v-if="showLeftLink" to="/enforcement-code/statistical/city-direct">{{ leftLinkText }}</router-link>
+          <router-link to="/enforcement-code/statistical/district-direct"><span>{{ rightLinkText }}</span></router-link>
+        </div>
+        <div class="count_box">
+          <div class="count_item admin">
+            <div class="count_tit"><label>行政执法</label></div>
+            <div class="count_num">
+              <div class="count_num_all">{{ coordination.allNum }}</div>
+              <div class="count_num_sub">
+                <span>（市直：<b>{{ sJcNum }}</b></span>
+                <span>各区：<b>{{ qJcNum }}</b>）</span>
+              </div>
+            </div>
+          </div>
+          <div class="count_item non_admin">
+            <div class="count_tit"><label>非行政执法</label></div>
+            <div class="count_num">
+              <div class="count_num_all">{{ njcAll }}</div>
+              <div class="count_num_sub">
+                <span>（市直：<b>{{ sNjcNum }}</b></span>
+                <span>各区：<b>{{ qNjcNum }}</b>）</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="map_box">
+          <img class="szmap" src="/statistical/images/szmap_3d.png" alt="深圳地图" width="1920" height="1080" border="0" />
+          <div class="label_wrap">
+            <DistrictPopup
+              v-for="config in districtConfigs"
+              :key="config.key"
+              :config="config"
+              :data="districtDataMap[config.name]"
+              :expanded="expandedDistrictIdx === config.idx"
+              @toggle="onDistrictToggle"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部：趋势图 -->
+      <div class="wrap_bottom">
+        <div class="cont_left">
+          <h3>涉企执法趋势</h3>
+          <div class="tab_tit">
+            <a :class="{ active: trendTab === 0 }" @click="switchTrendTab(0)">行政执法</a>
+            <a :class="{ active: trendTab === 1 }" @click="switchTrendTab(1)">非行政执法</a>
+          </div>
+          <div class="tab_chart">
+            <div v-show="trendTab === 0" ref="adminTrendRef" class="chartbox" style="position: absolute"></div>
+            <div v-show="trendTab === 1" ref="nonTrendRef" class="chartbox" style="position: absolute"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import * as echarts from 'echarts';
+import DistrictPopup from './components/DistrictPopup.vue';
+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 '../utils/chartOptions';
+import { DISTRICT_CONFIGS, DISTRICT_LIST } from '../utils/districtConfig';
+
+async function safeLoad<T>(fn: () => Promise<T>): Promise<T | null> {
+  try {
+    return await fn();
+  } catch (e) {
+    console.warn('[统计首页] 接口加载失败', e);
+    return null;
+  }
+}
+
+const districtConfigs = DISTRICT_CONFIGS;
+
+const dateRange = ref<[string, string] | null>(null);
+const trendTab = ref(0);
+const expandedDistrictIdx = ref<number | null>(null);
+
+const coordination = reactive({
+  roleFlag: 1,
+  roleDept: '',
+  allNum: 0,
+  nonNum: 0,
+  unionNum: 0,
+  unionYoy: '0.0',
+  unionRr: '0.0',
+  unionPer: '0.0',
+  singleNum: 0,
+  singleYoy: '0.0',
+  singleRr: '0.0',
+  singlePer: '0.0',
+  cutNum: 0,
+  cutPer: '0.0'
+});
+
+const enterprise = reactive({ num: 0, yoy: '0.0', rr: '0.0' });
+const nonTypeList = ref<DictStatItem[]>([]);
+const njcAll = ref(0);
+const qJcNum = ref(0);
+const qNjcNum = ref(0);
+const districtDataMap = ref<Record<string, AreaRegistrationData>>({});
+
+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;
+
+const showLeftLink = computed(() => coordination.roleFlag === 1);
+const leftLinkText = computed(() => '各市直执法单位综合分析');
+const rightLinkText = computed(() => {
+  if ([9, 4, 3].includes(coordination.roleFlag)) {
+    return `${coordination.roleDept}综合分析`;
+  }
+  return '各区综合分析';
+});
+const sJcNum = computed(() => ([9, 4, 3].includes(coordination.roleFlag) ? '-' : coordination.allNum - qJcNum.value));
+const sNjcNum = computed(() => ([9, 4, 3].includes(coordination.roleFlag) ? '-' : njcAll.value - qNjcNum.value));
+
+function disabledDate(time: Date) {
+  const min = new Date('2019-04-14').getTime();
+  const max = new Date('2099-06-16').getTime();
+  return time.getTime() < min || time.getTime() > max;
+}
+
+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);
+  njcAll.value = data.nonNum;
+}
+
+async function loadEnterprise() {
+  const res = await safeLoad(() => analysisEnterprises(getTimeParams()));
+  if (!res) return;
+  Object.assign(enterprise, normalizeEnterpriseStat(unwrapData(res)));
+}
+
+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
+    );
+  }
+}
+
+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()
+  ]);
+}
+
+function onDateChange() {
+  refreshAll();
+}
+
+function onDistrictToggle(idx: number) {
+  expandedDistrictIdx.value = expandedDistrictIdx.value === idx ? null : idx;
+}
+
+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();
+}
+
+onMounted(() => {
+  refreshAll();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  adminPieChart?.dispose();
+  nonPieChart?.dispose();
+  adminTrendChart?.dispose();
+  nonTrendChart?.dispose();
+});
+</script>
+
+<style scoped>
+@import '/statistical/styles/home.css';
+@import '/statistical/font-awesome-bak/css/font-awesome.min.css';
+
+.statistical-home {
+  width: 100%;
+  min-height: calc(100vh - 50px);
+  overflow: auto;
+  background: #0b1d4b;
+}
+
+.statistical-home :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);
+}
+
+.statistical-home :deep(.el-range-separator) {
+  color: rgba(255, 255, 255, 0.6);
+}
+</style>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index.vue b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index.vue
index 9f7ccbd4..a0ce1b78 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index.vue
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="statistical-home">
+  <div class="home-wrap" :style="cssVars">
     <div class="wrap_all">
       <!-- 左侧：行政执法 -->
       <div class="wrap_left">
@@ -7,62 +7,78 @@
           <h1 class="block_tit">行政执法</h1>
           <div class="count_admin_wrap">
             <div class="count_admin">
-              <label><img src="/statistical/images/icon_jc2.png" alt="单独执法" />单独执法</label>
+              <label><img :src="imgPath('icon_jc2.png')" alt="单独执法" />单独执法</label>
               <div class="count_admin_num">
-                <b>{{ coordination.singleNum }}</b>
+                <b>{{ coordination.singleNum.toLocaleString() }}</b>
                 <span class="number_percent">{{ coordination.singlePer }}<i>%</i></span>
               </div>
               <div class="percent_box">
                 <div class="percent-tag">
-                  <span class="data-rise"><i class="fa fa-long-arrow-up"></i></span>
-                  <span class="data-change">{{ coordination.singleYoy }}%</span>
+                  <span :class="coordination.singleYoy >= 0 ? 'data-rise' : 'data-fall'">
+                    <i :class="coordination.singleYoy >= 0 ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
+                  </span>
+                  <span class="data-change">{{ Math.abs(coordination.singleYoy) }}%</span>
                   <label>同比</label>
                 </div>
                 <div class="percent-tag">
-                  <span class="data-fall"><i class="fa fa-long-arrow-down"></i></span>
-                  <span class="data-change">{{ coordination.singleRr }}%</span>
+                  <span :class="coordination.singleRr >= 0 ? 'data-rise' : 'data-fall'">
+                    <i :class="coordination.singleRr >= 0 ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
+                  </span>
+                  <span class="data-change">{{ Math.abs(coordination.singleRr) }}%</span>
                   <label>环比</label>
                 </div>
               </div>
             </div>
             <div class="count_admin">
-              <label><img src="/statistical/images/icon_jc.png" alt="联合执法" />联合执法</label>
+              <label><img :src="imgPath('icon_jc.png')" alt="联合执法" />联合执法</label>
               <div class="count_admin_num">
-                <b>{{ coordination.unionNum }}</b>
+                <b>{{ coordination.unionNum.toLocaleString() }}</b>
                 <span class="number_percent">{{ coordination.unionPer }}<i>%</i></span>
               </div>
               <div class="percent_box">
                 <div class="percent-tag">
-                  <span class="data-rise"><i class="fa fa-long-arrow-up"></i></span>
-                  <span class="data-change">{{ coordination.unionYoy }}%</span>
+                  <span :class="coordination.unionYoy >= 0 ? 'data-rise' : 'data-fall'">
+                    <i :class="coordination.unionYoy >= 0 ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
+                  </span>
+                  <span class="data-change">{{ Math.abs(coordination.unionYoy) }}%</span>
                   <label>同比</label>
                 </div>
                 <div class="percent-tag">
-                  <span class="data-fall"><i class="fa fa-long-arrow-down"></i></span>
-                  <span class="data-change">{{ coordination.unionRr }}%</span>
+                  <span :class="coordination.unionRr >= 0 ? 'data-rise' : 'data-fall'">
+                    <i :class="coordination.unionRr >= 0 ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
+                  </span>
+                  <span class="data-change">{{ Math.abs(coordination.unionRr) }}%</span>
                   <label>环比</label>
                 </div>
               </div>
             </div>
             <div class="count_admin">
-              <label><img src="/statistical/images/icon_qy.png" alt="被执法企业" />被执法企业</label>
-              <div class="count_admin_num"><b>{{ enterprise.num }}</b></div>
+              <label><img :src="imgPath('icon_qy.png')" alt="被执法企业" />被执法企业</label>
+              <div class="count_admin_num">
+                <b>{{ enterprise.num.toLocaleString() }}</b>
+              </div>
               <div class="percent_box">
                 <div class="percent-tag">
-                  <span class="data-rise"><i class="fa fa-long-arrow-up"></i></span>
-                  <span class="data-change">{{ enterprise.yoy }}%</span>
+                  <span :class="enterprise.yoy >= 0 ? 'data-rise' : 'data-fall'">
+                    <i :class="enterprise.yoy >= 0 ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
+                  </span>
+                  <span class="data-change">{{ Math.abs(enterprise.yoy) }}%</span>
                   <label>同比</label>
                 </div>
                 <div class="percent-tag">
-                  <span class="data-fall"><i class="fa fa-long-arrow-down"></i></span>
-                  <span class="data-change">{{ enterprise.rr }}%</span>
+                  <span :class="enterprise.rr >= 0 ? 'data-rise' : 'data-fall'">
+                    <i :class="enterprise.rr >= 0 ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
+                  </span>
+                  <span class="data-change">{{ Math.abs(enterprise.rr) }}%</span>
                   <label>环比</label>
                 </div>
               </div>
             </div>
             <div class="count_admin">
-              <label><img src="/statistical/images/icon_yj.png" alt="入企压减率" />入企压减率</label>
-              <div class="count_admin_num"><b>{{ coordination.cutNum }}</b></div>
+              <label><img :src="imgPath('icon_yj.png')" alt="入企压减率" />入企压减率</label>
+              <div class="count_admin_num">
+                <b>{{ coordination.cutNum.toLocaleString() }}</b>
+              </div>
               <div class="percent_box">
                 <div class="percent-tag yjlv">
                   <span class="number_percent">{{ coordination.cutPer }}<i>%</i></span>
@@ -70,28 +86,11 @@
               </div>
             </div>
           </div>
-          <div ref="adminPieRef" class="chartbox_right" style="margin-top: -10%"></div>
+          <div ref="adminPieRef" class="chartbox_right chartbox_admin"></div>
         </div>
       </div>
 
-      <!-- 右侧：非行政执法 -->
-      <div class="wrap_right">
-        <div class="cont_left">
-          <h1 class="block_tit">非行政执法</h1>
-          <div class="count_wrap">
-            <div v-for="(item, index) in nonTypeList" :key="item.dict_label" class="count_item">
-              <label>
-                <img :src="`/statistical/images/icon_24_r${index + 1}.png`" :alt="item.dict_label" />
-                {{ item.dict_label }}
-              </label>
-              <span class="number_count">{{ item.num }}</span>
-            </div>
-          </div>
-          <div ref="nonPieRef" class="chartbox_right"></div>
-        </div>
-      </div>
-
-      <!-- 中间：地图 -->
+      <!-- 中间：概览 + 地图 -->
       <div class="wrap_cent">
         <div class="select_set">
           <div class="select_item">
@@ -104,51 +103,132 @@
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 value-format="YYYY-MM-DD"
-                :disabled-date="disabledDate"
                 clearable
                 @change="onDateChange"
               />
             </span>
           </div>
         </div>
-        <div class="link_btn" style="text-align: right">
-          <router-link v-if="showLeftLink" to="/enforcement-code/statistical/city-direct">{{ leftLinkText }}</router-link>
-          <router-link to="/enforcement-code/statistical/district-direct"><span>{{ rightLinkText }}</span></router-link>
+        <div class="link_btn">
+          <a v-if="!hideLeftFlag" @click.prevent="goToAnalysis('city')">
+            各市直执法单位综合分析
+          </a>
+          <a @click.prevent="goToAnalysis('district')">
+            {{ rightFlagText }}
+          </a>
         </div>
         <div class="count_box">
           <div class="count_item admin">
             <div class="count_tit"><label>行政执法</label></div>
             <div class="count_num">
-              <div class="count_num_all">{{ coordination.allNum }}</div>
+              <div class="count_num_all">{{ coordination.allNum.toLocaleString() }}</div>
               <div class="count_num_sub">
                 <span>（市直：<b>{{ sJcNum }}</b></span>
-                <span>各区：<b>{{ qJcNum }}</b>）</span>
+                <span>各区：<b>{{ qJcNum.toLocaleString() }}</b>）</span>
               </div>
             </div>
           </div>
           <div class="count_item non_admin">
             <div class="count_tit"><label>非行政执法</label></div>
             <div class="count_num">
-              <div class="count_num_all">{{ njcAll }}</div>
+              <div class="count_num_all">{{ njcAll.toLocaleString() }}</div>
               <div class="count_num_sub">
                 <span>（市直：<b>{{ sNjcNum }}</b></span>
-                <span>各区：<b>{{ qNjcNum }}</b>）</span>
+                <span>各区：<b>{{ qNjcNum.toLocaleString() }}</b>）</span>
               </div>
             </div>
           </div>
         </div>
         <div class="map_box">
-          <img class="szmap" src="/statistical/images/szmap_3d.png" alt="深圳地图" width="1920" height="1080" border="0" />
+          <img class="szmap" :src="imgPath('szmap_3d.png')" alt="深圳地图" />
           <div class="label_wrap">
-            <DistrictPopup
+            <div
               v-for="config in districtConfigs"
               :key="config.key"
-              :config="config"
-              :data="districtDataMap[config.name]"
-              :expanded="expandedDistrictIdx === config.idx"
-              @toggle="onDistrictToggle"
-            />
+              :id="config.key"
+              class="label_item"
+              :style="{ top: config.top, left: config.left }"
+            >
+              <a
+                class="flag-c"
+                :class="{ active: activeDistrictIdx === config.idx }"
+                @click="toggleDistrictDetail(config)"
+              >
+                <label>{{ config.name }}</label>
+              </a>
+              <!-- 区域详情弹窗 -->
+              <div
+                v-show="activeDistrictIdx === config.idx"
+                class="fold_cont"
+                :class="config.key"
+              >
+                <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="wrap_right">
+        <div class="cont_left">
+          <h1 class="block_tit">非行政执法</h1>
+          <div class="count_wrap" id="nonRegistrationType">
+            <div
+              v-for="(item, index) in displayNonTypeList"
+              :key="item.dict_label"
+              class="count_item"
+            >
+              <label>
+                <img :src="getNonTypeIcon(index)" :alt="item.dict_label" />
+                {{ item.dict_label }}
+              </label>
+              <span class="number_count">{{ item.num.toLocaleString() }}</span>
+            </div>
           </div>
+          <div ref="nonPieRef" class="chartbox_right chartbox_non"></div>
         </div>
       </div>
 
@@ -161,8 +241,8 @@
             <a :class="{ active: trendTab === 1 }" @click="switchTrendTab(1)">非行政执法</a>
           </div>
           <div class="tab_chart">
-            <div v-show="trendTab === 0" ref="adminTrendRef" class="chartbox" style="position: absolute"></div>
-            <div v-show="trendTab === 1" ref="nonTrendRef" class="chartbox" style="position: absolute"></div>
+            <div v-show="trendTab === 0" ref="adminTrendRef" class="chartbox"></div>
+            <div v-show="trendTab === 1" ref="nonTrendRef" class="chartbox"></div>
           </div>
         </div>
       </div>
@@ -171,9 +251,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import * as echarts from 'echarts';
-import DistrictPopup from './components/DistrictPopup.vue';
 import {
   analysisEnterprises,
   analysisEnterprisesCoordination,
@@ -194,23 +274,26 @@ import {
   toNum,
   unwrapData
 } from '@/api/supervision/statistical/adapters';
-import { buildAdminPieOption, buildNonAdminPieOption, buildTrendLineOption } from '../utils/chartOptions';
-import { DISTRICT_CONFIGS, DISTRICT_LIST } from '../utils/districtConfig';
+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);
+    console.warn('[首页大屏] 接口加载失败', e);
     return null;
   }
 }
 
+const router = useRouter();
 const districtConfigs = DISTRICT_CONFIGS;
 
 const dateRange = ref<[string, string] | null>(null);
 const trendTab = ref(0);
-const expandedDistrictIdx = ref<number | null>(null);
+
+const activeDistrictIdx = ref(-1);
+const districtTab = ref<'xzzf' | 'fxzzf'>('xzzf');
 
 const coordination = reactive({
   roleFlag: 1,
@@ -218,24 +301,118 @@ const coordination = reactive({
   allNum: 0,
   nonNum: 0,
   unionNum: 0,
-  unionYoy: '0.0',
-  unionRr: '0.0',
+  unionYoy: 0,
+  unionRr: 0,
   unionPer: '0.0',
   singleNum: 0,
-  singleYoy: '0.0',
-  singleRr: '0.0',
+  singleYoy: 0,
+  singleRr: 0,
   singlePer: '0.0',
   cutNum: 0,
   cutPer: '0.0'
 });
 
-const enterprise = reactive({ num: 0, yoy: '0.0', rr: '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 defaultNonTypes: DictStatItem[] = [
+  { dict_label: '日常巡查', num: 49605, per: '84.04' },
+  { dict_label: '普法宣传', num: 844, per: '1.43' },
+  { dict_label: '企业服务', num: 3177, per: '5.39' },
+  { dict_label: '技术指导', num: 3277, per: '5.56' },
+  { dict_label: '检验检测', num: 210, per: '0.36' },
+  { dict_label: '诉求处理', num: 377, per: '0.64' },
+  { dict_label: '培训', num: 337, per: '0.57' },
+  { dict_label: '调研', num: 73, per: '0.12' },
+  { dict_label: '其他', num: 1129, per: '1.91' }
+];
+
+const displayNonTypeList = computed(() => {
+  if (nonTypeList.value.length > 0) return nonTypeList.value;
+  return defaultNonTypes;
+});
+
+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(() => isDistrictUser.value);
+const rightFlagText = computed(() => {
+  if (isDistrictUser.value) {
+    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;
+}
+
+const BASE = import.meta.env.BASE_URL;
+
+function imgPath(relativePath: string) {
+  return `${BASE}statistical/images/${relativePath}`;
+}
+
+const cssVars = computed(() => ({
+  '--bg-homebody': `url('${imgPath('bg_homebody.jpg')}')`,
+  '--bg-pie': `url('${imgPath('bg_pie.png')}')`,
+  '--bg-tip': `url('${imgPath('bg_tip.png')}')`,
+  '--bg-tip-line': `url('${imgPath('bg_tip_line.png')}')`,
+  '--bg-tit': `url('${imgPath('bg_tit.png')}')`,
+  '--bg-tit3': `url('${imgPath('bg_tit3.png')}')`,
+  '--bg-data-item': `url('${imgPath('bg_data_item.jpg')}')`,
+  '--icon-data1': `url('${imgPath('icon_data1.png')}')`,
+  '--icon-data2': `url('${imgPath('icon_data2.png')}')`,
+  '--icon-posit': `url('${imgPath('icon_posit.png')}')`,
+  '--icon-dept32': `url('${imgPath('icon_dept32.png')}')`,
+  '--icon-dist32': `url('${imgPath('icon_dist32.png')}')`
+}));
+
+function getNonTypeIcon(index: number) {
+  return imgPath(`icon_24_r${index + 1}.png`);
+}
+
 const adminPieRef = ref<HTMLElement>();
 const nonPieRef = ref<HTMLElement>();
 const adminTrendRef = ref<HTMLElement>();
@@ -246,23 +423,6 @@ let nonPieChart: echarts.ECharts | null = null;
 let adminTrendChart: echarts.ECharts | null = null;
 let nonTrendChart: echarts.ECharts | null = null;
 
-const showLeftLink = computed(() => coordination.roleFlag === 1);
-const leftLinkText = computed(() => '各市直执法单位综合分析');
-const rightLinkText = computed(() => {
-  if ([9, 4, 3].includes(coordination.roleFlag)) {
-    return `${coordination.roleDept}综合分析`;
-  }
-  return '各区综合分析';
-});
-const sJcNum = computed(() => ([9, 4, 3].includes(coordination.roleFlag) ? '-' : coordination.allNum - qJcNum.value));
-const sNjcNum = computed(() => ([9, 4, 3].includes(coordination.roleFlag) ? '-' : njcAll.value - qNjcNum.value));
-
-function disabledDate(time: Date) {
-  const min = new Date('2019-04-14').getTime();
-  const max = new Date('2099-06-16').getTime();
-  return time.getTime() < min || time.getTime() > max;
-}
-
 function getTimeParams() {
   if (!dateRange.value) return { beginTime: undefined, endTime: undefined };
   return { beginTime: dateRange.value[0], endTime: dateRange.value[1] };
@@ -270,77 +430,180 @@ function getTimeParams() {
 
 async function loadCoordination() {
   const res = await safeLoad(() => analysisEnterprisesCoordination(getTimeParams()));
-  if (!res) return;
-  const data = normalizeCoordination(unwrapData(res));
-  Object.assign(coordination, data);
-  njcAll.value = data.nonNum;
+  if (res) {
+    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);
+  } else {
+    // Mock data
+    Object.assign(coordination, {
+      roleFlag: 1,
+      roleDept: '',
+      allNum: 61125,
+      nonNum: 58902,
+      unionNum: 642,
+      unionYoy: -1.25,
+      unionRr: 1.05,
+      unionPer: '1.05',
+      singleNum: 59768,
+      singleYoy: 2.15,
+      singleRr: -0.77,
+      singlePer: '97.77',
+      cutNum: 715,
+      cutPer: '1.18'
+    });
+  }
 }
 
 async function loadEnterprise() {
   const res = await safeLoad(() => analysisEnterprises(getTimeParams()));
-  if (!res) return;
-  Object.assign(enterprise, normalizeEnterpriseStat(unwrapData(res)));
+  if (res) {
+    const data = normalizeEnterpriseStat(unwrapData(res));
+    enterprise.num = data.num;
+    enterprise.yoy = parseFloat(data.yoy);
+    enterprise.rr = parseFloat(data.rr);
+  } else {
+    enterprise.num = 39028;
+    enterprise.yoy = 0;
+    enterprise.rr = 0;
+  }
 }
 
 async function loadNjcAll() {
   const res = await safeLoad(() => analysisEnterprisesNonAll(getTimeParams()));
-  if (!res) return;
-  njcAll.value = toNum(unwrapData(res));
+  if (res) {
+    njcAll.value = toNum(unwrapData(res));
+  } else {
+    njcAll.value = 58902;
+  }
 }
 
+// Mock data for when API is unavailable
+const MOCK_ADMIN_PIE = [
+  { name: '行政检查', value: 59620 },
+  { name: '行政处罚', value: 946 },
+  { name: '行政许可', value: 358 },
+  { name: '文书送达', value: 159 },
+  { name: '行政强制', value: 67 },
+  { name: '行政裁决', value: 3 },
+  { name: '行政确认', value: 1 }
+];
+
+const MOCK_NON_PIE = [
+  { name: '日常巡查', value: 49605 },
+  { name: '普法宣传', value: 844 },
+  { name: '企业服务', value: 3177 },
+  { name: '技术指导', value: 3277 },
+  { name: '检验检测', value: 210 },
+  { name: '诉求处理', value: 377 },
+  { name: '培训', value: 337 },
+  { name: '调研', value: 73 },
+  { name: '其他', value: 1129 }
+];
+
 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 }));
+  const list = res ? normalizeDictStatList(unwrapData(res)) : [];
+  let chartData = list
+    .filter((item) => item.dict_label)
+    .map((item) => ({ value: item.num, name: item.dict_label }));
+  if (!chartData.length) {
+    chartData = MOCK_ADMIN_PIE;
+  }
   await nextTick();
-  if (adminPieRef.value && chartData.length) {
-    adminPieChart ??= echarts.init(adminPieRef.value);
+  if (adminPieRef.value) {
+    if (!adminPieChart) {
+      adminPieChart = echarts.init(adminPieRef.value);
+    }
     adminPieChart.setOption(buildAdminPieOption(chartData), true);
+    adminPieChart.resize();
   }
 }
 
 async function loadNonType() {
   const res = await safeLoad(() => analysisNonRegistrationType(getTimeParams()));
-  if (!res) return;
-  const list = normalizeDictStatList(unwrapData(res));
+  const list = res ? normalizeDictStatList(unwrapData(res)) : [];
   nonTypeList.value = list;
-  const chartData = list.filter((item) => item.dict_label).map((item) => ({ value: item.num, name: item.dict_label }));
+  let chartData = list
+    .filter((item) => item.dict_label)
+    .map((item) => ({ value: item.num, name: item.dict_label }));
+  if (!chartData.length) {
+    chartData = MOCK_NON_PIE;
+  }
   await nextTick();
-  if (nonPieRef.value && chartData.length) {
-    nonPieChart ??= echarts.init(nonPieRef.value);
+  if (nonPieRef.value) {
+    if (!nonPieChart) {
+      nonPieChart = echarts.init(nonPieRef.value);
+    }
     nonPieChart.setOption(buildNonAdminPieOption(chartData), true);
+    nonPieChart.resize();
   }
 }
 
 async function loadAdminTrend() {
   const res = await safeLoad(() => analysisTime(getTimeParams()));
-  if (!res) return;
-  const { times, ins, ent } = normalizeTimeSeries(unwrapData(res));
+  let { times, ins, ent } = res ? normalizeTimeSeries(unwrapData(res)) : { times: [] as string[], ins: [] as number[], ent: [] as number[] };
+  if (!times.length) {
+    times = ['2024-08', '2024-10', '2024-12', '2025-02', '2025-04', '2025-06', '2025-08', '2025-10', '2025-12', '2026-02', '2026-04', '2026-06', '2026-08'];
+    ins = [2800, 3200, 3800, 3500, 4200, 4800, 5200, 5800, 6400, 6000, 6800, 7200, 7600];
+    ent = [1200, 1500, 1800, 1600, 2200, 2500, 2800, 3100, 3400, 3200, 3600, 3900, 4100];
+  }
   await nextTick();
-  if (adminTrendRef.value && times.length) {
-    adminTrendChart ??= echarts.init(adminTrendRef.value);
+  if (adminTrendRef.value) {
+    if (!adminTrendChart) {
+      adminTrendChart = echarts.init(adminTrendRef.value);
+    }
     adminTrendChart.setOption(
-      buildTrendLineOption(times, ins.map(Number), ent.map(Number), '行政执法数量', '被检查企业数量', '行政执法数量（宗）'),
+      buildTrendLineOption(times, ins, ent, '行政执法数量', '被检查企业数量', '行政执法数量（宗）', '被执法企业数量（家）'),
       true
     );
+    adminTrendChart.resize();
   }
 }
 
 async function loadNonTrend() {
   const res = await safeLoad(() => nonAnalysisTime(getTimeParams()));
-  if (!res) return;
-  const { times, ins, ent } = normalizeTimeSeries(unwrapData(res));
+  let { times, ins, ent } = res ? normalizeTimeSeries(unwrapData(res)) : { times: [] as string[], ins: [] as number[], ent: [] as number[] };
+  if (!times.length) {
+    times = ['2024-08', '2024-10', '2024-12', '2025-02', '2025-04', '2025-06', '2025-08', '2025-10', '2025-12', '2026-02', '2026-04', '2026-06', '2026-08'];
+    ins = [800, 1200, 1500, 1800, 2200, 2500, 2800, 3200, 3500, 3800, 4200, 4500, 4800];
+    ent = [400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800];
+  }
   await nextTick();
-  if (nonTrendRef.value && times.length) {
-    nonTrendChart ??= echarts.init(nonTrendRef.value);
+  if (nonTrendRef.value) {
+    if (!nonTrendChart) {
+      nonTrendChart = echarts.init(nonTrendRef.value);
+    }
     nonTrendChart.setOption(
-      buildTrendLineOption(times, ins.map(Number), ent.map(Number), '非行政执法数量', '被检查企业数量', '行政执法数量（宗）'),
+      buildTrendLineOption(times, ins, ent, '非行政执法数量', '被检查企业数量', '行政执法数量（宗）', '被检查企业数量（家）'),
       true
     );
+    nonTrendChart.resize();
   }
 }
 
+function onDateChange() {
+  refreshAll();
+}
+
+function switchTrendTab(tab: number) {
+  trendTab.value = tab;
+  nextTick(() => {
+    const chart = tab === 0 ? adminTrendChart : nonTrendChart;
+    chart?.resize();
+  });
+}
+
+function handleResize() {
+  adminPieChart?.resize();
+  nonPieChart?.resize();
+  adminTrendChart?.resize();
+  nonTrendChart?.resize();
+}
+
 async function loadAreaData() {
   const params = getTimeParams();
   let jcSum = 0;
@@ -351,10 +614,10 @@ async function loadAreaData() {
     DISTRICT_LIST.map((area) => areaRegistration({ ...params, deptId: area }))
   );
 
-  results.forEach((result, index) => {
+  results.forEach((result) => {
     if (result.status !== 'fulfilled') return;
     const data = normalizeAreaRegistration(unwrapData(result.value));
-    const area = data.area || DISTRICT_LIST[index];
+    const area = data.area || DISTRICT_LIST[results.indexOf(result)];
     dataMap[area] = data;
     jcSum += data.allNum;
     njcSum += data.njcNum;
@@ -378,35 +641,45 @@ async function refreshAll() {
   ]);
 }
 
-function onDateChange() {
-  refreshAll();
-}
+let originalFontSize: string | null = null;
 
-function onDistrictToggle(idx: number) {
-  expandedDistrictIdx.value = expandedDistrictIdx.value === idx ? null : idx;
-}
+onMounted(async () => {
+  const html = document.documentElement;
+  originalFontSize = html.style.fontSize;
+  html.style.fontSize = '14px';
 
-function switchTrendTab(tab: number) {
-  trendTab.value = tab;
-  nextTick(() => {
-    if (tab === 0) adminTrendChart?.resize();
-    else nonTrendChart?.resize();
-  });
-}
+  await nextTick();
 
-function handleResize() {
-  adminPieChart?.resize();
-  nonPieChart?.resize();
-  adminTrendChart?.resize();
-  nonTrendChart?.resize();
-}
+  // Wait for layout to settle before initializing charts
+  setTimeout(async () => {
+    if (adminPieRef.value && adminPieRef.value.clientHeight > 0) {
+      adminPieChart = echarts.init(adminPieRef.value);
+    }
+    if (nonPieRef.value && nonPieRef.value.clientHeight > 0) {
+      nonPieChart = echarts.init(nonPieRef.value);
+    }
+    if (adminTrendRef.value && adminTrendRef.value.clientHeight > 0) {
+      adminTrendChart = echarts.init(adminTrendRef.value);
+    }
+    if (nonTrendRef.value && nonTrendRef.value.clientHeight > 0) {
+      nonTrendChart = echarts.init(nonTrendRef.value);
+    }
+
+    // Load data and populate charts
+    await refreshAll();
+
+    nextTick(() => {
+      handleResize();
+    });
+  }, 100);
 
-onMounted(() => {
-  refreshAll();
   window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
+  if (originalFontSize !== null) {
+    document.documentElement.style.fontSize = originalFontSize;
+  }
   window.removeEventListener('resize', handleResize);
   adminPieChart?.dispose();
   nonPieChart?.dispose();
@@ -415,25 +688,834 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
-@import '/statistical/styles/home.css';
-@import '/statistical/font-awesome-bak/css/font-awesome.min.css';
+<style lang="scss" scoped>
+/* CSS reset for dark theme dashboard */
+.home-wrap :deep(*) {
+  color: rgba(255, 255, 255, 0.8);
+  font-family: 'Microsoft Yahei', Arial, Verdana, sans-serif;
+}
+
+.home-wrap :deep(label) {
+  font-weight: normal;
+}
+
+.home-wrap :deep(b) {
+  font-weight: normal;
+}
+
+.home-wrap :deep(ul) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.home-wrap :deep(li) {
+  list-style: none;
+}
+
+.home-wrap :deep(a) {
+  text-decoration: none;
+  color: inherit;
+}
+
+.home-wrap :deep(img) {
+  border: none;
+  vertical-align: middle;
+}
+
+.home-wrap :deep(button) {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+.home-wrap {
+  width: 100%;
+  height: calc(100vh - 50px);
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.wrap_all {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 50px);
+  background: var(--bg-homebody) no-repeat;
+  background-size: cover;
+  background-position: center center;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.wrap_left,
+.wrap_right,
+.wrap_cent,
+.wrap_bottom {
+  position: absolute;
+  top: 1%;
+  z-index: 99;
+  margin: 0;
+  height: 97%;
+  overflow: hidden;
+}
+
+.wrap_left {
+  left: 0.5%;
+  width: 20.5%;
+}
+
+.wrap_right {
+  right: 0.5%;
+  left: auto;
+  width: 20.5%;
+}
+
+.wrap_cent {
+  left: 20%;
+  width: 60%;
+}
+
+.wrap_bottom {
+  top: auto;
+  bottom: 2%;
+  left: 21.5%;
+  width: 57%;
+  height: 25%;
+}
+
+.cont_left {
+  width: 100%;
+  height: 100%;
+  background: rgba(11, 59, 145, 0.6);
+  border-radius: 5px;
+  position: relative;
+}
+
+.block_tit {
+  margin: 0 0 1% 0;
+  padding: 0 0 0 4rem;
+  height: 2.5rem;
+  background: var(--bg-tit) no-repeat;
+  background-size: 100% 100%;
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 2;
+  text-shadow: 2px 1px 5px rgba(255, 255, 255, 0.5);
+}
+
+/* ========== 左侧 count_admin ========== */
+.count_admin_wrap {
+  display: flex;
+  flex-direction: column;
+  height: 46.65%;
+}
+
+.count_admin {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 3.5% 0 0;
+  width: 97%;
+}
+
+.count_admin > label {
+  width: 5.25rem;
+  height: 5.25rem;
+  background: linear-gradient(to bottom, transparent 50%, rgba(20, 138, 156, 0.5));
+  border: 1px solid rgba(20, 103, 103, 0.6);
+  border-radius: 5px;
+  color: rgba(255, 255, 255, 1);
+  font-size: 0.85rem;
+  line-height: 2;
+  text-align: center;
+  font-weight: normal;
+}
+
+.count_admin:nth-child(odd) > label {
+  background: linear-gradient(to bottom, transparent 50%, rgba(34, 125, 223, 0.5));
+  border: 1px solid rgba(26, 86, 151, 0.6);
+}
+
+.count_admin > label > img {
+  display: block;
+  margin: 10% auto 5%;
+  width: auto;
+  height: 50%;
+}
+
+.count_admin_num {
+  width: 35%;
+  text-align: center;
+}
+
+.count_admin_num > b {
+  display: block;
+  background-image: linear-gradient(to right, #d2f5ff, #0394f9);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 2.0rem;
+  font-weight: 550;
+  line-height: 1.5;
+}
+
+.number_percent {
+  color: rgba(243, 153, 98, 0.8);
+  font-size: 1.15rem;
+}
+
+.number_percent > i {
+  margin-left: 2%;
+  color: rgba(243, 153, 98, 0.75);
+  font-size: 0.85rem;
+}
+
+.percent_box {
+  width: 25%;
+}
+
+.percent-tag {
+  display: flex;
+  align-items: center;
+  margin: 20% 3%;
+  white-space: nowrap;
+}
+
+.percent-tag span {
+  margin: 0 5%;
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.percent-tag span.data-rise,
+.percent-tag span.data-fall {
+  margin: 0.75% 2% 1% 0.5%;
+  font-size: 1rem;
+}
+
+.percent-tag span.data-rise i {
+  color: #67dc53;
+}
+
+.percent-tag span.data-fall i {
+  color: #fd7c7c;
+}
+
+.percent-tag label {
+  margin: 0 2% 0 5%;
+  color: rgba(255, 255, 255, 0.65);
+  font-size: 0.85rem;
+  font-weight: normal;
+}
+
+.yjlv .number_percent {
+  color: rgba(243, 153, 98, 0.75);
+  font-size: 1.65rem;
+}
 
-.statistical-home {
+.yjlv .number_percent > i {
+  font-size: 1rem;
+}
+
+/* ========== 饼图 ========== */
+.chartbox_right {
+  margin: 0;
   width: 100%;
-  min-height: calc(100vh - 50px);
-  overflow: auto;
-  background: #0b1d4b;
+  height: 46%;
+  min-height: 120px;
+  background: var(--bg-pie) no-repeat center;
+  background-position-y: 50.5%;
+  background-size: 48.5%;
+  position: relative;
+}
+
+.chartbox_admin {
+   //margin-top: -10%;
+}
+
+.wrap_right .chartbox_right {
+  height: 47%;
+  min-height: 120px;
+  background-position-y: 30.5%;
 }
 
-.statistical-home :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);
+.chartbox_non {
+  height: 47%;
+  background-position-y: 30.5%;
+}
+
+/* ========== 中间 select/link/count ========== */
+.select_set {
+  float: left;
+  margin: 0.5% 0.5% 0.6% 5%;
+  padding-left: 2.5rem;
+  background: var(--icon-posit) no-repeat left;
+  background-size: auto 100%;
+}
+
+.select_item {
+  margin: 0 0 0 5px;
+  font-size: 1.2rem;
+  white-space: nowrap;
+}
+
+.select_item > span {
+  margin-right: 1rem;
+}
+
+.select_item .time_wrap {
+  display: inline-block;
+  position: relative;
+  width: 18rem;
+  height: 2.15rem;
+}
+
+.select_item .time_wrap :deep(.el-date-editor) {
+  --el-input-bg-color: transparent;
+  --el-input-border-color: transparent;
+  --el-input-text-color: rgba(255, 255, 255, 0.8);
   --el-input-placeholder-color: rgba(255, 255, 255, 0.45);
+  width: 100%;
 }
 
-.statistical-home :deep(.el-range-separator) {
+.select_item .time_wrap :deep(.el-input__wrapper) {
+  background: linear-gradient(to top, transparent 0, rgba(59, 145, 253, 0.3), rgba(59, 145, 253, 0.05));
+  box-shadow: none;
+  border-radius: 4px;
+}
+
+.select_item .time_wrap :deep(.el-range-separator) {
   color: rgba(255, 255, 255, 0.6);
 }
+
+.select_item .time_wrap :deep(.el-input__inner) {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.link_btn {
+  float: right;
+  margin: 0.45% 5% 2% 0;
+  min-width: 31rem;
+  height: 2rem;
+  font-size: 1.2rem;
+  line-height: 2;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.link_btn a {
+  position: relative;
+  display: inline-block;
+  margin: 0 3%;
+  padding-left: 2rem;
+  opacity: 0.8;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  line-height: 20px;
+}
+
+.link_btn a:hover {
+  opacity: 1;
+  color: #fff;
+}
+
+.link_btn a::before {
+  position: absolute;
+  left: 0;
+  top: 0px;
+  content: '';
+  width: 1.75rem;
+  height: 1.75rem;
+  background: var(--icon-dept32) no-repeat;
+  background-size: 100% auto;
+}
+
+.link_btn a:last-child::before {
+  background: var(--icon-dist32) no-repeat;
+  background-size: 100% auto;
+}
+
+.link_btn a::after {
+  position: absolute;
+  top:0;
+  right: -16px;
+  content: '>';
+  color: #1ab5e0;
+  font-size: 1.25rem;
+  opacity: 0.75;
+}
+
+.count_box {
+  display: flex;
+  justify-content: space-between;
+  margin: 2% 5%;
+  height: 8rem;
+  clear: both;
+}
+
+.count_box .count_item {
+  display: flex;
+  min-width: 37.5%;
+  height: 100%;
+}
+
+.count_box .count_item .count_tit {
+  position: relative;
+  width: 30%;
+  height: 100%;
+  background: var(--icon-data2) no-repeat;
+  background-size: auto 80%;
+}
+
+.count_box .count_item.non_admin .count_tit {
+  background: var(--icon-data1) no-repeat;
+  background-size: auto 80%;
+}
+
+.count_box .count_tit label {
+  position: absolute;
+  top: 5.65rem;
+  left: 0;
+  display: block;
+  margin: 0;
+  padding: 2% 5% 2% 18%;
+  width: auto;
+  background: var(--bg-tit3) no-repeat;
+  background-size: auto 100%;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 1.25rem;
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.count_num_all {
+  background-image: linear-gradient(to right, #d2f5ff, #0394f9);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 3.15rem;
+  font-weight: 550;
+  line-height: 1.75;
+  text-align: center;
+}
+
+.count_num_sub {
+  font-size: 1.25rem;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.count_num_sub span {
+  margin: 0 10% 0 0;
+  line-height: 1.75;
+  text-align: center;
+}
+
+.count_num_sub span b {
+  background-image: linear-gradient(to right, #f7fbfd, #26bef9);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 1.25rem;
+  font-weight: 550;
+  line-height: 1.75;
+  text-align: center;
+}
+
+.count_box .count_item.admin .count_num {
+  margin-left: -3.5%;
+}
+
+.count_box .count_item.non_admin .count_num_all,
+.count_box .count_item.non_admin .count_num_sub span b {
+  background-image: linear-gradient(to right, #f7fbfd, #2ba4b3);
+}
+
+/* ========== 地图 ========== */
+.map_box {
+  position: relative;
+  top: -3%;
+  width: 100%;
+}
+
+.map_box > img.szmap {
+  margin-top: 0;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.label_wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+}
+
+.label_item {
+  position: absolute;
+  display: inline-block;
+}
+
+.label_item > a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.label_item > a > label {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.15rem;
+  text-shadow: 0 0 5px #000;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+/* ========== 弹窗 ========== */
+.fold_cont {
+  display: block;
+  position: absolute;
+  top: -17.5rem;
+  left: -15.25rem;
+  z-index: 99;
+  min-width: 23rem;
+  height: 17.5rem;
+  background: var(--bg-tip) no-repeat;
+  background-size: 100% 100%;
+}
+
+.fold_cont::before {
+  position: absolute;
+  left: 9.25rem;
+  bottom: -3.65rem;
+  z-index: -1;
+  width: 6rem;
+  height: 5rem;
+  background: var(--bg-tip-line) no-repeat;
+  background-size: auto 80%;
+  background-position-y: -90%;
+  content: '';
+}
+
+:deep(#districtGM) .fold_cont {
+  left: -12.75rem;
+}
+
+:deep(#districtGM) .fold_cont::before {
+  left: 6.75rem;
+}
+
+:deep(#districtBA) .fold_cont {
+  left: -7.5rem;
+}
+
+:deep(#districtBA) .fold_cont::before {
+  left: 1.5rem;
+}
+
+:deep(#districtNS) .fold_cont {
+  left: -12.85rem;
+}
+
+:deep(#districtNS) .fold_cont::before {
+  left: 6.75rem;
+}
+
+:deep(#districtSS) .fold_cont {
+  left: -25.25rem;
+}
+
+:deep(#districtSS) .fold_cont::before {
+  left: 19.25rem;
+}
+
+:deep(#districtDP) .tab_inspect_item:last-child .inspect_count {
+  left: 6rem;
+}
+
+:deep(#districtSS) .tab_inspect_item:last-child .inspect_count {
+  left: 9.5rem;
+}
+
+.pop_tit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 11%;
+  left: 7.25%;
+  right: 32%;
+  z-index: 999;
+}
+
+.pop_tit > h5 {
+  font-size: 1.15rem;
+  font-weight: normal;
+  margin: 0;
+}
+
+.inspect_count {
+  margin: 4% 0 3% -0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.inspect_count b {
+  color: #06b8f8;
+}
+
+.tab_switch {
+  width: 35%;
+  white-space: nowrap;
+}
+
+.tab_switch a {
+  margin: 0 0.35rem;
+  padding: 1% 2%;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 1rem;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.tab_switch a.active {
+  color: #2e82fd;
+  border-bottom: 2px solid #2e82fd;
+}
+
+.tab_inspect {
+  margin: 4rem 8% 0;
+}
+
+.tab_inspect_item {
+  width: 100%;
+  height: calc(100% - 8rem);
+  overflow-y: auto;
+}
+
+.tab_inspect_item > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tab_inspect_item > ul > li {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 0;
+  padding: 0 0 0 1.25rem;
+}
+
+.tab_inspect_item:last-child > ul > li {
+  margin: 2% 0;
+}
+
+.tab_inspect_item > ul > li::before {
+  position: absolute;
+  top: 0.35rem;
+  left: 0;
+  content: '\f111';
+  color: #7ca9fb;
+  font-size: 0.65rem;
+}
+
+.tab_inspect_item > ul > li > label {
+  width: 40%;
+  color: #92b3d3;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.tab_inspect_item > ul > li > span {
+  width: 40%;
+  color: #06b8f8;
+  font-weight: 550;
+  text-align: right;
+}
+
+.tab_inspect_item > ul > li > span:last-child {
+  width: 35%;
+  color: rgba(243, 153, 98, 0.9);
+  font-weight: 500;
+}
+
+.tab_inspect_item:last-child {
+  display: flex;
+  justify-content: space-evenly;
+  position: relative;
+  top: 0;
+  left: -5%;
+  width: 36rem;
+}
+
+.tab_inspect_item:last-child .inspect_count {
+  position: absolute;
+  top: 3%;
+  left: 5rem;
+  margin-top: 0;
+}
+
+.tab_inspect_item:last-child > ul {
+  margin: 8% 5% 0 -5%;
+  width: 38%;
+  list-style: none;
+  padding: 0;
+}
+
+.tab_inspect_item:last-child > ul > li > label {
+  width: 30%;
+  font-weight: normal;
+}
+
+/* ========== 右侧 count_wrap ========== */
+.count_wrap {
+  height: 46.65%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.count_wrap .count_item {
+  display: flex;
+  float: left;
+  position: relative;
+  margin: 2.5% 0 1.5% 3%;
+  width: 45%;
+  height: 5rem;
+  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: 1rem;
+  text-align: center;
+}
+
+.count_wrap .count_item:nth-child(2),
+.count_wrap .count_item:nth-child(3),
+.count_wrap .count_item:nth-child(6),
+.count_wrap .count_item:nth-child(7) {
+  background: linear-gradient(to bottom, transparent 50%, rgba(20, 138, 156, 0.35));
+  border: 1px solid rgba(20, 103, 103, 0.6);
+}
+
+.count_wrap .count_item:first-child {
+  width: 93%;
+}
+
+.count_wrap .count_item:nth-child(even) {
+  margin-left: 2.5%;
+}
+
+.count_wrap .count_item label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 2% 0 3%;
+  width: 36%;
+  height: 100%;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.count_wrap .count_item:first-child label {
+  margin-top: 0;
+  width: 45%;
+}
+
+.count_wrap .count_item label > img {
+  display: block;
+  margin: 0 auto 8%;
+  width: 2.5rem;
+  height: 2.5rem;
+  object-fit: contain;
+}
+
+.count_wrap .count_item:first-child label > img {
+  margin: 0 auto 5%;
+  width: 3rem;
+  height: 3rem;
+}
+
+.number_count {
+  display: block;
+  margin: 0 5%;
+  width: 60%;
+  background-image: linear-gradient(to right, #f7fbfd, #2ba4b3);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 1.65rem;
+  font-weight: 550;
+  line-height: 3;
+}
+
+.count_wrap .count_item:first-child .number_count {
+  margin: 0 0 0 5%;
+  width: 50%;
+}
+
+/* ========== 底部 ========== */
+.wrap_bottom h3 {
+  margin: 1% 0 -3% 1%;
+  height: 2.5rem;
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 2;
+  text-shadow: 2px 1px 5px rgba(255, 255, 255, 0.5);
+}
+
+.tab_chart {
+  position: relative;
+  margin: 2% 1%;
+  clear: both;
+  overflow: hidden;
+  width: 98%;
+  height: calc(96% - 3rem);
+}
+
+.chartbox {
+  width: 100%;
+  height: 100%;
+}
+
+.tab_tit {
+  position: absolute;
+  top: 8%;
+  left: 10rem;
+  font-size: 1rem;
+  white-space: nowrap;
+}
+
+.tab_tit a {
+  margin: 0 0.35rem;
+  padding: 1% 2%;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.tab_tit a.active {
+  color: #2e82fd;
+  border-bottom: 2px solid #2e82fd;
+}
+
+/* ========== 滚动条 ========== */
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0.5rem;
+  background-color: #02206d;
+  box-shadow: inset 0 0 10px rgba(5, 172, 254, 0.6);
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.15);
+}
 </style>
diff --git a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/styles/analysis-layout.css b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/styles/analysis-layout.css
index 20bad468..8b264c0d 100644
--- a/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/styles/analysis-layout.css
+++ b/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/statistical/styles/analysis-layout.css
@@ -29,3 +29,48 @@
 .statistical-analysis .el-date-editor {
   margin-left: 8px;
 }
+
+/* select_time 标签样式 */
+.select_time {
+  position: relative;
+  display: inline-block;
+  margin: 0 5px 0 0;
+  padding: 0 25px 0 10px;
+  height: 28px;
+  line-height: 28px;
+  color: #315EFB;
+  font-weight: 500;
+  background: rgba(59, 145, 253, 0.12);
+  text-align: center;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.select_time > a {
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  width: 18px;
+  height: 100%;
+}
+
+.select_time > a::after {
+  position: absolute;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  content: "\f105";
+  color: #678dfe;
+  font-family: "FontAwesome";
+  font-size: 1.25rem;
+}
+
+/* FontAwesome 图标修复 */
+.statistical-analysis .fa {
+  font-family: "FontAwesome";
+}
+
+/* 日期选择器弹窗暗色适配 */
+.analysis-date-picker {
+  background: #fff !important;
+}
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 1e57c4f0..a53213d3 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
@@ -110,7 +110,7 @@ export function buildNonAdminPieOption(data: { value: number; name: string }[]):
 
 export function buildTrendLineOption(
   times: string[],
-  ins: number[],
+  ins: number[] ,
   ent: number[],
   insName: string,
   entName: string,