Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

折线图不同时间段的数据对比

Browse Source
feature/2.0-sales-trade
尹诚诚 3 years ago
parent d8f93bb428
commit 8c32040a29
2 changed files with 112 additions and 61 deletions
Show Stats Download Patch File Download Diff File

103
src/stores/OrdersStore.js
Unescape Escape View File

@ -10,15 +10,45 @@ class OrdersStore {
makeAutoObservable(this);
}
loading = false;
webcode = 'CHT';
active_tab_key = 'Form';//当前切换的标签页
orderCountData = [];//订单统计数据源
orderCountData_Form=[];//表单类型统计数据源
loading = false;
orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
orderCountData_Product = [];//表单类型统计数据源
orderCountData_Country = [];//表单类型统计数据源
orderCountData_line = [];//表单类型统计数据源
handleChange_webcode = (value) => {
this.webcode = value;
};
//格式化一下数据
//映射时间，做时间段对比的时候需要把对比时间段映射到开始时间上才能在同一个x轴显示
//比如2022-10-01~2022-10-30 vs 2021-10-01~2021-10-30 ，则需要在2021年的时间段加365天的时间映射成2022起始时间段
//相差的天数用a.diff(b, 'days')计算
format_data_source(data_source, start_date, end_date) {
let result = [];
let diff_days = start_date.diff(end_date, 'days');
for (let item of data_source.ordercount1) {
result.push({
'xField': item.ApplyDate,
'yField': item.orderCount,
'seriesField': item.groups
})
}
for (let item of data_source.ordercount2) {
result.push({
'xField': moment(item.ApplyDate).add(diff_days, 'days').format(config.DATE_FORMAT),
'yField': item.orderCount,
'seriesField': item.groups
})
}
return result;
}
//网站订单数量
getOrderCount() {
this.loading = true;
@ -32,7 +62,7 @@ class OrdersStore {
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
this.orderCountData = json.ordercount;
this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
this.loading = false;
})
.catch((error) => {
@ -43,7 +73,6 @@ class OrdersStore {
//网站订单类型
getOrderCountByType(order_type) {
this.loading = true;
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-web/QueryData/GetOrderCountByType'
@ -55,15 +84,75 @@ class OrdersStore {
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
this.orderCountData_Form = json.ordercount;
this.loading = false;
let ordercountTotal1 = json.ordercountTotal1;
let ordercountTotal2 = json.ordercountTotal2;
if (ordercountTotal2) {
console.log('ok');
}
switch (order_type) {
case 'Form':
let data = [];
let columns =
[
{
title: '来源类型',
children: [{title: '', dataIndex: 'OrderType'}]
},
{
title: '数量',
children: [{title: ordercountTotal1.OrderCount, dataIndex: 'OrderCount'}],
sorter: (a, b) => b.OrderCount - a.OrderCount,
},
{
title: '成交数',
children: [{title: ordercountTotal1.CJCount, dataIndex: 'CJCount'}],
sorter: (a, b) => b.CJCount - a.CJCount,
},
{
title: '成交人数',
children: [{title: ordercountTotal1.CJPersonNum, dataIndex: 'CJPersonNum'}],
sorter: (a, b) => b.CJPersonNum - a.CJPersonNum,
},
{
title: '成交率',
children: [{title: ordercountTotal1.CJrate, dataIndex: 'CJrate'}],
sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate),
},
{
title: '成交毛利（预计）',
children: [{title: ordercountTotal1.YJLY, dataIndex: 'YJLY'}],
sorter: (a, b) => b.YJLY - a.YJLY,
},
{
title: '单个订单价值',
children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}],
sorter: (a, b) => b.Ordervalue - a.Ordervalue,
},
];
data.push(...json.ordercount1, ...json.ordercount2);
this.orderCountData_Form.dataSource = data;
this.orderCountData_Form.columns = columns;
// this.orderCountData_Form = [...json.ordercountTotal1,...json.ordercountTotal2];
console.log(data);
break;
}
})
.catch((error) => {
this.loading = false;
console.log('fetch data failed', error);
});
}
//切换标签页
onChange_Tabs(active_key) {
this.active_tab_key = active_key;
this.getOrderCountByType(this.active_tab_key);
}
}

70
src/views/Orders.js
Unescape Escape View File

@ -28,12 +28,18 @@ class Orders extends Component {
const config = {
data: data_source,
padding: 'auto',
xField: 'ApplyDate',
yField: 'orderCount',
seriesField: 'groups',
xField: 'xField',
yField: 'yField',
seriesField: 'seriesField',
xAxis: {
type: 'timeCat',
},
// tooltip: {
// customContent: (title, items) => {
// const data = items[0]?.data || {};
// return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
// }
// },
smooth: true,
};
@ -51,7 +57,7 @@ class Orders extends Component {
<Col span={2}>
<Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
orders_store.getOrderCount();
orders_store.getOrderCountByType('Form');
orders_store.onChange_Tabs(orders_store.active_tab_key);
}}>统计</Button>
</Col>
</Row>
@ -62,61 +68,17 @@ class Orders extends Component {
</Col>
<Col className="gutter-row" span={24}>
<Tabs defaultActiveKey="tab_form">
<Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="tab_form">
<Table dataSource={orders_store.orderCountData_Form} columns={
[
{
title: '时间段',
dataIndex: 'groups',
key: 'groups',
},
{
title: '来源类型',
dataIndex: 'OrderType',
key: 'OrderType',
},
{
title: '数量',
dataIndex: 'OrderCount',
key: 'OrderCount',
},
{
title: '成交数',
dataIndex: 'CJCount',
key: 'CJCount',
},
{
title: '成交人数',
dataIndex: 'CJPersonNum',
key: 'CJPersonNum',
},
{
title: '成交率',
dataIndex: 'CJrate',
key: 'CJrate',
},
{
title: '预计毛利（成交）',
dataIndex: 'YJLY',
key: 'YJLY',
},
{
title: '单个订单价值',
dataIndex: 'Ordervalue',
key: 'Ordervalue',
},
]
} size="small"/>
<Tabs defaultActiveKey="tab_form" onChange={() => orders_store.onChange_Tabs}>
<Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
<Table dataSource={orders_store.orderCountData_Form.dataSource} columns={orders_store.orderCountData_Form.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="tab_product">
<Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
产品类型
</Tabs.TabPane>
<Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="tab_nationality">
<Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
国籍
</Tabs.TabPane>
<Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="tab_tour">
<Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
线路
</Tabs.TabPane>
<Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">

Write Preview
Loading…
Cancel
Save