From f82ab7bb6a69c11b46328cedd8d0af7bedc00c0a Mon Sep 17 00:00:00 2001
From: ylj20011123 <YLJ>
Date: Thu, 4 Sep 2025 18:45:15 +0800
Subject: [PATCH] update

---
 common/utils.js                               |  94 +-
 pages/everdayRenven/AnhuiIndex.vue            | 913 +++++++++++++++---
 pages/everdayRenven/AnhuiServerpart.vue       | 516 ++++++++--
 .../everdayRenven/components/RankContent.vue  |  38 +-
 pages/everdayRenven/components/listUnit.vue   | 189 +++-
 pages/everdayRenven/serviceDetail.vue         | 235 ++++-
 pages/index/index.vue                         |   2 +-
 7 files changed, 1696 insertions(+), 291 deletions(-)

diff --git a/common/utils.js b/common/utils.js
index f5f76ed..dc6dad0 100644
--- a/common/utils.js
+++ b/common/utils.js
@@ -65,7 +65,7 @@ import request from '@/util/index.js'
 // }
 
 const netChange = () => {
-	uni.onNetworkStatusChange(function(res) {
+	uni.onNetworkStatusChange(function (res) {
 		// console.log(res.isConnected)
 		store.mutations.isConnect(res.isConnected)
 		if (!res.isConnected) {
@@ -187,25 +187,25 @@ function addUserBehaviorNew(obj) {
 	}
 	obj.visitChannels = store.state.visitChannels
 	let userDate = store.state.userData
-	console.log('userDate123',userDate)
+	console.log('userDate123', userDate)
 
 	let baseInfo = uni.getStorageSync('userInfo')
 
 	let req = {
-		userName:userDate.UserName,
-		phoneNumber:userDate.Membership_Phone,
-		userId:userDate.UserId ? userDate.UserId:'',
-		wechatAppId:'wxa99ef047735c031e',
-		intoRoute:obj.intoRoute,
-		outtoRoute:obj.outtoRoute,
-		visitChannels:obj.visitChannels,
-		behaviorRecordDesc:'',
+		userName: userDate.UserName,
+		phoneNumber: userDate.Membership_Phone,
+		userId: userDate.UserId ? userDate.UserId : '',
+		wechatAppId: 'wxa99ef047735c031e',
+		intoRoute: obj.intoRoute,
+		outtoRoute: obj.outtoRoute,
+		visitChannels: obj.visitChannels,
+		behaviorRecordDesc: '',
 		LoginIP: baseInfo.ip || '',
-		LoginPlace: (baseInfo.prov ? baseInfo.prov : '' ) + (baseInfo.prov && baseInfo.city ? '-' : '') + (baseInfo.city ? baseInfo.city : ''),
+		LoginPlace: (baseInfo.prov ? baseInfo.prov : '') + (baseInfo.prov && baseInfo.city ? '-' : '') + (baseInfo.city ? baseInfo.city : ''),
 		SOURCE_PLATFORM: '驿行畅旅'
 	}
-	console.log('req',req)
-	request.$webGet('CommercialApi/UserBehavior/AddUserBehavior',req).then(() => {
+	console.log('req', req)
+	request.$webGet('CommercialApi/UserBehavior/AddUserBehavior', req).then(() => {
 
 	})
 }
@@ -232,7 +232,7 @@ async function getFieldEnumByField(params) {
 }
 
 // 不四舍五入 保留两位小数的金额化方法
-function getMoney(money){
+function getMoney(money) {
 	if (!money || isNaN(money)) return "0.00";
 	let num = parseFloat(money + '') + '';
 	num = parseInt(money * 100 + '') / 100 + ''
@@ -255,32 +255,32 @@ function getMoney(money){
 
 	return num;
 }
-function getMoneyTest(money){
-	console.log('money',money)
+function getMoneyTest(money) {
+	console.log('money', money)
 	if (!money || isNaN(money)) return "0.00";
 	let realMoney = 0
-	if(money.toString().indexOf('.')>0){
+	if (money.toString().indexOf('.') > 0) {
 		let num_per = money.toString().substring(0, money.toString().indexOf('.'))
 		let num_next = money.toString().substring(money.toString().indexOf('.') + 1).padEnd(2, '0')
-		console.log('num_per',num_per)
-		console.log('num_next',num_next)
+		console.log('num_per', num_per)
+		console.log('num_next', num_next)
 		realMoney = Number(num_per + '.' + num_next).toFixed(2)
-	}else{
+	} else {
 		realMoney = money
 	}
 
-	console.log('realMoney',realMoney)
+	console.log('realMoney', realMoney)
 	let num = realMoney
-		// let num = parseFloat(realMoney + '') + '';
+	// let num = parseFloat(realMoney + '') + '';
 	// num = (parseInt(realMoney * 100 + '') / 100).toFixed(2) + ''
-	console.log('num',num)
+	console.log('num', num)
 	let reg = /(-?\d+)(\d{3})/;
 	while (reg.test(num)) {
 		num = num.replace(reg, "$1,$2");
 	}
 
 	let idx = num.indexOf('.')
-	console.log('idx',idx)
+	console.log('idx', idx)
 	if (idx === -1) {
 		num = num + '.00'
 	}
@@ -289,8 +289,8 @@ function getMoneyTest(money){
 		let num_per = num.substring(0, idx) + '.'
 		let num_next = num.substring(idx + 1).padEnd(2, '0')
 
-		console.log('num_per',num_per)
-		console.log('num_next',num_next)
+		console.log('num_per', num_per)
+		console.log('num_next', num_next)
 
 		num = num_per + num_next
 	}
@@ -305,6 +305,45 @@ function playVideo(opt) {
 
 	return new EZUIPlayer(opt)
 }
+
+// 得到这个月有多少天
+function getThisMonthDay(value) {
+	let date = new Date(value)
+	let y = date.getFullYear()
+	let m = date.getMonth() + 1
+	let howDay;
+	let flag = false
+	if (y % 4 === 0 && y % 100 !== 0 || y % 400 === 0) {
+		flag = true
+	}
+	switch (m) {
+		case 1:
+		case 3:
+		case 5:
+		case 7:
+		case 8:
+		case 10:
+		case 12:
+			howDay = 31
+			break
+		case 4:
+		case 6:
+		case 9:
+		case 11:
+			howDay = 30
+			break
+		case 2:
+			if (flag) {
+				howDay = 29
+			} else {
+				howDay = 28
+			}
+			break
+	}
+	return howDay
+}
+
+
 export default {
 	netChange,
 	cutDate,
@@ -318,5 +357,6 @@ export default {
 	getFieldEnumByField, // 获取枚举参数
 	// calculateDistance,
 	// bMapToQQMap,
-	playVideo
+	playVideo,
+	getThisMonthDay
 }
diff --git a/pages/everdayRenven/AnhuiIndex.vue b/pages/everdayRenven/AnhuiIndex.vue
index d547bc2..3fdf265 100644
--- a/pages/everdayRenven/AnhuiIndex.vue
+++ b/pages/everdayRenven/AnhuiIndex.vue
@@ -11,7 +11,7 @@
       </view>
     </view>
 
-    <view class="page-body" v-if="showPage">
+    <view class="page-body page-fade-in" v-if="showPage">
       <AnhHead :today="today" :headMsg="headMsg" :lastDay="lastDay" :groupType="theRequest && theRequest.GroupType"
         :provinceCode="theRequest && theRequest.ProvinceCode" @bindDateChange="bindDateChange" :isup="isup"
         :nowDay="nowDay" :selectDate="theRequest && theRequest.time" @toggle="toggleCard" :currentMoney="currentMoney">
@@ -56,8 +56,8 @@
             <view class="content-wrapper">
               <view class="chart-section" v-show="nowTab == 1"
                 v-if="modelProgress.length > 0 && theRequest.ProvinceCode == 340000">
-                <view class="chart-container">
-                  <canvas canvas-id="modelCont" id="modelCont" class="modern-chart"
+                <view class="chart-container chart-optimized">
+                  <canvas canvas-id="modelCont" id="modelCont" class="modern-chart performance-chart"
                     @touchstart="touchPie($event, 'modelCont')"></canvas>
                 </view>
                 <view class="data-cards">
@@ -68,14 +68,15 @@
                     </view>
                     <view class="amount">￥{{ item.data }}</view>
                     <view class="progress-bar">
-                      <view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view>
+                      <view class="progress-fill progress-animated" :class="'progress-delay-' + o"
+                        :style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
                     </view>
                   </view>
                 </view>
               </view>
               <view class="chart-section" v-show="nowTab == 2" v-if="regionProgress.length > 0">
-                <view class="chart-container">
-                  <canvas canvas-id="businessCont" id="businessCont" class="modern-chart"
+                <view class="chart-container chart-optimized">
+                  <canvas canvas-id="businessCont" id="businessCont" class="modern-chart performance-chart"
                     @touchstart="touchPie($event, 'businessCont')"></canvas>
                 </view>
                 <view class="data-cards">
@@ -86,14 +87,15 @@
                     </view>
                     <view class="amount">￥{{ item.data }}</view>
                     <view class="progress-bar">
-                      <view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view>
+                      <view class="progress-fill progress-animated" :class="'progress-delay-' + o"
+                        :style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
                     </view>
                   </view>
                 </view>
               </view>
               <view class="chart-section" v-show="nowTab == 3" v-if="areaProgress.length > 0">
-                <view class="chart-container">
-                  <canvas canvas-id="areaCont" id="areaCont" class="modern-chart"
+                <view class="chart-container chart-optimized">
+                  <canvas canvas-id="areaCont" id="areaCont" class="modern-chart performance-chart"
                     @touchstart="touchPie($event, 'areaCont')"></canvas>
                 </view>
                 <view class="data-cards">
@@ -104,82 +106,98 @@
                     </view>
                     <view class="amount">￥{{ item.data }}</view>
                     <view class="progress-bar">
-                      <view class="progress-fill" :style="{ 'width': item.bili + '%' }"></view>
+                      <view class="progress-fill progress-animated" :class="'progress-delay-' + o"
+                        :style="{ 'width': showPage ? item.bili + '%' : '0%' }"></view>
                     </view>
                   </view>
                 </view>
               </view>
-              <view class="traffic-analysis" v-show="nowTab == 4" v-if="bayonetProgress && bayonetProgress.length > 0">
-                <view class="traffic-header">
-                  <view class="traffic-title">
-                    <view class="traffic-icon">🚗</view>
-                    <text>车流分析概览</text>
+              <!-- 车流分析区域 - 修复显示问题 -->
+              <view v-if="theRequest.ProvinceCode == 340000 && theRequest.GroupType == 1000" v-show="nowTab == 4">
+                <view class="traffic-analysis" v-if="bayonetProgress && bayonetProgress.length > 0">
+                  <view class="traffic-header">
+                    <view class="traffic-title">
+                      <view class="traffic-icon">🚗</view>
+                      <text>车流分析概览</text>
+                    </view>
+                    <view class="traffic-summary">
+                      {{ bayonetProgress.length }}个区域
+                    </view>
                   </view>
-                  <view class="traffic-summary">
-                    {{ bayonetProgress.length }}个区域
-                  </view>
-                </view>
 
-                <scroll-view class="traffic-scroll-container" scroll-y="true">
-                  <view class="traffic-regions">
-                    <view class="region-card" v-for="(item, o) in bayonetProgress" :key="o">
-                      <!-- 区域标题 -->
-                      <view class="region-header" @click="toggleRegionCollapse(item)">
-                        <view class="region-badge">
-                          <view class="region-icon">🗺️</view>
-                          <view class="region-title">{{ item.name }}</view>
-                        </view>
-                        <view class="region-actions">
-                          <view class="region-count">{{ item.list.length }}个服务区</view>
-                          <view class="region-arrow" :class="{ 'collapsed': item.collapsed }">▼</view>
-                        </view>
-                      </view>
-
-                      <!-- 服务区列表 -->
-                      <view class="service-areas" v-if="!item.collapsed">
-                        <view class="service-area-item" v-for="(child, idx) in item.list" :key="idx">
-                          <view class="service-header" @click="toggleServiceArea(item, idx)">
-                            <view class="service-info">
-                              <view class="service-name">{{ child.name }}</view>
-                              <view class="service-ratio">占比 {{ child.bili }}%</view>
-                            </view>
-                            <view class="service-actions">
-                              <view class="flow-stats">
-                                <view class="flow-item">
-                                  <text class="flow-label">入区</text>
-                                  <text class="flow-value">{{ child.data }}</text>
-                                </view>
-                                <view class="flow-divider">|</view>
-                                <view class="flow-item">
-                                  <text class="flow-label">断面</text>
-                                  <text class="flow-value">{{ child.flow }}</text>
-                                </view>
-                              </view>
-                              <view class="expand-arrow" :class="{ 'expanded': child.expanded }">▼</view>
-                            </view>
+                  <scroll-view class="traffic-scroll-container" scroll-y="true">
+                    <view class="traffic-regions">
+                      <view class="region-card" v-for="(item, o) in bayonetProgress" :key="o">
+                        <!-- 区域标题 -->
+                        <view class="region-header" @click="toggleRegionCollapse(item)">
+                          <view class="region-badge">
+                            <view class="region-title">{{ item.name }}</view>
                           </view>
+                          <view class="region-actions">
+                            <view class="region-count">{{ item.list.length }}个服务区</view>
+                            <view class="region-arrow" :class="{ 'collapsed': item.collapsed }">▼</view>
+                          </view>
+                        </view>
 
-                          <!-- 方向车流数据 -->
-                          <view class="direction-list" v-if="child.expanded && child.list && child.list.length > 0">
-                            <view class="direction-item" v-for="(direction, didx) in child.list" :key="didx">
-                              <view class="direction-header">
-                                <view class="direction-info">
-                                  <text class="direction-name">{{ direction.name }}区</text>
-                                  <text class="direction-percent">{{ direction.bili }}%</text>
+                        <!-- 服务区列表 -->
+                        <view class="service-areas service-areas-expand" v-if="!item.collapsed">
+                          <view class="service-area-item service-item-slide" v-for="(child, idx) in item.list"
+                            :key="idx" :style="'animation-delay: ' + (idx * 0.1) + 's'">
+                            <view class="service-header service-header-interactive"
+                              @click="toggleServiceArea(item, idx)">
+                              <view class="service-info">
+                                <view class="service-name">{{ child.name }}</view>
+                                <view class="service-ratio">占比 {{ child.bili }}%</view>
+                              </view>
+                              <view class="service-actions">
+                                <view class="flow-stats">
+                                  <view class="flow-item flow-item-counter">
+                                    <text class="flow-label">入区</text>
+                                    <text class="flow-value" :class="'counter-animate-' + o + '-' + idx">{{ child.data
+                                      }}</text>
+                                  </view>
+                                  <view class="flow-divider">|</view>
+                                  <view class="flow-item flow-item-counter">
+                                    <text class="flow-label">断面</text>
+                                    <text class="flow-value" :class="'counter-animate-' + o + '-' + idx">{{ child.flow
+                                      }}</text>
+                                  </view>
                                 </view>
-                                <view class="vehicle-stats">
-                                  <view class="vehicle-type-group">
-                                    <view class="vehicle-type-item">
-                                      <text class="vehicle-type-label">大型车</text>
-                                      <text class="vehicle-count-value">{{ direction.LargeVehicle_Count }}</text>
-                                    </view>
-                                    <view class="vehicle-type-item">
-                                      <text class="vehicle-type-label">中型车</text>
-                                      <text class="vehicle-count-value">{{ direction.MediumVehicle_Count }}</text>
-                                    </view>
-                                    <view class="vehicle-type-item">
-                                      <text class="vehicle-type-label">小型车</text>
-                                      <text class="vehicle-count-value">{{ direction.MinVehicle_Count }}</text>
+                                <view class="expand-arrow" :class="{ 'expanded': child.expanded }">▼</view>
+                              </view>
+                            </view>
+
+                            <!-- 方向车流数据 -->
+                            <view class="direction-list direction-expand-animation"
+                              v-if="child.expanded && child.list && child.list.length > 0">
+                              <view class="direction-item direction-item-slide" v-for="(direction, didx) in child.list"
+                                :key="didx" :style="'animation-delay: ' + (didx * 0.1) + 's'">
+                                <view class="direction-header">
+                                  <view class="direction-info">
+                                    <text class="direction-name">{{ direction.name }}区</text>
+                                    <text class="direction-percent direction-percent-highlight">{{ direction.bili
+                                      }}%</text>
+                                  </view>
+                                  <view class="vehicle-stats">
+                                    <view class="vehicle-type-group">
+                                      <view class="vehicle-type-item vehicle-item-bounce"
+                                        :style="'animation-delay: ' + (didx * 0.1 + 0.2) + 's'">
+                                        <text class="vehicle-type-label">大型车</text>
+                                        <text class="vehicle-count-value vehicle-count-pulse">{{
+                                          direction.LargeVehicle_Count }}</text>
+                                      </view>
+                                      <view class="vehicle-type-item vehicle-item-bounce"
+                                        :style="'animation-delay: ' + (didx * 0.1 + 0.3) + 's'">
+                                        <text class="vehicle-type-label">中型车</text>
+                                        <text class="vehicle-count-value vehicle-count-pulse">{{
+                                          direction.MediumVehicle_Count }}</text>
+                                      </view>
+                                      <view class="vehicle-type-item vehicle-item-bounce"
+                                        :style="'animation-delay: ' + (didx * 0.1 + 0.4) + 's'">
+                                        <text class="vehicle-type-label">小型车</text>
+                                        <text class="vehicle-count-value vehicle-count-pulse">{{
+                                          direction.MinVehicle_Count }}</text>
+                                      </view>
                                     </view>
                                   </view>
                                 </view>
@@ -189,8 +207,13 @@
                         </view>
                       </view>
                     </view>
-                  </view>
-                </scroll-view>
+                  </scroll-view>
+                </view>
+                <!-- 无数据提示 -->
+                <view class="no-traffic-data" v-if="!bayonetProgress || bayonetProgress.length === 0">
+                  <view class="no-data-icon">🚗</view>
+                  <text class="no-data-text">暂无车流分析数据</text>
+                </view>
               </view>
             </view>
           </view>
@@ -237,9 +260,10 @@
           </view>
         </template>
         <template v-else-if="theRequest && theRequest.GroupType == 1000">
-          <view class="region-list" v-show="regionShow1">
+          <view class="region-list list-fade-in" v-show="regionShow1">
             <block v-for="(item, i) in regionList" :key="i">
-              <view class="region-card" @click="toggleRegion(item)">
+              <view class="region-card region-card-slide" @click="toggleRegion(item)"
+                :style="'animation-delay: ' + (i * 0.1) + 's'">
                 <view class="region-main">
                   <view class="region-info">
                     <view class="region-name">{{ item.name }}</view>
@@ -266,9 +290,10 @@
                     </view>
                   </view>
                 </view>
-                <view class="service-sublist" v-show="item.show">
-                  <view class="subservice-card" v-for="(child, index) in item.child"
-                    :class="{ 'visited': child.visited }" :key="index" @click.stop="toDetail(child)">
+                <view class="service-sublist expand-collapse" v-show="item.show">
+                  <view class="subservice-card subservice-slide" v-for="(child, index) in item.child"
+                    :class="{ 'visited': child.visited }" :key="index" @click.stop="toDetail(child)"
+                    :style="'animation-delay: ' + (index * 0.05) + 's'">
                     <view class="subservice-info">
                       <view class="subservice-name">{{ child.serverpart_Name }}</view>
                       <view class="subservice-revenue">￥{{ $util.fmoney(child.cashpay, 2) }}
@@ -337,7 +362,7 @@ export default {
       regionProgress: null,
       tradeType: null,
       areaProgress: null,
-      bayonetProgress: null,
+      bayonetProgress: [], // 初始化为空数组
       modelProgress: null,
       isup: true,
       wechatPushSalesList: null, // 甘肃单品排行数据
@@ -619,6 +644,20 @@ export default {
     },
     selectTab(name, index) {
       this[name] = index
+      // 当切换到车流分析标签时，强制触发响应式更新
+      if (name === 'nowTab' && index === 4) {
+        console.log('切换到车流分析标签')
+        console.log('当前bayonetProgress:', this.bayonetProgress)
+        console.log('bayonetProgress类型:', typeof this.bayonetProgress)
+        console.log('bayonetProgress长度:', this.bayonetProgress ? this.bayonetProgress.length : 'null/undefined')
+        console.log('条件判断结果:')
+        console.log('- 有数据条件:', !!(this.bayonetProgress && this.bayonetProgress.length > 0))
+        console.log('- 无数据条件:', !!(!this.bayonetProgress || this.bayonetProgress.length === 0))
+        // 使用$nextTick确保DOM更新
+        this.$nextTick(() => {
+          console.log('车流分析DOM更新完成')
+        })
+      }
     },
     toggleRegion(item) {
       // 使用Vue.set确保响应式更新
@@ -668,10 +707,9 @@ export default {
       }
       const ctx = uni.createCanvasContext(obj.id, this);
       data.series = data.series.concat(obj.data)
+
+      // 微信小程序专用优化配置 - 完全去除动画和过渡效果
       rincanvas[obj.id] = new uCharts({
-        // 小程序图表工具
-        // $this: this,
-        // canvasId: obj.id,
         context: ctx,
         color: obj.colors,
         type: 'ring',
@@ -684,23 +722,47 @@ export default {
           margin: 0,
         },
         background: '#FFFFFF',
-        pixelRatio: 1,
+        pixelRatio: 1, // 使用较低的像素比率减少渲染负担
         series: data.series,
-        animation: false,
         width: uni.upx2px(686),
         height: uni.upx2px(510),
         dataLabel: true,
+
+        // 核心性能优化 - 完全禁用所有动画和交互
+        animation: false, // 禁用所有动画
+        animationDuration: 0, // 动画时长为0
+        animationEasing: 'linear', // 使用最简单的缓动函数
+        enableScroll: false, // 禁用滚动
+        enableMarkLine: false, // 禁用标记线
+        enableDataLabel: true, // 仅启用数据标签
+        disableTouch: true, // 禁用触摸交互以提高性能
+
         extra: {
           ring: {
             ringWidth: 40,
             labelWidth: 16,
             border: true,
             borderWidth: 1,
-
-            borderColor: '#fff'
+            borderColor: '#fff',
+            // 完全禁用交互效果
+            activeOpacity: 1, // 禁用透明度变化
+            activeRadius: 0, // 禁用半径变化
+            // 微信小程序特殊优化
+            linearGradient: false, // 禁用渐变以提高渲染性能
+            disableAnimation: true // uCharts自定义禁用动画参数
           }
         },
+
+        // 微信小程序Canvas优化
+        onRenderComplete: function () {
+          // 渲染完成后立即绘制，避免视觉延迟
+          ctx.draw(false);
+        }
       });
+
+      // 立即绘制，不使用回调以避免异步延迟
+      ctx.draw(false);
+      console.log('图表立即渲染完成:', obj.id);
     },
     getDetail(obj) {
       console.log('obj', obj)
@@ -832,54 +894,82 @@ export default {
         // 饼图分析及数据条形分析
         const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)
         this.modelProgress = progressList
-        // 延迟渲染图表，优化首屏加载
+        // 优化图表渲染，减少卡顿
         this.$nextTick(() => {
-          setTimeout(() => {
-            // 经营类型分析
-            var colors1 = ['#FFAC37', '#6B75B8'];
-            if (pieList.length > 0) {
-              this.showPie({
-                id: 'modelCont',
-                data: pieList,
-                colors: colors1,
-              });
+          // 使用requestAnimationFrame优化渲染时机
+          const renderCharts = () => {
+            try {
+              // 经营类型分析
+              var colors1 = ['#FFAC37', '#6B75B8'];
+              if (pieList.length > 0) {
+                this.showPie({
+                  id: 'modelCont',
+                  data: pieList,
+                  colors: colors1,
+                });
+              }
+
+              // 由于已优化单个图表性能，现在可以立即渲染所有图表
+              // 第二个图表 - 饼图分析及数据条形分析
+              const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay)
+              this.regionProgress = tprogressList
+
+              // 经营类型分析
+              var colors2 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
+              if (tpieList.length > 0) {
+                this.showPie({
+                  id: 'businessCont',
+                  data: tpieList,
+                  colors: colors2,
+                });
+              }
+
+              // 第三个图表 - 区域营收分析（立即渲染）
+              const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
+              this.areaProgress = aprogressList
+
+              // 区域营收分析
+              var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6'];
+              if (apieList.length > 0) {
+                this.showPie({
+                  id: 'areaCont',
+                  data: apieList,
+                  colors: colors3,
+                });
+              }
+            } catch (error) {
+              console.error('图表渲染出错:', error);
+              uni.hideLoading();
             }
+          };
 
-            // 饼图分析及数据条形分析
-            const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay)
-            this.regionProgress = tprogressList
-
-            // 经营类型分析
-            var colors2 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
-            if (tpieList.length > 0) {
-              this.showPie({
-                id: 'businessCont',
-                data: tpieList,
-                colors: colors2,
-              });
-            }
-
-            // 饼图分析及数据条形分析
-            const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
-            this.areaProgress = aprogressList
-
-            // 区域营收分析
-            var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6'];
-            if (apieList.length > 0) {
-              this.showPie({
-                id: 'areaCont',
-                data: apieList,
-                colors: colors3,
-              });
-            }
-          }, 100);
+          // 立即执行图表渲染，无需延时
+          renderCharts();
         });
 
         // 安徽省本级显示的内容
         if (this.theRequest.GroupType == 1000 && this.theRequest.ProvinceCode == 340000) {
           // 显示片区车流量数据分析
-          const [bayonetList] = this.getBayonetData(bayonetPie)
-          this.bayonetProgress = bayonetList
+          console.log('处理车流分析数据:', bayonetPie)
+          console.log('bayonetPie类型和长度:', typeof bayonetPie, bayonetPie ? bayonetPie.length : 'null/undefined')
+          if (bayonetPie && bayonetPie.length > 0) {
+            console.log('开始处理车流数据...')
+            const [bayonetList] = this.getBayonetData(bayonetPie)
+            console.log('getBayonetData返回结果:', bayonetList)
+            console.log('bayonetList长度:', bayonetList ? bayonetList.length : 'null/undefined')
+            // 使用Vue.set确保响应式更新
+            this.$set(this, 'bayonetProgress', bayonetList || [])
+            console.log('最终设置bayonetProgress:', this.bayonetProgress)
+            console.log('bayonetProgress.length:', this.bayonetProgress.length)
+          } else {
+            // 没有数据时设置为空数组
+            this.$set(this, 'bayonetProgress', [])
+            console.log('无车流分析数据，设置为空数组，bayonetPie:', bayonetPie)
+          }
+        } else {
+          // 不是安徽本级的情况，确保数据为空
+          console.log('不是安徽本级，清空车流数据')
+          this.$set(this, 'bayonetProgress', [])
         }
 
         // 数据加载完成后显示页面并隐藏loading
@@ -1431,6 +1521,64 @@ text.fs12 {
   line-height: 1.2;
 }
 
+/* 图表性能优化样式 */
+
+/* 性能优化的图表容器 */
+.chart-optimized {
+  /* 减少重绘和回流 */
+  transform: translateZ(0);
+  will-change: auto;
+  backface-visibility: hidden;
+
+  /* 避免子元素的布局计算影响 */
+  contain: layout style paint;
+}
+
+/* 性能优化的Canvas */
+.performance-chart {
+  /* 硬件加速 */
+  transform: translate3d(0, 0, 0);
+
+  /* 减少触摸延迟 */
+  touch-action: manipulation;
+
+  /* 优化渲染性能 */
+  image-rendering: optimizeSpeed;
+  image-rendering: -webkit-optimize-contrast;
+
+  /* 固定尺寸避免重新计算 */
+  width: 686rpx !important;
+  height: 510rpx !important;
+
+  /* 避免内容重排 */
+  flex-shrink: 0;
+}
+
+/* 减少动画对图表的影响 */
+.chart-container.chart-scale-in {
+  /* 简化入场动画，减少性能消耗 */
+  animation-duration: 0.3s;
+  animation-timing-function: ease-out;
+}
+
+/* 图表加载态优化 */
+.chart-section {
+  /* 预留空间避免布局跳动 */
+  min-height: 510rpx;
+
+  /* 减少layout thrashing */
+  contain: layout;
+}
+
+/* 禁用不必要的交互效果 */
+.performance-chart:active,
+.performance-chart:hover,
+.performance-chart:focus {
+  /* 移除默认的交互反馈 */
+  transform: translate3d(0, 0, 0) !important;
+  transition: none !important;
+}
+
 .heade-text {
   text-align: right;
   line-height: 1;
@@ -1494,9 +1642,9 @@ text.fs12 {
 
 .modle-title {
   padding: 0 32rpx 24rpx 32rpx;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #333;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #2c3e50;
   display: flex;
   align-items: center;
   margin: 32rpx 20rpx 0 20rpx;
@@ -1600,9 +1748,9 @@ text.fs12 {
   text-align: right;
 
   .strong-text {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #333;
+    font-size: 28rpx;
+    font-weight: 700;
+    color: #2c3e50;
     font-family: 'DIN Alternate', 'Bahnschrift', sans-serif;
   }
 }
@@ -2356,7 +2504,7 @@ canvas.operation-content {
 }
 
 .category-name {
-  font-size: 28rpx;
+  font-size: 26rpx;
   font-weight: 600;
   color: #2c3e50;
 }
@@ -2369,7 +2517,7 @@ canvas.operation-content {
 }
 
 .amount {
-  font-size: 32rpx;
+  font-size: 26rpx;
   font-weight: 700;
   color: #27B25F;
   font-family: 'DIN Alternate', 'Bahnschrift', monospace;
@@ -2477,8 +2625,8 @@ canvas.operation-content {
 }
 
 .region-title {
-  font-size: 26rpx;
-  font-weight: 600;
+  font-size: 28rpx;
+  font-weight: 700;
   color: #2c3e50;
 }
 
@@ -2715,8 +2863,8 @@ canvas.operation-content {
 }
 
 .upload-text {
-  font-size: 32rpx;
-  font-weight: 600;
+  font-size: 28rpx;
+  font-weight: 700;
   color: #2c3e50;
 }
 
@@ -2892,13 +3040,13 @@ canvas.operation-content {
 }
 
 .region-name {
-  font-size: 30rpx;
+  font-size: 26rpx;
   font-weight: 600;
   color: #2c3e50;
 }
 
 .region-revenue {
-  font-size: 32rpx;
+  font-size: 24rpx;
   font-weight: 700;
   color: #27B25F;
   font-family: 'DIN Alternate', 'Bahnschrift', monospace;
@@ -3065,4 +3213,479 @@ canvas.operation-content {
     background-position: -200% 0;
   }
 }
+
+/* 页面入场动画 */
+.page-fade-in {
+  animation: pageSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+@keyframes pageSlideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 分析容器滑入动画 */
+.slide-up-animation {
+  animation: slideUpFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+@keyframes slideUpFade {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Tab淡入动画 */
+.tab-fade-in {
+  animation: tabFadeIn 0.5s ease-out 0.4s forwards;
+  opacity: 0;
+}
+
+@keyframes tabFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+/* Tab切换动画 */
+.tab-item {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transform: scale(1);
+}
+
+.tab-item.active {
+  transform: scale(1.05);
+}
+
+.tab-item:active {
+  transform: scale(0.95);
+}
+
+/* 图表容器动画 */
+.chart-fade-in {
+  animation: chartFadeIn 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes chartFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chart-scale-in {
+  animation: chartScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+@keyframes chartScaleIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 数据卡片动画 */
+.card-slide-up {
+  animation: cardSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+@keyframes cardSlideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.data-card {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.data-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* 进度条动画 */
+.progress-fill {
+  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  width: 0;
+}
+
+.progress-delay-0 {
+  transition-delay: 0.8s;
+}
+
+.progress-delay-1 {
+  transition-delay: 0.9s;
+}
+
+.progress-delay-2 {
+  transition-delay: 1.0s;
+}
+
+.progress-delay-3 {
+  transition-delay: 1.1s;
+}
+
+.progress-delay-4 {
+  transition-delay: 1.2s;
+}
+
+/* 卡片交错动画 */
+.cards-stagger .data-card:nth-child(1) {
+  animation-delay: 0.1s;
+}
+
+.cards-stagger .data-card:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.cards-stagger .data-card:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.cards-stagger .data-card:nth-child(4) {
+  animation-delay: 0.4s;
+}
+
+.cards-stagger .data-card:nth-child(5) {
+  animation-delay: 0.5s;
+}
+
+/* 区域列表动画 */
+.list-fade-in {
+  animation: listFadeIn 0.6s ease-out 0.6s forwards;
+  opacity: 0;
+}
+
+@keyframes listFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+.region-card-slide {
+  animation: regionSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+@keyframes regionSlideUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 展开收起动画 */
+.expand-indicator {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.expand-indicator.expanded {
+  transform: rotate(180deg);
+}
+
+.service-sublist {
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.subservice-slide {
+  animation: subserviceSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+@keyframes subserviceSlideIn {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 卡片悬浮效果优化 */
+.region-card {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.region-card:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+
+.subservice-card {
+  transition: all 0.2s ease-out;
+}
+
+.subservice-card:active {
+  transform: translateX(5px);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* 车流分析动画效果 */
+.traffic-fade-in {
+  animation: trafficFadeIn 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes trafficFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+.traffic-header-slide {
+  animation: trafficHeaderSlide 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+@keyframes trafficHeaderSlide {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.traffic-icon-bounce {
+  animation: trafficIconBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
+  transform: scale(0.8);
+}
+
+@keyframes trafficIconBounce {
+  0% {
+    transform: scale(0.8);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.traffic-summary-fade {
+  animation: summaryFadeIn 0.5s ease-out 0.8s forwards;
+  opacity: 0;
+}
+
+@keyframes summaryFadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+.traffic-region-slide {
+  animation: regionSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+@keyframes regionSlideIn {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 区域卡片交互动画 */
+.region-header {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.region-header:active {
+  transform: scale(0.98);
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.region-arrow {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.region-arrow.collapsed {
+  transform: rotate(-90deg);
+}
+
+/* 服务区展开动画 */
+.service-areas-expand {
+  animation: serviceAreasExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  overflow: hidden;
+  max-height: 0;
+}
+
+@keyframes serviceAreasExpand {
+  to {
+    max-height: 1000px;
+  }
+}
+
+.service-item-slide {
+  animation: serviceItemSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+@keyframes serviceItemSlide {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.service-header-interactive {
+  transition: all 0.2s ease-out;
+}
+
+.service-header-interactive:active {
+  transform: scale(0.98);
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+/* 数值动画效果 */
+.flow-item-counter .flow-value {
+  animation: counterPulse 0.8s ease-out 1.5s forwards;
+  transform: scale(1);
+}
+
+/* 无车流数据提示样式 */
+.no-traffic-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 40rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+  margin: 20rpx;
+}
+
+.no-data-icon {
+  font-size: 48rpx;
+  margin-bottom: 16rpx;
+  opacity: 0.6;
+}
+
+.no-data-text {
+  font-size: 26rpx;
+  color: #6c757d;
+  text-align: center;
+}
+
+@keyframes counterPulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+    color: #1890ff;
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.expand-arrow {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.expand-arrow.expanded {
+  transform: rotate(180deg);
+}
+
+/* 方向数据展开动画 */
+.direction-expand-animation {
+  animation: directionExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  overflow: hidden;
+  max-height: 0;
+}
+
+@keyframes directionExpand {
+  to {
+    max-height: 500px;
+  }
+}
+
+.direction-item-slide {
+  animation: directionItemSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+@keyframes directionItemSlide {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.direction-percent-highlight {
+  animation: percentHighlight 1s ease-in-out 1s forwards;
+  position: relative;
+}
+
+@keyframes percentHighlight {
+
+  0%,
+  100% {
+    color: inherit;
+  }
+
+  50% {
+    color: #52c41a;
+    font-weight: bold;
+  }
+}
+
+/* 车型数据弹跳动画 */
+.vehicle-item-bounce {
+  animation: vehicleItemBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+  opacity: 0;
+  transform: scale(0.8) translateY(10px);
+}
+
+@keyframes vehicleItemBounce {
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.vehicle-count-pulse {
+  animation: vehicleCountPulse 2s ease-in-out infinite;
+}
+
+@keyframes vehicleCountPulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+    color: #1890ff;
+  }
+}
 </style>
diff --git a/pages/everdayRenven/AnhuiServerpart.vue b/pages/everdayRenven/AnhuiServerpart.vue
index 3371422..5ffbe13 100644
--- a/pages/everdayRenven/AnhuiServerpart.vue
+++ b/pages/everdayRenven/AnhuiServerpart.vue
@@ -1,7 +1,7 @@
 <template>
   <view :class="'province-theme-' + currentProvinceCode" scroll-with-animation v-if="showPage">
-    <view class="page-body">
-      <div class="box-card" :style="'opacity:' + (1 - opacity) + ';'">
+    <view class="page-body page-enter">
+      <div class="box-card card-enter" :style="'opacity:' + (1 - opacity) + ';'">
         <div class="box-top-title">
           <span class="box-center-title">{{ sMsg.serverpartname }}</span>
           <picker mode="date" @change="bindDateChange" :value="theRequest && theRequest.time" :start="startTime"
@@ -10,7 +10,7 @@
           </picker>
 
         </div>
-        <view class="top-card">
+        <view class="top-card data-card-enter">
           <div class="box-center-box">
             <div class="uni-flex ai-center jc-between" style="margin-bottom: 8rpx;">
               <div class="main-amount-title">对客营收(元)</div>
@@ -36,37 +36,37 @@
           </div>
           <div class="uni-flex jc-between box-center-box">
 
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>长款金额</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.diffMorePrice, 2) }} <text>元</text></div>
             </div>
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>短款金额</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.diffLessPrice, 2) }} <text>元</text></div>
             </div>
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>客单交易</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.ticketCount, 0) }} <text>笔</text></div>
             </div>
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>客单均价</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.tickave, 2) }} <text>元</text></div>
             </div>
           </div>
           <div class="uni-flex jc-between box-center-box mt8">
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>优惠金额</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.totalOffAmount, 2) }} <text>元</text></div>
             </div>
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>移动支付</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.mobilePayment, 2) }} <text>元</text></div>
             </div>
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>商品出售</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.totalCount, 0) }} <text>件</text></div>
             </div>
-            <div class="check-unit">
+            <div class="check-unit metric-enter">
               <text>商品均价</text>
               <div class="check-price-color">{{ $util.fmoney(sMsg.countave, 2) }} <text>元</text></div>
             </div>
@@ -82,11 +82,11 @@
 
       <template v-if="cateBrandList.length">
         <template v-if="theRequest.ProvinceCode == '340000'">
-          <view class="uni-flex ai-center analysis-tabs">
+          <view class="uni-flex ai-center analysis-tabs tabs-enter">
             <!-- <view @tap="changeTab(3)" class="tab" :class="{'active': nowTab==3}">经营模式</view> -->
-            <view @tap="changeTab(4)" class="tab" :class="{ 'active': nowTab == 4 }">车流分析</view>
-            <view @tap="changeTab(1)" class="tab" :class="{ 'active': nowTab == 1 }">经营分析</view>
-            <view @tap="changeTab(2)" class="tab" :class="{ 'active': nowTab == 2 }">客群分析</view>
+            <view @tap="changeTab(4)" class="tab tab-slide" :class="{ 'active': nowTab == 4 }">车流分析</view>
+            <view @tap="changeTab(1)" class="tab tab-slide" :class="{ 'active': nowTab == 1 }">经营分析</view>
+            <view @tap="changeTab(2)" class="tab tab-slide" :class="{ 'active': nowTab == 2 }">客群分析</view>
           </view>
 
           <!-- <view class="pie-content" v-show="nowTab==3">
@@ -98,54 +98,53 @@
 				</view> -->
         </template>
 
+        <!-- 经营分析内容 -->
         <view v-show="nowTab == 1">
           <!-- 安徽省 -->
           <div class="pie-content">
             <div class="model-busniess">经营业态占比</div>
-            <ServiceRevenuePie ref="serviceRevenuePie" v-if="ServiceRevenueData.length == 2 && nowTab == 1"
+            <ServiceRevenuePie ref="serviceRevenuePie" v-show="ServiceRevenueData && ServiceRevenueData.length >= 2"
               :data="ServiceRevenueData" @selectCate="selectCate" />
             <!-- 其余省份 -->
             <!-- <canvas v-else-if="sellData.length>0" canvas-id="sellCate" id="sellCate" class="operation-cate-content" @click="touchPie($event,'sellCate')"></canvas> -->
-            <div class="model-busniess">
+            <div class="model-busniess progress-section-enter">
               <div>经营模式占比</div>
               <div class="progress-content">
                 <div class="progress-left" :style="'width: ' + operationModel[0].bili + '%;'"></div>
                 <div class="progress-right" :style="'width: ' + operationModel[1].bili + '%;'"></div>
               </div>
               <div class="uni-flex jc-between">
-                <div style="color: #667ED5;font-size: 26rpx;">{{ operationModel[0].name }}: <span
-                    style="font-size: 26rpx;">{{
-                      operationModel[0].bili }}</span>%</div>
-                <div style="color: #F3AF50;font-size: 26rpx;" v-if="operationModel[1].name">{{ operationModel[1].name
-                  }}:
-                  <span style="font-size: 26rpx;">{{ operationModel[1].bili }}</span>%
+                <div style="color: #667ED5;">{{ operationModel[0].name }}: <span style="font-size: 32rpx;">{{
+                  operationModel[0].bili }}</span>%</div>
+                <div style="color: #F3AF50;" v-if="operationModel[1].name">{{ operationModel[1].name }}:
+                  <span style="font-size: 32rpx;">{{ operationModel[1].bili }}</span>%
                 </div>
               </div>
               <div class="uni-flex jc-between">
-                <div style="margin-bottom: 0;font-size: 24rpx;"><span style="font-size: 26rpx;">{{
-                  operationModel[0].data
-                    }}</span>元
+                <div style="margin-bottom: 0;"><span style="font-size: 32rpx;">{{ operationModel[0].data
+                }}</span>元
                 </div>
-                <div style="margin-bottom: 0;font-size: 24rpx;" v-if="operationModel[1].data"><span
-                    style="font-size: 26rpx;">{{
-                      operationModel[1].data
+                <div style="margin-bottom: 0;" v-if="operationModel[1].data"><span style="font-size: 32rpx;">{{
+                  operationModel[1].data
                     }}</span>元
                 </div>
               </div>
             </div>
           </div>
           <!-- 品牌列表 -->
-          <div class="shop-box">
-            <scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft">
-              <div v-for="(n, i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name"
-                :class="{ 'active': nowShop == i }" @click="selectCate(i)">{{ n.Bussiness_Name }}</div>
+          <div class="shop-box brand-list-enter">
+            <scroll-view scroll-x class="tab-shop tab-shop-slide" scroll-with-animation :scroll-left="scrollLeft">
+              <div v-for="(n, i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name brand-tab-stagger"
+                :class="{ 'active': nowShop == i }" @click="selectCate(i)"
+                :style="'animation-delay: ' + (i * 0.05) + 's'">{{
+                  n.Bussiness_Name }}</div>
             </scroll-view>
-            <div class="tab-content" v-if="cateBrandList.length">
-              <div class="shop-card" v-for="(m, i) in cateBrandList[nowShop].listBrandModel" :key="i"
-                @click="toBrandPage(m, i)">
-                <div>
-                  <image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image>
-                  <image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
+            <div class="tab-content brand-cards-container" v-if="cateBrandList.length">
+              <div class="shop-card brand-card-stagger" v-for="(m, i) in cateBrandList[nowShop].listBrandModel" :key="i"
+                @click="toBrandPage(m, i)" :style="'animation-delay: ' + (i * 0.08) + 's'">
+                <div class="brand-icon-wrapper">
+                  <image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit" class="brand-icon"></image>
+                  <image v-else src="/static/images/revenue/home.png" mode="aspectFit" class="brand-icon"></image>
                 </div>
                 <div class="shop-name">{{ m.Brand_Name }}</div>
                 <div class="price-num">¥ {{ m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount, 2) : '0.00' }}
@@ -155,10 +154,10 @@
           </div>
         </view>
 
-        <view class="" v-show="nowTab == 2">
+        <view class="tab-content-fade" v-show="nowTab == 2">
           <CustomerAnalysis ref="customerAna" :show="nowTab == 2" />
         </view>
-        <view class="" v-show="nowTab == 4">
+        <view class="tab-content-fade" v-show="nowTab == 4">
           <CarAnalysis ref="carAna" :show="nowTab == 4" />
         </view>
 
@@ -320,8 +319,7 @@ export default {
     let d = date.getDate() - 1
     if (d - 8 < 0) {
       let num = 8 - d
-      m = m - 1
-      let changeMonth = m
+      let changeMonth = m - 1
       if (changeMonth < 10) {
         changeMonth = '0' + changeMonth
       }
@@ -338,8 +336,13 @@ export default {
       day = d - 8
       startTime = `${y}-${m}-${day}`
     }
+    console.log('mmm', m);
+
     this.startTime = startTime
     this.endTime = `${y}-${m}-${d}`
+    console.log('this.startTimethis.startTime', this.startTime);
+    console.log('this.startTimethis.endTime', this.endTime);
+
 
 
   },
@@ -368,7 +371,6 @@ export default {
     changeTab(value) {
       this.nowTab = value
       if (value == 2) {
-
         let opt = this.theRequest
         const params = {
           serverpartId: opt.ServerpartIds,
@@ -480,8 +482,15 @@ export default {
       let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
       let list = []
       let list2 = []
+
+      // 检查数据有效性
+      if (!_this.pageData || !_this.pageData.listBusinessModel) {
+        console.warn('pageData 或 listBusinessModel 无效')
+        return
+      }
+
       _this.pageData.listBusinessModel.map((m, i) => {
-        if (m.Revenue_Amount != 0) {
+        if (m.Revenue_Amount && m.Revenue_Amount != 0) {
           let n = {
             name: m.Bussiness_Name,
             data: m.Revenue_Amount
@@ -506,24 +515,43 @@ export default {
         }
 
       })
-      if (list2.length > 0) {
-        _this.ServiceRevenueData.push(list2)
-        _this.sellData = list
 
+      // 构建完整的数据数组
+      let fullServiceRevenueData = []
+
+      // 添加第一层数据
+      if (list2.length > 0) {
+        fullServiceRevenueData.push(list2)
+        _this.sellData = list
+        console.log('第一层数据准备:', list2)
       }
+
+      // 添加第二层数据
       if (_this.pageData.listCurBusinessModel && _this.pageData.listCurBusinessModel.length > 0) {
-        let list = []
+        let list3 = []
         _this.pageData.listCurBusinessModel.map(m => {
-          if (m.Revenue_Amount != 0) {
+          if (m.Revenue_Amount && m.Revenue_Amount != 0) {
             let n = {
               name: m.Bussiness_Name,
               value: m.Revenue_Amount
             }
-            list.push(n)
+            list3.push(n)
           }
         })
-        _this.ServiceRevenueData.push(list)
+        if (list3.length > 0) {
+          fullServiceRevenueData.push(list3)
+          console.log('第二层数据准备:', list3)
+        }
       }
+
+      // 一次性设置完整数据，确保响应式更新
+      if (fullServiceRevenueData.length > 0) {
+        _this.$set(_this, 'ServiceRevenueData', fullServiceRevenueData)
+        console.log('operationFn设置完整数据:', fullServiceRevenueData)
+      }
+
+      console.log('最终 ServiceRevenueData:', _this.ServiceRevenueData)
+
       if (list.length > 0) {
         _this.showPie({
           id: 'sellCate',
@@ -670,7 +698,7 @@ export default {
         _this.pageData = res.Result_Data
         if (res.Result_Data.listBusinessModel) {
           let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
-          console.log('list', list)
+          console.log('获取到业务数据:', list)
           if (list.length > 0) {
             let all = {
               Bussiness_Name: '全部',
@@ -687,12 +715,18 @@ export default {
               }
             })
             _this.cateBrandList = [all, ...list]
-            _this.operationFn()
+
+            // 确保在数据设置后调用 operationFn
+            _this.$nextTick(() => {
+              _this.operationFn()
+            })
             return
           }
           return
         }
+        // 没有数据时清空相关数据
         _this.cateBrandList = []
+        _this.$set(_this, 'ServiceRevenueData', [])
       })
     },
     // 获取头部卡片 展示信息
@@ -727,8 +761,11 @@ export default {
         colors: colors1,
       });
       // 经营业态
-      // this.ServiceRevenueData = []
-      this.ServiceRevenueData = [busniessTradeFathPie, busniessTradePie]
+      if (busniessTradeFathPie && busniessTradeFathPie.length > 0 && busniessTradePie && busniessTradePie.length > 0) {
+        this.$set(this, 'ServiceRevenueData', [busniessTradeFathPie, busniessTradePie])
+      } else {
+        this.$set(this, 'ServiceRevenueData', [])
+      }
       if (totalData.uploadCount !== totalData.totalUploadCount) {
         this.getUnUpLoadShops(theRequest)
 
@@ -1476,7 +1513,6 @@ cover-view.page-title {
   padding: 8rpx 24rpx;
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border-radius: 12rpx;
-  font-size: 28rpx;
   border: 1rpx solid #f0f0f0;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
@@ -1507,4 +1543,370 @@ cover-view.page-title {
   background: linear-gradient(90deg, #ff9f43, #ffb84d);
   border-radius: 0 6rpx 6rpx 0;
 }
+
+/* 动画效果 - UniApp微信小程序兼容版本 */
+
+/* 页面入场动画 */
+@keyframes pageEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(50rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.page-enter {
+  animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* 卡片入场动画 */
+@keyframes cardEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(30rpx) scale(0.95);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.card-enter {
+  animation: cardEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
+  opacity: 0;
+}
+
+/* 数据卡片动画 */
+@keyframes dataCardEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.data-card-enter {
+  animation: dataCardEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
+  opacity: 0;
+}
+
+/* 指标动画 */
+@keyframes metricEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(15rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.metric-enter:nth-child(1) {
+  animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
+  opacity: 0;
+}
+
+.metric-enter:nth-child(2) {
+  animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
+  opacity: 0;
+}
+
+.metric-enter:nth-child(3) {
+  animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+  opacity: 0;
+}
+
+.metric-enter:nth-child(4) {
+  animation: metricEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
+  opacity: 0;
+}
+
+/* Tab标签页动画 */
+@keyframes tabsEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tabs-enter {
+  animation: tabsEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
+  opacity: 0;
+}
+
+@keyframes tabSlide {
+  0% {
+    opacity: 0;
+    transform: translateX(-20rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.tab-slide:nth-child(1) {
+  animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+  opacity: 0;
+}
+
+.tab-slide:nth-child(2) {
+  animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
+  opacity: 0;
+}
+
+.tab-slide:nth-child(3) {
+  animation: tabSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
+  opacity: 0;
+}
+
+/* Tab内容淡入动画 */
+@keyframes tabContentFade {
+  0% {
+    opacity: 0;
+    transform: translateY(10rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tab-content-fade {
+  animation: tabContentFade 0.4s ease-out forwards;
+}
+
+/* 图表容器动画 */
+@keyframes chartContainerEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(30rpx) scale(0.98);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.chart-container-enter {
+  animation: chartContainerEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
+  opacity: 0;
+}
+
+/* 标题滑入动画 */
+@keyframes titleSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-30rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.title-slide-in {
+  animation: titleSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
+  opacity: 0;
+}
+
+/* 进度条区域动画 */
+@keyframes progressSectionEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.progress-section-enter {
+  animation: progressSectionEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
+  opacity: 0;
+}
+
+/* 品牌列表动画 */
+@keyframes brandListEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(25rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.brand-list-enter {
+  animation: brandListEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s forwards;
+  opacity: 0;
+}
+
+/* 品牌卡片错列动画 */
+@keyframes brandCardStagger {
+  0% {
+    opacity: 0;
+    transform: translateY(20rpx) scale(0.95);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.brand-card-stagger {
+  animation: brandCardStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
+  opacity: 0;
+}
+
+/* 交互反馈动画 */
+.tab-slide:active,
+.brand-card-stagger:active {
+  transform: scale(0.98);
+  transition: transform 0.1s ease-out;
+}
+
+/* 图表加载状态 */
+.chart-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300rpx;
+  color: #999;
+  font-size: 28rpx;
+}
+
+/* 品牌标签页动画 */
+@keyframes tabShopSlide {
+  0% {
+    opacity: 0;
+    transform: translateY(15rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tab-shop-slide {
+  animation: tabShopSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s forwards;
+  opacity: 0;
+}
+
+/* 品牌标签错列动画 */
+@keyframes brandTabStagger {
+  0% {
+    opacity: 0;
+    transform: translateX(-15rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.brand-tab-stagger {
+  animation: brandTabStagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
+  opacity: 0;
+}
+
+/* 品牌卡片容器动画 */
+@keyframes brandCardsContainer {
+  0% {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.brand-cards-container {
+  animation: brandCardsContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s forwards;
+  opacity: 0;
+}
+
+/* 品牌图标包装器动画 */
+@keyframes brandIconWrapper {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) rotate(-5deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+.brand-icon-wrapper {
+  animation: brandIconWrapper 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  animation-delay: inherit;
+}
+
+.brand-icon {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 品牌卡片悬浮效果增强 */
+.brand-card-stagger:active .brand-icon-wrapper {
+  transform: scale(0.9) rotate(2deg);
+}
+
+.brand-card-stagger:active .shop-name {
+  transform: translateY(2rpx);
+}
+
+.brand-card-stagger:active .price-num {
+  transform: scale(1.05);
+}
+
+/* 品牌标签活跃状态动画 */
+.brand-tab-stagger.active {
+  animation: brandTabStagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
+    tabActivePulse 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
+}
+
+@keyframes tabActivePulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
 </style>
diff --git a/pages/everdayRenven/components/RankContent.vue b/pages/everdayRenven/components/RankContent.vue
index ef6b81a..6bb0774 100644
--- a/pages/everdayRenven/components/RankContent.vue
+++ b/pages/everdayRenven/components/RankContent.vue
@@ -6,11 +6,11 @@
 				<view class="tab-icon">🏪</view>
 				<text class="tab-text">商超</text>
 			</view>
-			<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
+			<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
 				<view class="tab-icon">🍽️</view>
 				<text class="tab-text">餐饮</text>
 			</view>
-			<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
+			<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
 				<view class="tab-icon">🍿</view>
 				<text class="tab-text">小吃</text>
 			</view>
@@ -85,7 +85,7 @@ export default {
 /* 现代化选项卡 */
 .ranking-tabs {
 	display: flex;
-	background: #fff;
+	background: #f8f9fa;
 	border-radius: 12rpx;
 	padding: 6rpx;
 	margin: 0 20rpx 24rpx;
@@ -105,12 +105,12 @@ export default {
 	cursor: pointer;
 
 	&.active {
-		background: linear-gradient(135deg, #27B25F, #4CCC7F);
-		box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3);
+		background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
+		box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
 		transform: translateY(-2rpx);
 
 		.tab-text {
-			color: #fff;
+			color: #fff !important;
 			font-weight: 600;
 		}
 
@@ -260,7 +260,7 @@ export default {
 }
 
 .item-name {
-	font-size: 24rpx;
+	font-size: 28rpx;
 	color: #333;
 	font-weight: 600;
 	margin-bottom: 12rpx;
@@ -338,7 +338,8 @@ export default {
 
 /* 主题色支持 - 通过全局主题类控制 */
 :global(.province-theme-330200) .tab-item.active {
-	background: linear-gradient(135deg, #1890FF, #69C0FF);
+	background: linear-gradient(135deg, #1890FF, #69C0FF) !important;
+	box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #1890FF;
@@ -346,7 +347,8 @@ export default {
 }
 
 :global(.province-theme-340000) .tab-item.active {
-	background: linear-gradient(135deg, #748ED6, #91A7E3);
+	background: linear-gradient(135deg, #748ED6, #91A7E3) !important;
+	box-shadow: 0 4rpx 12rpx rgba(116, 142, 214, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #748ED6;
@@ -354,7 +356,8 @@ export default {
 }
 
 :global(.province-theme-500000) .tab-item.active {
-	background: linear-gradient(135deg, #FA541C, #FF7A45);
+	background: linear-gradient(135deg, #FA541C, #FF7A45) !important;
+	box-shadow: 0 4rpx 12rpx rgba(250, 84, 28, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #FA541C;
@@ -362,7 +365,8 @@ export default {
 }
 
 :global(.province-theme-510000) .tab-item.active {
-	background: linear-gradient(135deg, #FA8C16, #FFA940);
+	background: linear-gradient(135deg, #FA8C16, #FFA940) !important;
+	box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #FA8C16;
@@ -370,7 +374,8 @@ export default {
 }
 
 :global(.province-theme-520000) .tab-item.active {
-	background: linear-gradient(135deg, #52C41A, #73D13D);
+	background: linear-gradient(135deg, #52C41A, #73D13D) !important;
+	box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #52C41A;
@@ -378,7 +383,8 @@ export default {
 }
 
 :global(.province-theme-530000) .tab-item.active {
-	background: linear-gradient(135deg, #27B25F, #4CCC7F);
+	background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
+	box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #27B25F;
@@ -386,7 +392,8 @@ export default {
 }
 
 :global(.province-theme-630000) .tab-item.active {
-	background: linear-gradient(135deg, #13C2C2, #36CFC9);
+	background: linear-gradient(135deg, #13C2C2, #36CFC9) !important;
+	box-shadow: 0 4rpx 12rpx rgba(19, 194, 194, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #13C2C2;
@@ -394,7 +401,8 @@ export default {
 }
 
 :global(.province-theme-734100) .tab-item.active {
-	background: linear-gradient(135deg, #E91E63, #F06292);
+	background: linear-gradient(135deg, #E91E63, #F06292) !important;
+	box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3) !important;
 
 	.stat-value.sales-amount {
 		color: #E91E63;
diff --git a/pages/everdayRenven/components/listUnit.vue b/pages/everdayRenven/components/listUnit.vue
index 4d80b67..ca0049d 100644
--- a/pages/everdayRenven/components/listUnit.vue
+++ b/pages/everdayRenven/components/listUnit.vue
@@ -1,11 +1,12 @@
 <template>
 	<div>
-		<div class="analysis-cell" @tap="toggleShow" :class="{ 'active': item.show }" :style="activeCellStyleStr">
-			<div class="shop-title" :class="'theme-' + provinceCode">
+		<div class="analysis-cell cell-enter" @tap="toggleShow" :class="{ 'active': item.show }"
+			:style="activeCellStyleStr">
+			<div class="shop-title title-slide" :class="'theme-' + provinceCode">
 				<span> {{ (i > 8 ? i + 1 : '0' + (i + 1)) + ' ' + item.SHOPNAME }}</span>
 				<p>
 					<span v-show="item.UNACCOUNT_SIGN">￥</span>
-					<span class="cell-price" :style="priceStyleStr">{{
+					<span class="cell-price price-highlight" :style="priceStyleStr">{{
 						item.UNACCOUNT_SIGN
 							? $util.fmoney(item.CASHPAY_TOTAL, 2) : '无结账信息' }}</span>
 					<image src="/static/images/effective/true.png" mode="aspectFit" class="" v-if='item.SHOWDEAL_SIGN'>
@@ -14,11 +15,11 @@
 
 				</p>
 			</div>
-			<p v-if="item.detail.length > 0" style="line-height: 1.2;">
+			<p v-if="item.detail.length > 0" style="line-height: 1.2;" class="tags-container">
 				<span v-for="(child, index) in item.detail" :key="index" class="atribute-tag">{{ child }} </span>
 			</p>
 		</div>
-		<div class="analysis-detail" v-show="item.show">
+		<div class="analysis-detail" v-if="item.show">
 			<div class="detail-unit" v-for="(unit, o) in item.ShopEndAccountList" :key="o">
 				<div class="uni-inline-flex">
 					<span class="detail-title">结账时间：</span>
@@ -31,24 +32,23 @@
 				</div>
 				<block v-if="unit.DESCRIPTION_DATE">
 
-					<div class="detail-title">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
-					<p><span class="detail-title">{{ unit.DESCRIPTION_STAFF }}：</span><span style="font-size: 24rpx;">{{
+					<div class="detail-title" style="font-size: 24rpx;">日结校验：{{ unit.DESCRIPTION_DATE }}</div>
+					<p><span class="detail-title" style="font-size: 24rpx;">{{ unit.DESCRIPTION_STAFF }}：</span><span>{{
 						unit.DIFFERENCE_REASON
-					}}</span>
+							}}</span>
 					</p>
 				</block>
 				<block v-if="unit.APPROVE_DATE">
-					<div><span class="detail-title">日结审核：{{ unit.APPROVE_DATE }}</span></div>
-					<p><span class="detail-title" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span
-							style="font-size: 24rpx;">{{
-								unit.APPROVED_INFO }}</span>
+					<div><span class="detail-title" style="font-size: 24rpx;">日结审核：{{ unit.APPROVE_DATE }}</span></div>
+					<p><span class="detail-title" style="font-size: 24rpx;">{{ unit.APPROVE_STAFF }}：</span><span>{{
+						unit.APPROVED_INFO }}</span>
 					</p>
 				</block>
 				<div>
-					<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE">单品报表：<text
-							class="uni-icon uni-icon-checkmarkempty"></text></p>
-					<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE">香烟数据：<span
-							class="uni-icon uni-icon-checkmarkempty"></span></p>
+					<p class="detail-short-info" v-show="unit.FACTAMOUNT_SALE" style="font-size: 24rpx;"> 单品报表：<text
+							class="uni-icon uni-icon-checkmarkempty" style="font-size: 24rpx;"></text></p>
+					<p class="detail-short-info" v-show="unit.FACTAMOUNT_CIGARETTE" style="font-size: 24rpx;">香烟数据：<span
+							class="uni-icon uni-icon-checkmarkempty" style="font-size: 24rpx;"></span></p>
 				</div>
 				<div><span class="detail-title detail-short-info" style="font-size: 24rpx;">稽核次数：{{ unit.CHECK_COUNT }}
 						次</span><span class="detail-short-info" style="font-size: 24rpx;">长短款额：{{
@@ -128,7 +128,7 @@ export default {
 
 		// 动态样式字符串（小程序兼容）
 		activeCellStyleStr() {
-			if (!this.item.show) return ''
+			if (!this.item || !this.item.show) return ''
 			return `border: 2rpx solid ${this.themeColors.primary}; box-shadow: 0 4px 20px rgba(${this.hexToRgb(this.themeColors.primary)}, 0.15);`
 		},
 
@@ -376,4 +376,159 @@ export default {
 		font-size: 28rpx;
 	}
 }
+
+/* 动画效果 - listUnit组件 */
+
+/* 单元格入场动画 */
+@keyframes cellEnter {
+	0% {
+		opacity: 0;
+		transform: translateY(20rpx) scale(0.95);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.cell-enter {
+	animation: cellEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+	opacity: 0;
+}
+
+/* 标题滑入动画 */
+@keyframes titleSlide {
+	0% {
+		opacity: 0;
+		transform: translateX(-15rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.title-slide {
+	animation: titleSlide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
+	opacity: 0;
+}
+
+/* 价格高亮动画 */
+@keyframes priceHighlight {
+	0% {
+		opacity: 0;
+		transform: scale(0.8);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.price-highlight {
+	animation: priceHighlight 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s forwards;
+	opacity: 0;
+}
+
+/* 标签容器动画 */
+@keyframes tagsContainer {
+	0% {
+		opacity: 0;
+		transform: translateY(10rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.tags-container {
+	animation: tagsContainer 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
+	opacity: 0;
+}
+
+/* 标签弹跳动画 */
+@keyframes tagBounce {
+	0% {
+		opacity: 0;
+		transform: translateY(-10rpx) scale(0.8);
+	}
+
+	60% {
+		transform: translateY(2rpx) scale(1.05);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.tag-bounce {
+	animation: tagBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+	opacity: 0;
+}
+
+/* 详情展开动画 */
+@keyframes detailExpand {
+	0% {
+		opacity: 0;
+		max-height: 0;
+		transform: translateY(-20rpx);
+	}
+
+	100% {
+		opacity: 1;
+		max-height: 2000rpx;
+		transform: translateY(0);
+	}
+}
+
+.detail-expand {
+	animation: detailExpand 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+	overflow: hidden;
+}
+
+/* 详情单元淡入动画 */
+@keyframes unitFadeIn {
+	0% {
+		opacity: 0;
+		transform: translateY(15rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.unit-fade-in {
+	animation: unitFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+	opacity: 0;
+}
+
+/* 交互反馈动画 */
+.cell-enter:active {
+	transform: scale(0.98);
+	transition: transform 0.1s ease-out;
+}
+
+.tag-bounce:hover {
+	transform: translateY(-2rpx) scale(1.02);
+	transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 单元格活跃状态增强 */
+.analysis-cell.active {
+	transform: translateY(-2rpx);
+	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
 </style>
diff --git a/pages/everdayRenven/serviceDetail.vue b/pages/everdayRenven/serviceDetail.vue
index 0062cd6..bb093c1 100644
--- a/pages/everdayRenven/serviceDetail.vue
+++ b/pages/everdayRenven/serviceDetail.vue
@@ -1,25 +1,21 @@
 <template>
 	<div :class="'province-theme-' + currentProvinceCode" v-if="showPage">
-		<div class="page-body">
+		<div class="page-body page-enter">
 
-			<div class="service-brand-box">
-				<div class="uni-flex align-center">
-
-					<image v-if="pageMsg.Brand_ICO" :src="pageMsg.Brand_ICO" mode="aspectFit"></image>
-					<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
-
-
-					<!-- <div class="band-name">{{ pageMsg.Brand_Name }}</div> -->
-					<div class="band-name">{{ pageMsg.ShopEndaccountList && pageMsg.ShopEndaccountList.length > 0 ?
+			<div class="service-brand-box brand-header-enter">
+				<div class="uni-flex align-center brand-info-slide">
+					<div class="band-name brand-name-slide">{{ pageMsg.ShopEndaccountList &&
+						pageMsg.ShopEndaccountList.length > 0 ?
 						pageMsg.ShopEndaccountList[0].SERVERPART_NAME : "" }}</div>
 				</div>
-				<div class="price-num">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount, 2) : '0.00' }}
-				</div>
+				<div class="price-num price-count-up">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount,
+					2) : '0.00' }}</div>
 			</div>
 			<!--服务区门店分析-->
-			<div style="margin-top: 0 20rpx;padding: 0 16rpx">
+			<div style="margin-top: 0 20rpx;padding: 0 16rpx" class="shop-list-container">
 				<shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow"
-					:i='i' :provinceCode='currentProvinceCode'></shopCell>
+					:i='i' :provinceCode='currentProvinceCode' class="shop-item-stagger"
+					:style="'animation-delay: ' + (i * 0.1 + 0.8) + 's'" v-if="item"></shopCell>
 
 			</div>
 		</div>
@@ -33,7 +29,9 @@ export default {
 		return {
 			showPage: false,
 
-			pageMsg: {},
+			pageMsg: {
+				ShopEndaccountList: [] // 初始化为空数组，确保响应式
+			},
 			currentProvinceCode: '', // 当前省份代码
 			keyJson: {
 				SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
@@ -120,10 +118,18 @@ export default {
 			return this.provinceTheme
 		},
 		toggleShow(i) {
+			if (!this.pageMsg.ShopEndaccountList || !this.pageMsg.ShopEndaccountList[i]) {
+				return
+			}
 
-			let item = this.pageMsg.ShopEndaccountList[i]
-			item.show = !item.show
-			this.$forceUpdate()
+			let currentItem = this.pageMsg.ShopEndaccountList[i]
+			let newShowState = !currentItem.show
+
+			// 使用Vue.set确保响应式更新
+			this.$set(this.pageMsg.ShopEndaccountList, i, {
+				...currentItem,
+				show: newShowState
+			})
 		},
 
 
@@ -148,12 +154,16 @@ export default {
 			}).then(res => {
 				uni.hideLoading()
 				if (res.Result_Code != 100) return
-				res.Result_Data.ShopEndaccountList.map(n => {
-					n.show = true
-					n.detail = this.getDetail(n)
+
+				// 处理数据，确保响应式属性正确设置
+				res.Result_Data.ShopEndaccountList.forEach((n, index) => {
+					// 使用Vue.set确保响应式
+					_this.$set(n, 'show', false)
+					_this.$set(n, 'detail', _this.getDetail(n))
 				})
-				_this.pageMsg = res.Result_Data
-				console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
+
+				// 设置页面数据
+				_this.$set(_this, 'pageMsg', res.Result_Data)
 
 				_this.showPage = true
 			})
@@ -169,13 +179,20 @@ export default {
 			}).then(res => {
 				uni.hideLoading()
 				if (res.Result_Code != 100) return
-				res.Result_Data.listBrandShopModel.map(n => {
-					n.show = true
-					n.detail = this.getDetail(n)
+
+				// 处理品牌门店数据，确保响应式属性正确设置
+				res.Result_Data.listBrandShopModel.forEach((n, index) => {
+					// 使用Vue.set确保响应式
+					_this.$set(n, 'show', false)
+					_this.$set(n, 'detail', _this.getDetail(n))
 				})
+
+				// 设置数据结构
 				res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
-				_this.pageMsg = res.Result_Data
-				console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
+
+				// 设置页面数据
+				_this.$set(_this, 'pageMsg', res.Result_Data)
+
 				_this.showPage = true
 			})
 		},
@@ -318,11 +335,171 @@ export default {
 
 .price-num {
 	color: #fff;
-	font-size: 28rpx;
+	font-size: 32rpx;
 	font-weight: 700;
 	font-family: 'PingFang SC', sans-serif;
 	position: relative;
 	z-index: 2;
 	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
+
+/* 动画效果 - UniApp微信小程序兼容版本 */
+
+/* 页面入场动画 */
+@keyframes pageEnter {
+	0% {
+		opacity: 0;
+		transform: translateY(30rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.page-enter {
+	animation: pageEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* 品牌头部动画 */
+@keyframes brandHeaderEnter {
+	0% {
+		opacity: 0;
+		transform: translateY(-30rpx) scale(0.95);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.brand-header-enter {
+	animation: brandHeaderEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
+	opacity: 0;
+}
+
+/* 品牌信息滑入动画 */
+@keyframes brandInfoSlide {
+	0% {
+		opacity: 0;
+		transform: translateX(-20rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.brand-info-slide {
+	animation: brandInfoSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards;
+	opacity: 0;
+}
+
+/* 品牌图标弹跳动画 */
+@keyframes brandIconBounce {
+	0% {
+		opacity: 0;
+		transform: scale(0.3) rotate(-10deg);
+	}
+
+	50% {
+		transform: scale(1.1) rotate(5deg);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1) rotate(0deg);
+	}
+}
+
+.brand-icon-bounce {
+	animation: brandIconBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.6s forwards;
+	opacity: 0;
+}
+
+/* 品牌名称滑入动画 */
+@keyframes brandNameSlide {
+	0% {
+		opacity: 0;
+		transform: translateX(-15rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+.brand-name-slide {
+	animation: brandNameSlide 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
+	opacity: 0;
+}
+
+/* 价格数字计数动画 */
+@keyframes priceCountUp {
+	0% {
+		opacity: 0;
+		transform: translateY(10rpx) scale(0.8);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+.price-count-up {
+	animation: priceCountUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
+	opacity: 0;
+}
+
+/* 门店列表容器动画 */
+@keyframes shopListContainer {
+	0% {
+		opacity: 0;
+		transform: translateY(30rpx);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.shop-list-container {
+	animation: shopListContainer 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
+	opacity: 0;
+}
+
+/* 门店项目错列动画 */
+@keyframes shopItemStagger {
+	0% {
+		opacity: 0;
+		transform: translateX(-30rpx) scale(0.95);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0) scale(1);
+	}
+}
+
+.shop-item-stagger {
+	animation: shopItemStagger 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+	opacity: 0;
+}
+
+/* 交互反馈动画 */
+.brand-header-enter:active {
+	transform: scale(0.98);
+	transition: transform 0.1s ease-out;
+}
+
+.brand-icon-bounce:active {
+	transform: scale(0.9) rotate(5deg);
+	transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
 </style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 355f197..7eb03ce 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -12,7 +12,7 @@
     </menuModel>
     <!-- 	<view class="home-model">
 			<div class="model-title">
-				<text class="text">综合办公</text>
+				<text class="text">综合办公</text> 
 			</div>
 			<div class="model-content">
 				<menuItem v-for="item in modelMenu.zhbg"