订单统计接口联调完成

public/index.html

@@ -35,10 +35,10 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV==='dev' ) { %>
     <script>
-      window.SITE_CONFIG['apiURL'] = 'https://transcend.ringzle.com/chuangheng-admin';
+      // window.SITE_CONFIG['apiURL'] = 'https://transcend.ringzle.com/chuangheng-admin';
       // window.SITE_CONFIG['apiURL'] = 'http://172.16.0.3:443/chuangheng-admin';//生产内网地址
       // window.SITE_CONFIG['apiURL'] = 'https://wxapp.transcend-intl.cn/chuangheng-admin';
-      // window.SITE_CONFIG['apiURL'] = 'http://192.168.2.16:9021/chuangheng-admin';
+      window.SITE_CONFIG['apiURL'] = 'http://192.168.2.19:9021/chuangheng-admin';
       window.SITE_CONFIG['apiURL1'] = 'http://gpu.ringzle.com:8082/iot';
       window.SITE_CONFIG['apiURL2'] = 'http://gpu.ringzle.com:8082/witcarbon-gica';
       // 李勇本机地址

src/api/agent/indexTwo.js

@@ -1,5 +1,39 @@
 import request from '@/utils/request2'
 
+// ---start 订单统计
+export function getOrderHeadData(query) {
+  return request({
+    url: `/core.v2/queorder/orderHeaderStats`,
+    method: 'get',
+    params: query
+  })
+}
+export function getOrderCount(query) {
+  return request({
+    url: `/core.v2/queorder/orderCount`,
+    method: 'get',
+    params: query
+  })
+}
+export function getPayUserCount(query) {
+  return request({
+    url: `/core.v2/queorder/payUserCount`,
+    method: 'get',
+    params: query
+  })
+}
+export function getOrderMoney(query) {
+  return request({
+    url: `/core.v2/queorder/orderAmountCount`,
+    method: 'get',
+    params: query
+  })
+}
+// ---end 订单统计
+
+// ---start 用户分析
+// ---end 用户分析
+
 // ---start 小程序用户管理
 export function getWechatUserList(query) {
   return request({

src/views/modules/statistics/order.vue

@@ -5,73 +5,73 @@
                 <div class="top-pre-num adfacjb">
                     <div class="top-pre-num-l">
                         <p>支付订单数</p>
-                        <p class="n">{{ 24589 }}</p>
+                        <p class="n">{{ headData?.payOrderCount??0 }}</p>
                     </div>
                     <div class="top-pre-num-r">
                         <img src="@/assets/images/agent/order_img1.png">
                     </div>
                 </div>
                 <div class="top-pre-text adfac">
-                    <div class="tn">较上周&nbsp;{{ -1.32 }}%&nbsp;<i class="el-icon-caret-bottom" style="color: #FD4F66;"></i></div>
+                    <div class="tn">较上周&nbsp;{{ headData?.increasePayOrderCount??0 }}%&nbsp;<i class="el-icon-caret-top" style="color: #33A7A7;"></i></div>
                 </div>
             </div>
             <div class="top-pre">
                 <div class="top-pre-num adfacjb">
                     <div class="top-pre-num-l">
                         <p>支付人数</p>
-                        <p class="n">{{ 679 }}</p>
+                        <p class="n">{{ headData?.payUserCount??0 }}</p>
                     </div>
                     <div class="top-pre-num-r">
                         <img src="@/assets/images/agent/order_img2.png">
                     </div>
                 </div>
                 <div class="top-pre-text adfac">
-                    <div class="tn">较上周&nbsp;{{ +1.32 }}%&nbsp;<i class="el-icon-caret-top" style="color: #33A7A7;"></i></div>
+                    <div class="tn">较上周&nbsp;{{ headData?.increasePayUserCount??0 }}%&nbsp;<i class="el-icon-caret-top" style="color: #33A7A7;"></i></div>
                 </div>
             </div>
             <div class="top-pre">
                 <div class="top-pre-num adfacjb">
                     <div class="top-pre-num-l">
                         <p>支付金额(元)</p>
-                        <p class="n">{{ 1234567.89 }}</p>
+                        <p class="n">{{ headData?.totalOrderAmount??0 }}</p>
                     </div>
                     <div class="top-pre-num-r">
                         <img src="@/assets/images/agent/order_img3.png">
                     </div>
                 </div>
                 <div class="top-pre-text adfac">
-                    <div class="tn half">基础版&nbsp;{{ 234 }}</div>
-                    <div class="tn half">专业版&nbsp;{{ 9870 }}</div>
+                    <div class="tn half">基础版&nbsp;{{ headData?.baseOrderAmount??0 }}</div>
+                    <div class="tn half">专业版&nbsp;{{ headData?.proOrderAmount??0 }}</div>
                 </div>
             </div>
             <div class="top-pre">
                 <div class="top-pre-num adfacjb">
                     <div class="top-pre-num-l">
                         <p>专业版总销量（次数）</p>
-                        <p class="n">{{ 7289 }}</p>
+                        <p class="n">{{ headData?.proSaleCount??0 }}</p>
                     </div>
                     <div class="top-pre-num-r">
                         <img src="@/assets/images/agent/order_img4.png">
                     </div>
                 </div>
                 <div class="top-pre-text adfac">
-                    <div class="tn half">待使用&nbsp;{{ 23 }}</div>
-                    <div class="tn half">已使用&nbsp;{{ 9 }}</div>
+                    <div class="tn half">待使用&nbsp;{{ headData?.proWaitCount??0 }}</div>
+                    <div class="tn half">已使用&nbsp;{{ headData?.proUsedCount??0 }}</div>
                 </div>
             </div>
             <div class="top-pre">
                 <div class="top-pre-num adfacjb">
                     <div class="top-pre-num-l">
                         <p>基础版总销量（次数）</p>
-                        <p class="n">{{ 4589 }}</p>
+                        <p class="n">{{ headData?.baseSaleCount??0 }}</p>
                     </div>
                     <div class="top-pre-num-r">
                         <img src="@/assets/images/agent/order_img5.png">
                     </div>
                 </div>
                 <div class="top-pre-text adfac">
-                    <div class="tn half">待使用&nbsp;{{ 123 }}</div>
-                    <div class="tn half">已使用&nbsp;{{ 19 }}</div>
+                    <div class="tn half">待使用&nbsp;{{ headData?.baseWaitCount??0 }}</div>
+                    <div class="tn half">已使用&nbsp;{{ headData?.baseUsedCount??0 }}</div>
                 </div>
             </div>
         </div>
@@ -91,11 +91,15 @@
         </div>
         <div class="bottom">
             <div class="date adfac">
-                <div class="date-pre" :class="{'active':didx==1}" @click="changeDate(1)">本周</div>
+                <div class="date-pre" :class="{'active':didx==1}" @click="changeDate(1)">近7天</div>
                 <div class="date-pre" :class="{'active':didx==2}" @click="changeDate(2)">本月</div>
-                <el-select v-model="queryDate" placeholder="自定义时间" @change="changeCusDate" style="width: 167px;">
-                    <el-option label="近10天" value="10"></el-option>
-                </el-select>
+                <el-date-picker @change="changeCusDate"
+                    v-model="queryParams.startEndTime"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                </el-date-picker>
             </div>
             <div class="box adffc">
                 <div class="box-title">订单金额</div>
@@ -109,29 +113,88 @@
 
 <script setup name="">
     import * as echarts from "echarts";
+    import {
+        getOrderHeadData,
+        getOrderCount,
+        getPayUserCount,
+        getOrderMoney
+    } from '@/api/agent/indexTwo.js'
     import { ref, getCurrentInstance, onMounted } from 'vue'
     const { proxy } = getCurrentInstance();
     
     const didx = ref(1)
-    const queryDate = ref('')
+    const queryParams = ref({
+        beginTime:'',
+        endTime:'',
+        startEndTime:'',
+        type:1
+    })
+    const headData = ref({})
     const ddtjRef = ref(null)
     const zfrsRef = ref(null)
     const ddjeRef = ref(null)
 
     const changeDate = (idx) => {
-        didx.value = idx
+        if(idx===didx.value) return
+        didx.value = idx;
+        queryParams.value.type = idx;
+        queryParams.value.beginTime = '';
+        queryParams.value.endTime = '';
+        queryParams.value.startEndTime = '';
+        getOrderMoneyFn()
+    }
+    const changeCusDate = (e) => {
+        didx.value = '';
+        queryParams.value.type = 3;
+        queryParams.value.beginTime = proxy.parseTime(new Date(e[0]), '{yy}-{mm}-{dd}');
+        queryParams.value.endTime = proxy.parseTime(new Date(e[1]), '{yy}-{mm}-{dd}');
+        getOrderMoneyFn()
+    }
+
+    const getOrderCountFn = () => {
+        getOrderCount({type:1}).then(res => {
+            const { startDate, endDate } = getDateRange()
+            let data = fillMissingDates(res.data,startDate,endDate)
+            let xdata = data.map(item => item.dateDay)
+            let ydata = data.map(item => item.stats)
+            initDdtjEcharts(xdata,ydata)
+        })
     }
-    const changeCusDate = () => {
-        didx.value = ''
+    const getPayUserCountFn = () => {
+        getPayUserCount({type:1}).then(res => {
+            const { startDate, endDate } = getDateRange()
+            let data = fillMissingDates(res.data,startDate,endDate)
+            let xdata = data.map(item => item.dateDay)
+            let ydata = data.map(item => item.stats)
+            initZfrsEcharts(xdata,ydata)
+        })
+    }
+    const getOrderMoneyFn = () => {
+        let params = JSON.parse(JSON.stringify(queryParams.value))
+        delete params.startEndTime;
+        getOrderMoney(params).then(res => {
+            let startDate = '', endDate = '';
+            if(queryParams.value.type<3){
+                startDate = getDateRange(queryParams.value.type).startDate;
+                endDate = getDateRange(queryParams.value.type).endDate;
+            }else{
+                startDate = queryParams.value.beginTime;
+                endDate = queryParams.value.endTime;
+            }
+            let data = fillMissingDates(res.data,startDate,endDate)
+            let xdata = data.map(item => item.dateDay)
+            let ydata = data.map(item => item.stats)
+            initDdjeEcharts(xdata,ydata)
+        })
     }
 
-    const initDdtjEcharts = () => {
+    const initDdtjEcharts = (xdata,ydata) => {
         const ddtjChart = echarts.init(ddtjRef.value)
         let option = {
             color: ['#33A7A7'],
             xAxis: {
                 type: 'category',
-                data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+                data: xdata
             },
             yAxis: {
                 type: 'value'
@@ -143,9 +206,23 @@
                 bottom: '1%',
                 containLabel: true
             },
+            tooltip: {
+                trigger: 'axis',
+                // backgroundColor: '#FFFFFF',
+                // textStyle: {
+                //     fontSize: 16
+                // },
+                // formatter: function (params) {
+                //     let result = params[0].name + '<br/>'
+                //     params.forEach(item => {
+                //         result += '订单笔数：' + item.value + '<br/>'
+                //     })
+                //     return result;
+                // }
+            },
             series: [
                 {
-                data: [450, 700, 550, 820, 500, 900, 450],
+                data: ydata,
                 type: 'line',
                 smooth: true,
                 lineStyle: {
@@ -170,17 +247,20 @@
         };
         ddtjChart.setOption(option)
     }
-    const initZfrsEcharts = () => {
+    const initZfrsEcharts = (xdata,ydata) => {
         const zfrsChart = echarts.init(zfrsRef.value)
         let option = {
             color: ['#33A7A7'],
             xAxis: {
                 type: 'category',
-                data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+                data: xdata
             },
             yAxis: {
                 type: 'value'
             },
+            tooltip: {
+                trigger: 'axis'
+            },
             grid: {
                 left: '1%',
                 right: '1%',
@@ -190,7 +270,7 @@
             },
             series: [
                 {
-                data: [450, 700, 550, 820, 500, 900, 450],
+                data: ydata,
                 type: 'line',
                 smooth: true,
                 lineStyle: {
@@ -215,17 +295,20 @@
         };
         zfrsChart.setOption(option)
     }
-    const initDdjeEcharts = () => {
+    const initDdjeEcharts = (xdata,ydata) => {
         const ddjeChart = echarts.init(ddjeRef.value)
         let option = {
             color: ['#33A7A7'],
             xAxis: {
                 type: 'category',
-                data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07','11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07']
+                data: xdata
             },
             yAxis: {
                 type: 'value'
             },
+            tooltip: {
+                trigger: 'axis'
+            },
             grid: {
                 left: '1%',
                 right: '1%',
@@ -235,7 +318,7 @@
             },
             series: [
                 {
-                data: [450, 700, 550, 820, 500, 900, 440, 450, 700, 550, 820, 500, 900, 440],
+                data: ydata,
                 type: 'line',
                 smooth: true,
                 lineStyle: {
@@ -261,10 +344,119 @@
         ddjeChart.setOption(option)
     }
 
+    /**
+     * 填充指定日期范围内缺失的数据。
+     * 该函数会确保从开始日期到结束日期的每一天都有一条数据记录。
+     * 如果某天的数据不存在，则会使用指定的默认值进行填充。
+     *
+     * @param {Array<Object>} dataList - 原始数据数组，例如 [{stats: 2, dateDay: "2025-11-06"}]
+     * @param {string} startDateStr - 开始日期字符串, 格式为 "YYYY-MM-DD"
+     * @param {string} endDateStr - 结束日期字符串, 格式为 "YYYY-MM-DD"
+     * @param {Object} options - (可选) 配置项
+     * @param {string} options.dateKey - (可选) 数据对象中表示日期的属性名，默认为 'dateDay'
+     * @param {Object} options.defaultValue - (可选) 缺失日期的默认数据对象，默认为 { stats: 0 }
+     * @returns {Array<Object>} 填充完毕的完整数据数组
+     */
+    function fillMissingDates(dataList, startDateStr, endDateStr, options = {}) {
+        const {
+            dateKey = 'dateDay',
+            defaultValue = { stats: 0 }
+        } = options;
+
+        const dataMap = new Map(dataList.map(item => [item[dateKey], item]));
+        const result = [];
+        
+        // 注意：这里的 new Date() 也会受时区影响，但配合下面的循环和 formatLocalDate 可以正确工作
+        const currentDate = new Date(startDateStr);
+        const endDate = new Date(endDateStr);
+
+        // 将 currentDate 的时间部分设置为中午12点，可以更稳妥地避免夏令时等边界问题
+        currentDate.setHours(12, 0, 0, 0);
+        endDate.setHours(12, 0, 0, 0);
+
+        while (currentDate <= endDate) {
+            const dateString = formatDate(currentDate);
+
+            if (dataMap.has(dateString)) {
+                result.push(dataMap.get(dateString));
+            } else {
+                result.push({
+                    ...defaultValue,
+                    [dateKey]: dateString,
+                });
+            }
+
+            // 将日期增加一天
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+
+        return result;
+    }
+
+    /**
+     * 格式化日期对象为 'YYYY.MM.DD' 格式的字符串
+     * @param {Date} date - 需要格式化的日期对象
+     * @returns {string} - 格式化后的日期字符串
+     */
+    function formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+
+    /**
+     * 根据类型获取指定的日期范围
+     * @param {number} type - 类型 (1: 近7天, 2: 本月, 3: 本周)
+     * @returns {{startDate: string, endDate: string} | {startDate: null, endDate: null}}
+     */
+    function getDateRange(type=1) {
+        const today = new Date();
+        // 为了避免跨天等时区问题，将时间统一设置为当天的零点
+        today.setHours(0, 0, 0, 0);
+
+        let startDate = new Date(today);
+        const endDate = new Date(today); // 结束日期在所有情况下都是今天
+
+        switch (type) {
+            case 1:
+            // --- 近7天 ---
+            // 开始日期 = 今天 - 6天 (总共7天)
+            startDate.setDate(today.getDate() - 6);
+            break;
+
+            case 2:
+            // --- 本月 (从1号到今天) ---
+            // 直接将开始日期的日设置为1号
+            startDate.setDate(1);
+            break;
+
+            case 3:
+            // --- 本周 (从周一到今天) ---
+            // getDay() 返回 0(周日)-6(周六)。我们希望周一是1，周日是7
+            const dayOfWeek = today.getDay() === 0 ? 7 : today.getDay();
+            // 开始日期 = 今天 - (今天是本周第几天 - 1)
+            startDate.setDate(today.getDate() - (dayOfWeek - 1));
+            break;
+
+            default:
+            console.error("无效的类型参数，请输入 1, 2, 或 3。");
+            return { startDate: null, endDate: null };
+        }
+
+        return {
+            startDate: formatDate(startDate),
+            endDate: formatDate(endDate),
+        };
+    }
+
     onMounted(()=>{
-        initDdtjEcharts()
-        initZfrsEcharts()
-        initDdjeEcharts()
+        getOrderHeadData().then(res=>{
+            headData.value = res.data;
+        })
+        getOrderCountFn()
+        getPayUserCountFn()
+        getOrderMoneyFn()
         proxy.$nextTick(()=>{
             
         })