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 3558f0bf4c
commit aefd31e631
4 changed files with 301 additions and 226 deletions
Show Stats Download Patch File Download Diff File

2
src/App.js
Unescape Escape View File

@ -63,7 +63,7 @@ class App extends Component {
<Routes>
<Route path="/" element={<Dashboard/>}/>
<Route path="/orders" element={<Orders/>}/>
<Route path="/orders_sub/:ordertype/:ordertype_sub" element={<Orders_sub/>}/>
<Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub/>}/>
<Route path="/dashboard" element={<Home/>}/>
</Routes>
</Content>

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

@ -21,8 +21,8 @@ class OrdersStore {
webcode = 'AH';
active_tab_key = 'Form';//当前切换的标签页
orderCountData = [];//订单统计数据源
orderCountData_sub = [];//子维度订单统计
orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
orderCountData_type = [];//子维度订单统计
orderCountData_Form = [];//表单类型统计数据源
orderCountData_Form_sub = [];//子维度类型统计
handleChange_webcode = (value) => {
@ -55,6 +55,29 @@ class OrdersStore {
return result;
}
//网站订单数量，根据类型
getOrderCount_type(ordertype, ordertype_sub) {
this.loading = true;
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-web/QueryData/GetOrderCount'
url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`;
url += '&WebCode=' + this.webcode + '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
runInAction(() => {
this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
this.loading = false;
})
})
.catch((error) => {
this.loading = false;
console.log('fetch data failed', error);
});
}
//网站订单数量
getOrderCount() {
@ -93,144 +116,39 @@ class OrdersStore {
//网站订单类型
getOrderCountByType(order_type) {
const date_picker_store = this.rootStore.date_picker_store;
let isVS = false;//是否是比较数据，有比较的表格是不一样的
let url = '/service-web/QueryData/GetOrderCountByType'
url += '?WebCode=' + this.webcode + '&OrderType=' + order_type;
url += '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
isVS = true;
url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
let ordercountTotal1 = json.ordercountTotal1;
let ordercountTotal2 = json.ordercountTotal2;
let data = [];
let columns = [];
if (isVS) {
columns = [
{
title: '',
children: [{
title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div><div>{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}</div></span>,
dataIndex: 'OrderType',
render: (text, record) => <NavLink
to={`/orders_sub/${this.active_tab_key}/${record.OrderTypeSN}`}>{text}</NavLink>
}]
},
{
title: '数量',
children: [{
title: this.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
dataIndex: 'OrderCount'
}],
},
{
title: '成交数',
children: [{
title: this.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
dataIndex: 'CJCount'
}],
},
{
title: '成交人数',
children: [{
title: this.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
dataIndex: 'CJPersonNum'
}],
},
{
title: '成交率',
children: [{
title: this.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
dataIndex: 'CJrate'
}],
},
{
title: '成交毛利（预计）',
children: [{
title: this.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
dataIndex: 'YJLY'
}],
},
{
title: '单个订单价值',
children: [{
title: this.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
dataIndex: 'Ordervalue'
}],
},
];
for (let item of json.ordercount1) {
for (let item2 of json.ordercount2) {
if (item.OrderType == item2.OrderType) {
data.push({
OrderType: item.OrderType,
OrderTypeSN: item.OrderTypeSN,
OrderCount: this.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount),
CJCount: this.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount),
CJPersonNum: this.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum),
CJrate: this.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate),
YJLY: this.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY),
Ordervalue: this.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue),
runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
this.orderCountData_Form = json;
})
}
}
}
} else {
columns =
[
{
title: '',
children: [{
title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div></span>,
dataIndex: 'OrderType',
render: (text, record) => <NavLink
to={`/orders_sub/${this.active_tab_key}/${record.OrderTypeSN}`}>{text}</NavLink>
}]
},
{
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 = json.ordercount1;
})
.catch((error) => {
console.log('fetch data failed', error);
});
}
//子维度查询
getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) {
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-web/QueryData/GetOrderCountByType_Sub'
url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_type}`;
url += '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
url += '&COLI_ApplyDateold1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&COLI_ApplyDateold2=' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + '%2023:59:59';
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
this.orderCountData_Form.dataSource = data;
this.orderCountData_Form.columns = columns;
this.orderCountData_Form_sub = json;
})
})
.catch((error) => {
console.log('fetch data failed', error);

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

@ -10,6 +10,9 @@ import {Line} from "@ant-design/charts";
import SiteSelect from "../charts/SiteSelect";
import {observer} from 'mobx-react';
import DatePickerCharts from '../charts/DatePickerCharts'
import * as config from "../config";
import {NavLink} from "react-router-dom";
import * as comm from "../utils/commons"
class Orders extends Component {
@ -25,8 +28,138 @@ class Orders extends Component {
// orders_store.onChange_Tabs(orders_store.active_tab_key);
// }
format_data(data) {
const {date_picker_store, orders_store} = this.context;
let result = {dataSource: [], columns: []}
if (!comm.empty(data)) {
let ordercountTotal1 = data.ordercountTotal1;
let ordercountTotal2 = data.ordercountTotal2;
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
result.columns = [
{
title: '',
children: [{
title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div><div>{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}</div></span>,
dataIndex: 'OrderType',
render: (text, record) => <NavLink
to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>
}]
},
{
title: '数量',
children: [{
title: orders_store.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
dataIndex: 'OrderCount'
}],
},
{
title: '成交数',
children: [{
title: orders_store.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
dataIndex: 'CJCount'
}],
},
{
title: '成交人数',
children: [{
title: orders_store.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
dataIndex: 'CJPersonNum'
}],
},
{
title: '成交率',
children: [{
title: orders_store.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
dataIndex: 'CJrate'
}],
},
{
title: '成交毛利（预计）',
children: [{
title: orders_store.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
dataIndex: 'YJLY'
}],
},
{
title: '单个订单价值',
children: [{
title: orders_store.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
dataIndex: 'Ordervalue'
}],
},
];
for (let item of data.ordercount1) {
for (let item2 of data.ordercount2) {
if (item.OrderType == item2.OrderType) {
result.dataSource.push({
OrderType: item.OrderType,
OrderTypeSN: item.OrderTypeSN,
OrderCount: orders_store.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount),
CJCount: orders_store.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount),
CJPersonNum: orders_store.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum),
CJrate: orders_store.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate),
YJLY: orders_store.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY),
Ordervalue: orders_store.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue),
})
}
}
}
} else {
result.columns =
[
{
title: '',
children: [{
title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div></span>,
dataIndex: 'OrderType',
render: (text, record) => <NavLink
to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>
}]
},
{
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,
},
];
result.dataSource = data.ordercount1;
}
}
return result;
}
render() {
const {orders_store} = this.context;
const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
const config = {
data: data_source,
@ -55,6 +188,7 @@ class Orders extends Component {
smooth: true,
};
return (
<div>
<Row>
@ -83,24 +217,19 @@ class Orders extends Component {
<Tabs activeKey={orders_store.active_tab_key}
onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
<Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
<Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
<Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
<Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
<Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
<Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
</Tabs.TabPane>
</Tabs>
</Col>

110
src/views/Orders_sub.js
Unescape Escape View File

@ -1,30 +1,30 @@
import React, {Component} from 'react';
import {Row, Col, Button, Tabs, Table} from 'antd';
import React, {useContext, useEffect} from 'react';
import {Row, Col, Button, Tabs, Table, Space} from 'antd';
import {
ContainerOutlined, CarryOutOutlined,
SmileOutlined, TagsOutlined, GlobalOutlined,
ContainerOutlined,
SearchOutlined,
} from '@ant-design/icons';
import {stores_Context} from '../config'
import {Line} from "@ant-design/charts";
import SiteSelect from "../charts/SiteSelect";
import {observer} from 'mobx-react';
import DatePickerCharts from '../charts/DatePickerCharts'
import {NavLink, useParams} from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
class Orders_sub extends Component {
const Orders_sub = () => {
static contextType = stores_Context;
constructor(props) {
super(props);
}
const {ordertype, ordertype_sub, ordertype_title} = useParams();
const {orders_store, date_picker_store} = useContext(stores_Context);
useEffect(() => {
orders_store.getOrderCount_type(ordertype, ordertype_sub);
orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, 'page');
}, [])
render() {
const {ordertype, ordertype_sub} = this.props.match.params;
const {orders_store} = this.context;
const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
const config = {
const data_source = orders_store.orderCountData_type;
const line = {
data: data_source,
padding: 'auto',
xField: 'xField',
@ -35,6 +35,9 @@ class Orders_sub extends Component {
},
label: {},//显示标签
legend: {
title: {
text: ordertype_title,
},
itemValue: {
formatter: (text, item) => {
const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
@ -45,52 +48,77 @@ class Orders_sub extends Component {
smooth: true,
};
const format_data = ((data) => {
let result = {dataSource: [], columns: []}
if (!comm.empty(data)) {
result.columns = [
{
title: '页面',
children: [{
title:
<div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div>,
dataIndex: 'request_uri'
}],
},
{
title: '访问量',
children: [{
title: data.reduce((a, b) => a + b.viewCount, 0),
dataIndex: 'viewCount'
}],
}
];
result.dataSource = data;
}
return result;
})
const table_data = format_data(orders_store.orderCountData_Form_sub.ordercount1);
const table_data2 = format_data(orders_store.orderCountData_Form_sub.ordercount2);
return (
<div>
<Row>
<Col span={14}>
<NavLink to={`/orders`}>返回</NavLink>
</Col>
<Col span={2}>
<SiteSelect store={orders_store}/>
</Col>
<Col span={6}>
<DatePickerCharts/>
</Col>
<Col span={2}>
<Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
orders_store.getOrderCount();
orders_store.onChange_Tabs(orders_store.active_tab_key);
orders_store.getOrderCount_type(ordertype, ordertype_sub);
orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, 'page');
}}>统计</Button>
</Col>
</Row>
<Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
<Col className="gutter-row" span={24}>
<Line {...config} />
<Line {...line} />
</Col>
<Col className="gutter-row" span={24}>
<Tabs activeKey={orders_store.active_tab_key}
<Tabs activeKey="page"
onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
<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="Product">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
<Table dataSource={orders_store.orderCountData_Form.dataSource}
columns={orders_store.orderCountData_Form.columns} size="small"/>
<Tabs.TabPane tab={<span><ContainerOutlined/>访问路径</span>} key="page">
<Row>
<Col span={11}>
<Table dataSource={table_data.dataSource}
columns={table_data.columns} size="small"/>
</Col>
<Col span={2}></Col>
<Col span={11}>
<Table dataSource={table_data2.dataSource}
columns={table_data2.columns} size="small"/>
</Col>
</Row>
</Tabs.TabPane>
</Tabs>
</Col>
@ -98,7 +126,7 @@ class Orders_sub extends Component {
</Row>
</div>
);
}
}
}
export default observer(Orders_sub);

Write Preview
Loading…
Cancel
Save