diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index b1c8bfa..b7bebb9 100644 --- a/src/stores/OrdersStore.js +++ b/src/stores/OrdersStore.js @@ -1,169 +1,186 @@ -import {makeAutoObservable, runInAction} from "mobx" -import { - CaretUpOutlined, - CaretDownOutlined -} from '@ant-design/icons'; -import {Tag} from 'antd'; +import { makeAutoObservable, runInAction } from "mobx"; +import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons"; +import { Tag } from "antd"; import * as config from "../config"; import moment from "moment"; -import {NavLink} from "react-router-dom"; +import { NavLink } from "react-router-dom"; class OrdersStore { - - constructor(rootStore) { - this.rootStore = rootStore; - makeAutoObservable(this); - } - - loading = false; - site_select_mode = false;//是否多选站点 - webcode = 'AH'; - active_tab_key = 'Form';//当前切换的标签页 - active_tab_key_sub = 'detail';//当前切换的子维度标签页 - orderCountData = [];//订单统计数据源 - orderCountData_type = [];//子维度订单统计 - orderCountData_Form = [];//表单类型统计数据源 - orderCountData_Form_sub = [];//子维度类型统计 - diff_days1=0;//日期相差天数，用于计算日平均值 - diff_days2=0;//日期相差天数，比较数据时使用 - - handleChange_webcode = (value) => { - 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起始时间段 - //相差的天数用a.diff(b, 'days')计算 - format_data_source(data_source, start_date, end_date) { - let result = []; - for (let item of data_source.ordercount1) { - result.push({ - 'xField': item.ApplyDate, - 'yField': item.orderCount, - 'seriesField': item.groups, - }) - } - if (data_source.ordercount2 && end_date) { - //不能直接用diff计算，因为日期是含有时间的，会导致计算差一天，先转成格式化的日期再比较 - let _start_date=moment(start_date.format(config.DATE_FORMAT)); - let _end_date=moment(end_date.format(config.DATE_FORMAT)); - let diff_days = _start_date.diff(_end_date, 'days'); - for (let item of data_source.ordercount2) { - result.push({ - 'xField': moment(item.ApplyDate).add(diff_days, 'days').format(config.DATE_FORMAT), - 'yField': item.orderCount, - 'seriesField': item.groups - }) - } - } - return result; - } - - //网站订单数量，根据类型 - getOrderCount_type(ordertype, ordertype_sub) { - this.loading = true; - const date_picker_store = this.rootStore.date_picker_store; - let url = '/service-web/QueryData/GetOrderCount' - url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`; - 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) => { - runInAction(() => { - this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp); - this.loading = false; - }) - }) - .catch((error) => { - this.loading = false; - console.log('fetch data failed', error); - }); - } - - //网站订单数量 - getOrderCount() { - this.loading = true; + constructor(rootStore) { + this.rootStore = rootStore; + makeAutoObservable(this); + } + + loading = false; + site_select_mode = false; //是否多选站点 + webcode = "AH"; + include_tickets = "1"; //是否包含门票，1是含有，0不含 + //diff_count_day = 0; //开始日期和结束日期的间隔，用于计算平均数 + active_tab_key = "Form"; //当前切换的标签页 + active_tab_key_sub = "detail"; //当前切换的子维度标签页 + orderCountData = []; //订单统计数据源 + orderCountData_type = []; //子维度订单统计 + orderCountData_Form = []; //表单类型统计数据源 + orderCountData_Form_sub = []; //子维度类型统计 + diff_days1 = 0; //日期相差天数，用于计算日平均值 + diff_days2 = 0; //日期相差天数，比较数据时使用 + + + get diff_count_day(){ 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=' + 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) => { - runInAction(() => { - this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp); - this.loading = false; - }) - }) - .catch((error) => { - this.loading = false; - console.log('fetch data failed', error); - }); + let _start_date = moment(date_picker_store.start_date.format(config.DATE_FORMAT)); + let _end_date = moment(date_picker_store.end_date.format(config.DATE_FORMAT)); + return _end_date.diff(_start_date, "days"); } - - //网站订单类型 - getOrderCountByType(order_type) { - 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) => { - runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 - this.orderCountData_Form = json; - }) - }) - .catch((error) => { - console.log('fetch data failed', error); - }); - } - - //子维度查询 - getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) { - const date_picker_store = this.rootStore.date_picker_store; - let url = '/service-web/QueryData/GetOrderCountByType_Sub' - url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_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) => { - runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 - this.orderCountData_Form_sub = json; - }) - }) - .catch((error) => { - console.log('fetch data failed', error); - }); - } - - //切换标签页 - onChange_Tabs(active_key) { - this.active_tab_key = active_key; - this.getOrderCountByType(this.active_tab_key); - } - - + handleChange_webcode = (value) => { + this.webcode = value; + }; + + handleChange_include_tickets = (value) => { + this.include_tickets = 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起始时间段 + //相差的天数用a.diff(b, 'days')计算 + format_data_source(data_source, start_date, end_date) { + let result = []; + for (let item of data_source.ordercount1) { + result.push({ + xField: item.ApplyDate, + yField: item.orderCount, + seriesField: item.groups, + }); + } + if (data_source.ordercount2 && end_date) { + //不能直接用diff计算，因为日期是含有时间的，会导致计算差一天，先转成格式化的日期再比较 + let _start_date = moment(start_date.format(config.DATE_FORMAT)); + let _end_date = moment(end_date.format(config.DATE_FORMAT)); + let diff_days = _start_date.diff(_end_date, "days"); + for (let item of data_source.ordercount2) { + result.push({ + xField: moment(item.ApplyDate).add(diff_days, "days").format(config.DATE_FORMAT), + yField: item.orderCount, + seriesField: item.groups, + }); + } + } + return result; + } + + //网站订单数量，根据类型 + getOrderCount_type(ordertype, ordertype_sub) { + this.loading = true; + const date_picker_store = this.rootStore.date_picker_store; + let url = "/service-web/QueryData/GetOrderCount"; + url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}&IncludeTickets=${this.include_tickets}`; + 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) => { + runInAction(() => { + this.orderCountData_type = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp); + this.loading = false; + }); + }) + .catch((error) => { + this.loading = false; + console.log("fetch data failed", error); + }); + } + + //网站订单数量 + 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 + + "&IncludeTickets=" + + this.include_tickets + + "&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) => { + runInAction(() => { + this.orderCountData = this.format_data_source(json, date_picker_store.start_date, date_picker_store.start_date_cp); + this.loading = false; + }); + }) + .catch((error) => { + this.loading = false; + console.log("fetch data failed", error); + }); + } + + //网站订单类型 + getOrderCountByType(order_type) { + const date_picker_store = this.rootStore.date_picker_store; + let url = "/service-web/QueryData/GetOrderCountByType"; + url += "?WebCode=" + this.webcode + "&OrderType=" + order_type + "&IncludeTickets=" + this.include_tickets; + 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) => { + runInAction(() => { + //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 + this.orderCountData_Form = json; + }); + }) + .catch((error) => { + console.log("fetch data failed", error); + }); + } + + //子维度查询 + getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) { + const date_picker_store = this.rootStore.date_picker_store; + let url = "/service-web/QueryData/GetOrderCountByType_Sub"; + url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_type}` + "&IncludeTickets=" + this.include_tickets; + 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) => { + runInAction(() => { + //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 + this.orderCountData_Form_sub = json; + }); + }) + .catch((error) => { + console.log("fetch data failed", error); + }); + } + + //切换标签页 + onChange_Tabs(active_key) { + this.active_tab_key = active_key; + this.getOrderCountByType(this.active_tab_key); + } } - -export default OrdersStore; \ No newline at end of file +export default OrdersStore; diff --git a/src/stores/SaleStore.js b/src/stores/SaleStore.js index ab75911..ce9c480 100644 --- a/src/stores/SaleStore.js +++ b/src/stores/SaleStore.js @@ -57,7 +57,7 @@ class SaleStore { fetch(config.HT_HOST + url) .then((response) => response.json()) .then((json) => { - result.push(...json.result1, ...json.result2); + result=json.result1; // if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { // let diff_days = date_moment.start_date.diff(date_moment.start_date_cp, "days"); // for (let item of json.result2) { diff --git a/src/views/Orders.js b/src/views/Orders.js index bb68187..0a569e2 100644 --- a/src/views/Orders.js +++ b/src/views/Orders.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { Row, Col, Button, Tabs, Table, Divider, Space } from "antd"; +import { Row, Col, Button, Tabs, Table, Divider, Select } from "antd"; import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons"; import { stores_Context } from "../config"; import { Line, Pie } from "@ant-design/charts"; @@ -220,7 +220,7 @@ class Orders extends Component { const { orders_store } = this.context; const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : []; const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; - const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; //平均值，显示一条平均线 + const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / orders_store.diff_count_day) : 0; //平均值，显示一条平均线 const pie_data = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount1; //饼图的显示 const pie_data2 = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount2; @@ -262,7 +262,7 @@ class Orders extends Component { legend: { itemValue: { formatter: (text, item) => { - const items = data_source.filter(d => d.seriesField === item.value); //按站点筛选 + const items = data_source.filter((d) => d.seriesField === item.value); //按站点筛选 return items.length ? items.reduce((a, b) => a + b.yField, 0) : ""; //计算总数 }, }, @@ -307,6 +307,14 @@ class Orders extends Component { + @@ -332,7 +340,7 @@ class Orders extends Component { - orders_store.onChange_Tabs(active_key)}> + orders_store.onChange_Tabs(active_key)}> diff --git a/src/views/Sale.js b/src/views/Sale.js index b55f8d0..4b47cee 100644 --- a/src/views/Sale.js +++ b/src/views/Sale.js @@ -89,7 +89,7 @@ const Sale = () => { 确认日期 - 下单日期 + 提交日期 走团日期 @@ -97,7 +97,7 @@ const Sale = () => { - +