From 254ab199c31a4f8ecb45a8683337dc98d1364929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= <ycc@hainatravel.com>
Date: Fri, 14 Oct 2022 17:05:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=B1=BB=E5=88=AB=EF=BC=8C?=
 =?UTF-8?q?=E5=87=BA=E8=A1=8C=E5=8A=A8=E6=9C=BA=EF=BC=8C=E9=94=80=E5=94=AE?=
 =?UTF-8?q?=E6=8C=87=E6=A0=87=E7=95=8C=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                    | 224 +++++------
 src/charts/GroupSelect.js     |   4 +-
 src/config.js                 |   4 +-
 src/stores/AuthStore.js       |   2 +-
 src/stores/Index.js           |   2 +
 src/stores/SaleStore.js       |  61 +++
 src/views/Credit_card_bill.js | 617 ++++++++++++++++-------------
 src/views/Orders.js           | 722 ++++++++++++++++++++--------------
 src/views/Orders_sub.js       | 488 ++++++++++++-----------
 src/views/Sale.js             |  92 +++++
 10 files changed, 1281 insertions(+), 935 deletions(-)
 create mode 100644 src/stores/SaleStore.js
 create mode 100644 src/views/Sale.js

diff --git a/src/App.js b/src/App.js
index c990e07..d37c0a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,122 +1,114 @@
-import './App.css';
-import React, {useContext} from 'react';
-import {
-    HomeOutlined,
-    TeamOutlined,
-    DashboardOutlined,
-    FileProtectOutlined,
-    CustomerServiceTwoTone,
-    DollarOutlined,
-    AreaChartOutlined,
-    WechatOutlined,
-    UserOutlined
-} from '@ant-design/icons';
-import {Layout, Menu, Image, Spin} from 'antd';
-import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
-import Home from "./views/Home"
-import Dashboard from "./views/Dashboard"
-import Orders from "./views/Orders"
-import Orders_sub from "./views/Orders_sub"
-import ProtectedRoute from "./views/ProtectedRoute"
-import Customer_care_inchina from "./charts/Customer_care_inchina"
-import Customer_care_potential from "./charts/Customer_care_potential"
-import Customer_care_regular from "./charts/Customer_care_regular"
-import Wechat_session from "./charts/Wechat_session"
-import WhatsApp_session from "./charts/WhatsApp_session"
-import Credit_card_bill from "./views/Credit_card_bill"
-import Logo from './logo.png'
-import {stores_Context} from "./config";
-import {observer} from "mobx-react";
-
+import "./App.css";
+import React, { useContext } from "react";
+import { HomeOutlined, TeamOutlined, DashboardOutlined, FileProtectOutlined, CustomerServiceTwoTone, SnippetsTwoTone, DollarOutlined, AreaChartOutlined, WechatOutlined, UserOutlined } from "@ant-design/icons";
+import { Layout, Menu, Image, Spin } from "antd";
+import { BrowserRouter, Route, Routes, NavLink } from "react-router-dom";
+import Home from "./views/Home";
+import Dashboard from "./views/Dashboard";
+import Orders from "./views/Orders";
+import Orders_sub from "./views/Orders_sub";
+import ProtectedRoute from "./views/ProtectedRoute";
+import Customer_care_inchina from "./charts/Customer_care_inchina";
+import Customer_care_potential from "./charts/Customer_care_potential";
+import Customer_care_regular from "./charts/Customer_care_regular";
+import Wechat_session from "./charts/Wechat_session";
+import WhatsApp_session from "./charts/WhatsApp_session";
+import Credit_card_bill from "./views/Credit_card_bill";
+import Sale from "./views/Sale";
+import Logo from "./logo.png";
+import { stores_Context } from "./config";
+import { observer } from "mobx-react";
 
 const App = () => {
+	const { Content, Footer, Sider } = Layout;
+	const { auth_store } = useContext(stores_Context);
 
+	const menu_items = [
+		{ key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined /> },
+		{
+			key: 2,
+			label: "市场",
+			icon: <AreaChartOutlined />,
+			children: [
+				{ key: 21, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined /> },
+				{ key: 22, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined /> },
+			],
+		},
+		{
+			key: 5,
+			label: "销售",
+			icon: <SnippetsTwoTone />,
+			children: [{ key: 51, label: <NavLink to="/sale">业绩数据</NavLink> }],
+		},
+		{
+			key: 3,
+			label: "客运",
+			icon: <WechatOutlined />,
+			children: [
+				{ key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink> },
+				{ key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink> },
+				{ key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink> },
+				{ key: 34, label: <NavLink to="/wechat_session">微信会话存档</NavLink> },
+				{ key: 35, label: <NavLink to="/whatsapp_session">WhatsApp会话存档</NavLink> },
+			],
+		},
+		{
+			key: 4,
+			label: "财务",
+			icon: <DollarOutlined />,
+			children: [{ key: 41, label: <NavLink to="/credit_card_bill">信用卡账单</NavLink> }],
+		},
+	];
 
-    const {Content, Footer, Sider} = Layout;
-    const {auth_store} = useContext(stores_Context);
-
-    const menu_items = [
-        {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
-        {
-            key: 2, label: '市场', icon: <AreaChartOutlined/>,
-            children: [
-                {key: 21, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
-                {key: 22, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
-            ]
-        },
-        {
-            key: 3, label: '客运', icon: <WechatOutlined/>,
-            children: [
-                {key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>},
-                {key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>},
-                {key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>},
-                {key: 34, label: <NavLink to="/wechat_session">微信会话存档</NavLink>},
-                {key: 35, label: <NavLink to="/whatsapp_session">WhatsApp会话存档</NavLink>},
-            ]
-        },
-        {
-            key: 4,
-            label: '财务',
-            icon: <DollarOutlined/>,
-            children: [
-                {key: 41, label: <NavLink to="/credit_card_bill">信用卡账单</NavLink>},
-            ]
-        },
-
-
-    ];
-
-    return (
-        <BrowserRouter>
-            <Layout
-                style={{
-                    minHeight: '100vh',
-                }}
-            >
-                <Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
-                       collapsedWidth="0">
-                    <Image src={Logo} preview={false}/>
-                    <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['2', '3','4']} mode="inline"
-                          items={menu_items}/>
-                </Sider>
-                <Layout className="site-layout">
-                    <Content style={{
-                        padding: 16,
-                        minHeight: 480,
-                    }}>
-                        <Routes>
-                            <Route path="/" element={<Home/>}/>
-                            <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'marketing']}/>}>
-                                <Route path="/orders" element={<Orders/>}/>
-                                <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title"
-                                       element={<Orders_sub/>}/>
-                                <Route path="/dashboard" element={<Dashboard/>}/>
-                            </Route>
-                            <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'customer_care']}/>}>
-                                <Route path="/customer_care_inchina" element={<Customer_care_inchina/>}/>
-                                <Route path="/customer_care_regular" element={<Customer_care_regular/>}/>
-                                <Route path="/customer_care_potential" element={<Customer_care_potential/>}/>
-                                <Route path="/whatsapp_session" element={<WhatsApp_session/>}/>
-                                <Route path="/wechat_session" element={<Wechat_session/>}/>
-                            </Route>
-                            <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']}/>}>
-                                <Route path="/credit_card_bill" element={<Credit_card_bill/>}/>
-                            </Route>
-                        </Routes>
-                    </Content>
-                    <Footer
-                        style={{
-                            textAlign: 'center',
-                        }}
-                    >
-                        <UserOutlined/> {auth_store.user.name} ({auth_store.user.userid})<br/>
-                        Hainatravel Dashboard ©2022 Created by IT
-                    </Footer>
-                </Layout>
-            </Layout>
-        </BrowserRouter>
-    );
-
-}
+	return (
+		<BrowserRouter>
+			<Layout
+				style={{
+					minHeight: "100vh",
+				}}>
+				<Sider collapsible={true} breakpoint="lg">
+					<Image src={Logo} preview={false} />
+					<Menu theme="dark" defaultSelectedKeys={["1"]} defaultOpenKeys={["2", "3", "4", "5"]} mode="inline" items={menu_items} />
+				</Sider>
+				<Layout className="site-layout">
+					<Content
+						style={{
+							padding: 16,
+							minHeight: 480,
+						}}>
+						<Routes>
+							<Route path="/" element={<Home />} />
+							<Route element={<ProtectedRoute auth={["admin", "director_bu", "marketing"]} />}>
+								<Route path="/orders" element={<Orders />} />
+								<Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub />} />
+								<Route path="/dashboard" element={<Dashboard />} />
+							</Route>
+							<Route element={<ProtectedRoute auth={["admin", "director_bu", "customer_care"]} />}>
+								<Route path="/customer_care_inchina" element={<Customer_care_inchina />} />
+								<Route path="/customer_care_regular" element={<Customer_care_regular />} />
+								<Route path="/customer_care_potential" element={<Customer_care_potential />} />
+								<Route path="/whatsapp_session" element={<WhatsApp_session />} />
+								<Route path="/wechat_session" element={<Wechat_session />} />
+							</Route>
+							<Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}>
+								<Route path="/credit_card_bill" element={<Credit_card_bill />} />
+							</Route>
+							<Route element={<ProtectedRoute auth={["admin", "director_bu", "sale"]} />}>
+								<Route path="/sale" element={<Sale />} />
+							</Route>
+						</Routes>
+					</Content>
+					<Footer
+						style={{
+							textAlign: "center",
+						}}>
+						<UserOutlined /> {auth_store.user.name} ({auth_store.user.userid})<br />
+						Hainatravel Dashboard ©2022 Created by IT
+					</Footer>
+				</Layout>
+			</Layout>
+		</BrowserRouter>
+	);
+};
 
 export default observer(App);
diff --git a/src/charts/GroupSelect.js b/src/charts/GroupSelect.js
index de5ed42..83102fb 100644
--- a/src/charts/GroupSelect.js
+++ b/src/charts/GroupSelect.js
@@ -14,13 +14,15 @@ class GroupSelect extends Component {
             <div>
                 <Select
                     mode={store.group_select_mode}
-                    allowClear
                     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> : ''}
+                    <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>
diff --git a/src/config.js b/src/config.js
index b44be47..2da73bd 100644
--- a/src/config.js
+++ b/src/config.js
@@ -2,5 +2,5 @@ import React from "react";
 
 export const stores_Context = React.createContext();
 export const DATE_FORMAT = "YYYY-MM-DD";
-//export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
-export const HT_HOST = "http://202.103.68.100:890"; //889正式库
+export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
+//export const HT_HOST = "http://202.103.68.100:890"; //889正式库
diff --git a/src/stores/AuthStore.js b/src/stores/AuthStore.js
index 7e28d1b..2c624fb 100644
--- a/src/stores/AuthStore.js
+++ b/src/stores/AuthStore.js
@@ -9,7 +9,7 @@ class AuthStore {
     constructor(rootStore) {
         this.rootStore = rootStore;
         makeAutoObservable(this);
-        //this.get_auth(); //放到钉钉环境才能开启
+        this.get_auth(); //放到钉钉环境才能开启
     }
 
     auth = ['admin']; //开发时候用，正式环境留空
diff --git a/src/stores/Index.js b/src/stores/Index.js
index 5054890..cd5a43c 100644
--- a/src/stores/Index.js
+++ b/src/stores/Index.js
@@ -6,6 +6,7 @@ import CustomerStore from "./CustomerStore";
 import AuthStore from "./AuthStore";
 import ChatSessionStore from "./ChatSessionStore";
 import FinancialStore from "./FinancialStore";
+import SaleStore from "./SaleStore";
 import WechatStore from "./Wechat";
 import WhatsAppStore from "./WhatsApp";
 
@@ -19,6 +20,7 @@ class Index {
         this.auth_store = new AuthStore(this);
         this.chat_session_store = new ChatSessionStore(this);
         this.financial_store = new FinancialStore(this);
+        this.sale_store = new SaleStore(this);
         this.wechatStore = new WechatStore(this);
         this.whatsAppStore = new WhatsAppStore(this);
         makeAutoObservable(this);
diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js
new file mode 100644
index 0000000..76efaf3
--- /dev/null
+++ b/src/stores/SaleStore.js
@@ -0,0 +1,61 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import * as dd from "dingtalk-jsapi";
+import * as config from "../config";
+import * as comm from "../utils/commons";
+
+//销售数据
+class SaleStore {
+	constructor(rootStore) {
+		this.rootStore = rootStore;
+		makeAutoObservable(this);
+	}
+
+	loading = false;
+	active_tab_key = "overview"; //当前选择的标签
+	group_select_mode = false;
+	date_type = "applyDate";
+	groups = ["1,2,28,7"];
+    date_title='date_title';//日期段，只用于显示，防止日期选择控件的变化导致页面刷新
+
+	//选择事业部
+	group_handleChange(value) {
+		this.groups = value;
+	}
+
+	//切换标签页
+	onChange_Tabs(active_key) {
+		this.active_tab_key = active_key;
+		//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);
+        //     });
+    }
+}
+
+export default SaleStore;
diff --git a/src/views/Credit_card_bill.js b/src/views/Credit_card_bill.js
index 1b95e4d..7dcfcb1 100644
--- a/src/views/Credit_card_bill.js
+++ b/src/views/Credit_card_bill.js
@@ -1,298 +1,347 @@
-import React, {Component, useContext} from 'react';
-import {observer} from 'mobx-react';
-import {Row, Col, Button, Tabs, Table, Divider} from 'antd';
-import {stores_Context} from '../config'
-import {utils, writeFileXLSX} from "xlsx";
-import {NavLink, useNavigate} from "react-router-dom";
-import {
-    SlackOutlined,
-    ContainerOutlined,
-    CarryOutOutlined,
-    SearchOutlined,
-    GithubOutlined
-} from '@ant-design/icons';
-import BillTypeSelect from '../charts/BillTypeSelect'
-import GroupSelect from '../charts/GroupSelect'
-import Business_unit from '../charts/Business_unit'
-import DatePickerCharts from '../charts/DatePickerCharts'
-import {Line} from "@ant-design/charts";
-import * as comm from '../utils/commons'
+import React, { Component, useContext } from "react";
+import { observer } from "mobx-react";
+import { Row, Col, Button, Tabs, Table, Divider } from "antd";
+import { stores_Context } from "../config";
+import { utils, writeFileXLSX } from "xlsx";
+import { NavLink, useNavigate } from "react-router-dom";
+import { SlackOutlined, ContainerOutlined, CarryOutOutlined, SearchOutlined, GithubOutlined } from "@ant-design/icons";
+import BillTypeSelect from "../charts/BillTypeSelect";
+import GroupSelect from "../charts/GroupSelect";
+import Business_unit from "../charts/Business_unit";
+import DatePickerCharts from "../charts/DatePickerCharts";
+import { Line } from "@ant-design/charts";
+import * as comm from "../utils/commons";
 import * as config from "../config";
 
-
 const Credit_card_bill = () => {
+	const { financial_store, date_picker_store } = useContext(stores_Context);
+	const { bill_type_data, credit_card_data } = financial_store;
 
-    const {financial_store, date_picker_store} = useContext(stores_Context);
-    const {bill_type_data, credit_card_data} = financial_store;
-
-    const format_data = ((data) => {
-        let result = {dataSource: [], columns: []}
-        if (!comm.empty(data)) {
-            if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
-                let total_data1 = data.BillTypeDataTotal1;
-                let total_data2 = data.BillTypeDataTotal2;
-                result.columns = [
-                    {
-                        title: '项目类型',
-                        children: [{
-                            title: '',
-                            dataIndex: 'cb_billtype',
-                            render: (text, record) => <a onClick={() => {
-                                credit_card_data.set_bill_filtered(text);//切换到明细页
-                                credit_card_data.set_active_tab('detail_data');
-                            }}>{text}</a>
-                        }],
-                        sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
-                    },
-                    {
-                        title: '美金',
-                        children: [{
-                            title: comm.show_vs_tag(total_data1.usd_vs, total_data1.usd_diff, total_data1.cb_usd, total_data2.cb_usd),
-                            dataIndex: 'cb_usd'
-                        }],
-                    },
-                    {
-                        title: '人民币',
-                        children: [{
-                            title: comm.show_vs_tag(total_data1.rmb_vs, total_data1.rmb_diff, total_data1.cb_rmb, total_data2.cb_rmb),
-                            dataIndex: 'cb_rmb'
-                        }],
-                    },
-                ];
-                for (let item of data.BillTypeData1) {
-                    for (let item2 of data.BillTypeData2) {
-                        if (item.cb_billtype == item2.cb_billtype) {
-                            result.dataSource.push({
-                                key: item.key,
-                                cb_billtype: item.cb_billtype,
-                                groups: item.groups,
-                                cb_usd: comm.show_vs_tag(item.usd_vs, item.usd_diff, item.cb_usd, item2.cb_usd),
-                                cb_rmb: comm.show_vs_tag(item.rmb_vs, item.rmb_diff, item.cb_rmb, item2.cb_rmb),
-                            })
-                        }
-                    }
-                }
-            } else {
-                result.columns = [
-                    {
-                        title: '项目类型',
-                        children: [{
-                            title: '',
-                            dataIndex: 'cb_billtype',
-                            render: (text, record) => <a onClick={() => {
-                                credit_card_data.set_bill_filtered(text);//切换到明细页
-                                credit_card_data.set_active_tab('detail_data');
-                            }}>{text}</a>
-                        }],
-                        sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
-                    },
-                    {
-                        title: '美金',
-                        children: [{title: data.BillTypeDataTotal1.cb_usd, dataIndex: 'cb_usd'}],
-                        sorter: (a, b) => parseFloat(b.cb_usd.replace(/,/g, '')) - parseFloat(a.cb_usd.replace(/,/g, '')),
-                    },
-                    {
-                        title: '人民币',
-                        children: [{title: data.BillTypeDataTotal1.cb_rmb, dataIndex: 'cb_rmb'}],
-                        sorter: (a, b) => parseFloat(b.cb_rmb.replace(/,/g, '')) - parseFloat(a.cb_rmb.replace(/,/g, '')),
-                    },
-                ]
-                result.dataSource = data.BillTypeData1;
-            }
-        }
-        return result;
-    })
-
-    const filters_array = (data_array) => {
-        return comm.unique(data_array).map(item => {
-            return {text: item, value: item}
-        });
-    }
-
-    const format_data_detail = ((data) => {
-        let result = {dataSource: [], columns: []}
-        if (!comm.empty(data)) {
-            let show_vs = false;
-            let usd_totle1, usd_totle2, usd_diff, usd_vs, rmb_totle1, rmb_totle2, rmb_diff, rmb_vs = 0;
-            usd_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0));
-            rmb_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0));
-            if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
-                show_vs = true;
-                //计算汇总的变化
-                usd_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_usd, 0));
-                usd_diff = usd_totle1 - usd_totle2;
-                usd_vs = comm.formatPercent(usd_diff / usd_totle1);
-                rmb_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_rmb, 0));
-                rmb_diff = rmb_totle1 - rmb_totle2;
-                rmb_vs = comm.formatPercent(rmb_diff / rmb_totle1);
-            }
-            if (show_vs) { //有比较的数据
-                result.dataSource.push(...data.billdate1, ...data.billdate2);
-            } else {
-                result.dataSource.push(...data.billdate1);
-            }
-            result.columns = [
-                {
-                    title: '项目类型',
-                    children: [{
-                        title: '',
-                        dataIndex: 'cb_billtype',
-                    }],
-                    sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
-                    filters: filters_array(result.dataSource.map((item) => {
-                        return item.cb_billtype
-                    })),
-                    filteredValue: credit_card_data.filteredValue || null,
-                    onFilter: (value, record) => record.cb_billtype.indexOf(value) === 0,
-                },
-                {
-                    title: '项目',
-                    children: [{
-                        title: '',
-                        dataIndex: 'cb_bill',
-                    }],
-                    sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill),
-                },
-                {
-                    title: '美金',
-                    children: [{
-                        title: show_vs ? comm.show_vs_tag(usd_vs, usd_diff, usd_totle1, usd_totle2) : usd_totle1,
-                        dataIndex: 'cb_usd'
-                    }],
-                    sorter: (a, b) => b.cb_usd - a.cb_usd,
-                },
-                {
-                    title: '人民币',
-                    children: [{
-                        title: show_vs ? comm.show_vs_tag(rmb_vs, rmb_diff, rmb_totle1, rmb_totle2) : rmb_totle1,
-                        dataIndex: 'cb_rmb'
-                    }],
-                    sorter: (a, b) => b.cb_rmb - a.cb_rmb,
-                },
+	const format_data = data => {
+		let result = { dataSource: [], columns: [] };
+		if (!comm.empty(data)) {
+			if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
+				//有比较的数据
+				let total_data1 = data.BillTypeDataTotal1;
+				let total_data2 = data.BillTypeDataTotal2;
+				result.columns = [
+					{
+						title: "项目类型",
+						children: [
+							{
+								title: "",
+								dataIndex: "cb_billtype",
+								render: (text, record) => (
+									<a
+										onClick={() => {
+											credit_card_data.set_bill_filtered(text); //切换到明细页
+											credit_card_data.set_active_tab("detail_data");
+										}}>
+										{text}
+									</a>
+								),
+							},
+						],
+						sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
+					},
+					{
+						title: "美金",
+						children: [
+							{
+								title: comm.show_vs_tag(total_data1.usd_vs, total_data1.usd_diff, total_data1.cb_usd, total_data2.cb_usd),
+								dataIndex: "cb_usd",
+							},
+						],
+					},
+					{
+						title: "人民币",
+						children: [
+							{
+								title: comm.show_vs_tag(total_data1.rmb_vs, total_data1.rmb_diff, total_data1.cb_rmb, total_data2.cb_rmb),
+								dataIndex: "cb_rmb",
+							},
+						],
+					},
+				];
+				for (let item of data.BillTypeData1) {
+					for (let item2 of data.BillTypeData2) {
+						if (item.cb_billtype == item2.cb_billtype) {
+							result.dataSource.push({
+								key: item.key,
+								cb_billtype: item.cb_billtype,
+								groups: item.groups,
+								cb_usd: comm.show_vs_tag(item.usd_vs, item.usd_diff, item.cb_usd, item2.cb_usd),
+								cb_rmb: comm.show_vs_tag(item.rmb_vs, item.rmb_diff, item.cb_rmb, item2.cb_rmb),
+							});
+						}
+					}
+				}
+			} else {
+				result.columns = [
+					{
+						title: "项目类型",
+						children: [
+							{
+								title: "",
+								dataIndex: "cb_billtype",
+								render: (text, record) => (
+									<a
+										onClick={() => {
+											credit_card_data.set_bill_filtered(text); //切换到明细页
+											credit_card_data.set_active_tab("detail_data");
+										}}>
+										{text}
+									</a>
+								),
+							},
+						],
+						sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
+					},
+					{
+						title: "美金",
+						children: [{ title: data.BillTypeDataTotal1.cb_usd, dataIndex: "cb_usd" }],
+						sorter: (a, b) => parseFloat(b.cb_usd.replace(/,/g, "")) - parseFloat(a.cb_usd.replace(/,/g, "")),
+					},
+					{
+						title: "人民币",
+						children: [{ title: data.BillTypeDataTotal1.cb_rmb, dataIndex: "cb_rmb" }],
+						sorter: (a, b) => parseFloat(b.cb_rmb.replace(/,/g, "")) - parseFloat(a.cb_rmb.replace(/,/g, "")),
+					},
+				];
+				result.dataSource = data.BillTypeData1;
+			}
+		}
+		return result;
+	};
 
