子维度查询

src/App.js

@@ -11,6 +11,7 @@ import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
 import Home from "./views/Home"
 import Dashboard from "./views/Dashboard"
 import Orders from "./views/Orders"
+import Orders_sub from "./views/Orders_sub"
 import Orders_index from "./charts/Orders"
 import Logo from './logo.png'
 
@@ -62,6 +63,7 @@ class App extends Component {
                             <Routes>
                                 <Route path="/" element={<Dashboard/>}/>
                                 <Route path="/orders" element={<Orders/>}/>
+                                <Route path="/orders_sub/:ordertype/:ordertype_sub" element={<Orders_sub/>}/>
                                 <Route path="/dashboard" element={<Home/>}/>
                             </Routes>
                         </Content>

src/charts/DatePickerCharts.js

@@ -28,8 +28,8 @@ class DatePickerCharts extends Component {
                                                     '本周': [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().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
+                                                    '近30天': [moment().subtract(30, 'days'), moment()],
                                                     '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
                                                     '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
                                                     '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],

src/charts/Orders.js

@@ -41,7 +41,7 @@ class Orders extends Component {
             legend: {
                 position: 'right-top',
                 title: {
-                    text: '网站合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0),
+                    text: '总合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0),
                 },
                 itemMarginBottom: 12,//垂直间距
                 itemValue: {

src/stores/DashboardStore.js

@@ -236,6 +236,9 @@ class DashboardStore {
     }
 //  移动成交 end
 
+
+
+
 }
 
 

src/stores/OrdersStore.js

@@ -6,6 +6,7 @@ import {
 import {Tag} from 'antd';
 import * as config from "../config";
 import moment from "moment";
+import {NavLink} from "react-router-dom";
 
 
 class OrdersStore {
@@ -16,13 +17,13 @@ class OrdersStore {
     }
 
     loading = false;
-    site_select_mode=false;//是否多选站点
+    site_select_mode = false;//是否多选站点
     webcode = 'AH';
     active_tab_key = 'Form';//当前切换的标签页
     orderCountData = [];//订单统计数据源
-    orderCountData_all = [];//所有订单统计数据源
+    orderCountData_sub = [];//子维度订单统计
     orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
-
+    orderCountData_Form_sub = [];//子维度类型统计
 
     handleChange_webcode = (value) => {
         this.webcode = value;
@@ -55,7 +56,6 @@ class OrdersStore {
     }
 
 
-
     //网站订单数量
     getOrderCount() {
         this.loading = true;
@@ -114,7 +114,9 @@ class OrdersStore {
                             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'
+                                dataIndex: 'OrderType',
+                                render: (text, record) => <NavLink
+                                    to={`/orders_sub/${this.active_tab_key}/${record.OrderTypeSN}`}>{text}</NavLink>
                             }]
                         },
                         {
@@ -166,6 +168,7 @@ class OrdersStore {
                             if (item.OrderType == item2.OrderType) {
                                 data.push({
                                     OrderType: item.OrderType,
+                                    OrderTypeSN: item.OrderTypeSN,
                                     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),
@@ -181,8 +184,12 @@ class OrdersStore {
                         [
                             {
                                 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>,
+                                children: [{
-                                    dataIndex: 'OrderType'}]
+                                    title: <span><div>{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}</div></span>,
+                                    dataIndex: 'OrderType',
+                                    render: (text, record) => <NavLink
+                                        to={`/orders_sub/${this.active_tab_key}/${record.OrderTypeSN}`}>{text}</NavLink>
+                                }]
                             },
                             {
                                 title: '数量',

src/views/Orders.js

@@ -38,6 +38,14 @@ class Orders extends Component {
                 type: 'timeCat',
             },
             label: {},//显示标签
+            legend: {
+                itemValue: {
+                    formatter: (text, item) => {
+                        const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
+                        return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
+                    },
+                },
+            },
             // tooltip: {
             //     customContent: (title, items) => {
             //         const data = items[0]?.data || {};

src/views/Orders_sub.js

@@ -0,0 +1,104 @@
+import React, {Component} from 'react';
+import {Row, Col, Button, Tabs, Table} from 'antd';
+import {
+    ContainerOutlined, CarryOutOutlined,
+    SmileOutlined, TagsOutlined, GlobalOutlined,
+    SearchOutlined,
+} from '@ant-design/icons';
+import {stores_Context} from '../config'
+import {Line} from "@ant-design/charts";
+import SiteSelect from "../charts/SiteSelect";
+import {observer} from 'mobx-react';
+import DatePickerCharts from '../charts/DatePickerCharts'
+
+class Orders_sub extends Component {
+
+    static contextType = stores_Context;
+
+    constructor(props) {
+        super(props);
+    }
+
+
+    render() {
+        const {ordertype, ordertype_sub} = this.props.match.params;
+        const {orders_store} = this.context;
+        const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
+        const config = {
+            data: data_source,
+            padding: 'auto',
+            xField: 'xField',
+            yField: 'yField',
+            seriesField: 'seriesField',
+            xAxis: {
+                type: 'timeCat',
+            },
+            label: {},//显示标签
+            legend: {
+                itemValue: {
+                    formatter: (text, item) => {
+                        const items = data_source.filter((d) => d.seriesField === item.value);//按站点筛选
+                        return items.length ? items.reduce((a, b) => a + b.yField, 0) : '';//计算总数
+                    },
+                },
+            },
+            smooth: true,
+        };
+
+        return (
+            <div>
+                <Row>
+                    <Col span={14}>
+                    </Col>
+                    <Col span={2}>
+                        <SiteSelect store={orders_store}/>
+                    </Col>
+                    <Col span={6}>
+                        <DatePickerCharts/>
+                    </Col>
+                    <Col span={2}>
+                        <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
+                            orders_store.getOrderCount();
+                            orders_store.onChange_Tabs(orders_store.active_tab_key);
+                        }}>统计</Button>
+                    </Col>
+                </Row>
+                <Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
+
+                    <Col className="gutter-row" span={24}>
+                        <Line {...config} />
+                    </Col>
+
+                    <Col className="gutter-row" span={24}>
+                        <Tabs activeKey={orders_store.active_tab_key}
+                              onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
+                            <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">
+                                <Table 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="city">
+                                <Table dataSource={orders_store.orderCountData_Form.dataSource}
+                                       columns={orders_store.orderCountData_Form.columns} size="small"/>
+                            </Tabs.TabPane>
+                        </Tabs>
+                    </Col>
+
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default observer(Orders_sub);