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

perf: 市场>订单数据. 应用搜索组件

Browse Source
feature/pivot
Lei OT 2 years ago
parent e19733caa9
commit fee2a327f8
3 changed files with 170 additions and 226 deletions
Show Stats Download Patch File Download Diff File

16
src/components/search/SearchForm.jsx
Unescape Escape View File

@ -198,10 +198,10 @@ export default observer((props) => {
// layout="inline" // layout="inline"
<Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange}> <Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange}>
<EditableContext.Provider value={form}> <EditableContext.Provider value={form}>
<Row gutter={10} style={{ background: '#f9fafa', margin: '0px 0px 10px 0px', padding: '16px 8px', boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.15)' }}> <Row gutter={10} style={{ background: '#f9fafa', margin: '0px 0px 10px 0px', padding: '16px 8px 0 8px', boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.15)' }}>
{getFields({ sort, initialValue, hides, shows, fieldProps, form })} {getFields({ sort, initialValue, hides, shows, fieldProps, form })}
{/* 'textAlign': 'right' */} {/* 'textAlign': 'right' */}
<Col flex="1 0 120px" style={{ padding: '0px 5px' }}> <Col flex="1 0 120px" style={{ padding: '0px 5px', display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
<Space align="center"> <Space align="center">
<Button size={'middle'} type="primary" icon={<SearchOutlined />} htmlType="submit"> <Button size={'middle'} type="primary" icon={<SearchOutlined />} htmlType="submit">
{confirmText || '统计'} {confirmText || '统计'}
@ -224,18 +224,20 @@ function getFields(props) {
const layoutProps = { const layoutProps = {
gutter: { xs: 8, sm: 8, lg: 16 }, gutter: { xs: 8, sm: 8, lg: 16 },
lg: { span: 4 }, lg: { span: 4 },
md: { span: 8 },
sm: { span: 12 }, sm: { span: 12 },
xs: { span: 24 }, xs: { span: 24 },
}; };
const item = (name, sort = 0, render, col) => { const item = (name, sort = 0, render, col) => {
const customCol = col || 4; const customCol = col || 4;
const mdCol = customCol * 2;
return { return {
'key': '', 'key': '',
sort, sort,
name, name,
render, render,
'hide': false, 'hide': false,
'col': { lg: { span: customCol } }, 'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol}, flex: mdCol < 8 ? "1 0" : "" },
}; };
}; };
let baseChildren = []; let baseChildren = [];
@ -282,7 +284,7 @@ function getFields(props) {
</Option> </Option>
</Select> </Select>
</Form.Item>, </Form.Item>,
2 3
), ),
// //
item( item(
@ -291,7 +293,7 @@ function getFields(props) {
<Form.Item name={`DateType`} initialValue={at(props, 'initialValue.DateType')[0] || { key: 'applyDate', label: '提交日期' }}> <Form.Item name={`DateType`} initialValue={at(props, 'initialValue.DateType')[0] || { key: 'applyDate', label: '提交日期' }}>
<DateTypeSelect labelInValue={true} /> <DateTypeSelect labelInValue={true} />
</Form.Item>, </Form.Item>,
2 3
), ),
item( item(
'years', 'years',
@ -300,7 +302,7 @@ function getFields(props) {
{/* <DatePicker picker="year" placeholder='年份' /> */} {/* <DatePicker picker="year" placeholder='年份' /> */}
<YearPickerCharts {...fieldProps.years} /> <YearPickerCharts {...fieldProps.years} />
</Form.Item>, </Form.Item>,
2 3
), ),
item( item(
'months', 'months',
@ -308,7 +310,7 @@ function getFields(props) {
<Form.Item> <Form.Item>
<DatePicker picker="month" placeholder="月份" /> <DatePicker picker="month" placeholder="月份" />
</Form.Item>, </Form.Item>,
2 3
), ),
item( item(
'dates', 'dates',

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

@ -73,6 +73,20 @@ class OrdersStore {
this.include_tickets = value; this.include_tickets = value;
}; };
searchValues = {
DateType: { key: 'applyDate', label: '提交日期'},
WebCode: { key: 'All', label: '所有来源'},
IncludeTickets: { key: '1', label: '含门票'},
DepartmentList: groupsMappedByCode.GH,
};
setSearchValues(obj, values) {
this.groups = obj.DepartmentList;
this.webcode = obj.WebCode;
this.include_tickets = obj.IncludeTickets;
this.date_type = obj.DateType;
}
// 切换标签页 // 切换标签页
onChange_Tabs_sub(ordertype, ordertype_sub, active_key) { onChange_Tabs_sub(ordertype, ordertype_sub, active_key) {
this.active_tab_key_sub = active_key; this.active_tab_key_sub = active_key;

366
src/views/Orders.jsx
Unescape Escape View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Row, Col, Button, Tabs, Table, Divider, Select, Radio } from "antd"; import { Row, Col, Button, Tabs, Table, Divider, Select, Radio, Spin } from "antd";
import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons"; import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons";
import { stores_Context } from "../config"; import { stores_Context } from "../config";
import { Line, Pie } from "@ant-design/charts"; import { Line, Pie } from "@ant-design/charts";
@ -13,6 +13,8 @@ import { NavLink } from "react-router-dom";
import * as comm from "../utils/commons"; import * as comm from "../utils/commons";
import { utils, writeFileXLSX } from "xlsx"; import { utils, writeFileXLSX } from "xlsx";
import DateGroupRadio from '../components/DateGroupRadio'; import DateGroupRadio from '../components/DateGroupRadio';
import SearchForm from './../components/search/SearchForm';
class Orders extends Component { class Orders extends Component {
static contextType = stores_Context; static contextType = stores_Context;
@ -219,7 +221,7 @@ class Orders extends Component {
} }
render() { render() {
const { orders_store } = this.context; const { orders_store, date_picker_store } = this.context;
const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : []; const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
const avg_line_y = Math.round(orders_store.avgLine1); const avg_line_y = Math.round(orders_store.avgLine1);
@ -310,55 +312,42 @@ class Orders extends Component {
], ],
}; };
const tableProps = {
dataSource: table_data.dataSource,
columns: table_data.columns,
size: 'small',
pagination: false,
scroll: { x: '100%' },
loading: orders_store.loading,
};
return ( return (
<div> <div>
<Row gutter={{ sm: 16, lg: 32 }}> <Row gutter={16} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
<Col md={24} lg={12} xxl={14}></Col> <Col className="gutter-row" span={24}>
<Col md={24} lg={12} xxl={10}> <SearchForm
<Row> defaultValue={{
<Col md={24} lg={8} xxl={8}> initialValue: {
<GroupSelect store={orders_store} /> ...date_picker_store.formValues,
</Col> ...orders_store.searchValues,
<Col md={24} lg={8} xxl={8}> },
<SiteSelect store={orders_store} show_all={true} /> shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
</Col> fieldProps: {
<Col md={24} lg={8} xxl={8}> DepartmentList: { show_all: false },
<Select style={{ width: "100%" }} placeholder="是否含门票" value={orders_store.include_tickets} onChange={orders_store.handleChange_include_tickets}> WebCode: { show_all: true },
<Select.Option key="1" value="1"> years: { hide_vs: true },
含门票 },
</Select.Option> }}
<Select.Option key="0" value="0"> onSubmit={(_err, obj, form, str) => {
不含门票 orders_store.setSearchValues(obj, form);
</Select.Option> orders_store.getOrderCount();
</Select> orders_store.onChange_Tabs(orders_store.active_tab_key);
</Col> }}
</Row> />
<Row> </Col>
<Col md={24} lg={8} xxl={8}> <Col span={24} style={{ textAlign: 'right' }}>
<DataTypeSelect store={orders_store} />
</Col>
<Col md={24} lg={12} xxl={12}>
<DatePickerCharts />
</Col>
<Col md={24} lg={4} xxl={4} className='align_right'>
<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>
</Col>
</Row>
<Row gutter={[16, { sm: 16, lg: 32 }]} >
<Col span={24} style={{textAlign: 'right'}}>
<DateGroupRadio <DateGroupRadio
visible={data_source.length!==0} visible={data_source.length !== 0}
dataRaw={orders_store.orderCountDataRaw} dataRaw={orders_store.orderCountDataRaw}
onChange={orders_store.onChangeDateGroup} onChange={orders_store.onChangeDateGroup}
value={orders_store.lineChartXGroup} value={orders_store.lineChartXGroup}
@ -366,177 +355,116 @@ class Orders extends Component {
fieldMapper={orders_store.orderCountDataFieldMapper} fieldMapper={orders_store.orderCountDataFieldMapper}
/> />
</Col> </Col>
<Col span={24}> </Row>
<Line {...config} />
</Col>
<Col span={24}> <Row gutter={[16, { sm: 16, lg: 32 }]}>
<Tabs activeKey={orders_store.active_tab_key} onChange={active_key => orders_store.onChange_Tabs(active_key)}> <Col span={24}>
<Tabs.TabPane <Spin spinning={orders_store.loading}>
tab={ <Line {...config} />
<span> </Spin>
<ContainerOutlined /> </Col>
来源类型
</span> <Col span={24}>
} <Tabs
key="Form"> activeKey={orders_store.active_tab_key}
<Table id="table_to_xlsx_form" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} /> onChange={(active_key) => orders_store.onChange_Tabs(active_key)}
<Divider orientation="right" plain> items={[
<a {
onClick={() => { key: 'Form',
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_form").getElementsByTagName("table")[0]); label: (
writeFileXLSX(wb, "来源类型.xlsx"); <span>
}}> <ContainerOutlined />
导出excel 来源类型
</a> </span>
</Divider> ),
</Tabs.TabPane> },
<Tabs.TabPane {
tab={ key: 'Country',
<span> label: (
<CarryOutOutlined /> <span>
产品类型 <SmileOutlined />
</span> 国籍
} </span>
key="Product"> ),
<Table id="table_to_xlsx_product" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} /> },
<Divider orientation="right" plain> {
<a key: 'line',
onClick={() => { label: (
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_product").getElementsByTagName("table")[0]); <span>
writeFileXLSX(wb, "产品类型.xlsx"); <TagsOutlined />
}}> 线路
导出excel </span>
</a> ),
</Divider> },
</Tabs.TabPane> {
<Tabs.TabPane key: 'city',
tab={ label: (
<span> <span>
<SmileOutlined /> <GlobalOutlined />
国籍 目的地
</span> </span>
} ),
key="Country"> },
<Table id="table_to_xlsx_country" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} /> {
<Divider orientation="right" plain> key: 'LineClass',
<a label: (
onClick={() => { <span>
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_country").getElementsByTagName("table")[0]); <BlockOutlined />
writeFileXLSX(wb, "国籍.xlsx"); 页面类型
}}> </span>
导出excel ),
</a> },
</Divider> {
</Tabs.TabPane> key: 'GuestGroupType',
<Tabs.TabPane label: (
tab={ <span>
<span> <FullscreenOutlined />
<TagsOutlined /> 客群类别
线路 </span>
</span> ),
} },
key="line"> {
<Table id="table_to_xlsx_line" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} /> key: 'TravelMotivation',
<Divider orientation="right" plain> label: (
<a <span>
onClick={() => { <DingtalkOutlined />
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_line").getElementsByTagName("table")[0]); 出行动机
writeFileXLSX(wb, "线路.xlsx"); </span>
}}> ),
导出excel },
</a> ].map((ele) => {
</Divider> return {
</Tabs.TabPane> ...ele,
<Tabs.TabPane children: (
tab={ <>
<span> <Table id={`table_to_xlsx_${ele.key}`} {...tableProps} />
<GlobalOutlined /> <Divider orientation="right" plain>
目的地 <a
</span> onClick={() => {
} const wb = utils.table_to_book(document.getElementById(`table_to_xlsx_${ele.key}`).getElementsByTagName('table')[0]);
key="city"> writeFileXLSX(wb, `${ele.key}.xlsx`);
<Table id="table_to_xlsx_city" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} /> }}
<Divider orientation="right" plain> >
<a 导出excel
onClick={() => { </a>
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_city").getElementsByTagName("table")[0]); </Divider>
writeFileXLSX(wb, "目的地.xlsx"); </>
}}> ),
导出excel };
</a> })}
</Divider> />
</Tabs.TabPane> <Row>
<Tabs.TabPane <Col sm={24} lg={12}>
tab={ <Pie {...pie_config} data={pie_data} />
<span> </Col>
<BlockOutlined /> <Col sm={24} lg={12}>
页面类型 <Pie {...pie_config} data={pie_data2} />
</span> </Col>
} </Row>
key="LineClass"> </Col>
<Table id="table_to_xlsx_LineClass" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} /> </Row>
<Divider orientation="right" plain> </div>
<a );
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_LineClass").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "页面类型.xlsx");
}}>
导出excel
</a>
</Divider>
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<FullscreenOutlined />
客群类别
</span>
}
key="GuestGroupType">
<Table id="table_to_xlsx_GuestGroupType" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_GuestGroupType").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "客群类别.xlsx");
}}>
导出excel
</a>
</Divider>
</Tabs.TabPane>
<Tabs.TabPane
tab={
<span>
<DingtalkOutlined />
出行动机
</span>
}
key="TravelMotivation">
<Table id="table_to_xlsx_TravelMotivation" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_TravelMotivation").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "出行动机.xlsx");
}}>
导出excel
</a>
</Divider>
</Tabs.TabPane>
</Tabs>
<Row>
<Col sm={24} lg={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col sm={24} lg={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Col>
</Row>
</div>
);
} }
} }

Write Preview
Loading…
Cancel
Save