From 8a77e8b7a5fbbdae117ff892279fdb91e6f2cbb2 Mon Sep 17 00:00:00 2001
From: wangmingyong <wangmingyong@163.com>
Date: Thu, 21 May 2026 19:55:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=E7=9A=84?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zdxt-efcode-enforcement-app/package.json  |   2 +-
 .../statistics/statisticsAnalysis.vue         | 936 +++++++++++-------
 2 files changed, 579 insertions(+), 359 deletions(-)

diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/package.json b/zdxt-web-client/zdxt-efcode-enforcement-app/package.json
index b99521f1..b3ccdebc 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/package.json
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "vite-server-app:enforcement-dev": "vite --mode enforcement-dev",
+    "vite": "vite --mode enforcement-dev",
     "build-app:enforcement-dev": "vite build --mode enforcement-dev --outDir dist/enforcement-dev",
     "build-app:enforcement-prod": "vite build --mode enforcement-prod --outDir dist/enforcement-prod"
   },
diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/statistics/statisticsAnalysis.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/statistics/statisticsAnalysis.vue
index cd83aefe..29fbcc18 100644
--- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/statistics/statisticsAnalysis.vue
+++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/statistics/statisticsAnalysis.vue
@@ -1,39 +1,50 @@
 <template>
     <div class="statistics-page">
-        <!-- 顶部导航栏 -->
-        <van-nav-bar title="统计分析" left-text="返回" left-arrow @click-left="goBack" />
+        <!-- 顶部导航栏
+        <van-nav-bar title="统计分析" left-text="返回" left-arrow @click-left="goBack" /> -->
 
         <!-- 内容区域 -->
         <div class="content-area">
             <!-- 顶部切换卡 -->
             <div class="type-switcher">
-                <div class="switcher-item" :class="{ active: userType === 'personal' }" @click="userType = 'personal'">
+                <div class="switcher-item personal" :class="{ active: userType === 'personal' }"
+                    @click="userType = 'personal'">
                     个人
                 </div>
-                <div class="switcher-item" :class="{ active: userType === 'company' }" @click="userType = 'company'">
+                <div class="switcher-item company" :class="{ active: userType === 'company' }"
+                    @click="userType = 'company'">
                     单位
                 </div>
             </div>
 
             <!-- 年份和筛选 -->
             <div class="filter-bar">
-                <div class="year-display" @click="showYearPicker">{{ currentYear }}年</div>
+                <div class="year-display" @click="showPeriodPicker">
+                    <span>{{ periodDisplayText }}</span>
+                    <van-icon name="arrow-down" class="year-arrow" />
+                </div>
                 <div class="period-selector">
-                    <div class="period-btn" :class="period === 'month' ? 'active' : ''" @click="showMonthPicker">月度</div>
-                    <div class="period-btn" :class="period === 'quarter' ? 'active' : ''" @click="showQuarterPicker">季度</div>
-                    <div class="period-btn" :class="period === 'year' ? 'active' : ''" @click="showYearPeriodPicker">年度</div>
-                    <div class="filter-btn" @click="showFilterPopup">筛选</div>
+                    <div class="period-btn" :class="period === 'month' ? 'active' : ''" @click="showMonthPicker">月度
+                    </div>
+                    <div class="period-btn" :class="period === 'quarter' ? 'active' : ''" @click="showQuarterPicker">季度
+                    </div>
+                    <div class="period-btn" :class="period === 'year' ? 'active' : ''" @click="showYearPeriodPicker">年度
+                    </div>
+                    <div class="period-btn" :class="period === 'other' ? 'active' : ''" @click="showFilterPopup">筛选
+                    </div>
                 </div>
             </div>
 
             <!-- 涉企执法数量卡片 -->
             <div class="statistics-card main-card">
-                <div class="card-bg-decoration"></div>
-                <div class="card-body">
+                <div v-if="isLoading" class="loading-skeleton">
+                    <van-skeleton title :row="3" />
+                </div>
+                <div v-else class="card-body">
+                    <div class="card-title">涉企执法数量</div>
                     <div class="total-section">
                         <div class="left-part">
-                            <div class="card-title">涉企执法数量</div>
-                            <div class="total-number">{{ statistics.totalCount }}</div>
+                            <div class="total-number">{{ animatedTotal }}</div>
                         </div>
                         <div class="right-part">
                             <div class="comparison-item">
@@ -57,22 +68,26 @@
                         </div>
                         <div class="joint-stats">
                             <div class="joint-item">
-                                <div class="joint-value">{{ statistics.jointLaw.noticeCount }}</div>
                                 <div class="joint-label">执法预告</div>
+                                <div class="joint-value">{{ animatedNotice }}</div>
+
                             </div>
                             <div class="joint-item">
-                                <div class="joint-value">{{ statistics.jointLaw.entrustedCount > 0 ? statistics.jointLaw.entrustedCount : '-' }}</div>
                                 <div class="joint-label">委托执法</div>
+                                <div class="joint-value">{{ animatedEntrusted > 0 ? animatedEntrusted : '-' }}</div>
+
                             </div>
                             <div class="joint-item">
-                                <div class="joint-value">{{ statistics.jointLaw.evaluateCount }}</div>
                                 <div class="joint-label">评价</div>
+                                <div class="joint-value">{{ animatedEvaluate }}</div>
+
                             </div>
                             <div class="joint-item">
-                                <div class="joint-value" :class="{ 'text-red': statistics.jointLaw.complaintCount > 0 }">
-                                    {{ statistics.jointLaw.complaintCount > 0 ? statistics.jointLaw.complaintCount : '-' }}
-                                </div>
                                 <div class="joint-label">投诉</div>
+                                <div class="joint-value" :class="{ 'text-red': animatedComplaint > 0 }">
+                                    {{ animatedComplaint > 0 ? animatedComplaint : '-' }}
+                                </div>
+
                             </div>
                         </div>
                     </div>
