update
This commit is contained in:
ylj20011123
parent
ab67579eec
commit
3bf7e0a813
@ -47,13 +47,6 @@
|
||||
<view class="pie-chart-container">
|
||||
<QiunDataCharts type="pie" :opts="pieChartOpts" :chartData="pieChartData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="productTypePieChart" />
|
||||
<view class="pie-legend">
|
||||
<view class="legend-item" v-for="(item, index) in productTypeData" :key="index">
|
||||
<view class="legend-color" :style="{ backgroundColor: item.color }"></view>
|
||||
<text class="legend-name">{{ item.name }}</text>
|
||||
<text class="legend-value">{{ item.percentage }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -107,27 +100,27 @@
|
||||
<view class="product-card" v-for="(item, index) in productList" :key="index">
|
||||
<view class="product-header">
|
||||
<view class="product-type-tag" :style="{
|
||||
backgroundColor: item.type === '保健品' ? '#576EFF' :
|
||||
item.type === '茶叶' ? '#52C41A' :
|
||||
item.type === '食品' ? '#FAAD14' :
|
||||
item.type === '饮品' ? '#FF7875' :
|
||||
item.type === '工艺品' ? '#B37FEB' : '#666666'
|
||||
backgroundColor: index === 0 ? '#576EFF' :
|
||||
index === 1 ? '#52C41A' :
|
||||
index === 2 ? '#FAAD14' :
|
||||
index === 3 ? '#FF7875' :
|
||||
index === 4 ? '#B37FEB' : '#666666'
|
||||
}">
|
||||
{{ item.type }}
|
||||
{{ index + 1 }}
|
||||
</view>
|
||||
<text class="product-code">{{ item.code }}</text>
|
||||
<text class="product-code">{{ item.COMMODITY_BARCODE }}</text>
|
||||
</view>
|
||||
<view class="product-body">
|
||||
<text class="product-name">{{ item.name }}</text>
|
||||
<text class="product-name">{{ item.COMMODITY_NAME }}</text>
|
||||
<view class="product-metrics">
|
||||
<view class="metric-item">
|
||||
<text class="metric-label">销量</text>
|
||||
<text class="metric-value">{{ formatNumber(item.sales) }}</text>
|
||||
<text class="metric-value">{{ item.SELLCOUNT ? item.SELLCOUNT.toLocaleString() : "" }}</text>
|
||||
</view>
|
||||
<view class="metric-divider"></view>
|
||||
<view class="metric-item">
|
||||
<text class="metric-label">销售额</text>
|
||||
<text class="metric-value">¥{{ formatMoney(item.revenue) }}</text>
|
||||
<text class="metric-value">¥{{ item.FACTAMOUNT ? item.FACTAMOUNT.toLocaleString() : "" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -154,17 +147,9 @@ export default {
|
||||
productTypes: 12,
|
||||
|
||||
// 商品类型分布数据
|
||||
productTypeData: [
|
||||
{ name: '保健品', value: 35, percentage: 35, color: '#576EFF' },
|
||||
{ name: '茶叶', value: 28, percentage: 28, color: '#52C41A' },
|
||||
{ name: '食品', value: 20, percentage: 20, color: '#FAAD14' },
|
||||
{ name: '饮品', value: 12, percentage: 12, color: '#FF7875' },
|
||||
{ name: '其他', value: 5, percentage: 5, color: '#B37FEB' }
|
||||
],
|
||||
|
||||
productTypeData: [],
|
||||
// 销量排行榜数据
|
||||
salesRankingData: [],
|
||||
|
||||
// 销售趋势数据
|
||||
trendData: {
|
||||
categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
|
||||
@ -172,14 +157,7 @@ export default {
|
||||
revenueData: [100, 200, 300, 400, 500, 600, 700]
|
||||
},
|
||||
|
||||
productList: [
|
||||
{ type: '保健品', code: 'YN001', name: '云南白药牙膏', sales: 3456, revenue: 456789 },
|
||||
{ type: '茶叶', code: 'PU002', name: '普洱茶饼', sales: 2890, revenue: 567890 },
|
||||
{ type: '食品', code: 'FH003', name: '鲜花饼', sales: 2345, revenue: 345678 },
|
||||
{ type: '饮品', code: 'KF004', name: '云南咖啡', sales: 1876, revenue: 234567 },
|
||||
{ type: '保健品', code: 'SQ005', name: '三七粉', sales: 1567, revenue: 456789 },
|
||||
{ type: '工艺品', code: 'YS006', name: '玉石手镯', sales: 1234, revenue: 345678 }
|
||||
]
|
||||
productList: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -188,7 +166,6 @@ export default {
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// 饼图数据
|
||||
pieChartData() {
|
||||
@ -205,11 +182,10 @@ export default {
|
||||
// 饼图配置
|
||||
pieChartOpts() {
|
||||
return {
|
||||
color: this.productTypeData.map(item => item.color),
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: true,
|
||||
legend: {
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
extra: {
|
||||
pie: {
|
||||
@ -229,7 +205,7 @@ export default {
|
||||
barChartData() {
|
||||
return {
|
||||
categories: this.salesRankingData.map(item =>
|
||||
item.name
|
||||
this.formatXAxisLabel(item.name)
|
||||
),
|
||||
series: [{
|
||||
name: '销量',
|
||||
@ -282,6 +258,9 @@ export default {
|
||||
data: yAxisData
|
||||
}]
|
||||
},
|
||||
categoriesReal: this.salesRankingData.map(item =>
|
||||
item.name
|
||||
),
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
@ -349,15 +328,40 @@ export default {
|
||||
this.handleGetAllData()
|
||||
},
|
||||
methods: {
|
||||
SalesRankingOfProducts() {
|
||||
console.log('1111');
|
||||
return item.name + ':' + item.data + '件'
|
||||
// 格式化X轴标签文字
|
||||
formatXAxisLabel(name) {
|
||||
if (!name) return '';
|
||||
// 如果名称超过4个字符，截取并添加省略号
|
||||
return name.length > 4 ? name.substring(0, 4) + '...' : name;
|
||||
},
|
||||
// 获取整个组件的数据
|
||||
handleGetAllData() {
|
||||
// 拿到商品类型分布
|
||||
this.handleGetShopTypeDistribution()
|
||||
// 拿到商品销售排行榜
|
||||
this.handleGetTopSalesRank()
|
||||
},
|
||||
// 拿到商品类型分布
|
||||
async handleGetShopTypeDistribution() {
|
||||
const req = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsMonth: '202509',
|
||||
type: 'encryption'
|
||||
}
|
||||
const data = await request.$webPost(
|
||||
"CommercialApi/SupplyChain/GetWelFareSummary",
|
||||
req
|
||||
);
|
||||
console.log('商品类型分布', data);
|
||||
let list = data.Result_Data.WelFareGoodsTypeList
|
||||
let res = []
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item) => {
|
||||
res.push({ name: item.GoodsTypeName, value: item.GoodsCount })
|
||||
})
|
||||
}
|
||||
this.productTypeData = res
|
||||
},
|
||||
// 拿到商品销售排行榜
|
||||
async handleGetTopSalesRank() {
|
||||
const req = {
|
||||
@ -378,6 +382,7 @@ export default {
|
||||
})
|
||||
}
|
||||
this.salesRankingData = res
|
||||
this.productList = list
|
||||
},
|
||||
|
||||
|
||||
|
||||
@ -78,16 +78,6 @@
|
||||
<view class="trend-chart-container">
|
||||
<QiunDataCharts type="line" :opts="trendChartOpts" :chartData="trendChartData" :canvas2d="true"
|
||||
:inScrollView="true" canvasId="trendChart" />
|
||||
<view class="chart-legend">
|
||||
<view class="legend-item">
|
||||
<view class="legend-dot orders"></view>
|
||||
<text class="legend-text">订单量</text>
|
||||
</view>
|
||||
<view class="legend-item">
|
||||
<view class="legend-dot amount"></view>
|
||||
<text class="legend-text">交易额(÷1000)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -175,6 +165,7 @@
|
||||
|
||||
<script>
|
||||
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
import request from "@/util/index.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -199,9 +190,9 @@ export default {
|
||||
|
||||
// 交易趋势数据
|
||||
trendData: {
|
||||
categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
|
||||
orderData: [1234, 1567, 1890, 2345, 1789, 2123, 2456],
|
||||
amountData: [234567, 345678, 456789, 567890, 478901, 589012, 678901]
|
||||
categories: [],
|
||||
orderData: [],
|
||||
amountData: []
|
||||
},
|
||||
funnelStages: [
|
||||
{ name: '下单订单', count: 45678, rate: 100, percentage: 100 },
|
||||
@ -252,7 +243,7 @@ export default {
|
||||
data: this.trendData.orderData
|
||||
},
|
||||
{
|
||||
name: '交易额(千元)',
|
||||
name: '交易额',
|
||||
data: this.trendData.amountData.map(v => v / 1000) // 转换为千元单位
|
||||
}
|
||||
]
|
||||
@ -262,14 +253,18 @@ export default {
|
||||
// 交易趋势图表配置
|
||||
trendChartOpts() {
|
||||
return {
|
||||
color: ['#576EFF', '#52C41A'],
|
||||
padding: [15, 10, 0, 15],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
disableGrid: true,
|
||||
type: 'category',
|
||||
data: Array.from({ length: 30 }, (_, index) => index + 1),
|
||||
format: function (val) {
|
||||
return (val % 5 === 0) ? val : '';
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
@ -288,8 +283,54 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
// 获取整个组件的数据
|
||||
this.handleGetAllData()
|
||||
},
|
||||
methods: {
|
||||
// 获取整个组件的数据
|
||||
handleGetAllData() {
|
||||
// 拿到交易趋势分析的数据
|
||||
this.handleTradingTrendData()
|
||||
},
|
||||
// 拿到交易趋势分析的数据
|
||||
async handleTradingTrendData() {
|
||||
const req = {
|
||||
DataType: 1,// 1 日度 2 月度
|
||||
ProvinceCode: '530000',
|
||||
StartMonth: '202509',
|
||||
EndMonth: '202509',
|
||||
type: 'encryption'
|
||||
}
|
||||
const data = await request.$webPost(
|
||||
"CommercialApi/SupplyChain/GetMallOrderSummary",
|
||||
req
|
||||
);
|
||||
let list = data.Result_Data.List
|
||||
console.log('交易趋势分析交易趋势分析', list);
|
||||
let categories = [] // x轴
|
||||
let orderData = [] // 销量
|
||||
let amountData = [] // 销售额
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item) => {
|
||||
categories.push(item.StatisticsDate.split('/')[2])
|
||||
orderData.push(item.TicketCount)
|
||||
amountData.push(item.SellAmount)
|
||||
})
|
||||
}
|
||||
this.trendData = {
|
||||
categories: orderData,
|
||||
orderData: orderData,
|
||||
amountData: amountData
|
||||
}
|
||||
// 要的结构
|
||||
// trendData: {
|
||||
// categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
|
||||
// orderData: [1234, 1567, 1890, 2345, 1789, 2123, 2456],
|
||||
// amountData: [234567, 345678, 456789, 567890, 478901, 589012, 678901]
|
||||
// }
|
||||
|
||||
},
|
||||
formatNumber(num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
},
|
||||
|
||||
@ -96,11 +96,11 @@ const cfu = {
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter": {
|
||||
'SalesRankingOfProducts': function (item, category, index, opts) {
|
||||
console.log('', item);
|
||||
console.log('', category);
|
||||
console.log('', index);
|
||||
console.log('', opts);
|
||||
return `${category}：${item.data.toLocaleString()}件`
|
||||
// console.log('', item);
|
||||
// console.log('', category);
|
||||
// console.log('', index);
|
||||
// console.log('', opts);
|
||||
return `${opts.categoriesReal[index]}：${item.data.toLocaleString()}件`
|
||||
},
|
||||
"yAxisDemo1": function (val, index, opts) { return val + '元' },
|
||||
"yAxisDemo2": function (val, index, opts) { return val.toFixed(2) },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user