diff --git a/config/routes.js b/config/routes.js
index 2df949c..cc29f64 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -600,7 +600,7 @@ export default [
       },
       {
         name: '订单报表详情',
-        path: '/order/order-report-detail',
+        path: '/order/order-report/order-report-detail',
         component: './order/order-report-detail',
         access: 'k31',
       },
diff --git a/src/pages/order/order-report-detail/index.jsx b/src/pages/order/order-report-detail/index.jsx
index aefa3a0..1761009 100644
--- a/src/pages/order/order-report-detail/index.jsx
+++ b/src/pages/order/order-report-detail/index.jsx
@@ -1,7 +1,13 @@
-import React, { useState } from 'react';
-import { Button, Card, Image, Timeline } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Button, Card, Image, Timeline, message } from 'antd';
 import styles from './index.less';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import orderReportAPI from "./service";
+import { PageContainer } from '@ant-design/pro-layout';
+
+const orderNumber = history.location.query.orderNumber;
+
 /**
  * 订单详情
  * @returns 
@@ -9,46 +15,15 @@ import { ExclamationCircleOutlined } from '@ant-design/icons';
 export default function Index() {
 
     const [orderInfo, setOrderInfo] = useState({
-        id: '1008611',
-        sortId: '99',   //取餐号
-        orderDetail: [  //订单商品列表
-            {
-                id: 'cda34f2c-7965-46ef-8517-0bc6fae87a71',
-                goodName: '牛肉面',
-                goodImg: 'https://hbl-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee//goods/132969698918875531.jpg',
-                order_Status: 3,
-                originalMoney: 0.03
-            },
-            {
-                id: 'cda34f2c-7965-46ef-8517-0bc6fae87a72',
-                goodName: '姜鸭面',
-                goodImg: 'https://hbl-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee//goods/132969698918875531.jpg',
-                order_Status: 3,
-                originalMoney: 0.03
-            },
-        ],
-        discountMoney: 0.02,    //优惠金额
-        orderRealMoney: 0.01,   //支付金额
-        orderNumber: '202205201022415338172',
-        createdAt: '2022-05-20 02:22:41',
-        orderSourceFrom: 0,     //桌号
-        payMode: 0              //支付方式
-    });
-
-    const [memberInfo, setMemberInfo] = useState({
-        id: '4fb28567-8294-4dfc-b2ca-485dc1310837',
-        nickName: 'Emperor_',
-        phone: '18200000000',
-        headImgUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Tnw5gbRSiaekqqHYERFT4x8o8GSkkBINuStbvml530FYjyeO2EKSYouKCAZLHBX3PDLLYInn130vwda6Y3gK0yA/132',
-        createAt: '2022-05-18 11:20:44',
-        address: '四川省 成都市 高新区 环球中心9-11B'
+        memberInfo: {},
+        goodsInfo: []
     });
 
     const [saleAfterInfo, setSaleAfterInfo] = useState([
         {
             id: "acc670f8-317f-4c2d-94f5-f7af12c80ebd",
             createdAt: "2022-05-18 07:52:09",
-            stutasStr: "待处理"
+            stutasStr: "申请退款"
         },
         {
             id: "acc670f8-317f-4c2d-94f5-f7af12c80eb1",
@@ -57,157 +32,169 @@ export default function Index() {
         },
     ]);
 
+    const onQueryOrderDetail = async () => {
+        if (orderNumber) {
+            const response = await orderReportAPI.getOrderReporByNumber(orderNumber);
+            if (response.statusCode === 200) {
+                setOrderInfo(response.data);
+            } else {
+                message.error(response.errors || '订单详情获取失败');
+            }
+        }
+    }
+
+    useEffect(() => {
+        onQueryOrderDetail();
+    }, []);
+
     return (
-        <div className={styles['order-detail-container']}>
-            {/* 用户基本信息 */}
-            <div className={styles['order-head-card']}>
-                <div className={styles['order-head']}>
-                    <div className={styles['order-number']}>
-                        #{orderInfo.sortId}
-                    </div>
-                    <div className={styles['order-cook-state']}>
-                        立即制作
-                    </div>
-                    <div className={styles['order-cook-date']}>
-                        2022-6-23 10:36:42 前制作完成
-                    </div>
-                </div>
-                <div className={styles['member-info']}>
-                    <div className={styles['member-info-img']}>
-                        <img src={memberInfo.headImgUrl} alt="用户头像"></img>
+        <PageContainer>
+            <div className={styles['order-detail-container']}>
+                {/* 用户基本信息 */}
+                <div className={styles['order-head-card']}>
+                    <div className={styles['order-head']}>
+                        <div className={styles['order-number']}>
+                            #0
+                        </div>
+                        <div className={styles['order-cook-state']}>
+                            订单时间
+                        </div>
+                        <div className={styles['order-cook-date']}>
+                            {orderInfo.createdAt}
+                        </div>
                     </div>