-                {
-                    title: '交易日期',
-                    children: [{title: '', dataIndex: 'cb_datetime'}],
-                },
-                {
-                    title: '账期',
-                    children: [{title: '', dataIndex: 'cb_billdate'}],
-                },
-                {
-                    title: '事业部',
-                    children: [{title: '', dataIndex: 'cb_business_unit'}],
-                    sorter: (a, b) => a.cb_business_unit.localeCompare(b.cb_business_unit),
-                },
-                {
-                    title: '小组',
-                    children: [{title: '', dataIndex: 'cb_group'}],
-                    sorter: (a, b) => a.cb_group.localeCompare(b.cb_group),
-                },
-            ]
+	const filters_array = data_array => {
+		return comm.unique(data_array).map(item => {
+			return { text: item, value: item };
+		});
+	};
 
-        }
+	const format_data_detail = data => {
+		let result = { dataSource: [], columns: [] };
+		if (!comm.empty(data)) {
+			let show_vs = false;
+			let usd_totle1,
+				usd_totle2,
+				usd_diff,
+				usd_vs,
+				rmb_totle1,
+				rmb_totle2,
+				rmb_diff,
+				rmb_vs = 0;
+			usd_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0));
+			rmb_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0));
+			if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
+				//有比较的数据
+				show_vs = true;
+				//计算汇总的变化
+				usd_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_usd, 0));
+				usd_diff = usd_totle1 - usd_totle2;
+				usd_vs = comm.formatPercent(usd_diff / usd_totle1);
+				rmb_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_rmb, 0));
+				rmb_diff = rmb_totle1 - rmb_totle2;
+				rmb_vs = comm.formatPercent(rmb_diff / rmb_totle1);
+			}
+			if (show_vs) {
+				//有比较的数据
+				result.dataSource.push(...data.billdate1, ...data.billdate2);
+			} else {
+				result.dataSource.push(...data.billdate1);
+			}
+			result.columns = [
+				{
+					title: "项目类型",
+					children: [
+						{
+							title: "",
+							dataIndex: "cb_billtype",
+						},
+					],
+					sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
+					filters: filters_array(
+						result.dataSource.map(item => {
+							return item.cb_billtype;
+						})
+					),
+					filteredValue: credit_card_data.filteredValue || null,
+					onFilter: (value, record) => record.cb_billtype.indexOf(value) === 0,
+				},
+				{
+					title: "项目",
+					children: [
+						{
+							title: "",
+							dataIndex: "cb_bill",
+						},
+					],
+					sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill),
+				},
+				{
+					title: "美金",
+					children: [
+						{
+							title: show_vs ? comm.show_vs_tag(usd_vs, usd_diff, usd_totle1, usd_totle2) : usd_totle1,
+							dataIndex: "cb_usd",
+						},
+					],
+					sorter: (a, b) => b.cb_usd - a.cb_usd,
+				},
+				{
+					title: "人民币",
+					children: [
+						{
+							title: show_vs ? comm.show_vs_tag(rmb_vs, rmb_diff, rmb_totle1, rmb_totle2) : rmb_totle1,
+							dataIndex: "cb_rmb",
+						},
+					],
+					sorter: (a, b) => b.cb_rmb - a.cb_rmb,
+				},
 
-        return result;
-    })
+				{
+					title: "交易日期",
+					children: [{ title: "", dataIndex: "cb_datetime" }],
+				},
+				{
+					title: "账期",
+					children: [{ title: "", dataIndex: "cb_billdate" }],
+				},
+				{
+					title: "事业部",
+					children: [{ title: "", dataIndex: "cb_business_unit" }],
+					sorter: (a, b) => a.cb_business_unit.localeCompare(b.cb_business_unit),
+				},
+				{
+					title: "小组",
+					children: [{ title: "", dataIndex: "cb_group" }],
+					sorter: (a, b) => a.cb_group.localeCompare(b.cb_group),
+				},
+			];
+		}
 
-    const credit_card_bills = !comm.empty(credit_card_data.data) ? format_data_detail(credit_card_data.data) : format_data_detail([]);
-    const credit_card_bills_by_type = !comm.empty(credit_card_data.data_by_type) ? format_data(credit_card_data.data_by_type) : format_data([]);
+		return result;
+	};
 
-    const line_config = {
-        data: credit_card_bills.dataSource,
-        padding: 'auto',
-        xField: 'cb_datetime',
-        yField: 'cb_usd',
-        seriesField: 'groups',
-        xAxis: {
-            type: 'timeCat',
-        },
-        point: {
-            size: 4,
-            shape: 'cicle',
-        },
-        label: {},//显示标签
-        legend: {
-            itemValue: {
-                formatter: (text, item) => {
-                    const items = credit_card_bills.dataSource.filter((d) => d.groups === item.value);//按站点筛选
-                    return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : '';//计算总数
-                },
-            },
-        },
-        // tooltip: {
-        //     customContent: (title, items) => {
-        //         const data = items[0]?.data || {};
-        //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
-        //     }
-        // },
-        smooth: true,
-    };
+	const credit_card_bills = !comm.empty(credit_card_data.data) ? format_data_detail(credit_card_data.data) : format_data_detail([]);
+	const credit_card_bills_by_type = !comm.empty(credit_card_data.data_by_type) ? format_data(credit_card_data.data_by_type) : format_data([]);
 
