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

Merge branch 'main' of github.com:hainatravel/dashboard

Browse Source
feature/2.0-sales-trade
LiaoYijun 3 years ago
parent ca4736fe6c bc33fdc2ea
commit 361fa6207f
5 changed files with 225 additions and 146 deletions
Show Stats Download Patch File Download Diff File

4
src/App.css
Unescape Escape View File

@ -2,4 +2,8 @@
.align_right{
text-align: right;
}
.align_left{
text-align: left;
}

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: 120}}
placeholder="选择网站"
defaultValue={store.webcode}
onChange={store.handleChange_webcode}

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

@ -1,5 +1,5 @@
import { makeAutoObservable, runInAction } from "mobx";
import * as dd from "dingtalk-jsapi";
import moment from "moment";
import * as config from "../config";
import * as comm from "../utils/commons";
@ -11,11 +11,14 @@ class SaleStore {
}
loading = false;
active_tab_key = "overview"; //当前选择的标签
loading_table = false;
active_tab_key = "All"; //当前选择的标签
group_select_mode = false;
date_type = "applyDate";
groups = ["1,2,28,7"];
date_title='date_title';//日期段，只用于显示，防止日期选择控件的变化导致页面刷新
ml_data = []; //毛利数据
type_data = []; //类型的数据
date_title = "date_title"; //日期段，只用于显示，防止日期选择控件的变化导致页面刷新
//选择事业部
group_handleChange(value) {
@ -28,34 +31,138 @@ class SaleStore {
//this.getOrderCountByType_sub(ordertype, ordertype_sub, this.active_tab_key_sub);
}
//下单日期或者出发日期
//下单日期或者出发日期
onChange_datetype(e) {
this.date_type = e.target.value;
}
//获取业绩信息
getxxxxx(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);
// });
}
//获取业绩信息
get_department_order_ml(date_moment) {
let result = [];
const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
const date2_start = comm.empty(date_moment.start_date_cp) ? "" : date_moment.start_date_cp.format(config.DATE_FORMAT);
const date2_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT);
this.loading = true;
this.date_title = `${date1_start}~${date1_end}`;
let url = "/service-web/QueryData/GetDepartmentOrderML";
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
this.date_title += ` ${date2_start}~${date2_end}`;
}
fetch(config.HT_HOST + url)
.then(response => response.json())
.then(json => {
result.push(...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) {
result.push({
COLI_Date: moment(item.COLI_Date).add(diff_days, "days").format(config.DATE_FORMAT),
COLI_YJLY: item.COLI_YJLY,
groups: item.groups,
key: item.key,
});
}
}
runInAction(() => {
this.ml_data = result;
this.loading = false;
});
})
.catch(error => {
this.loading = false;
console.log("fetch data failed", error);
});
}
//按类型获取业绩
get_department_order_ml_by_type(date_moment) {
let result = { dataSource: [], columns: [] };
const date1_start = date_moment.start_date.format(config.DATE_FORMAT);
const date1_end = date_moment.end_date.format(config.DATE_FORMAT);
const date2_start = comm.empty(date_moment.start_date_cp) ? "" : date_moment.start_date_cp.format(config.DATE_FORMAT);
const date2_end = comm.empty(date_moment.end_date_cp) ? "" : date_moment.end_date_cp.format(config.DATE_FORMAT);
this.loading_table = true;
this.date_title = `${date1_start}~${date1_end}`;
let url = "/service-web/QueryData/GetDepartmentOrderMLByType";
url += `?DepartmentList=${this.groups.toString()}&DateType=${this.date_type}&OrderType=${this.active_tab_key}`;
url += `&Date1=${date1_start}&Date2=${date1_end}%2023:59:59`;
if (date2_start && date2_end) {
url += `&OldDate1=${date2_start}&OldDate2=${date2_end}%2023:59:59`;
this.date_title += ` ${date2_start}~${date2_end}`;
}
fetch(config.HT_HOST + url)
.then(response => response.json())
.then(json => {
if (!comm.empty(json.result2) && !comm.empty(date_moment.start_date_cp)) {
} else {
let opi_arr = []; //顾问列表
let row_title = ""; //行标题
let new_data_arr = []; //行列转换后的数组
Object.keys(json.result1[0]).map((col, col_i) => {
switch (col) {
case "OPI_Name":
opi_arr = [
{ name: "", index: "c0" },
...Object.values(json.result1).map((row, row_i) => {
return { name: Object.values(row)[col_i], index: "c" + ++row_i };
}),
];
return;
break;
case "COLI_OrderCount":
row_title = "订单数";
break;
case "COLI_ML":
row_title = "毛利";
break;
case "COLI_CJCount":
row_title = "成团数";
break;
case "COLI_CJrate":
row_title = "成行率";
break;
case "COLI_Cycle":
row_title = "成行周期";
break;
case "COLI_SingleML":
row_title = "单团毛利";
break;
default:
return;
}
new_data_arr.push(
Object.assign(
{ key: col_i },
{ c0: row_title },
...Object.values(json.result1).map((row, row_i) => {
return { ["c" + ++row_i]: Object.values(row)[col_i] };
})
)
);
});
for (let item of opi_arr) {
result.columns.push({
title: item.name,
dataIndex: item.index,
});
}
result.dataSource = new_data_arr;
}
runInAction(() => {
this.type_data = result;
this.loading_table = false;
});
})
.catch(error => {
this.loading_table = false;
console.log("fetch data failed", error);
});
}
}
export default SaleStore;

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

