Merge branch 'feature/V2-薪酬统计分析' into develop
This commit is contained in:
commit
0323aa6a7c
|
|
@ -54,3 +54,15 @@ export const reportStatisticsItemDelete = (params) => {
|
|||
export const reportStatisticsGetSearchCondition = (params) => {
|
||||
return WeaTools.callApi("/api/bs/hrmsalary/report/statistics/report/getSearchCondition", "GET", params);
|
||||
};
|
||||
//分析图数据展示范围设置查询
|
||||
export const queryRangeSetting = (params) => {
|
||||
return WeaTools.callApi("/api/bs/hrmsalary/report/statistics/echarts/queryRangeSetting", "GET", params);
|
||||
};
|
||||
//分析图数据展示范围设置删除
|
||||
export const deleteRangeSetting = (params) => {
|
||||
return WeaTools.callApi("/api/bs/hrmsalary/report/statistics/echarts/deleteRangeSetting", "GET", params);
|
||||
};
|
||||
//分析图数据展示范围设置保存
|
||||
export const saveRangeSetting = (params) => {
|
||||
return postFetch("/api/bs/hrmsalary/report/statistics/echarts/saveRangeSetting", params);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="151px" height="150px" viewBox="0 0 151 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Icon-empty-file</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0 -0.0002 149.9997 -0.0002 149.9997 31.9998 0 31.9998"></polygon>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="知识文档" transform="translate(-112.000000, -299.000000)">
|
||||
<g id="Group-40" transform="translate(113.000000, 321.000000)">
|
||||
<g id="Group-3" transform="translate(0.000000, 89.259000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-2"></g>
|
||||
<path d="M149.9997,15.9998 C149.9997,24.8368 116.4217,31.9998 74.9997,31.9998 C33.5787,31.9998 -0.0003,24.8368 -0.0003,15.9998 C-0.0003,7.1638 33.5787,-0.0002 74.9997,-0.0002 C116.4217,-0.0002 149.9997,7.1638 149.9997,15.9998" id="Fill-1" fill="#E6EFF0" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
<line x1="116.8337" y1="5.1465" x2="127.1277" y2="5.1465" id="Stroke-4" stroke="#D3D7DC"></line>
|
||||
<line x1="121.9801" y1="0" x2="121.9801" y2="10.294" id="Stroke-6" stroke="#D3D7DC"></line>
|
||||
<line x1="127.1276" y1="39.0801" x2="133.1026" y2="39.0801" id="Stroke-8" stroke="#D3D7DC"></line>
|
||||
<line x1="130.1149" y1="36.0928" x2="130.1149" y2="42.0678" id="Stroke-10" stroke="#D3D7DC"></line>
|
||||
<line x1="17.9655" y1="38.4541" x2="25.1085" y2="38.4541" id="Stroke-12" stroke="#D3D7DC"></line>
|
||||
<line x1="21.5368" y1="34.8828" x2="21.5368" y2="42.0248" id="Stroke-14" stroke="#D3D7DC"></line>
|
||||
<polygon id="Fill-16" fill="#FFFFFF" points="113.029 23.0694 99.885 10.2944 99.091 11.2664 98.32 17.1834 97.716 21.4544 100.529 24.2664 106.842 25.3914 110.675 25.0164 112.842 24.2874"></polygon>
|
||||
<polygon id="Stroke-18" stroke="#CFD0D6" stroke-linecap="round" stroke-linejoin="round" points="113.029 23.0694 99.885 10.2944 99.091 11.2664 98.32 17.1834 97.716 21.4544 100.529 24.2664 106.842 25.3914 110.675 25.0164 112.842 24.2874"></polygon>
|
||||
<path d="M96.6842,106.4366 L42.9702,106.4366 C39.6702,106.4366 36.9702,103.7376 36.9702,100.4366 L36.9702,26.3016 C36.9702,23.0006 39.6702,20.3016 42.9702,20.3016 L96.6842,20.3016 C99.9842,20.3016 102.6842,23.0006 102.6842,26.3016 L102.6842,100.4366 C102.6842,103.7376 99.9842,106.4366 96.6842,106.4366" id="Fill-20" fill="#FFFFFF"></path>
|
||||
<path d="M96.6842,106.4366 L42.9702,106.4366 C39.6702,106.4366 36.9702,103.7376 36.9702,100.4366 L36.9702,26.3016 C36.9702,23.0006 39.6702,20.3016 42.9702,20.3016 L96.6842,20.3016 C99.9842,20.3016 102.6842,23.0006 102.6842,26.3016 L102.6842,100.4366 C102.6842,103.7376 99.9842,106.4366 96.6842,106.4366 Z" id="Stroke-22" stroke="#CFD0D6"></path>
|
||||
<path d="M105.3727,23.5244 C102.1367,23.5244 99.4877,20.8764 99.4877,17.6394 L99.4877,10.2944 L53.2007,10.2944 C49.9637,10.2944 47.3157,12.9424 47.3157,16.1784 L47.3157,90.5454 C47.3157,93.7814 49.9637,96.4294 53.2007,96.4294 L107.1437,96.4294 C110.3817,96.4294 113.0287,93.7814 113.0287,90.5454 L113.0287,23.5244 L105.3727,23.5244 Z" id="Fill-24" fill="#FFFFFF"></path>
|
||||
<path d="M105.3727,23.5244 C102.1367,23.5244 99.4877,20.8764 99.4877,17.6394 L99.4877,10.2944 L53.2007,10.2944 C49.9637,10.2944 47.3157,12.9424 47.3157,16.1784 L47.3157,90.5454 C47.3157,93.7814 49.9637,96.4294 53.2007,96.4294 L107.1437,96.4294 C110.3817,96.4294 113.0287,93.7814 113.0287,90.5454 L113.0287,23.5244 L105.3727,23.5244 Z" id="Stroke-26" stroke="#CFD0D6"></path>
|
||||
<path d="M99.987,36.3116 L60.319,36.3116 C58.944,36.3116 57.819,35.1866 57.819,33.8116 C57.819,32.4366 58.944,31.3116 60.319,31.3116 L99.987,31.3116 C101.362,31.3116 102.487,32.4366 102.487,33.8116 C102.487,35.1866 101.362,36.3116 99.987,36.3116" id="Fill-28" fill="#E9E9E9"></path>
|
||||
<path d="M99.987,48.2158 L60.319,48.2158 C58.944,48.2158 57.819,47.0908 57.819,45.7158 C57.819,44.3408 58.944,43.2158 60.319,43.2158 L99.987,43.2158 C101.362,43.2158 102.487,44.3408 102.487,45.7158 C102.487,47.0908 101.362,48.2158 99.987,48.2158" id="Fill-30" fill="#E9E9E9"></path>
|
||||
<path d="M99.987,60.1192 L60.319,60.1192 C58.944,60.1192 57.819,58.9942 57.819,57.6192 C57.819,56.2442 58.944,55.1192 60.319,55.1192 L99.987,55.1192 C101.362,55.1192 102.487,56.2442 102.487,57.6192 C102.487,58.9942 101.362,60.1192 99.987,60.1192" id="Fill-32" fill="#E9E9E9"></path>
|
||||
<path d="M84.529,72.0235 L60.319,72.0235 C58.944,72.0235 57.819,70.8985 57.819,69.5235 C57.819,68.1485 58.944,67.0235 60.319,67.0235 L84.529,67.0235 C85.904,67.0235 87.029,68.1485 87.029,69.5235 C87.029,70.8985 85.904,72.0235 84.529,72.0235" id="Fill-34" fill="#E9E9E9"></path>
|
||||
<path d="M49.4841,92.169 L49.4651,12.311 C48.4411,13.349 47.8191,14.441 47.8191,16.439 L47.8191,90.587 C47.8191,92.703 49.0641,94.436 50.7221,95.325 C50.0211,94.344 49.4841,93.459 49.4841,92.169" id="Fill-36" fill="#EBF6FF"></path>
|
||||
<path d="M39.1335,102.1446 L39.1965,22.3046 C38.1725,23.3426 37.4685,24.4166 37.4685,26.4146 L37.4685,100.5626 C37.4685,102.6786 38.7435,104.4116 40.4025,105.3006 C39.7005,104.3196 39.1335,103.4346 39.1335,102.1446" id="Fill-38" fill="#EBF6FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -212,8 +212,9 @@ class Index extends Component {
|
|||
...modalReq, visible: false, id: ""
|
||||
}
|
||||
}, () => {
|
||||
const { selectedKey, reportName } = this.state;
|
||||
const { selectedKey, reportName, modalReq: { typeKey } } = this.state;
|
||||
selectedKey === "statistics" && reportForm.resetForm();
|
||||
typeKey === "dimension" && this.initReportFormCondition();
|
||||
refresh && selectedKey === "statistics" && this.reportListRef.reportStatisticsReportList({ reportName });
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,405 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 分析图标范围数据设置弹框
|
||||
* Description:
|
||||
* Date: 2023/5/11
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { Button, Col, message, Row } from "antd";
|
||||
import {
|
||||
WeaDialog,
|
||||
WeaError,
|
||||
WeaFormItem,
|
||||
WeaHelpfulTip,
|
||||
WeaInputNumber,
|
||||
WeaLocaleProvider,
|
||||
WeaReqTop,
|
||||
WeaSearchGroup,
|
||||
WeaSelect
|
||||
} from "ecCom";
|
||||
import { saveRangeSetting } from "../../../apis/statistics";
|
||||
import "./index.less";
|
||||
|
||||
const { getLabel } = WeaLocaleProvider;
|
||||
|
||||
class ChartsRangeSettingsModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
selectedKey: "1",
|
||||
rangeSetting: {
|
||||
itemValues: "",
|
||||
itemColValue: "",
|
||||
dimensionRange: "0"
|
||||
},
|
||||
rangeSettingExtra: {
|
||||
itemSortValue: "",
|
||||
itemColSortValue: "",
|
||||
sortType: "0",
|
||||
sortNum: ""
|
||||
},
|
||||
statisticalItemsOptions: [],
|
||||
statisticalColsOptions: [],
|
||||
rangeSettingExtraOptions: {
|
||||
sortStatisticsOptions: [],
|
||||
sortColumnsOptions: []
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.visible !== this.props.visible && nextProps.visible) {
|
||||
const { columns } = nextProps;
|
||||
this.setState({
|
||||
statisticalItemsOptions: _.map(_.filter(columns, item => !_.isEmpty(item.children)), it => ({
|
||||
key: it.column, showname: it.text,
|
||||
children: _.map(it.children, child => ({ key: child.column, showname: child.text }))
|
||||
}))
|
||||
});
|
||||
}
|
||||
if (nextProps.rangeVal !== this.props.rangeVal && nextProps.rangeVal) {
|
||||
const { rangeVal } = nextProps;
|
||||
const { rangeSetting, rangeSettingExtra } = this.state;
|
||||
this.setState({
|
||||
rangeSetting: {
|
||||
...rangeSetting,
|
||||
..._.reduce(Object.keys(rangeSetting), (pre, cur) => {
|
||||
return {
|
||||
...pre,
|
||||
[cur]: Array.isArray(rangeVal[cur]) ? rangeVal[cur].join(",") :
|
||||
!_.isNil(rangeVal[cur]) ? rangeVal[cur].toString() : cur === "dimensionRange" ? "0" : ""
|
||||
};
|
||||
}, {})
|
||||
},
|
||||
rangeSettingExtra: {
|
||||
...rangeSettingExtra,
|
||||
..._.reduce(Object.keys(rangeSettingExtra), (pre, cur) => {
|
||||
return {
|
||||
...pre,
|
||||
[cur]: !_.isNil(rangeVal[cur]) ? rangeVal[cur].toString() : cur === "sortType" ? "0" : ""
|
||||
};
|
||||
}, {})
|
||||
}
|
||||
}, () => {
|
||||
const { statisticalItemsOptions } = this.state;
|
||||
const { itemValues, itemSortValue } = rangeVal;
|
||||
let statisticalColsOptions = [], sortStatisticsOptions = [];
|
||||
_.forEach(itemValues, item => {
|
||||
_.forEach(statisticalItemsOptions, child => {
|
||||
if (item === child.key) {
|
||||
statisticalColsOptions = [...statisticalColsOptions, ...child.children];
|
||||
sortStatisticsOptions = [...sortStatisticsOptions, child];
|
||||
}
|
||||
});
|
||||
});
|
||||
this.setState({
|
||||
statisticalColsOptions,
|
||||
rangeSettingExtraOptions: {
|
||||
sortStatisticsOptions
|
||||
}
|
||||
}, () => {
|
||||
const { rangeSettingExtraOptions } = this.state;
|
||||
const { sortStatisticsOptions } = rangeSettingExtraOptions;
|
||||
this.setState({
|
||||
rangeSettingExtraOptions: {
|
||||
...rangeSettingExtraOptions,
|
||||
sortColumnsOptions: !_.isEmpty(_.find(sortStatisticsOptions, it => it.key === itemSortValue)) ? _.find(sortStatisticsOptions, it => it.key === itemSortValue).children : []
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleSaveChartsRangeSettings = () => {
|
||||
const { reportId, rangeVal } = this.props;
|
||||
const { rangeSetting, rangeSettingExtra, selectedKey: chartsType } = this.state;
|
||||
const { itemValues, itemColValue, dimensionRange } = rangeSetting;
|
||||
if (!itemColValue && !itemValues) {
|
||||
this.refs.itemValues.showError();
|
||||
this.refs.itemColValue.showError();
|
||||
return;
|
||||
}
|
||||
if (!itemValues) {
|
||||
this.refs.itemValues.showError();
|
||||
return;
|
||||
}
|
||||
if (!itemColValue) {
|
||||
this.refs.itemColValue.showError();
|
||||
return;
|
||||
}
|
||||
const payload = {
|
||||
reportId, chartsType, id: rangeVal.id,
|
||||
...rangeSetting,
|
||||
itemValues: itemValues.split(",")
|
||||
};
|
||||
this.setState({ loading: true });
|
||||
saveRangeSetting(
|
||||
dimensionRange === "0" ? payload : { ...payload, ...rangeSettingExtra }
|
||||
).then(({ status, errormsg }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
message.success(getLabel(111, "保存成功"));
|
||||
this.props.onGetData();
|
||||
this.handleCancel();
|
||||
} else {
|
||||
message.error(errormsg || getLabel(111, "保存失败"));
|
||||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
rangeSetting: {
|
||||
itemValues: "",
|
||||
itemColValue: "",
|
||||
dimensionRange: "0"
|
||||
},
|
||||
rangeSettingExtra: {
|
||||
itemSortValue: "",
|
||||
itemColSortValue: "",
|
||||
sortType: "0",
|
||||
sortNum: ""
|
||||
},
|
||||
selectedKey: "1",
|
||||
statisticalItemsOptions: [],
|
||||
statisticalColsOptions: []
|
||||
}, () => this.props.onCancel());
|
||||
};
|
||||
handleResetFormVal = () => {
|
||||
const { selectedKey: chartsType } = this.state;
|
||||
const { reportId } = this.props;
|
||||
this.props.onChange({ reportId, chartsType });
|
||||
};
|
||||
handleChange = ({ key, val }) => {
|
||||
const { rangeSetting } = this.state;
|
||||
this.setState({
|
||||
rangeSetting: {
|
||||
...rangeSetting,
|
||||
[key]: val
|
||||
}
|
||||
}, () => {
|
||||
if (key === "itemValues") {
|
||||
const { statisticalItemsOptions } = this.state;
|
||||
let statisticalColsOptions = [], sortStatisticsOptions = [];
|
||||
_.forEach(val.split(","), item => {
|
||||
_.forEach(statisticalItemsOptions, child => {
|
||||
if (item === child.key) {
|
||||
statisticalColsOptions = [...statisticalColsOptions, ...child.children];
|
||||
sortStatisticsOptions = [...sortStatisticsOptions, child];
|
||||
}
|
||||
});
|
||||
});
|
||||
this.setState({
|
||||
statisticalColsOptions,
|
||||
rangeSettingExtra: {
|
||||
itemSortValue: "",
|
||||
itemColSortValue: "",
|
||||
sortType: "0",
|
||||
sortNum: ""
|
||||
},
|
||||
rangeSettingExtraOptions: {
|
||||
sortStatisticsOptions
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
handleChangeRange = ({ key, val }) => {
|
||||
const { rangeSettingExtra } = this.state;
|
||||
this.setState({
|
||||
rangeSettingExtra: {
|
||||
...rangeSettingExtra,
|
||||
[key]: val
|
||||
}
|
||||
}, () => {
|
||||
if (key === "itemSortValue") {
|
||||
const { rangeSettingExtraOptions } = this.state;
|
||||
const { sortStatisticsOptions } = rangeSettingExtraOptions;
|
||||
this.setState({
|
||||
rangeSettingExtraOptions: {
|
||||
...rangeSettingExtraOptions,
|
||||
sortColumnsOptions: _.find(sortStatisticsOptions, it => it.key === val).children
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
selectedKey,
|
||||
rangeSetting,
|
||||
statisticalItemsOptions,
|
||||
statisticalColsOptions,
|
||||
rangeSettingExtra,
|
||||
rangeSettingExtraOptions,
|
||||
loading
|
||||
} = this.state;
|
||||
const dataShowItems = [
|
||||
{
|
||||
com: RangSelect({
|
||||
name: "itemValues",
|
||||
label: getLabel(111, "统计项"),
|
||||
onChange: this.handleChange,
|
||||
value: rangeSetting.itemValues,
|
||||
options: statisticalItemsOptions,
|
||||
multiple: selectedKey !== "0"
|
||||
})
|
||||
},
|
||||
{
|
||||
com: RangSelect({
|
||||
name: "itemColValue",
|
||||
label: getLabel(111, "统计列"),
|
||||
onChange: this.handleChange,
|
||||
value: rangeSetting.itemColValue,
|
||||
options: statisticalColsOptions
|
||||
})
|
||||
}
|
||||
];
|
||||
const rangValItems = [
|
||||
{
|
||||
com: RangSelect({
|
||||
name: "dimensionRange",
|
||||
label: getLabel(111, "统计维度查看范围"),
|
||||
onChange: this.handleChange,
|
||||
value: rangeSetting.dimensionRange,
|
||||
options: [
|
||||
{ key: "0", showname: getLabel(111, "全部") },
|
||||
{ key: "1", showname: getLabel(111, "设置范围") }
|
||||
],
|
||||
detailtype: 3,
|
||||
helpfulTip: getLabel(111, "通过某个统计项统计值的排序，确定统计维度的查看范围。 例：查看统计项【薪资成本】的统计值降序为前10的部门的分析图情况")
|
||||
})
|
||||
}
|
||||
];
|
||||
const rangValExtraItems = [
|
||||
{
|
||||
com: RangMultiItem({
|
||||
label: getLabel(111, "设置范围"),
|
||||
onChange: this.handleChangeRange,
|
||||
value: rangeSettingExtra,
|
||||
options: rangeSettingExtraOptions
|
||||
})
|
||||
}
|
||||
];
|
||||
const { dimensionRange } = rangeSetting;
|
||||
return (
|
||||
<WeaDialog
|
||||
{...this.props} hasScroll style={{ width: 600 }}
|
||||
buttons={[]} onCancel={this.handleCancel}
|
||||
initLoadCss className="rangSettingWrapper"
|
||||
title={<RangSetingTitle
|
||||
loading={loading}
|
||||
selectedKey={selectedKey}
|
||||
onChange={selectedKey => this.setState({ selectedKey }, () => this.handleResetFormVal())}
|
||||
onSaveChartsRangeSettings={this.handleSaveChartsRangeSettings}
|
||||
/>}
|
||||
>
|
||||
<WeaSearchGroup
|
||||
title={
|
||||
<div className="rangSettingItemTitle">
|
||||
<span>{getLabel(111, "统计项数据展示范围设置")}</span>
|
||||
<WeaHelpfulTip
|
||||
title={getLabel(111, "选择分析图要展示的统计项的统计列\n" +
|
||||
"例：分析图想查看社保福利成本的合计和税前薪酬成本的合计\n" +
|
||||
"则：统计项选择【社保福利成本】和【税前薪酬成本】查看列选择【本期合计】")}
|
||||
placement="bottomLeft"
|
||||
width={260}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
showGroup items={dataShowItems} needTigger col={1}
|
||||
/>
|
||||
<WeaSearchGroup
|
||||
title={getLabel(111, "统计维度值范围设置")}
|
||||
showGroup items={dimensionRange === "0" ? rangValItems : [...rangValItems, ...rangValExtraItems]}
|
||||
needTigger col={1}
|
||||
/>
|
||||
</WeaDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChartsRangeSettingsModal;
|
||||
|
||||
const RangSetingTitle = (props) => {
|
||||
const { selectedKey, onChange, onSaveChartsRangeSettings, loading } = props;
|
||||
const btns = [<Button type="primary" loading={loading}
|
||||
onClick={onSaveChartsRangeSettings}>{getLabel(111, "保存")}</Button>];
|
||||
return <WeaReqTop
|
||||
title={getLabel(111, "分析图数据展示范围设置")} icon={<i className="icon-coms-fa"/>}
|
||||
iconBgcolor="#F14A2D" buttons={btns} showDropIcon={false}
|
||||
tabDatas={[
|
||||
{ key: "1", title: "柱状图" },
|
||||
{ key: "2", title: "折线图" },
|
||||
{ key: "0", title: "饼图" }
|
||||
]} selectedKey={selectedKey} onChange={onChange}
|
||||
/>;
|
||||
};
|
||||
const RangSelect = payload => {
|
||||
const {
|
||||
label, onChange, value, options = [],
|
||||
viewAttr = 3, multiple = false, name,
|
||||
detailtype = 1, helpfulTip
|
||||
} = payload;
|
||||
return (
|
||||
<WeaFormItem label={
|
||||
<React.Fragment>
|
||||
<span style={{ marginRight: 8 }}>{label}</span>
|
||||
{
|
||||
helpfulTip &&
|
||||
<WeaHelpfulTip
|
||||
title={helpfulTip}
|
||||
placement="bottomLeft"
|
||||
width={260}
|
||||
/>
|
||||
}
|
||||
</React.Fragment>
|
||||
} labelCol={{ span: 8 }} wrapperCol={{ span: 12 }}>
|
||||
<WeaError
|
||||
tipPosition="bottom" ref={name}
|
||||
error={getLabel(111, "此项必填")}>
|
||||
<WeaSelect options={multiple ? options : [{ key: "", showname: "" }, ...options]} viewAttr={viewAttr}
|
||||
value={value} multiple={multiple} detailtype={detailtype}
|
||||
onChange={val => onChange({ key: name, val })}/>
|
||||
</WeaError>
|
||||
</WeaFormItem>
|
||||
);
|
||||
};
|
||||
const RangMultiItem = payload => {
|
||||
const { label, onChange, value, options } = payload;
|
||||
const { itemSortValue, itemColSortValue, sortType, sortNum } = value;
|
||||
const { sortStatisticsOptions, sortColumnsOptions } = options;
|
||||
return (
|
||||
<WeaFormItem label={label} labelCol={{ span: 8 }} wrapperCol={{ span: 12 }}>
|
||||
<Row style={{ marginBottom: 16 }}>
|
||||
<Col span={8}>{getLabel(111, "排序统计项：")}</Col>
|
||||
<Col span={16}><WeaSelect options={sortStatisticsOptions} value={itemSortValue}
|
||||
onChange={val => onChange({ key: "itemSortValue", val })}/></Col>
|
||||
</Row>
|
||||
<Row style={{ marginBottom: 16 }}>
|
||||
<Col span={8}>{getLabel(111, "排序列：")}</Col>
|
||||
<Col span={16}><WeaSelect options={sortColumnsOptions} value={itemColSortValue}
|
||||
onChange={val => onChange({ key: "itemColSortValue", val })}/></Col>
|
||||
</Row>
|
||||
<Row style={{ marginBottom: 16 }}>
|
||||
<Col span={12}>
|
||||
<WeaSelect
|
||||
options={
|
||||
[
|
||||
{ key: "0", showname: "升序" },
|
||||
{ key: "1", showname: "降序" }
|
||||
]
|
||||
}
|
||||
detailtype={3} value={sortType} onChange={val => onChange({ key: "sortType", val })}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12} className="extraCol">
|
||||
<span style={{ marginRight: 8 }}>{getLabel(111, "前")}</span>
|
||||
<WeaInputNumber value={sortNum} precision={2} onChange={val => onChange({ key: "sortNum", val })}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</WeaFormItem>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { WeaLocaleProvider } from "ecCom";
|
||||
import { format_with_regex } from "../../../util";
|
||||
|
||||
const { getLabel } = WeaLocaleProvider;
|
||||
export const condition = [
|
||||
|
|
@ -151,3 +152,271 @@ export const condition = [
|
|||
defaultshow: true
|
||||
}
|
||||
];
|
||||
|
||||
const colorList = ["#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"];
|
||||
export const mapBarOptions = (params) => ({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
backgroundColor: "#FFF",
|
||||
borderColor: "#FFF",
|
||||
borderWidth: "1",
|
||||
borderRadius: "5",
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
},
|
||||
formatter: function (params) {
|
||||
let str = params[0].axisValue + "<br>";
|
||||
for (let item of params) {
|
||||
str += `<div>${item.marker}${item.seriesName}<span style='display:inline-block;width: 10px'></span><span style='font-weight: bold'>${format_with_regex(item.value)}</span></div>`;
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
top: "0%",
|
||||
right: "center",
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#B8B8B8"//字体颜色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "0%",
|
||||
left: "2%",
|
||||
bottom: "0%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
data: params.xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: params.name,
|
||||
axisLabel: {
|
||||
padding: [3, 0, 0, 0],
|
||||
formatter: "{value}",
|
||||
color: "#666",
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(66, 192, 255, 0.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
series: _.map(params.data, (item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
barWidth: "32",
|
||||
data: _.map(item.data, (it) => it.replace(/,/g, "")),
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "insideBottom",
|
||||
distance: 15,
|
||||
align: "left",
|
||||
verticalAlign: "middle",
|
||||
rotate: "90",
|
||||
formatter: function (params) {
|
||||
if (parseInt(params.value) === 0) {
|
||||
return ``;
|
||||
} else {
|
||||
return [
|
||||
`{a|${format_with_regex(params.value)}} {b|${params.seriesName}}`
|
||||
];
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontWeight: "bold",
|
||||
fontSize: 14,
|
||||
color: "#333",
|
||||
marginRight: 10
|
||||
},
|
||||
b: {
|
||||
fontSize: 12,
|
||||
color: "#333"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
export const mapLineOptions = (params) => ({
|
||||
tooltip: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
type: "line"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: "0%",
|
||||
right: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "3%",
|
||||
right: "2%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: params.xAxis,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#B8B8B8",
|
||||
fontSize: 12,
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 14
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 16
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: _.map(params.data, (item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: _.map(item.data, (it) => it.replace(/,/g, "")),
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colorList[params.seriesIndex] || colorList[Math.floor((Math.random() * colorList.length))];
|
||||
},
|
||||
lineStyle: {
|
||||
color: colorList[index] || colorList[Math.floor((Math.random() * colorList.length))]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
export const mapPieOptions = (params) => ({
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
let str = params.seriesName + "<br>";
|
||||
str += params.marker + params.name + ":" + format_with_regex(params.value) + "(" + params.percent + "%" + ")" + "<br>";
|
||||
return str;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
top: "0%",
|
||||
left: "2%",
|
||||
orient: "vertical",
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
series: _.map(params.data, item => {
|
||||
return {
|
||||
name: item.name,
|
||||
data: _.map(item.data, (it) => ({ ...it, value: it.value.replace(/,/g, "") })),
|
||||
type: "pie",
|
||||
radius: "60%",
|
||||
avoidLabelOverlap: true,
|
||||
animation: false,
|
||||
labelLine: {
|
||||
show: true,
|
||||
normal: {
|
||||
length: 5,
|
||||
align: "center"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
return colorList[colors.dataIndex] || colorList[Math.floor((Math.random() * colorList.length))];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
.rangSettingWrapper {
|
||||
.wea-search-group {
|
||||
.wea-error, .wea-select, .ant-select, .ant-select-selection {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
.wea-browser-single-icon-circle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wea-new-top-req-main {
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wea-new-top-req, .wea-new-top-req-title > div:last-child {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wea-new-top-req-title {
|
||||
& > div:first-child {
|
||||
width: 216px !important;
|
||||
|
||||
& > div:first-child {
|
||||
max-width: 415px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-col-22, .text-elli {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rangSettingItemTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.extraCol {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,8 +6,11 @@
|
|||
*/
|
||||
import React, { Component } from "react";
|
||||
import { Spin } from "antd";
|
||||
import { WeaEchart } from "ecCom";
|
||||
import RightOptions from "./rightOptions";
|
||||
import { reportStatisticsReportGetData } from "../../../apis/statistics";
|
||||
import ChartsRangeSettingsModal from "./chartsRangeSettingsModal";
|
||||
import { mapBarOptions, mapLineOptions, mapPieOptions } from "./condition";
|
||||
import { queryRangeSetting, reportStatisticsReportGetData } from "../../../apis/statistics";
|
||||
import "../index.less";
|
||||
|
||||
class ReportContent extends Component {
|
||||
|
|
@ -17,17 +20,26 @@ class ReportContent extends Component {
|
|||
columns: [],
|
||||
dataSource: [],
|
||||
countResult: {},
|
||||
loading: false
|
||||
loading: false,
|
||||
viewType: "dataView",
|
||||
chartsType: "0",
|
||||
chartsInfo: {},
|
||||
rangSet: {
|
||||
visible: false, reportId: "",
|
||||
rangeVal: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener("message", this.handleReceive, false);
|
||||
if (this.refs.chart) this.refs.chart.paint();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.report !== this.props.report && nextProps.report.dimensionId) {
|
||||
this.reportStatisticsReportGetData(nextProps.report.id, nextProps.report.dimensionId);
|
||||
this.setState({ viewType: "dataView", chartsInfo: {} });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,11 +61,10 @@ class ReportContent extends Component {
|
|||
postMessageToChild = (payload) => {
|
||||
const childFrameObj = document.getElementById("atdTable");
|
||||
const { dataSource, columns, showSum, countResult } = payload;
|
||||
childFrameObj.contentWindow.postMessage(JSON.stringify({
|
||||
childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({
|
||||
dataSource, columns, showSum, countResult
|
||||
}), "*");
|
||||
};
|
||||
|
||||
reportStatisticsReportGetData = (id, dimensionId) => {
|
||||
const payload = { id, dimensionId };
|
||||
this.setState({ loading: true });
|
||||
|
|
@ -84,26 +95,162 @@ class ReportContent extends Component {
|
|||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
queryRangeSetting = (payload, isTab) => {
|
||||
const { dataSource, columns } = this.state;
|
||||
this.setState({ loading: true });
|
||||
queryRangeSetting(payload).then(({ status, data }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
const { rangSet, viewType } = this.state;
|
||||
const { itemValues, itemColValue, id } = data;
|
||||
this.setState({
|
||||
rangSet: {
|
||||
...rangSet,
|
||||
rangeVal: data
|
||||
}
|
||||
});
|
||||
if (id) {
|
||||
if (!isTab) return;
|
||||
switch (viewType) {
|
||||
case "bar":
|
||||
this.setState({
|
||||
chartsInfo: {
|
||||
name: _.find(_.reduce(_.filter(columns, col => !_.isNil(col.children)), (pre, cur) => ([...pre, ...cur.children]), []), it => it.column === itemColValue).text,
|
||||
xAxis: _.reduce(itemValues, (pre, cur) => ([...pre, _.find(columns, item => item.column === cur).text]), []),
|
||||
data: _.map(dataSource, item => {
|
||||
return {
|
||||
name: item.dimension,
|
||||
data: _.map(itemValues, child => {
|
||||
const key = child + itemColValue.slice(_.indexOf(itemColValue, "_"));
|
||||
return item[key] || "0";
|
||||
})
|
||||
};
|
||||
})
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "line":
|
||||
this.setState({
|
||||
chartsInfo: {
|
||||
xAxis: _.map(dataSource, it => it.dimension),
|
||||
data: _.map(itemValues, item => {
|
||||
return {
|
||||
name: `${_.find(_.reduce(_.filter(columns, col => !_.isNil(col.children)), (pre, cur) => ([...pre, ...cur.children]), []), it => it.column === itemColValue).text}(${_.find(columns, it => it.column === item).text})`,
|
||||
data: _.map(dataSource, child => {
|
||||
const key = item + itemColValue.slice(_.indexOf(itemColValue, "_"));
|
||||
return child[key] || "0";
|
||||
})
|
||||
};
|
||||
})
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "pie":
|
||||
this.setState({
|
||||
chartsInfo: {
|
||||
data: _.map(itemValues, item => {
|
||||
return {
|
||||
name: _.find(_.reduce(_.filter(columns, col => !_.isNil(col.children)), (pre, cur) => ([...pre, ...cur.children]), []), it => it.column === itemColValue).text,
|
||||
data: _.map(dataSource, child => {
|
||||
return {
|
||||
name: child["dimension"],
|
||||
value: child[itemColValue]
|
||||
};
|
||||
})
|
||||
};
|
||||
})
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (this.refs.chart) this.refs.chart.paint();
|
||||
} else {
|
||||
this.setState({ chartsInfo: {} });
|
||||
}
|
||||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
handleChangeChartOpts = (chartsType, viewType) => {
|
||||
this.setState({ chartsInfo: {} });
|
||||
if (this.refs.chart && viewType !== "setting" && viewType !== "dataView" && !this.state.rangSet.visible) this.refs.chart.clear();
|
||||
const { report: { id: reportId, dimensionId } } = this.props;
|
||||
const { rangSet } = this.state;
|
||||
viewType !== "setting" && this.setState({ chartsType, viewType }, () => {
|
||||
const { viewType, chartsType } = this.state;
|
||||
viewType !== "dataView" ?
|
||||
this.queryRangeSetting({ reportId, chartsType }, true) :
|
||||
this.reportStatisticsReportGetData(reportId, dimensionId);
|
||||
});
|
||||
viewType === "setting" && this.setState({ rangSet: { ...rangSet, visible: true, reportId } }, () => {
|
||||
this.queryRangeSetting({ reportId, chartsType });
|
||||
});
|
||||
};
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
rangSet: {
|
||||
visible: false, reportId: "",
|
||||
rangeVal: {}
|
||||
}
|
||||
});
|
||||
};
|
||||
handleGetData = () => {
|
||||
const { report } = this.props;
|
||||
const { id, dimensionId } = report;
|
||||
this.setState({ viewType: "dataView" }, () => this.reportStatisticsReportGetData(id, dimensionId));
|
||||
};
|
||||
renderCharts = () => {
|
||||
const { chartsInfo, viewType } = this.state;
|
||||
return _.isEmpty(chartsInfo) ?
|
||||
<ChartEmptyComp/> : (viewType === "bar" || viewType === "line" || viewType === "pie") ?
|
||||
<WeaEchart
|
||||
ref="chart" useDefault={false} className="chart"
|
||||
option={viewType === "bar" ? mapBarOptions(chartsInfo) : viewType === "line" ? mapLineOptions(chartsInfo) : mapPieOptions(chartsInfo)}
|
||||
/> :
|
||||
<div>123</div>;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
const { loading, viewType, rangSet, columns } = this.state;
|
||||
return (
|
||||
<div className="layoutContent">
|
||||
<div className="layoutBox">
|
||||
<Spin spinning={loading}>
|
||||
<iframe
|
||||
style={{ border: 0, width: "100%", height: "100%" }}
|
||||
// src="http://localhost:7607/#/reportTable"
|
||||
src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/reportTable"
|
||||
id="atdTable"
|
||||
/>
|
||||
{
|
||||
viewType === "dataView" ?
|
||||
<iframe
|
||||
style={{ border: 0, width: "100%", height: "100%" }}
|
||||
// src="http://localhost:7607/#/reportTable"
|
||||
src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/reportTable"
|
||||
id="atdTable"
|
||||
/> : this.renderCharts()
|
||||
}
|
||||
</Spin>
|
||||
</div>
|
||||
{/*侧边栏*/}
|
||||
{/*<RightOptions/>*/}
|
||||
<RightOptions onChange={this.handleChangeChartOpts}/>
|
||||
{/* 图表范围数据设置框 */}
|
||||
<ChartsRangeSettingsModal
|
||||
{...rangSet}
|
||||
columns={columns}
|
||||
onCancel={this.handleCancel}
|
||||
onChange={this.queryRangeSetting}
|
||||
onGetData={this.handleGetData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ReportContent;
|
||||
|
||||
const ChartEmptyComp = () => {
|
||||
return <div className="chartsEmptyWrapper">
|
||||
<span>
|
||||
<img src={require("../../../common/Icon-empty-file.svg")} alt=""/>
|
||||
</span>
|
||||
<span>暂无数据</span>
|
||||
<span>您还没有设置报表统计项，请先设置一下哦~</span>
|
||||
</div>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,17 +19,21 @@ class RightOptions extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { onChange } = this.props;
|
||||
const { show } = this.state;
|
||||
return (
|
||||
<div className="layoutSide" style={{ width: show ? "30px" : 0 }}>
|
||||
<div className="sideBox">
|
||||
<div className="sideMain">
|
||||
<div className="toll-bar-container" style={{ alignItems: show && "center" }}>
|
||||
<i className="icon-coms-background" title={getLabel(111, "数据视图")}/>
|
||||
<i className="icon-portal-reportform-o" title={getLabel(111, "柱状图")}/>
|
||||
<i className="icon-coms-Line" title={getLabel(111, "折线图")}/>
|
||||
<i className="icon-coms-Pie" title={getLabel(111, "饼图")}/>
|
||||
<i className="icon-coms-Flow-setting" title={getLabel(111, "设置")}/>
|
||||
<i className="icon-coms-background" title={getLabel(111, "数据视图")}
|
||||
onClick={() => onChange("", "dataView")}/>
|
||||
<i className="icon-portal-reportform-o" title={getLabel(111, "柱状图")}
|
||||
onClick={() => onChange("1", "bar")}/>
|
||||
<i className="icon-coms-Line" title={getLabel(111, "折线图")} onClick={() => onChange("2", "line")}/>
|
||||
<i className="icon-coms-Pie" title={getLabel(111, "饼图")} onClick={() => onChange("0", "pie")}/>
|
||||
<i className="icon-coms-Flow-setting" title={getLabel(111, "设置")}
|
||||
onClick={() => onChange("1", "setting")}/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="show-btn-right"
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { Button, message, Modal } from "antd";
|
|||
import { condition } from "./condition";
|
||||
import { getSearchs } from "../../../util";
|
||||
import {
|
||||
deleteRangeSetting,
|
||||
reportStatisticsGetSearchCondition,
|
||||
reportStatisticsItemDelete,
|
||||
reportStatisticsSaveSearchCondition,
|
||||
|
|
@ -153,6 +154,7 @@ class StatisticalMicroSettingsSlide extends Component {
|
|||
selectedRowKeys: []
|
||||
}, () => {
|
||||
this.statisticsItemList(this.props.id).then(r => {
|
||||
deleteRangeSetting({ reportId: this.props.id });
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -116,6 +116,42 @@
|
|||
|
||||
.ant-spin-nested-loading, .ant-spin-container {
|
||||
height: 100%;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chartsEmptyWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
|
||||
& > span:first-child {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
& > span:nth-child(3) {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,3 +93,15 @@ export function calcPageNo(total, pageNo = 1, pageSize = 10, selectDelDataLen =
|
|||
return pageNo;
|
||||
}
|
||||
|
||||
//金额格式化
|
||||
export const format_with_regex = (number) => {
|
||||
return !(number + "").includes(".")
|
||||
? // 就是说1-3位后面一定要匹配3位
|
||||
(number + "").replace(/\d{1,3}(?=(\d{3})+$)/g, (match) => {
|
||||
return match + ",";
|
||||
})
|
||||
: (number + "").replace(/\d{1,3}(?=(\d{3})+(\.))/g, (match) => {
|
||||
return match + ",";
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue