数据和显示的优化

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

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>
-        );
+        )
     }
 }
 

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>
         );

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),

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起始时间段

src/views/Home.js

@@ -14,7 +14,7 @@ class Home extends Component {
 
         return (
             <div>
-                这就是一个主页{orders_store.webcode}
+                这就是一个主页,什么也没写
             </div>
         );
     }

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>
 

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>