update
This commit is contained in:
parent
c78652a8d1
commit
ab67579eec
@ -179,8 +179,13 @@ export default {
|
||||
{ type: '饮品', code: 'KF004', name: '云南咖啡', sales: 1876, revenue: 234567 },
|
||||
{ type: '保健品', code: 'SQ005', name: '三七粉', sales: 1567, revenue: 456789 },
|
||||
{ type: '工艺品', code: 'YS006', name: '玉石手镯', sales: 1234, revenue: 345678 }
|
||||
],
|
||||
pageScrollTop: 0
|
||||
]
|
||||
}
|
||||
},
|
||||
props: {
|
||||
pageScrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
@ -224,7 +229,7 @@ export default {
|
||||
barChartData() {
|
||||
return {
|
||||
categories: this.salesRankingData.map(item =>
|
||||
this.formatXAxisLabel(item.name)
|
||||
item.name
|
||||
),
|
||||
series: [{
|
||||
name: '销量',
|
||||
@ -375,23 +380,7 @@ export default {
|
||||
this.salesRankingData = res
|
||||
},
|
||||
|
||||
// 格式化X轴标签文字
|
||||
formatXAxisLabel(name) {
|
||||
if (!name) return '';
|
||||
|
||||
// 获取屏幕宽度决定显示长度
|
||||
const screenWidth = this.getScreenWidth();
|
||||
let maxLength = 4; // 默认长度
|
||||
|
||||
if (screenWidth > 750) {
|
||||
maxLength = 6; // 大屏显示更长
|
||||
} else if (screenWidth < 375) {
|
||||
maxLength = 3; // 小屏显示更短
|
||||
}
|
||||
|
||||
// 如果名称超过最大长度,截取并添加省略号
|
||||
return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
|
||||
},
|
||||
|
||||
// 获取屏幕宽度
|
||||
getScreenWidth() {
|
||||
|
||||
@ -96,8 +96,11 @@ const cfu = {
|
||||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||
"formatter": {
|
||||
'SalesRankingOfProducts': function (item, category, index, opts) {
|
||||
console.log('2222', item, category, index, opts);
|
||||
|
||||
console.log('', item);
|
||||
console.log('', category);
|
||||
console.log('', index);
|
||||
console.log('', opts);
|
||||
return `${category}:${item.data.toLocaleString()}件`
|
||||
},
|
||||
"yAxisDemo1": function (val, index, opts) { return val + '元' },
|
||||
"yAxisDemo2": function (val, index, opts) { return val.toFixed(2) },
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="'overflow-x:hidden'"></page-meta>
|
||||
<view class="digital-dashboard">
|
||||
<scroll-view scroll-y @scroll="handleScroll" class="digital-dashboard">
|
||||
<!-- Tab切换区域 -->
|
||||
<view class="tab-container">
|
||||
<view class="tab-list">
|
||||
@ -38,7 +38,7 @@
|
||||
<view v-if="activeTab === 0" class="tab-content">
|
||||
<!-- 商品报表及分析 -->
|
||||
<view id="product-report"> </view>
|
||||
<ProductReport />
|
||||
<ProductReport :pageScrollTop="pageScrollTop" />
|
||||
|
||||
<!-- 交易报表及分析 -->
|
||||
<view id="transaction-report"></view>
|
||||
@ -136,7 +136,7 @@
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -226,7 +226,8 @@ export default {
|
||||
// 导航栏是否收缩
|
||||
isNavCollapsed: true,
|
||||
// 暂时将这一次进入 的数据缓存一下
|
||||
sessionData: {}
|
||||
sessionData: {},
|
||||
pageScrollTop: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -246,10 +247,6 @@ export default {
|
||||
uni.hideTabBar();
|
||||
},
|
||||
|
||||
onPageScroll() {
|
||||
// 监听页面滚动
|
||||
this.handleScroll();
|
||||
},
|
||||
onReady() {
|
||||
// 初始化活动导航项
|
||||
const currentTabKey = this.tabList[this.activeTab].key;
|
||||
@ -298,9 +295,8 @@ export default {
|
||||
this.isNavCollapsed = !this.isNavCollapsed;
|
||||
},
|
||||
|
||||
// 监听页面滚动,更新活动导航项
|
||||
handleScroll() {
|
||||
// 简化处理,避免频繁查询DOM
|
||||
handleScroll(e) {
|
||||
this.pageScrollTop = e.detail.scrollTop
|
||||
},
|
||||
|
||||
// 获取各个tab的数据
|
||||
@ -332,7 +328,7 @@ export default {
|
||||
@shadow-light: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.digital-dashboard {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, @bg-light 0%, #e9ecf4 100%);
|
||||
|
||||
.tab-container {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user