-                    <div className={styles['member-info-row']}>
-                        <div className={styles['member-info-head']}>
-                            {memberInfo.nickName}
+                    <div className={styles['member-info']}>
+                        <div className={styles['member-info-img']}>
+                            <Image
+                                width={100}
+                                height={100}
+                                src={orderInfo.memberInfo.headUrl}
+                                fallback="data:image/png;base64,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"
+                            />
                         </div>
-                        <div className={styles['member-info-label']}>
-                            <span>#门店新客</span>
-                            <span>#门店会员</span>
+                        <div className={styles['member-info-row']}>
+                            <div className={styles['member-info-head']}>
+                                {orderInfo.memberInfo.memberName || '系统用户'}
+                            </div>
+                            <div className={styles['member-info-label']}>
+                                <span>#门店新客</span>
+                                <span>#门店会员</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div className={styles['member-info-privacy']}>
-                    <ExclamationCircleOutlined />
-                    <span>为保证服务体验，您在拨打或接听隐私号电话时，可能被录音</span>
-                </div>
-                <div className={styles['member-info-item']}>
-                    <span className={styles['member-info-prefix']}>
-                        顾客电话
-                    </span>
-                    <span className={styles['member-info-suffix']}>
-                        {memberInfo.phone}
-                    </span>
-                </div>
-                <div className={styles['member-info-item']}>
-                    <span className={styles['member-info-prefix']}>
-                        顾客地址
-                    </span>
-                    <span className={styles['member-info-suffix']}>
-                        {memberInfo.address}
-                    </span>
-                </div>
-                <div className={styles['prepare-meals']}>
+                    <div className={styles['member-info-privacy']}>
+                        <ExclamationCircleOutlined />
+                        <span>为保证服务体验，您在拨打或接听隐私号电话时，可能被录音</span>
+                    </div>
+                    <div className={styles['member-info-item']}>
+                        <span className={styles['member-info-prefix']}>
+                            顾客电话
+                        </span>
+                        <span className={styles['member-info-suffix']}>
+                            {orderInfo.memberInfo.phone || '暂无电话'}
+                        </span>
+                    </div>
+                    {/* <div className={styles['prepare-meals']}>
                     <div className={styles['prepare-meals-title']}>
                         备餐状态
                     </div>
                     <div className={styles['prepare-meals-status']}>
                         制作中
                     </div>
+                </div> */}
                 </div>
