From 29d7ff93b8242e489202d6caa27f6e478fe58de8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= <ycc@hainatravel.com>
Date: Tue, 28 Feb 2023 16:08:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E5=88=86=E7=BB=84=E3=80=81=E6=9D=A5?=
 =?UTF-8?q?=E6=BA=90=E6=9F=A5=E8=AF=A2=E8=AE=A2=E5=8D=95=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/charts/Customer_care_inchina.js |   2 +-
 src/charts/DataTypeSelect.js        |  30 ++++++++
 src/charts/DatePickerCharts.js      |   2 +
 src/charts/GroupSelect.js           |   6 +-
 src/charts/SiteSelect.js            |  21 ++++--
 src/stores/OrdersStore.js           | 112 +++++++++++++++++-----------
 src/stores/SaleStore.js             |  14 +++-
 src/utils/commons.js                |  11 +++
 src/views/Orders.js                 |  30 +++++---
 src/views/Orders_sub.js             |  64 +++++++++++-----
 src/views/Sale.js                   |  71 ++++++++++--------
 11 files changed, 244 insertions(+), 119 deletions(-)
 create mode 100644 src/charts/DataTypeSelect.js

diff --git a/src/charts/Customer_care_inchina.js b/src/charts/Customer_care_inchina.js
index d2b6ba8..9b251f7 100644
--- a/src/charts/Customer_care_inchina.js
+++ b/src/charts/Customer_care_inchina.js
@@ -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}
diff --git a/src/charts/DataTypeSelect.js b/src/charts/DataTypeSelect.js
new file mode 100644
index 0000000..d6790e9
--- /dev/null
+++ b/src/charts/DataTypeSelect.js
@@ -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);
diff --git a/src/charts/DatePickerCharts.js b/src/charts/DatePickerCharts.js
index 731d9f6..38245d5 100644
--- a/src/charts/DatePickerCharts.js
+++ b/src/charts/DatePickerCharts.js
@@ -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]}
diff --git a/src/charts/GroupSelect.js b/src/charts/GroupSelect.js
index 2531c43..a1cace1 100644
--- a/src/charts/GroupSelect.js
+++ b/src/charts/GroupSelect.js
@@ -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>
diff --git a/src/charts/SiteSelect.js b/src/charts/SiteSelect.js
index af3e114..bdda6fe 100644
--- a/src/charts/SiteSelect.js
+++ b/src/charts/SiteSelect.js
@@ -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>
diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js
index 540de93..0095fce 100644
--- a/src/stores/OrdersStore.js
+++ b/src/stores/OrdersStore.js
@@ -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);
 			});
 	}
diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js
index 7baf810..7528ad3 100644
--- a/src/stores/SaleStore.js
+++ b/src/stores/SaleStore.js
@@ -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`;
diff --git a/src/utils/commons.js b/src/utils/commons.js
index 72bde5e..210672f 100644
--- a/src/utils/commons.js
+++ b/src/utils/commons.js
@@ -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;
+}
diff --git a/src/views/Orders.js b/src/views/Orders.js
index 0a569e2..8837db6 100644
--- a/src/views/Orders.js
+++ b/src/views/Orders.js
@@ -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>
diff --git a/src/views/Orders_sub.js b/src/views/Orders_sub.js
index 8504f6b..79684a8 100644
--- a/src/views/Orders_sub.js
+++ b/src/views/Orders_sub.js
@@ -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} />
diff --git a/src/views/Sale.js b/src/views/Sale.js
index 5964396..513cdfc 100644
--- a/src/views/Sale.js
+++ b/src/views/Sale.js
@@ -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} /> : ""}