From 12b8f250c082356e776238747ba11623ed12e738 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= <ycc@hainatravel.com>
Date: Tue, 6 Sep 2022 17:11:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=AF=B9=E6=AF=94=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                    |  38 ------
 src/App.js                     |   7 +-
 src/charts/DatePickerCharts.js |  21 ++--
 src/charts/GroupSelect.js      |  19 +--
 src/charts/MobileDeal.js       | 108 +++-------------
 src/charts/OrdersTempTable.js  | 142 ++++-----------------
 src/charts/SiteSelect.js       |  16 +--
 src/config.js                  |   2 +-
 src/logo.svg                   |   1 -
 src/stores/DashboardStore.js   | 205 +++++++++++++++++++++++++++++-
 src/stores/DatePickerStore.js  |   1 -
 src/stores/OrdersStore.js      | 220 ++++++++++++++++++++++-----------
 src/views/Orders.js            |  33 +++--
 13 files changed, 437 insertions(+), 376 deletions(-)
 delete mode 100644 src/logo.svg

diff --git a/src/App.css b/src/App.css
index e1e90d6..b562508 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,39 +1 @@
 @import '~antd/dist/antd.css';
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 83bae51..d87dcd7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,8 +12,7 @@ import Home from "./views/Home"
 import Dashboard from "./views/Dashboard"
 import Orders from "./views/Orders"
 import Logo from './logo.png'
-import SiteSelect from './charts/SiteSelect';
-import moment from "moment";
+
 
 
 class App extends Component {
@@ -61,9 +60,9 @@ class App extends Component {
                             minHeight: 480,
                         }}>
                             <Routes>
-                                <Route path="/" element={<Home/>}/>
+                                <Route path="/" element={<Dashboard/>}/>
                                 <Route path="/orders" element={<Orders/>}/>
-                                <Route path="/dashboard" element={<Dashboard/>}/>
+                                <Route path="/dashboard" element={<Home/>}/>
                             </Routes>
                         </Content>
                         <Footer
