子维度查询
尹诚诚
3 years ago
parent
3558f0bf4c
commit
aefd31e631
@ -1,104 +1,132 @@
|
|||||||
import React, {Component} from 'react';
|
import React, {useContext, useEffect} from 'react';
|
||||||
import {Row, Col, Button, Tabs, Table} from 'antd';
|
import {Row, Col, Button, Tabs, Table, Space} from 'antd';
|
||||||
import {
|
import {
|
||||||
ContainerOutlined, CarryOutOutlined,
|
ContainerOutlined,
|
||||||
SmileOutlined, TagsOutlined, GlobalOutlined,
|
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import {stores_Context} from '../config'
|
import {stores_Context} from '../config'
|
||||||
import {Line} from "@ant-design/charts";
|
import {Line} from "@ant-design/charts";
|
||||||
import SiteSelect from "../charts/SiteSelect";
|
|
||||||
import {observer} from 'mobx-react';
|
import {observer} from 'mobx-react';
|
||||||
import DatePickerCharts from '../charts/DatePickerCharts'
|
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) {
|
const {ordertype, ordertype_sub, ordertype_title} = useParams();
|
||||||
super(props);
|
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 data_source = orders_store.orderCountData_type;
|
||||||
const {ordertype, ordertype_sub} = this.props.match.params;
|
const line = {
|
||||||
const {orders_store} = this.context;
|
data: data_source,
|
||||||
const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
|
padding: 'auto',
|
||||||
const config = {
|
xField: 'xField',
|
||||||
data: data_source,
|
yField: 'yField',
|
||||||
padding: 'auto',
|
seriesField: 'seriesField',
|
||||||
xField: 'xField',
|
xAxis: {
|
||||||
yField: 'yField',
|
type: 'timeCat',
|
||||||
seriesField: 'seriesField',
|
},
|
||||||
xAxis: {
|
label: {},//显示标签
|
||||||
type: 'timeCat',
|
legend: {
|
||||||
|
title: {
|
||||||
|
text: ordertype_title,
|
||||||
},
|
},
|
||||||
label: {},//显示标签
|
itemValue: {
|
||||||
legend: {
|
formatter: (text, item) => {
|
||||||
itemValue: {
|
const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
|
||||||
formatter: (text, item) => {
|
return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
|
||||||
const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
|
|
||||||
return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
smooth: true,
|
},
|
||||||
};
|
smooth: true,
|
||||||
|
};
|
||||||
return (
|
|
||||||
<div>
|
const format_data = ((data) => {
|
||||||
<Row>
|
let result = {dataSource: [], columns: []}
|
||||||
<Col span={14}>
|
if (!comm.empty(data)) {
|
||||||
</Col>
|
result.columns = [
|
||||||
<Col span={2}>
|
{
|
||||||
<SiteSelect store={orders_store}/>
|
title: '页面',
|
||||||
</Col>
|
children: [{
|
||||||
<Col span={6}>
|
title:
|
||||||
<DatePickerCharts/>
|
<div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div>,
|
||||||
</Col>
|
dataIndex: 'request_uri'
|
||||||
<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);
|
title: '访问量',
|
||||||
}}>统计</Button>
|
children: [{
|
||||||
</Col>
|
title: data.reduce((a, b) => a + b.viewCount, 0),
|
||||||
</Row>
|
dataIndex: 'viewCount'
|
||||||
<Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
|
}],
|
||||||
|
}
|
||||||
<Col className="gutter-row" span={24}>
|
];
|
||||||
<Line {...config} />
|
result.dataSource = data;
|
||||||
</Col>
|
}
|
||||||
|
return result;
|
||||||
<Col className="gutter-row" span={24}>
|
})
|
||||||
<Tabs activeKey={orders_store.active_tab_key}
|
|
||||||
onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
|
const table_data = format_data(orders_store.orderCountData_Form_sub.ordercount1);
|
||||||
<Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
|
const table_data2 = format_data(orders_store.orderCountData_Form_sub.ordercount2);
|
||||||
<Table dataSource={orders_store.orderCountData_Form.dataSource}
|
|
||||||
columns={orders_store.orderCountData_Form.columns} size="small"/>
|
return (
|
||||||
</Tabs.TabPane>
|
<div>
|
||||||
<Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
|
<Row>
|
||||||
<Table dataSource={orders_store.orderCountData_Form.dataSource}
|
<Col span={14}>
|
||||||
columns={orders_store.orderCountData_Form.columns} size="small"/>
|
<NavLink to={`/orders`}>返回</NavLink>
|
||||||
</Tabs.TabPane>
|
</Col>
|
||||||
<Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
|
<Col span={2}>
|
||||||
<Table dataSource={orders_store.orderCountData_Form.dataSource}
|
|
||||||
columns={orders_store.orderCountData_Form.columns} size="small"/>
|
</Col>
|
||||||
</Tabs.TabPane>
|
<Col span={6}>
|
||||||
<Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
|
<DatePickerCharts/>
|
||||||
<Table dataSource={orders_store.orderCountData_Form.dataSource}
|
</Col>
|
||||||
columns={orders_store.orderCountData_Form.columns} size="small"/>
|
<Col span={2}>
|
||||||
</Tabs.TabPane>
|
<Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
|
||||||
<Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
|
orders_store.getOrderCount_type(ordertype, ordertype_sub);
|
||||||
<Table dataSource={orders_store.orderCountData_Form.dataSource}
|
orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, 'page');
|
||||||
columns={orders_store.orderCountData_Form.columns} size="small"/>
|
}}>统计</Button>
|
||||||
</Tabs.TabPane>
|
</Col>
|
||||||
</Tabs>
|
</Row>
|
||||||
</Col>
|
<Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
|
||||||
|
|
||||||
</Row>
|
<Col className="gutter-row" span={24}>
|
||||||
</div>
|
<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);
|
export default observer(Orders_sub);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue