From 2e75870f32126da5d650ad25d65746ce117850d2 Mon Sep 17 00:00:00 2001
From: ylj20011123 <YLJ>
Date: Thu, 13 Nov 2025 09:09:37 +0800
Subject: [PATCH] update

---
 .../components/TrendOfTrafficFlow.vue         |   2 +-
 pages/DigitalIntelligenceDashboard/index.vue  | 243 +++++++++---------
 2 files changed, 127 insertions(+), 118 deletions(-)

diff --git a/pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue b/pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue
index ab19207..81ad9ee 100644
--- a/pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue
+++ b/pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue
@@ -5,7 +5,7 @@
       <text class="chart-title">断面流量</text>
       <!-- AI分析按钮 -->
       <view class="ai-analysis-wrapper">
-        <AIAnalysis :chartInfo="chartInfo" @disableScroll="handleDisableScroll" @enableScroll="handleEnableScroll" />
+        <!-- <AIAnalysis :chartInfo="chartInfo" @disableScroll="handleDisableScroll" @enableScroll="handleEnableScroll" /> -->
       </view>
     </view>
     <!-- 断面流量趋势图 -->
diff --git a/pages/DigitalIntelligenceDashboard/index.vue b/pages/DigitalIntelligenceDashboard/index.vue
index 639ee8e..440f047 100644
--- a/pages/DigitalIntelligenceDashboard/index.vue
+++ b/pages/DigitalIntelligenceDashboard/index.vue
@@ -1,7 +1,6 @@
 <template>
     <page-meta :page-style="pageStyle"></page-meta>
-    <scroll-view scroll-y @scroll="handleScroll" class="digital-dashboard" :scroll-into-view="scrollIntoView"
-        :scroll-with-animation="true" :scroll-y="allowScroll">
+    <view class="digital-dashboard">
         <!-- Tab切换区域 -->
         <scroll-view scroll-x class="tab-container" :scroll-with-animation="true" :scroll-left="tabScrollPosition"
             show-scrollbar="false">
@@ -34,132 +33,111 @@
             </view>
         </view>
 
+        <swiper class="tab-swiper" :current="activeTab" @change="handleSwiperChange">
+            <swiper-item v-for="(tab, index) in tabList" :key="tab.key">
+                <scroll-view class="tab-scroll-view" scroll-y @scroll="handleScroll"
+                    :scroll-into-view="scrollIntoViewMap[tab.key]" :scroll-with-animation="true"
+                    :scroll-y="allowScroll">
+                    <view :id="`top-${tab.key}`"></view>
+                    <view class="content-container">
+                        <!-- 时间选择 -->
+                        <view class="timeBox">
+                            <picker mode="date" @change="bindDateChange" :value="selectTime" fields="month">
+                                统计时间：{{ selectTime }} ▼
+                            </picker>
+                        </view>
 
+                        <!-- 实时运营监控中心 -->
+                        <view v-if="tab.key === 'business'" class="tab-content">
+                            <view id="overview-of-serviceArea" class="section-anchor"></view>
+                            <OverviewOfServiceArea />
 
+                            <view id="trading-alert" class="section-anchor"></view>
+                            <TradingAlert />
 
-        <view id="top"> </view>
-        <!-- 内容展示区域 -->
-        <view class="content-container">
-            <!-- 时间选择 -->
-            <view class="timeBox">
-                <picker mode="date" @change="bindDateChange" :value="selectTime" fields="month">
-                    统计时间：{{ selectTime }} ▼
-                </picker>
-            </view>
-            <!-- 实时运营监控中心 -->
-            <view v-if="activeTab === 0" class="tab-content">
-                <!-- 服务区概况 -->
-                <view id="overview-of-serviceArea"></view>
-                <OverviewOfServiceArea />
+                            <view id="trend-of-trafficFlow" class="section-anchor"></view>
+                            <TrendOfTrafficFlow :selectTime="selectTime" />
 
-                <!-- 交易预警 -->
-                <view id="trading-alert"></view>
-                <TradingAlert />
+                            <view id="vehicles-entering" class="section-anchor"></view>
+                            <VehiclesEntering :selectTime="selectTime" />
 
-                <!-- 断面流量 -->
-                <view id="trend-of-trafficFlow"></view>
-                <TrendOfTrafficFlow :selectTime="selectTime" />
+                            <view id="vehicle-model-stay" class="section-anchor"></view>
+                            <VehicleModelStay :selectTime="selectTime" />
+                        </view>
 
-                <!-- 入区车流 -->
-                <view id="vehicles-entering"></view>
-                <VehiclesEntering :selectTime="selectTime" />
+                        <!-- 客群画像与消费行为分析 -->
+                        <view v-else-if="tab.key === 'customerProfile'" class="tab-content">
+                            <view id="customer-age-group" class="section-anchor"></view>
+                            <CustomerAgeGroup :selectTime="selectTime" />
 
