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