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 254ab199c3
commit 4adfb60b22
8 changed files with 462 additions and 257 deletions
Show Stats Download Patch File Download Diff File

8
src/App.js
Unescape Escape View File

@ -14,10 +14,12 @@ import Customer_care_regular from "./charts/Customer_care_regular";
import Wechat_session from "./charts/Wechat_session";
import WhatsApp_session from "./charts/WhatsApp_session";
import Credit_card_bill from "./views/Credit_card_bill";
import exchange_rate from "./charts/ExchangeRate";
import Sale from "./views/Sale";
import Logo from "./logo.png";
import { stores_Context } from "./config";
import { observer } from "mobx-react";
import ExchangeRate from "./charts/ExchangeRate";
const App = () => {
const { Content, Footer, Sider } = Layout;
@ -56,7 +58,10 @@ const App = () => {
key: 4,
label: "财务",
icon: <DollarOutlined />,
children: [{ key: 41, label: <NavLink to="/credit_card_bill">信用卡账单</NavLink> }],
children: [
{ key: 41, label: <NavLink to="/credit_card_bill">信用卡账单</NavLink> },
{ key: 42, label: <NavLink to="/exchange_rate">汇率</NavLink> },
],
},
];
@ -92,6 +97,7 @@ const App = () => {
</Route>
<Route element={<ProtectedRoute auth={["admin", "director_bu", "financial"]} />}>
<Route path="/credit_card_bill" element={<Credit_card_bill />} />
<Route path="/exchange_rate" element={<ExchangeRate />} />
</Route>
<Route element={<ProtectedRoute auth={["admin", "director_bu", "sale"]} />}>
<Route path="/sale" element={<Sale />} />

76
src/charts/ExchangeRate.js
Unescape Escape View File

@ -0,0 +1,76 @@
import React, { Component } from "react";
import { Table, Button, Space, Radio } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import GroupSelect from "./GroupSelect";
import DatePickerCharts from "./DatePickerCharts";
import { stores_Context } from "../config";
import { observer } from "mobx-react";
import * as comm from "../utils/commons";
import { Line } from "@ant-design/charts";
import * as config from "../config";
class ExchangeRate extends Component {
static contextType = stores_Context;
constructor(props) {
super(props);
}
render() {
const { dashboard_store, date_picker_store } = this.context;
const { exchangeRate_data } = dashboard_store;
const line_data_source = comm.empty(exchangeRate_data.data) ? [] : exchangeRate_data.data.CurrencyData1;
const line_config = {
data: line_data_source,
padding: "auto",
xField: "er_date",
yField: "er_htrate",
seriesField: "er_currency",
xAxis: {
type: "timeCat",
},
point: {
size: 4,
shape: "cicle",
},
label: {}, //显示标签
tooltip: {
// customContent: (title, items) => {
// const data = items[0]?.data || {};
// return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
// },
// itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span><span class="g2-tooltip-name">{name}</span>: <span class="g2-tooltip-value">{value}</span></li>',
customItems: items => {
let result_arr = [];
items.forEach(item => {
item.value = item.data.er_htrate + " | " + item.data.er_bankrate;
return result_arr.push(item);
});
return result_arr; //return [{color:'red',name:'sss',value:22},{color:'red',name:'aaaa',value:22}];
},
},
smooth: true,
};
return (
<div>
<h2>汇率 HT|Bank</h2>
<Space size="large">
<DatePickerCharts hide_vs={true} />
<Button
type="primary"
icon={<SearchOutlined />}
loading={exchangeRate_data.loading}
onClick={() => {
exchangeRate_data.asyncFetch(date_picker_store.start_date.format(config.DATE_FORMAT), date_picker_store.end_date.format(config.DATE_FORMAT));
}}>
统计
</Button>
</Space>
<Line {...line_config} />
</div>
);
}
}
export default observer(ExchangeRate);

4
src/config.js
Unescape Escape View File

@ -2,5 +2,5 @@ import React from "react";
export const stores_Context = React.createContext();
export const DATE_FORMAT = "YYYY-MM-DD";
export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
//export const HT_HOST = "http://202.103.68.100:890"; //889正式库
//export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
export const HT_HOST = "http://202.103.68.100:890"; //889正式库

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

@ -9,7 +9,7 @@ class AuthStore {
constructor(rootStore) {
this.rootStore = rootStore;
makeAutoObservable(this);
this.get_auth(); //放到钉钉环境才能开启
//this.get_auth(); //放到钉钉环境才能开启
}
auth = ['admin']; //开发时候用，正式环境留空

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

@ -1,198 +1,219 @@
import {makeAutoObservable, runInAction} from "mobx";
import { makeAutoObservable, runInAction } from "mobx";
import * as config from "../config";
class DashboardStore {
constructor(rootStore) {
this.rootStore = rootStore;
makeAutoObservable(this);
}
loading = false;
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: [],
loading: false,
loading_detail: false,
show_table: false,
site_select_mode: 'multiple',
webcode: ['CHT', 'AH', 'GH'],
handleChange_webcode: this.handleChange_site_select.bind(this),
asyncFetch: this.get_CountOrdersData.bind(this),
asyncFetch_detail: this.get_CountOrdersData_detail.bind(this),
}
handleChange_site_select(value) {
this.ordersTemp_data.webcode = value;
}
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("','") + "'";
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())
.then((json) => {
runInAction(() => {
this.ordersTemp_data.data = json.data;
this.ordersTemp_data.loading = false;
})
})
.catch((error) => {
this.ordersTemp_data.loading = false;
console.log('fetch data failed', error);
});
}
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("','") + "'";
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())
.then((json) => {
runInAction(() => {
this.ordersTemp_data.data_detail = json.data;
this.ordersTemp_data.loading_detail = false;
})
})
.catch((error) => {
this.ordersTemp_data.loading_detail = false;
console.log('fetch data failed', error);
});
}
// 临时订单 end
// 移动成交 beign
handleChange_webcode = (value) => {
this.webcode = value;
};
handleChange_group_select(value) {
this.mobile_data.groups = value;
};
onChange_datetype(e) {
this.mobile_data.date_type = e.target.value;
};
get_CountYDOrder() {
const date_picker_store = this.rootStore.date_picker_store;
this.mobile_data.loading = true;
let url = '/service-tourdesign/CountYDOrder?DEI_SNList=' + this.mobile_data.groups.toString();
if (this.mobile_data.date_type == 'applyDate') {
url += '&ApplydateCheck=1&OrderStartdateCheck=0';
} else {
url += '&ApplydateCheck=0&OrderStartdateCheck=1';
}
url += '&ApplydateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplydateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
url += '&OrderStartdateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&OrderStartdateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59';
fetch(config.HT_HOST + url)
.then((response) => response.json())
.then((json) => {
let table_data = []
json && json.map((item, index) => {
table_data.push({
key: index,
department_name: item.DEI_DepartmentName,
mobile_order: item.YDOrderNum + '/' + item.OrderNum + ' (' + (item.OrderNumRate * 100).toFixed(1) + '%)',
mobile_deal: item.YDOrderNumSUC + ' / ' + item.OrderNumSUC + ' (' + (item.OrderNumSUCRate * 100).toFixed(1) + '%)',
mobile_gross: item.YDML + ' / ' + item.ML + ' (' + (item.MLRate * 100).toFixed(1) + '%)',
})
})
runInAction(() => {
this.mobile_data.data = table_data;
this.mobile_data.loading = false;
})
})
.catch((error) => {
this.mobile_data.loading = false;
console.log('fetch data failed', error);
});
};
mobile_data = {
loading: false,
data: [],
group_select_mode: 'multiple',//是否多选分组
groups: ['1', '2', '28', '7', '8', '9', '11', '12', '20', '21','18'],
columns: [
{
title: '市场',
dataIndex: 'department_name',
key: 'department_name',
},
{
title: '移动订单/总订单',
dataIndex: 'mobile_order',
key: 'mobile_order',
},
{
title: '移动成交/总成交',
dataIndex: 'mobile_deal',
key: 'mobile_deal',
},
{
title: '移动毛利/总毛利',
dataIndex: 'mobile_gross',
key: 'mobile_gross',
},
],
date_type: 'applyDate',
group_handleChange: this.handleChange_group_select.bind(this),
onChange_datetype: this.onChange_datetype.bind(this),
asyncFetch: this.get_CountYDOrder.bind(this),
}
// 移动成交 end
constructor(rootStore) {
this.rootStore = rootStore;
makeAutoObservable(this);
}
loading = false;
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: [],
loading: false,
loading_detail: false,
show_table: false,
site_select_mode: "multiple",
webcode: ["CHT", "AH", "GH"],
handleChange_webcode: this.handleChange_site_select.bind(this),
asyncFetch: this.get_CountOrdersData.bind(this),
asyncFetch_detail: this.get_CountOrdersData_detail.bind(this),
};
handleChange_site_select(value) {
this.ordersTemp_data.webcode = value;
}
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("','") + "'";
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())
.then(json => {
runInAction(() => {
this.ordersTemp_data.data = json.data;
this.ordersTemp_data.loading = false;
});
})
.catch(error => {
this.ordersTemp_data.loading = false;
console.log("fetch data failed", error);
});
}
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("','") + "'";
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())
.then(json => {
runInAction(() => {
this.ordersTemp_data.data_detail = json.data;
this.ordersTemp_data.loading_detail = false;
});
})
.catch(error => {
this.ordersTemp_data.loading_detail = false;
console.log("fetch data failed", error);
});
}
// 临时订单 end
// 移动成交 beign
handleChange_webcode = value => {
this.webcode = value;
};
handleChange_group_select(value) {
this.mobile_data.groups = value;
}
onChange_datetype(e) {
this.mobile_data.date_type = e.target.value;
}
get_CountYDOrder() {
const date_picker_store = this.rootStore.date_picker_store;
this.mobile_data.loading = true;
let url = "/service-tourdesign/CountYDOrder?DEI_SNList=" + this.mobile_data.groups.toString();
if (this.mobile_data.date_type == "applyDate") {
url += "&ApplydateCheck=1&OrderStartdateCheck=0";
} else {
url += "&ApplydateCheck=0&OrderStartdateCheck=1";
}
url += "&ApplydateStart=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&ApplydateEnd=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59";
url += "&OrderStartdateStart=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&OrderStartdateEnd=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59";
fetch(config.HT_HOST + url)
.then(response => response.json())
.then(json => {
let table_data = [];
json &&
json.map((item, index) => {
table_data.push({
key: index,
department_name: item.DEI_DepartmentName,
mobile_order: item.YDOrderNum + "/" + item.OrderNum + " (" + (item.OrderNumRate * 100).toFixed(1) + "%)",
mobile_deal: item.YDOrderNumSUC + " / " + item.OrderNumSUC + " (" + (item.OrderNumSUCRate * 100).toFixed(1) + "%)",
mobile_gross: item.YDML + " / " + item.ML + " (" + (item.MLRate * 100).toFixed(1) + "%)",
});
});
runInAction(() => {
this.mobile_data.data = table_data;
this.mobile_data.loading = false;
});
})
.catch(error => {
this.mobile_data.loading = false;
console.log("fetch data failed", error);
});
}
mobile_data = {
loading: false,
data: [],
group_select_mode: "multiple", //是否多选分组
groups: ["1", "2", "28", "7", "8", "9", "11", "12", "20", "21", "18"],
columns: [
{
title: "市场",
dataIndex: "department_name",
key: "department_name",
},
{
title: "移动订单/总订单",
dataIndex: "mobile_order",
key: "mobile_order",
},
{
title: "移动成交/总成交",
dataIndex: "mobile_deal",
key: "mobile_deal",
},
{
title: "移动毛利/总毛利",
dataIndex: "mobile_gross",
key: "mobile_gross",
},
],
date_type: "applyDate",
group_handleChange: this.handleChange_group_select.bind(this),
onChange_datetype: this.onChange_datetype.bind(this),
asyncFetch: this.get_CountYDOrder.bind(this),
};
// 移动成交 end
// 汇率变化 begin
exchangeRate_data = {
loading: false,
data: [],
asyncFetch: this.get_currency_exchange_rate.bind(this),
};
get_currency_exchange_rate(Currdate1_start, Currdate1_end) {
const date_picker_store = this.rootStore.date_picker_store;
this.exchangeRate_data.loading = true;
let url = "/service-web/QueryData/GetCurrency?Currency=ALL";
url += "&Currdate1=" + Currdate1_start + "&Currdate2=" + Currdate1_end + "%2023:59:59";
fetch(config.HT_HOST + url)
.then(response => response.json())
.then(json => {
runInAction(() => {
this.exchangeRate_data.data = json;
this.exchangeRate_data.loading = false;
});
})
.catch(error => {
this.exchangeRate_data.loading = false;
console.log("fetch data failed", error);
});
}
// 汇率变化 end
}
export default DashboardStore;

