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"
<Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange}>
<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 })}
{/* '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">
<Button size={'middle'} type="primary" icon={<SearchOutlined />} htmlType="submit">
{confirmText || '统计'}
@ -224,18 +224,20 @@ function getFields(props) {
const layoutProps = {
gutter: { xs: 8, sm: 8, lg: 16 },
lg: { span: 4 },
md: { span: 8 },
sm: { span: 12 },
xs: { span: 24 },
};
const item = (name, sort = 0, render, col) => {
const customCol = col || 4;
const mdCol = customCol * 2;
return {
'key': '',
sort,
name,
render,
'hide': false,
'col': { lg: { span: customCol } },
'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol}, flex: mdCol < 8 ? "1 0" : "" },
};
};
let baseChildren = [];
@ -282,7 +284,7 @@ function getFields(props) {
</Option>
</Select>
</Form.Item>,
2
3
),
//
item(
@ -291,7 +293,7 @@ function getFields(props) {
<Form.Item name={`DateType`} initialValue={at(props, 'initialValue.DateType')[0] || { key: 'applyDate', label: '提交日期' }}>
<DateTypeSelect labelInValue={true} />
</Form.Item>,
2
3
),
item(
'years',
@ -300,7 +302,7 @@ function getFields(props) {
{/* <DatePicker picker="year" placeholder='年份' /> */}
<YearPickerCharts {...fieldProps.years} />
</Form.Item>,
2
3
),
item(
'months',
@ -308,7 +310,7 @@ function getFields(props) {
<Form.Item>
<DatePicker picker="month" placeholder="月份" />
</Form.Item>,
2
3
),
item(
'dates',

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

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