完成积分模块
This commit is contained in:
@@ -360,7 +360,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item6">
|
||||
<!-- <div class="item item6">
|
||||
<div class="row_wrap">
|
||||
<div class="row">
|
||||
<div class="title">净利润</div>
|
||||
@@ -375,7 +375,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -447,8 +447,15 @@
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="rate_title">
|
||||
<span class="t1">毛利率/净利率</span>
|
||||
<span class="t2">今天 {{ initInterestRateTime }} 更新</span>
|
||||
<div class="column">
|
||||
<span class="t1">毛利率</span>
|
||||
<span class="t2">今天 {{ initInterestRateTime }} 更新</span>
|
||||
</div>
|
||||
<!-- <span class="t1">毛利率/净利率</span> -->
|
||||
<el-radio-group v-model="interestRateDay" @change="profitRateBarChart">
|
||||
<el-radio-button value="7">近7天</el-radio-button>
|
||||
<el-radio-button value="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="initInterestRate" v-loading="initInterestRateLoading" class="chart" style="height: 350px" />
|
||||
@@ -457,8 +464,14 @@
|
||||
<div class="item">
|
||||
<div class="header">
|
||||
<div class="rate_title">
|
||||
<span class="t1">成本（元）</span>
|
||||
<span class="t2">今天 {{ costUpdateTime }} 更新</span>
|
||||
<div class="column">
|
||||
<span class="t1">成本（元）</span>
|
||||
<span class="t2">今天 {{ costUpdateTime }} 更新</span>
|
||||
</div>
|
||||
<el-radio-group v-model="costDay" @change="costLineChart">
|
||||
<el-radio-button value="7">近7天</el-radio-button>
|
||||
<el-radio-button value="30">30天</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="costRef" v-loading="costLoading" class="chart" style="height: 350px" />
|
||||
@@ -615,7 +628,9 @@ export default {
|
||||
initInterestRateTime: '',
|
||||
costLoading: true,
|
||||
costRef: null,
|
||||
costUpdateTime: ''
|
||||
costUpdateTime: '',
|
||||
interestRateDay: '7',
|
||||
costDay: '7'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -686,14 +701,21 @@ export default {
|
||||
* 获取分店列表
|
||||
*/
|
||||
async geiShopList() {
|
||||
let res = await ShopApi.getBranchList()
|
||||
this.branchList = res;
|
||||
this.shopId = res[0].shopId
|
||||
try {
|
||||
let res = await ShopApi.getBranchList()
|
||||
this.branchList = res;
|
||||
this.shopId = res[0].shopId
|
||||
} catch (error) {
|
||||
console.log('获取分店列表===', error);
|
||||
}
|
||||
},
|
||||
shopChange() {
|
||||
this.summarytrade();
|
||||
this.lineChartTypeChange(this.lineChartType)
|
||||
this.dateProduct()
|
||||
|
||||
this.profitRateBarChart()
|
||||
this.costLineChart()
|
||||
},
|
||||
// 切换时间
|
||||
timeChange(e, index = 0) {
|
||||
@@ -1071,7 +1093,6 @@ export default {
|
||||
],
|
||||
});
|
||||
},
|
||||
// 初始化毛利率/净利率图表
|
||||
initInterestRateChart(time, data) {
|
||||
// 销毁旧实例，避免重复创建
|
||||
if (this.initInterestRate) {
|
||||
@@ -1100,7 +1121,6 @@ export default {
|
||||
return `
|
||||
<div style="margin-bottom:4px;">${xName}</div>
|
||||
<div><span style="display:inline-block;width:8px;height:8px;background:${color1};margin-right:6px;border-radius:2px;"></span>毛利率：${profitRate}%</div>
|
||||
<div><span style="display:inline-block;width:8px;height:8px;background:${color2};margin-right:6px;border-radius:2px;"></span>净利率：${netProfitRate}%</div>
|
||||
`;
|
||||
},
|
||||
// 保留你原有的提示框样式
|
||||
@@ -1146,17 +1166,96 @@ export default {
|
||||
barGap: "0%", // 保持柱子紧贴
|
||||
barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
data: profitRateData, // 预处理后的毛利率数据
|
||||
},
|
||||
{
|
||||
name: '净利率',
|
||||
type: "bar",
|
||||
barGap: "0%",
|
||||
barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
data: netProfitRateData, // 预处理后的净利率数据
|
||||
},
|
||||
}
|
||||
],
|
||||
});
|
||||
},
|
||||
// 初始化毛利率/净利率图表
|
||||
// initInterestRateChart(time, data) {
|
||||
// // 销毁旧实例，避免重复创建
|
||||
// if (this.initInterestRate) {
|
||||
// this.initInterestRate.dispose();
|
||||
// }
|
||||
// this.initInterestRate = echarts.init(this.$refs.initInterestRate);
|
||||
|
||||
// // 预处理数据：将毛利率和净利率按索引对应（关键，用于手动匹配）
|
||||
// const profitRateData = data.map(item => item.profitRate || 0);
|
||||
// const netProfitRateData = data.map(item => item.netProfitRate || 0);
|
||||
|
||||
// this.initInterestRate.setOption({
|
||||
// tooltip: {
|
||||
// trigger: "item", // 保留 item 模式（确保能触发，之前已验证有效）
|
||||
// // 核心：手动查找当前 X 轴索引对应的另一个系列数据，拼接显示
|
||||
// formatter: (params) => {
|
||||
// const index = params.dataIndex; // 获取当前数据的索引（X轴位置）
|
||||
// const xName = time[index]; // 当前 X 轴分类名称（如时间）
|
||||
// const color1 = "#165DFF"; // 毛利率颜色（与 series 一致）
|
||||
// const color2 = "#14C9C9"; // 净利率颜色（与 series 一致）
|
||||
// // 当前系列数据 + 另一个系列数据（按索引匹配）
|
||||
// const profitRate = profitRateData[index].toFixed(2);
|
||||
// const netProfitRate = netProfitRateData[index].toFixed(2);
|
||||
|
||||
// // 拼接提示框内容（彩色方块 + 两个指标）
|
||||
// return `
|
||||
// <div style="margin-bottom:4px;">${xName}</div>
|
||||
// <div><span style="display:inline-block;width:8px;height:8px;background:${color1};margin-right:6px;border-radius:2px;"></span>毛利率：${profitRate}%</div>
|
||||
// <div><span style="display:inline-block;width:8px;height:8px;background:${color2};margin-right:6px;border-radius:2px;"></span>净利率：${netProfitRate}%</div>
|
||||
// `;
|
||||
// },
|
||||
// // 保留你原有的提示框样式
|
||||
// padding: 10,
|
||||
// textStyle: { fontSize: 11 },
|
||||
// backgroundColor: "#fff",
|
||||
// borderColor: "#eee",
|
||||
// borderWidth: 1,
|
||||
// boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
|
||||
// },
|
||||
// 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" } },
|
||||
// axisLabel: { formatter: "{value}%" }, // Y轴加百分号
|
||||
// },
|
||||
// ],
|
||||
// grid: {
|
||||
// top: '5%',
|
||||
// right: '5%',
|
||||
// bottom: '8%',
|
||||
// left: '8%',
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: "毛利率",
|
||||
// type: "bar",
|
||||
// barGap: "0%", // 保持柱子紧贴
|
||||
// barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
// data: profitRateData, // 预处理后的毛利率数据
|
||||
// },
|
||||
// {
|
||||
// name: '净利率',
|
||||
// type: "bar",
|
||||
// barGap: "0%",
|
||||
// barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
// data: netProfitRateData, // 预处理后的净利率数据
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
// },
|
||||
// 初始化销售额图表
|
||||
initPayChart(data) {
|
||||
this.payChart = echarts.init(this.$refs.payChart);
|
||||
@@ -1230,7 +1329,7 @@ export default {
|
||||
async profitRateBarChart() {
|
||||
try {
|
||||
this.initInterestRateLoading = true;
|
||||
const res = await dataSummaryApi.profitRateBarChart({ day: this.saleActive, shopId: this.shopId });
|
||||
const res = await dataSummaryApi.profitRateBarChart({ day: this.interestRateDay, shopId: this.shopId });
|
||||
|
||||
this.initInterestRateTime = dayjs().format('HH:mm')
|
||||
|
||||
@@ -1254,7 +1353,7 @@ export default {
|
||||
async costLineChart() {
|
||||
try {
|
||||
this.costLoading = true;
|
||||
const res = await dataSummaryApi.costLineChart({ day: this.saleActive, shopId: this.shopId });
|
||||
const res = await dataSummaryApi.costLineChart({ day: this.costDay, shopId: this.shopId });
|
||||
|
||||
this.costUpdateTime = dayjs().format('HH:mm')
|
||||
|
||||
@@ -1903,6 +2002,11 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.t1 {
|
||||
font-size: 16px;
|
||||
color: #111;
|
||||
|
||||
Reference in New Issue
Block a user