Bladeren bron

新增营销报表

tags/小炒逻辑变更前
yangwenhua 2 jaren geleden
bovenliggende
commit
2d1e224dfa
3 gewijzigde bestanden met toevoegingen van 506 en 0 verwijderingen
  1. +6
    -0
      config/routes.js
  2. +484
    -0
      src/pages/order/order-market-report/index.jsx
  3. +16
    -0
      src/pages/order/order-market-report/index.less

+ 6
- 0
config/routes.js Bestand weergeven

@@ -586,6 +586,12 @@ export default [
component: './order/exOrder',
access: 'k31',
},
{
name: '营销报表',
path: '/order/order-market-report',
component: './order/order-market-report',
access: 'k31',
},
],
},
{


+ 484
- 0
src/pages/order/order-market-report/index.jsx Bestand weergeven

@@ -0,0 +1,484 @@
import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Table, Card, DatePicker } from 'antd';
import styles from './index.less';

const { RangePicker } = DatePicker;
const columns = [
{
title: '时间',
dataIndex: 'date',
key: 'date',
width: 170,
align: 'center',
fixed: 'left'
},
{
title: '店铺',
dataIndex: 'storeName',
key: 'storeName',
width: 170,
align: 'center',
fixed: 'left',
filters: [
{
text: '四川黑菠萝科技',
value: '四川黑菠萝科技',
},
{
text: '四川白菠萝科技',
value: '四川白菠萝科技',
}
],
onFilter: (value, record) => record.storeName.indexOf(value) === 0,
},
{
title: '营收',
dataIndex: 'revenue',
key: 'revenue',
children: [
{
title: '营业额',
dataIndex: 'turnover',
key: 'turnover',
children: [
{
title: '流水',
dataIndex: 'flowingWater',
key: 'flowingWater',
width: 100,
align: 'center',
},
{
title: '实收',
dataIndex: 'netReceipts',
key: 'netReceipts',
width: 100,
align: 'center',
},
]
},
{
title: '优惠明细',
dataIndex: 'discountDetails',
key: 'discountDetails',
children: [
{
title: '会员价',
dataIndex: 'membershipPrice',
key: 'membershipPrice',
width: 100,
align: 'center',
},
{
title: '优惠券',
dataIndex: 'coupon',
key: 'coupon',
width: 100,
align: 'center',
},
{
title: '活动',
dataIndex: 'activity',
key: 'activity',
width: 100,
align: 'center',
}
]
},
]
},
{
title: '分类营收',
dataIndex: 'classifiedRevenue',
key: 'classifiedRevenue',
children: [
{
title: '外卖营业额',
dataIndex: 'takeOutTurnover',
key: 'takeOutTurnover',
children: [
{
title: '外卖营收',
dataIndex: 'takeOutRevenue',
key: 'takeOutRevenue',
width: 100,
align: 'center',
},
{
title: '美团外卖',
dataIndex: 'meituanTakeout',
key: 'meituanTakeout',
width: 100,
align: 'center',
},
{
title: '饿了么外卖',
dataIndex: 'hungryTakeOut',
key: 'hungryTakeOut',
width: 100,
align: 'center',
},
]
},
{
title: '食堂营收',
dataIndex: 'canteenRevenue',
key: 'canteenRevenue',
children: [
{
title: '堂食流水',
dataIndex: 'freshWaterInTheHall',
key: 'freshWaterInTheHall',
width: 100,
align: 'center',
},
{
title: '堂食实收',
dataIndex: 'paidInFood',
key: 'paidInFood',
width: 100,
align: 'center',
}
]
},
{
title: '第三方平台营收',
dataIndex: 'thirdPartyPlatformRevenue',
key: 'thirdPartyPlatformRevenue',
children: [
{
title: '大众点评',
dataIndex: 'publicComments',
key: 'publicComments',
width: 100,
align: 'center',
},
{
title: '口碑',
dataIndex: 'wordOfMouth',
key: 'wordOfMouth',
width: 100,
align: 'center',
},
{
title: '抖音',
dataIndex: 'tiktok',
key: 'tiktok',
width: 100,
align: 'center',
}
]
},
]
},
{
title: '堂食单价',
dataIndex: 'unitPriceCanteenFood',
key: 'unitPriceCanteenFood',
children: [
{
title: '客单价',
dataIndex: 'customerUnitPrice',
key: 'customerUnitPrice',
children: [
{
title: '流水单价',
dataIndex: 'unitPriceOfWater',
key: 'unitPriceOfWater',
width: 100,
align: 'center',
},
{
title: '实收单价',
dataIndex: 'paidInUnitPrice',
key: 'paidInUnitPrice',
width: 100,
align: 'center',
}
]
},
{
title: '单单价',
dataIndex: 'singleUnitPrice',
key: 'singleUnitPrice',
children: [
{
title: '流水单价',
dataIndex: 'singleUnitPriceOfWater',
key: 'singleUnitPriceOfWater',
width: 100,
align: 'center',
},
{
title: '实收单价',
dataIndex: 'singlePaidInUnitPrice',
key: 'singlePaidInUnitPrice',
width: 100,
align: 'center',
}
]
},
]
},
{
title: '交易笔数',
dataIndex: 'numberOfTransactions',
key: 'numberOfTransactions',
children: [
{
title: '现金',
dataIndex: 'numCash',
key: 'numCash',
width: 100,
align: 'center',
},
{
title: '微信支付',
dataIndex: 'numWechatPayment',
key: 'numWechatPayment',
width: 100,
align: 'center',
},
{
title: '大众点评',
dataIndex: 'numPublicComments',
key: 'numPublicComments',
width: 100,
align: 'center',
},
{
title: '口碑',
dataIndex: 'numWordOfMouth',
key: 'numWordOfMouth',
width: 100,
align: 'center',
},
{
title: '抖音',
dataIndex: 'numTiktok',
key: 'numTiktok',
width: 100,
align: 'center',
},
{
title: '美团外卖',
dataIndex: 'numMeituanTakeout',
key: 'numMeituanTakeout',
width: 100,
align: 'center',
},
{
title: '饿了么外卖',
dataIndex: 'numHungryTakeOut',
key: 'numHungryTakeOut',
width: 100,
align: 'center',
},
]
},
{
title: '收入构成',
dataIndex: 'revenueComposition',
key: 'revenueComposition',
children: [
{
title: '收入来源',
dataIndex: 'sourceOfIncome',
key: 'sourceOfIncome',
children: [
{
title: '会员',
dataIndex: 'incomeMember',
key: 'incomeMember',
width: 100,
align: 'center',
},
{
title: '非会员',
dataIndex: 'incomeNonMember',
key: 'incomeNonMember',
width: 100,
align: 'center',
},
{
title: '外卖',
dataIndex: 'incomeTakeOut',
key: 'incomeTakeOut',
width: 100,
align: 'center',
},
{
title: '团购',
dataIndex: 'incomeGroupPurchase',
key: 'incomeGroupPurchase',
width: 100,
align: 'center',
},
]
},
{
title: '收入结构',
dataIndex: 'revenueStructure',
key: 'revenueStructure',
children: [
{
title: '微信支付',
dataIndex: 'incomeWechatPay',
key: 'incomeWechatPay',
width: 100,
align: 'center',
},
{
title: '现金支付',
dataIndex: 'incomeCashPay',
key: 'incomeCashPay',
width: 100,
align: 'center',
},
{
title: '大众点评',
dataIndex: 'incomePublicComments',
key: 'incomePublicComments',
width: 100,
align: 'center',
},
{
title: '口碑',
dataIndex: 'incomeWordOfMouth',
key: 'incomeWordOfMouth',
width: 100,
align: 'center',
},
{
title: '抖音',
dataIndex: 'incomeTiktok',
key: 'incomeTiktok',
width: 100,
align: 'center',
},
{
title: '美团外卖',
dataIndex: 'incomeMeituan',
key: 'incomeMeituan',
width: 100,
align: 'center',
},
{
title: '饿了么外卖',
dataIndex: 'incomeHungry',
key: 'incomeHungry',
width: 100,
align: 'center',
},
]
},
]
}
]