-            </div>
-            {/* 订单数据 */}
-            <div className={styles['order-base-card']}>
-                <div className={styles['goods-title']}>
-                    订单信息
-                </div>
-                <div className={styles['goods-calc-item']}>
-                    <div className={styles['goods-calc-prefix']}>订单编号</div>
-                    <div className={styles['goods-calc-sufix']}>{orderInfo.orderNumber}</div>
-                </div>
-                <div className={styles['goods-calc-item']}>
-                    <div className={styles['goods-calc-prefix']}>支付方式</div>
-                    <div className={styles['goods-calc-sufix']}>{orderInfo.payMode === 0 ? '微信支付' : '其他支付'}</div>
-                </div>
-                <div className={styles['goods-calc-item']}>
-                    <div className={styles['goods-calc-prefix']}>下单时间</div>
-                    <div className={styles['goods-calc-sufix']}>{orderInfo.createdAt}</div>
-                </div>
-                <div className={styles['goods-calc-item']}>
-                    <div className={styles['goods-calc-prefix']}>就餐人数</div>
-                    <div className={styles['goods-calc-sufix']}>商家按餐量提供</div>
-                </div>
-                <div className={styles['goods-calc-item']}>
-                    <div className={styles['goods-calc-prefix']}>桌台号码</div>
-                    <div className={styles['goods-calc-sufix']}>{orderInfo.orderSourceFrom}</div>
-                </div>
-            </div>
-            {/* 商品信息 */}
-            <div className={styles['goods-card']}>
-                <div className={styles['goods-title']}>
-                    商品信息
+                {/* 订单数据 */}
+                <div className={styles['order-base-card']}>
+                    <div className={styles['goods-title']}>
+                        订单信息
+                    </div>
+                    <div className={styles['goods-calc-item']}>
+                        <div className={styles['goods-calc-prefix']}>订单编号</div>
+                        <div className={styles['goods-calc-sufix']}>{orderInfo.orderNumber}</div>
+                    </div>
+                    <div className={styles['goods-calc-item']}>
+                        <div className={styles['goods-calc-prefix']}>支付方式</div>
+                        <div className={styles['goods-calc-sufix']}>微信支付</div>
+                    </div>
+                    <div className={styles['goods-calc-item']}>
+                        <div className={styles['goods-calc-prefix']}>下单时间</div>
+                        <div className={styles['goods-calc-sufix']}>{orderInfo.createdAt}</div>
+                    </div>
+                    <div className={styles['goods-calc-item']}>
+                        <div className={styles['goods-calc-prefix']}>就餐人数</div>
+                        <div className={styles['goods-calc-sufix']}>商家按餐量提供</div>
+                    </div>
+                    <div className={styles['goods-calc-item']}>
+                        <div className={styles['goods-calc-prefix']}>桌台号码</div>
+                        <div className={styles['goods-calc-sufix']}>0</div>
+                    </div>
                 </div>
-                <div className={styles['goods-list']}>
-                    {
-                        orderInfo.orderDetail.map(item => {
-                            return (
-                                <div className={styles['goods-item']} key={item.id}>
-                                    <div className={styles['goods-item-img']}>
-                                        <img src={item.goodImg} alt="商品图片"></img>
-                                    </div>
-                                    <div className={styles['goods-item-name']}>
-                                        {item.goodName}
-                                    </div>
-                                    <div className={styles['goods-item-price']}>
-                                        ￥{item.originalMoney}
-                                    </div>
-                                    <div className={styles['goods-item-count']}>
-                                        x1份
-                                    </div>
-                                    <div className={`${styles['goods-item-state']} ${styles['product-show-state']} ${styles[`product-show-${item.order_Status}`]}`}>
-                                        {item.order_Status === 0 ? '等待制作' : ''}
-                                        {item.order_Status === 1 ? '制作中' : ''}
-                                        {item.order_Status === 2 ? '等待取餐' : ''}
-                                        {item.order_Status === 3 ? '取餐完成' : ''}
-                                        {item.order_Status === 99998 ? '正常订单' : ''}
-                                        {item.order_Status === 99999 ? '异常订单' : ''}
+                {/* 商品信息 */}
+                <div className={styles['goods-card']}>
+                    <div className={styles['goods-title']}>
+                        商品信息
+                    </div>
+                    <div className={styles['goods-list']}>
+                        {
+                            orderInfo.goodsInfo.map(item => {
+                                return (
+                                    <div className={styles['goods-item']} key={item.goodsId}>
+                                        <div className={styles['goods-item-img']}>
+                                            <Image
+                                                width={80}
+                                                height={80}
+                                                src={item.goodsImg}
+                                                fallback="data:image/png;base64,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"
+                                            />
+                                        </div>
+                                        <div className={styles['goods-item-name']}>
+                                            {item.goodsName || '暂无名称'}
+                                        </div>
+                                        <div className={styles['goods-item-price']}>
+                                            ￥{item.memberPrice}
+                                        </div>
+                                        <div className={styles['goods-item-count']}>
+                                            x{item.count}份
+                                        </div>
                                     </div>
-                                </div>
-                            )
-                        })
-                    }
-                </div>
-                {/* 小计 */}
-                <div className={styles['goods-calc']}>
-                    <div className={styles['goods-calc-title']}>小计</div>
-                    <div className={styles['goods-calc-item']}>
-                        <div className={styles['goods-calc-prefix']}>优惠金额</div>
-                        <div className={styles['goods-calc-sufix']}>￥{orderInfo.discountMoney}</div>
+                                )
+                            })
+                        }
                     </div>
