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 12b8f250c0
commit c7019a36db
10 changed files with 148 additions and 33 deletions
Show Stats Download Patch File Download Diff File

4
src/App.css
Unescape Escape View File

@ -1 +1,5 @@
@import '~antd/dist/antd.css';
.align_right{
text-align: right;
}

4
src/App.js
Unescape Escape View File

@ -11,10 +11,10 @@ import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
import Home from "./views/Home"
import Dashboard from "./views/Dashboard"
import Orders from "./views/Orders"
import Orders_index from "./charts/Orders"
import Logo from './logo.png'
class App extends Component {
constructor(props) {
@ -28,7 +28,7 @@ class App extends Component {
const menu_items = [
{key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
{key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>},
{key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
{key: 3, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
{
key: 4,

4
src/charts/MobileDeal.js
Unescape Escape View File

@ -15,11 +15,11 @@ class MobileDeal extends Component {
render() {
const {dashboard_store} = this.context;
const mobile_data=dashboard_store.mobile_data;
const mobile_data = dashboard_store.mobile_data;
return (
<div>
<h2>移动成交</h2>
<GroupSelect store={mobile_data} />
<GroupSelect store={mobile_data}/>
<Space size="large">
<DatePickerCharts hide_vs={true}/>

74
src/charts/Orders.js
Unescape Escape View File

@ -0,0 +1,74 @@
import React, {Component} from 'react';
import {Row, Col, Button, Tabs, Table, Space} from 'antd';
import {
ContainerOutlined, CarryOutOutlined,
SmileOutlined, TagsOutlined, GlobalOutlined,
SearchOutlined,
} from '@ant-design/icons';
import {stores_Context} from '../config'
import {Line} from "@ant-design/charts";
import SiteSelect from "./SiteSelect";
import {observer} from 'mobx-react';
import DatePickerCharts from './DatePickerCharts'
class Orders extends Component {
static contextType = stores_Context;
constructor(props) {
super(props);
}
// componentDidMount() {
// const {orders_store} = this.context;
// orders_store.getOrderCount();
// orders_store.onChange_Tabs(orders_store.active_tab_key);
// }
render() {
const {dashboard_store} = this.context;
const orders_data = dashboard_store.orders_data;
const line_config = {
data: orders_data.data,
padding: 'auto',
xField: 'ApplyDate',
yField: 'orderCount',
seriesField: 'WebCode',
xAxis: {
type: 'timeCat',
},
smooth: true,
legend: {
position: 'right-top',
title: {
text: '网站合计 ' + orders_data.data.reduce((a, b) => a + b.orderCount, 0),
},
itemMarginBottom: 12,//垂直间距
itemValue: {
formatter: (text, item) => {
const items = orders_data.data.filter((d) => d.WebCode === item.value);//按站点筛选
return items.length ? items.reduce((a, b) => a + b.orderCount, 0) : '';//计算总数
},
},
},
}
return (
<div>
<h2>全网站订单数统计</h2>
<div>
<Space>
<DatePickerCharts hide_vs={true}/>
<Button type="primary" icon={<SearchOutlined/>} loading={orders_data.loading} onClick={() => {
orders_data.getOrderCount_all();
}}>统计</Button>
</Space>
</div>
<br/>
<Line {...line_config}/>
</div>
);
}
}
export default observer(Orders);

21
src/charts/OrdersTempTable.js
Unescape Escape View File

@ -22,28 +22,29 @@ class OrdersTempTable extends Component {
// }
render() {
const {dashboard_store} = this.context;
const ordersTemp_data=dashboard_store.ordersTemp_data;
const ordersTemp_data = dashboard_store.ordersTemp_data;
return (
<div>
<h2>临时订单数量</h2>
<SiteSelect store={ordersTemp_data} />
<SiteSelect store={ordersTemp_data}/>
<Space><DatePickerCharts hide_vs={true}/>
<Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading} onClick={() => {
ordersTemp_data.asyncFetch();
}}>统计</Button>
<Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading_detail} onClick={() => {
ordersTemp_data.asyncFetch_detail();
}}>查看详情</Button>
<Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading}
onClick={() => {
ordersTemp_data.asyncFetch();
}}>统计</Button>
<Button type="primary" icon={<SearchOutlined/>} loading={ordersTemp_data.loading_detail}
onClick={() => {
ordersTemp_data.asyncFetch_detail();
}}>查看详情</Button>
</Space>
{ordersTemp_data.show_table ? (
<Table dataSource={ordersTemp_data.data_detail} columns={ordersTemp_data.columns} size="small"/>
) : (
<Line {...ordersTemp_data.line} data={ordersTemp_data.data} />
<Line {...ordersTemp_data.line} data={ordersTemp_data.data}/>
)}
</div>
);

2
src/charts/SiteSelect.js
Unescape Escape View File

@ -15,7 +15,7 @@ class SiteSelect extends Component {
<div>
<Select
mode={store.site_select_mode}
style={{width: '100%',}}
style={{width: '100%'}}
placeholder="选择网站"
defaultValue={store.webcode}
onChange={store.handleChange_webcode}

56
src/stores/DashboardStore.js
Unescape Escape View File

@ -13,16 +13,44 @@ class DashboardStore {
site_select_mode = 'multiple';//是否多选站点
webcode = ['CHT', 'AH', 'GH'];
//订单统计 begin
orders_data = {
loading: false,
data: [],
getOrderCount_all: this.getOrderCount_all.bind(this),
}
getOrderCount_all() { //统计所有站点订单数量
this.orders_data.loading = true;
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-web/QueryData/GetOrderCount'
url += '?WebCode=all&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';
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
runInAction(() => {
this.orders_data.data = json.ordercount1;
this.orders_data.loading = false;
})
})
.catch((error) => {
this.orders_data.loading = false;
console.log('fetch data failed', error);
});
}
//订单统计 end
// 临时订单 begin
ordersTemp_data = {
data:[],
data_detail:[],
data: [],
data_detail: [],
loading: false,
loading_detail: false,
show_table: false,
columns:[
columns: [
{
title: '订单号',
dataIndex: 'COLI_ID',
@ -60,8 +88,8 @@ class DashboardStore {
ellipsis: true,
},
],
line : {
data:[],
line: {
data: [],
padding: 'auto',
xField: 'order_date',
yField: 'order_count',
@ -77,13 +105,13 @@ class DashboardStore {
asyncFetch_detail: this.get_CountOrdersData_detail.bind(this),
}
handleChange_site_select(value){
handleChange_site_select(value) {
this.ordersTemp_data.webcode = value;
}
get_CountOrdersData(){
this.ordersTemp_data.loading=true;
this.ordersTemp_data.show_table=false;
get_CountOrdersData() {
this.ordersTemp_data.loading = true;
this.ordersTemp_data.show_table = false;
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-baseinfo/QueryWebData?type=orders_temp&db=1';
const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'";
@ -102,12 +130,12 @@ class DashboardStore {
});
}
get_CountOrdersData_detail(){
this.ordersTemp_data.loading_detail=true;
this.ordersTemp_data.show_table=true;
get_CountOrdersData_detail() {
this.ordersTemp_data.loading_detail = true;
this.ordersTemp_data.show_table = true;
const date_picker_store = this.rootStore.date_picker_store;
let url = '/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1';
const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'";
const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'";
url += '&WebSite=' + website_code + '&ApplyDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
fetch(config.HT_HOST + url)
.then((response) => response.json())
@ -118,7 +146,7 @@ class DashboardStore {
})
})
.catch((error) => {
this.ordersTemp_data.loading_detail=false;
this.ordersTemp_data.loading_detail = false;
console.log('fetch data failed', error);
});
}

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

@ -17,9 +17,10 @@ class OrdersStore {
loading = false;
site_select_mode=false;//是否多选站点
webcode = 'CHT';
webcode = 'AH';
active_tab_key = 'Form';//当前切换的标签页
orderCountData = [];//订单统计数据源
orderCountData_all = [];//所有订单统计数据源
orderCountData_Form = {dataSource: [], columns: []};//表单类型统计数据源
@ -51,12 +52,13 @@ class OrdersStore {
}
}
return result;
}
//网站订单数量
getOrderCount() {
//this.loading = true;
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=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';

5
src/views/Dashboard.js
Unescape Escape View File

@ -2,6 +2,7 @@ import React, {Component} from 'react';
import {Col, Row} from "antd";
import OrdersTempTable from "../charts/OrdersTempTable";
import MobileDeal from "../charts/MobileDeal";
import Orders from "../charts/Orders";
class Dashboard extends Component {
@ -16,6 +17,9 @@ class Dashboard extends Component {
<div
>
<Row gutter={[16, {xs: 8, sm: 16, md: 24, lg: 32}]}>
<Col className="gutter-row" span={24}>
<Orders/>
</Col>
<Col className="gutter-row" span={12}>
<OrdersTempTable/>
</Col>
@ -23,6 +27,7 @@ class Dashboard extends Component {
<Col className="gutter-row" span={12}>
<MobileDeal/>
</Col>
</Row>
</div>
</div>

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

@ -37,13 +37,14 @@ class Orders extends Component {
xAxis: {
type: 'timeCat',
},
label: {},//显示标签
// tooltip: {
// customContent: (title, items) => {
// const data = items[0]?.data || {};
// return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
// }
// },
smooth: false,
smooth: true,
};
return (

Write Preview
Loading…
Cancel
Save