信用卡账单数据分析

src/config.js

@@ -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正式库

src/stores/AuthStore.js

@@ -9,7 +9,7 @@ class AuthStore {
     constructor(rootStore) {
         this.rootStore = rootStore;
         makeAutoObservable(this);
-        //this.get_auth();
+        this.get_auth();
     }
 
     auth = ['admin'];

src/stores/FinancialStore.js

@@ -40,6 +40,7 @@ class FinancialStore {
 
     credit_card_data = {
         data: [],
+        data_by_type: [],
         loading:false,
         bu_select_mode: false,
         business_units: ['ALL'],
@@ -77,6 +78,27 @@ class FinancialStore {
                 console.log('fetch data failed', error);
             });
     }
+
+    //请求信用卡账单
+    get_credit_card_bills_by_type() {
+        const date_picker_store = this.rootStore.date_picker_store;
+        let url = '/service-web/QueryData/GetCreditCardBillsByType';
+        url += `?business_unit=${this.credit_card_data.business_units.toString()}&groups=${this.credit_card_data.groups.toString()}`;
+        url += '&billdate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&billdate2=' + 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 += '&billdateOld1=' + date_picker_store.start_date_cp.format(config.DATE_FORMAT) + '&billdateOld2=' + 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.credit_card_data.data_by_type = json;
+                })
+            })
+            .catch((error) => {
+                console.log('fetch data failed', error);
+            });
+    }
 }
 
 

src/stores/OrdersStore.js

@@ -109,16 +109,6 @@ class OrdersStore {
             });
     }
 