-                <!-- 经营效益 -->
-                <view id="vehicle-model-stay"></view>
-                <VehicleModelStay :selectTime="selectTime" />
-            </view>
+                            <view id="gender-customer-group" class="section-anchor"></view>
+                            <GenderCustomerGroup :selectTime="selectTime" />
 
-            <!-- 客群画像与消费行为分析 -->
-            <view v-if="activeTab === 1" class="tab-content">
-                <!-- 年龄画像 -->
-                <view id="customer-age-group"></view>
-                <CustomerAgeGroup :selectTime="selectTime" />
+                            <view id="preference-type" class="section-anchor"></view>
+                            <PreferenceType :selectTime="selectTime" />
 
-                <!-- 性别画像 -->
-                <view id="gender-customer-group"></view>
-                <GenderCustomerGroup :selectTime="selectTime" />
+                            <view id="customer-group" class="section-anchor"></view>
+                            <CustomerGroup :selectTime="selectTime" />
 
-                <!-- 偏好类型 -->
-                <view id="preference-type"></view>
-                <PreferenceType :selectTime="selectTime" />
+                            <view id="customer-consumption-preferences" class="section-anchor"></view>
+                            <CustomerConsumptionPreferences :selectTime="selectTime" />
 
-                <!-- 客群特征分析 -->
-                <view id="customer-group"></view>
-                <CustomerGroup :selectTime="selectTime" />
+                            <view id="consumption-conversion" class="section-anchor"></view>
+                            <ConsumptionConversion :selectTime="selectTime" />
 
-                <!-- 客群消费偏好 -->
-                <view id="customer-consumption-preferences"></view>
-                <CustomerConsumptionPreferences :selectTime="selectTime" />
+                            <view id="consumption-level" class="section-anchor"></view>
+                            <ConsumptionLevel :selectTime="selectTime" />
 
-                <!-- 消费转化率对比图 -->
-                <view id="consumption-conversion"></view>
-                <ConsumptionConversion :selectTime="selectTime" />
+                            <view id="consumption-period" class="section-anchor"></view>
+                            <ConsumptionPeriod :selectTime="selectTime" />
 
-                <!-- 消费水平 -->
-                <view id="consumption-level"></view>
-                <ConsumptionLevel :selectTime="selectTime" />
+                            <view id="brand-consumption-level" class="section-anchor"></view>
+                            <BrandConsumptionLevel :selectTime="selectTime" />
+                        </view>
 
-                <!-- 消费时段分析 -->
-                <view id="consumption-period"></view>
-                <ConsumptionPeriod :selectTime="selectTime" />
+                        <!-- 多维度经营数据分析 -->
+                        <view v-else-if="tab.key === 'businessRevenue'" class="tab-content">
+                            <view id="business-case" class="section-anchor"></view>
+                            <BusinessCase :selectTime="selectTime" />
 
-                <!-- 品牌消费水平 -->
-                <view id="brand-consumption-level"></view>
-                <BrandConsumptionLevel :selectTime="selectTime" />
-            </view>
+                            <view id="regional-revenue" class="section-anchor"></view>
+                            <RegionalRevenue :selectTime="selectTime" />
 
-            <!-- 多维度经营数据分析 -->
-            <view v-if="activeTab === 2" class="tab-content">
-                <!-- 营收特征 -->
-                <view id="business-case"></view>
-                <BusinessCase :selectTime="selectTime" />
+                            <view id="business-structure" class="section-anchor"></view>
+                            <BusinessStructure :selectTime="selectTime" />
 
-                <!-- 区域营收占比 -->
-                <view id="regional-revenue"></view>
-                <RegionalRevenue :selectTime="selectTime" />
+                            <view id="festival-revenue-sum-info" class="section-anchor"></view>
+                            <FestivalRevenueSumInfo />
+                        </view>
 
-                <!-- 业态结构占比 -->
-                <view id="business-structure"></view>
-                <BusinessStructure :selectTime="selectTime" />
+                        <!-- 商户电商生态全景 -->
+                        <view v-else-if="tab.key === 'mallOperation'" class="tab-content">
+                            <view id="member-mall" class="section-anchor"></view>
+                            <MemberMall :selectTime="selectTime" />
 
-                <!-- 节假日营收 -->
-                <view id="festival-revenue-sum-info"></view>
-                <FestivalRevenueSumInfo />
+                            <view id="hot-product-list" class="section-anchor"></view>
+                            <HotProductList />
 
-            </view>
+                            <view id="brand-detail" class="section-anchor"></view>
+                            <BrandDetail />
 
-            <!-- 商户电商生态全景 -->
-            <view v-if="activeTab === 3" class="tab-content">
-                <!-- 会员商城 -->
-                <view id="member-mall"></view>
-                <MemberMall :selectTime="selectTime" />
+                            <view id="supplier-list-box" class="section-anchor"></view>
+                            <SupplierListBox :selectTime="selectTime" />
 