@@ -81,95 +96,70 @@
 
             <!-- Tab 切换 -->
             <div class="tabs-section">
-                <div class="tabs-bar">
-                    <div class="tab-item" :class="{ active: activeTab === 0 }" @click="activeTab = 0">
-                        <div class="tab-text">执法类别</div>
-                        <div class="tab-line" v-if="activeTab === 0"></div>
-                    </div>
-                    <div class="tab-item" :class="{ active: activeTab === 1 }" @click="activeTab = 1">
-                        <div class="tab-text">企业类别</div>
-                        <div class="tab-line" v-if="activeTab === 1"></div>
-                    </div>
-                    <div class="tab-item" :class="{ active: activeTab === 2 }" @click="activeTab = 2">
-                        <div class="tab-text">投诉类别</div>
-                        <div class="tab-line" v-if="activeTab === 2"></div>
-                    </div>
-                </div>
-
-                <div class="tab-content" v-show="activeTab === 0">
-                    <div class="category-grid">
-                        <div class="category-item" v-for="(item, index) in lawCategoryList" :key="index">
-                            <div class="category-value">{{ item.value }}</div>
-                            <div class="category-sub" v-if="item.subValue">{{ item.subValue }}</div>
-                            <div class="category-name">{{ item.name }}</div>
+                <van-tabs v-model:active="activeTab" animated>
+                    <van-tab title="执法类别">
+                        <div class="tab-content">
+                            <div class="category-grid" v-if="lawCategoryList.length > 0">
+                                <div class="category-item" v-for="(item, index) in lawCategoryList" :key="index">
+                                    <div class="category-name">{{ item.name }}</div>
+                                    <div class="category-value">{{ item.value }}</div>
+                                    <div class="category-sub" v-if="item.subValue">{{ item.subValue }}</div>
+                                </div>
+                            </div>
+                            <van-empty v-else description="暂无数据" image="search" />
                         </div>
-                    </div>
-                </div>
-                <div class="tab-content" v-show="activeTab === 1">
-                    <div class="category-grid">
-                        <div class="category-item" v-for="(item, index) in enterpriseCategoryList" :key="index">
-                            <div class="category-value">{{ item.value }}</div>
-                            <div class="category-sub" v-if="item.subValue">{{ item.subValue }}</div>
-                            <div class="category-name">{{ item.name }}</div>
+                    </van-tab>
+                    <van-tab title="企业类别">
+                        <div class="tab-content">
+                            <div class="category-grid" v-if="enterpriseCategoryList.length > 0">
+                                <div class="category-item" v-for="(item, index) in enterpriseCategoryList" :key="index">
+                                    <div class="category-name">{{ item.name }}</div>
+                                    <div class="category-value">{{ item.value }}</div>
+                                    <div class="category-sub" v-if="item.subValue">{{ item.subValue }}</div>
+                                </div>
+                            </div>
+                            <van-empty v-else description="暂无数据" image="search" />
                         </div>
-                    </div>
-                </div>
-                <div class="tab-content" v-show="activeTab === 2">
-                    <div class="category-grid">
-                        <div class="category-item" v-for="(item, index) in complaintCategoryList" :key="index">
-                            <div class="category-value">{{ item.value }}</div>
-                            <div class="category-sub" v-if="item.subValue">{{ item.subValue }}</div>
-                            <div class="category-name">{{ item.name }}</div>
+                    </van-tab>
+                    <van-tab title="投诉类别">
+                        <div class="tab-content">
+                            <div class="category-grid" v-if="complaintCategoryList.length > 0">
+                                <div class="category-item" v-for="(item, index) in complaintCategoryList" :key="index">
+                                    <div class="category-name">{{ item.name }}</div>
+                                    <div class="category-value">{{ item.value }}</div>
+                                    <div class="category-sub" v-if="item.subValue">{{ item.subValue }}</div>
+                                </div>
+                            </div>
+                            <van-empty v-else description="暂无数据" image="search" />
                         </div>
-                    </div>
-                </div>
+                    </van-tab>
+                </van-tabs>
             </div>
         </div>
 
         <!-- 月份选择器 -->
         <van-popup v-model:show="showMonthSelector" position="bottom" round>
-            <div class="picker-header">
-                <div class="picker-cancel" @click="showMonthSelector = false">取消</div>
-                <div class="picker-title">选择月份</div>
-                <div class="picker-confirm" @click="confirmMonth">确定</div>
-            </div>
-            <van-picker
-                :columns="monthColumns"
-                v-model="selectedMonth"
-                @confirm="onMonthConfirm"
-            />
+            <van-date-picker v-model="selectedMonth" :columns-type="['year', 'month']" show-toolbar title="选择月度"
+                @confirm="confirmMonth" @cancel="showMonthSelector = false" :min-date="minDate" :max-date="maxDate" />
         </van-popup>
 
         <!-- 季度选择器 -->
         <van-popup v-model:show="showQuarterSelector" position="bottom" round>
-            <div class="picker-header">
-                <div class="picker-cancel" @click="showQuarterSelector = false">取消</div>
-                <div class="picker-title">选择季度</div>
-                <div class="picker-confirm" @click="confirmQuarter">确定</div>
-            </div>
-            <van-picker
-                :columns="quarterColumns"
-                v-model="selectedQuarter"
-                @confirm="onQuarterConfirm"
-            />
+            <van-picker :columns="quarterColumns" title="选择季度" v-model="selectedQuarter" @confirm="onQuarterConfirm" />
         </van-popup>
 
         <!-- 年度选择器 -->
         <van-popup v-model:show="showYearSelector" position="bottom" round>
-            <div class="picker-header">
+            <!-- <div class="picker-header">
                 <div class="picker-cancel" @click="showYearSelector = false">取消</div>
                 <div class="picker-title">选择年份</div>
                 <div class="picker-confirm" @click="confirmYear">确定</div>
-            </div>
-            <van-picker
-                :columns="yearColumns"
-                v-model="selectedYearPeriod"
-                @confirm="onYearConfirm"
-            />
+            </div> -->
+            <van-picker :columns="yearColumns" title="选择年份" v-model="selectedYearPeriod" @confirm="onYearConfirm" />
         </van-popup>
 
         <!-- 筛选弹窗 -->
-        <van-popup v-model:show="showFilterSelector" position="bottom" round>
+        <!-- <van-popup v-model:show="showFilterSelector" position="bottom" round>
             <div class="picker-header">
                 <div class="picker-cancel" @click="showFilterSelector = false">取消</div>
                 <div class="picker-title">筛选</div>
@@ -179,204 +169,330 @@
                 <div class="filter-section">
                     <div class="filter-section-title">执法类型</div>
                     <div class="filter-options">
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterType.includes('all') }"
-                            @click="toggleFilterType('all')"
-                        >全部</div>
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterType.includes('check') }"
-                            @click="toggleFilterType('check')"
-                        >行政检查</div>
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterType.includes('punish') }"
-                            @click="toggleFilterType('punish')"
-                        >行政处罚</div>
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterType.includes('license') }"
-                            @click="toggleFilterType('license')"
-                        >行政许可</div>
+                        <div class="filter-option" :class="{ active: selectedFilterType.includes('all') }"
+                            @click="toggleFilterType('all')">全部</div>
+                        <div class="filter-option" :class="{ active: selectedFilterType.includes('check') }"
+                            @click="toggleFilterType('check')">行政检查</div>
+                        <div class="filter-option" :class="{ active: selectedFilterType.includes('punish') }"
+                            @click="toggleFilterType('punish')">行政处罚</div>
+                        <div class="filter-option" :class="{ active: selectedFilterType.includes('license') }"
+                            @click="toggleFilterType('license')">行政许可</div>
                     </div>
                 </div>
                 <div class="filter-section">
                     <div class="filter-section-title">企业规模</div>
                     <div class="filter-options">
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterScale.includes('all') }"
-                            @click="toggleFilterScale('all')"
-                        >全部</div>
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterScale.includes('large') }"
-                            @click="toggleFilterScale('large')"
-                        >大型企业</div>
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterScale.includes('medium') }"
-                            @click="toggleFilterScale('medium')"
-                        >中型企业</div>
-                        <div 
-                            class="filter-option" 
-                            :class="{ active: selectedFilterScale.includes('small') }"
-                            @click="toggleFilterScale('small')"
-                        >小微企业</div>
+                        <div class="filter-option" :class="{ active: selectedFilterScale.includes('all') }"
+                            @click="toggleFilterScale('all')">全部</div>
+                        <div class="filter-option" :class="{ active: selectedFilterScale.includes('large') }"
+                            @click="toggleFilterScale('large')">大型企业</div>
+                        <div class="filter-option" :class="{ active: selectedFilterScale.includes('medium') }"
+                            @click="toggleFilterScale('medium')">中型企业</div>
+                        <div class="filter-option" :class="{ active: selectedFilterScale.includes('small') }"
+                            @click="toggleFilterScale('small')">小微企业</div>
                     </div>
                 </div>
             </div>
-        </van-popup>
+        </van-popup> -->
+        <van-calendar v-model:show="showFilterSelector" type="range" allow-same-day
+            :min-date="new Date(new Date().getFullYear() - 2, 0, 1)" :max-date="new Date()" @confirm="onConfirm" />
     </div>
 </template>
 
 <script setup name="statisticsAnalysis">
