子维度查询
尹诚诚
3 years ago
parent
3558f0bf4c
commit
aefd31e631
@ -1,104 +1,132 @@
|
||||
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 = {
|
||||
data: data_source,
|
||||
padding: 'auto',
|
||||
xField: 'xField',
|
||||
yField: 'yField',
|
||||
seriesField: 'seriesField',
|
||||
xAxis: {
|
||||
type: 'timeCat',
|
||||
const data_source = orders_store.orderCountData_type;
|
||||
const line = {
|
||||
data: data_source,
|
||||
padding: 'auto',
|
||||
xField: 'xField',
|
||||
yField: 'yField',
|
||||
seriesField: 'seriesField',
|
||||
xAxis: {
|
||||
type: 'timeCat',
|
||||
},
|
||||
label: {},//显示标签
|
||||
legend: {
|
||||
title: {
|
||||
text: ordertype_title,
|
||||
},
|
||||
label: {},//显示标签
|
||||
legend: {
|
||||
itemValue: {
|
||||
formatter: (text, item) => {
|
||||
const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
|
||||
return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
|
||||
},
|
||||
itemValue: {
|
||||
formatter: (text, item) => {
|
||||
const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
|
||||
return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col span={14}>
|
||||
</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);
|
||||
}}>统计</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
|
||||
|
||||
<Col className="gutter-row" span={24}>
|
||||
<Line {...config} />
|
||||
</Col>
|
||||
|
||||
<Col className="gutter-row" span={24}>
|
||||
<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"/>
|
||||
</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>
|
||||
</Tabs>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
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}>
|
||||
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<DatePickerCharts/>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
|
||||
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 {...line} />
|
||||
</Col>
|
||||
|
||||
<Col className="gutter-row" span={24}>
|
||||
<Tabs activeKey="page"
|
||||
onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
|
||||
<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>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
export default observer(Orders_sub);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue