公用日历插件

src/charts/DatePickerCharts.js

@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+import {Col, DatePicker, Row} from 'antd';
+import {observer} from 'mobx-react';
+import * as config from "../config";
+import moment from "moment";
+import {stores_Context} from "../config";
+
+//用于日期选择，计算上一时间段、同比时间等
+class DatePickerCharts extends Component {
+    static contextType = stores_Context;
+
+    constructor(props) {
+        super(props);
+    }
+
+
+    render() {
+        const {date_picker_store} = this.context;
+        return (
+            <div>
+                <Row>
+                    <Col span={24}>
+                        <DatePicker.RangePicker format={config.DATE_FORMAT}
+                                                allowClear={false}
+                                                defaultValue={[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().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')],
+                                                }}
+                        />
+                    </Col>
+                    <Col span={24}>
+                        <DatePicker.RangePicker bordered={false} format={config.DATE_FORMAT}
+                                                defaultValue={[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')]
+                                                }}
+                        />
+                    </Col>
+                </Row>
+
+            </div>
+        );
+    }
+}
+
+export default observer(DatePickerCharts);
+

src/stores/DatePickerStore.js

@@ -0,0 +1,46 @@
+import {makeAutoObservable} from "mobx"
+import moment from "moment";
+
+class DatePickerStore {
+
+    constructor(rootStore) {
+        this.rootStore = rootStore;
+        makeAutoObservable(this);
+    }
+
+    start_date = moment().startOf('week').subtract(7, 'days');
+    end_date = moment().endOf('week').subtract(7, 'days');
+    start_date_cp = false;
+    end_date_cp = false;
+
+    onChange_dataPicker = (dates) => {
+        this.start_date = dates[0];
+        this.end_date = dates[1];
+
+    }
+
+    onChange_dataPicker_cp = (dates) => {
+        if (dates) {
+            this.start_date_cp = dates[0];
+            this.end_date_cp = dates[1];
+        } else {
+            this.start_date_cp = false;
+            this.end_date_cp = false;
+        }
+    }
+
+    //计算上一个时间段
+    previous_date() {
+        return [moment(this.start_date).subtract(this.end_date.diff(this.start_date, 'days') + 1, 'days'), moment(this.start_date).subtract(1, 'days')];
+    }
+
+    //去年同期
+    previous_year() {
+        return [moment(this.start_date).subtract(1, 'year'), moment(this.end_date).subtract(1, 'year')];
+    }
+
+}
+
+
+export default DatePickerStore;
+

src/stores/Index.js

@@ -1,19 +1,23 @@
 import {makeAutoObservable} from "mobx"
 import OrdersStore from "./OrdersStore";
 import DashboardStore from "./DashboardStore";
-import moment from "moment";
+import DatePickerStore from "./DatePickerStore";
+
 
 class Index {
     constructor() {
         this.dashboard_store = new DashboardStore(this);
         this.orders_store = new OrdersStore(this);
-        makeAutoObservable(this)
+        this.date_picker_store = new DatePickerStore(this);
+        makeAutoObservable(this);
     }
 
     goBack() {
         this.history.goBack();
     }
-
+    dashboard_store={}
+    orders_store={}
+    date_picker_store={}
     animating = false;
 }
 

src/stores/OrdersStore.js

@@ -10,30 +10,56 @@ class OrdersStore {
         makeAutoObservable(this);
     }
 
-    startdate = moment().subtract(7, 'days');//上周一
-    enddate = moment().subtract(0, 'days');//上周日
     webcode = 'CHT';
     orderCountData = [];//订单统计数据源
-    loading=false;
+    orderCountData_Form=[];//表单类型统计数据源
+    loading = false;
 
     handleChange_webcode = (value) => {
         this.webcode = value;
     };
 
-    onChange_dataPicker = (dates) => {
+    //网站订单数量
-        this.startdate = dates[0];
-        this.enddate = dates[1];
-    }
-
     getOrderCount() {
+        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=' + this.startdate.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + this.enddate.format(config.DATE_FORMAT) + '%2023:59';
+        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) {
+            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)
+            .then((response) => response.json())
+            .then((json) => {
+                this.orderCountData = json.ordercount;
+                this.loading = false;
+            })
+            .catch((error) => {
+                this.loading = false;
+                console.log('fetch data failed', error);
+            });
+    }
+
+    //网站订单类型
+    getOrderCountByType(order_type) {
+        this.loading = true;
+        const date_picker_store = this.rootStore.date_picker_store;
+
+        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) {
+            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)
             .then((response) => response.json())
             .then((json) => {
-                this.orderCountData = json;
+                this.orderCountData_Form = json.ordercount;
+                this.loading = false;
             })
             .catch((error) => {
+                this.loading = false;
                 console.log('fetch data failed', error);
             });
     }

src/views/Orders.js

@@ -1,16 +1,16 @@
 import React, {Component} from 'react';
-import {Layout, Menu, Image, Row, Col, DatePicker, Space, Button} from 'antd';
+import {Layout, Menu, Image, Row, Col, DatePicker, Space, Button, Tabs, Select, Table} from 'antd';
 import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
 import {
-    HomeOutlined,
+    ContainerOutlined, CarryOutOutlined,
-    TeamOutlined,
+    SmileOutlined, TagsOutlined, GlobalOutlined,
-    DashboardOutlined,
     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 extends Component {
 
@@ -24,13 +24,13 @@ class Orders extends Component {
 
     render() {
         const {orders_store} = this.context;
-        const data_source = orders_store.orderCountData.ordercount1 ? orders_store.orderCountData.ordercount1 : [];
+        const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
         const config = {
             data: data_source,
             padding: 'auto',
             xField: 'ApplyDate',
             yField: 'orderCount',
-            seriesField: 'WebCode',
+            seriesField: 'groups',
             xAxis: {
                 type: 'timeCat',
             },
@@ -40,16 +40,18 @@ class Orders extends Component {
         return (
             <div>
                 <Row>
-                    <Col span={12}></Col>
+                    <Col span={14}>
-                    <Col span={2}><SiteSelect/></Col>
+                    </Col>
+                    <Col span={2}>
+                        <SiteSelect/>
+                    </Col>
                     <Col span={6}>
-                        <DatePicker.RangePicker format={config.DATE_FORMAT}
+                        <DatePickerCharts/>
-                                                defaultValue={[orders_store.startdate, orders_store.enddate]}
-                                                onChange={orders_store.onChange_dataPicker}/>
                     </Col>
-                    <Col span={4}>
+                    <Col span={2}>
                         <Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
                             orders_store.getOrderCount();
+                            orders_store.getOrderCountByType('Form');
                         }}>统计</Button>
                     </Col>
                 </Row>
@@ -60,7 +62,67 @@ 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.TabPane>
+                            <Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="tab_product">
+                                产品类型
+                            </Tabs.TabPane>
+                            <Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="tab_nationality">
+                                国籍
+                            </Tabs.TabPane>
+                            <Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="tab_tour">
+                                线路
+                            </Tabs.TabPane>
+                            <Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">
+                                目的地
+                            </Tabs.TabPane>
+                        </Tabs>
                     </Col>
 
                 </Row>