From 8c32040a298575af59f58eac0f98faa759d33d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= <ycc@hainatravel.com>
Date: Mon, 5 Sep 2022 17:20:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=AE=B5=E7=9A=84=E6=95=B0=E6=8D=AE=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/OrdersStore.js | 103 +++++++++++++++++++++++++++++++++++---
 src/views/Orders.js       |  70 ++++++--------------------
 2 files changed, 112 insertions(+), 61 deletions(-)

diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js
index bd9c4db..6d5a923 100644
--- a/src/stores/OrdersStore.js
+++ b/src/stores/OrdersStore.js
@@ -10,15 +10,45 @@ class OrdersStore {
         makeAutoObservable(this);
     }
 
+    loading = false;
     webcode = 'CHT';
+    active_tab_key = 'Form';//当前切换的标签页
     orderCountData = [];//订单统计数据源
-    orderCountData_Form=[];//表单类型统计数据源
-    loading = false;
+    orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
+    orderCountData_Product = [];//表单类型统计数据源
+    orderCountData_Country = [];//表单类型统计数据源
+    orderCountData_line = [];//表单类型统计数据源
+
 
     handleChange_webcode = (value) => {
         this.webcode = value;
     };
 
+    //格式化一下数据
+    //映射时间，做时间段对比的时候需要把对比时间段映射到开始时间上才能在同一个x轴显示
+    //比如2022-10-01~2022-10-30 vs 2021-10-01~2021-10-30 ，则需要在2021年的时间段加365天的时间映射成2022起始时间段
+    //相差的天数用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,
+                'yField': item.orderCount,
+                '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
+            })
+        }
+        return result;
+
+    }
+
     //网站订单数量
     getOrderCount() {
         this.loading = true;
@@ -32,7 +62,7 @@ class OrdersStore {
         fetch(config.HT_HOST + url)
             .then((response) => response.json())
             .then((json) => {
-                this.orderCountData = json.ordercount;
+                this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp);
                 this.loading = false;
             })
             .catch((error) => {
@@ -43,7 +73,6 @@ class OrdersStore {
 
     //网站订单类型
     getOrderCountByType(order_type) {
-        this.loading = true;
         const date_picker_store = this.rootStore.date_picker_store;
 
         let url = '/service-web/QueryData/GetOrderCountByType'
@@ -55,15 +84,75 @@ class OrdersStore {
         fetch(config.HT_HOST + url)
             .then((response) => response.json())
             .then((json) => {
-                this.orderCountData_Form = json.ordercount;
-                this.loading = false;
+                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;
+                }
             })
             .catch((error) => {
-                this.loading = false;
                 console.log('fetch data failed', error);
             });
     }
 
+    //切换标签页
+    onChange_Tabs(active_key) {
+        this.active_tab_key = active_key;
+        this.getOrderCountByType(this.active_tab_key);
+    }
+
+
 }
 
 
diff --git a/src/views/Orders.js b/src/views/Orders.js
index 7ff4050..ccfd577 100644
--- a/src/views/Orders.js
+++ b/src/views/Orders.js
@@ -28,12 +28,18 @@ class Orders extends Component {
         const config = {
             data: data_source,
             padding: 'auto',
-            xField: 'ApplyDate',
-            yField: 'orderCount',
-            seriesField: 'groups',
+            xField: 'xField',
+            yField: 'yField',
+            seriesField: 'seriesField',
             xAxis: {
                 type: 'timeCat',
             },
+            // tooltip: {
+            //     customContent: (title, items) => {
+            //         const data = items[0]?.data || {};
+            //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
+            //     }
+            // },
             smooth: true,
         };
 
@@ -51,7 +57,7 @@ class Orders extends Component {
                     <Col span={2}>
                         <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
                             orders_store.getOrderCount();
-                            orders_store.getOrderCountByType('Form');
+                            orders_store.onChange_Tabs(orders_store.active_tab_key);
                         }}>统计</Button>
                     </Col>
                 </Row>
@@ -62,61 +68,17 @@ class Orders extends Component {
                     </Col>
 
                     <Col className="gutter-row" span={24}>
-                        <Tabs defaultActiveKey="tab_form">
-                            <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="tab_form">
-                                <Table dataSource={orders_store.orderCountData_Form} columns={
-                                    [
-                                        {
-                                            title: '时间段',
-                                            dataIndex: 'groups',
-                                            key: 'groups',
-                                        },
-                                        {
-                                            title: '来源类型',
-                                            dataIndex: 'OrderType',
-                                            key: 'OrderType',
-                                        },
-                                        {
-                                            title: '数量',
-                                            dataIndex: 'OrderCount',
-                                            key: 'OrderCount',
-                                        },
-                                        {
-                                            title: '成交数',
-                                            dataIndex: 'CJCount',
-                                            key: 'CJCount',
-                                        },
-                                        {
-                                            title: '成交人数',
-                                            dataIndex: 'CJPersonNum',
-                                            key: 'CJPersonNum',
-                                        },
-                                        {
-                                            title: '成交率',
-                                            dataIndex: 'CJrate',
-                                            key: 'CJrate',
-                                        },
-                                        {
-                                            title: '预计毛利（成交）',
-                                            dataIndex: 'YJLY',
-                                            key: 'YJLY',
-                                        },
-
-                                        {
-                                            title: '单个订单价值',
-                                            dataIndex: 'Ordervalue',
-                                            key: 'Ordervalue',
-                                        },
-                                    ]
-                                } size="small"/>
+                        <Tabs defaultActiveKey="tab_form" onChange={() => orders_store.onChange_Tabs}>
+                            <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource} columns={orders_store.orderCountData_Form.columns} size="small"/>
                             </Tabs.TabPane>
-                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="tab_product">
+                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="Product">
                                 产品类型
                             </Tabs.TabPane>
-                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="tab_nationality">
+                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="Country">
                                 国籍
                             </Tabs.TabPane>
-                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="tab_tour">
+                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="line">
                                 线路
                             </Tabs.TabPane>
                             <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">