/**
* 营销报表
* @returns
*/
export default function Index() {

const data = [
{
date: '2022-6-22 14:01:53',
storeName: '四川黑菠萝科技',
flowingWater: 10010,
netReceipts: 8848,
membershipPrice: 6000,
coupon: 2848,
activity: 998,
takeOutRevenue: 10086,
meituanTakeout: 5500,
hungryTakeOut: 5600,
freshWaterInTheHall: 10010,
paidInFood: 10010,
publicComments: 8000,
wordOfMouth: 1000,
tiktok: 2000,
unitPriceOfWater: 68,
paidInUnitPrice: 70,
singleUnitPriceOfWater: 99,
singlePaidInUnitPrice: 88,
numCash: 10,
numWechatPayment: 100,
numPublicComments: 99,
numWordOfMouth: 88,
numTiktok: 77,
numMeituanTakeout: 66,
numHungryTakeOut: 55,
incomeMember: 50,
incomeNonMember: 50,
incomeTakeOut: 70,
incomeGroupPurchase: 90,
incomeWechatPay: 10,
incomeCashPay: 30,
incomePublicComments: 20,
incomeWordOfMouth: 50,
incomeTiktok: 30,
incomeMeituan: 80,
incomeHungry: 100
},
{
date: '2022-6-22 15:58:43',
storeName: '四川白菠萝科技',
flowingWater: 10010,
netReceipts: 8848,
membershipPrice: 6000,
coupon: 2848,
activity: 998,
takeOutRevenue: 10086,
meituanTakeout: 5500,
hungryTakeOut: 5600,
freshWaterInTheHall: 10010,
paidInFood: 10010,
publicComments: 8000,
wordOfMouth: 1000,
tiktok: 2000,
unitPriceOfWater: 68,
paidInUnitPrice: 70,
singleUnitPriceOfWater: 99,
singlePaidInUnitPrice: 88,
numCash: 10,
numWechatPayment: 100,
numPublicComments: 99,
numWordOfMouth: 88,
numTiktok: 77,
numMeituanTakeout: 66,
numHungryTakeOut: 55,
incomeMember: 50,
incomeNonMember: 50,
incomeTakeOut: 70,
incomeGroupPurchase: 90,
incomeWechatPay: 10,
incomeCashPay: 30,
incomePublicComments: 20,
incomeWordOfMouth: 50,
incomeTiktok: 30,
incomeMeituan: 80,
incomeHungry: 100
}
];

return (
<PageContainer>
<Card className={styles['data-search-card']}>
<div className={styles['data-search-box']}>
<RangePicker />
<div className={styles['data-search-btns']}>
<Button className={styles['search-btn-item']}>重置</Button>
<Button className={styles['search-btn-item']} type="primary">查询</Button>
</div>
</div>
</Card>
<Card className={styles['table-card']}>
<Table dataSource={data} columns={columns} bordered={true} sticky={true} scroll={{ x: 1000 }}>
</Table>
</Card>
</PageContainer>
)
}

+ 16
- 0
src/pages/order/order-market-report/index.less Bestand weergeven

@@ -0,0 +1,16 @@
.data-search-card {
margin-bottom: 20px;
}

.data-search-box {
display: flex;
align-items: center;
justify-content: space-between;
}

.search-btn-item {
margin-left: 20px;
}

.table-card {
}

Laden…
Annuleren
Opslaan