feat: 统计部分

src/api/statistics/statistics.js

@@ -284,3 +284,28 @@ export function rewardMoneyTrend(param){
     data: safeParam
   })
 }
+
+
+/**
+ * 获取当月订单数
+ * @returns {*}
+ */
+export function thisMonthOrderCount(){
+  return request({
+    url: '/index/statistics/thisMonthOrderCount',
+    method: 'get',
+    params: {}
+  })
+}
+
+/**
+ * 获取当月收款数
+ * @returns {*}
+ */
+export function thisMonthRecvCount(){
+  return request({
+    url: '/index/statistics/thisMonthRecvCount',
+    method: 'get',
+    params: {}
+  })
+}

src/views/statistics/index.vue

@@ -477,7 +477,7 @@ import {
   analysisPreview,
   authorizationInfo,
   dealerAggregated, deaMemberTopTen, rechargeComsumption, rewardMoneyTopTen, rewardMoneyTrend,
-  smsBalance, trafficLog,
+  smsBalance, thisMonthOrderCount, thisMonthRecvCount, trafficLog,
   watchCourseTopTen, watchEndPlayTrend
 } from "@/api/statistics/statistics";
 import dayjs from 'dayjs';
@@ -522,6 +522,86 @@ const viewCharOption = {
     }
   ]
 }
+
+const thisMonthOrderCountOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '订单数',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '订单金额',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+
+const thisMonthRecvCountOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '收款数',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '收款金额',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
 const dealerOption = {
   tooltip: {
     trigger: 'axis',
@@ -629,14 +709,6 @@ const lineChartOption = {
     axisPointer: {
       type: 'cross' // 改为 'cross' 更适合折线图
     }
-    // 你可能想要自定义 tooltip 的 formatter 来显示时间和金额
-    // formatter: function (params) {
-    //   const point = params[0];
-    //   const date = new Date(point.value[0]);
-    //   // 自定义时间格式
-    //   const formattedTime = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
-    //   return `${point.seriesName}<br/>${formattedTime} : ${point.value[1]} 元`;
-    // }
   },
   grid: {
     left: '3%',
@@ -655,7 +727,6 @@ const lineChartOption = {
       // width: 100, // width 和 overflow 对于时间轴可能行为不同，按需调整
       // overflow: 'truncate',
       formatter: null // ECharts 会自动格式化时间，如需特定格式可用 function 或字符串模板
-      // 例如: formatter: '{yyyy}-{MM}-{dd}\n{HH}:{mm}'
     }
   },
   yAxis: {
@@ -679,15 +750,7 @@ const lineChartOption = {
     {
       name: '答题红包金额',
       type: 'line', // 系列类型改为 'line'
-      // data: [],  // 数据格式需要是 [[时间1, 金额1], [时间2, 金额2], ...]
-      // 时间可以是时间戳 (毫秒), 'YYYY-MM-DD HH:mm:ss' 格式字符串, 或者 Date 对象
-      // 例如: [['2023-10-26 08:00:00', 120], ['2023-10-26 09:00:00', 200]]
       data: [
-        // 示例数据，你需要用实际数据替换
-        // ['2024-01-01 10:00:00', 5.5],
-        // ['2024-01-01 11:00:00', 8.2],
-        // ['2024-01-02 09:30:00', 6.0],
-        // ['2024-01-03 14:00:00', 10.8],
       ],
       itemStyle: { // 控制数据点（标记）的样式
         color: '#409EFF'
@@ -835,6 +898,8 @@ export default {
       this.initCourseWatchChart();
       this.initAnswerRedPackViewerChart();
       this.initAnswerRedPackMoneyViewerChart();
+      this.initThisMonthOrderChart();
+      this.initThisMonthRecvChart()
 
       // 监听窗口大小变化，重新渲染图表
       window.addEventListener('resize', () => {
@@ -1036,6 +1101,9 @@ export default {
 
       this.handleAnswerRedPackMoneyViewerChart()
 
+      this.handleThisMonthRecvCount();
+      this.handleThisMonthOrderCount();
+
     },
     /**
      * 将数字添加千位分隔符
@@ -1239,6 +1307,35 @@ export default {
       })
 
     },
+    handleThisMonthOrderCount(){
+      thisMonthOrderCount().then(res=>{
+        if(res.code === 200){
+          let dates = res.dates;
+          let orderCount = res.orderCount;
+          let payPrice = res.payPrice;
+
+          thisMonthOrderCountOption.series[0].data = orderCount;
+          thisMonthOrderCountOption.series[1].data = payPrice;
+          thisMonthOrderCountOption.xAxis.data = dates;
+
+          this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
+        }
+      })
+    },
+    handleThisMonthRecvCount(){
+      thisMonthRecvCount().then(res=>{
+        if(res.code === 200){
+          let dates = res.dates;
+          let orderCount = res.orderCount;
+          let payMoney = res.payMoney;
+
+          thisMonthRecvCountOption.series[0].data = orderCount;
+          thisMonthRecvCountOption.series[1].data = payMoney;
+          thisMonthRecvCountOption.xAxis.data = dates;
+          this.thisMonthRecvChart.setOption(thisMonthRecvCountOption)
+        }
+      })
+    },
     handleViewChartData(){
       let param = this.getParam();
 
@@ -1257,6 +1354,14 @@ export default {
       })
 
     },
+    initThisMonthOrderChart(){
+      this.thisMonthOrderChart = echarts.init(this.$refs.viewerOrderChart)
+      this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
+    },
+    initThisMonthRecvChart(){
+      this.thisMonthRecvChart = echarts.init(this.$refs.viewerReceiveChart)
+      this.thisMonthRecvChart.setOption(thisMonthOrderCountOption)
+    },
     initViewerChart() {
       this.viewerChart = echarts.init(this.$refs.viewerChart)
       this.viewerChart.setOption(viewCharOption)