czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.图标新增利率，成本

Browse Source
This commit is contained in:
gyq
2025-12-02 16:09:04 +08:00
parent 35e65e16ac
commit eac72eb84e
13 changed files with 872 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/views/data/index.vue
View File

@@ -401,7 +401,7 @@
style="height: 350px" />
</div>
<!-- 商品销售排行 -->
<div class="item" style="margin-left: 20px">
<div class="item">
<div class="header">
<div class="tab_wrap">
<div class="item active">商品销售排行</div>
@@ -442,6 +442,28 @@
</div>
</div>
</div>
<div class="chart_wrap">
<!-- 毛利率/净利率 -->
<div class="item">
<div class="header">
<div class="rate_title">
<span class="t1">毛利率/净利率</span>
<span class="t2">今天 {{ initInterestRateTime }} 更新</span>
</div>
</div>
<div ref="initInterestRate" v-loading="initInterestRateLoading" class="chart" style="height: 350px" />
</div>
<!-- 成本（元） -->
<div class="item">
<div class="header">
<div class="rate_title">
<span class="t1">成本（元）</span>
<span class="t2">今天 {{ costUpdateTime }} 更新</span>
</div>
</div>
<div ref="costRef" v-loading="costLoading" class="chart" style="height: 350px" />
</div>
</div>
<!-- <div class="chart_wrap" style="display: flex;">
<div class="item" style="margin-left: 20px;">
<div class="header">
@@ -588,6 +610,12 @@ export default {
isHeadShop: JSON.parse(localStorage.getItem("userInfo")).isHeadShop,
loginType: localStorage.getItem("loginType"),
shopInfo: JSON.parse(localStorage.getItem("userInfo")),
initInterestRateLoading: true,
initInterestRate: null,
initInterestRateTime: '',
costLoading: true,
costRef: null,
costUpdateTime: ''
};
},
computed: {
@@ -620,6 +648,8 @@ export default {
this.dateProduct();
// this.summaryDateGet();
this.timeChange(this.timeValue);
this.profitRateBarChart()
this.costLineChart()
this.__resizeHandler = debounce(() => {
if (this.saleChart) {
@@ -637,6 +667,12 @@ export default {
if (this.productCountChart) {
this.productCountChart.resize();
}
if (this.initInterestRate) {
this.initInterestRate.resize();
}
if (this.costRef) {
this.costRef.resize();
}
// if (this.productSumChart) {
// this.productSumChart.resize();
// }
@@ -879,6 +915,67 @@ export default {
],
});
},
// 初始化成本折线图
initCostChart(time = [], data = []) {
this.costRef = echarts.init(this.$refs.costRef);
this.costRef.setOption({
tooltip: {
trigger: "item",
formatter: (params) => {
return `${params.value}`;
},
},
xAxis: [
{
type: "category",
data: time,
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: "#999",
},
},
axisLabel: {
rotate: time.length <= 7 ? 0 : 45,
interval: 0,
fontSize: "9",
},
},
],
grid: {
top: '5%',
right: '5%',
bottom: '8%',
left: '8%',
},
color: "#165DFF",
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#999",
},
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#ececec",
},
},
},
],
series: [
{
data: data,
type: "line",
symbol: "none",
},
],
});
},
// 初始化销售额图标
initSaleChart(time, data) {
this.saleChart = null;
@@ -952,6 +1049,83 @@ export default {
],
});
},
// 初始化毛利率/净利率图表
initInterestRateChart(time, data) {
this.initInterestRate = null;
this.initInterestRate = echarts.init(this.$refs.initInterestRate);
this.initInterestRate.setOption({
tooltip: {
trigger: "item",
formatter: (params) => {
return `${params.value}`;
},
},
xAxis: [
{
type: "category",
data: time,
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: "#999",
},
},
axisLabel: {
rotate: time.length <= 7 ? 0 : 45,
interval: 0,
fontSize: "9",
},
},
],
color: ["#165DFF", "#14C9C9", "#F98B26"],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#999",
},
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#ececec",
},
},
},
],
grid: {
top: '5%',
right: '5%',
bottom: '8%',
left: '8%',
},
series: [
{
name: "毛利率",
type: "bar",
barGap: '0%',
barWidth: time.length <= 7 ? "50%" : "30%",
data: data.map((item) => item.profitRate),
},
{
name: '净利率',
type: "bar",
barGap: '0%',
barWidth: time.length <= 7 ? "50%" : "30%",
data: data.map(item => item.netProfitRate),
},
// {
// name: '优惠金额',
// type: "bar",
// barWidth: time.length <= 7 ? "30%" : "20%",
// data: data.map(item => item.discountAmount),
// }
],
});
},
// 初始化销售额图表
initPayChart(data) {
this.payChart = echarts.init(this.$refs.payChart);
@@ -1021,6 +1195,48 @@ export default {
this.saleLoading = false;
}, 300);
},
// 获取毛利率/净利率柱状图数据
async profitRateBarChart() {
try {
this.initInterestRateLoading = true;
const res = await dataSummaryApi.profitRateBarChart({ day: this.saleActive, shopId: this.shopId });
this.initInterestRateTime = dayjs().format('HH:mm')
const data = res.map((item) => {
return {
profitRate: item.profitRate || 0,
netProfitRate: item.netProfitRate || 0,
// discountAmount: item.discountAmount
};
});
const time = res.map((item) => item.tradeDay);
this.initInterestRateChart(time, data);
} catch (error) {
console.log(error);
}
setTimeout(() => {
this.initInterestRateLoading = false;
}, 300);
},
// 获取成本折线图数据
async costLineChart() {
try {
this.costLoading = true;
const res = await dataSummaryApi.costLineChart({ day: this.saleActive, shopId: this.shopId });
this.costUpdateTime = dayjs().format('HH:mm')
const data = res.map((item) => item.productCostAmount || 0);
const time = res.map((item) => item.tradeDay);
this.initCostChart(time, data);
} catch (error) {
console.log(error);
}
setTimeout(() => {
this.costLoading = false;
}, 300);
},
paginationChange(e) {
this.saleTablePage = e;
this.dateProduct();
@@ -1601,6 +1817,8 @@ export default {
.chart_wrap {
margin-top: 20px;
display: flex;
gap: 20px;
.sale_data {
display: flex;
@@ -1647,6 +1865,24 @@ export default {
border-bottom: 1px solid #ececec;
padding: 0 20px;
.rate_title {
flex: 1;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
.t1 {
font-size: 16px;
color: #111;
}
.t2 {
font-size: 12px;
color: #999;
}
}
.tab_wrap {
display: flex;
$color: #1890ff;