-    return (
-        <div>
-            <Row>
-                <Col span={11}>
-                    <h2>信用卡账单</h2>
-                </Col>
-                <Col span={10}>
-                    <Row>
-                        <Col span={12}>
-                            <BillTypeSelect store={bill_type_data} show_all={true}/>
-                            <Business_unit store={credit_card_data} show_all={true}/>
-                            {/*<GroupSelect store={credit_card_data} show_all={true}/>*/}
-                        </Col>
-                        <Col span={12}>
-                            <DatePickerCharts/>
-                        </Col>
-                    </Row>
-                </Col>
-                <Col span={1}></Col>
-                <Col span={2}>
-                    <Button type="primary" icon={<SearchOutlined/>} size='large' loading={credit_card_data.loading}
-                            onClick={() => {
-                                financial_store.get_credit_card_bills();
-                                financial_store.get_credit_card_bills_by_type();
-                                financial_store.set_bill_filtered(false);
-                            }}>统计</Button>
-                </Col>
-            </Row>
+	const line_config = {
+		data: credit_card_bills.dataSource,
+		padding: "auto",
+		xField: "cb_datetime",
+		yField: "cb_usd",
+		seriesField: "groups",
+		xAxis: {
+			type: "timeCat",
+		},
+		point: {
+			size: 4,
+			shape: "cicle",
+		},
+		label: {}, //显示标签
+		legend: {
+			itemValue: {
+				formatter: (text, item) => {
+					const items = credit_card_bills.dataSource.filter(d => d.groups === item.value); //按站点筛选
+					return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : ""; //计算总数
+				},
+			},
+		},
+		// tooltip: {
+		//     customContent: (title, items) => {
+		//         const data = items[0]?.data || {};
+		//         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
+		//     }
+		// },
+		smooth: true,
+	};
 
-            <Row>
-                <Col span={24}>
-                    <Line {...line_config} />
-                </Col>
-                <Col className="gutter-row" span={24}>
-                    <Tabs activeKey={credit_card_data.active_tab} onChange={credit_card_data.set_active_tab}>
-                        <Tabs.TabPane tab={<span><CarryOutOutlined/>项目汇总</span>} key="summarized_data">
-                            <Table id="table_by_type" dataSource={credit_card_bills_by_type.dataSource}
-                                   columns={credit_card_bills_by_type.columns}
-                                   pagination={false}
-                                   size="small"/>
-                            <Divider orientation="right"><a
-                                onClick={() => {
-                                    const wb = utils.table_to_book(document.getElementById("table_by_type").getElementsByTagName('table')[0]);
-                                    writeFileXLSX(wb, "项目汇总.xlsx");
-                                }}>导出excel</a></Divider>
-                        </Tabs.TabPane>
-                        <Tabs.TabPane tab={<span><ContainerOutlined/>明细</span>} key="detail_data">
-                            <Table id="table_by_detail" dataSource={credit_card_bills.dataSource}
-                                   columns={credit_card_bills.columns}
-                                   pagination={false}
-                                   onChange={credit_card_data.set_table_handleChange}
-                                   size="small"/>
-                            <Divider orientation="right"><a
-                                onClick={() => {
-                                    const wb = utils.table_to_book(document.getElementById("table_by_detail").getElementsByTagName('table')[0]);
-                                    writeFileXLSX(wb, "明细.xlsx");
-                                }}>导出excel</a></Divider>
-                        </Tabs.TabPane>
-                    </Tabs>
-                </Col>
-            </Row>
-        </div>
-    );
+	return (
+		<div>
+			<Row>
+				<Col span={11}>
+					<h2>信用卡账单</h2>
+				</Col>
+				<Col span={10}>
+					<Row>
+						<Col span={12}>
+							<BillTypeSelect store={bill_type_data} show_all={true} />
+							<Business_unit store={credit_card_data} show_all={true} />
+							{/*<GroupSelect store={credit_card_data} show_all={true}/>*/}
+						</Col>
+						<Col span={12}>
+							<DatePickerCharts />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={1}></Col>
+				<Col span={2}>
+					<Button
+						type="primary"
+						icon={<SearchOutlined />}
+						size="large"
+						loading={credit_card_data.loading}
+						onClick={() => {
+							financial_store.get_credit_card_bills();
+							financial_store.get_credit_card_bills_by_type();
+							financial_store.set_bill_filtered(false);
+						}}>
+						统计
+					</Button>
+				</Col>
+			</Row>
 
-}
+			<Row>
+				<Col span={24}>
+					<Line {...line_config} />
+				</Col>
+				<Col className="gutter-row" span={24}>
+					<Tabs activeKey={credit_card_data.active_tab} onChange={credit_card_data.set_active_tab}>
+						<Tabs.TabPane
+							tab={
+								<span>
+									<CarryOutOutlined />
+									项目汇总
+								</span>
+							}
+							key="summarized_data">
+							<Table id="table_by_type" dataSource={credit_card_bills_by_type.dataSource} columns={credit_card_bills_by_type.columns} pagination={false} size="small" />
+							<Divider orientation="right">
+								<a
+									onClick={() => {
+										const wb = utils.table_to_book(document.getElementById("table_by_type").getElementsByTagName("table")[0]);
+										writeFileXLSX(wb, "项目汇总.xlsx");
+									}}>
+									导出excel
+								</a>
+							</Divider>
+						</Tabs.TabPane>
+						<Tabs.TabPane
+							tab={
+								<span>
+									<ContainerOutlined />
+									明细
+								</span>
+							}
+							key="detail_data">
+							<Table id="table_by_detail" dataSource={credit_card_bills.dataSource} columns={credit_card_bills.columns} pagination={false} onChange={credit_card_data.set_table_handleChange} size="small" />
+							<Divider orientation="right">
+								<a
+									onClick={() => {
+										const wb = utils.table_to_book(document.getElementById("table_by_detail").getElementsByTagName("table")[0]);
+										writeFileXLSX(wb, "明细.xlsx");
+									}}>
+									导出excel
+								</a>
+							</Divider>
+						</Tabs.TabPane>
+					</Tabs>
+				</Col>
+			</Row>
+		</div>
+	);
+};
 
 export default observer(Credit_card_bill);
diff --git a/src/views/Orders.js b/src/views/Orders.js
index c70508b..058c11c 100644
--- a/src/views/Orders.js
+++ b/src/views/Orders.js
@@ -1,318 +1,434 @@
-import React, {Component} from 'react';
-import {Row, Col, Button, Tabs, Table, Divider} from 'antd';
-import {
-    ContainerOutlined, CarryOutOutlined, BlockOutlined,
-    SmileOutlined, TagsOutlined, GlobalOutlined,
-    SearchOutlined,
-} from '@ant-design/icons';
-import {stores_Context} from '../config'
-import {Line} from "@ant-design/charts";
+import React, { Component } from "react";
+import { Row, Col, Button, Tabs, Table, Divider } from "antd";
+import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined,FullscreenOutlined,DingtalkOutlined } from "@ant-design/icons";
+import { stores_Context } from "../config";
+import { Line } from "@ant-design/charts";
 import SiteSelect from "../charts/SiteSelect";
-import {observer} from 'mobx-react';
-import DatePickerCharts from '../charts/DatePickerCharts'
+import { observer } from "mobx-react";
+import DatePickerCharts from "../charts/DatePickerCharts";
 import * as config from "../config";
