电商交易 - 交易分析看板图表接口对接

src/api/trade/dataBoard.js

@@ -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,
   });

src/views/trade/dataBoard.vue

@@ -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,
+    left: 26,
-    right: 20,
+    right: 26,
     bottom: 40,  // 底部留白给图例
   },
   xAxis: [
@@ -538,13 +537,12 @@ const resizeChart = () => {
 const loadEchartsData = async () => {
   try {
     let response = await getEchartsData({
-      queryStartTime: startDate.value,
+      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value,
+      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({}, {
+      initTopLeftData();
-        salesTotalAmount: 0, //销售总额
-        orderTotalNum: 0, //订单总数
-        viewCount: 0, //浏览量
-        refundSuccessAmout: 0, //成功退款金额
-      });
     }
   } catch (error) {
-    topLeftData.value = Object.assign({}, {
+    initTopLeftData();
-        salesTotalAmount: 0, //销售总额
-        orderTotalNum: 0, //订单总数
-        viewCount: 0, //浏览量
-        refundSuccessAmout: 0, //成功退款金额
-      });
   }
 };
 
@@ -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,
+      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value,
+      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,
+      queryStartTime: startDate.value + " 00:00:00",
-      queryEndTime: endDate.value,
+      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);
 });
 // 组件卸载前销毁图表