diff --git a/src/charts/DatePickerCharts.js b/src/charts/DatePickerCharts.js
new file mode 100644
index 0000000..501c5a9
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default observer(DatePickerCharts);
+
diff --git a/src/stores/DatePickerStore.js b/src/stores/DatePickerStore.js
new file mode 100644
index 0000000..6884622
--- /dev/null
+++ b/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;
+
diff --git a/src/stores/Index.js b/src/stores/Index.js
index 19d8da6..c8596ad 100644
--- a/src/stores/Index.js
+++ b/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;
}
diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js
index 50b5128..bd9c4db 100644
--- a/src/stores/OrdersStore.js
+++ b/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);
});
}
diff --git a/src/views/Orders.js b/src/views/Orders.js
index 6f85e5a..7ff4050 100644
--- a/src/views/Orders.js
+++ b/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,
- TeamOutlined,
- DashboardOutlined,
+ 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 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 (
-
-
+
+
+
+
+
-
+
-
+
@@ -60,7 +62,67 @@ class Orders extends Component {
- 表格
+
+ 来源类型} key="tab_form">
+
+
+ 产品类型} key="tab_product">
+ 产品类型
+
+ 国籍} key="tab_nationality">
+ 国籍
+
+ 线路} key="tab_tour">
+ 线路
+
+ 目的地} key="tab_destination">
+ 目的地
+
+