Web/operation-system
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

电商交易-交易分析看板页面开发对接接口

Browse Source
This commit is contained in:
郭永超 2025-06-17 17:30:45 +08:00
parent 5c89ab4ea6
commit f941a7ec30
3 changed files with 368 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/api/trade/dataBoard.js Normal file
View File

@ -0,0 +1,43 @@
import request from "@/utils/request";
// 获取顶部左侧数据（运营看板）
export function getAstsTransTotals(data) {
return request({
url: "/tairui-transettle/astsInfo/getAstsTransTotals",
method: "post",
data: data,
});
}
//获取顶部右侧数据（线形图）
export function getEchartsData(data) {
return request({
url: "/brand/brandbase/save",
method: "post",
data: data,
});
}
//获取中间数据（统计数据）
export function getMidleInfo(data) {
return request({
url: "/tairui-transettle/astsInfo/getLeftMidQueryInfo",
method: "post",
data: data,
});
}
// 获取厎部左侧数据（产品销量）
export function getGoodsSalesInfo(data) {
return request({
url: "/tairui-transettle/astsInfo/getGoodsSalesInfo",
method: "post",
data: data,
});
}
// 获取厎部右侧数据(售后概况)
export function getAfterSalesData(data) {
return request({
url: "/tairui-transettle/astsInfo/getAfterSalesData",
method: "post",
data: data,
});
}

8
src/assets/styles/custom.scss
View File

@ -305,3 +305,11 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
} }
// 溢出隐藏
.text-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

308
src/views/trade/dataBoard.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container customer-control">
<div class="app-container-data"> <div style="overflow-y: auto;overflow-x: hidden; height: 100%;">
<div class="app-container-data" ref="chartContainer">
<div class="app-container-title">运营看板 <div class="app-container-title">运营看板
<el-radio-group v-model="dateRadio" @change="changeDateRadio" size="small" style="float: right;"> <el-radio-group v-model="dateRadio" @change="changeDateRadio" size="small" style="float: right;">
<el-radio-button label="周" :value="1" /> <el-radio-button label="周" :value="1" />
@ -65,12 +66,12 @@
</div> </div>
</div> </div>
<!-- 中间模块 --> <!-- 中间模块 -->
<div class="app-container-list"> <div class="app-container-list" ref="middleRef">
<div class="app-container-block" v-for="(item,index) in middleData" :key="index"> <div class="app-container-block" v-for="(item,index) in middleData" :key="index">
<div class="app-container-block-title">{{ item.title }} <div class="app-container-block-title">{{ item.title }}
<el-popover <el-popover
title="" title=""
:content="item.tooltip" :content="item.toolTip"
placement="left-start" placement="left-start"
> >
<template #reference> <template #reference>
@ -79,17 +80,17 @@
</el-popover> </el-popover>
</div> </div>
<div class="app-container-block-price"> <div class="app-container-block-price">
{{ item.value }} {{ item.valueStr??'--' }}
<text style="font-size: 12px; color: #999999; margin-left: 5px"> <text style="font-size: 12px; color: #999999; margin-left: 5px">
{{ item.unit }} {{ item.unit??'' }}
</text> </text>
</div> </div>
<div class="app-container-block-proportion"> <div class="app-container-block-proportion">
{{ item.ratioMethod }} {{ item.ratioMethod }}：
<text :style="{'font-size': '12px',color: item.ratioStatus == '下降'?'red' : 'green'}"> <text :style="{'font-size': '12px',color: item.ratioStatus == '下降'?'red' : 'green'}">
<el-icon v-if="item.ratioStatus == '下降'"><CaretBottom /></el-icon> <el-icon v-if="item.ratioStatus == '下降'"><CaretBottom /></el-icon>
<el-icon v-else><CaretTop /></el-icon> <el-icon v-else><CaretTop /></el-icon>
{{ item.ratioValue }} {{ item.ratioValue??'' }}%
</text> </text>
</div> </div>
</div> </div>
@ -98,12 +99,13 @@
<div class="bottom-flex-box"> <div class="bottom-flex-box">
<div class="bottom-box-item"> <div class="bottom-box-item">
<div class="bottom-box-item-title">商品销量</div> <div class="bottom-box-item-title">商品销量</div>
<div class="bottom-box-item-content"> <div class="bottom-box-item-content" :style="{ height: tableViewportHeight + 'px' }">
<tableComponent <tableComponent
:table-data="tableData" :table-data="tableData"
:columns="columns" :columns="columns"
:show-border="false" :show-border="false"
:show-pagination="false" :show-pagination="false"
:loading="tableLoading"
> >
<!-- 自定义-排名图片 --> <!-- 自定义-排名图片 -->
<template #ranking="slotProps"> <template #ranking="slotProps">
@ -138,41 +140,41 @@
<div class="bottom-box-summary-value">{{ afterSalesData.totalAfterSalesOrders }}</div> <div class="bottom-box-summary-value">{{ afterSalesData.totalAfterSalesOrders }}</div>
</div> </div>
<div class="bottom-box-summary-item"> <div class="bottom-box-summary-item">
<div class="bottom-box-summary-title">仅退款订单数量(单)</div> <div class="bottom-box-summary-title">退货退款金额(元)</div>
<div class="bottom-box-summary-value">{{ afterSalesData.totalRefundOrders }}</div> <div class="bottom-box-summary-value">{{ afterSalesData.totalRefundAmount }}</div>
</div> </div>
<div class="bottom-box-summary-item"> <div class="bottom-box-summary-item">
<div class="bottom-box-summary-title">退货退款订单数量(单)</div> <div class="bottom-box-summary-title">退货退款订单数量(单)</div>
<div class="bottom-box-summary-value">{{ afterSalesData.totalReturnOrders }}</div> <div class="bottom-box-summary-value">{{ afterSalesData.totalRefundOrders }}</div>
</div> </div>
</div> </div>
<!-- 下 --> <!-- 下 -->
<div class="bottom-box-summary" style="line-height: 30px;margin: 0;"> <div class="bottom-box-summary" style="line-height: 30px;margin: 0;">
<div class="bottom-box-summary-item" style="width: 45%; "> <div class="bottom-box-summary-item">
<img :src="alert" style="width: 30px;height: 30px;" alt="" /> <img :src="alert" style="width: 30px;height: 30px;" alt="" />
<div class="bottom-box-summary-title" style="display: inline-block;vertical-align: middle;margin-left: 8px;">预警商品</div> <div class="bottom-box-summary-title" style="display: inline-block;vertical-align: middle;margin-left: 8px;">预警商品</div>
</div> </div>
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;"> <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title">退款订单量</div> <div class="bottom-box-summary-title">退款订单量</div>
</div> </div>
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;"> <div class="bottom-box-summary-item" style="width: 130px;flex: none;">
<div class="bottom-box-summary-title">退款金额</div> <div class="bottom-box-summary-title">退款金额</div>
</div> </div>
</div> </div>
<div style="overflow-y: auto; height: 200px;"> <div ref="warningGoodsRef" style="overflow-y: auto; height: 150px;" :style="{ height: tableViewportHeight -150 + 'px' }">
<div class="bottom-box-summary" style="line-height: 40px;margin: 0;" <div class="bottom-box-summary" style="line-height: 40px;margin: 0;"
v-for="(item, index) in afterSalesData.data" :key="index"> v-for="(item, index) in afterSalesData.warningProductInfos" :key="index">
<div class="bottom-box-summary-item" style="width: 30%; display: flex;"> <div class="bottom-box-summary-item" style="display: flex;">
<img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" /> <img :src="item.goodUrl" style="width: 40px;height: 40px;" alt="" />
<div class="bottom-box-summary-title text-ellipsis" style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" title="耿马西红柿耿马西红柿耿马西红柿耿马西红柿"> <div class="bottom-box-summary-title text-ellipsis" style="flex: 1; vertical-align: top;color: #000;margin-left: 8px;" :title="item.goodName">
{{ item.goodInfo }} {{ item.goodName }}
</div> </div>
</div> </div>
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;"> <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}</div> <div class="bottom-box-summary-title" style="color: #000;">{{ item.refundedOrders }}单</div>
</div> </div>
<div class="bottom-box-summary-item" style="width: 100px;flex: initial;"> <div class="bottom-box-summary-item" style="width: 120px;flex: none;">
<div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}</div> <div class="bottom-box-summary-title" style="color: #000;">{{ item.refundAmount }}元</div>
</div> </div>
</div> </div>
</div> </div>
@ -180,7 +182,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -188,13 +190,14 @@ import { onMounted, ref, onBeforeUnmount } from "vue";
import Mock from "mockjs"; import Mock from "mockjs";
import tableComponent from "@/components/tableComponent.vue"; import tableComponent from "@/components/tableComponent.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getAstsTransTotals, getEchartsData, getMidleInfo, getGoodsSalesInfo, getAfterSalesData } from "@/api/trade/dataBoard";
import img1 from "@/assets/images/first.png"; import img1 from "@/assets/images/first.png";
import img2 from "@/assets/images/second.png"; import img2 from "@/assets/images/second.png";
import img3 from "@/assets/images/third.png"; import img3 from "@/assets/images/third.png";
import alert from "@/assets/images/alert.png"; import alert from "@/assets/images/alert.png";
let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png"); let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png");
import bottomLefttableData from "./bottomLeft.json"
// 图表 DOM 引用 // 图表 DOM 引用
const chartRef = ref(null); const chartRef = ref(null);
@ -524,14 +527,7 @@ const initChart = () => {
window.addEventListener('resize', resizeChart); window.addEventListener('resize', resizeChart);
} }
}; };
// 组件卸载前销毁图表
onBeforeUnmount(() => {
if (chartInstance) {
window.removeEventListener('resize', resizeChart);
chartInstance.dispose();
chartInstance = null;
}
});
// 调整图表大小 // 调整图表大小
const resizeChart = () => { const resizeChart = () => {
if (chartInstance) { if (chartInstance) {
@ -541,17 +537,18 @@ const resizeChart = () => {
// 加载数据-图表模块 // 加载数据-图表模块
const loadEchartsData = async () => { const loadEchartsData = async () => {
try { try {
let response = await getGoodManageInfo({ let response = await getEchartsData({
queryStartTime: startDate.value, queryStartTime: startDate.value,
queryEndTime: endDate.value queryEndTime: endDate.value,
queryType: dateRadio.value,
}); });
console.log(response); console.log(response);
if (response.code == 200) { if (response.code == 200) {
option.xAxis[0].data = response.data.xData; option.xAxis[0].data = response.data?.xData ?? generateDateArray(7);
option.series[0].data = response.data.totalSalesData; option.series[0].data = response.data?.totalSalesData;
option.series[1].data = response.data.totalOrdersData; option.series[1].data = response.data?.totalOrdersData;
option.series[2].data = response.data.pageViewData; option.series[2].data = response.data?.pageViewData;
option.series[3].data = response.data.refundAmountData; option.series[3].data = response.data?.refundAmountData;
chartInstance.setOption(option); chartInstance.setOption(option);
} else { } else {
echartsMockData(7); echartsMockData(7);
@ -560,7 +557,7 @@ const loadEchartsData = async () => {
}; };
const echartsMockData = (count = 7) => { const echartsMockData = (count = 7) => {
console.log("右上角图表数据更新"); console.log("右上角图表数据更新");
const xzData = generateDateArray(count) const xzData = generateDateArray(count);
let obj = Mock.mock({ let obj = Mock.mock({
// x轴数据 (日期/月份) // x轴数据 (日期/月份)
xData: xzData, xData: xzData,
@ -616,7 +613,6 @@ const changeDateRadio = (val) => {
// 调用各个模块的方法更新数据 // 调用各个模块的方法更新数据
loadTopLeftData(); loadTopLeftData();
echartsMockData(7); //模拟图表数据
// loadEchartsData(); //真实图表数据 // loadEchartsData(); //真实图表数据
loadMiddleData(); loadMiddleData();
loadbottomLeftData(); loadbottomLeftData();
@ -631,7 +627,7 @@ const changeDateRadio = (val) => {
} else if (val == 3) { } else if (val == 3) {
day = 365; day = 365;
} }
echartsMockData(day); echartsMockData(day); //模拟图表数据
}; };
/** /**
@ -679,24 +675,33 @@ function generateDateRange(type) {
} }
let topLeftData = ref({}); let topLeftData = ref({});
// 加载数据-左上角模块 // 加载数据-顶部左侧模块
const loadTopLeftData = async () => { const loadTopLeftData = async () => {
console.log('左上角数据更新'); console.log('左上角数据更新');
topLeftData.value = Object.assign({}, { try {
salesTotalAmount: '4,541.00', //销售总额 let response = await getAstsTransTotals({
orderTotalNum: '45', //订单总数 queryStartTime: startDate.value + " 00:00:00",
viewCount: '61,151', //浏览量 queryEndTime: endDate.value + " 23:59:59",
refundSuccessAmout: '541.00', //成功退款金额 queryType: dateRadio.value,
}); });
// try { if (response.code == 200) {
// let response = await getGoodManageInfo({ topLeftData.value = response.data;
// queryStartTime: startDate.value, } else {
// queryEndTime: endDate.value topLeftData.value = Object.assign({}, {
// }); salesTotalAmount: 0, //销售总额
// if (response.code == 200) { orderTotalNum: 0, //订单总数
// topLeftData.value = response.data; viewCount: 0, //浏览量
// } refundSuccessAmout: 0, //成功退款金额
// } catch (error) { } });
}
} catch (error) {
topLeftData.value = Object.assign({}, {
salesTotalAmount: 0, //销售总额
orderTotalNum: 0, //订单总数
viewCount: 0, //浏览量
refundSuccessAmout: 0, //成功退款金额
});
}
}; };
// 中间模块 // 中间模块
@ -709,7 +714,7 @@ const generateMockData = () => {
title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])', //标题 title: '@pick(["买家数量", "支付转化率", "客单价", "退款率", "加购数量"])', //标题
value: "@float(10, 200, 2, 2)", //数值 value: "@float(10, 200, 2, 2)", //数值
unit: '@pick(["人", "%", "元", "%", "次"])', //单位 unit: '@pick(["人", "%", "元", "%", "次"])', //单位
tooltip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示 toolTip: '@pick(["购买商品人数统计", "支付转化率 = 完成支付的订单数量 + 访问网站的用户数量 x 100%", "客单价是指每一位顾客平均购买商品金额", "退款率 = （退款订单数量 + 总订单数量） x 100%", "用户将商品加入购物车次数"])', //描述提示
ratioMethod: '@pick(["环比", "同比"])', //比率方式 ratioMethod: '@pick(["环比", "同比"])', //比率方式
ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字 ratioStatus: '@pick(["上升", "下降"])', //比率状态， 后台看存储的是汉字还是数字
ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值 ratioValue: '@float(10, 20, 1, 1)' + '%', //比率值
@ -724,82 +729,132 @@ const generateMockData = () => {
], ],
}).list; }).list;
}; };
// 底部左侧模块
const tableData = ref([]);
const columns = ref([
{ prop: "ranking", label: "排名", slotName: "ranking", width: 66 },
{ prop: "goodUrl", label: "商品", slotName: "goodUrl", width: 66 },
{ prop: "goodName", label: "商品名称", width: "auto" },
{ prop: "stockToUseRatio", label: "存销比" },
{ prop: "salesAmount", label: "销售金额" },
]);
// 底部右侧模块
const afterSalesData = ref({});
// 加载数据-中间模块 // 加载数据-中间模块
const loadMiddleData = async () => { const loadMiddleData = async () => {
console.log('中间数据更新'); console.log('中间数据更新');
middleData.value = generateMockData(); // middleData.value = generateMockData();
// try {
// let response = await getGoodManageInfo({ try {
// queryStartTime: startDate.value, let response = await getMidleInfo({
// queryEndTime: endDate.value queryStartTime: startDate.value + " 00:00:00",
// }); queryEndTime: endDate.value + " 23:59:59",
// console.log(response); queryType: dateRadio.value,
// if (response.code == 200) { });
// middleData.value = response.data; console.log(response);
// } if (response.code == 200) {
// } catch (error) { } middleData.value = response.data;
} else {
middleData.value = [];
}
} catch (error) { }
}; };
// 底部左侧模块
const tableData = ref([]);
let tableLoading = ref(false);
const columns = ref([
{ prop: "ranking", label: "排名", slotName: "ranking", width: 66 },
{ prop: "goodUrl", label: "商品图片", slotName: "goodUrl", width: 80, align: "left" },
{ prop: "goodName", label: "商品名称", width: "auto", align: "left" },
{ prop: "stockToUseRatio", label: "存销比", width: 70, align: "left" },
{ prop: "salesAmount", label: "销售金额", width: 100, align: "left" },
]);
// 加载数据-底部左侧模块 // 加载数据-底部左侧模块
const loadbottomLeftData = async () => { const loadbottomLeftData = async () => {
console.log('左下角数据更新'); console.log('左下角数据更新');
tableData.value = generateMockData(); // tableLoading.value = true;
// try { // tableData.value = generateMockData();
// let response = await getGoodManageInfo({ // tableData.value = bottomLefttableData.data;
// queryStartTime: startDate.value, // tableLoading.value = false;
// queryEndTime: endDate.value
// }); try {
// console.log(response); tableLoading.value = true;
// if (response.code == 200) { let response = await getGoodsSalesInfo({
// tableData.value = response.data; queryStartTime: startDate.value,
// } queryEndTime: endDate.value,
// } catch (error) { } queryType: dateRadio.value,
orderByType: 0 // 0: 按照销售金额排序 2: 按照销售数量排序
});
tableLoading.value = false;
console.log(response);
if (response.code == 200) {
tableData.value = response.data;
} else {
tableData.value = [];
}
} catch (error) { }
}; };
// 底部右侧模块
const afterSalesData = ref({});
// 加载数据-底部右侧模块 // 加载数据-底部右侧模块
const loadbottomRightData = async () => { const loadbottomRightData = async () => {
console.log('右下角数据更新'); console.log('右下角数据更新');
afterSalesData.value = { // afterSalesData.value = {
totalAfterSalesOrders: 1128, // totalAfterSalesOrders: 1128,
totalRefundOrders: 265, // totalRefundAmount: 265,
totalReturnOrders: 129, // totalRefundOrders: 129,
data: [ // warningProductInfos: [
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "25单", refundAmount: '129元' }, // { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '129元' },
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' }, // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '265元' },
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' }, // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '146元' },
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "25单", refundAmount: '239元' }, // { goodUrl: tomato.value, goodName: "耿马西红柿耿马西红柿耿马西红柿耿马西红柿耿马西红柿", refundedOrders: "25单", refundAmount: '239元' },
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' }, // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "36单", refundAmount: '365元' },
{ goodUrl: tomato.value, goodInfo: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' }, // { goodUrl: tomato.value, goodName: "耿马西红柿", refundedOrders: "51单", refundAmount: '198元' },
], // ],
}; // };
// try {
// let response = await getGoodManageInfo({ try {
// queryStartTime: startDate.value, let response = await getAfterSalesData({
// queryEndTime: endDate.value queryStartTime: startDate.value,
// }); queryEndTime: endDate.value,
// console.log(response); queryType: dateRadio.value,
// if (response.code == 200) { });
// tableData.value = response.data; console.log(response);
// } if (response.code == 200) {
// } catch (error) { } afterSalesData.value = response.data;
}
} catch (error) { }
}; };
const chartContainer = ref(null);
const middleRef = ref(null);
const warningGoodsRef = ref(null);
const tableViewportHeight = ref(0);
// 精确计算可用高度
const calculateTableHeight = () => {
// 获取窗口总高度
const windowHeight = window.innerHeight;
// 获取各组件高度
const chartContainerHeight = chartContainer.value?.offsetHeight || 0;
const middleRefHeight = middleRef.value?.offsetHeight || 0;
// 计算容器内边距补偿（根据实际样式调整）
const paddingCompensation = 306;
// 最终计算
const height = windowHeight - chartContainerHeight - middleRefHeight - paddingCompensation;
tableViewportHeight.value = height < 300 ? 300 : height;
};
onMounted(async() => { onMounted(async() => {
await initChart(); await initChart();
changeDateRadio(1); changeDateRadio(1);
await nextTick();
calculateTableHeight();
console.log(tableViewportHeight.value);
window.addEventListener("resize", calculateTableHeight);
});
// 组件卸载前销毁图表
onBeforeUnmount(() => {
if (chartInstance) {
window.removeEventListener('resize', resizeChart);
chartInstance.dispose();
chartInstance = null;
}
window.removeEventListener('resize', calculateTableHeight);
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -902,13 +957,17 @@ onMounted(async() => {
font-weight: bold; font-weight: bold;
} }
.bottom-box-item-content { .bottom-box-item-content {
height: 350px; height: 300px;
min-height: 300px;
.bottom-box-summary { .bottom-box-summary {
display: flex; display: flex;
margin: 10px 0; margin: 10px 0;
gap: 20px; gap: 20px;
width: 100%;
.bottom-box-summary-item { .bottom-box-summary-item {
flex: 1; flex: 1;
min-width: 0;
overflow: hidden;
.bottom-box-summary-title { .bottom-box-summary-title {
font-size: 16px; font-size: 16px;
color: #999; color: #999;
@ -921,15 +980,6 @@ onMounted(async() => {
} }
} }
} }
.custom-table-container {
padding-bottom: 0;
} }
}
}
.text-ellipsis {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
width: 100%; /* 必须设置宽度 */
} }
</style> </style>