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 11b1e4be7f
commit b2fb6822a2
4 changed files with 166 additions and 33 deletions
Show Stats Download Patch File Download Diff File

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

@ -9,11 +9,11 @@ class AuthStore {
constructor(rootStore) {
this.rootStore = rootStore;
makeAutoObservable(this);
this.get_auth();
this.get_auth(); //放到钉钉环境才能开启
}
auth = ['admin'];
user = {name:'ycc',userid:'12345678'};
auth = ['admin']; //开发时候用，正式环境留空
user = {name:'ycc',userid:'12345678'};//开发时候用，正式环境留空
has_permission(requireds) {
if (Object.keys(requireds).length == 0) {

29
src/stores/FinancialStore.js
Unescape Escape View File

@ -1,6 +1,7 @@
import {makeAutoObservable, runInAction} from "mobx";
import * as dd from 'dingtalk-jsapi';
import * as config from "../config";
import * as comm from '../utils/commons'
//财务管理
@ -38,16 +39,42 @@ class FinancialStore {
});
}
set_bill_filtered(values) {
if (Array.isArray(values)) {
this.credit_card_data.filteredValue = values;
} else if (comm.empty(values)) {
this.credit_card_data.filteredValue = [];
} else {
this.credit_card_data.filteredValue = [values];
}
}
set_active_tab(value) {
this.credit_card_data.active_tab = value;
}
set_table_handleChange = (pagination, filters, sorter) => {
let filters_arr = Object.values(filters);
if (!comm.empty(filters_arr)) {
this.set_bill_filtered(filters_arr[0]);
}
};
credit_card_data = {
data: [],
data_by_type: [],
loading:false,
active_tab: 'summarized_data',
loading: false,
bu_select_mode: false,
business_units: ['ALL'],
group_select_mode: false,
groups: ['ALL'],
filteredValue: [],//默认的筛选值
bu_handleChange: this.bu_handleChange.bind(this),
group_handleChange: this.group_handleChange.bind(this),
set_bill_filtered: this.set_bill_filtered.bind(this),
set_active_tab: this.set_active_tab.bind(this),
set_table_handleChange: this.set_table_handleChange.bind(this),
};
bu_handleChange(value) {

12
src/utils/commons.js
Unescape Escape View File

@ -197,15 +197,21 @@ export function clickUrl(url) {
httpLink.click();
}
export function show_vs_tag(vs, data1, data2) {
export function show_vs_tag(vs,vs_diff, data1, data2) {
let tag = '-';
if (parseInt(vs) < 0) {
tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs}</Tag>
tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs} {vs_diff}</Tag>
} else if (parseInt(vs) > 0) {
tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs}</Tag>
tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs} {vs_diff}</Tag>
} // else {
// return <span>{tag}</span>
// }
return <span><div>{data1} vs {data2}</div>
{tag}</span>
}
//数组去掉重复
export function unique(arr){
let x = new Set(arr);
return [...x];
}

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

