update
This commit is contained in:
ylj20011123
parent
90de8397f0
commit
2e75870f32
@ -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>
|
||||||
<!-- 断面流量趋势图 -->
|
<!-- 断面流量趋势图 -->
|
||||||
|
|||||||
@ -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,132 +33,111 @@
|
|||||||
</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"
|
||||||
|
: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 id="trend-of-trafficFlow" class="section-anchor"></view>
|
||||||
<!-- 内容展示区域 -->
|
<TrendOfTrafficFlow :selectTime="selectTime" />
|
||||||
<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="vehicles-entering" class="section-anchor"></view>
|
||||||
<view id="trading-alert"></view>
|
<VehiclesEntering :selectTime="selectTime" />
|
||||||
<TradingAlert />
|
|
||||||
|
|
||||||
<!-- 断面流量 -->
|
<view id="vehicle-model-stay" class="section-anchor"></view>
|
||||||
<view id="trend-of-trafficFlow"></view>
|
<VehicleModelStay :selectTime="selectTime" />
|
||||||
<TrendOfTrafficFlow :selectTime="selectTime" />
|
</view>
|
||||||
|
|
||||||
<!-- 入区车流 -->
|
<!-- 客群画像与消费行为分析 -->
|
||||||
<view id="vehicles-entering"></view>
|
<view v-else-if="tab.key === 'customerProfile'" class="tab-content">
|
||||||
<VehiclesEntering :selectTime="selectTime" />
|
<view id="customer-age-group" class="section-anchor"></view>
|
||||||
|
<CustomerAgeGroup :selectTime="selectTime" />
|
||||||
|
|
||||||
<!-- 经营效益 -->
|
<view id="gender-customer-group" class="section-anchor"></view>
|
||||||
<view id="vehicle-model-stay"></view>
|
<GenderCustomerGroup :selectTime="selectTime" />
|
||||||
<VehicleModelStay :selectTime="selectTime" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 客群画像与消费行为分析 -->
|
<view id="preference-type" class="section-anchor"></view>
|
||||||
<view v-if="activeTab === 1" class="tab-content">
|
<PreferenceType :selectTime="selectTime" />
|
||||||
<!-- 年龄画像 -->
|
|
||||||
<view id="customer-age-group"></view>
|
|
||||||
<CustomerAgeGroup :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 性别画像 -->
|
<view id="customer-group" class="section-anchor"></view>
|
||||||
<view id="gender-customer-group"></view>
|
<CustomerGroup :selectTime="selectTime" />
|
||||||
<GenderCustomerGroup :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 偏好类型 -->
|
<view id="customer-consumption-preferences" class="section-anchor"></view>
|
||||||
<view id="preference-type"></view>
|
<CustomerConsumptionPreferences :selectTime="selectTime" />
|
||||||
<PreferenceType :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 客群特征分析 -->
|
<view id="consumption-conversion" class="section-anchor"></view>
|
||||||
<view id="customer-group"></view>
|
<ConsumptionConversion :selectTime="selectTime" />
|
||||||
<CustomerGroup :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 客群消费偏好 -->
|
<view id="consumption-level" class="section-anchor"></view>
|
||||||
<view id="customer-consumption-preferences"></view>
|
<ConsumptionLevel :selectTime="selectTime" />
|
||||||
<CustomerConsumptionPreferences :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 消费转化率对比图 -->
|
<view id="consumption-period" class="section-anchor"></view>
|
||||||
<view id="consumption-conversion"></view>
|
<ConsumptionPeriod :selectTime="selectTime" />
|
||||||
<ConsumptionConversion :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 消费水平 -->
|
<view id="brand-consumption-level" class="section-anchor"></view>
|
||||||
<view id="consumption-level"></view>
|
<BrandConsumptionLevel :selectTime="selectTime" />
|
||||||
<ConsumptionLevel :selectTime="selectTime" />
|
</view>
|
||||||
|
|
||||||
<!-- 消费时段分析 -->
|
<!-- 多维度经营数据分析 -->
|
||||||
<view id="consumption-period"></view>
|
<view v-else-if="tab.key === 'businessRevenue'" class="tab-content">
|
||||||
<ConsumptionPeriod :selectTime="selectTime" />
|
<view id="business-case" class="section-anchor"></view>
|
||||||
|
<BusinessCase :selectTime="selectTime" />
|
||||||
|
|
||||||
<!-- 品牌消费水平 -->
|
<view id="regional-revenue" class="section-anchor"></view>
|
||||||
<view id="brand-consumption-level"></view>
|
<RegionalRevenue :selectTime="selectTime" />
|
||||||
<BrandConsumptionLevel :selectTime="selectTime" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 多维度经营数据分析 -->
|
<view id="business-structure" class="section-anchor"></view>
|
||||||
<view v-if="activeTab === 2" class="tab-content">
|
<BusinessStructure :selectTime="selectTime" />
|
||||||
<!-- 营收特征 -->
|
|
||||||
<view id="business-case"></view>
|
|
||||||
<BusinessCase :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 区域营收占比 -->
|
<view id="festival-revenue-sum-info" class="section-anchor"></view>
|
||||||
<view id="regional-revenue"></view>
|
<FestivalRevenueSumInfo />
|
||||||
<RegionalRevenue :selectTime="selectTime" />
|
</view>
|
||||||
|
|
||||||
<!-- 业态结构占比 -->
|
<!-- 商户电商生态全景 -->
|
||||||
<view id="business-structure"></view>
|
<view v-else-if="tab.key === 'mallOperation'" class="tab-content">
|
||||||
<BusinessStructure :selectTime="selectTime" />
|
<view id="member-mall" class="section-anchor"></view>
|
||||||
|
<MemberMall :selectTime="selectTime" />
|
||||||
|
|
||||||
<!-- 节假日营收 -->
|
<view id="hot-product-list" class="section-anchor"></view>
|
||||||
<view id="festival-revenue-sum-info"></view>
|
<HotProductList />
|
||||||
<FestivalRevenueSumInfo />
|
|
||||||
|
|
||||||
</view>
|
<view id="brand-detail" class="section-anchor"></view>
|
||||||
|
<BrandDetail />
|
||||||
|
|
||||||
<!-- 商户电商生态全景 -->
|
<view id="supplier-list-box" class="section-anchor"></view>
|
||||||
<view v-if="activeTab === 3" class="tab-content">
|
<SupplierListBox :selectTime="selectTime" />
|
||||||
<!-- 会员商城 -->
|
|
||||||
<view id="member-mall"></view>
|
|
||||||
<MemberMall :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 热门商品榜单 -->
|
<view id="mall-order-statistics" class="section-anchor"></view>
|
||||||
<view id="hot-product-list"></view>
|
<MallOrderStatistics :selectTime="selectTime" />
|
||||||
<HotProductList />
|
|
||||||
|
|
||||||
<!-- 商户类别 -->
|
<view id="this-month-benefits" class="section-anchor"></view>
|
||||||
<view id="brand-detail"></view>
|
<ThisMonthBenefits :selectTime="selectTime" />
|
||||||
<BrandDetail />
|
|
||||||
|
|
||||||
<!-- 供应商列表 -->
|
<view id="analysis-of-member" class="section-anchor"></view>
|
||||||
<view id="supplier-list-box"></view>
|
<AnalysisOfMember />
|
||||||
<SupplierListBox :selectTime="selectTime" />
|
</view>
|
||||||
|
</view>
|
||||||
<!-- 商城订单统计 -->
|
</scroll-view>
|
||||||
<view id="mall-order-statistics"></view>
|
</swiper-item>
|
||||||
<MallOrderStatistics :selectTime="selectTime" />
|
</swiper>
|
||||||
|
</view>
|
||||||
<!-- 本月福利金发送额度 -->
|
|
||||||
<view id="this-month-benefits"></view>
|
|
||||||
<ThisMonthBenefits :selectTime="selectTime" />
|
|
||||||
|
|
||||||
<!-- 会员消费数据分析 -->
|
|
||||||
<view id="analysis-of-member"></view>
|
|
||||||
<AnalysisOfMember />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-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 {
|
||||||
/* 移除切换动画 */
|
/* 移除切换动画 */
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user