@ -1,5 +1,5 @@
import React, { Component } from "react";
import { Row, Col, Button, Tabs, Table, Divider } from "antd";
import { Row, Col, Button, Tabs, Table, Divider, Space } 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";
@ -266,28 +266,32 @@ class Orders extends Component {
return (
<div>
<Row>
<Col span={14}></Col>
<Col span={2}>
<SiteSelect store={orders_store} />
</Col>
<Col span={6}>
<DatePickerCharts />
</Col>
<Col span={2}>
<Button
type="primary"
icon={<SearchOutlined />}
loading={orders_store.loading}
onClick={() => {
orders_store.getOrderCount();
orders_store.onChange_Tabs(orders_store.active_tab_key);
}}>
统计
</Button>
<Row gutter={{ sm: 16, lg: 32 }}>
<Col md={24} lg={10} xxl={12}></Col>
<Col md={24} lg={14} xxl={12}>
<Row>
<Col md={24} lg={6} xxl={4}>
<SiteSelect store={orders_store} />
</Col>
<Col md={24} lg={12} xxl={10}>
<DatePickerCharts />
</Col>
<Col md={24} lg={6} xxl={10}>
<Button
type="primary"
icon={<SearchOutlined />}
loading={orders_store.loading}
onClick={() => {
orders_store.getOrderCount();
orders_store.onChange_Tabs(orders_store.active_tab_key);
}}>
统计
</Button>
</Col>
</Row>
</Col>
</Row>
<Row gutter={[16, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
<Row gutter={[16, { sm: 16, lg: 32 }]}>
<Col span={24}>
<Line {...config} />
</Col>
@ -302,7 +306,7 @@ class Orders extends Component {
</span>
}
key="Form">
<Table id="table_to_xlsx_form" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_form" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -312,14 +316,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -329,7 +325,7 @@ class Orders extends Component {
</span>
}
key="Product">
<Table id="table_to_xlsx_product" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_product" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -339,14 +335,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -356,7 +344,7 @@ class Orders extends Component {
</span>
}
key="Country">
<Table id="table_to_xlsx_country" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_country" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -366,14 +354,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -383,7 +363,7 @@ class Orders extends Component {
</span>
}
key="line">
<Table id="table_to_xlsx_line" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_line" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -393,14 +373,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -410,7 +382,7 @@ class Orders extends Component {
</span>
}
key="city">
<Table id="table_to_xlsx_city" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_city" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -420,14 +392,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -437,7 +401,7 @@ class Orders extends Component {
</span>
}
key="LineClass">
<Table id="table_to_xlsx_LineClass" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_LineClass" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -447,14 +411,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -464,7 +420,7 @@ class Orders extends Component {
</span>
}
key="GuestGroupType">
<Table id="table_to_xlsx_GuestGroupType" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_GuestGroupType" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -474,14 +430,6 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
<Tabs.TabPane
tab={
@ -491,7 +439,7 @@ class Orders extends Component {
</span>
}
key="TravelMotivation">
<Table id="table_to_xlsx_TravelMotivation" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} />
<Table id="table_to_xlsx_TravelMotivation" dataSource={table_data.dataSource} columns={table_data.columns} size="small" pagination={false} scroll={{ x: "100%" }} />
<Divider orientation="right" plain>
<a
onClick={() => {
@ -501,16 +449,16 @@ class Orders extends Component {
导出excel
</a>
</Divider>
<Row>
<Col span={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Tabs.TabPane>
</Tabs>
<Row>
<Col sm={24} lg={12}>
<Pie {...pie_config} data={pie_data} />
</Col>
<Col sm={24} lg={12}>
<Pie {...pie_config} data={pie_data2} />
</Col>
</Row>
</Col>
</Row>
</div>

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

@ -2,7 +2,7 @@ import React, { useContext, useEffect } from "react";
import { Row, Col, Button, Tabs, Table, Space, Radio } from "antd";
import { ContainerOutlined, SearchOutlined } from "@ant-design/icons";
import { stores_Context } from "../config";
import { Line } from "@ant-design/charts";
import { Column } from "@ant-design/charts";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
import { NavLink, useParams } from "react-router-dom";
@ -13,37 +13,65 @@ import GroupSelect from "../charts/GroupSelect";
const Sale = () => {
const { sale_store, date_picker_store } = useContext(stores_Context);
const ml_data = sale_store.ml_data; //毛利数据
const type_data = comm.empty(sale_store.type_data) ? { dataSource: [], columns: [] } : sale_store.type_data; //毛利数据
const column_config = {
data: ml_data,
xField: "COLI_Date",
yField: "COLI_YJLY",
seriesField: "groups",
label: {
position: "top",
},
legend: {
itemValue: {
formatter: (text, item) => {
const items = ml_data.filter(d => d.groups === item.value); //按分组筛选
return items.length ? items.reduce((a, b) => a + b.COLI_YJLY, 0) : ""; //计算总数
},
},
},
};
return (
<div>
<Row>
<Col span={13}></Col>
<Col span={8}>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col md={24} lg={10} xxl={12}></Col>
<Col md={24} lg={14} xxl={12}>
<Row>
<Col span={12}>
<Col md={24} lg={8} xxl={7}>
<GroupSelect store={sale_store} />
<Radio.Group value={sale_store.date_type} onChange={e => sale_store.onChange_datetype(e)}>
<Radio value="applyDate">下单日期</Radio>
<Radio value="startDate">走团日期</Radio>
</Radio.Group>
</Col>
<Col span={12}>
<Col md={24} lg={12} xxl={10}>
<DatePickerCharts />
</Col>
<Col md={24} lg={4} xxl={7}>
<Button
type="primary"
icon={<SearchOutlined />}
loading={sale_store.loading}
onClick={() => {
sale_store.get_department_order_ml(date_picker_store);
sale_store.get_department_order_ml_by_type(date_picker_store);
}}>
统计
</Button>
</Col>
</Row>
</Col>
<Col span={1}></Col>
<Col span={2}>
<Button type="primary" icon={<SearchOutlined />} loading={sale_store.loading} onClick={() => {}}>
统计
</Button>
</Col>
</Row>
<Row>
<Col className="gutter-row" span={24}>
{/* <Line {...line} /> */}
<Col className="gutter-row" md={24}>
<Column {...column_config} />
</Col>
<Col className="gutter-row" span={24}>
<Col className="gutter-row" md={24}>
<Tabs activeKey={sale_store.active_tab_key} onChange={active_key => sale_store.onChange_Tabs(active_key)}>
<Tabs.TabPane
tab={
@ -52,19 +80,11 @@ const Sale = () => {
概览
</span>
}
key="overview">
key="All">
<Row>
<Col span={24}>
{sale_store.date_title}
{/* <Table
dataSource={table_data.dataSource}
columns={table_data.columns}
size="small"
rowKey={record => record.key}
expandable={{
expandedRowRender: record => <pre>{record.COLI_OrderDetailText}</pre>,
}}
/> */}
<Table dataSource={type_data.dataSource} columns={type_data.columns} bordered size="small" rowKey={record => record.key} loading={sale_store.loading_table} pagination={false} scroll={{ x: "100%" }} />
</Col>
</Row>
</Tabs.TabPane>

Write Preview
Loading…
Cancel
Save