-                    <div className={`${styles['goods-calc-item']} ${styles['goods-calc-pay']}`}>
-                        <div className={styles['goods-calc-prefix']}>支付金额</div>
-                        <div className={styles['goods-calc-sufix']}>￥{orderInfo.orderRealMoney}</div>
+                    {/* 小计 */}
+                    <div className={styles['goods-calc']}>
+                        <div className={styles['goods-calc-title']}>小计</div>
+                        <div className={styles['goods-calc-item']}>
+                            <div className={styles['goods-calc-prefix']}>优惠金额</div>
+                            <div className={styles['goods-calc-sufix']}>￥{orderInfo.discountMoney}</div>
+                        </div>
+                        <div className={`${styles['goods-calc-item']} ${styles['goods-calc-pay']}`}>
+                            <div className={styles['goods-calc-prefix']}>支付金额</div>
+                            <div className={styles['goods-calc-sufix']}>￥{orderInfo.orderRealMoney}</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            {/* 售后信息 */}
-            <div className={styles['sale-after-card']}>
-                <div className={styles['goods-title']}>
-                    售后信息
+                {/* 售后信息 */}
+                <div className={styles['sale-after-card']}>
+                    <div className={styles['goods-title']}>
+                        售后信息
+                    </div>
+                    <Timeline>
+                        {
+                            saleAfterInfo.map(item => {
+                                return (
+                                    <Timeline.Item color="green" key={item.id}>
+                                        <div className={styles['sale-after-line']}>
+                                            {item.createdAt} {item.stutasStr}
+                                        </div>
+                                    </Timeline.Item>
+                                )
+                            })
+                        }
+                    </Timeline>
                 </div>
-                <Timeline>
-                    {
-                        saleAfterInfo.map(item => {
-                            return (
-                                <Timeline.Item color="green" key={item.id}>
-                                    <div className={styles['sale-after-line']}>
-                                        {item.createdAt} {item.stutasStr}
-                                    </div>
-                                </Timeline.Item>
-                            )
-                        })
-                    }
-                </Timeline>
             </div>
-        </div>
+        </PageContainer>
+
     )
 }
diff --git a/src/pages/order/order-report-detail/index.less b/src/pages/order/order-report-detail/index.less
index f6a5d24..474bef4 100644
--- a/src/pages/order/order-report-detail/index.less
+++ b/src/pages/order/order-report-detail/index.less
@@ -18,10 +18,10 @@
     width: 0;
     height: 0;
     top: 0;
-    left: 70px;
-    border-top: 25px solid transparent;
-    border-bottom: 25px solid transparent;
-    border-left: 25px solid rgb(88, 91, 110);
+    left: 50px;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-left: 20px solid rgb(88, 91, 110);
 }
 
 .order-number {
@@ -29,23 +29,23 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    width: 90px;
-    height: 50px;
+    width: 70px;
+    height: 40px;
     left: -20px;
     top: 0;
     background-color: rgb(88, 91, 110);
     color: #FFF;
-    font-size: 35px;
+    font-size: 26px;
 }
 
 .order-cook-state {
-    font-size: 30px;
-    margin-left: 130px;
+    font-size: 22px;
+    margin-left: 100px;
     margin-right: 20px;
 }
 
 .order-cook-date {
-    font-size: 20px;
+    font-size: 16px;
     color: rgb(246, 152, 38);
 }
 
