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