74
src/views/Credit_card_bill.js
Unescape Escape View File

@ -9,7 +9,7 @@ import BillTypeSelect from "../charts/BillTypeSelect";
import GroupSelect from "../charts/GroupSelect";
import Business_unit from "../charts/Business_unit";
import DatePickerCharts from "../charts/DatePickerCharts";
import { Line } from "@ant-design/charts";
import { Line, Pie } from "@ant-design/charts";
import * as comm from "../utils/commons";
import * as config from "../config";
@ -224,38 +224,50 @@ const Credit_card_bill = () => {
return result;
};
//格式化数据，饼图只支持数字模式
const format_data_for_pie = data => {
let result_arr = [];
if (!comm.empty(data)) {
data.map(item => {
item.cb_usd_number = parseFloat(item.cb_usd.replace(/,/g, ""));
result_arr.push(item);
});
}
return result_arr;
};
const credit_card_bills = !comm.empty(credit_card_data.data) ? format_data_detail(credit_card_data.data) : format_data_detail([]);
const credit_card_bills_by_type = !comm.empty(credit_card_data.data_by_type) ? format_data(credit_card_data.data_by_type) : format_data([]);
const line_config = {
data: credit_card_bills.dataSource,
padding: "auto",
xField: "cb_datetime",
yField: "cb_usd",
seriesField: "groups",
xAxis: {
type: "timeCat",
},
point: {
size: 4,
shape: "cicle",
const pie_config = {
appendPadding: 10,
data: [],
angleField: "cb_usd_number",
colorField: "cb_billtype",
radius: 0.8,
label: {
type: "outer",
content: "{name} \n {percentage}",
},
label: {}, //显示标签
legend: {
itemValue: {
formatter: (text, item) => {
const items = credit_card_bills.dataSource.filter(d => d.groups === item.value); //按站点筛选
return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : ""; //计算总数
},
tooltip: {
customItems: items => {
let result_arr = [];
items.forEach(item => {
item.value = "$" + item.data.cb_usd + " | ￥" + item.data.cb_rmb;
return result_arr.push(item);
});
return result_arr;
},
},
// tooltip: {
// customContent: (title, items) => {
// const data = items[0]?.data || {};
// return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
// }
// },
smooth: true,
legend: false, //不显示图例
interactions: [
{
type: "element-selected",
},
{
type: "element-active",
},
],
};
return (
@ -269,7 +281,6 @@ const Credit_card_bill = () => {
<Col span={12}>
<BillTypeSelect store={bill_type_data} show_all={true} />
<Business_unit store={credit_card_data} show_all={true} />
{/*<GroupSelect store={credit_card_data} show_all={true}/>*/}
</Col>
<Col span={12}>
<DatePickerCharts />
@ -294,8 +305,11 @@ const Credit_card_bill = () => {
</Row>
<Row>
<Col span={24}>
<Line {...line_config} />
<Col span={12}>
<Pie {...pie_config} data={format_data_for_pie(credit_card_data.data_by_type.BillTypeData1)} />
</Col>
<Col span={12}>
<Pie {...pie_config} data={format_data_for_pie(credit_card_data.data_by_type.BillTypeData2)} />
</Col>
<Col className="gutter-row" span={24}>
<Tabs activeKey={credit_card_data.active_tab} onChange={credit_card_data.set_active_tab}>

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

@ -1,38 +1,39 @@
import React, {Component} from 'react';
import {Col, Row} from "antd";
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";
import ExchangeRate from "../charts/ExchangeRate";
class Dashboard extends Component {
constructor(props) {
super(props);
}
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>
<Row>
<Col span={24}>
<Orders />
</Col>
render() {
<Col span={24}>
<ExchangeRate />
</Col>
<Col span={12}>
<OrdersTempTable />
</Col>
return (
<div>
<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>
<Col className="gutter-row" span={12}>
<MobileDeal/>
</Col>
</Row>
</div>
</div>
);
}
<Col span={12}>
<MobileDeal />
</Col>
</Row>
</div>
</div>
);
}
}
export default Dashboard;

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

@ -1,8 +1,8 @@
import React, { Component } from "react";
import { Row, Col, Button, Tabs, Table, Divider } 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 { Line } from "@ant-design/charts";
import { Line, Pie } from "@ant-design/charts";
import SiteSelect from "../charts/SiteSelect";
import { observer } from "mobx-react";
import DatePickerCharts from "../charts/DatePickerCharts";
@ -186,6 +186,9 @@ class Orders extends Component {
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 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 config = {
data: data_source,
padding: "auto",
@ -240,6 +243,26 @@ class Orders extends Component {
},
smooth: true,
};
const pie_config = {
appendPadding: 10,
data: [],
angleField: "OrderCount",
colorField: "OrderType",
radius: 0.8,
label: {
type: "outer",
content: "{name} {value} \n {percentage}",
},
legend: false, //不显示图例
interactions: [
{
type: "element-selected",
},
{
type: "element-active",
},
],
};
return (
<div>
@ -289,6 +312,14 @@ 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={
@ -308,6 +339,14 @@ 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={
@ -327,6 +366,14 @@ 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={
@ -346,6 +393,14 @@ 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={
@ -365,6 +420,14 @@ 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={
@ -384,8 +447,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.TabPane
<Tabs.TabPane
tab={
<span>
<FullscreenOutlined />
@ -403,8 +474,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.TabPane
<Tabs.TabPane
tab={
<span>
<DingtalkOutlined />
@ -422,6 +501,14 @@ 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>
</Col>

Write Preview
Loading…
Cancel
Save