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 8e40919f18
commit d8f93bb428
5 changed files with 226 additions and 26 deletions
Show Stats Download Patch File Download Diff File

62
src/charts/DatePickerCharts.js
Unescape Escape View File

@ -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 (
<div>
<Row>
<Col span={24}>
<DatePicker.RangePicker format={config.DATE_FORMAT}
allowClear={false}
defaultValue={[date_picker_store.start_date, date_picker_store.end_date]}
onChange={date_picker_store.onChange_dataPicker}
ranges={{
'本周': [moment().startOf('week'), moment().endOf('week')],
'上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
'本月': [moment().startOf('month'), moment().endOf('month')],
'近30天': [moment().subtract(30, 'days'), moment()],
'上个月': [moment().startOf('month').subtract(1, 'month'), moment().endOf('month').subtract(1, 'month')],
'近三个月': [moment().startOf('month').subtract(2, 'month'), moment().endOf('month')],
'今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
'去年': [moment().startOf('year').subtract(1, 'year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'year').subtract(1, 'month')],
}}
/>
</Col>
<Col span={24}>
<DatePicker.RangePicker bordered={false} format={config.DATE_FORMAT}
defaultValue={[date_picker_store.start_date_cp, date_picker_store.end_date_cp]}
placeholder={['对比 Start date', 'End date']}
onChange={date_picker_store.onChange_dataPicker_cp}
ranges={{
'上一时间段': date_picker_store.previous_date(),
'去年同期': date_picker_store.previous_year(),
'上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
'上个月': [moment().startOf('month').subtract(1, 'month'), moment().endOf('month').subtract(1, 'month')],
'前三个月': [moment().startOf('month').subtract(5, 'month'), moment().endOf('month').subtract(3, 'month')],
'去年': [moment().startOf('year').subtract(1, 'year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'year').subtract(1, 'month')]
}}
/>
</Col>
</Row>
</div>
);
}
}
export default observer(DatePickerCharts);

46
src/stores/DatePickerStore.js
Unescape Escape View File

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

10
src/stores/Index.js
Unescape Escape View File

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

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

@ -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);
});
}

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

@ -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 (
<div>
<Row>
<Col span={12}></Col>
<Col span={2}><SiteSelect/></Col>
<Col span={14}>
</Col>
<Col span={2}>
<SiteSelect/>
</Col>
<Col span={6}>
<DatePicker.RangePicker format={config.DATE_FORMAT}
defaultValue={[orders_store.startdate, orders_store.enddate]}
onChange={orders_store.onChange_dataPicker}/>
<DatePickerCharts/>
</Col>
<Col span={4}>
<Col span={2}>
<Button type="primary" icon={<SearchOutlined/>} loading={orders_store.loading} onClick={() => {
orders_store.getOrderCount();
orders_store.getOrderCountByType('Form');
}}>统计</Button>
</Col>
</Row>
@ -60,7 +62,67 @@ class Orders extends Component {
</Col>
<Col className="gutter-row" span={24}>
表格
<Tabs defaultActiveKey="tab_form">
<Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="tab_form">
<Table dataSource={orders_store.orderCountData_Form} columns={
[
{
title: '时间段',
dataIndex: 'groups',
key: 'groups',
},
{
title: '来源类型',
dataIndex: 'OrderType',
key: 'OrderType',
},
{
title: '数量',
dataIndex: 'OrderCount',
key: 'OrderCount',
},
{
title: '成交数',
dataIndex: 'CJCount',
key: 'CJCount',
},
{
title: '成交人数',
dataIndex: 'CJPersonNum',
key: 'CJPersonNum',
},
{
title: '成交率',
dataIndex: 'CJrate',
key: 'CJrate',
},
{
title: '预计毛利（成交）',
dataIndex: 'YJLY',
key: 'YJLY',
},
{
title: '单个订单价值',
dataIndex: 'Ordervalue',
key: 'Ordervalue',
},
]
} size="small"/>
</Tabs.TabPane>
<Tabs.TabPane tab={<span><CarryOutOutlined/>产品类型</span>} key="tab_product">
产品类型
</Tabs.TabPane>
<Tabs.TabPane tab={<span><SmileOutlined/>国籍</span>} key="tab_nationality">
国籍
</Tabs.TabPane>
<Tabs.TabPane tab={<span><TagsOutlined/>线路</span>} key="tab_tour">
线路
</Tabs.TabPane>
<Tabs.TabPane tab={<span><GlobalOutlined/>目的地</span>} key="tab_destination">
目的地
</Tabs.TabPane>
</Tabs>
</Col>
</Row>

Write Preview
Loading…
Cancel
Save