ylj/ccy_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
ylj20011123 2025-11-13 09:09:37 +08:00
parent 90de8397f0
commit 2e75870f32
2 changed files with 127 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/DigitalIntelligenceDashboard/components/TrendOfTrafficFlow.vue
View File

@ -5,7 +5,7 @@
<text class="chart-title">断面流量</text> <text class="chart-title">断面流量</text>
<!-- AI分析按钮 --> <!-- AI分析按钮 -->
<view class="ai-analysis-wrapper"> <view class="ai-analysis-wrapper">
<AIAnalysis :chartInfo="chartInfo" @disableScroll="handleDisableScroll" @enableScroll="handleEnableScroll" /> <!-- <AIAnalysis :chartInfo="chartInfo" @disableScroll="handleDisableScroll" @enableScroll="handleEnableScroll" /> -->
</view> </view>
</view> </view>
<!-- 断面流量趋势图 --> <!-- 断面流量趋势图 -->

159
pages/DigitalIntelligenceDashboard/index.vue
View File

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