按日期间隔数计算平均值

添加过滤门票选项

src/stores/OrdersStore.js

@@ -1,15 +1,11 @@
-import {makeAutoObservable, runInAction} from "mobx"
+import { makeAutoObservable, runInAction } from "mobx";
-import {
+import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
-    CaretUpOutlined,
+import { Tag } from "antd";
-    CaretDownOutlined
-} from '@ant-design/icons';
-import {Tag} from 'antd';
 import * as config from "../config";
 import moment from "moment";
 import { NavLink } from "react-router-dom";
 
 class OrdersStore {
-
 	constructor(rootStore) {
 		this.rootStore = rootStore;
 		makeAutoObservable(this);
@@ -17,9 +13,11 @@ class OrdersStore {
 
 	loading = false;
 	site_select_mode = false; //是否多选站点
-    webcode = 'AH';
+	webcode = "AH";
-    active_tab_key = 'Form';//当前切换的标签页
+	include_tickets = "1"; //是否包含门票，1是含有，0不含
-    active_tab_key_sub = 'detail';//当前切换的子维度标签页
+	//diff_count_day = 0; //开始日期和结束日期的间隔，用于计算平均数
+	active_tab_key = "Form"; //当前切换的标签页
+	active_tab_key_sub = "detail"; //当前切换的子维度标签页
 	orderCountData = []; //订单统计数据源
 	orderCountData_type = []; //子维度订单统计
 	orderCountData_Form = []; //表单类型统计数据源
@@ -27,10 +25,22 @@ class OrdersStore {
 	diff_days1 = 0; //日期相差天数，用于计算日平均值
 	diff_days2 = 0; //日期相差天数，比较数据时使用
 
+
+    get diff_count_day(){
+        const date_picker_store = this.rootStore.date_picker_store;
+        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");
+    }
+
 	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;
@@ -45,22 +55,22 @@ class OrdersStore {
 		let result = [];
 		for (let item of data_source.ordercount1) {
 			result.push({
-                'xField': item.ApplyDate,
+				xField: item.ApplyDate,
-                'yField': item.orderCount,
+				yField: item.orderCount,
-                'seriesField': item.groups,
+				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');
+			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),
+					xField: moment(item.ApplyDate).add(diff_days, "days").format(config.DATE_FORMAT),
-                    'yField': item.orderCount,
+					yField: item.orderCount,
-                    'seriesField': item.groups
+					seriesField: item.groups,
-                })
+				});
 			}
 		}
 		return result;
@@ -70,11 +80,11 @@ class OrdersStore {
 	getOrderCount_type(ordertype, ordertype_sub) {
 		this.loading = true;
 		const date_picker_store = this.rootStore.date_picker_store;
-        let url = '/service-web/QueryData/GetOrderCount'
+		let url = "/service-web/QueryData/GetOrderCount";
-        url += `?OrderType=${ordertype}&OrderType_val=${ordertype_sub}`;
+		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';
+		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';
+			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())
@@ -82,11 +92,11 @@ class OrdersStore {
 				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);
+				console.log("fetch data failed", error);
 			});
 	}
 
@@ -94,10 +104,19 @@ class OrdersStore {
 	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';
+		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';
+		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';
+			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())
@@ -105,54 +124,55 @@ class OrdersStore {
 				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);
+				console.log("fetch data failed", error);
 			});
 	}
 
-
 	//网站订单类型
 	getOrderCountByType(order_type) {
 		const date_picker_store = this.rootStore.date_picker_store;
-        let url = '/service-web/QueryData/GetOrderCountByType'
+		let url = "/service-web/QueryData/GetOrderCountByType";
-        url += '?WebCode=' + this.webcode + '&OrderType=' + order_type;
+		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';
+		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';
+			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”中。
+				runInAction(() => {
+					//错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
 					this.orderCountData_Form = json;
-                })
+				});
 			})
 			.catch((error) => {
-                console.log('fetch data failed', 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'
+		let url = "/service-web/QueryData/GetOrderCountByType_Sub";
-        url += `?WebCode=${this.webcode}&OrderType=${ordertype}&OrderType_val=${ordertype_sub}&SubOrderType=${sub_type}`;
+		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';
+		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';
+			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”中。
+				runInAction(() => {
+					//错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
 					this.orderCountData_Form_sub = json;
-                })
+				});
 			})
 			.catch((error) => {
-                console.log('fetch data failed', error);
+				console.log("fetch data failed", error);
 			});
 	}
 
@@ -161,9 +181,6 @@ class OrdersStore {
 		this.active_tab_key = active_key;
 		this.getOrderCountByType(this.active_tab_key);
 	}
-
-
 }
 
-
 export default OrdersStore;

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) {

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 {
 						<Row>
 							<Col md={24} lg={6} xxl={4}>
 								<SiteSelect store={orders_store} />
+								<Select style={{ width: "95%" }} placeholder="是否含门票" value={orders_store.include_tickets} onChange={orders_store.handleChange_include_tickets}>
+									<Select.Option key="1" value="1">
+										含门票
+									</Select.Option>
+									<Select.Option key="0" value="0">
+										不含门票
+									</Select.Option>
+								</Select>
 							</Col>
 							<Col md={24} lg={12} xxl={10}>
 								<DatePickerCharts />
@@ -332,7 +340,7 @@ class Orders extends Component {
 					</Col>
 
 					<Col span={24}>
-						<Tabs activeKey={orders_store.active_tab_key} onChange={active_key => orders_store.onChange_Tabs(active_key)}>
+						<Tabs activeKey={orders_store.active_tab_key} onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
 							<Tabs.TabPane
 								tab={
 									<span>

src/views/Sale.js

@@ -89,7 +89,7 @@ const Sale = () => {
 									确认日期
 								</Select.Option>
 								<Select.Option key="2" value="applyDate">
-									下单日期
+									提交日期
 								</Select.Option>
 								<Select.Option key="3" value="startDate">
 									走团日期
@@ -97,7 +97,7 @@ const Sale = () => {
 							</Select>
 						</Col>
 						<Col md={24} lg={12} xxl={10}>
-							<DatePickerCharts />
+							<DatePickerCharts hide_vs={true} />
 						</Col>
 						<Col md={24} lg={5} xxl={8}>
 							<Button