From 11b1e4be7fa0d49f946a3ddad4b9d75b5d93ad6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= Date: Mon, 26 Sep 2022 17:05:23 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BF=A1=E7=94=A8=E5=8D=A1=E8=B4=A6?= =?UTF-8?q?=E5=8D=95=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.js | 4 +- src/stores/AuthStore.js | 2 +- src/stores/FinancialStore.js | 22 +++++++ src/stores/OrdersStore.js | 10 --- src/utils/commons.js | 66 ++++++++++++------- src/views/Credit_card_bill.js | 121 +++++++++++++++++++++++++++++++--- src/views/Orders.js | 26 ++++---- 7 files changed, 194 insertions(+), 57 deletions(-) diff --git a/src/config.js b/src/config.js index 5d3c28c..a07dcf8 100644 --- a/src/config.js +++ b/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正式库 \ No newline at end of file +export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn'; +//export const HT_HOST = 'http://202.103.68.100:890';//889正式库 \ No newline at end of file diff --git a/src/stores/AuthStore.js b/src/stores/AuthStore.js index 9c093ad..d2a9244 100644 --- a/src/stores/AuthStore.js +++ b/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']; diff --git a/src/stores/FinancialStore.js b/src/stores/FinancialStore.js index 1d6f320..4ac9734 100644 --- a/src/stores/FinancialStore.js +++ b/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); + }); + } } diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index 3467dc3..c2d3bd4 100644 --- a/src/stores/OrdersStore.js +++ b/src/stores/OrdersStore.js @@ -109,16 +109,6 @@ class OrdersStore { }); } - show_vs_tag(vs, data1, data2) { - let tag = '-'; - if (parseInt(vs) < 0) { - tag = } color="gold">{vs} - } else if (parseInt(vs) > 0) { - tag = } color="lime">{vs} - } - return
{data1} vs {data2}
- {tag} - } //网站订单类型 getOrderCountByType(order_type) { diff --git a/src/utils/commons.js b/src/utils/commons.js index b9b9c59..4966697 100644 --- a/src/utils/commons.js +++ b/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; @@ -60,7 +67,7 @@ export function formatDate(date) { const dayStr = ('' + day).padStart(2, 0); const formatted = year + '-' + monthStr + '-' + dayStr; - return formatted; + return formatted; } export function formatTime(date) { @@ -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) { @@ -188,4 +195,17 @@ export function clickUrl(url) { httpLink.href = url; httpLink.target = '_blank'; httpLink.click(); +} + +export function show_vs_tag(vs, data1, data2) { + let tag = '-'; + if (parseInt(vs) < 0) { + tag = } color="gold">{vs} + } else if (parseInt(vs) > 0) { + tag = } color="lime">{vs} + } // else { + // return {tag} + // } + return
{data1} vs {data2}
+ {tag} } \ No newline at end of file diff --git a/src/views/Credit_card_bill.js b/src/views/Credit_card_bill.js index 7ce23d6..1663b78 100644 --- a/src/views/Credit_card_bill.js +++ b/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 = () => { @@ -84,6 +163,32 @@ const Credit_card_bill = () => { + + + 项目汇总} key="summarized_data"> + + { + const wb = utils.table_to_book(document.getElementById("table_by_type").getElementsByTagName('table')[0]); + writeFileXLSX(wb, "项目汇总.xlsx"); + }}>导出excel + + 明细} key="detail_data"> +
+ { + const wb = utils.table_to_book(document.getElementById("table_by_detail").getElementsByTagName('table')[0]); + writeFileXLSX(wb, "明细.xlsx"); + }}>导出excel + + + ); diff --git a/src/views/Orders.js b/src/views/Orders.js index 9bb1946..dd377df 100644 --- a/src/views/Orders.js +++ b/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 { - + orders_store.onChange_Tabs(active_key)}> 来源类型} key="Form"> From b2fb6822a2b3364806957b6c1c450954d053cbc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= Date: Tue, 27 Sep 2022 16:46:10 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=A1=E7=94=A8=E5=8D=A1=E8=B4=A6?= =?UTF-8?q?=E5=8D=95=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90,=E6=8A=98?= =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E3=80=81=E6=98=8E=E7=BB=86=E3=80=81=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=B1=BB=E5=9E=8B=E7=BB=9F=E8=AE=A1=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/AuthStore.js | 6 +- src/stores/FinancialStore.js | 29 ++++++- src/utils/commons.js | 12 ++- src/views/Credit_card_bill.js | 152 ++++++++++++++++++++++++++++------ 4 files changed, 166 insertions(+), 33 deletions(-) diff --git a/src/stores/AuthStore.js b/src/stores/AuthStore.js index d2a9244..7b44fcb 100644 --- a/src/stores/AuthStore.js +++ b/src/stores/AuthStore.js @@ -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) { diff --git a/src/stores/FinancialStore.js b/src/stores/FinancialStore.js index 4ac9734..245ff2d 100644 --- a/src/stores/FinancialStore.js +++ b/src/stores/FinancialStore.js @@ -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) { diff --git a/src/utils/commons.js b/src/utils/commons.js index 4966697..7449ae4 100644 --- a/src/utils/commons.js +++ b/src/utils/commons.js @@ -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 = } color="gold">{vs} + tag = } color="gold">{vs} {vs_diff} } else if (parseInt(vs) > 0) { - tag = } color="lime">{vs} + tag = } color="lime">{vs} {vs_diff} } // else { // return {tag} // } return
{data1} vs {data2}
{tag} +} + +//数组去掉重复 +export function unique(arr){ + let x = new Set(arr); + return [...x]; } \ No newline at end of file diff --git a/src/views/Credit_card_bill.js b/src/views/Credit_card_bill.js index 1663b78..9206bcd 100644 --- a/src/views/Credit_card_bill.js +++ b/src/views/Credit_card_bill.js @@ -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) => { + credit_card_data.set_bill_filtered(text);//切换到明细页 + credit_card_data.set_active_tab('detail_data'); + }}>{text} + }], + 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) => { + credit_card_data.set_bill_filtered(text);//切换到明细页 + credit_card_data.set_active_tab('detail_data'); + }}>{text} + }], + 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); }}>统计 @@ -164,7 +263,7 @@ const Credit_card_bill = () => { - + 项目汇总} key="summarized_data">
{
{ From 22778bd78e346890f96ffc10b8c04c1743b7354d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= Date: Fri, 30 Sep 2022 12:04:07 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=B9=B3=E5=9D=87?= =?UTF-8?q?=E7=BA=BF=20=E6=98=BE=E7=A4=BA=E5=91=A8=E5=87=A0=20=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E8=AF=A6=E6=83=85=E6=B7=BB=E5=8A=A0=E6=98=AF=E5=90=A6?= =?UTF-8?q?=E6=88=90=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 4 +- src/stores/AuthStore.js | 2 +- src/stores/OrdersStore.js | 6 ++- src/utils/commons.js | 34 +++++++++++++--- src/views/Credit_card_bill.js | 20 +++++----- src/views/Orders.js | 75 ++++++++++++++++++++++++----------- src/views/Orders_sub.js | 34 ++++++++++++++-- 7 files changed, 126 insertions(+), 49 deletions(-) diff --git a/public/index.html b/public/index.html index 2b0b7a3..637312a 100644 --- a/public/index.html +++ b/public/index.html @@ -24,9 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App - - + Hainatravel Dashboard diff --git a/src/stores/AuthStore.js b/src/stores/AuthStore.js index 7b44fcb..d5f70ce 100644 --- a/src/stores/AuthStore.js +++ b/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']; //开发时候用，正式环境留空 diff --git a/src/stores/OrdersStore.js b/src/stores/OrdersStore.js index c2d3bd4..f2ec8f4 100644 --- a/src/stores/OrdersStore.js +++ b/src/stores/OrdersStore.js @@ -8,7 +8,6 @@ import * as config from "../config"; import moment from "moment"; import {NavLink} from "react-router-dom"; - class OrdersStore { constructor(rootStore) { @@ -50,7 +49,10 @@ class OrdersStore { }) } if (data_source.ordercount2 && end_date) { - let diff_days = start_date.diff(end_date, 'days'); + //不能直接用diff计算，因为日期是含有时间的，会导致计算差一天，先转成格式化的日期再比较 + let _start_date=moment(start_date.format(config.DATE_FORMAT)); + let _end_date=moment(end_date.format(config.DATE_FORMAT)); + let diff_days = _start_date.diff(_end_date, 'days'); for (let item of data_source.ordercount2) { result.push({ 'xField': moment(item.ApplyDate).add(diff_days, 'days').format(config.DATE_FORMAT), diff --git a/src/utils/commons.js b/src/utils/commons.js index 7449ae4..f501970 100644 --- a/src/utils/commons.js +++ b/src/utils/commons.js @@ -5,6 +5,7 @@ import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; +import moment from "moment"; if (!String.prototype.padStart) { String.prototype.padStart = function padStart(targetLength, padString) { @@ -197,21 +198,42 @@ export function clickUrl(url) { httpLink.click(); } -export function show_vs_tag(vs,vs_diff, data1, data2) { +export function show_vs_tag(vs, vs_diff, data1, data2) { let tag = '-'; if (parseInt(vs) < 0) { tag = } color="gold">{vs} {vs_diff} } else if (parseInt(vs) > 0) { tag = } color="lime">{vs} {vs_diff} - } // else { - // return {tag} - // } + }// else { + // tag = } color="lime">{vs} {vs_diff} + // } return
{data1} vs {data2}
{tag} } //数组去掉重复 -export function unique(arr){ +export function unique(arr) { let x = new Set(arr); return [...x]; -} \ No newline at end of file +} + +export function getWeek (date) { // 参数时间戳 + let week = moment(date).day(); + switch (week) { + case 1: + return '周一' + case 2: + return '周二' + case 3: + return '周三' + case 4: + return '周四' + case 5: + return '周五' + case 6: + return '周六' + case 0: + return '周日' + } +} + diff --git a/src/views/Credit_card_bill.js b/src/views/Credit_card_bill.js index 9206bcd..1b95e4d 100644 --- a/src/views/Credit_card_bill.js +++ b/src/views/Credit_card_bill.js @@ -132,14 +132,6 @@ const Credit_card_bill = () => { result.dataSource.push(...data.billdate1); } result.columns = [ - { - title: '项目', - children: [{ - title: '', - dataIndex: 'cb_bill', - }], - sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill), - }, { title: '项目类型', children: [{ @@ -153,6 +145,14 @@ const Credit_card_bill = () => { filteredValue: credit_card_data.filteredValue || null, onFilter: (value, record) => record.cb_billtype.indexOf(value) === 0, }, + { + title: '项目', + children: [{ + title: '', + dataIndex: 'cb_bill', + }], + sorter: (a, b) => a.cb_bill.localeCompare(b.cb_bill), + }, { title: '美金', children: [{ @@ -237,10 +237,10 @@ const Credit_card_bill = () => { - + - + {/**/} diff --git a/src/views/Orders.js b/src/views/Orders.js index dd377df..51ca871 100644 --- a/src/views/Orders.js +++ b/src/views/Orders.js @@ -1,7 +1,7 @@ import React, {Component} from 'react'; import {Row, Col, Button, Tabs, Table} from 'antd'; import { - ContainerOutlined, CarryOutOutlined,BlockOutlined, + ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, } from '@ant-design/icons'; @@ -49,35 +49,35 @@ class Orders extends Component { { title: '数量', children: [{ - title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), + title: comm.show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount), dataIndex: 'OrderCount' }], }, { title: '成交数', children: [{ - title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount, ordercountTotal2.CJCount), + title: comm.show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount), dataIndex: 'CJCount' }], }, { title: '成交人数', children: [{ - title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), + title: comm.show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum), dataIndex: 'CJPersonNum' }], }, { title: '成交率', children: [{ - title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate, ordercountTotal2.CJrate), + title: comm.show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate), dataIndex: 'CJrate' }], }, { title: '成交毛利（预计）', children: [{ - title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY, ordercountTotal2.YJLY), + title: comm.show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY), dataIndex: 'YJLY' }], }, @@ -85,7 +85,7 @@ class Orders extends Component { { title: '单个订单价值', children: [{ - title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), + title: comm.show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue), dataIndex: 'Ordervalue' }], }, @@ -94,15 +94,15 @@ class Orders extends Component { for (let item2 of data.ordercount2) { if (item.OrderType == item2.OrderType) { result.dataSource.push({ - key:item.key, + key: item.key, OrderType: item.OrderType, OrderTypeSN: item.OrderTypeSN, - 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), + OrderCount: comm.show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount), + CJCount: comm.show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount), + CJPersonNum: comm.show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum), + CJrate: comm.show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate), + YJLY: comm.show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY), + Ordervalue: comm.show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue), }) } } @@ -160,8 +160,8 @@ class Orders extends Component { render() { const {orders_store} = this.context; 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 config = { data: data_source, padding: 'auto', @@ -175,6 +175,27 @@ class Orders extends Component { size: 4, shape: 'cicle', }, + annotations: [ + { + type: 'text', + position: ['start', avg_line_y], + content: avg_line_y, + offsetX: -15, + style: { + fill: '#F4664A', + textBaseline: 'bottom', + } + }, + { + type: 'line', + start: [-10, avg_line_y], + end: ['max', avg_line_y], + style: { + stroke: '#F4664A', + lineDash: [2, 2], + }, + }, + ], label: {},//显示标签 legend: { itemValue: { @@ -184,12 +205,15 @@ class Orders extends Component { }, }, }, - // tooltip: { - // customContent: (title, items) => { - // const data = items[0]?.data || {}; - // return `
${title}
${data.seriesField} ${data.yField}
`; - // } - // }, + tooltip: { + // customContent: (title, items) => { + // const data = items[0]?.data || {}; + // return `
${title}
${data.seriesField} ${data.yField}
`; + // } + title: (title, datum) => { + return title+' '+ comm.getWeek(datum.xField);//显示周几 + }, + }, smooth: true, }; @@ -236,7 +260,7 @@ class Orders extends Component { 目的地} key="city">
- 页面类型} key="LineClass"> + 页面类型} key="LineClass">
@@ -246,6 +270,9 @@ class Orders extends Component { ); } -} + } + + export + default -export default observer(Orders); + observer(Orders); diff --git a/src/views/Orders_sub.js b/src/views/Orders_sub.js index 9d3a8a3..eff9a00 100644 --- a/src/views/Orders_sub.js +++ b/src/views/Orders_sub.js @@ -24,6 +24,7 @@ const Orders_sub = () => { }, []) const data_source = orders_store.orderCountData_type; + const avg_line_y = data_source.length ? Math.round((data_source.reduce((a, b) => a + b.yField, 0)) / data_source.length) : 0;//平均值，显示一条平均线 const line = { data: data_source, padding: 'auto', @@ -33,6 +34,32 @@ const Orders_sub = () => { xAxis: { type: 'timeCat', }, + annotations: [ + { + type: 'text', + position: ['start', avg_line_y], + content: avg_line_y, + offsetX: -15, + style: { + fill: '#F4664A', + textBaseline: 'bottom', + } + }, + { + type: 'line', + start: [-10, avg_line_y], + end: ['max', avg_line_y], + style: { + stroke: '#F4664A', + lineDash: [2, 2], + }, + }, + ], + tooltip: { + title: (title, datum) => { + return title+' '+ comm.getWeek(datum.xField);//显示周几 + }, + }, label: {},//显示标签 legend: { title: { @@ -87,9 +114,10 @@ const Orders_sub = () => { key: 'COLI_WebCode', }, { - title: 'IP', - dataIndex: 'COLI_SenderIP', - key: 'COLI_SenderIP', + title: '成行', + dataIndex: 'COLI_Success', + key: 'COLI_Success', + render: (text, record) => {text == 1 ? '是' : '否'}, }, { title: '预定时间',