bpa
/
BPA.KitChen.Web
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 1 百科 动态
浏览代码

新增会员图表

tags/小炒逻辑变更前
yangwenhua 2 年前
父节点
d5ff5c0e2c
当前提交
5d0c3ebc78
共有 4 个文件被更改，包括 401 次插入 和 16 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +1
    -0
      package.json
  2. +301
    -12
      src/pages/order/order-member-statement/index.jsx
  3. +81
    -4
      src/pages/order/order-member-statement/index.less
  4. +18
    -0
      src/pages/order/order-member-statement/service.js

+ 1
- 0
package.json 查看文件

@@ -63,6 +63,7 @@
"braft-editor": "^2.3.9",
"classnames": "^2.2.6",
"cos-js-sdk-v5": "^1.3.5",
"echarts": "^5.3.3",
"js-export-excel": "^1.1.4",
"linq": "^4.0.0",
"lodash": "^4.17.11",


+ 301
- 12
src/pages/order/order-member-statement/index.jsx 查看文件

@@ -1,28 +1,317 @@
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, Col, Row, TreeSelect, Spin, message } from 'antd';
import styles from './index.less';
import moment from 'moment';
import marketAPI from "./service";
import * as echarts from 'echarts';
const { RangePicker } = DatePicker;

/**
* 会员报表
* @returns
*/
export default function Index() {

//日期选择下标：0：今天、1：昨天、2：近7天、3、近30天
const [searchDayIndex, setSearchDayIndex] = useState(0);
//日期选择器
const [timeRange, setTimeRange] = useState([
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 00:00:00')),
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59'))
]);
const [orgTree, setOrgTree] = useState([]);
const [showLoading, setShowLoading] = useState(false);
const [currentOrg, setCurrentOrg] = useState("");

//会员图表
const [memberReport, setMemberReport] = useState({
userCount: 0,
newAddUser: [],
repurChase: []
});

//新增会员图表实例
let newMemberObj = null;
//复购图表实例
let repurChaseObj = null;

//切换时间
const onChangeTime = (dayIndex) => {
setSearchDayIndex(dayIndex);
let tempDate = [];
switch (dayIndex) {
case 0:
tempDate = [
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 00:00:00')),
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59'))
]
break;
case 1:
tempDate = [
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 00:00:00')),
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 23:59:59'))
]
break;
case 2:
tempDate = [
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')),
]
break;
case 3:
tempDate = [
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 30)).format('YYYY-MM-DD 00:00:00')),
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
]
break;
}
setTimeRange(tempDate);
}

//获取组织树
const onGetOrgTree = async () => {
setShowLoading(true);
const response = await marketAPI.getOrgTree();
setShowLoading(false);
if (response.statusCode === 200) {
const originTree = response.data;
onSetOrgTreeStatus(originTree);
setOrgTree(originTree);
} else {
message.error(response.errors || '获取组织树出错');
}
}

//设置组织树不可选择状态
const onSetOrgTreeStatus = (originTree) => {
originTree.forEach(treeItem => {
if (treeItem.children && treeItem.children.length > 0) {
onSetOrgTreeStatus(treeItem.children);
} else {
if (treeItem.type === 2 || treeItem.type === 3) {
treeItem.disabled = false;
} else {
treeItem.disabled = true;
}
}
});
}

const LoadingCard = () => {
return (
<div className={styles['loading-card']}>
<Spin size="large" />
</div>
)
}

//初始化会员报表数据
const initMemberReport = async () => {
const jsonData = {
"startTime": timeRange[0],
"endTime": timeRange[1]
}
setShowLoading(true);
const response = await marketAPI.getMemberReport(jsonData);
setShowLoading(false);
if (response.statusCode === 200) {
setMemberReport(response.data);
} else {
message.error(response.errors || '获取会员报表失败');
}
}


//初始化新增会员图表
const initNewMemberCharts = () => {
const chartDom = document.getElementById('new-member');
if (!newMemberObj) {
newMemberObj = echarts.init(chartDom);
}
const xAxisData = [];
const seriesData = [];
memberReport.newAddUser.forEach(item => {
const date = new Date(item.userKey);
xAxisData.push(date.toLocaleString());
seriesData.push(item.userValue);
});
const option = {
title: {
text: '新增会员'
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
data: seriesData,
type: 'bar'
}
]
};
newMemberObj.setOption(option);
}

//复购次数图表
const initRepurChaseCharts = () => {
const chartDom = document.getElementById('repur-chase');
if (!repurChaseObj) {
repurChaseObj = echarts.init(chartDom);
}
const xAxisData = [];
const seriesData = [];
memberReport.repurChase.forEach(item => {
xAxisData.push(item.userKey);
seriesData.push(item.userValue);
});
const option = {
title: {
text: '复购次数'
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
data: seriesData,
type: 'line',
smooth: true
}
]
};
repurChaseObj.setOption(option);
}

//重置
const onResetSearch = () => {
setCurrentOrg("");
}

useEffect(() => {
onGetOrgTree();
initMemberReport();
}, []);

useEffect(() => {
initNewMemberCharts();
initRepurChaseCharts();
window.onresize = () => {
if (newMemberObj && repurChaseObj) {
newMemberObj.resize();
repurChaseObj.resize();
}
}
}, [memberReport]);

return (
<PageContainer>
{showLoading ? <LoadingCard></LoadingCard> : null}
<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']}>
会员报表
<Row gutter={20} className={styles['data-search-row']}>
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
<RangePicker size='middle' className={styles['data-search-sufixx']} 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);
}} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
<div className={searchDayIndex === 0 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => onChangeTime(0)}>
今天
</div>
<div className={searchDayIndex === 1 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => onChangeTime(1)}>
昨天
</div>
<div className={searchDayIndex === 2 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => onChangeTime(2)}>
近7天
</div>
<div className={searchDayIndex === 3 ? `${styles['data-search-day']} ${styles['search-day-selected']}` : `${styles['data-search-day']}`} onClick={() => onChangeTime(3)}>
近30天
</div>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
<TreeSelect
className={styles['data-search-sufixx']}
dropdownStyle={{
maxHeight: 400,
overflow: 'auto',
}}
value={currentOrg.title}
treeData={orgTree}
onSelect={(value, node) => {
if (node.type === 2 || node === 3) {
setCurrentOrg(node);
} else {
setCurrentOrg("");
}
}}
placeholder="请选择组织架构"
treeDefaultExpandAll
/>
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}>
<div className={styles['data-search-btns']}>
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button>
<Button className={styles['search-btn-item']} type="primary" onClick={initMemberReport}>查询</Button>
</div>
</Col>
</Row>
</Card>
<Row gutter={10} className={styles['member-row-common']}>
<Col xs={24} sm={24} md={24} lg={8} xl={6}>
<Card className={styles['member-card']}>
<div className={styles['member-card-box']}>
<div className={styles['member-card-prefix']}>
会员总量
</div>
<div className={styles['member-card-sufixx']}>
{memberReport.userCount}
</div>
</div>
<div className={styles['member-card-box']}>
<div className={styles['member-card-prefix']}>
新增会员
</div>
<div className={styles['member-card-sufixx']}>
{memberReport.newAddUser.length}
</div>
</div>
<div className={styles['member-card-box']}>
<div className={styles['member-card-prefix']}>
复购数量
</div>
<div className={styles['member-card-sufixx']}>
{memberReport.repurChase.length}
</div>
</div>
</Card>
</Col>
<Col xs={24} sm={24} md={24} lg={16} xl={18}>
<Card>
{/* 新增会员图表 */}
<div id="new-member" className={styles['new-member']}></div>
</Card>
</Col>
</Row>
<Row>
<Col xs={24} sm={24} md={24} lg={24} xl={24} >
<Card>
{/* 复购次数图表 */}
<div id="repur-chase" className={styles['repur-chase']}></div>
</Card>
</Col>
</Row>
</PageContainer>
)
}

+ 81
- 4
src/pages/order/order-member-statement/index.less 查看文件

@@ -2,15 +2,92 @@
margin-bottom: 20px;
}

.data-search-box {
.data-search-row {
margin-bottom: 10px;
}

.data-search-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}

.data-search-prefix {
margin-right: 10px;
font-size: 18px;
}

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

.data-search-day {
padding: 5px 20px;
border: 1px solid #dedede;
cursor: pointer;
}

.data-search-day:nth-child(1), .data-search-day:nth-child(2), .data-search-day:nth-child(3) {
border-right: none;
}

.search-day-selected {
border: 1px solid #FA541C !important;
color: #FA541C;
}

.data-search-sufixx {
width: 100%;
}

// 加载中
.loading-card {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
}

.member-card-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}

.member-card-prefix {
font-size: 20px;
font-weight: 700;
color: #999;
font-family: '楷体';
}

.member-card-sufixx {
font-size: 22px;
}

.new-member {
width: 100%;
height: 250px;
}

.repur-chase {
width: 100%;
height: 250px;
}

.member-card {
height: 300px;
}

.table-card {
.member-row-common {
margin-bottom: 10px;
}

+ 18
- 0
src/pages/order/order-member-statement/service.js 查看文件

@@ -0,0 +1,18 @@
import { request } from 'umi';

export default {
//获取组织架构
getOrgTree() {
return request(`/kitchen/api/report-statistics/org-tree`, {
method: 'GET',
});
},

//获取会员报表
getMemberReport(data) {
return request(`/kitchen/api/report-statistics/user-report`, {
method: 'POST',
data
});
}
};

撰写 预览
正在加载...
取消
保存