@@ -55,18 +55,9 @@
 }
 
 .member-info-img {
-    width: 100px;
-    height: 100px;
     margin-right: 20px;
 }
 
-.member-info-img img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-}
-
 .member-info-row {
     display: flex;
     flex-direction: column;
@@ -74,12 +65,12 @@
 }
 
 .member-info-head {
-    font-size: 30px;
+    font-size: 22px;
     margin-right: 10px;
 }
 
 .member-info-label {
-    font-size: 20px;
+    font-size: 16px;
     color: #999;
 }
 
@@ -98,20 +89,20 @@
 }
 
 .member-info-prefix {
-    font-size: 20px;
+    font-size: 16px;
     color: rgb(88, 91, 110);
     margin-right: 10px;
 }
 
 .member-info-suffix {
-    font-size: 20px;
+    font-size: 16px;
     color: #222;
 }
 
 // 备餐状态
 .prepare-meals {
     margin-top: 20px;
-    font-size: 20px;
+    font-size: 16px;
     color: #222;
 }
 
@@ -125,7 +116,7 @@
 }
 
 .goods-title {
-    font-size: 30px;
+    font-size: 22px;
     font-weight: 700;
     margin-bottom: 10px;
 }
@@ -135,62 +126,19 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
-    font-size: 20px;
+    font-size: 16px;
     color: #222;
 }
 
-.goods-item-img {
-    width: 80px;
-    height: 80px;
-}
-
-.goods-item-img img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 10px;
-}
-
-.product-show-state {
-    border: 1px solid;
-    padding: 0px 30px;
-}
-
-.product-show-0 {
-    border-color: #51A97D;
-    color: #51A97D;
-}
-
-.product-show-1 {
-    border-color: #F84352;
-    color: #F84352;
-}
-
-.product-show-2 {
-    border-color: #800080;
-    color: #800080;
-}
-
-.product-show-3 {
-    border-color: #4169E1;
-    color: #4169E1;
-}
-
-.product-show-99999,
-.product-show-99998 {
-    border-color: #FFA500;
-    color: #FFA500;
-}
-
 // 小计
 .goods-calc {
     padding-top: 10px;
     border-top: 1px dashed #dedede;
-    font-size: 20px;
+    font-size: 16px;
 }
 
 .goods-calc-title {
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 700;
 }
 
@@ -198,7 +146,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 20px;
+    font-size: 16px;
 }
 
 .goods-calc-pay .goods-calc-sufix {
@@ -207,7 +155,7 @@
 
 // 订单信息
 .sale-after-line {
-    font-size: 18px;
+    font-size: 16px;
 }
 
 @media screen and (min-width: 1200px) {
@@ -219,7 +167,6 @@
         background-color: #FFF;
         width: 49.5%;
         box-sizing: border-box;
-        margin-bottom: 10px;
     }
 }
 
@@ -232,6 +179,5 @@
         background-color: #FFF;
         width: 100%;
         box-sizing: border-box;
-        margin-bottom: 10px;
     }
 }
\ No newline at end of file
diff --git a/src/pages/order/order-report-detail/service.js b/src/pages/order/order-report-detail/service.js
new file mode 100644
index 0000000..bc9b448
--- /dev/null
+++ b/src/pages/order/order-report-detail/service.js
@@ -0,0 +1,9 @@
+import { request } from 'umi';
+
+export default {
+    getOrderReporByNumber(orderNumber) {
+        return request(`/kitchen/api/report-statistics/order-info-report/${orderNumber}`, {
+            method: 'GET',
+        });
+    }
+};
diff --git a/src/pages/order/order-report/index.jsx b/src/pages/order/order-report/index.jsx
index dcd0de6..d8cf635 100644
--- a/src/pages/order/order-report/index.jsx
+++ b/src/pages/order/order-report/index.jsx
@@ -1,27 +1,122 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Card, DatePicker } from 'antd';
+import { Button, Card, DatePicker, Table, message, Pagination, Space } from 'antd';
 import styles from './index.less';
 const { RangePicker } = DatePicker;