-import {NavLink} from "react-router-dom";
-import * as comm from "../utils/commons"
-import {utils, writeFileXLSX} from "xlsx";
+import { NavLink } from "react-router-dom";
+import * as comm from "../utils/commons";
+import { utils, writeFileXLSX } from "xlsx";
 
 class Orders extends Component {
+	static contextType = stores_Context;
 
-    static contextType = stores_Context;
+	constructor(props) {
+		super(props);
+	}
 
-    constructor(props) {
-        super(props);
-    }
+	// componentDidMount() {
+	//     const {orders_store} = this.context;
+	//     orders_store.getOrderCount();
+	//     orders_store.onChange_Tabs(orders_store.active_tab_key);
+	// }
 
-    // componentDidMount() {
-    //     const {orders_store} = this.context;
-    //     orders_store.getOrderCount();
-    //     orders_store.onChange_Tabs(orders_store.active_tab_key);
-    // }
+	format_data(data) {
+		const { date_picker_store, orders_store } = this.context;
+		let result = { dataSource: [], columns: [] };
+		if (!comm.empty(data)) {
+			let ordercountTotal1 = data.ordercountTotal1;
+			let ordercountTotal2 = data.ordercountTotal2;
+			if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
+				//有比较的数据
+				result.columns = [
+					{
+						title: "",
+						children: [
+							{
+								title: (
+									<span>
+										<div>
+											{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
+										</div>
+										<div>
+											{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}
+										</div>
+									</span>
+								),
+								dataIndex: "OrderType",
+								render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>,
+							},
+						],
+					},
+					{
+						title: "数量",
+						children: [
+							{
+								title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
+								dataIndex: "OrderCount",
+							},
+						],
+					},
+					{
+						title: "成交数",
+						children: [
+							{
+								title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
+								dataIndex: "CJCount",
+							},
+						],
+					},
+					{
+						title: "成交人数",
+						children: [
+							{
+								title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
+								dataIndex: "CJPersonNum",
+							},
+						],
+					},
+					{
+						title: "成交率",
+						children: [
+							{
+								title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
+								dataIndex: "CJrate",
+							},
+						],
+					},
+					{
+						title: "成交毛利（预计）",
+						children: [
+							{
+								title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
+								dataIndex: "YJLY",
+							},
+						],
+					},
 
+					{
+						title: "单个订单价值",
+						children: [
+							{
+								title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
+								dataIndex: "Ordervalue",
+							},
+						],
+					},
+				];
+				for (let item of data.ordercount1) {
+					for (let item2 of data.ordercount2) {
+						if (item.OrderType == item2.OrderType) {
+							result.dataSource.push({
+								key: item.key,
+								OrderType: item.OrderType,
+								OrderTypeSN: item.OrderTypeSN,
+								OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount),
+								CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount),
+								CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum),
+								CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate),
+								YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY),
+								Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue),
+							});
+						}
+					}
+				}
+			} else {
+				result.columns = [
+					{
+						title: "",
+						children: [
+							{
+								title: (
+									<span>
+										<div>
+											{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
+										</div>
+									</span>
+								),
+								dataIndex: "OrderType",
+								render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>,
+							},
+						],
+					},
+					{
+						title: "数量",
+						children: [{ title: ordercountTotal1.OrderCount, dataIndex: "OrderCount" }],
+						sorter: (a, b) => b.OrderCount - a.OrderCount,
+					},
+					{
+						title: "成交数",
+						children: [{ title: ordercountTotal1.CJCount, dataIndex: "CJCount" }],
+						sorter: (a, b) => b.CJCount - a.CJCount,
+					},
+					{
+						title: "成交人数",
+						children: [{ title: ordercountTotal1.CJPersonNum, dataIndex: "CJPersonNum" }],
+						sorter: (a, b) => b.CJPersonNum - a.CJPersonNum,
+					},
+					{
+						title: "成交率",
+						children: [{ title: ordercountTotal1.CJrate, dataIndex: "CJrate" }],
+						sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate),
+					},
+					{
+						title: "成交毛利（预计）",
+						children: [{ title: ordercountTotal1.YJLY, dataIndex: "YJLY" }],
+						sorter: (a, b) => parseFloat(b.YJLY.replace(/,/g, "")) - parseFloat(a.YJLY.replace(/,/g, "")),
+					},
 
-    format_data(data) {
-        const {date_picker_store, orders_store} = this.context;
-        let result = {dataSource: [], columns: []}
-        if (!comm.empty(data)) {
-            let ordercountTotal1 = data.ordercountTotal1;
-            let ordercountTotal2 = data.ordercountTotal2;
-            if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
-                result.columns = [
-                    {
-                        title: '',
-                        children: [{
-                            title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div><div>{date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}</div></span>,
-                            dataIndex: 'OrderType',
-                            render: (text, record) => <NavLink
-                                to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>
-                        }]
-                    },
-                    {
-                        title: '数量',
-                        children: [{
-                            title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
-                            dataIndex: 'OrderCount'
-                        }],
-                    },
-                    {
-                        title: '成交数',
-                        children: [{
-                            title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
-                            dataIndex: 'CJCount'
-                        }],
-                    },
-                    {
-                        title: '成交人数',
-                        children: [{
-                            title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
-                            dataIndex: 'CJPersonNum'
-                        }],
-                    },
-                    {
-                        title: '成交率',
-                        children: [{
-                            title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
-                            dataIndex: 'CJrate'
-                        }],
-                    },
-                    {
-                        title: '成交毛利（预计）',
-                        children: [{
-                            title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
-                            dataIndex: 'YJLY'
-                        }],
-                    },
+					{
+						title: "单个订单价值",
+						children: [{ title: ordercountTotal1.Ordervalue, dataIndex: "Ordervalue" }],
+						sorter: (a, b) => parseFloat(b.Ordervalue.replace(/,/g, "")) - parseFloat(a.Ordervalue.replace(/,/g, "")),
+					},
+				];
+				result.dataSource = data.ordercount1;
+			}
+		}
+		return result;
+	}
 
-                    {
-                        title: '单个订单价值',
-                        children: [{
-                            title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
-                            dataIndex: 'Ordervalue'
-                        }],
-                    },
-                ];
-                for (let item of data.ordercount1) {
-                    for (let item2 of data.ordercount2) {
-                        if (item.OrderType == item2.OrderType) {
-                            result.dataSource.push({
-                                key: item.key,
-                                OrderType: item.OrderType,
-                                OrderTypeSN: item.OrderTypeSN,
-                                OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount),
-                                CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount),
-                                CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum),
-                                CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate),
-                                YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY),
-                                Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue),
-                            })
-                        }
-                    }
-                }
-            } else {
-                result.columns =
-                    [
-                        {
-                            title: '',
-                            children: [{
-                                title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div></span>,
-                                dataIndex: 'OrderType',
-                                render: (text, record) => <NavLink
-                                    to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${record.OrderType}`}>{text}</NavLink>
-                            }]
-                        },
-                        {
-                            title: '数量',
-                            children: [{title: ordercountTotal1.OrderCount, dataIndex: 'OrderCount'}],
-                            sorter: (a, b) => b.OrderCount - a.OrderCount,
-                        },
-                        {
-                            title: '成交数',
-                            children: [{title: ordercountTotal1.CJCount, dataIndex: 'CJCount'}],
-                            sorter: (a, b) => b.CJCount - a.CJCount,
-                        },
-                        {
-                            title: '成交人数',
-                            children: [{title: ordercountTotal1.CJPersonNum, dataIndex: 'CJPersonNum'}],
-                            sorter: (a, b) => b.CJPersonNum - a.CJPersonNum,
-                        },
-                        {
-                            title: '成交率',
-                            children: [{title: ordercountTotal1.CJrate, dataIndex: 'CJrate'}],
-                            sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate),
-                        },
-                        {
-                            title: '成交毛利（预计）',
-                            children: [{title: ordercountTotal1.YJLY, dataIndex: 'YJLY'}],
-                            sorter: (a, b) => parseFloat(b.YJLY.replace(/,/g, '')) - parseFloat(a.YJLY.replace(/,/g, '')),
-                        },
+	render() {
+		const { orders_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 = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; //平均值，显示一条平均线
+		const config = {
+			data: data_source,
+			padding: "auto",
+			xField: "xField",
+			yField: "yField",
+			seriesField: "seriesField",
+			xAxis: {
+				type: "timeCat",
+			},
+			point: {
+				size: 4,
+				shape: "cicle",
+			},
+			annotations: [
+				{
+					type: "text",
+					position: ["start", avg_line_y],
+					content: avg_line_y,
+					offsetX: -15,
+					style: {
+						fill: "#F4664A",
+						textBaseline: "bottom",
+					},
+				},
+				{
+					type: "line",
+					start: [-10, avg_line_y],
+					end: ["max", avg_line_y],
+					style: {
+						stroke: "#F4664A",
+						lineDash: [2, 2],
+					},
+				},
+			],
+			label: {}, //显示标签
+			legend: {
+				itemValue: {
+					formatter: (text, item) => {
+						const items = data_source.filter(d => d.seriesField === item.value); //按站点筛选
+						return items.length ? items.reduce((a, b) => a + b.yField, 0) : ""; //计算总数
+					},
+				},
+			},
+			tooltip: {
+				// customContent: (title, items) => {
+				//     const data = items[0]?.data || {};
+				//     return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
+				// }
+				title: (title, datum) => {
+					return title + " " + comm.getWeek(datum.xField); //显示周几
+				},
+			},
+			smooth: true,
+		};
 
-                        {
-                            title: '单个订单价值',
-                            children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}],
-                            sorter: (a, b) => parseFloat(b.Ordervalue.replace(/,/g, '')) - parseFloat(a.Ordervalue.replace(/,/g, '')),
-                        },
-                    ];
-                result.dataSource = data.ordercount1;
-            }
-        }
-        return result;
-    }
+		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>
+					</Col>
+				</Row>
+				<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
+					<Col span={24}>
+						<Line {...config} />
+					</Col>
 
-    render() {
-        const {orders_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 = data_source.length ? Math.round((data_source.reduce((a, b) => a + b.yField, 0)) / data_source.length) : 0;//平均值，显示一条平均线
-        const config = {
-            data: data_source,
-            padding: 'auto',
-            xField: 'xField',
-            yField: 'yField',
-            seriesField: 'seriesField',
-            xAxis: {
-                type: 'timeCat',
-            },
-            point: {
-                size: 4,
-                shape: 'cicle',
-            },
-            annotations: [
-                {
-                    type: 'text',
-                    position: ['start', avg_line_y],
-                    content: avg_line_y,
-                    offsetX: -15,
-                    style: {
-                        fill: '#F4664A',
-                        textBaseline: 'bottom',
-                    }
-                },
-                {
-                    type: 'line',
-                    start: [-10, avg_line_y],
-                    end: ['max', avg_line_y],
-                    style: {
-                        stroke: '#F4664A',
-                        lineDash: [2, 2],
-                    },
-                },
-            ],
-            label: {},//显示标签
-            legend: {
-                itemValue: {
-                    formatter: (text, item) => {
-                        const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
-                        return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
-                    },
-                },
-            },
-            tooltip: {
-                // customContent: (title, items) => {
-                //     const data = items[0]?.data || {};
-                //     return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
-                // }
-                title: (title, datum) => {
-                    return title + ' ' + comm.getWeek(datum.xField);//显示周几
-                },
-            },
-            smooth: true,
-        };
-
-
-        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>
-                    </Col>
-                </Row>
-                <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
-
-                    <Col span={24}>
-                        <Line {...config} />
-                    </Col>
-
-                    <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}/>
-                                <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}/>
-                                <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}/>
-                                <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}/>
-                                <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}/>
-                                <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}/>
-                                <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>
-                    </Col>
-
-                </Row>
-            </div>
-        );
-    }
+					<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} />
+								<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} />
+								<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} />
+								<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} />
+								<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} />
+								<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} />
+								<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} />
+								<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} />
+								<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>
+					</Col>
+				</Row>
+			</div>
+		);
+	}
 }
 
 export default observer(Orders);
diff --git a/src/views/Orders_sub.js b/src/views/Orders_sub.js
index 80fe2e4..6e2f00c 100644
--- a/src/views/Orders_sub.js
+++ b/src/views/Orders_sub.js
@@ -1,242 +1,274 @@
-import React, {useContext, useEffect} from 'react';
-import {Row, Col, Button, Tabs, Table, Space} 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 {NavLink, useParams} from "react-router-dom";
+import React, { useContext, useEffect } from "react";
+import { Row, Col, Button, Tabs, Table, Space, 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 { NavLink, useParams } from "react-router-dom";
 import * as comm from "../utils/commons";
 import * as config from "../config";
 
 const Orders_sub = () => {
+	const { ordertype, ordertype_sub, ordertype_title } = useParams();
+	const { orders_store, date_picker_store } = useContext(stores_Context);
 
+	useEffect(() => {
+		orders_store.getOrderCount_type(ordertype, ordertype_sub);
+		orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
+	}, []);
 
-    const {ordertype, ordertype_sub, ordertype_title} = useParams();
-    const {orders_store, date_picker_store} = useContext(stores_Context);
+	const data_source = orders_store.orderCountData_type;
+	const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; //平均值，显示一条平均线
+	const line = {
+		data: data_source,
+		padding: "auto",
+		xField: "xField",
+		yField: "yField",
+		seriesField: "seriesField",
+		xAxis: {
+			type: "timeCat",
+		},
+		annotations: [
+			{
+				type: "text",
+				position: ["start", avg_line_y],
+				content: avg_line_y,
+				offsetX: -15,
+				style: {
+					fill: "#F4664A",
+					textBaseline: "bottom",
+				},
+			},
+			{
+				type: "line",
+				start: [-10, avg_line_y],
+				end: ["max", avg_line_y],
+				style: {
+					stroke: "#F4664A",
+					lineDash: [2, 2],
+				},
+			},
+		],
+		tooltip: {
+			title: (title, datum) => {
+				return title + " " + comm.getWeek(datum.xField); //显示周几
+			},
+		},
+		label: {}, //显示标签
+		legend: {
+			title: {
+				text: ordertype_title,
+			},
+			itemValue: {
+				formatter: (text, item) => {
+					const items = data_source.filter(d => d.seriesField === item.value); //按站点筛选
+					return items.length ? items.reduce((a, b) => a + b.yField, 0) : ""; //计算总数
+				},
+			},
+		},
+		smooth: true,
+	};
 
-    useEffect(() => {
-        orders_store.getOrderCount_type(ordertype, ordertype_sub);
-        orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
-    }, [])
+	const format_data = data => {
+		let result = { dataSource: [], columns: [] };
+		if (!comm.empty(data)) {
+			result.columns = [
+				{
+					title: "页面",
+					children: [
+						{
+							title: "",
+							dataIndex: "request_uri",
+						},
+					],
+				},
+				{
+					title: "访问量",
+					children: [
+						{
+							title: data.reduce((a, b) => a + b.viewCount, 0),
+							dataIndex: "viewCount",
+						},
+					],
+				},
+			];
+			result.dataSource = data;
+		}
+		return result;
+	};
 
-    const data_source = orders_store.orderCountData_type;
-    const avg_line_y = data_source.length ? Math.round((data_source.reduce((a, b) => a + b.yField, 0)) / data_source.length) : 0;//平均值，显示一条平均线
-    const line = {
-        data: data_source,
-        padding: 'auto',
-        xField: 'xField',
-        yField: 'yField',
-        seriesField: 'seriesField',
-        xAxis: {
-            type: 'timeCat',
-        },
-        annotations: [
-            {
-                type: 'text',
-                position: ['start', avg_line_y],
-                content: avg_line_y,
-                offsetX: -15,
-                style: {
-                    fill: '#F4664A',
-                    textBaseline: 'bottom',
-                }
-            },
-            {
-                type: 'line',
-                start: [-10, avg_line_y],
-                end: ['max', avg_line_y],
-                style: {
-                    stroke: '#F4664A',
-                    lineDash: [2, 2],
-                },
-            },
-        ],
-        tooltip: {
-            title: (title, datum) => {
-                return title+' '+ comm.getWeek(datum.xField);//显示周几
-            },
-        },
-        label: {},//显示标签
-        legend: {
-            title: {
-                text: ordertype_title,
-            },
-            itemValue: {
-                formatter: (text, item) => {
-                    const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
-                    return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
-                },
-            },
-        },
-        smooth: true,
-    };
+	const format_data_detail = data => {
+		let result = { dataSource: [], columns: [] };
+		if (!comm.empty(data)) {
+			result.columns = [
+				{
+					title: "订单号",
+					dataIndex: "COLI_ID",
+					key: "COLI_ID",
+				},
+				{
+					title: "网站",
+					dataIndex: "COLI_WebCode",
+					key: "COLI_WebCode",
+				},
+				{
+					title: "成行",
+					dataIndex: "COLI_Success",
+					key: "COLI_Success",
+					render: (text, record) => <span>{text == 1 ? "是" : "否"}</span>,
+					sorter: (a, b) => b.COLI_Success - a.COLI_Success,
+				},
+				// {
+				// 	title: "人数(成/童/婴)",
+				// 	dataIndex: "COLI_PersonNum",
+				// 	key: "COLI_PersonNum",
+				// 	render: (text, record) => (
+				// 		<span>
+				// 			{record.COLI_PersonNum}/{record.COLI_ChildNum}/{record.COLI_BabyNum}
+				// 		</span>
+				// 	),
+				// },
+				{
+					title: "预计利润",
+					dataIndex: "CGI_YJLY",
+					key: "CGI_YJLY",
+				},
+				{
+					title: "预定时间",
+					dataIndex: "COLI_ApplyDate",
+					key: "COLI_ApplyDate",
+				},
+				{
+					title: "出发日期",
+					dataIndex: "COLI_OrderStartDate",
+					key: "COLI_OrderStartDate",
+				},
+				{
+					title: "客人需求",
+					dataIndex: "COLI_CustomerRequest",
+					key: "COLI_CustomerRequest",
+					ellipsis: true,
+				},
+				{
+					title: "订单内容",
+					dataIndex: "COLI_OrderDetailText",
+					key: "COLI_OrderDetailText",
+					ellipsis: true,
+				},
+				Table.EXPAND_COLUMN,
+			];
+			result.dataSource = data;
+		}
+		return result;
+	};
 
-    const format_data = ((data) => {
-        let result = {dataSource: [], columns: []}
-        if (!comm.empty(data)) {
-            result.columns = [
-                {
-                    title: '页面',
-                    children: [{
-                        title: '',
-                        dataIndex: 'request_uri'
-                    }],
-                },
-                {
-                    title: '访问量',
-                    children: [{
-                        title: data.reduce((a, b) => a + b.viewCount, 0),
-                        dataIndex: 'viewCount'
-                    }],
-                }
-            ];
-            result.dataSource = data;
-        }
-        return result;
-    })
+	const table_data = format_data_detail(orders_store.orderCountData_Form_sub.ordercount1);
+	const table_data2 = format_data_detail(orders_store.orderCountData_Form_sub.ordercount2);
+	const table_data_p = format_data(orders_store.orderCountData_Form_sub.ordercount1);
+	const table_data2_p = format_data(orders_store.orderCountData_Form_sub.ordercount2);
 
-    const format_data_detail = ((data) => {
-        let result = {dataSource: [], columns: []}
-        if (!comm.empty(data)) {
-            result.columns = [
-                {
-                    title: '订单号',
-                    dataIndex: 'COLI_ID',
-                    key: 'COLI_ID',
-                },
-                {
-                    title: '网站',
-                    dataIndex: 'COLI_WebCode',
-                    key: 'COLI_WebCode',
-                },
-                {
-                    title: '成行',
-                    dataIndex: 'COLI_Success',
-                    key: 'COLI_Success',
-                    render: (text, record) => <span>{text == 1 ? '是' : '否'}</span>,
-                    sorter: (a, b) => b.COLI_Success - a.COLI_Success,
-                },
-                {
-                    title: '预定时间',
-                    dataIndex: 'COLI_ApplyDate',
-                    key: 'COLI_ApplyDate',
-                },
-                {
-                    title: 'IP',
-                    dataIndex: 'COLI_SenderIP',
-                    key: 'COLI_SenderIP',
-                },
-                {
-                    title: '订单内容',
-                    dataIndex: 'COLI_OrderDetailText',
-                    key: 'COLI_OrderDetailText',
-                    ellipsis: true,
-                },
-                Table.EXPAND_COLUMN,
-            ];
-            result.dataSource = data;
-        }
-        return result;
-    })
+	return (
+		<div>
+			<Row>
+				<Col span={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>
+			</Row>
+			<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
+				<Col className="gutter-row" span={24}>
+					<Line {...line} />
+				</Col>
 
+				<Col className="gutter-row" span={24}>
+					<Tabs activeKey={orders_store.active_tab_key_sub} onChange={active_key => orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key)}>
+						<Tabs.TabPane
+							tab={
+								<span>
+									<ContainerOutlined />
+									订单内容
+								</span>
+							}
+							key="detail">
+							<Row>
+								<Col span={24}>
+									{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
+									<Table
+										dataSource={table_data.dataSource}
+										columns={table_data.columns}
+										size="small"
+										rowKey={record => record.key}
+										expandable={{
+											expandedRowRender: record => (
+												<pre>
+													<Divider orientation="left" plain>
+														客户需求
+													</Divider>
+													{record.COLI_CustomerRequest}
+													<Divider orientation="left" plain>
+														订单内容
+													</Divider>
+													{record.COLI_OrderDetailText}
+												</pre>
+											),
+										}}
+									/>
+								</Col>
 
-    let table_data, table_data2 = format_data(false);
-    switch (orders_store.active_tab_key_sub) {
-        case "detail":
-            table_data = format_data_detail(orders_store.orderCountData_Form_sub.ordercount1);
-            table_data2 = format_data_detail(orders_store.orderCountData_Form_sub.ordercount2);
-            break;
-        case "page":
-            table_data = format_data(orders_store.orderCountData_Form_sub.ordercount1);
-            table_data2 = format_data(orders_store.orderCountData_Form_sub.ordercount2);
-            break;
-    }
+								<Col span={24}>
+									{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
+									<Table
+										dataSource={table_data2.dataSource}
+										columns={table_data2.columns}
+										size="small"
+										rowKey={record => record.key}
+										expandable={{
+											expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
+										}}
+									/>
+								</Col>
+							</Row>
+						</Tabs.TabPane>
+						<Tabs.TabPane
+							tab={
+								<span>
+									<ContainerOutlined />
+									访问路径
+								</span>
+							}
+							key="page">
+							<Row>
+								<Col span={24}>
+									{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
+									<Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" />
+								</Col>
 
-    return (
-        <div>
-            <Row>
-                <Col span={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>
-            </Row>
-            <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
-
-                <Col className="gutter-row" span={24}>
-                    <Line {...line} />
-                </Col>
-
-                <Col className="gutter-row" span={24}>
-                    <Tabs activeKey={orders_store.active_tab_key_sub}
-                          onChange={(active_key) => orders_store.onChange_Tabs_sub(ordertype, ordertype_sub, active_key)}>
-                        <Tabs.TabPane tab={<span><ContainerOutlined/>订单内容</span>} key="detail">
-                            <Row>
-                                <Col span={24}>
-                                    {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
-                                    <Table dataSource={table_data.dataSource}
-                                           columns={table_data.columns} size="small" rowKey={record => record.key}
-                                           expandable={{
-                                               expandedRowRender: (record) => (
-                                                   <pre>{record.COLI_OrderDetailText}</pre>
-                                               ),
-                                           }}
-                                    />
-                                </Col>
-
-                                <Col span={24}>
-                                    {date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '~' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ''}
-                                    <Table dataSource={table_data2.dataSource}
-                                           columns={table_data2.columns} size="small" rowKey={record => record.key}
-                                           expandable={{
-                                               expandedRowRender: (record) => (
-                                                   <pre>{record.COLI_OrderDetailText}</pre>
-                                               ),
-                                           }}
-                                    />
-                                </Col>
-                            </Row>
-
-                        </Tabs.TabPane>
-                        <Tabs.TabPane tab={<span><ContainerOutlined/>访问路径</span>} key="page">
-                            <Row>
-                                <Col span={24}>
-                                    {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
-                                    <Table dataSource={table_data.dataSource} rowKey={record => record.key}
-                                           columns={table_data.columns} size="small"/>
-                                </Col>
-
-                                <Col span={24}>
-                                    {date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '~' + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ''}
-                                    <Table dataSource={table_data2.dataSource} rowKey={record => record.key}
-                                           columns={table_data2.columns} size="small"/>
-                                </Col>
-
-
-                            </Row>
-                        </Tabs.TabPane>
-
-                    </Tabs>
-                </Col>
-
-            </Row>
-        </div>
-    );
-
-}
+								<Col span={24}>
+									{date_picker_store.start_date_cp ? date_picker_store.start_date_cp.format(config.DATE_FORMAT) + "~" + date_picker_store.end_date_cp.format(config.DATE_FORMAT) : ""}
+									<Table dataSource={table_data2_p.dataSource} rowKey={record => record.key} columns={table_data2_p.columns} size="small" />
+								</Col>
+							</Row>
+						</Tabs.TabPane>
+					</Tabs>
+				</Col>
+			</Row>
+		</div>
+	);
+};
 export default observer(Orders_sub);
-
diff --git a/src/views/Sale.js b/src/views/Sale.js
new file mode 100644
index 0000000..aeb5947
--- /dev/null
+++ b/src/views/Sale.js
@@ -0,0 +1,92 @@
+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 { observer } from "mobx-react";
+import DatePickerCharts from "../charts/DatePickerCharts";
+import { NavLink, useParams } from "react-router-dom";
+import * as comm from "../utils/commons";
+import * as config from "../config";
+import GroupSelect from "../charts/GroupSelect";
+
+const Sale = () => {
+	const { sale_store, date_picker_store } = useContext(stores_Context);
+
+	return (
+		<div>
+			<Row>
+				<Col span={13}></Col>
+				<Col span={8}>
+					<Row>
+						<Col span={12}>
+							<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}>
+							<DatePickerCharts />
+						</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>
+
+				<Col className="gutter-row" span={24}>
+					<Tabs activeKey={sale_store.active_tab_key} onChange={active_key => sale_store.onChange_Tabs(active_key)}>
+						<Tabs.TabPane
+							tab={
+								<span>
+									<ContainerOutlined />
+									概览
+								</span>
+							}
+							key="overview">
+							<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>,
+										}}
+									/> */}
+								</Col>
+							</Row>
+						</Tabs.TabPane>
+						<Tabs.TabPane
+							tab={
+								<span>
+									<ContainerOutlined />
+									国籍
+								</span>
+							}
+							key="page">
+							<Row>
+								<Col span={24}>
+									{sale_store.date_title}
+									{/* <Table dataSource={table_data_p.dataSource} rowKey={record => record.key} columns={table_data_p.columns} size="small" /> */}
+								</Col>
+							</Row>
+						</Tabs.TabPane>
+					</Tabs>
+				</Col>
+			</Row>
+		</div>
+	);
+};
+export default observer(Sale);