261 lines
8.1 KiB
Vue
261 lines
8.1 KiB
Vue
<template>
|
||
<view class="customer-consumption-preferences">
|
||
<!-- 客群消费偏好标题 -->
|
||
<view class="section-header">
|
||
<!-- <text class="section-title">客群消费偏好</text> -->
|
||
<text class="section-title">近10日单品营收Top5</text>
|
||
</view>
|
||
|
||
<!-- 客群消费偏好图表 -->
|
||
<view class="chart-container">
|
||
<!-- 图表加载效果 -->
|
||
<ChartLoading v-if="isLoading" text="数据加载中..." />
|
||
<!-- 实际图表 -->
|
||
<QiunDataCharts v-else type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true"
|
||
:inScrollView="true" canvasId="customerConsumptionPreferencesChart" :animation="false" :ontap="true"
|
||
:ontouch="true" tooltipFormat="customerConsumptionPreferencesChart" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||
import ChartLoading from './ChartLoading.vue'
|
||
import request from "@/util/index.js";
|
||
import moment from 'moment'
|
||
|
||
export default {
|
||
components: {
|
||
QiunDataCharts,
|
||
ChartLoading
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
// 图表原始数据
|
||
rawData: {
|
||
category: [],
|
||
seriesData: [],
|
||
realData: []
|
||
}
|
||
}
|
||
},
|
||
props: {
|
||
selectTime: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
},
|
||
|
||
computed: {
|
||
// 判断图表数据是否已加载
|
||
hasChartData() {
|
||
return this.rawData.category && this.rawData.category.length > 0;
|
||
},
|
||
|
||
// 图表数据
|
||
chartData() {
|
||
return {
|
||
categories: this.rawData.category,
|
||
series: [
|
||
{
|
||
name: '客单占比',
|
||
data: this.rawData.seriesData
|
||
}
|
||
],
|
||
|
||
}
|
||
},
|
||
|
||
// 图表配置
|
||
chartOpts() {
|
||
return {
|
||
padding: [15, 15, 0, 15], // 增加底部padding为X轴文字留空间
|
||
dataLabel: false,
|
||
// enableScroll: true,
|
||
xAxis: {
|
||
disableGrid: true,
|
||
itemCount: 5, // 减少显示数量，避免文字太挤
|
||
fontSize: 10
|
||
},
|
||
yAxis: {
|
||
showTitle: true,
|
||
data: [{
|
||
min: 0,
|
||
title: '百分比(%)',
|
||
titleFontSize: 12,
|
||
titleOffsetY: -5,
|
||
titleOffsetX: 10,
|
||
}]
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: 'bottom',
|
||
float: 'center',
|
||
fontSize: 12,
|
||
fontColor: '#333333',
|
||
margin: 0,
|
||
padding: 0,
|
||
itemGap: 10,
|
||
textAlign: 'left'
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: 8, // 增加柱子宽度
|
||
activeBgColor: '#000000',
|
||
activeBgOpacity: 0.08,
|
||
barBorderRadius: [4, 4, 0, 0]
|
||
}
|
||
},
|
||
realData: this.rawData.realData
|
||
}
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
selectTime: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal !== oldVal) {
|
||
this.handleGetCustomerConsumptionPreferencesData()
|
||
}
|
||
},
|
||
immediate: false
|
||
}
|
||
},
|
||
|
||
onReady() {
|
||
this.handleGetCustomerConsumptionPreferencesData()
|
||
},
|
||
|
||
methods: {
|
||
// 获取客群消费偏好数据
|
||
async handleGetCustomerConsumptionPreferencesData() {
|
||
// const req = {
|
||
// ProvinceCode: '530000',
|
||
// StatisticsDate: this.selectTime ? moment(this.selectTime).subtract(1, 'd').format('YYYY-MM-DD') : moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||
// ServerpartId: "" // 暂时为空，如果需要传入服务区ID可以在这里添加
|
||
// }
|
||
const req = {
|
||
startDate: moment().subtract(10, 'd').format('YYYY-MM-DD'),
|
||
endDate: moment().format('YYYY-MM-DD'),
|
||
ServerpartShopIds: "5670,5527,5548,5519,5520,5547,5531,5546,7078,7248,5522,6974,5549,5529,5528,7069,5521,6033,5530,5502,6972,7092,7091,6971,5759,5760,6968,6969,7089,7088,6970,7090,5747,6044,6045,6046,6047,7156,5746,7160,6950,6952,6031,6026,5715,5716,6056,6052,6050,6053,6057,6051,6058,6054,6939,6940,7064,7065,6936,6937,6948,6949,5736,6954,7129,7134,7132,7133,5733,5735,7208,7212,5732,5740,5741,5742,7357,7356,5738,5739"
|
||
}
|
||
|
||
|
||
this.isLoading = true
|
||
const data = await this.getBusinessTradeRevenue(req);
|
||
|
||
|
||
|
||
this.isLoading = false
|
||
|
||
// 处理数据
|
||
this.processChartData(data.Result_Data)
|
||
},
|
||
|
||
// 发起API请求获取业态客单偏好数据
|
||
async getBusinessTradeRevenue(params) {
|
||
const data = await request.$webGet(
|
||
"EShangApiMain/Sales/GetCommodityTypeSummary",
|
||
params
|
||
);
|
||
return data || {}
|
||
},
|
||
|
||
// 处理图表数据
|
||
processChartData(data) {
|
||
let category = []
|
||
let seriesData = []
|
||
let realData = []
|
||
|
||
console.log('datadatadadasda321312312', data);
|
||
|
||
|
||
// 处理数据：获取业态客单偏好数据
|
||
// if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
|
||
if (data.List && data.List.length > 0) {
|
||
let list = data.List.slice(0, 5) // 只取前10条
|
||
list = this.sortByKey(list, 'Total_SellAmountRate', 'desc')
|
||
console.log('djaksdjaksdjal', list);
|
||
|
||
list.forEach((item) => {
|
||
// category.push(item.name)
|
||
// seriesData.push(Number(item.value))
|
||
// realData.push(item.value)
|
||
category.push(item.CommodityType_Name.split(']')[1])
|
||
seriesData.push(Number(item.Total_SellAmountRate))
|
||
realData.push(item.Total_SellAmount)
|
||
})
|
||
}
|
||
|
||
// 更新图表数据
|
||
this.rawData = {
|
||
category: category,
|
||
seriesData: seriesData,
|
||
realData: realData
|
||
}
|
||
},
|
||
/**
|
||
* 对象数组排序方法
|
||
* @param {Array} arr - 要排序的对象数组
|
||
* @param {String} key - 按哪个字段排序
|
||
* @param {String} order - 排序方式：'asc' 正序，'desc' 倒序
|
||
*/
|
||
sortByKey(arr, key, order = 'asc') {
|
||
return arr.sort((a, b) => {
|
||
const valA = a[key];
|
||
const valB = b[key];
|
||
|
||
if (valA === valB) return 0;
|
||
if (order === 'asc') {
|
||
return valA > valB ? 1 : -1;
|
||
}
|
||
return valA < valB ? 1 : -1; // desc
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@primary-color: #46B8F3;
|
||
@secondary-color: #3CD495;
|
||
@danger-color: #FF5E5E;
|
||
@success-color: #52C41A;
|
||
@text-primary: #333;
|
||
@text-secondary: #666;
|
||
@text-light: #999;
|
||
@bg-white: #ffffff;
|
||
@border-radius: 16rpx;
|
||
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
||
.customer-consumption-preferences {
|
||
margin-top: 24rpx;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 8rpx;
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: @text-primary;
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
background: @bg-white;
|
||
border-radius: @border-radius;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
margin-bottom: 24rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
</style> |