+import orderReportAPI from "./service";
+import moment from 'moment';
+import { history } from "umi";
+
+const columns = [
+    {
+        title: '店铺名称',
+        dataIndex: 'shopName',
+        key: 'shopName',
+    },
+    {
+        title: '原价（￥）',
+        dataIndex: 'orderOriginalMoney',
+        key: 'orderOriginalMoney',
+    },
+    {
+        title: '优惠（￥）',
+        dataIndex: 'discountMoney',
+        key: 'discountMoney',
+    },
+    {
+        title: '实际支付（￥）',
+        dataIndex: 'orderRealMoney',
+        key: 'orderRealMoney',
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        render: (_, record) => (
+          <Space size="middle">
+            <a onClick={() => {
+                history.push({
+                    pathname: '/order/order-report/order-report-detail',
+                    query: {
+                        orderNumber: record.orderNumber
+                    }
+                });
+            }}>详情</a>
+          </Space>
+        ),
+      },
+];
+
 /**
  * 订单报表
  * @returns 
  */
 export default function Index() {
 
+    //订单报表列表
+    const [orderReportList, setOrderReportList] = useState([]);
+    const [current, setCurrent] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [total, setTotal] = useState(0);
+
+    const [timeRange, setTimeRange] = useState([
+        moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')),
+        moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
+    ]);	//日期选择器
+
+    useEffect(() => {
+        onQueryOrderReportList();
+    }, [current, pageSize]);
+
+
+
+    //获取订单列表
+    const onQueryOrderReportList = async () => {
+        const jsonData = {
+            current,
+            pageSize
+        }
+        const response = await orderReportAPI.getOrderReportList(jsonData);
+        if (response.statusCode === 200) {
+            setOrderReportList(response.data.data);
+            setTotal(response.data.total)
+        } else {
+            message.error(response.errors || '获取订单报表列表失败');
+        }
+    }
+
+    //页码变化
+    const onPageChange = (current, pageSize) => {
+        setCurrent(current);
+        setPageSize(pageSize);
+    }
+
     return (
         <PageContainer>
             <Card className={styles['data-search-card']}>
                 <div className={styles['data-search-box']}>
-                    <RangePicker />
+                    <RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
+                        let tempDate = [
+                            moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
+                            moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
+                        ]
+                        setTimeRange(tempDate);
+                    }} />
                     <div className={styles['data-search-btns']}>
                         <Button className={styles['search-btn-item']}>重置</Button>
-                        <Button className={styles['search-btn-item']} type="primary">查询</Button>
+                        <Button className={styles['search-btn-item']} type="primary" onClick={onQueryOrderReportList}>查询</Button>
                     </div>
                 </div>
             </Card>
             <Card className={styles['table-card']}>
-                订单报表
+                <Table dataSource={orderReportList} columns={columns} pagination={false} />
+                <div className={styles['table-page']}>
+                    <Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} />
+                </div>
             </Card>
         </PageContainer>
     )
diff --git a/src/pages/order/order-report/index.less b/src/pages/order/order-report/index.less
index 74d0c92..9487917 100644
--- a/src/pages/order/order-report/index.less
+++ b/src/pages/order/order-report/index.less
@@ -12,5 +12,9 @@
     margin-left: 20px;
 }
 
-.table-card {
+.table-page {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 50px;
 }
\ No newline at end of file
diff --git a/src/pages/order/order-report/service.js b/src/pages/order/order-report/service.js
new file mode 100644
index 0000000..11107ef
--- /dev/null
+++ b/src/pages/order/order-report/service.js
@@ -0,0 +1,10 @@
+import { request } from 'umi';
+
+export default {
+    getOrderReportList(data) {
+        return request(`/kitchen/api/report-statistics/order-report`, {
+            method: 'Post',
+            data: data,
+        });
+    }
+};