From 80bfb04574acf402787e3f7d072cdfd695810727 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= <ycc@hainatravel.com>
Date: Thu, 20 Oct 2022 15:02:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=8C=E5=88=97=E8=BD=AC=E6=8D=A2=E7=9A=84?=
 =?UTF-8?q?=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css              |   4 +
 src/charts/SiteSelect.js |   2 +-
 src/stores/SaleStore.js  | 161 ++++++++++++++++++++++++++++++++-------
 src/views/Orders.js      | 134 ++++++++++----------------------
 src/views/Sale.js        |  70 +++++++++++------
 5 files changed, 225 insertions(+), 146 deletions(-)

diff --git a/src/App.css b/src/App.css
index cc332be..2460a39 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,4 +2,8 @@
 
 .align_right{
     text-align: right;
+}
+
+.align_left{
+    text-align: left;
 }
\ No newline at end of file
diff --git a/src/charts/SiteSelect.js b/src/charts/SiteSelect.js
index 5fe00fa..f27fed4 100644
--- a/src/charts/SiteSelect.js
+++ b/src/charts/SiteSelect.js
@@ -15,7 +15,7 @@ class SiteSelect extends Component {
             <div>
                 <Select
                     mode={store.site_select_mode}
-                    style={{width: '100%'}}
+                    style={{width: 120}}
                     placeholder="选择网站"
                     defaultValue={store.webcode}
                     onChange={store.handleChange_webcode}
diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js
index 76efaf3..55f533c 100644
--- a/src/stores/SaleStore.js
+++ b/src/stores/SaleStore.js
@@ -1,5 +1,5 @@
 import { makeAutoObservable, runInAction } from "mobx";
-import * as dd from "dingtalk-jsapi";
+import moment from "moment";
 import * as config from "../config";
 import * as comm from "../utils/commons";
 
@@ -11,11 +11,14 @@ class SaleStore {
 	}
 
 	loading = false;
-	active_tab_key = "overview"; //当前选择的标签
+	loading_table = false;
+	active_tab_key = "All"; //当前选择的标签
 	group_select_mode = false;
 	date_type = "applyDate";
 	groups = ["1,2,28,7"];
-    date_title='date_title';//日期段，只用于显示，防止日期选择控件的变化导致页面刷新
+	ml_data = []; //毛利数据
+	type_data = []; //类型的数据
+	date_title = "date_title"; //日期段，只用于显示，防止日期选择控件的变化导致页面刷新
 
 	//选择事业部
 	group_handleChange(value) {
@@ -28,34 +31,138 @@ class SaleStore {
 		//this.getOrderCountByType_sub(ordertype, ordertype_sub, this.active_tab_key_sub);
 	}
 
-    //下单日期或者出发日期
+	//下单日期或者出发日期
 	onChange_datetype(e) {
 		this.date_type = e.target.value;
 	}
 
-    //获取业绩信息
-    getxxxxx(ordertype, ordertype_sub) {
-        // this.loading = true;
-        // const date_picker_store = this.rootStore.date_picker_store;
-        // let url = '/service-web/QueryData/GetOrderCount'
-        // url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`;
-        // 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) => {
-        //         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) => {
-        //         this.loading = false;
-        //         console.log('fetch data failed', error);
-        //     });
-    }
+	//获取业绩信息
+	get_department_order_ml(date_moment) {
+		let result = [];
+		const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
+		const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
+		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);
+		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 += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
+		if (date2_start && date2_end) {
+			url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
+			this.date_title += ` ${date2_start}~${date2_end}`;
+		}
+		fetch(config.HT_HOST + url)
+			.then(response => response.json())
+			.then(json => {
+				result.push(...json.result1);
+				if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) {
+					let diff_days = date_moment.start_date.diff(date_moment.start_date_cp, "days");
+					for (let item of json.result2) {
+						result.push({
+							COLI_Date: moment(item.COLI_Date).add(diff_days, "days").format(config.DATE_FORMAT),
+							COLI_YJLY: item.COLI_YJLY,
+							groups: item.groups,
+							key: item.key,
+						});
+					}
+				}
+				runInAction(() => {
+					this.ml_data = result;
+					this.loading = false;
+				});
+			})
+			.catch(error => {
+				this.loading = false;
+				console.log("fetch data failed", error);
+			});
+	}
+
+	//按类型获取业绩
+	get_department_order_ml_by_type(date_moment) {
+		let result = { dataSource: [], columns: [] };
+		const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
+		const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
+		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);
+		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 += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
+		if (date2_start && date2_end) {
+			url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
+			this.date_title += ` ${date2_start}~${date2_end}`;
+		}
+		fetch(config.HT_HOST + url)
+			.then(response => response.json())
+			.then(json => {
+				if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) {
+				} else {
+					let opi_arr = []; //顾问列表
+					let row_title = ""; //行标题
+					let new_data_arr = []; //行列转换后的数组
+					Object.keys(json.result1[0]).map((col, col_i) => {
+						switch (col) {
+							case "OPI_Name":
+								opi_arr = [
+									{ name: "", index: "c0" },
+									...Object.values(json.result1).map((row, row_i) => {
+										return { name: Object.values(row)[col_i], index: "c" + ++row_i };
+									}),
+								];
+								return;
+								break;
+							case "COLI_OrderCount":
+								row_title = "订单数";
+								break;
+							case "COLI_ML":
+								row_title = "毛利";
+								break;
+							case "COLI_CJCount":
+								row_title = "成团数";
+								break;
+							case "COLI_CJrate":
+								row_title = "成行率";
+								break;
+							case "COLI_Cycle":
+								row_title = "成行周期";
+								break;
+							case "COLI_SingleML":
+								row_title = "单团毛利";
+								break;
+							default:
+								return;
+						}
+						new_data_arr.push(
+							Object.assign(
+								{ key: col_i },
+								{ c0: row_title },
+								...Object.values(json.result1).map((row, row_i) => {
+									return { ["c" + ++row_i]: Object.values(row)[col_i] };
+								})
+							)
+						);
+					});
+
+					for (let item of opi_arr) {
+						result.columns.push({
+							title: item.name,
+							dataIndex: item.index,
+						});
+					}
+					result.dataSource = new_data_arr;
+				}
+				runInAction(() => {
+					this.type_data = result;
+					this.loading_table = false;
+				});
+			})
+			.catch(error => {
+				this.loading_table = false;
+				console.log("fetch data failed", error);
+			});
+	}
 }
 
 export default SaleStore;
