Skip to content

W
wangxiaolu-sfa-ui
提交 3ade5e40 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

refactor(bi/sale): 重构商品明细每日

完成
上级 d2635ee9
显示空白字符变更
内嵌 并排
正在显示 包含 93 行增加 和 31 行删除
src/utils/math.js
浏览文件 @ 3ade5e40
......@@ -27,11 +27,11 @@ export function divSafe(arg1, arg2) {
* @param {number} fixed - 保留几位小数
* @param {bool} round - 是否取整（四舍五入）
* @param {bool} pos - 是否统一正数
* @param {bool} comma - 是否使用千分位逗号
* @param {bool} comma - 是否使用千分位逗号（从这里开始往下就是字符串了）
* @param {string} des - 尾部额外添加描述字符（例如：人 / 元 / %等）
* @returns {string} 格式化后的字符串
*/
export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = true, pos = true, comma = true, des }) {
export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = true, pos = true, comma = true, des = '' }) {
// console.log('传入', value, carry, fixed, round, pos, comma, des)
let resultNum = 0 // 保存计算后的结果
let unit = ''; // 保存转换后的单位（例如：万 / 亿）
......@@ -77,7 +77,7 @@ export function formatNumberWithUnit({ value, carry = true, fixed = 2, round = t
resultNum = Math.abs(resultNum);
}
if (comma) {
// 是否添加千分位符号（从这里开始就是字符串了）
// 是否添加千分位符号
resultNum = resultNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
return `${resultNum} ${unit}${des}`;
......
src/views/bi/sale/LineChart.vue
浏览文件 @ 3ade5e40
......@@ -7,6 +7,7 @@
<script setup>
import * as echarts from 'echarts'
import { useWindowResize } from '@/hooks'
import { formatNumberWithUnit } from '@/utils'
const props = defineProps({
className: {
......@@ -53,7 +54,21 @@ const setOptions = () => {
text: props.chartData.title,
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
formatter: function (params) {
let tooltip = '';
params.forEach((item) => {
// 获取系列颜色
var color = item.color;
// 拼接提示内容
tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
value: item.value,
des: props.chartData.yName,
carry: myThousand.value
}) + '<br>';
});
return tooltip;
}
},
legend: {
data: props.chartData.data?.map(o => o.name)
......@@ -77,7 +92,6 @@ const setOptions = () => {
icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
onclick: () => {
myThousand.value = !myThousand.value
lockThousand.value = !lockThousand.value
setOptions()
}
}
......@@ -85,33 +99,43 @@ const setOptions = () => {
},
xAxis: {
type: 'category',
boundaryGap: false,
// boundaryGap: false,
data: props.chartData.xData
},
yAxis: {
type: 'value',
name: (myThousand.value ? '（万）' : '') + props.chartData.yName
name: props.chartData.yName,
axisLabel: {
formatter(value) {
return formatNumberWithUnit({
value,
des: props.chartData.yName,
carry: myThousand.value
})
}
},
},
series: props.chartData.data?.map(o => {
return {
name: o.name,
type: 'line',
data: o.data.map(num => {
return parseFloat((myThousand.value ? num / 10000 : num).toFixed(2))
})
data: o.data
}
})
})
}, true)
}
watch(() => props.chartData, () => {
console.log(props.chartData)
// 自动计算是否需要过万单位
// if (!this.lockThousand) {
// this.myThousand = this.chartData.data?.some(o => {
// return o.data.some(num => num >= 10000)
// })
myThousand.value = props.chartData.data?.some(o => {
return o.data.some(num => num >= 10000)
})
// }
chart && setOptions()
}, {
deep: true
})
watch(() => props.showTool, () => {
......@@ -125,7 +149,7 @@ const initChart = () => {
const resize = () => {
chart.value.resize()
chart.resize()
}
useWindowResize(resize)
......
src/views/bi/sale/index.vue
浏览文件 @ 3ade5e40
......@@ -112,13 +112,19 @@
align="center"
min-width="100px"
sortable
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', false, true)"></el-table-column>
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"></el-table-column>
<el-table-column label="销售额"
prop="YTD.salePrice"
align="center"
min-width="100px"
sortable
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)">
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})">
</el-table-column>
<!-- <el-table-column label="达成率"
prop="YTD.needNumPercentage"
......@@ -143,11 +149,17 @@
align="center"
min-width="100px"
sortable
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"></el-table-column>
<el-table-column label="销售额"
prop="MTD.salePrice"
align="center"
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"
min-width="100px"
sortable></el-table-column>
<!-- <el-table-column label="达成率"
......@@ -167,11 +179,17 @@
align="center"
min-width="100px"
sortable
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"></el-table-column>
<el-table-column label="销售额"
prop="week.salePrice"
align="center"
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"
min-width="100px"
sortable></el-table-column>
</el-table-column>
......@@ -184,11 +202,17 @@
align="center"
min-width="120px"
sortable
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"></el-table-column>
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"></el-table-column>
<el-table-column label="日总额"
prop="last.salePrice"
align="center"
:formatter="(row, cell, cellValue) => formatNumberWithUnit(cellValue, '', true, false)"
:formatter="(row, cell, cellValue) => formatNumberWithUnit({
value: cellValue,
round: false
})"
min-width="100px"
sortable></el-table-column>
</el-table-column>
......@@ -287,7 +311,7 @@ const dict = proxy.useDict("sale_platform");
const allSeriesList = ref([]) // 总系列列表
const prdTagList = ref([]) // 总商品标签列表
const platformSalesList = ref([]) // 平台销售数据列表
const platformSalesObj = { // 平台销售数据对象（一套表图数据对应一个对象）
const platformSalesObj = reactive({ // 平台销售数据对象（一套表图数据对应一个对象）
queryParams: { // 查询参数
prdTagId: undefined,
seriesId: undefined,
......@@ -326,7 +350,7 @@ const platformSalesObj = { // 平台销售数据对象（一套表图数据对
data: [], // 图表现在展示用数据
xData: [], // 日期（用于 x 轴）
}
}
})
const { pickerOptions } = useDatePickerOptions()
const uploadDemandImportVisible = ref(false)
const uploadDemand = ref({ // 上传货需数据对象
......@@ -353,7 +377,7 @@ const getSaleList = async (item) => {
platformId: o.platformId,
targetSaleSum: o.targetSaleSum,
YTD: {
saleNum: 1398213.123,
saleNum: o.saleCountY,
salePrice: o.saleSumY,
goodsSupplyDemandCount: o.goodsSupplyDemandCountY,
// needNumPercentage: (formatNumberWithUnit(o.saleCountY, o.goodsSupplyDemandCountY) * 100).toFixed(2)
......@@ -400,7 +424,9 @@ const getSaleList = async (item) => {
}
})
// 默认先显示销售量数据
item.chartData.data = item.chartData.saleCount
console.log('item.chartData.data', item.chartData.data)
item.loading = false
}
......@@ -453,16 +479,28 @@ const getSummaries = (param) => {
}, 0);
if (column.property.includes('saleNum')) {
// 带 Num 是量（后台字段在上面被我处理成其他字段名字了）
return sums[index] = formatNumberWithUnit(sums[index])
return sums[index] = formatNumberWithUnit({
value: sums[index],
round: false
})
} else if (column.property.includes('salePrice')) {
// 带 Price 是价
return sums[index] = formatNumberWithUnit(sums[index])
return sums[index] = formatNumberWithUnit({
value: sums[index],
round: false
})
} else if (column.property.includes('targetSaleSum')) {
// 合计销售目标
return sums[index] = formatNumberWithUnit(sums[index])
return sums[index] = formatNumberWithUnit({
value: sums[index],
round: false
})
} else if (column.property.includes('goodsSupplyDemandCount')) {
// 货需量
return sums[index] = formatNumberWithUnit(sums[index])
return sums[index] = formatNumberWithUnit({
value: sums[index],
round: false
})
} else if (column.property.includes('needNumPercentage')) {
// 达成率
return sums[index] = (sums[index] / data.length).toFixed(2) + '%'
......@@ -507,7 +545,7 @@ const prdChange = async (item) => {
}
// 创建查询某个系列/商品的套表
const createTableAndECharts = () => {
let item = reactive(deepClone(platformSalesObj))
let item = reactive(deepClone(toRaw(platformSalesObj)))
// 如果是第一套套表，默认填写日期
if (platformSalesList.value.length === 0) {
item.queryParams.date = [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))] // 默认查询和显示的是当月 1 号到 T-1 日期
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论