update
This commit is contained in:
ylj20011123
parent
90de8397f0
commit
2e75870f32
@ -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>
|
||||
<!-- 断面流量趋势图 -->
|
||||
|
||||
@ -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>
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user