-                <!-- 热门商品榜单 -->
-                <view id="hot-product-list"></view>
-                <HotProductList />
+                            <view id="mall-order-statistics" class="section-anchor"></view>
+                            <MallOrderStatistics :selectTime="selectTime" />
 
-                <!-- 商户类别 -->
-                <view id="brand-detail"></view>
-                <BrandDetail />
+                            <view id="this-month-benefits" class="section-anchor"></view>
+                            <ThisMonthBenefits :selectTime="selectTime" />
 
-                <!-- 供应商列表 -->
-                <view id="supplier-list-box"></view>
-                <SupplierListBox :selectTime="selectTime" />
-
-                <!-- 商城订单统计 -->
-                <view id="mall-order-statistics"></view>
-                <MallOrderStatistics :selectTime="selectTime" />
-
-                <!-- 本月福利金发送额度 -->
-                <view id="this-month-benefits"></view>
-                <ThisMonthBenefits :selectTime="selectTime" />
-
-                <!-- 会员消费数据分析 -->
-                <view id="analysis-of-member"></view>
-                <AnalysisOfMember />
-            </view>
-        </view>
-    </scroll-view>
+                            <view id="analysis-of-member" class="section-anchor"></view>
+                            <AnalysisOfMember />
+                        </view>
+                    </view>
+                </scroll-view>
+            </swiper-item>
+        </swiper>
+    </view>
 </template>
 
 <script>
@@ -273,7 +251,12 @@ export default {
             // 暂时将这一次进入 的数据缓存一下 
             sessionData: {},
             pageScrollTop: 0,
-            scrollIntoView: "",
+            scrollIntoViewMap: {
+                business: '',
+                customerProfile: '',
+                businessRevenue: '',
+                mallOperation: ''
+            },
             tabScrollPosition: 0,
             selectTime: moment().subtract(1, 'M').format('YYYY-MM')
         }
@@ -287,6 +270,7 @@ export default {
     },
     onLoad() {
         this.fetchTabData(this.activeTab);
+        this.resetScrollPosition(this.tabList[this.activeTab].key);
         // 监听滚动控制事件
         uni.$on('disableScroll', this.handleDisableScroll);
         uni.$on('enableScroll', this.handleEnableScroll);
@@ -311,29 +295,40 @@ export default {
             this.selectTime = e.detail.value
         },
         switchTab(index) {
-            this.scrollIntoView = 'top'
             this.activeTab = index;
-            // 模拟数据加载
             this.fetchTabData(index);
-
-            // 使用固定步长来计算滚动位置
-            // 假设每个Tab的平均宽度为 200rpx (100px)
+            const targetKey = this.tabList[index].key;
+            this.resetScrollPosition(targetKey);
+            this.updateTabScrollPosition(index);
+        },
+        handleSwiperChange(e) {
+            const { current } = e.detail;
+            if (this.activeTab === current) {
+                return;
+            }
+            this.activeTab = current;
+            this.fetchTabData(current);
+            const targetKey = this.tabList[current].key;
+            this.resetScrollPosition(targetKey);
+            this.updateTabScrollPosition(current);
+        },
+        updateTabScrollPosition(index) {
             const avgTabWidth = 100;
-            const targetPosition = index * avgTabWidth;
-
-            console.log('Switching to tab:', index, 'scrolling to:', targetPosition);
-
-            // 设置滚动位置
-            this.tabScrollPosition = targetPosition;
+            this.tabScrollPosition = index * avgTabWidth;
         },
 
         // 滚动到指定组件
         scrollToComponent(componentId) {
-            this.scrollIntoView = componentId
+            const currentTabKey = this.tabList[this.activeTab].key;
+            this.scrollIntoViewMap[currentTabKey] = componentId;
             this.activeNavItem = componentId;
 
         },
 
+        resetScrollPosition(tabKey) {
+            this.scrollIntoViewMap[tabKey] = `top-${tabKey}`;
+        },
+
         // 切换导航栏收缩状态
         toggleNavCollapse() {
             this.isNavCollapsed = !this.isNavCollapsed;
@@ -390,6 +385,14 @@ export default {
     height: 100vh;
     background: linear-gradient(180deg, @bg-light 0%, #e9ecf4 100%);
 
+    .tab-swiper {
+        height: 100vh;
+    }
+
+    .tab-scroll-view {
+        height: 100vh;
+    }
+
     .tab-container {
         background: @bg-white;
         box-shadow: @shadow-light;
@@ -477,6 +480,12 @@ export default {
     padding: 32rpx;
     padding-top: 92rpx;
 
+    .section-anchor {
+        height: 0;
+        margin-top: -120rpx;
+        padding-top: 120rpx;
+    }
+
     .tab-content {
         /* 移除切换动画 */
 
@@ -750,4 +759,4 @@ export default {
         transform: rotate(360deg);
     }
 }
-</style>
\ No newline at end of file
+</style>