-import { ref, computed } from 'vue';
+import { ref, computed, shallowRef, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { showToast } from 'vant';
 import 'vant/es/toast/style';
 
 const router = useRouter();
+const maxDate = ref(new Date());
+const minDate = ref(new Date(new Date().getFullYear() - 2, 0, 1));
+// 年份列
+const yearList = ref([]);
+for (let y = new Date().getFullYear(); y >= 2024; y--) {
+    yearList.value.unshift({ text: y, value: String(y) });
+}
+// 当前年份
+const currentYearValue = new Date().getFullYear();
+// 根据年份获取季度列表
+const getQuarterColumns = (year) => {
+    const quarters = [
+        { text: '1', value: 'Q1' },
+        { text: '2', value: 'Q2' },
+        { text: '3', value: 'Q3' },
+        { text: '4', value: 'Q4' },
+    ];
+    // 如果是当前年份，只显示到当前季度
+    if (Number(year) === currentYearValue) {
+        const currentQuarter = Math.ceil((new Date().getMonth() + 1) / 3);
+        return quarters.slice(0, currentQuarter);
+    }
+    // 过去年份显示全部4个季度
+    return quarters;
+};
 
-// 用户类型：personal=个人，company=单位
-const userType = ref('personal');
-
-// 周期选择：month=月度，quarter=季度，year=年度
-const period = ref('year');
+// 响应式季度列（根据年份动态变化）
+const quarterColumns = ref([
+    yearList.value,
+    getQuarterColumns(currentYearValue)
+]);
 
-// 当前年份
-const currentYear = ref(2026);
+// ========== 通用工具函数 ==========
+const toggleFilter = (selectedList, value, allKey = 'all') => {
+    if (value === allKey) {
+        selectedList.value = [allKey];
+    } else {
+        selectedList.value = selectedList.value.filter(v => v !== allKey);
+        const index = selectedList.value.indexOf(value);
+        if (index > -1) {
+            selectedList.value.splice(index, 1);
+        } else {
+            selectedList.value.push(value);
+        }
+        if (selectedList.value.length === 0) {
+            selectedList.value = [allKey];
+        }
+    }
+};
 
-// Tab 激活状态
+// 数字动画工具
+// const animateNumber = (target, duration = 800) => {
+//     let start = 0;
+//     const startTime = performance.now();
+//     const step = (currentTime) => {
+//         const elapsed = currentTime - startTime;
+//         const progress = Math.min(elapsed / duration, 1);
+//         const easeOut = 1 - Math.pow(1 - progress, 3);
+//         return Math.round(target * easeOut);
+//     };
+//     return step;
+// };
+
+// ========== 响应式状态 ==========
+const userType = ref('personal');
+const period = ref('year');
+const currentYear = ref(new Date().getFullYear());
 const activeTab = ref(0);
 
 // 统计数据
 const statistics = ref({
-    totalCount: 11,
-    monthOverMonth: 266.67,
-    yearOverYear: 266.66,
-    jointLaw: {
-        noticeCount: 8,
-        entrustedCount: 0,
-        evaluateCount: 8,
-        complaintCount: 5,
-    },
+    totalCount: 0,
+    monthOverMonth: 0,
+    yearOverYear: 0,
+    jointLaw: { noticeCount: 0, entrustedCount: 0, evaluateCount: 0, complaintCount: 0 },
 });
 
-// 执法类别数据
-const lawCategoryList = ref([
+// 类别数据（使用 shallowRef 优化性能）
+const lawCategoryList = shallowRef([
     { name: '行政检查', value: 11, subValue: '100%' },
     { name: '行政处罚', value: 0, subValue: '-' },
     { name: '行政许可', value: 0, subValue: '-' },
     { name: '行政强制', value: 0, subValue: '-' },
     { name: '行政征收', value: 0, subValue: '-' },
     { name: '行政给付', value: 0, subValue: '-' },
+    { name: '行政确认', value: 0, subValue: '-' },
+    { name: '行政登记', value: 0, subValue: '-' },
+    { name: '行政裁决', value: 0, subValue: '-' },
+    { name: '文书送达', value: 0, subValue: '-' },
 ]);
 
-// 企业类别数据
-const enterpriseCategoryList = ref([
+const enterpriseCategoryList = shallowRef([
     { name: '工业企业', value: 5, subValue: '45.45%' },
     { name: '商业企业', value: 3, subValue: '27.27%' },
     { name: '服务业', value: 2, subValue: '18.18%' },
     { name: '其他', value: 1, subValue: '9.1%' },
 ]);
 
-// 投诉类别数据
-const complaintCategoryList = ref([
+const complaintCategoryList = shallowRef([
     { name: '执法态度', value: 2, subValue: '40%' },
     { name: '执法程序', value: 1, subValue: '20%' },
     { name: '执法结果', value: 2, subValue: '40%' },
 ]);
 
-// 弹窗显示控制
+// 弹窗控制
 const showMonthSelector = ref(false);
 const showQuarterSelector = ref(false);
 const showYearSelector = ref(false);
 const showFilterSelector = ref(false);
+const isLoading = ref(true);
 
 // 选中的值
-const selectedMonth = ref('');
-const selectedQuarter = ref('');
-const selectedYearPeriod = ref('');
+const now = new Date();
+const selectedMonth = ref([now.getFullYear(), now.getMonth() + 1]);
+const selectedQuarter = ref([String(now.getFullYear()), `Q${Math.ceil((now.getMonth() + 1) / 3)}`]);
+const selectedYearPeriod = ref([String(now.getFullYear())]);
 const selectedFilterType = ref(['all']);
 const selectedFilterScale = ref(['all']);
+// 筛选日期范围
+const selectedDateRange = ref(null);
+const isFilterMode = ref(false);
+
+// 实时监听年份变化，更新季度列表
+watch(() => selectedQuarter.value[0], (newYear) => {
+    if (newYear) {
+        quarterColumns.value = [
+            yearList.value,
+            getQuarterColumns(newYear)
+        ];
+    }
+});
 
-// 数据列
-const monthColumns = [
-    { text: '1月', value: '1' },
-    { text: '2月', value: '2' },
-    { text: '3月', value: '3' },
-    { text: '4月', value: '4' },
-    { text: '5月', value: '5' },
-    { text: '6月', value: '6' },
-    { text: '7月', value: '7' },
-    { text: '8月', value: '8' },
-    { text: '9月', value: '9' },
-    { text: '10月', value: '10' },
-    { text: '11月', value: '11' },
-    { text: '12月', value: '12' },
-];
-
-const quarterColumns = [
-    { text: '第一季度', value: 'Q1' },
-    { text: '第二季度', value: 'Q2' },
-    { text: '第三季度', value: 'Q3' },
-    { text: '第四季度', value: 'Q4' },
-];
+// 动画数字
+const animatedTotal = ref(0);
+const animatedNotice = ref(0);
+const animatedEntrusted = ref(0);
+const animatedEvaluate = ref(0);
+const animatedComplaint = ref(0);
+
+// 根据当前周期显示的时间文本
+const periodDisplayText = computed(() => {
+    // 如果是筛选模式，显示日期范围
+    if (period.value === 'other') {
+        const [startDate, endDate] = selectedDateRange.value;
+        const formatDate = (date) => {
+            const d = new Date(date);
+            return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+        };
+        return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+    }
 
+    if (period.value === 'month') {
+        if (selectedMonth.value && selectedMonth.value.length === 2) {
+            return `${selectedMonth.value[0]}年${selectedMonth.value[1]}月`;
+        }
+        return `${currentYear.value}年`;
+    } else if (period.value === 'quarter') {
+        if (selectedQuarter.value && selectedQuarter.value.length === 2) {
+            const year = selectedQuarter.value[0];
+            const quarter = selectedQuarter.value[1];
+            const quarterMap = {
+                'Q1': '1季度',
+                'Q2': '2季度',
+                'Q3': '3季度',
+                'Q4': '4季度'
+            };
+            return `${year}年${quarterMap[quarter] || quarter}`;
+        }
+        return `${currentYear.value}年`;
+    } else {
+        return `${currentYear.value}年`;
+    }
+});
+
+// 年份列（computed 保持响应式）
 const yearColumns = computed(() => {
+    console.log(new Date().getFullYear());
     const years = [];
-    for (let y = 2026; y >= 2020; y--) {
-        years.push({ text: y + '年', value: String(y) });
+    for (let y = new Date().getFullYear(); y >= 2024; y--) {
+        years.push({ text: y, value: String(y) });
     }
+    console.log(years);
     return years;
 });
 
+// ========== 数据加载与动画 ==========
+const loadStatistics = () => {
+    isLoading.value = true;
+    setTimeout(() => {
+        statistics.value = {
+            totalCount: 11,
+            monthOverMonth: 266.67,
+            yearOverYear: 266.66,
+            jointLaw: { noticeCount: 8, entrustedCount: 0, evaluateCount: 8, complaintCount: 5 },
+        };
+        startNumberAnimation();
+        isLoading.value = false;
+    }, 500);
+};
+
+const startNumberAnimation = () => {
+    const duration = 1000;
+    const startTime = performance.now();
+    const targetTotal = statistics.value.totalCount;
+    const targetNotice = statistics.value.jointLaw.noticeCount;
+    const targetEntrusted = statistics.value.jointLaw.entrustedCount;
+    const targetEvaluate = statistics.value.jointLaw.evaluateCount;
+    const targetComplaint = statistics.value.jointLaw.complaintCount;
+
+    const animate = (currentTime) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easeOut = 1 - Math.pow(1 - progress, 3);
+
+        animatedTotal.value = Math.round(targetTotal * easeOut);
+        animatedNotice.value = Math.round(targetNotice * easeOut);
+        animatedEntrusted.value = Math.round(targetEntrusted * easeOut);
+        animatedEvaluate.value = Math.round(targetEvaluate * easeOut);
+        animatedComplaint.value = Math.round(targetComplaint * easeOut);
+
+        if (progress < 1) {
+            requestAnimationFrame(animate);
+        }
+    };
+    requestAnimationFrame(animate);
+};
+
 // 显示弹窗
 const showMonthPicker = () => {
     period.value = 'month';
-    selectedMonth.value = '5';
+    selectedMonth.value = [now.getFullYear(), now.getMonth() + 1];
     showMonthSelector.value = true;
+    isFilterMode.value = false; // 退出筛选模式
 };
 
 const showQuarterPicker = () => {
     period.value = 'quarter';
-    selectedQuarter.value = 'Q2';
+    selectedQuarter.value = [String(now.getFullYear()), `Q${Math.ceil((now.getMonth() + 1) / 3)}`];
     showQuarterSelector.value = true;
+    isFilterMode.value = false; // 退出筛选模式
 };
 
 const showYearPeriodPicker = () => {
     period.value = 'year';
-    selectedYearPeriod.value = '2026';
+    selectedYearPeriod.value = ['2026'];
     showYearSelector.value = true;
 };
 
 const showYearPicker = () => {
-    selectedYearPeriod.value = String(currentYear.value);
+    selectedYearPeriod.value = [String(currentYear.value)];
     showYearSelector.value = true;
 };
 
 const showFilterPopup = () => {
+    period.value = 'other';
     showFilterSelector.value = true;
 };
 
+// 根据当前周期显示对应的选择器
+const showPeriodPicker = () => {
+    if (period.value === 'month') {
+        selectedMonth.value = selectedMonth.value || [now.getFullYear(), now.getMonth() + 1];
+        showMonthSelector.value = true;
+    } else if (period.value === 'quarter') {
+        const currentQuarter = Math.ceil((new Date().getMonth() + 1) / 3);
+        selectedQuarter.value = [String(now.getFullYear()), `Q${currentQuarter}`];
+        showQuarterSelector.value = true;
+    } else {
+        selectedYearPeriod.value = [String(currentYear.value)];
+        showYearSelector.value = true;
+    }
+};
+
 // 确认选择
-const confirmMonth = () => {
-    const monthData = monthColumns.find(m => m.value === selectedMonth.value);
-    showToast(`已选择${monthData?.text}`);
+const confirmMonth = (value) => {
+    // showToast(`已选择${periodDisplayText.value}`);
     showMonthSelector.value = false;
 };
 
 const confirmQuarter = () => {
-    const quarterData = quarterColumns.find(q => q.value === selectedQuarter.value);
-    showToast(`已选择${quarterData?.text}`);
+    showToast(`已选择${periodDisplayText.value}`);
     showQuarterSelector.value = false;
 };
 
 const confirmYear = () => {
-    currentYear.value = Number(selectedYearPeriod.value);
-    showToast(`已选择${currentYear.value}年`);
+    currentYear.value = Number(selectedYearPeriod.value[0]);
+    showToast(`已选择${periodDisplayText.value}`);
     showYearSelector.value = false;
 };
 
@@ -385,69 +501,75 @@ const confirmFilter = () => {
     showFilterSelector.value = false;
 };
 
-const onMonthConfirm = ({ selectedOptions }) => {
-    showToast(`已选择${selectedOptions[0].text}`);
+const onMonthConfirm = (value) => {
+    selectedMonth.value = value;
+    showToast(`已选择${periodDisplayText.value}`);
     showMonthSelector.value = false;
 };
 
-const onQuarterConfirm = ({ selectedOptions }) => {
-    showToast(`已选择${selectedOptions[0].text}`);
+const onQuarterConfirm = ({ selectedValues }) => {
+    // van-picker 多列模式下，confirm 回调参数是对象，包含 selectedValues 数组
+    if (Array.isArray(selectedValues)) {
+        selectedQuarter.value = selectedValues;
+    }
+    showToast(`已选择${periodDisplayText.value}`);
     showQuarterSelector.value = false;
 };
 
-const onYearConfirm = ({ selectedOptions }) => {
-    currentYear.value = Number(selectedOptions[0].value);
-    showToast(`已选择${currentYear.value}年`);
-    showYearSelector.value = false;
-};
-
-// 筛选切换
-const toggleFilterType = (type) => {
-    if (type === 'all') {
-        selectedFilterType.value = ['all'];
-    } else {
-        selectedFilterType.value = selectedFilterType.value.filter(t => t !== 'all');
-        const index = selectedFilterType.value.indexOf(type);
-        if (index > -1) {
-            selectedFilterType.value.splice(index, 1);
-        } else {
-            selectedFilterType.value.push(type);
-        }
-        if (selectedFilterType.value.length === 0) {
-            selectedFilterType.value = ['all'];
-        }
+const onYearConfirm = (value) => {
+    // van-picker 单列模式下confirm回调参数是对象，包含selectedValues数组
+    const selectedValues = value.selectedValues || value;
+    
+    if (typeof selectedValues === 'string') {
+        selectedYearPeriod.value = [selectedValues];
+        currentYear.value = Number(selectedValues);
+    } else if (Array.isArray(selectedValues)) {
+        selectedYearPeriod.value = selectedValues;
+        currentYear.value = Number(selectedValues[0]);
     }
+    showToast(`已选择${periodDisplayText.value}`);
+    showYearSelector.value = false;
 };
-
-const toggleFilterScale = (scale) => {
-    if (scale === 'all') {
-        selectedFilterScale.value = ['all'];
-    } else {
-        selectedFilterScale.value = selectedFilterScale.value.filter(s => s !== 'all');
-        const index = selectedFilterScale.value.indexOf(scale);
-        if (index > -1) {
-            selectedFilterScale.value.splice(index, 1);
-        } else {
-            selectedFilterScale.value.push(scale);
-        }
-        if (selectedFilterScale.value.length === 0) {
-            selectedFilterScale.value = ['all'];
-        }
+const onConfirm = (dates) => {
+    if (dates && dates.length === 2) {
+        selectedDateRange.value = dates;
+        isFilterMode.value = true;
     }
+    showFilterSelector.value = false;
 };
+// 筛选切换（使用通用函数）
+const toggleFilterType = (type) => toggleFilter(selectedFilterType, type);
+const toggleFilterScale = (scale) => toggleFilter(selectedFilterScale, scale);
 
 // 返回上一页
 const goBack = () => {
     router.back();
 };
+
+// 组件挂载时加载数据
+import { onMounted } from 'vue';
+onMounted(() => {
+    loadStatistics();
+});
 </script>
 
 <style lang="less" scoped>
+// ========== CSS 变量 ==========
 .statistics-page {
+    --primary-color: #1989fa;
+    --primary-dark: #2b7de9;
+    --text-primary: #333;
+    --text-secondary: #666;
+    --text-placeholder: #999;
+    --success-color: #19734F;
+    --danger-color: #ff4d4f;
+    --border-color: #f0f0f0;
+    --bg-light: #f5f7fa;
+    --bg-white: #fff;
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: #f5f7fa;
+    background: var(--bg-white);
 
     .content-area {
         flex: 1;
@@ -456,6 +578,22 @@ const goBack = () => {
     }
 }
 
+/* ===== 过渡动画 ===== */
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+    transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.fade-slide-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
 /* ===== 导航栏样式覆盖 ===== */
 :deep(.van-nav-bar) {
     background-color: #fff;
@@ -464,45 +602,64 @@ const goBack = () => {
 :deep(.van-nav-bar__title) {
     font-size: 0.45rem;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
 }
 
 :deep(.van-nav-bar__text) {
     font-size: 0.35rem;
-    color: #333;
+    color: var(--text-primary);
 }
 
 :deep(.van-nav-bar .van-icon) {
-    color: #333;
+    color: var(--text-primary);
 }
 
 /* ===== 类型切换器 ===== */
 .type-switcher {
     display: flex;
     gap: 0;
-    background: #f0f0f0;
-    border-radius: 0.15rem;
-    padding: 0.08rem;
+    background: #fff;
     margin-bottom: 0.3rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
 
     .switcher-item {
         flex: 1;
-        height: 0.85rem;
-        background: transparent;
-        border-radius: 0.1rem;
+        height: 44px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 0.4rem;
-        font-weight: 500;
-        color: #666;
-        transition: all 0.3s;
+        font-size: 16px;
+        font-weight: 550;
+        transition: all 0.3s ease;
         position: relative;
 
-        &.active {
-            background: linear-gradient(135deg, #2b7de9, #5ba3f5);
-            color: #fff;
-            clip-path: polygon(0 0, 95% 0, 100% 35%, 100% 100%, 5% 100%, 0 65%);
+        &.personal {
+            background: url('@/assets/images/tab_bg1_1.png') no-repeat center center;
+            background-size: 100% 100%;
+            color: var(--primary-color);
+
+            &.active {
+                background: url('@/assets/images/tab_bg1.png') no-repeat center center;
+                background-size: 100% 100%;
+                color: #fff;
+            }
+        }
+
+        &.company {
+            background: url('@/assets/images/tab_bg.png') no-repeat center center;
+            background-size: 100% 100%;
+            color: var(--primary-color);
+
+            &.active {
+                background: url('@/assets/images/tab_bg_1.png') no-repeat center center;
+                background-size: 100% 100%;
+                color: #fff;
+            }
+        }
+
+        &:active {
+            transform: scale(0.98);
         }
     }
 }
@@ -510,78 +667,101 @@ const goBack = () => {
 /* ===== 筛选栏 ===== */
 .filter-bar {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    // align-items: center;
+    flex-wrap: wrap;
     margin-bottom: 0.3rem;
-
+    padding: 0 8px;
+    background: #fff;
+    border-radius: 0.2rem;
     .year-display {
-        font-size: 0.45rem;
-        font-weight: 600;
-        color: #333;
+        font-size: 16px;
+        color: var(--primary-dark);
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        &:active {
+            opacity: 0.7;
+        }
+
+        .year-arrow {
+            font-size: 12px;
+            transition: transform 0.3s;
+        }
     }
 
     .period-selector {
         display: flex;
         align-items: center;
-        gap: 0.2rem;
+        background: var(--bg-light);
+        border-radius: 20px;
+        padding: 4px;
+        margin-left: auto;
+        flex-shrink: 0;
 
         .period-btn {
-            height: 0.6rem;
-            font-size: 0.3rem;
-            padding: 0 0.25rem;
+            height: 28px;
+            font-size: 13px;
+            padding: 0 14px;
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 0.1rem;
-            color: #666;
-            transition: all 0.3s;
+            border-radius: 18px;
+            color: var(--text-secondary);
+            transition: all 0.3s ease;
             cursor: pointer;
 
             &.active {
-                background: linear-gradient(135deg, #2b7de9, #5ba3f5);
-                color: #fff;
+                background: #fff;
+                color: var(--primary-dark);
+                font-weight: 500;
+                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+            }
+
+            &:active {
+                transform: scale(0.96);
             }
         }
 
         .filter-btn {
-            height: 0.6rem;
-            font-size: 0.3rem;
-            padding: 0 0.25rem;
+            height: 28px;
+            font-size: 13px;
+            padding: 0 12px;
+            margin-left: auto;
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 0.1rem;
-            background: #f0f0f0;
-            color: #666;
+            color: var(--text-secondary);
             cursor: pointer;
+            transition: opacity 0.2s;
+            border-radius: 4px;
+
+            &:active {
+                opacity: 0.7;
+            }
+
+            &.active {
+                background-color: var(--primary-color);
+                color: #fff;
+            }
         }
     }
 }
 
 /* ===== 统计卡片 ===== */
 .statistics-card {
-    background: #fff;
-    border-radius: 0.3rem;
     margin-bottom: 0.27rem;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
     overflow: hidden;
     position: relative;
-}
+    background: url('@/assets/images/bg_analy_v4.jpg') no-repeat center center;
+    background-size: 100% 100%;
+    border-radius: 0.3rem;
 
-.main-card {
-    .card-bg-decoration {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 2.5rem;
-        height: 2rem;
-        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80"><rect x="5" y="60" width="15" height="20" fill="%23e6f0ff"/><rect x="25" y="40" width="15" height="40" fill="%23d9e6fd"/><rect x="45" y="20" width="15" height="60" fill="%23b8d4ff"/><rect x="65" y="50" width="15" height="30" fill="%23d9e6fd"/><rect x="85" y="30" width="12" height="50" fill="%23e6f0ff"/><rect x="55" y="35" width="30" height="2" fill="%232b7de9" rx="1"/><rect x="30" y="50" width="25" height="2" fill="%235ba3f5" rx="1"/><rect x="55" y="60" width="35" height="2" fill="%232b7de9" rx="1"/></svg>') no-repeat right bottom;
-        opacity: 0.6;
+    .loading-skeleton {
+        padding: 0.4rem;
     }
-}
 
-.statistics-card {
     .card-body {
         padding: 0.4rem 0.4rem 0.35rem;
         position: relative;
@@ -590,24 +770,28 @@ const goBack = () => {
 }
 
 /* 总数区域 */
+.card-title {
+    font-size: 14px;
+    color: var(--text-primary);
+    margin-bottom: 0.15rem;
+    font-weight: 560;
+}
+
 .total-section {
     display: flex;
-    justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 0.35rem;
+    padding: 8px 0 0 4px;
 
     .left-part {
-        .card-title {
-            font-size: 0.38rem;
-            color: #666;
-            margin-bottom: 0.15rem;
-        }
+        width: 24%;
 
         .total-number {
-            font-size: 1.3rem;
-            font-weight: bold;
-            color: #2b7de9;
+            font-size: clamp(36px, 10vw, 56px);
+            font-weight: 560;
+            color: var(--primary-dark);
             line-height: 1;
+            height: clamp(50px, 12vw, 70px);
         }
     }
 
@@ -618,21 +802,22 @@ const goBack = () => {
             display: flex;
             align-items: center;
             font-size: 0.3rem;
-            margin-bottom: 0.1rem;
+            margin-bottom: 10px;
 
             .comparison-label {
-                color: #999;
+                color: var(--text-placeholder);
             }
 
             .up-arrow {
-                color: #52c41a;
-                font-size: 0.35rem;
-                margin: 0 0.05rem 0 0.05rem;
+                color: var(--success-color);
+                font-size: 14px;
             }
 
             .comparison-value {
                 &.up {
-                    color: #52c41a;
+                    padding-top: 3px;
+                    padding-left: 2px;
+                    color: var(--success-color);
                     font-weight: 600;
                 }
             }
@@ -642,28 +827,25 @@ const goBack = () => {
 
 /* 联合执法区域 */
 .joint-law-section {
-    background: linear-gradient(135deg, #f5f8ff, #ecf4ff);
-    border-radius: 0.2rem;
-    padding: 0.25rem 0.3rem 0.3rem;
-
     .section-header {
         display: flex;
         align-items: center;
         margin-bottom: 0.25rem;
 
         .section-title {
-            font-size: 0.35rem;
-            color: #333;
+            font-size: 14px;
+            color: #000;
             font-weight: 500;
             padding: 0 0.15rem;
-            background: linear-gradient(135deg, #2b7de9, #5ba3f5);
+            height: 20px;
+            background: linear-gradient(90deg, #7092BE 0%, #7092BE 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
 
         .section-value {
-            color: #999;
+            color: var(--text-placeholder);
             font-size: 0.3rem;
             margin-left: 0.2rem;
         }
@@ -672,53 +854,56 @@ const goBack = () => {
     .joint-stats {
         display: flex;
         justify-content: space-between;
-        padding: 0 0.1rem;
+        padding: 6px;
 
         .joint-item {
             text-align: center;
 
             .joint-value {
-                font-size: 0.6rem;
-                font-weight: bold;
-                color: #2b7de9;
+                font-size: clamp(22px, 6vw, 30px);
+                color: var(--primary-dark);
                 line-height: 1;
+                margin-top: 14px;
                 margin-bottom: 0.08rem;
+                transition: transform 0.3s ease;
 
                 &.text-red {
-                    color: #ff4d4f;
+                    color: var(--danger-color);
                 }
             }
 
             .joint-label {
-                font-size: 0.28rem;
-                color: #666;
+                font-size: 14px;
+                color: #7092BE;
             }
         }
+
+        .joint-item:active .joint-value {
+            transform: scale(1.05);
+        }
     }
 }
 
 /* ===== Tabs ===== */
 .tabs-section {
-    background: #fff;
-    border-radius: 0.3rem;
     overflow: hidden;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 
     .tabs-bar {
         display: flex;
-        border-bottom: 1px solid #f0f0f0;
 
         .tab-item {
-            flex: 1;
+            width: 90px;
             text-align: center;
-            padding: 0.3rem 0;
+            padding: 14px 0 12px;
             position: relative;
             cursor: pointer;
+            box-sizing: border-box;
 
             .tab-text {
-                font-size: 0.35rem;
-                color: #666;
-                font-weight: 500;
+                font-size: 15px;
+                color: #999;
+                font-weight: 400;
+                transition: all 0.3s;
             }
 
             .tab-line {
@@ -726,15 +911,15 @@ const goBack = () => {
                 bottom: 0;
                 left: 50%;
                 transform: translateX(-50%);
-                width: 0.6rem;
-                height: 0.06rem;
-                background: linear-gradient(135deg, #2b7de9, #5ba3f5);
-                border-radius: 0.03rem;
+                width: 80px;
+                height: 3px;
+                background: #1989fa;
+                border-radius: 1.5px;
             }
 
             &.active {
                 .tab-text {
-                    color: #2b7de9;
+                    color: #333;
                     font-weight: 600;
                 }
             }
@@ -742,7 +927,7 @@ const goBack = () => {
     }
 
     .tab-content {
-        padding: 0.3rem 0.25rem;
+        padding: 0.3rem 0px;
     }
 }
 
@@ -753,41 +938,38 @@ const goBack = () => {
     gap: 0.2rem;
 
     .category-item {
-        background: linear-gradient(135deg, #fdfdff, #f8faff);
+        background: url('@/assets/images/bg_analy_card.jpg') no-repeat center center;
+        background-size: cover;
         border-radius: 0.25rem;
-        padding: 0.35rem 0.25rem;
+        padding: 10px 0.25rem;
         text-align: center;
         position: relative;
         overflow: hidden;
+        transition: all 0.3s ease;
 
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, #2b7de9, transparent);
-            opacity: 0.3;
+        &:active {
+            transform: scale(0.97);
+            opacity: 0.9;
         }
 
         .category-value {
-            font-size: 0.65rem;
-            font-weight: bold;
-            color: #2b7de9;
+            font-size: clamp(24px, 7vw, 34px);
+            font-weight: 560;
+            color: var(--primary-dark);
             line-height: 1;
-            margin-bottom: 0.08rem;
+            margin: 14px 0px;
+            transition: transform 0.3s ease;
         }
 
         .category-sub {
-            font-size: 0.3rem;
-            color: #999;
+            font-size: 14px;
+            color: var(--text-secondary);
             margin-bottom: 0.08rem;
         }
 
         .category-name {
-            font-size: 0.32rem;
-            color: #666;
+            font-size: 14px;
+            color: var(--text-secondary);
         }
     }
 }
@@ -798,23 +980,29 @@ const goBack = () => {
     justify-content: space-between;
     align-items: center;
     padding: 0.35rem 0.4rem;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--border-color);
 
-    .picker-cancel, .picker-confirm {
+    .picker-cancel,
+    .picker-confirm {
         font-size: 0.38rem;
-        color: #666;
+        color: var(--text-secondary);
         cursor: pointer;
+        transition: color 0.2s;
+
+        &:active {
+            opacity: 0.7;
+        }
     }
 
     .picker-confirm {
-        color: #2b7de9;
+        color: var(--primary-dark);
         font-weight: 500;
     }
 
     .picker-title {
         font-size: 0.4rem;
         font-weight: 600;
-        color: #333;
+        color: var(--text-primary);
     }
 }
 
@@ -833,7 +1021,7 @@ const goBack = () => {
         .filter-section-title {
             font-size: 0.36rem;
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 0.25rem;
         }
 
@@ -844,19 +1032,51 @@ const goBack = () => {
 
             .filter-option {
                 padding: 0.15rem 0.35rem;
-                background: #f5f5f5;
+                background: var(--bg-light);
                 border-radius: 0.35rem;
                 font-size: 0.32rem;
-                color: #666;
+                color: var(--text-secondary);
                 cursor: pointer;
-                transition: all 0.3s;
+                transition: all 0.3s ease;
 
                 &.active {
-                    background: linear-gradient(135deg, #2b7de9, #5ba3f5);
+                    background: linear-gradient(135deg, var(--primary-dark), #5ba3f5);
                     color: #fff;
+                    box-shadow: 0 2px 8px rgba(43, 125, 233, 0.3);
+                }
+
+                &:active {
+                    transform: scale(0.96);
                 }
             }
         }
     }
 }
+
+/* ===== 响应式适配 ===== */
+@media (max-width: 375px) {
+    .total-number {
+        font-size: clamp(32px, 9vw, 44px) !important;
+    }
+
+    .joint-value {
+        font-size: clamp(20px, 5.5vw, 26px) !important;
+    }
+
+    .category-value {
+        font-size: clamp(22px, 6vw, 30px) !important;
+    }
+
+    .period-btn {
+        height: 26px !important;
+        font-size: 12px !important;
+        padding: 0 10px !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .category-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
 </style>