diff --git a/src/views/Orders.js b/src/views/Orders.js
index 676634d..9f0f28b 100644
--- a/src/views/Orders.js
+++ b/src/views/Orders.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Row, Col, Button, Tabs, Table, Divider } from "antd";
+import { Row, Col, Button, Tabs, Table, Divider, Space } 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";
@@ -266,28 +266,32 @@ class Orders extends Component {
 
 		return (
 			<div>
-				<Row>
-					<Col span={14}></Col>
-					<Col span={2}>
-						<SiteSelect store={orders_store} />
-					</Col>
-					<Col span={6}>
-						<DatePickerCharts />
-					</Col>
-					<Col span={2}>
-						<Button
-							type="primary"
-							icon={<SearchOutlined />}
-							loading={orders_store.loading}
-							onClick={() => {
-								orders_store.getOrderCount();
-								orders_store.onChange_Tabs(orders_store.active_tab_key);
-							}}>
-							统计
-						</Button>
+				<Row gutter={{ sm: 16, lg: 32 }}>
+					<Col md={24} lg={10} xxl={12}></Col>
+					<Col md={24} lg={14} xxl={12}>
+						<Row>
+							<Col md={24} lg={6} xxl={4}>
+								<SiteSelect store={orders_store} />
+							</Col>
+							<Col md={24} lg={12} xxl={10}>
+								<DatePickerCharts />
+							</Col>
+							<Col md={24} lg={6} xxl={10}>
+								<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, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
+				<Row gutter={[16, { sm: 16, lg: 32 }]}>
 					<Col span={24}>
 						<Line {...config} />
 					</Col>
@@ -302,7 +306,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="Form">
-								<Table id="table_to_xlsx_form" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -312,14 +316,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -329,7 +325,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="Product">
-								<Table id="table_to_xlsx_product" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -339,14 +335,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -356,7 +344,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="Country">
-								<Table id="table_to_xlsx_country" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -366,14 +354,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -383,7 +363,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="line">
-								<Table id="table_to_xlsx_line" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -393,14 +373,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -410,7 +382,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="city">
-								<Table id="table_to_xlsx_city" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -420,14 +392,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -437,7 +401,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="LineClass">
-								<Table id="table_to_xlsx_LineClass" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -447,14 +411,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -464,7 +420,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="GuestGroupType">
-								<Table id="table_to_xlsx_GuestGroupType" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -474,14 +430,6 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</Tabs.TabPane>
 							<Tabs.TabPane
 								tab={
@@ -491,7 +439,7 @@ class Orders extends Component {
 									</span>
 								}
 								key="TravelMotivation">
-								<Table id="table_to_xlsx_TravelMotivation" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
+								<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={() => {
@@ -501,16 +449,16 @@ class Orders extends Component {
 										导出excel
 									</a>
 								</Divider>
-								<Row>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data} />
-									</Col>
-									<Col span={12}>
-										<Pie {...pie_config} data={pie_data2} />
-									</Col>
-								</Row>
 							</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>
diff --git a/src/views/Sale.js b/src/views/Sale.js
index aeb5947..343e820 100644
--- a/src/views/Sale.js
+++ b/src/views/Sale.js
@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from "react";
 import { Row, Col, Button, Tabs, Table, Space, Radio } from "antd";
 import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
 import { stores_Context } from "../config";
-import { Line } from "@ant-design/charts";
+import { Column } from "@ant-design/charts";
 import { observer } from "mobx-react";
 import DatePickerCharts from "../charts/DatePickerCharts";
 import { NavLink, useParams } from "react-router-dom";
@@ -13,37 +13,65 @@ import GroupSelect from "../charts/GroupSelect";
 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 = {
+		data: ml_data,
+		xField: "COLI_Date",
+		yField: "COLI_YJLY",
+		seriesField: "groups",
+		label: {
+			position: "top",
+		},
+		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_YJLY, 0) : ""; //计算总数
+				},
+			},
+		},
+	};
+
 	return (
 		<div>
-			<Row>
-				<Col span={13}></Col>
-				<Col span={8}>
+			<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}>
 					<Row>
-						<Col span={12}>
+						<Col md={24} lg={8} xxl={7}>
 							<GroupSelect store={sale_store} />
 							<Radio.Group value={sale_store.date_type} onChange={e => sale_store.onChange_datetype(e)}>
 								<Radio value="applyDate">下单日期</Radio>
 								<Radio value="startDate">走团日期</Radio>
 							</Radio.Group>
 						</Col>
-						<Col span={12}>
+						<Col md={24} lg={12} xxl={10}>
 							<DatePickerCharts />
 						</Col>
+						<Col md={24} lg={4} xxl={7}>
+							<Button
+								type="primary"
+								icon={<SearchOutlined />}
+								loading={sale_store.loading}
+								onClick={() => {
+									sale_store.get_department_order_ml(date_picker_store);
+									sale_store.get_department_order_ml_by_type(date_picker_store);
+								}}>
+								统计
+							</Button>
+						</Col>
 					</Row>
 				</Col>
-				<Col span={1}></Col>
-				<Col span={2}>
-					<Button type="primary" icon={<SearchOutlined />} loading={sale_store.loading} onClick={() => {}}>
-						统计
-					</Button>
-				</Col>
 			</Row>
+
 			<Row>
-				<Col className="gutter-row" span={24}>
-					{/* <Line {...line} /> */}
+				<Col className="gutter-row" md={24}>
+					<Column {...column_config} />
 				</Col>
 
-				<Col className="gutter-row" span={24}>
+				<Col className="gutter-row" md={24}>
 					<Tabs activeKey={sale_store.active_tab_key} onChange={active_key => sale_store.onChange_Tabs(active_key)}>
 						<Tabs.TabPane
 							tab={
@@ -52,19 +80,11 @@ const Sale = () => {
 									概览
 								</span>
 							}
-							key="overview">
+							key="All">
 							<Row>
 								<Col span={24}>
 									{sale_store.date_title}
-									{/* <Table
-										dataSource={table_data.dataSource}
-										columns={table_data.columns}
-										size="small"
-										rowKey={record => record.key}
-										expandable={{
-											expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
-										}}
-									/> */}
+									<Table dataSource={type_data.dataSource} columns={type_data.columns} bordered size="small" rowKey={record => record.key} loading={sale_store.loading_table} pagination={false} scroll={{ x: "100%" }} />
 								</Col>
 							</Row>
 						</Tabs.TabPane>