Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

按日期间隔数计算平均值

Browse Source 
添加过滤门票选项
feature/2.0-sales-trade
尹诚诚 3 years ago
parent c4579cdf1a
commit 32867201e2
4 changed files with 192 additions and 167 deletions
Show Stats Download Patch File Download Diff File

337
src/stores/OrdersStore.js
Unescape Escape View File

@ -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;
export default OrdersStore;

2
src/stores/SaleStore.js
Unescape Escape View File

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

16
src/views/Orders.js
Unescape Escape View File

@ -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>

4
src/views/Sale.js
Unescape Escape View File

@ -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

Write Preview
Loading…
Cancel
Save