From d8f93bb428b808c31bff6713e646638a3e8d5b18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= Date: Fri, 2 Sep 2022 16:43:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E7=94=A8=E6=97=A5=E5=8E=86=E6=8F=92?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/charts/DatePickerCharts.js | 62 ++++++++++++++++++++++++ src/stores/DatePickerStore.js | 46 ++++++++++++++++++ src/stores/Index.js | 10 ++-- src/stores/OrdersStore.js | 46 ++++++++++++++---- src/views/Orders.js | 88 +++++++++++++++++++++++++++++----- 5 files changed, 226 insertions(+), 26 deletions(-) create mode 100644 src/charts/DatePickerCharts.js create mode 100644 src/stores/DatePickerStore.js 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"> + 目的地 + +