You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
9.4 KiB
JavaScript
311 lines
9.4 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import { Row, Col, Tabs, Table, Divider, Spin } from 'antd';
|
|
import { ContainerOutlined, UserSwitchOutlined } from '@ant-design/icons';
|
|
import { stores_Context } from '../config';
|
|
import { Column, Pie } from '@ant-design/charts';
|
|
import { observer } from 'mobx-react';
|
|
import * as comm from '../utils/commons';
|
|
import { utils, writeFileXLSX } from 'xlsx';
|
|
import SearchForm from './../components/search/SearchForm';
|
|
import { TableExportBtn } from './../components/Data';
|
|
|
|
const Sale = () => {
|
|
const { sale_store, date_picker_store } = useContext(stores_Context);
|
|
|
|
//const ml_data = sale_store.ml_data; // 毛利数据
|
|
const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; // 毛利数据
|
|
|
|
const column_config_create = (tab_name) => {
|
|
let average_value = 0; //平均线的值
|
|
let config_data = [];
|
|
switch (tab_name) {
|
|
case 'All':
|
|
config_data.data = type_data.dataSource;
|
|
config_data.xField = 'OPI_Name';
|
|
config_data.yField = 'COLI_ML2';
|
|
average_value = Math.round(config_data.data.reduce((a, b) => a + b.COLI_ML2, 0) / config_data.data.length);
|
|
break;
|
|
case 'ResponseRateWhatsApp':
|
|
config_data.data = type_data.dataSource;
|
|
config_data.xField = 'OPI_Name';
|
|
config_data.yField = 'COLI_ConfirmTimeAVG';
|
|
average_value = Math.round(config_data.data.reduce((a, b) => a + b.COLI_ConfirmTimeAVG, 0) / config_data.data.length);
|
|
break;
|
|
case 'ResponseRateByWL':
|
|
config_data.data = type_data.dataSource;
|
|
config_data.xField = 'OPI_Name';
|
|
config_data.yField = 'PriceTime';
|
|
average_value = Math.round(config_data.data.reduce((a, b) => a + b.PriceTime, 0) / config_data.data.length);
|
|
break;
|
|
default:
|
|
// config_data.data = [];
|
|
config_data.data = type_data.dataSource;
|
|
config_data.xField = 'T_name';
|
|
config_data.yField = 'T_total';
|
|
break;
|
|
}
|
|
return {
|
|
...config_data,
|
|
...{
|
|
//seriesField: "OPI_Name",//分组
|
|
label: {
|
|
position: 'top',
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoHide: false,
|
|
autoRotate: true,
|
|
},
|
|
},
|
|
// legend: {
|
|
// itemValue: {
|
|
// formatter: (text, item) => {
|
|
// const items = ml_data.filter(d => d.groups === item.value); // 按分组筛选
|
|
// return items.length ? items.reduce((a, b) => a + b.COLI_ML, 0) : ""; // 计算总数
|
|
// },
|
|
// },
|
|
// },
|
|
// tooltip: {
|
|
// customContent: (title, items) => {
|
|
// const data = items[0].data || {};console.log(data);
|
|
// return `<div>${title}</div>wwwwwww<div></div>`;
|
|
// },
|
|
// title: (title, datum) => {
|
|
// return title; // + " " + comm.getWeek(datum.COLI_Date); // 显示周几
|
|
// },
|
|
// },};
|
|
annotations: average_value
|
|
? [
|
|
{
|
|
type: 'text',
|
|
position: ['start', average_value],
|
|
content: average_value,
|
|
offsetX: -15,
|
|
style: {
|
|
fill: '#F4664A',
|
|
textBaseline: 'bottom',
|
|
},
|
|
},
|
|
{
|
|
type: 'line',
|
|
start: [-10, average_value],
|
|
end: ['max', average_value],
|
|
style: {
|
|
stroke: '#F4664A',
|
|
lineDash: [2, 2],
|
|
},
|
|
},
|
|
]
|
|
: [],
|
|
},
|
|
};
|
|
};
|
|
const column_config = column_config_create(sale_store.active_tab_key);
|
|
|
|
// 直方图，先隐藏
|
|
// const format_data_for_treemap=(data=[])=>{
|
|
// const children_array= data.map(item => ({...item, name: item.OPI_Name,value:item.COLI_ML2}));
|
|
// return {
|
|
// name: 'root',
|
|
// children:children_array,
|
|
// };
|
|
// };
|
|
|
|
// const treemap_config={
|
|
// data:format_data_for_treemap(type_data.dataSource),
|
|
// colorField: 'OPI_Name',
|
|
// };
|
|
|
|
//格式化数据，饼图只支持数字模式
|
|
const format_data_for_pie = (data = []) => {
|
|
return data.map((item) => ({ ...item, COLI_ML_number: comm.price_to_number(item.COLI_ML) }));
|
|
};
|
|
|
|
const pie_config = {
|
|
appendPadding: 10,
|
|
data: format_data_for_pie(type_data.dataSource),
|
|
angleField: 'COLI_ML_number',
|
|
colorField: 'OPI_Name',
|
|
radius: 0.8,
|
|
label: {
|
|
type: 'outer',
|
|
content: '{name} {value} \n {percentage}',
|
|
},
|
|
legend: false, // 不显示图例
|
|
interactions: [
|
|
{
|
|
type: 'element-selected',
|
|
},
|
|
{
|
|
type: 'element-active',
|
|
},
|
|
],
|
|
};
|
|
|
|
const tab_items = [
|
|
{
|
|
key: 'All',
|
|
label: (
|
|
<span>
|
|
<ContainerOutlined /> 总览
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'ResponseRateWhatsApp',
|
|
label: (
|
|
<span>
|
|
<UserSwitchOutlined /> 回复率
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'ResponseRateByWL',
|
|
label: (
|
|
<span>
|
|
<UserSwitchOutlined /> 沟通数据
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'Country',
|
|
label: (
|
|
<span>
|
|
<ContainerOutlined /> 国籍
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'Product',
|
|
label: (
|
|
<span>
|
|
<ContainerOutlined /> 产品类型
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'TravelMotivation',
|
|
label: (
|
|
<span>
|
|
<ContainerOutlined /> 出行目的
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'GuestGroupType',
|
|
label: (
|
|
<span>
|
|
<ContainerOutlined /> 成员关系
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
const tableColumns = type_data.columns.map((ele, i) =>
|
|
i === 0 ? { ...ele, fixed: 'left', children: (ele?.children || []).map((ele_child, i_child) => (i_child === 0 ? { ...ele_child, fixed: 'left' } : { ...ele_child })) } : { ...ele }
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<Row gutter={16} className={date_picker_store.siderBroken ? "" : "sticky-top"} >
|
|
<Col className="gutter-row" span={24}>
|
|
<SearchForm
|
|
defaultValue={{
|
|
initialValue: {
|
|
...date_picker_store.formValues,
|
|
...sale_store.searchValues,
|
|
},
|
|
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
|
|
fieldProps: {
|
|
DepartmentList: { show_all: false, mode: 'multiple' },
|
|
WebCode: { show_all: false, mode: 'multiple' },
|
|
years: { hide_vs: true },
|
|
},
|
|
}}
|
|
onSubmit={(_err, obj, form, str) => {
|
|
sale_store.setSearchValues(obj, form);
|
|
sale_store.get_department_order_ml_by_type(date_picker_store);
|
|
}}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
|
|
{/* <Row>
|
|
<Col md={24} lg={12} xxl={12}>
|
|
<Select mode="multiple" style={{ width: "100%" }} placeholder="筛选国籍" value={sale_store.filter_country} onChange={value => sale_store.onChange_Country(value)} allowClear={true}>
|
|
<Select.Option key="3" value="3">
|
|
美国
|
|
</Select.Option>
|
|
<Select.Option key="5" value="5">
|
|
加拿大
|
|
</Select.Option>
|
|
<Select.Option key="7" value="7">
|
|
英国
|
|
</Select.Option>
|
|
<Select.Option key="18" value="18">
|
|
澳大利亚
|
|
</Select.Option>
|
|
</Select>
|
|
</Col>
|
|
<Col md={24} lg={12} xxl={12}>
|
|
<Select mode="multiple" style={{ width: "100%" }} placeholder="成员关系" value={sale_store.filter_guest_type} onChange={value => sale_store.onChange_GuestGroupType(value)} allowClear={true}>
|
|
<Select.Option key="146001" value="146001">
|
|
夫妻
|
|
</Select.Option>
|
|
<Select.Option key="146002" value="146002">
|
|
家庭
|
|
</Select.Option>
|
|
<Select.Option key="146003" value="146003">
|
|
solo
|
|
</Select.Option>
|
|
<Select.Option key="146005" value="146005">
|
|
其他
|
|
</Select.Option>
|
|
</Select>
|
|
</Col>
|
|
</Row> */}
|
|
|
|
<Row>
|
|
<Col className="gutter-row" md={24}>
|
|
<Spin spinning={sale_store.loading_table} >
|
|
<Column {...column_config} /></Spin>
|
|
</Col>
|
|
|
|
<Col className="gutter-row" md={24}>
|
|
<Tabs
|
|
activeKey={sale_store.active_tab_key}
|
|
onChange={(active_key) => {
|
|
sale_store.onChange_Tabs(active_key);
|
|
sale_store.get_department_order_ml_by_type(date_picker_store);
|
|
}}
|
|
items={tab_items}
|
|
></Tabs>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Table sticky
|
|
id="table_to_xlsx_sale"
|
|
dataSource={type_data.dataSource}
|
|
columns={tableColumns}
|
|
size="small"
|
|
rowKey={(record) => record.key}
|
|
loading={sale_store.loading_table}
|
|
pagination={false}
|
|
scroll={{ x: (100*(tableColumns.length)) }}
|
|
/>
|
|
<Divider orientation="right" plain>
|
|
<TableExportBtn label={'sale'} {...{ columns: tableColumns, dataSource: type_data.dataSource }} />
|
|
</Divider>
|
|
</Col>
|
|
<Col sm={24} lg={12}>
|
|
{sale_store.active_tab_key === 'All' ? <Pie {...pie_config} /> : ''}
|
|
</Col>
|
|
{/* <Col sm={24} lg={24}>
|
|
<Treemap {...treemap_config} />
|
|
</Col> */}
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
export default observer(Sale);
|