电商交易 - 交易分析看板图表接口对接
This commit is contained in:
parent
f941a7ec30
commit
ebdd3f4538
@ -11,7 +11,7 @@ export function getAstsTransTotals(data) {
|
||||
//获取顶部右侧数据（线形图）
|
||||
export function getEchartsData(data) {
|
||||
return request({
|
||||
url: "/brand/brandbase/save",
|
||||
url: "/tairui-transettle/astsInfo/getSalesChartData",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
|
||||
@ -197,7 +197,6 @@ import img2 from "@/assets/images/second.png";
|
||||
import img3 from "@/assets/images/third.png";
|
||||
import alert from "@/assets/images/alert.png";
|
||||
let tomato = ref("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/backend/a866613495ed4678957a4440b8d3776c.png");
|
||||
import bottomLefttableData from "./bottomLeft.json"
|
||||
|
||||
// 图表 DOM 引用
|
||||
const chartRef = ref(null);
|
||||
@ -284,8 +283,8 @@ const option = {
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: 20,
|
||||
right: 20,
|
||||
left: 26,
|
||||
right: 26,
|
||||
bottom: 40, // 底部留白给图例
|
||||
},
|
||||
xAxis: [
|
||||
@ -538,13 +537,12 @@ const resizeChart = () => {
|
||||
const loadEchartsData = async () => {
|
||||
try {
|
||||
let response = await getEchartsData({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value,
|
||||
queryStartTime: startDate.value + " 00:00:00",
|
||||
queryEndTime: endDate.value + " 23:59:59",
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
option.xAxis[0].data = response.data?.xData ?? generateDateArray(7);
|
||||
option.xAxis[0].data = response.data?.xdata ?? generateDateArray(7);
|
||||
option.series[0].data = response.data?.totalSalesData;
|
||||
option.series[1].data = response.data?.totalOrdersData;
|
||||
option.series[2].data = response.data?.pageViewData;
|
||||
@ -556,7 +554,7 @@ const loadEchartsData = async () => {
|
||||
} catch (error) { }
|
||||
};
|
||||
const echartsMockData = (count = 7) => {
|
||||
console.log("右上角图表数据更新");
|
||||
// console.log("右上角图表数据更新");
|
||||
const xzData = generateDateArray(count);
|
||||
let obj = Mock.mock({
|
||||
// x轴数据 (日期/月份)
|
||||
@ -579,7 +577,6 @@ const echartsMockData = (count = 7) => {
|
||||
option.series[1].data = obj.totalOrdersData;
|
||||
option.series[2].data = obj.pageViewData;
|
||||
option.series[3].data = obj.refundAmountData;
|
||||
console.log(option);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
const generateDateArray = (count) => {
|
||||
@ -604,21 +601,19 @@ let dateRadio = ref(1);
|
||||
let startDate = ref('');
|
||||
let endDate = ref('');
|
||||
const changeDateRadio = (val) => {
|
||||
console.log(val);
|
||||
// val 1 按周 2 按月 3 按年
|
||||
let date = generateDateRange(val);
|
||||
console.log(date);
|
||||
startDate.value = date.startDate;
|
||||
endDate.value = date.endDate;
|
||||
|
||||
// 调用各个模块的方法更新数据
|
||||
loadTopLeftData();
|
||||
// loadEchartsData(); //真实图表数据
|
||||
loadEchartsData(); //真实图表数据
|
||||
loadMiddleData();
|
||||
loadbottomLeftData();
|
||||
loadbottomRightData();
|
||||
|
||||
// 测试-----------
|
||||
// 测试图表数据-----------
|
||||
let day = 7;
|
||||
if (val == 1) {
|
||||
day = 7;
|
||||
@ -627,7 +622,7 @@ const changeDateRadio = (val) => {
|
||||
} else if (val == 3) {
|
||||
day = 365;
|
||||
}
|
||||
echartsMockData(day); //模拟图表数据
|
||||
// echartsMockData(day); //模拟图表数据
|
||||
};
|
||||
|
||||
/**
|
||||
@ -675,9 +670,17 @@ function generateDateRange(type) {
|
||||
}
|
||||
|
||||
let topLeftData = ref({});
|
||||
const initTopLeftData = () => {
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: 0, //销售总额
|
||||
orderTotalNum: 0, //订单总数
|
||||
viewCount: 0, //浏览量
|
||||
refundSuccessAmout: 0, //成功退款金额
|
||||
});
|
||||
};
|
||||
// 加载数据-顶部左侧模块
|
||||
const loadTopLeftData = async () => {
|
||||
console.log('左上角数据更新');
|
||||
// console.log('左上角数据更新');
|
||||
try {
|
||||
let response = await getAstsTransTotals({
|
||||
queryStartTime: startDate.value + " 00:00:00",
|
||||
@ -687,20 +690,10 @@ const loadTopLeftData = async () => {
|
||||
if (response.code == 200) {
|
||||
topLeftData.value = response.data;
|
||||
} else {
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: 0, //销售总额
|
||||
orderTotalNum: 0, //订单总数
|
||||
viewCount: 0, //浏览量
|
||||
refundSuccessAmout: 0, //成功退款金额
|
||||
});
|
||||
initTopLeftData();
|
||||
}
|
||||
} catch (error) {
|
||||
topLeftData.value = Object.assign({}, {
|
||||
salesTotalAmount: 0, //销售总额
|
||||
orderTotalNum: 0, //订单总数
|
||||
viewCount: 0, //浏览量
|
||||
refundSuccessAmout: 0, //成功退款金额
|
||||
});
|
||||
initTopLeftData();
|
||||
}
|
||||
};
|
||||
|
||||
@ -731,7 +724,7 @@ const generateMockData = () => {
|
||||
};
|
||||
// 加载数据-中间模块
|
||||
const loadMiddleData = async () => {
|
||||
console.log('中间数据更新');
|
||||
// console.log('中间数据更新');
|
||||
// middleData.value = generateMockData();
|
||||
|
||||
try {
|
||||
@ -740,7 +733,6 @@ const loadMiddleData = async () => {
|
||||
queryEndTime: endDate.value + " 23:59:59",
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
middleData.value = response.data;
|
||||
} else {
|
||||
@ -761,35 +753,34 @@ const columns = ref([
|
||||
]);
|
||||
// 加载数据-底部左侧模块
|
||||
const loadbottomLeftData = async () => {
|
||||
console.log('左下角数据更新');
|
||||
// console.log('左下角数据更新');
|
||||
// tableLoading.value = true;
|
||||
// tableData.value = generateMockData();
|
||||
// tableData.value = bottomLefttableData.data;
|
||||
// tableLoading.value = false;
|
||||
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let response = await getGoodsSalesInfo({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value,
|
||||
queryStartTime: startDate.value + " 00:00:00",
|
||||
queryEndTime: endDate.value + " 23:59:59",
|
||||
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) { }
|
||||
} catch (error) {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 底部右侧模块
|
||||
const afterSalesData = ref({});
|
||||
// 加载数据-底部右侧模块
|
||||
const loadbottomRightData = async () => {
|
||||
console.log('右下角数据更新');
|
||||
// console.log('右下角数据更新');
|
||||
// afterSalesData.value = {
|
||||
// totalAfterSalesOrders: 1128,
|
||||
// totalRefundAmount: 265,
|
||||
@ -806,11 +797,10 @@ const loadbottomRightData = async () => {
|
||||
|
||||
try {
|
||||
let response = await getAfterSalesData({
|
||||
queryStartTime: startDate.value,
|
||||
queryEndTime: endDate.value,
|
||||
queryStartTime: startDate.value + " 00:00:00",
|
||||
queryEndTime: endDate.value + " 23:59:59",
|
||||
queryType: dateRadio.value,
|
||||
});
|
||||
console.log(response);
|
||||
if (response.code == 200) {
|
||||
afterSalesData.value = response.data;
|
||||
}
|
||||
@ -840,11 +830,11 @@ const calculateTableHeight = () => {
|
||||
};
|
||||
|
||||
onMounted(async() => {
|
||||
initTopLeftData
|
||||
await initChart();
|
||||
changeDateRadio(1);
|
||||
await nextTick();
|
||||
calculateTableHeight();
|
||||
console.log(tableViewportHeight.value);
|
||||
window.addEventListener("resize", calculateTableHeight);
|
||||
});
|
||||
// 组件卸载前销毁图表
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user