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

按分组、来源查询订单数量

Browse Source
feature/2.0-sales-trade
尹诚诚 2 years ago
parent 67a072ac09
commit 29d7ff93b8
11 changed files with 244 additions and 119 deletions
Show Stats Download Patch File Download Diff File

2
src/charts/Customer_care_inchina.js
Unescape Escape View File

@ -43,7 +43,7 @@ const Customer_care_inchina = () => {
<Radio.Group value={inchina_data.date_type}
onChange={inchina_data.onChange_datetype}>
<Radio value="applyDate">预定日期</Radio>
<Radio value="applyDate">提交日期</Radio>
<Radio value="startDate">出发日期</Radio>
</Radio.Group>
<Button type="primary" icon={<SearchOutlined/>} loading={inchina_data.loading}

30
src/charts/DataTypeSelect.js
Unescape Escape View File

@ -0,0 +1,30 @@
import React, { Component } from "react";
import { Select } from "antd";
import { observer } from "mobx-react";
class DataTypeSelect extends Component {
constructor(props) {
super(props);
}
render() {
const store = this.props.store;
return (
<div>
<Select value={store.date_type} style={{ width: "100%" }} placeholder="选择日期类型" onChange={value => store.onChange_datetype(value)}>
<Select.Option key="2" value="applyDate">
提交日期
</Select.Option>
<Select.Option key="1" value="ConfirmDate">
确认日期
</Select.Option>
<Select.Option key="3" value="startDate">
走团日期
</Select.Option>
</Select>
</div>
);
}
}
export default observer(DataTypeSelect);

2
src/charts/DatePickerCharts.js
Unescape Escape View File

@ -22,6 +22,7 @@ class DatePickerCharts extends Component {
<Row>
<Col span={24}>
<DatePicker.RangePicker
style={{width: '100%'}}
format={config.DATE_FORMAT}
locale={locale}
allowClear={false}
@ -46,6 +47,7 @@ class DatePickerCharts extends Component {
<Col span={24}>
<DatePicker.RangePicker
bordered={false}
style={{width: '100%'}}
format={config.DATE_FORMAT}
locale={locale}
value={[date_picker_store.start_date_cp, date_picker_store.end_date_cp]}

6
src/charts/GroupSelect.js
Unescape Escape View File

@ -14,18 +14,18 @@ class GroupSelect extends Component {
<div>
<Select
mode={store.group_select_mode}
style={{width: '95%',}}
style={{width: '100%',}}
placeholder="选择小组"
value={store.groups}
onChange={(value) => store.group_handleChange(value)}
>
{this.props.show_all ? <Select.Option key="0" value="ALL">ALL 小组</Select.Option> : ''}
{this.props.show_all ? <Select.Option key="0" value="ALL">所有小组</Select.Option> : ''}
<Select.Option key="31" value="1,2,28,7">GH事业部</Select.Option>
<Select.Option key="32" value="8,9,11,12,20,21">国际事业部</Select.Option>
<Select.Option key="33" value="10,18,16,30">孵化学院</Select.Option>
<Select.Option key="1" value="1">CH直销</Select.Option>
<Select.Option key="2" value="2">CH大客户</Select.Option>
<Select.Option key="28" value="28">AH</Select.Option>
<Select.Option key="28" value="28">AH亚洲项目组</Select.Option>
<Select.Option key="7" value="7">市场推广</Select.Option>
<Select.Option key="8" value="8">德语</Select.Option>
<Select.Option key="9" value="9">日语</Select.Option>

21
src/charts/SiteSelect.js
Unescape Escape View File

@ -15,23 +15,28 @@ class SiteSelect extends Component {
<div>
<Select
mode={store.site_select_mode}
style={{width: '95%'}}
placeholder="选择网站"
style={{width: '100%'}}
placeholder="选择来源"
defaultValue={store.webcode}
onChange={store.handleChange_webcode}
>
{this.props.show_all ? <Select.Option key="1" value="ALL">ALL</Select.Option> : ''}
{this.props.show_all ? <Select.Option key="1" value="ALL">所有来源</Select.Option> : ''}
<Select.Option key="2" value="CHT">CHT</Select.Option>
<Select.Option key="8" value="AH">AH</Select.Option>
<Select.Option key="9" value="GH">GH</Select.Option>
<Select.Option key="28" value="GHKYZG">客运中国</Select.Option>
<Select.Option key="7" value="GHKYHW">客运海外</Select.Option>
<Select.Option key="11" value="JP">日语JP</Select.Option>
<Select.Option key="12" value="VAC">西语VAC</Select.Option>
<Select.Option key="20" value="IT">意大利语IT</Select.Option>
<Select.Option key="21" value="GM">德语GM</Select.Option>
<Select.Option key="10" value="RU">俄语RU</Select.Option>
<Select.Option key="18" value="VC">法语VC</Select.Option>
<Select.Option key="12" value="VAC">西语</Select.Option>
<Select.Option key="122" value="VACHW">西语海外</Select.Option>
<Select.Option key="20" value="IT">意大利</Select.Option>
<Select.Option key="200" value="ITHW">意大利海外</Select.Option>
<Select.Option key="21" value="GM">德语</Select.Option>
<Select.Option key="211" value="GMHW">德语海外</Select.Option>
<Select.Option key="10" value="RU">俄语</Select.Option>
<Select.Option key="100" value="RUHW">俄语海外</Select.Option>
<Select.Option key="18" value="VC">法语</Select.Option>
<Select.Option key="188" value="VCHW">法语海外</Select.Option>
<Select.Option key="16" value="CT">CT</Select.Option>
<Select.Option key="30" value="trippest">TP</Select.Option>
<Select.Option key="31" value="HLY">花梨鹰</Select.Option>

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

@ -2,6 +2,7 @@ import { makeAutoObservable, runInAction } from "mobx";
import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
import { Tag } from "antd";
import * as config from "../config";
import * as comm from "../utils/commons";
import moment from "moment";
import { NavLink } from "react-router-dom";
@ -13,7 +14,10 @@ class OrdersStore {
loading = false;
site_select_mode = false; //是否多选站点
webcode = "AH";
group_select_mode = false;
groups = ["1,2,28,7"];
webcode = "ALL";
date_type = "applyDate";
include_tickets = "1"; //是否包含门票，1是含有，0不含
//diff_count_day = 0; //开始日期和结束日期的间隔，用于计算平均数
active_tab_key = "Form"; //当前切换的标签页
@ -25,19 +29,30 @@ class OrdersStore {
diff_days1 = 0; //日期相差天数，用于计算日平均值
diff_days2 = 0; //日期相差天数，比较数据时使用
//选择事业部
group_handleChange(value) {
this.groups = value;
}
get diff_count_day(){
const date_picker_store = this.rootStore.date_picker_store;
let _start_date = moment(date_picker_store.start_date.format(config.DATE_FORMAT));
let _end_date = moment(date_picker_store.end_date.format(config.DATE_FORMAT));
return _end_date.diff(_start_date, "days")+1;
}
//计算两个时间段的有多少天
get diff_count_day() {
const date_picker_store = this.rootStore.date_picker_store;
let _start_date = moment(date_picker_store.start_date.format(config.DATE_FORMAT));
let _end_date = moment(date_picker_store.end_date.format(config.DATE_FORMAT));
return _end_date.diff(_start_date, "days") + 1;
}
handleChange_webcode = (value) => {
//下单日期、确认日期、出发日期
onChange_datetype(value) {
this.date_type = value;
}
//选择来源网站
handleChange_webcode = value => {
this.webcode = value;
};
handleChange_include_tickets = (value) => {
//是否包含门票
handleChange_include_tickets = value => {
this.include_tickets = value;
};
@ -54,11 +69,15 @@ class OrdersStore {
format_data_source(data_source, start_date, end_date) {
let result = [];
for (let item of data_source.ordercount1) {
result.push({
xField: item.ApplyDate,
yField: item.orderCount,
seriesField: item.groups,
});
if (result[item.ApplyDate]) {
result[item.ApplyDate].yField += item.orderCount;
} else {
result[item.ApplyDate] = {
xField: item.ApplyDate,
yField: item.orderCount,
seriesField: item.groups,
};
}
}
if (data_source.ordercount2 && end_date) {
//不能直接用diff计算，因为日期是含有时间的，会导致计算差一天，先转成格式化的日期再比较
@ -66,14 +85,20 @@ class OrdersStore {
let _end_date = moment(end_date.format(config.DATE_FORMAT));
let diff_days = _start_date.diff(_end_date, "days");
for (let item of data_source.ordercount2) {
result.push({
xField: moment(item.ApplyDate).add(diff_days, "days").format(config.DATE_FORMAT),
yField: item.orderCount,
seriesField: item.groups,
});
let ApplyDate = moment(item.ApplyDate).add(diff_days, "days").format(config.DATE_FORMAT);
let ApplyDate_key = ApplyDate + "_";//这个作为key
if (result[ApplyDate_key]) {
result[ApplyDate_key].yField += item.orderCount;
} else {
result[ApplyDate_key] = {
xField: ApplyDate,
yField: item.orderCount,
seriesField: item.groups,
};
}
}
}
return result;
return comm.set_array_index(result);
}
//网站订单数量，根据类型
@ -82,19 +107,20 @@ class OrdersStore {
const date_picker_store = this.rootStore.date_picker_store;
let url = "/service-web/QueryData/GetOrderCount";
url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}&IncludeTickets=${this.include_tickets}`;
url += `&DepartmentList=${this.groups.toString()}&DateType=${this.date_type}`;
url += "&WebCode=" + this.webcode + "&COLI_ApplyDate1=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&COLI_ApplyDate2=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59";
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
url += "&COLI_ApplyDateold1=" + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "&COLI_ApplyDateold2=" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + "%2023:59:59";
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
.then(response => response.json())
.then(json => {
runInAction(() => {
this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
this.loading = false;
});
})
.catch((error) => {
.catch(error => {
this.loading = false;
console.log("fetch data failed", error);
});
@ -105,28 +131,21 @@ class OrdersStore {
this.loading = true;
const date_picker_store = this.rootStore.date_picker_store;
let url = "/service-web/QueryData/GetOrderCount"; //?WebCode=cht&COLI_ApplyDate1=2022-08-01&COLI_ApplyDate2=2022-08-31&COLI_ApplyDateold1=2021-08-01&COLI_ApplyDateold2=2021-08-31';
url +=
"?WebCode=" +
this.webcode +
"&IncludeTickets=" +
this.include_tickets +
"&COLI_ApplyDate1=" +
date_picker_store.start_date.format(config.DATE_FORMAT) +
"&COLI_ApplyDate2=" +
date_picker_store.end_date.format(config.DATE_FORMAT) +
"%2023:59:59";
url += "?WebCode=" + this.webcode + "&IncludeTickets=" + this.include_tickets;
url += "&COLI_ApplyDate1=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&COLI_ApplyDate2=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59";
url += `&DepartmentList=${this.groups.toString()}&DateType=${this.date_type}`;
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
url += "&COLI_ApplyDateold1=" + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "&COLI_ApplyDateold2=" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + "%2023:59:59";
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
.then(response => response.json())
.then(json => {
runInAction(() => {
this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
this.loading = false;
});
})
.catch((error) => {
.catch(error => {
this.loading = false;
console.log("fetch data failed", error);
});
@ -137,19 +156,20 @@ class OrdersStore {
const date_picker_store = this.rootStore.date_picker_store;
let url = "/service-web/QueryData/GetOrderCountByType";
url += "?WebCode=" + this.webcode + "&OrderType=" + order_type + "&IncludeTickets=" + this.include_tickets;
url += `&DepartmentList=${this.groups.toString()}&DateType=${this.date_type}`;
url += "&COLI_ApplyDate1=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&COLI_ApplyDate2=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59";
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
url += "&COLI_ApplyDateold1=" + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "&COLI_ApplyDateold2=" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + "%2023:59:59";
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
.then(response => response.json())
.then(json => {
runInAction(() => {
//错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
this.orderCountData_Form = json;
});
})
.catch((error) => {
.catch(error => {
console.log("fetch data failed", error);
});
}
@ -158,23 +178,25 @@ class OrdersStore {
getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) {
const date_picker_store = this.rootStore.date_picker_store;
let url = "/service-web/QueryData/GetOrderCountByType_Sub";
if (sub_type=='page_cxstate1'){ //统计成行订单的路径
sub_type='page&cxstate=1'
if (sub_type == "page_cxstate1") {
//统计成行订单的路径
sub_type = "page&cxstate=1";
}
url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_type}` + "&IncludeTickets=" + this.include_tickets;
url += `&DepartmentList=${this.groups.toString()}&DateType=${this.date_type}`;
url += "&COLI_ApplyDate1=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&COLI_ApplyDate2=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59";
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
url += "&COLI_ApplyDateold1=" + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "&COLI_ApplyDateold2=" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) + "%2023:59:59";
}
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
.then(response => response.json())
.then(json => {
runInAction(() => {
//错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
this.orderCountData_Form_sub = json;
});
})
.catch((error) => {
.catch(error => {
console.log("fetch data failed", error);
});
}

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

@ -16,8 +16,10 @@ class SaleStore {
spinning = false; //加载状态
active_tab_key = "All"; //当前选择的标签
group_select_mode = false;
groups = ["1,2,28,7"]; //默认GH事业部
site_select_mode = false; //是否多选站点
webcode = "ALL";
date_type = "ConfirmDate";
groups = ["1,2,28,7"];
ml_data = []; //毛利数据
type_data = []; //类型的数据
type_data_sub = []; //类型的子维度数据
@ -27,6 +29,10 @@ class SaleStore {
group_handleChange(value) {
this.groups = value;
}
//选择站点
handleChange_webcode = value => {
this.webcode = value;
};
//切换标签页
onChange_Tabs(active_key) {
@ -48,7 +54,7 @@ class SaleStore {
this.loading = true;
this.date_title = `${date1_start}~${date1_end}`;
let url = "/service-web/QueryData/GetDepartmentOrderML";
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}`;
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&WebCode=${this.webcode}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
@ -90,7 +96,7 @@ class SaleStore {
this.loading_table = true;
this.date_title = `${date1_start}~${date1_end}`;
let url = "/service-web/QueryData/GetDepartmentOrderMLByType";
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&OrderType=${this.active_tab_key}`;
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&OrderType=${this.active_tab_key}&WebCode=${this.webcode}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
@ -321,7 +327,7 @@ class SaleStore {
const date2_start = comm.empty(date_moment.start_date_cp) ? "" : date_moment.start_date_cp.format(config.DATE_FORMAT);
const date2_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT);
let url = "/service-web/QueryData/GetDepartmentOrderMLByType_sub";
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&subType=${type_sub}&subTypeVal=-1`;
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&subType=${type_sub}&subTypeVal=-1&WebCode=${this.webcode}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;

11
src/utils/commons.js
Unescape Escape View File

@ -252,3 +252,14 @@ export function getWeek(date) {
return "周日";
}
}
//把非数字下标的数组设置下标，因为非数字数组的length为0导致读取失败
export function set_array_index(result) {
let result_array = [];
let result_keys = Object.keys(result);
result_keys.sort(); //必须做一次排序，用for in循环会导致顺序错误
for (let key of result_keys) {
result_array.push(result[key]);
}
return result_array;
}

30
src/views/Orders.js
Unescape Escape View File

@ -4,6 +4,8 @@ import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, Tags
import { stores_Context } from "../config";
import { Line, Pie } from "@ant-design/charts";
import SiteSelect from "../charts/SiteSelect";
import GroupSelect from "../charts/GroupSelect";
import DataTypeSelect from "../charts/DataTypeSelect";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
import * as config from "../config";
@ -262,7 +264,7 @@ class Orders extends Component {
legend: {
itemValue: {
formatter: (text, item) => {
const items = data_source.filter((d) => d.seriesField === item.value); //按站点筛选
const items = data_source.filter(d => d.seriesField === item.value); //按站点筛选
return items.length ? items.reduce((a, b) => a + b.yField, 0) : ""; //计算总数
},
},
@ -302,12 +304,17 @@ class Orders extends Component {
return (
<div>
<Row gutter={{ sm: 16, lg: 32 }}>
<Col md={24} lg={10} xxl={12}></Col>
<Col md={24} lg={14} xxl={12}>
<Col md={24} lg={12} xxl={14}></Col>
<Col md={24} lg={12} xxl={10}>
<Row>
<Col md={24} lg={6} xxl={4}>
<SiteSelect store={orders_store} />
<Select style={{ width: "95%" }} placeholder="是否含门票" value={orders_store.include_tickets} onChange={orders_store.handleChange_include_tickets}>
<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>
@ -316,10 +323,15 @@ class Orders extends Component {
</Select.Option>
</Select>
</Col>
<Col md={24} lg={12} xxl={10}>
</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={6} xxl={10}>
<Col md={24} lg={4} xxl={4} className='align_right'>
<Button
type="primary"
icon={<SearchOutlined />}
@ -340,7 +352,7 @@ class Orders extends Component {
</Col>
<Col span={24}>
<Tabs activeKey={orders_store.active_tab_key} onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
<Tabs activeKey={orders_store.active_tab_key} onChange={active_key => orders_store.onChange_Tabs(active_key)}>
<Tabs.TabPane
tab={
<span>

64
src/views/Orders_sub.js
Unescape Escape View File

@ -1,10 +1,13 @@
import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Space, Divider } from "antd";
import { Row, Col, Button, Tabs, Table, Select, Divider } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
import SiteSelect from "../charts/SiteSelect";
import GroupSelect from "../charts/GroupSelect";
import DataTypeSelect from "../charts/DataTypeSelect";
import { NavLink, useParams } from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
@ -171,27 +174,52 @@ const Orders_sub = () => {
return (
<div>
<Row>
<Col span={14}>
<Row gutter={{ sm: 16, lg: 32 }}>
<Col md={24} lg={12} xxl={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, orders_store.active_tab_key_sub);
}}>
统计
</Button>
<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_type(ordertype, ordertype_sub);
orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
}}>
统计
</Button>
</Col>
</Row>
</Col>
</Row>
<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
<Col className="gutter-row" span={24}>
<Line {...line} />

71
src/views/Sale.js
Unescape Escape View File

@ -1,13 +1,15 @@
import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from "antd";
import { ContainerOutlined, SearchOutlined,UserSwitchOutlined } from "@ant-design/icons";
import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Column, Pie } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
import DataTypeSelect from "../charts/DataTypeSelect";
import { NavLink, useParams } from "react-router-dom";
import * as comm from "../utils/commons";
import * as config from "../config";
import SiteSelect from "../charts/SiteSelect";
import GroupSelect from "../charts/GroupSelect";
import { utils, writeFileXLSX } from "xlsx";
@ -28,7 +30,7 @@ const Sale = () => {
legend: {
itemValue: {
formatter: (text, item) => {
const items = ml_data.filter((d) => d.groups === item.value); //按分组筛选
const items = ml_data.filter(d => d.groups === item.value); //按分组筛选
return items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ""; //计算总数
},
},
@ -45,10 +47,10 @@ const Sale = () => {
};
//格式化数据，饼图只支持数字模式
const format_data_for_pie = (data) => {
const format_data_for_pie = data => {
let result_arr = [];
if (!comm.empty(data)) {
data.map((item) => {
data.map(item => {
item.COLI_ML_number = comm.price_to_number(item.COLI_ML);
result_arr.push(item);
});
@ -80,27 +82,25 @@ const Sale = () => {
return (
<div>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col md={24} lg={10} xxl={12}></Col>
<Col md={24} lg={14} xxl={12}>
<Col md={24} lg={12} xxl={14}></Col>
<Col md={24} lg={12} xxl={10}>
<Row>
<Col md={24} lg={7} xxl={6}>
<Col md={24} lg={8} xxl={8}>
<GroupSelect store={sale_store} />
<Select value={sale_store.date_type} style={{ width: "95%" }} onChange={(value) => sale_store.onChange_datetype(value)}>
<Select.Option key="1" value="ConfirmDate">
确认日期
</Select.Option>
<Select.Option key="2" value="applyDate">
提交日期
</Select.Option>
<Select.Option key="3" value="startDate">
走团日期
</Select.Option>
</Select>
</Col>
<Col md={24} lg={12} xxl={10}>
<DatePickerCharts hide_vs={true} />
<Col md={24} lg={8} xxl={8}>
<SiteSelect store={sale_store} show_all={true} />
</Col>
<Col md={24} lg={5} xxl={8}>
<Col md={24} lg={8} xxl={8}></Col>
</Row>
<Row>
<Col md={24} lg={8} xxl={8}>
<DataTypeSelect store={sale_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 />}
@ -124,7 +124,7 @@ const Sale = () => {
<Col className="gutter-row" md={24}>
<Tabs
activeKey={sale_store.active_tab_key}
onChange={(active_key) => {
onChange={active_key => {
sale_store.onChange_Tabs(active_key);
sale_store.get_department_order_ml_by_type(date_picker_store);
}}>
@ -183,16 +183,25 @@ const Sale = () => {
</Tabs>
<Row>
<Col span={24}>
<Table id="table_to_xlsx_sale" dataSource={type_data.dataSource} columns={type_data.columns} size="small" rowKey={(record) => record.key} loading={sale_store.loading_table} pagination={false} scroll={{ x: "100%" }} />
<Table
id="table_to_xlsx_sale"
dataSource={type_data.dataSource}
columns={type_data.columns}
size="small"
rowKey={record => record.key}
loading={sale_store.loading_table}
pagination={false}
scroll={{ x: "100%" }}
/>
<Divider orientation="right" plain>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_sale").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "sale.xlsx");
}}>
导出excel
</a>
</Divider>
<a
onClick={() => {
const wb = utils.table_to_book(document.getElementById("table_to_xlsx_sale").getElementsByTagName("table")[0]);
writeFileXLSX(wb, "sale.xlsx");
}}>
导出excel
</a>
</Divider>
</Col>
<Col sm={24} lg={12}>
{sale_store.active_tab_key == "All" ? <Pie {...pie_config} /> : ""}

Write Preview
Loading…
Cancel
Save