diff --git a/src/charts/DatePickerCharts.js b/src/charts/DatePickerCharts.js
index 501c5a9..03a2a4d 100644
--- a/src/charts/DatePickerCharts.js
+++ b/src/charts/DatePickerCharts.js
@@ -22,35 +22,36 @@ class DatePickerCharts extends Component {
                     <Col span={24}>
                         <DatePicker.RangePicker format={config.DATE_FORMAT}
                                                 allowClear={false}
-                                                defaultValue={[date_picker_store.start_date, date_picker_store.end_date]}
+                                                value={[date_picker_store.start_date, date_picker_store.end_date]}
                                                 onChange={date_picker_store.onChange_dataPicker}
                                                 ranges={{
                                                     '本周': [moment().startOf('week'), moment().endOf('week')],
                                                     '上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
                                                     '本月': [moment().startOf('month'), moment().endOf('month')],
                                                     '近30天': [moment().subtract(30, 'days'), moment()],
-                                                    '上个月': [moment().startOf('month').subtract(1, 'month'), moment().endOf('month').subtract(1, 'month')],
-                                                    '近三个月': [moment().startOf('month').subtract(2, 'month'), moment().endOf('month')],
+                                                    '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
+                                                    '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
                                                     '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
-                                                    '去年': [moment().startOf('year').subtract(1, 'year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'year').subtract(1, 'month')],
+                                                    '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
                                                 }}
                         />
                     </Col>
-                    <Col span={24}>
+                    {this.props.hide_vs ? '' : <Col span={24}>
                         <DatePicker.RangePicker bordered={false} format={config.DATE_FORMAT}
-                                                defaultValue={[date_picker_store.start_date_cp, date_picker_store.end_date_cp]}
+                                                value={[date_picker_store.start_date_cp, date_picker_store.end_date_cp]}
                                                 placeholder={['对比 Start date', 'End date']}
                                                 onChange={date_picker_store.onChange_dataPicker_cp}
                                                 ranges={{
                                                     '上一时间段': date_picker_store.previous_date(),
                                                     '去年同期': date_picker_store.previous_year(),
                                                     '上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
-                                                    '上个月': [moment().startOf('month').subtract(1, 'month'), moment().endOf('month').subtract(1, 'month')],
-                                                    '前三个月': [moment().startOf('month').subtract(5, 'month'), moment().endOf('month').subtract(3, 'month')],
-                                                    '去年': [moment().startOf('year').subtract(1, 'year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'year').subtract(1, 'month')]
+                                                    '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
+                                                    '前个月': [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')],
+                                                    '前三个月': [moment().subtract(5, 'month').startOf('month'), moment().subtract(3, 'month').endOf('month')],
+                                                    '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
                                                 }}
                         />
-                    </Col>
+                    </Col>}
                 </Row>
 
             </div>
diff --git a/src/charts/GroupSelect.js b/src/charts/GroupSelect.js
index cca7b80..912aed8 100644
--- a/src/charts/GroupSelect.js
+++ b/src/charts/GroupSelect.js
@@ -1,31 +1,24 @@
 import React, {Component} from 'react';
 import {Select} from 'antd';
-
+import {observer} from "mobx-react";
 
 class GroupSelect extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            data: this.props.defaultValue,
-        };
     }
 
-    handleChange = (value) => {
-        this.setState({data: value})
-    };
-
-
     render() {
+        const store=this.props.store;
         return (
             <div>
                 <Select
-                    mode="multiple"
+                    mode={store.group_select_mode}
                     allowClear
                     style={{width: '100%',}}
                     placeholder="选择小组"
-                    defaultValue={this.state.data}
-                    onChange={this.handleChange}
+                    value={store.groups}
+                    onChange={(value)=>store.handleChange(value)}
                 >
                     <Select.Option key="1" value="1">CH直销</Select.Option>
                     <Select.Option key="2" value="2">CH大客户</Select.Option>
@@ -47,4 +40,4 @@ class GroupSelect extends Component {
     }
 }
 
-export default GroupSelect;
+export default observer(GroupSelect);
diff --git a/src/charts/MobileDeal.js b/src/charts/MobileDeal.js
index 22aca9f..edfcf60 100644
--- a/src/charts/MobileDeal.js
+++ b/src/charts/MobileDeal.js
@@ -1,117 +1,41 @@
 import React, {Component} from 'react';
-import {Table, Button, DatePicker, Space, Radio} from 'antd';
+import {Table, Button, Space, Radio} from 'antd';
 import {SearchOutlined} from '@ant-design/icons';
-import moment from 'moment';
 import GroupSelect from './GroupSelect';
-import * as config from '../config' ;
-
+import DatePickerCharts from "./DatePickerCharts";
+import {stores_Context} from "../config";
+import {observer} from "mobx-react";
 
 class MobileDeal extends Component {
+    static contextType = stores_Context;
 
     constructor(props) {
         super(props);
-        this.state = {
-            loading: false,
-            mobile_deal_data: []
-        };
-        this.group_ids = React.createRef();
-        this.data = {
-            date_type: 'applyDate',
-            applydate_check: 1,
-            startdate_check: 0,
-            startdate: moment().subtract(8, 'days'),//上周一
-            enddate: moment().subtract(2, 'days'),//上周日
-        }
-    }
-
-    componentDidMount() {
-        //this.asyncFetch();
-    }
-
-    asyncFetch = () => {
-        this.setState({loading: true});
-        let url = '/service-tourdesign/CountYDOrder?DEI_SNList=' + this.group_ids.current.state.data.toString();
-        if (this.data.date_type == 'applyDate') {
-            url += '&ApplydateCheck=1&OrderStartdateCheck=0';
-        } else {
-            url += '&ApplydateCheck=0&OrderStartdateCheck=1';
-        }
-        url += '&ApplydateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&ApplydateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
-        url += '&OrderStartdateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&OrderStartdateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
-        fetch(config.HT_HOST + url)
-            .then((response) => response.json())
-            .then((json) => {
-                let table_data = []
-                json && json.map((item, index) => {
-                    table_data.push({
-                        key: index,
-                        department_name: item.DEI_DepartmentName,
-                        mobile_order: item.YDOrderNum + '/' + item.OrderNum + ' (' + (item.OrderNumRate * 100).toFixed(1) + '%)',
-                        mobile_deal: item.YDOrderNumSUC + ' / ' + item.OrderNumSUC + ' (' + (item.OrderNumSUCRate * 100).toFixed(1) + '%)',
-                        mobile_gross: item.YDML + ' / ' + item.ML + ' (' + (item.MLRate * 100).toFixed(1) + '%)',
-                    })
-                })
-                this.setState({mobile_deal_data: table_data});
-                this.setState({loading: false});
-            })
-            .catch((error) => {
-                this.setState({loading: false});
-                console.log('fetch data failed', error);
-            });
-    };
-    onChange_datetype = (e) => {
-        this.data.date_type = e.target.value;
-    };
-    onChange_dataPicker = (dates) => {
-        this.data.startdate = dates[0];
-        this.data.enddate = dates[1];
     }
 
     render() {
-
-        const columns = [
-            {
-                title: '市场',
-                dataIndex: 'department_name',
-                key: 'department_name',
-            },
-            {
-                title: '移动订单/总订单',
-                dataIndex: 'mobile_order',
-                key: 'mobile_order',
-            },
-            {
-                title: '移动成交/总成交',
-                dataIndex: 'mobile_deal',
-                key: 'mobile_deal',
-            },
-            {
-                title: '移动毛利/总毛利',
-                dataIndex: 'mobile_gross',
-                key: 'mobile_gross',
-            },
-        ];
-
+        const {dashboard_store} = this.context;
+        const mobile_data=dashboard_store.mobile_data;
         return (
             <div>
                 <h2>移动成交</h2>
-                <GroupSelect ref={this.group_ids} defaultValue={['1', '2', '28', '7', '8', '9', '11', '12', '20', '21']} />
+                <GroupSelect store={mobile_data} />
                 <Space size="large">
-                    <DatePicker.RangePicker format={config.DATE_FORMAT}
-                                            defaultValue={[this.data.startdate, this.data.enddate]}
-                                            onChange={this.onChange_dataPicker}/>
-                    <Radio.Group defaultValue={this.data.date_type} onChange={this.onChange_datetype}>
+                    <DatePickerCharts hide_vs={true}/>
+
+                    <Radio.Group value={mobile_data.date_type} onChange={mobile_data.onChange_datetype}>
                         <Radio value="applyDate">预定日期</Radio>
                         <Radio value="startDate">出发日期</Radio>
                     </Radio.Group>
-                    <Button type="primary" icon={<SearchOutlined/>} loading={this.state.loading} onClick={() => {
-                        this.asyncFetch();
+
+                    <Button type="primary" icon={<SearchOutlined/>} loading={mobile_data.loading} onClick={() => {
+                        mobile_data.asyncFetch();
                     }}>统计</Button>
                 </Space>
-                <Table dataSource={this.state.mobile_deal_data} columns={columns} pagination={false} size="small"/>
+                <Table dataSource={mobile_data.data} columns={mobile_data.columns} pagination={false} size="small"/>
             </div>
         );
     }
 }
 
-export default MobileDeal;
+export default observer(MobileDeal);
diff --git a/src/charts/OrdersTempTable.js b/src/charts/OrdersTempTable.js
index 635d2e4..c23dbc9 100644
--- a/src/charts/OrdersTempTable.js
+++ b/src/charts/OrdersTempTable.js
@@ -1,153 +1,53 @@
 import React, {Component} from 'react';
-import {Table, Button, DatePicker, Space, Tooltip} from 'antd';
+import {Table, Button, Space} from 'antd';
 import {Line} from '@ant-design/charts';
-import GroupSelect from './GroupSelect';
 import SiteSelect from './SiteSelect';
 import {SearchOutlined} from '@ant-design/icons';
 import * as config from '../config' ;
-import moment from "moment";
+import {stores_Context} from "../config";
+import DatePickerCharts from "./DatePickerCharts";
+import {observer} from "mobx-react";
 
 
 class OrdersTempTable extends Component {
 
+    static contextType = stores_Context;
+
     constructor(props) {
         super(props);
-        this.state = {
-            data: [],
-            table: [],
-            show_table: false,
-            loading: false,
-            loading_detail: false
-        };
-        this.website_codes = React.createRef();
-        this.data = {
-            startdate: moment().subtract(7, 'days'),//上周一
-            enddate: moment().subtract(0, 'days'),//上周日
-        }
-    }
 
-    componentDidMount() {
     }
 
-    asyncFetch = () => {
-        this.setState({loading: true});
-        this.setState({show_table: false});
-        let url = '/service-baseinfo/QueryWebData?type=orders_temp&db=1';
-        const website_code = "'" + this.website_codes.current.state.data.join("','") + "'";
-        url += '&WebSite=' + website_code + '&ApplyDateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
-        fetch(config.HT_HOST + url)
-            .then((response) => response.json())
-            .then((json) => {
-                this.setState({data: json.data})
-                this.setState({loading: false});
-            })
-            .catch((error) => {
-                this.setState({loading: false});
-                console.log('fetch data failed', error);
-            });
-    };
+    // componentDidMount() {
+    // }
 
-    asyncFetch_detail = () => {
-        this.setState({loading_detail: true});
-        this.setState({show_table: true});
-        let url = '/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1';
-        const website_code = "'" + this.website_codes.current.state.data.join("','") + "'";
-        url += '&WebSite=' + website_code + '&ApplyDateStart=' + this.data.startdate.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + this.data.enddate.format(config.DATE_FORMAT) + '%2023:59';
-        fetch(config.HT_HOST + url)
-            .then((response) => response.json())
-            .then((json) => {
-                this.setState({table: json.data})
-                this.setState({loading_detail: false});
-            })
-            .catch((error) => {
-                this.setState({loading_detail: false});
-                console.log('fetch data failed', error);
-            });
-    };
-
-
-    onChange_dataPicker = (dates) => {
-        this.data.startdate = dates[0];
-        this.data.enddate = dates[1];
-    }
 
 
     render() {
-        const config = {
-            data: this.state.data,
-            padding: 'auto',
-            xField: 'order_date',
-            yField: 'order_count',
-            seriesField: 'order_sitecode',
-            xAxis: {
-                type: 'timeCat',
-            },
-            smooth: true,
-        };
-
-        const columns = [
-            {
-                title: '订单号',
-                dataIndex: 'COLI_ID',
-                key: 'COLI_ID',
-            },
-            {
-                title: '设备',
-                dataIndex: 'COLI_OrderSource',
-                key: 'COLI_OrderSource',
-            },
-            {
-                title: '类型',
-                dataIndex: 'COLI_SourceType',
-                key: 'COLI_SourceType',
-            },
-            {
-                title: '网站',
-                dataIndex: 'COLI_WebCode',
-                key: 'COLI_WebCode',
-            },
-            {
-                title: 'IP',
-                dataIndex: 'COLI_SenderIP',
-                key: 'COLI_SenderIP',
-            },
-            {
-                title: '预定时间',
-                dataIndex: 'COLI_ApplyDate',
-                key: 'COLI_ApplyDate',
-            },
-            {
-                title: '订单内容',
-                dataIndex: 'COLI_OrderDetailText',
-                key: 'COLI_OrderDetailText',
-                ellipsis: true,
-            },
-        ];
+        const {dashboard_store} = this.context;
+        const ordersTemp_data=dashboard_store.ordersTemp_data;
 
         return (
+
             <div>
                 <h2>临时订单数量</h2>
-                <SiteSelect ref={this.website_codes} multiple={"multiple"}
-                            defaultValue={['CHT', 'AH']}/>
-                <Space>
-                    <DatePicker.RangePicker format={config.DATE_FORMAT}
-                                            defaultValue={[this.data.startdate, this.data.enddate]}
-                                            onChange={this.onChange_dataPicker}/>
-                    <Button type="primary" icon={<SearchOutlined/>} loading={this.state.loading} onClick={() => {
-                        this.asyncFetch();
+                <SiteSelect store={ordersTemp_data} />
+                <Space><DatePickerCharts hide_vs={true}/>
+                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading} onClick={() => {
+                        ordersTemp_data.asyncFetch();
                     }}>统计</Button>
-                    <Button type="primary" icon={<SearchOutlined/>} loading={this.state.loading_detail} onClick={() => {
-                        this.asyncFetch_detail();
+                    <Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading_detail} onClick={() => {
+                        ordersTemp_data.asyncFetch_detail();
                     }}>查看详情</Button>
                 </Space>
-                {this.state.show_table ? (
-                    <Table dataSource={this.state.table} columns={columns} size="small"/>
+                {ordersTemp_data.show_table ? (
+                    <Table dataSource={ordersTemp_data.data_detail} columns={ordersTemp_data.columns} size="small"/>
                 ) : (
-                    <Line {...config} />
+                    <Line {...ordersTemp_data.line} data={ordersTemp_data.data} />
                 )}
             </div>
         );
     }
 }
 
-export default OrdersTempTable;
+export default observer(OrdersTempTable);
diff --git a/src/charts/SiteSelect.js b/src/charts/SiteSelect.js
index 7dbeb44..dd82578 100644
--- a/src/charts/SiteSelect.js
+++ b/src/charts/SiteSelect.js
@@ -1,32 +1,24 @@
 import React, {Component} from 'react';
 import {Select} from 'antd';
 import { observer } from 'mobx-react';
-import {stores_Context} from "../config";
 
 
 class SiteSelect extends Component {
-    static contextType = stores_Context;
-
     constructor(props) {
         super(props);
-        this.state = {
-            data: this.props.defaultValue,
-        };
     }
 
 
-
     render() {
-        const {orders_store} = this.context;
-
+        const store=this.props.store;
         return (
             <div>
                 <Select
-                    mode={this.props.multiple}
+                    mode={store.site_select_mode}
                     style={{width: '100%',}}
                     placeholder="选择网站"
-                    defaultValue={orders_store.webcode}
-                    onChange={orders_store.handleChange_webcode}
+                    defaultValue={store.webcode}
+                    onChange={store.handleChange_webcode}
                 >
                     {/*<Select.Option key="1" value="ALL">ALL</Select.Option>*/}
                     <Select.Option key="2" value="CHT">CHT</Select.Option>
diff --git a/src/config.js b/src/config.js
index e40bc14..5d3c28c 100644
--- a/src/config.js
+++ b/src/config.js
@@ -3,4 +3,4 @@ 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';
\ No newline at end of file
+export const HT_HOST = 'http://202.103.68.100:890';//889正式库
\ No newline at end of file
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/stores/DashboardStore.js b/src/stores/DashboardStore.js
index 0e115a9..ba0b850 100644
--- a/src/stores/DashboardStore.js
+++ b/src/stores/DashboardStore.js
@@ -1,12 +1,213 @@
-import {makeAutoObservable} from "mobx";
+import {makeAutoObservable, runInAction} from "mobx";
+import * as config from "../config";
 
 
 class DashboardStore {
 
-    constructor() {
+    constructor(rootStore) {
+        this.rootStore = rootStore;
         makeAutoObservable(this);
     }
 
+    loading = false;
+    site_select_mode = 'multiple';//是否多选站点
+    webcode = ['CHT', 'AH', 'GH'];
+
+
+    // 临时订单 begin
+
+    ordersTemp_data = {
+        data:[],
+        data_detail:[],
+        loading: false,
+        loading_detail: false,
+        show_table: false,
+        columns:[
+            {
+                title: '订单号',
+                dataIndex: 'COLI_ID',
+                key: 'COLI_ID',
+            },
+            {
+                title: '设备',
+                dataIndex: 'COLI_OrderSource',
+                key: 'COLI_OrderSource',
+            },
+            {
+                title: '类型',
+                dataIndex: 'COLI_SourceType',
+                key: 'COLI_SourceType',
+            },
+            {
+                title: '网站',
+                dataIndex: 'COLI_WebCode',
+                key: 'COLI_WebCode',
+            },
+            {
+                title: 'IP',
+                dataIndex: 'COLI_SenderIP',
+                key: 'COLI_SenderIP',
+            },
+            {
+                title: '预定时间',
+                dataIndex: 'COLI_ApplyDate',
+                key: 'COLI_ApplyDate',
+            },
+            {
+                title: '订单内容',
+                dataIndex: 'COLI_OrderDetailText',
+                key: 'COLI_OrderDetailText',
+                ellipsis: true,
+            },
+        ],
+        line : {
+            data:[],
+            padding: 'auto',
+            xField: 'order_date',
+            yField: 'order_count',
+            seriesField: 'order_sitecode',
+            xAxis: {
+                type: 'timeCat',
+            },
+        },
+        site_select_mode: 'multiple',
+        webcode: ['CHT', 'AH', 'GH'],
+        handleChange_webcode: this.handleChange_site_select.bind(this),
+        asyncFetch: this.get_CountOrdersData.bind(this),
+        asyncFetch_detail: this.get_CountOrdersData_detail.bind(this),
+    }
+
+    handleChange_site_select(value){
+        this.ordersTemp_data.webcode = value;
+    }
+
+    get_CountOrdersData(){
+        this.ordersTemp_data.loading=true;
+        this.ordersTemp_data.show_table=false;
+        const date_picker_store = this.rootStore.date_picker_store;
+        let url = '/service-baseinfo/QueryWebData?type=orders_temp&db=1';
+        const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'";
+        url += '&WebSite=' + website_code + '&ApplyDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
+        fetch(config.HT_HOST + url)
+            .then((response) => response.json())
+            .then((json) => {
+                runInAction(() => {
+                    this.ordersTemp_data.data = json.data;
+                    this.ordersTemp_data.loading = false;
+                })
+            })
+            .catch((error) => {
+                this.ordersTemp_data.loading = false;
+                console.log('fetch data failed', error);
+            });
+    }
+
+    get_CountOrdersData_detail(){
+        this.ordersTemp_data.loading_detail=true;
+        this.ordersTemp_data.show_table=true;
+        const date_picker_store = this.rootStore.date_picker_store;
+        let url = '/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1';
+        const website_code = "'" +  this.ordersTemp_data.webcode.join("','") + "'";
+        url += '&WebSite=' + website_code + '&ApplyDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
+        fetch(config.HT_HOST + url)
+            .then((response) => response.json())
+            .then((json) => {
+                runInAction(() => {
+                    this.ordersTemp_data.data_detail = json.data;
+                    this.ordersTemp_data.loading_detail = false;
+                })
+            })
+            .catch((error) => {
+                this.ordersTemp_data.loading_detail=false;
+                console.log('fetch data failed', error);
+            });
+    }
+
+    // 临时订单 end
+
+
+    //  移动成交 beign
+    handleChange_webcode = (value) => {
+        this.webcode = value;
+    };
+
+    handleChange_group_select(value) {
+        this.mobile_data.groups = value;
+    };
+
+    onChange_datetype(e) {
+        this.mobile_data.date_type = e.target.value;
+    };
+
+    get_CountYDOrder() {
+        const date_picker_store = this.rootStore.date_picker_store;
+        this.mobile_data.loading = true;
+        let url = '/service-tourdesign/CountYDOrder?DEI_SNList=' + this.mobile_data.groups.toString();
+        if (this.mobile_data.date_type == 'applyDate') {
+            url += '&ApplydateCheck=1&OrderStartdateCheck=0';
+        } else {
+            url += '&ApplydateCheck=0&OrderStartdateCheck=1';
+        }
+        url += '&ApplydateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplydateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
+        url += '&OrderStartdateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&OrderStartdateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
+        fetch(config.HT_HOST + url)
+            .then((response) => response.json())
+            .then((json) => {
+                let table_data = []
+                json && json.map((item, index) => {
+                    table_data.push({
+                        key: index,
+                        department_name: item.DEI_DepartmentName,
+                        mobile_order: item.YDOrderNum + '/' + item.OrderNum + ' (' + (item.OrderNumRate * 100).toFixed(1) + '%)',
+                        mobile_deal: item.YDOrderNumSUC + ' / ' + item.OrderNumSUC + ' (' + (item.OrderNumSUCRate * 100).toFixed(1) + '%)',
+                        mobile_gross: item.YDML + ' / ' + item.ML + ' (' + (item.MLRate * 100).toFixed(1) + '%)',
+                    })
+                })
+                runInAction(() => {
+                    this.mobile_data.data = table_data;
+                    this.mobile_data.loading = false;
+                })
+            })
+            .catch((error) => {
+                this.mobile_data.loading = false;
+                console.log('fetch data failed', error);
+            });
+    };
+
+    mobile_data = {
+        loading: false,
+        data: [],
+        group_select_mode: 'multiple',//是否多选分组
+        groups: ['1', '2', '28', '7', '8', '9', '11', '12', '20', '21'],
+        columns: [
+            {
+                title: '市场',
+                dataIndex: 'department_name',
+                key: 'department_name',
+            },
+            {
+                title: '移动订单/总订单',
+                dataIndex: 'mobile_order',
+                key: 'mobile_order',
+            },
+            {
+                title: '移动成交/总成交',
+                dataIndex: 'mobile_deal',
+                key: 'mobile_deal',
+            },
+            {
+                title: '移动毛利/总毛利',
+                dataIndex: 'mobile_gross',
+                key: 'mobile_gross',
+            },
+        ],
+        date_type: 'applyDate',
+        handleChange: this.handleChange_group_select.bind(this),
+        onChange_datetype: this.onChange_datetype.bind(this),
+        asyncFetch: this.get_CountYDOrder.bind(this),
+    }
+//  移动成交 end
+
 }
 
 
diff --git a/src/stores/DatePickerStore.js b/src/stores/DatePickerStore.js
index 6884622..93e3f39 100644
--- a/src/stores/DatePickerStore.js
+++ b/src/stores/DatePickerStore.js
@@ -16,7 +16,6 @@ class DatePickerStore {
     onChange_dataPicker = (dates) => {
         this.start_date = dates[0];
         this.end_date = dates[1];
-
     }
 
     onChange_dataPicker_cp = (dates) => {
diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js
index 6d5a923..562cd31 100644
--- a/src/stores/OrdersStore.js
+++ b/src/stores/OrdersStore.js
@@ -1,4 +1,9 @@
-import {makeAutoObservable} from "mobx"
+import {makeAutoObservable, runInAction} from "mobx"
+import {
+    CaretUpOutlined,
+    CaretDownOutlined
+} from '@ant-design/icons';
+import {Tag} from 'antd';
 import * as config from "../config";
 import moment from "moment";
 
@@ -11,13 +16,11 @@ class OrdersStore {
     }
 
     loading = false;
+    site_select_mode=false;//是否多选站点
     webcode = 'CHT';
     active_tab_key = 'Form';//当前切换的标签页
     orderCountData = [];//订单统计数据源
     orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
-    orderCountData_Product = [];//表单类型统计数据源
-    orderCountData_Country = [];//表单类型统计数据源
-    orderCountData_line = [];//表单类型统计数据源
 
 
     handleChange_webcode = (value) => {
@@ -30,7 +33,6 @@ class OrdersStore {
     //相差的天数用a.diff(b, 'days')计算
     format_data_source(data_source, start_date, end_date) {
         let result = [];
-        let diff_days = start_date.diff(end_date, 'days');
         for (let item of data_source.ordercount1) {
             result.push({
                 'xField': item.ApplyDate,
@@ -38,12 +40,15 @@ class OrdersStore {
                 'seriesField': item.groups
             })
         }
-        for (let item of data_source.ordercount2) {
-            result.push({
-                'xField': moment(item.ApplyDate).add(diff_days, 'days').format(config.DATE_FORMAT),
-                'yField': item.orderCount,
-                'seriesField': item.groups
-            })
+        if (data_source.ordercount2 && end_date) {
+            let diff_days = start_date.diff(end_date, 'days');
+            for (let item of data_source.ordercount2) {
+                result.push({
+                    'xField': moment(item.ApplyDate).add(diff_days, 'days').format(config.DATE_FORMAT),
+                    'yField': item.orderCount,
+                    'seriesField': item.groups
+                })
+            }
         }
         return result;
 
@@ -51,9 +56,8 @@ class OrdersStore {
 
     //网站订单数量
     getOrderCount() {
-        this.loading = true;
+        //this.loading = true;
         const date_picker_store = this.rootStore.date_picker_store;
-
         let url = '/service-web/QueryData/GetOrderCount'//?WebCode=cht&COLI_ApplyDate1=2022-08-01&COLI_ApplyDate2=2022-08-31&COLI_ApplyDateold1=2021-08-01&COLI_ApplyDateold2=2021-08-31';
         url += '?WebCode=' + this.webcode + '&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) {
@@ -62,8 +66,10 @@ class OrdersStore {
         fetch(config.HT_HOST + url)
             .then((response) => response.json())
             .then((json) => {
-                this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
-                this.loading = false;
+                runInAction(() => {
+                    this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
+                    this.loading = false;
+                })
             })
             .catch((error) => {
                 this.loading = false;
@@ -71,14 +77,26 @@ class OrdersStore {
             });
     }
 
+    show_vs_tag(vs, data1, data2) {
+        let tag = '-';
+        if (parseInt(vs) < 0) {
+            tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs}</Tag>
+        } else if (parseInt(vs) > 0) {
+            tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs}</Tag>
+        }
+        return <span><div>{data1} vs {data2}</div>
+            {tag}</span>
+    }
+
     //网站订单类型
     getOrderCountByType(order_type) {
         const date_picker_store = this.rootStore.date_picker_store;
-
+        let isVS = false;//是否是比较数据，有比较的表格是不一样的
         let url = '/service-web/QueryData/GetOrderCountByType'
         url += '?WebCode=' + this.webcode + '&OrderType=' + order_type;
         url += '&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
         if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
+            isVS = true;
             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)
@@ -86,60 +104,124 @@ class OrdersStore {
             .then((json) => {
                 let ordercountTotal1 = json.ordercountTotal1;
                 let ordercountTotal2 = json.ordercountTotal2;
-                if (ordercountTotal2) {
-                    console.log('ok');
-                }
-                switch (order_type) {
-                    case 'Form':
-                        let data = [];
-
-                        let columns =
-                            [
-                                {
-                                    title: '来源类型',
-                                    children: [{title: '', dataIndex: 'OrderType'}]
-                                },
-                                {
-                                    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) => b.YJLY - a.YJLY,
-                                },
-
-                                {
-                                    title: '单个订单价值',
-                                    children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}],
-                                    sorter: (a, b) => b.Ordervalue - a.Ordervalue,
-                                },
-                            ];
-
-                        data.push(...json.ordercount1, ...json.ordercount2);
-
-                        this.orderCountData_Form.dataSource = data;
-                        this.orderCountData_Form.columns = columns;
-                        // this.orderCountData_Form = [...json.ordercountTotal1,...json.ordercountTotal2];
-                        console.log(data);
-                        break;
+                let data = [];
+                let columns = [];
+                if (isVS) {
+                    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'
+                            }]
+                        },
+                        {
+                            title: '数量',
+                            children: [{
+                                title: this.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
+                                dataIndex: 'OrderCount'
+                            }],
+                        },
+                        {
+                            title: '成交数',
+                            children: [{
+                                title: this.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
+                                dataIndex: 'CJCount'
+                            }],
+                        },
+                        {
+                            title: '成交人数',
+                            children: [{
+                                title: this.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
+                                dataIndex: 'CJPersonNum'
+                            }],
+                        },
+                        {
+                            title: '成交率',
+                            children: [{
+                                title: this.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
+                                dataIndex: 'CJrate'
+                            }],
+                        },
+                        {
+                            title: '成交毛利（预计）',
+                            children: [{
+                                title: this.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
+                                dataIndex: 'YJLY'
+                            }],
+                        },
+
+                        {
+                            title: '单个订单价值',
+                            children: [{
+                                title: this.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
+                                dataIndex: 'Ordervalue'
+                            }],
+                        },
+                    ];
+                    for (let item of json.ordercount1) {
+                        for (let item2 of json.ordercount2) {
+                            if (item.OrderType == item2.OrderType) {
+                                data.push({
+                                    OrderType: item.OrderType,
+                                    OrderCount: this.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount),
+                                    CJCount: this.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount),
+                                    CJPersonNum: this.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum),
+                                    CJrate: this.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate),
+                                    YJLY: this.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY),
+                                    Ordervalue: this.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue),
+                                })
+                            }
+                        }
+                    }
+                } else {
+                    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'}]
+                            },
+                            {
+                                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) => b.YJLY - a.YJLY,
+                            },
+
+                            {
+                                title: '单个订单价值',
+                                children: [{title: ordercountTotal1.Ordervalue, dataIndex: 'Ordervalue'}],
+                                sorter: (a, b) => b.Ordervalue - a.Ordervalue,
+                            },
+                        ];
+                    data = json.ordercount1;
                 }
+
+                runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
+                    this.orderCountData_Form.dataSource = data;
+                    this.orderCountData_Form.columns = columns;
+                })
+
             })
             .catch((error) => {
                 console.log('fetch data failed', error);
diff --git a/src/views/Orders.js b/src/views/Orders.js
index ccfd577..0db4e36 100644
--- a/src/views/Orders.js
+++ b/src/views/Orders.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Image, Row, Col, DatePicker, Space, Button, Tabs, Select, Table} from 'antd';
-import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
+import {Row, Col, Button, Tabs, Table} from 'antd';
 import {
     ContainerOutlined, CarryOutOutlined,
     SmileOutlined, TagsOutlined, GlobalOutlined,
@@ -18,9 +17,13 @@ class Orders extends Component {
 
     constructor(props) {
         super(props);
-
     }
 
+    // componentDidMount() {
+    //     const {orders_store} = this.context;
+    //     orders_store.getOrderCount();
+    //     orders_store.onChange_Tabs(orders_store.active_tab_key);
+    // }
 
     render() {
         const {orders_store} = this.context;
@@ -40,7 +43,7 @@ class Orders extends Component {
             //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
             //     }
             // },
-            smooth: true,
+            smooth: false,
         };
 
         return (
@@ -49,7 +52,7 @@ class Orders extends Component {
                     <Col span={14}>
                     </Col>
                     <Col span={2}>
-                        <SiteSelect/>
+                        <SiteSelect store={orders_store}/>
                     </Col>
                     <Col span={6}>
                         <DatePickerCharts/>
@@ -68,21 +71,27 @@ class Orders extends Component {
                     </Col>
 
                     <Col className="gutter-row" span={24}>
-                        <Tabs defaultActiveKey="tab_form" onChange={() => orders_store.onChange_Tabs}>
+                        <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 dataSource={orders_store.orderCountData_Form.dataSource} columns={orders_store.orderCountData_Form.columns} size="small"/>
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
+                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                             </Tabs.TabPane>
                             <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
-                                产品类型
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
+                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                             </Tabs.TabPane>
                             <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
-                                国籍
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
+                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                             </Tabs.TabPane>
                             <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
-                                线路
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
+                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                             </Tabs.TabPane>
-                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">
-                                目的地
+                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
+                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
                             </Tabs.TabPane>
                         </Tabs>
                     </Col>