From e0bb45bf6e736e5d205bd45a3e21854c95f01816 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, 16 Sep 2022 11:01:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=92=8C=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                    | 10 ++--
 src/charts/OrdersTempTable.js | 54 +++++++++++++++++--
 src/charts/SiteSelect.js      |  1 +
 src/stores/DashboardStore.js  | 48 -----------------
 src/stores/OrdersStore.js     |  7 +++
 src/views/Home.js             |  2 +-
 src/views/Orders.js           |  9 +++-
 src/views/Orders_sub.js       | 98 +++++++++++++++++++++++++++++++----
 8 files changed, 159 insertions(+), 70 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8a86e4d..fb94e84 100644
--- a/src/App.js
+++ b/src/App.js
@@ -33,11 +33,11 @@ class App extends Component {
             {key: 3, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
             {
                 key: 4,
-                label: '下拉菜单',
+                label: '财务',
                 icon: <TeamOutlined/>,
                 children: [
-                    {key: 41, label: <NavLink to="/order">子菜单1</NavLink>},
-                    {key: 412, label: <NavLink to="/order">子菜单2</NavLink>},
+                    {key: 412, label: <NavLink to="/order">损益表</NavLink>},
+                    {key: 41, label: <NavLink to="/order">信用卡账单</NavLink>},
                 ]
             },
 
@@ -61,10 +61,10 @@ class App extends Component {
                             minHeight: 480,
                         }}>
                             <Routes>
-                                <Route path="/" element={<Dashboard/>}/>
+                                <Route path="/" element={<Home/>}/>
                                 <Route path="/orders" element={<Orders/>}/>
                                 <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub/>}/>
-                                <Route path="/dashboard" element={<Home/>}/>
+                                <Route path="/dashboard" element={<Dashboard/>}/>
                             </Routes>
                         </Content>
                         <Footer
diff --git a/src/charts/OrdersTempTable.js b/src/charts/OrdersTempTable.js
index e80227f..ba6de32 100644
--- a/src/charts/OrdersTempTable.js
+++ b/src/charts/OrdersTempTable.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Table, Button, Space} from 'antd';
+import {Table, Button, Space, Tooltip} from 'antd';
 import {Line} from '@ant-design/charts';
 import SiteSelect from './SiteSelect';
 import {SearchOutlined} from '@ant-design/icons';
@@ -26,6 +26,46 @@ class OrdersTempTable extends Component {
         const {dashboard_store} = this.context;
         const ordersTemp_data = dashboard_store.ordersTemp_data;
 
+        const columns = [
+            {
+                title: '订单号',
+                dataIndex: 'COLI_ID',
+                key: 'COLI_ID',
+            },
+            {
+                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,
+            },
+            Table.EXPAND_COLUMN,
+        ];
+        const line = {
+            data: [],
+            padding: 'auto',
+            xField: 'order_date',
+            yField: 'order_count',
+            seriesField: 'order_sitecode',
+            xAxis: {
+                type: 'timeCat',
+            },
+        };
+
         return (
 
             <div>
@@ -42,12 +82,18 @@ class OrdersTempTable extends Component {
                             }}>查看详情</Button>
                 </Space>
                 {ordersTemp_data.show_table ? (
-                    <Table dataSource={ordersTemp_data.data_detail} columns={ordersTemp_data.columns} size="small"/>
+                    <Table dataSource={ordersTemp_data.data_detail} columns={columns} size="small"
+                           rowKey={record => record.COLI_ID}
+                           expandable={{
+                               expandedRowRender: (record) => (
+                                   <pre>{record.COLI_OrderDetailText}</pre>
+                               ),
+                           }}/>
                 ) : (
-                    <Line {...ordersTemp_data.line} data={ordersTemp_data.data}/>
+                    <Line {...line} data={ordersTemp_data.data}/>
                 )}
             </div>
-        );
+        )
     }
 }
 
diff --git a/src/charts/SiteSelect.js b/src/charts/SiteSelect.js
index 34b0cdf..2ec2eeb 100644
--- a/src/charts/SiteSelect.js
+++ b/src/charts/SiteSelect.js
@@ -34,6 +34,7 @@ class SiteSelect extends Component {
                     <Select.Option key="18" value="VC">法语VC</Select.Option>
                     <Select.Option key="16" value="CT">CT</Select.Option>
                     <Select.Option key="30" value="trippest">TP</Select.Option>
+                    {/*<Select.Option key="31" value="HLY">花梨鹰</Select.Option>*/}
                 </Select>
             </div>
         );
diff --git a/src/stores/DashboardStore.js b/src/stores/DashboardStore.js
index 9b04916..ee1d125 100644
--- a/src/stores/DashboardStore.js
+++ b/src/stores/DashboardStore.js
@@ -50,54 +50,6 @@ class DashboardStore {
         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),
diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js
index 6c7b350..3467dc3 100644
--- a/src/stores/OrdersStore.js
+++ b/src/stores/OrdersStore.js
@@ -20,6 +20,7 @@ class OrdersStore {
     site_select_mode = false;//是否多选站点
     webcode = 'AH';
     active_tab_key = 'Form';//当前切换的标签页
+    active_tab_key_sub = 'detail';//当前切换的子维度标签页
     orderCountData = [];//订单统计数据源
     orderCountData_type = [];//子维度订单统计
     orderCountData_Form = [];//表单类型统计数据源
@@ -29,6 +30,12 @@ class OrdersStore {
         this.webcode = value;
     };
 
+    //切换标签页
+    onChange_Tabs_sub(ordertype, ordertype_sub, active_key) {
+        this.active_tab_key_sub = active_key;
+        this.getOrderCountByType_sub(ordertype, ordertype_sub, this.active_tab_key_sub);
+    }
+
     //格式化一下数据
     //映射时间，做时间段对比的时候需要把对比时间段映射到开始时间上才能在同一个x轴显示
     //比如2022-10-01~2022-10-30 vs 2021-10-01~2021-10-30 ，则需要在2021年的时间段加365天的时间映射成2022起始时间段
diff --git a/src/views/Home.js b/src/views/Home.js
index 95464b3..8a11ab3 100644
--- a/src/views/Home.js
+++ b/src/views/Home.js
@@ -14,7 +14,7 @@ class Home extends Component {
 
         return (
             <div>
-                这就是一个主页{orders_store.webcode}
+                这就是一个主页,什么也没写
             </div>
         );
     }
diff --git a/src/views/Orders.js b/src/views/Orders.js
index e120816..725443d 100644
--- a/src/views/Orders.js
+++ b/src/views/Orders.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {Row, Col, Button, Tabs, Table} from 'antd';
 import {
-    ContainerOutlined, CarryOutOutlined,
+    ContainerOutlined, CarryOutOutlined,BlockOutlined,
     SmileOutlined, TagsOutlined, GlobalOutlined,
     SearchOutlined,
 } from '@ant-design/icons';
@@ -171,6 +171,10 @@ class Orders extends Component {
             xAxis: {
                 type: 'timeCat',
             },
+            point: {
+                size: 4,
+                shape: 'cicle',
+            },
             label: {},//显示标签
             legend: {
                 itemValue: {
@@ -232,6 +236,9 @@ class Orders extends Component {
                             <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="city">
                                 <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
                             </Tabs.TabPane>
+                            <Tabs.TabPane tab={<span><BlockOutlined />页面类型</span>} key="LineClass">
+                                <Table dataSource={table_data.dataSource} columns={table_data.columns} size="small"/>
+                            </Tabs.TabPane>
                         </Tabs>
                     </Col>
 
diff --git a/src/views/Orders_sub.js b/src/views/Orders_sub.js
index ee1feaf..9d3a8a3 100644
--- a/src/views/Orders_sub.js
+++ b/src/views/Orders_sub.js
@@ -20,7 +20,7 @@ const Orders_sub = () => {
 
     useEffect(() => {
         orders_store.getOrderCount_type(ordertype, ordertype_sub);
-        orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, 'page');
+        orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
     }, [])
 
     const data_source = orders_store.orderCountData_type;
@@ -55,8 +55,7 @@ const Orders_sub = () => {
                 {
                     title: '页面',
                     children: [{
-                        title:
-                            <div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div>,
+                        title: '',
                         dataIndex: 'request_uri'
                     }],
                 },
@@ -73,8 +72,55 @@ const Orders_sub = () => {
         return result;
     })
 
-    const table_data = format_data(orders_store.orderCountData_Form_sub.ordercount1);
-    const table_data2 = 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: 'IP',
+                    dataIndex: 'COLI_SenderIP',
+                    key: 'COLI_SenderIP',
+                },
+                {
+                    title: '预定时间',
+                    dataIndex: 'COLI_ApplyDate',
+                    key: 'COLI_ApplyDate',
+                },
+                {
+                    title: '订单内容',
+                    dataIndex: 'COLI_OrderDetailText',
+                    key: 'COLI_OrderDetailText',
+                    ellipsis: true,
+                },
+                Table.EXPAND_COLUMN,
+            ];
+            result.dataSource = data;
+        }
+        return result;
+    })
+
+
+    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;
+    }
 
     return (
         <div>
@@ -91,7 +137,7 @@ const Orders_sub = () => {
                 <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, 'page');
+                        orders_store.getOrderCountByType_sub(ordertype, ordertype_sub, orders_store.active_tab_key_sub);
                     }}>统计</Button>
                 </Col>
             </Row>
@@ -102,24 +148,54 @@ const Orders_sub = () => {
                 </Col>
 
                 <Col className="gutter-row" span={24}>
-                    <Tabs activeKey="page"
-                          onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
-                        <Tabs.TabPane tab={<span><ContainerOutlined/>访问路径</span>} key="page">
+                    <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={11}>
+                                    {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"/>
+                                           columns={table_data.columns} size="small" rowKey={record => record.COLI_ID}
+                                           expandable={{
+                                               expandedRowRender: (record) => (
+                                                   <pre>{record.COLI_OrderDetailText}</pre>
+                                               ),
+                                           }}
+                                    />
                                 </Col>
                                 <Col span={2}></Col>
                                 <Col span={11}>
+                                    {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.COLI_ID}
+                                           expandable={{
+                                               expandedRowRender: (record) => (
+                                                   <pre>{record.COLI_OrderDetailText}</pre>
+                                               ),
+                                           }}
+                                    />
+                                </Col>
+                            </Row>
+
+                        </Tabs.TabPane>
+                        <Tabs.TabPane tab={<span><ContainerOutlined/>访问路径</span>} key="page">
+                            <Row>
+                                <Col span={11}>
+                                    {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.COLI_ID}
+                                           columns={table_data.columns} size="small"/>
+                                </Col>
+                                <Col span={2}></Col>
+                                <Col span={11}>
+                                    {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.COLI_ID}
                                            columns={table_data2.columns} size="small"/>
                                 </Col>
 
 
                             </Row>
-
                         </Tabs.TabPane>
+
                     </Tabs>
                 </Col>