-    show_vs_tag(vs, data1, data2) {
-        let tag = '-';
-        if (parseInt(vs) < 0) {
-            tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs}</Tag>
-        } else if (parseInt(vs) > 0) {
-            tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs}</Tag>
-        }
-        return <span><div>{data1} vs {data2}</div>
-            {tag}</span>
-    }
 
     //网站订单类型
     getOrderCountByType(order_type) {

src/utils/commons.js

@@ -1,18 +1,23 @@
 // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+import {Tag} from "antd";
+import {
+    CaretUpOutlined,
+    CaretDownOutlined
+} from '@ant-design/icons';
+
 if (!String.prototype.padStart) {
-    String.prototype.padStart = function padStart(targetLength,padString) {
-        targetLength = targetLength>>0; //floor if number or convert non-number to 0;
+    String.prototype.padStart = function padStart(targetLength, padString) {
+        targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
         padString = String((typeof padString !== 'undefined' ? padString : ' '));
         if (this.length > targetLength) {
             return String(this);
-        }
-        else {
-            targetLength = targetLength-this.length;
+        } else {
+            targetLength = targetLength - this.length;
             if (targetLength > padString.length) {
-                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
+                padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
             }
-            return padString.slice(0,targetLength) + String(this);
+            return padString.slice(0, targetLength) + String(this);
         }
     };
 }
@@ -28,21 +33,21 @@ export function named(value) {
 }
 
 export function formatCurrency(name) {
-  if (name === 'USD' ) {
-    return '$';
-  } else if (name === 'RMB') {
-    return '￥';
-  } else if (name === 'EUR') {
-    return '€'
-  } else if (name === 'GBP') {
-    return '£'
-  } else {
-    return name + ' ';
-  }
+    if (name === 'USD') {
+        return '$';
+    } else if (name === 'RMB') {
+        return '￥';
+    } else if (name === 'EUR') {
+        return '€'
+    } else if (name === 'GBP') {
+        return '£'
+    } else {
+        return name + ' ';
+    }
 }
 
 export function formatPrice(price) {
-  return Math.ceil(price).toLocaleString();
+    return Math.ceil(price).toLocaleString();
 }
 
 export function formatPercent(number) {
@@ -50,7 +55,9 @@ export function formatPercent(number) {
 }
 
 export function formatDate(date) {
-    if (isEmpty(date)) { return 'NaN'; }
+    if (isEmpty(date)) {
+        return 'NaN';
+    }
 
     const year = date.getFullYear();
     const month = date.getMonth() + 1;
@@ -170,8 +177,8 @@ export function debounce(fn, delay = 500) {
 
 export function throttle(fn, delay, atleast) {
     let timeout = null,
-    startTime = new Date();
-    return function() {
+        startTime = new Date();
+    return function () {
         let curTime = new Date();
         clearTimeout(timeout);
         if (curTime - startTime >= atleast) {
@@ -189,3 +196,16 @@ export function clickUrl(url) {
     httpLink.target = '_blank';
     httpLink.click();
 }
+
+export function show_vs_tag(vs, data1, data2) {
+    let tag = '-';
+    if (parseInt(vs) < 0) {
+        tag = <Tag icon={<CaretDownOutlined/>} color="gold">{vs}</Tag>
+    } else if (parseInt(vs) > 0) {
+        tag = <Tag icon={< CaretUpOutlined/>} color="lime">{vs}</Tag>
+    } // else {
+    //     return <span>{tag}</span>
+    // }
+    return <span><div>{data1} vs {data2}</div>
+        {tag}</span>
+}

src/views/Credit_card_bill.js

@@ -1,12 +1,13 @@
 import React, {Component, useContext} from 'react';
 import {observer} from 'mobx-react';
-import {Row, Col, Button, Tabs, Table} from 'antd';
+import {Row, Col, Button, Tabs, Table, Divider} from 'antd';
 import {stores_Context} from '../config'
-import {useNavigate} from "react-router-dom";
+import {utils, writeFileXLSX} from "xlsx";
+import {NavLink, useNavigate} from "react-router-dom";
 import {
     SlackOutlined,
-    SketchOutlined,
-    AntCloudOutlined,
+    ContainerOutlined,
+    CarryOutOutlined,
     SearchOutlined,
     GithubOutlined
 } from '@ant-design/icons';
@@ -15,15 +16,92 @@ import GroupSelect from '../charts/GroupSelect'
 import Business_unit from '../charts/Business_unit'
 import DatePickerCharts from '../charts/DatePickerCharts'
 import {Line} from "@ant-design/charts";
-import * as com from '../utils/commons'
+import * as comm from '../utils/commons'
+import * as config from "../config";
+
 
 const Credit_card_bill = () => {
 
     const {financial_store} = useContext(stores_Context);
     const {bill_type_data, credit_card_data} = financial_store;
-    const data_source = !com.empty(credit_card_data.data) ? credit_card_data.data.billdate1 : [];
+
+    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;
+        }
+        return result;
+    })
+
+    const format_data_detail = ((data) => {
+        let result = {dataSource: [], columns: []}
+        if (!comm.empty(data)) {
+            result.columns = [
+                {
+                    title: '项目',
+                    children: [{
+                        title: '',
+                        dataIndex: 'cb_bill',
+                    }],
+                },
+                {
+                    title: '美金',
+                    children: [{title: Math.round(data.billdate1.reduce((a, b) => a + b.cb_usd, 0)), 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'}],
+                    sorter: (a, b) => b.cb_rmb - a.cb_rmb,
+                },
+
+                {
+                    title: '交易日期',
+                    children: [{title: '', dataIndex: 'cb_datetime'}],
+                },
+                {
+                    title: '账期',
+                    children: [{title: '', dataIndex: 'cb_billdate'}],
+                },
+                {
+                    title: '事业部',
+                    children: [{title: '', dataIndex: 'cb_business_unit'}],
+                    sorter: (a, b) => b.cb_business_unit - a.cb_business_unit,
+                },
+                {
+                    title: '小组',
+                    children: [{title: '', dataIndex: 'cb_group'}],
+                },
+            ]
+            result.dataSource = data.billdate1;
+        }
+        return result;
+    })
+
+    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: data_source,
+        data: credit_card_bills.dataSource,
         padding: 'auto',
         xField: 'cb_datetime',
         yField: 'cb_usd',
@@ -39,7 +117,7 @@ const Credit_card_bill = () => {
         legend: {
             itemValue: {
                 formatter: (text, item) => {
-                    const items = data_source.filter((d) => d.groups === item.value);//按站点筛选
+                    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)) : '';//计算总数
                 },
             },
@@ -76,6 +154,7 @@ const Credit_card_bill = () => {
                     <Button type="primary" icon={<SearchOutlined/>} size='large' loading={credit_card_data.loading}
                             onClick={() => {
                                 financial_store.get_credit_card_bills();
+                                financial_store.get_credit_card_bills_by_type();
                             }}>统计</Button>
                 </Col>
             </Row>
@@ -84,6 +163,32 @@ const Credit_card_bill = () => {
                 <Col span={24}>
                     <Line {...line_config} />
                 </Col>
+                <Col className="gutter-row" span={24}>
+                    <Tabs>
+                        <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}
+                                   pagination={false}
+                                   size="small"/>
+                            <Divider orientation="right"><a
+                                onClick={() => {
+                                    const wb = utils.table_to_book(document.getElementById("table_by_type").getElementsByTagName('table')[0]);
+                                    writeFileXLSX(wb, "项目汇总.xlsx");
+                                }}>导出excel</a></Divider>
+                        </Tabs.TabPane>
+                        <Tabs.TabPane tab={<span><ContainerOutlined/>明细</span>} key="detail_data">
+                            <Table id="table_by_detail" dataSource={credit_card_bills.dataSource}
+                                   columns={credit_card_bills.columns}
+                                   pagination={false}
+                                   size="small"/>
+                            <Divider orientation="right"><a
+                                onClick={() => {
+                                    const wb = utils.table_to_book(document.getElementById("table_by_detail").getElementsByTagName('table')[0]);
+                                    writeFileXLSX(wb, "明细.xlsx");
+                                }}>导出excel</a></Divider>
+                        </Tabs.TabPane>
+                    </Tabs>
+                </Col>
             </Row>
         </div>
     );

src/views/Orders.js

@@ -49,35 +49,35 @@ class Orders extends Component {
                     {
                         title: '数量',
                         children: [{
-                            title: orders_store.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
+                            title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
                             dataIndex: 'OrderCount'
                         }],
                     },
                     {
                         title: '成交数',
                         children: [{
-                            title: orders_store.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
+                            title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
                             dataIndex: 'CJCount'
                         }],
                     },
                     {
                         title: '成交人数',
                         children: [{
-                            title: orders_store.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
+                            title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
                             dataIndex: 'CJPersonNum'
                         }],
                     },
                     {
                         title: '成交率',
                         children: [{
-                            title: orders_store.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
+                            title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
                             dataIndex: 'CJrate'
                         }],
                     },
                     {
                         title: '成交毛利（预计）',
                         children: [{
-                            title: orders_store.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
+                            title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
                             dataIndex: 'YJLY'
                         }],
                     },
@@ -85,7 +85,7 @@ class Orders extends Component {
                     {
                         title: '单个订单价值',
                         children: [{
-                            title: orders_store.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
+                            title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
                             dataIndex: 'Ordervalue'
                         }],
                     },
@@ -97,12 +97,12 @@ class Orders extends Component {
                                 key:item.key,
                                 OrderType: item.OrderType,
                                 OrderTypeSN: item.OrderTypeSN,
-                                OrderCount: orders_store.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount),
-                                CJCount: orders_store.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount),
-                                CJPersonNum: orders_store.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum),
-                                CJrate: orders_store.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate),
-                                YJLY: orders_store.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY),
-                                Ordervalue: orders_store.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue),
+                                OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount, item2.OrderCount),
+                                CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount, item2.CJCount),
+                                CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum, item2.CJPersonNum),
+                                CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate, item2.CJrate),
+                                YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY, item2.YJLY),
+                                Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue, item2.Ordervalue),
                             })
                         }
                     }
@@ -218,7 +218,7 @@ class Orders extends Component {
                         <Line {...config} />
                     </Col>
 
-                    <Col className="gutter-row" span={24}>
+                    <Col span={24}>
                         <Tabs activeKey={orders_store.active_tab_key}
                               onChange={(active_key) => orders_store.onChange_Tabs(active_key)}>
                             <Tabs.TabPane tab={<span><ContainerOutlined/>来源类型</span>} key="Form">