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 { 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 * as config from "../config";
import moment from "moment"; import moment from "moment";
import {NavLink} from "react-router-dom"; import { NavLink } from "react-router-dom";
class OrdersStore { class OrdersStore {
constructor(rootStore) {
constructor(rootStore) { this.rootStore = rootStore;
this.rootStore = rootStore; makeAutoObservable(this);
makeAutoObservable(this); }
}
loading = false;
loading = false; site_select_mode = false; //是否多选站点
site_select_mode = false;//是否多选站点 webcode = "AH";
webcode = 'AH'; include_tickets = "1"; //是否包含门票，1是含有，0不含
active_tab_key = 'Form';//当前切换的标签页 //diff_count_day = 0; //开始日期和结束日期的间隔，用于计算平均数
active_tab_key_sub = 'detail';//当前切换的子维度标签页 active_tab_key = "Form"; //当前切换的标签页
orderCountData = [];//订单统计数据源 active_tab_key_sub = "detail"; //当前切换的子维度标签页
orderCountData_type = [];//子维度订单统计 orderCountData = []; //订单统计数据源
orderCountData_Form = [];//表单类型统计数据源 orderCountData_type = []; //子维度订单统计
orderCountData_Form_sub = [];//子维度类型统计 orderCountData_Form = []; //表单类型统计数据源
diff_days1=0;//日期相差天数，用于计算日平均值 orderCountData_Form_sub = []; //子维度类型统计
diff_days2=0;//日期相差天数，比较数据时使用 diff_days1 = 0; //日期相差天数，用于计算日平均值
diff_days2 = 0; //日期相差天数，比较数据时使用
handleChange_webcode = (value) => {
this.webcode = value;
}; get diff_count_day(){
//切换标签页
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;
const date_picker_store = this.rootStore.date_picker_store; 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 _start_date = moment(date_picker_store.start_date.format(config.DATE_FORMAT));
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'; let _end_date = moment(date_picker_store.end_date.format(config.DATE_FORMAT));
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { return _end_date.diff(_start_date, "days");
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);
});
} }
handleChange_webcode = (value) => {
//网站订单类型 this.webcode = value;
getOrderCountByType(order_type) { };
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-web/QueryData/GetOrderCountByType' handleChange_include_tickets = (value) => {
url += '?WebCode=' + this.webcode + '&OrderType=' + order_type; this.include_tickets = value;
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'; //切换标签页
} onChange_Tabs_sub(ordertype, ordertype_sub, active_key) {
fetch(config.HT_HOST + url) this.active_tab_key_sub = active_key;
.then((response) => response.json()) this.getOrderCountByType_sub(ordertype, ordertype_sub, this.active_tab_key_sub);
.then((json) => { }
runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。
this.orderCountData_Form = json; //格式化一下数据
}) //映射时间，做时间段对比的时候需要把对比时间段映射到开始时间上才能在同一个x轴显示
}) //比如2022-10-01~2022-10-30 vs 2021-10-01~2021-10-30 ，则需要在2021年的时间段加365天的时间映射成2022起始时间段
.catch((error) => { //相差的天数用a.diff(b, 'days')计算
console.log('fetch data failed', error); format_data_source(data_source, start_date, end_date) {
}); let result = [];
} for (let item of data_source.ordercount1) {
result.push({
//子维度查询 xField: item.ApplyDate,
getOrderCountByType_sub(ordertype, ordertype_sub, sub_type) { yField: item.orderCount,
const date_picker_store = this.rootStore.date_picker_store; seriesField: item.groups,
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 (data_source.ordercount2 && end_date) {
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //不能直接用diff计算，因为日期是含有时间的，会导致计算差一天，先转成格式化的日期再比较
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'; let _start_date = moment(start_date.format(config.DATE_FORMAT));
} let _end_date = moment(end_date.format(config.DATE_FORMAT));
fetch(config.HT_HOST + url) let diff_days = _start_date.diff(_end_date, "days");
.then((response) => response.json()) for (let item of data_source.ordercount2) {
.then((json) => { result.push({
runInAction(() => { //错误：[MOBX]由于启用了严格模式，所以不允许改变观察到的在动作之外的值。如果此更改是有意的，请将代码包在“Actudio”中。 xField: moment(item.ApplyDate).add(diff_days, "days").format(config.DATE_FORMAT),
this.orderCountData_Form_sub = json; yField: item.orderCount,
}) seriesField: item.groups,
}) });
.catch((error) => { }
console.log('fetch data failed', error); }
}); return result;
} }
//切换标签页 //网站订单数量，根据类型
onChange_Tabs(active_key) { getOrderCount_type(ordertype, ordertype_sub) {
this.active_tab_key = active_key; this.loading = true;
this.getOrderCountByType(this.active_tab_key); 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) fetch(config.HT_HOST + url)
.then((response) => response.json()) .then((response) => response.json())
.then((json) => { .then((json) => {
result.push(...json.result1, ...json.result2); result=json.result1;
// if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) { // 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"); // let diff_days = date_moment.start_date.diff(date_moment.start_date_cp, "days");
// for (let item of json.result2) { // 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 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 { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons";
import { stores_Context } from "../config"; import { stores_Context } from "../config";
import { Line, Pie } from "@ant-design/charts"; import { Line, Pie } from "@ant-design/charts";
@ -220,7 +220,7 @@ class Orders extends Component {
const { orders_store } = this.context; const { orders_store } = this.context;
const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : []; const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; 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_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; const pie_data2 = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount2;
@ -262,7 +262,7 @@ class Orders extends Component {
legend: { legend: {
itemValue: { itemValue: {
formatter: (text, item) => { 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) : ""; //计算总数 return items.length ? items.reduce((a, b) => a + b.yField, 0) : ""; //计算总数
}, },
}, },
@ -307,6 +307,14 @@ class Orders extends Component {
<Row> <Row>
<Col md={24} lg={6} xxl={4}> <Col md={24} lg={6} xxl={4}>
<SiteSelect store={orders_store} /> <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>
<Col md={24} lg={12} xxl={10}> <Col md={24} lg={12} xxl={10}>
<DatePickerCharts /> <DatePickerCharts />
@ -332,7 +340,7 @@ class Orders extends Component {
</Col> </Col>
<Col span={24}> <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 <Tabs.TabPane
tab={ tab={
<span> <span>

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

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

Write Preview
Loading…
Cancel
Save