@ -22,39 +22,115 @@ import * as config from "../config";
const Credit_card_bill = () => {
const {financial_store} = useContext(stores_Context);
const {financial_store, date_picker_store} = useContext(stores_Context);
const {bill_type_data, credit_card_data} = financial_store;
const format_data = ((data) => {
let result = {dataSource: [], columns: []}
if (!comm.empty(data)) {
result.columns = [
{
title: '项目',
children: [{
title: '',
dataIndex: 'cb_billtype',
}],
},
{
title: '美金',
children: [{title: data.BillTypeDataTotal1.cb_usd, dataIndex: 'cb_usd'}],
sorter: (a, b) => parseFloat(b.cb_usd.replace(/,/g, '')) - parseFloat(a.cb_usd.replace(/,/g, '')),
},
{
title: '人民币',
children: [{title: data.BillTypeDataTotal1.cb_rmb, dataIndex: 'cb_rmb'}],
sorter: (a, b) => parseFloat(b.cb_rmb.replace(/,/g, '')) - parseFloat(a.cb_rmb.replace(/,/g, '')),
},
]
result.dataSource = data.BillTypeData1;
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
let total_data1 = data.BillTypeDataTotal1;
let total_data2 = data.BillTypeDataTotal2;
result.columns = [
{
title: '项目类型',
children: [{
title: '',
dataIndex: 'cb_billtype',
render: (text, record) => <a onClick={() => {
credit_card_data.set_bill_filtered(text);//切换到明细页
credit_card_data.set_active_tab('detail_data');
}}>{text}</a>
}],
sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
},
{
title: '美金',
children: [{
title: comm.show_vs_tag(total_data1.usd_vs, total_data1.usd_diff, total_data1.cb_usd, total_data2.cb_usd),
dataIndex: 'cb_usd'
}],
},
{
title: '人民币',
children: [{
title: comm.show_vs_tag(total_data1.rmb_vs, total_data1.rmb_diff, total_data1.cb_rmb, total_data2.cb_rmb),
dataIndex: 'cb_rmb'
}],
},
];
for (let item of data.BillTypeData1) {
for (let item2 of data.BillTypeData2) {
if (item.cb_billtype == item2.cb_billtype) {
result.dataSource.push({
key: item.key,
cb_billtype: item.cb_billtype,
groups: item.groups,
cb_usd: comm.show_vs_tag(item.usd_vs, item.usd_diff, item.cb_usd, item2.cb_usd),
cb_rmb: comm.show_vs_tag(item.rmb_vs, item.rmb_diff, item.cb_rmb, item2.cb_rmb),
})
}
}
}
} else {
result.columns = [
{
title: '项目类型',
children: [{
title: '',
dataIndex: 'cb_billtype',
render: (text, record) => <a onClick={() => {
credit_card_data.set_bill_filtered(text);//切换到明细页
credit_card_data.set_active_tab('detail_data');
}}>{text}</a>
}],
sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
},
{
title: '美金',
children: [{title: data.BillTypeDataTotal1.cb_usd, dataIndex: 'cb_usd'}],
sorter: (a, b) => parseFloat(b.cb_usd.replace(/,/g, '')) - parseFloat(a.cb_usd.replace(/,/g, '')),
},
{
title: '人民币',
children: [{title: data.BillTypeDataTotal1.cb_rmb, dataIndex: 'cb_rmb'}],
sorter: (a, b) => parseFloat(b.cb_rmb.replace(/,/g, '')) - parseFloat(a.cb_rmb.replace(/,/g, '')),
},
]
result.dataSource = data.BillTypeData1;
}
}
return result;
})
const filters_array = (data_array) => {
return comm.unique(data_array).map(item => {
return {text: item, value: item}
});
}
const format_data_detail = ((data) => {
let result = {dataSource: [], columns: []}
if (!comm.empty(data)) {
let show_vs = false;
let usd_totle1, usd_totle2, usd_diff, usd_vs, rmb_totle1, rmb_totle2, rmb_diff, rmb_vs = 0;
usd_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0));
rmb_totle1 = Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0));
if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) { //有比较的数据
show_vs = true;
//计算汇总的变化
usd_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_usd, 0));
usd_diff = usd_totle1 - usd_totle2;
usd_vs = comm.formatPercent(usd_diff / usd_totle1);
rmb_totle2 = Math.round(data.billdate2.reduce((a, b) => a + b.cb_rmb, 0));
rmb_diff = rmb_totle1 - rmb_totle2;
rmb_vs = comm.formatPercent(rmb_diff / rmb_totle1);
}
if (show_vs) { //有比较的数据
result.dataSource.push(...data.billdate1, ...data.billdate2);
} else {
result.dataSource.push(...data.billdate1);
}
result.columns = [
{
title: '项目',
@ -62,15 +138,35 @@ const Credit_card_bill = () => {
title: '',
dataIndex: 'cb_bill',
}],
sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill),
},
{
title: '项目类型',
children: [{
title: '',
dataIndex: 'cb_billtype',
}],
sorter: (a, b) => a.cb_billtype.localeCompare(b.cb_billtype),
filters: filters_array(result.dataSource.map((item) => {
return item.cb_billtype
})),
filteredValue: credit_card_data.filteredValue || null,
onFilter: (value, record) => record.cb_billtype.indexOf(value) === 0,
},
{
title: '美金',
children: [{title: Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0)), dataIndex: 'cb_usd'}],
children: [{
title: show_vs ? comm.show_vs_tag(usd_vs, usd_diff, usd_totle1, usd_totle2) : usd_totle1,
dataIndex: 'cb_usd'
}],
sorter: (a, b) => b.cb_usd - a.cb_usd,
},
{
title: '人民币',
children: [{title: Math.round(data.billdate1.reduce((a, b) => a + b.cb_rmb, 0)), dataIndex: 'cb_rmb'}],
children: [{
title: show_vs ? comm.show_vs_tag(rmb_vs, rmb_diff, rmb_totle1, rmb_totle2) : rmb_totle1,
dataIndex: 'cb_rmb'
}],
sorter: (a, b) => b.cb_rmb - a.cb_rmb,
},
@ -85,15 +181,17 @@ const Credit_card_bill = () => {
{
title: '事业部',
children: [{title: '', dataIndex: 'cb_business_unit'}],
sorter: (a, b) => b.cb_business_unit - a.cb_business_unit,
sorter: (a, b) => a.cb_business_unit.localeCompare(b.cb_business_unit),
},
{
title: '小组',
children: [{title: '', dataIndex: 'cb_group'}],
sorter: (a, b) => a.cb_group.localeCompare(b.cb_group),
},
]
result.dataSource = data.billdate1;
}
return result;
})
@ -155,6 +253,7 @@ const Credit_card_bill = () => {
onClick={() => {
financial_store.get_credit_card_bills();
financial_store.get_credit_card_bills_by_type();
financial_store.set_bill_filtered(false);
}}>统计</Button>
</Col>
</Row>
@ -164,7 +263,7 @@ const Credit_card_bill = () => {
<Line {...line_config} />
</Col>
<Col className="gutter-row" span={24}>
<Tabs>
<Tabs activeKey={credit_card_data.active_tab} onChange={credit_card_data.set_active_tab}>
<Tabs.TabPane tab={<span><CarryOutOutlined/>项目汇总</span>} key="summarized_data">
<Table id="table_by_type" dataSource={credit_card_bills_by_type.dataSource}
columns={credit_card_bills_by_type.columns}
@ -180,6 +279,7 @@ const Credit_card_bill = () => {
<Table id="table_by_detail" dataSource={credit_card_bills.dataSource}
columns={credit_card_bills.columns}
pagination={false}
onChange={credit_card_data.set_table_handleChange}
size="small"/>
<Divider orientation="right"><a
onClick={() => {

Write Preview
Loading…
Cancel
Save