产品-薪酬统计分析报表
This commit is contained in:
parent
22fddce3a0
commit
8bd124c7dc
|
|
@ -54,3 +54,11 @@ 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 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,404 @@
|
|||
/*
|
||||
* 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, chartsType, rangeVal } = this.props;
|
||||
const { rangeSetting, rangeSettingExtra } = 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.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: true
|
||||
})
|
||||
},
|
||||
{
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,8 @@
|
|||
import React, { Component } from "react";
|
||||
import { Spin } from "antd";
|
||||
import RightOptions from "./rightOptions";
|
||||
import { reportStatisticsReportGetData } from "../../../apis/statistics";
|
||||
import ChartsRangeSettingsModal from "./chartsRangeSettingsModal";
|
||||
import { queryRangeSetting, reportStatisticsReportGetData } from "../../../apis/statistics";
|
||||
import "../index.less";
|
||||
|
||||
class ReportContent extends Component {
|
||||
|
|
@ -17,7 +18,13 @@ class ReportContent extends Component {
|
|||
columns: [],
|
||||
dataSource: [],
|
||||
countResult: {},
|
||||
loading: false
|
||||
loading: false,
|
||||
viewType: "dataView",
|
||||
chartsType: "0",
|
||||
rangSet: {
|
||||
visible: false, reportId: "",
|
||||
chartsType: "1", rangeVal: {}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -28,6 +35,7 @@ class ReportContent extends Component {
|
|||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.report !== this.props.report && nextProps.report.dimensionId) {
|
||||
this.reportStatisticsReportGetData(nextProps.report.id, nextProps.report.dimensionId);
|
||||
this.setState({ viewType: "dataView" });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +61,6 @@ class ReportContent extends Component {
|
|||
dataSource, columns, showSum, countResult
|
||||
}), "*");
|
||||
};
|
||||
|
||||
reportStatisticsReportGetData = (id, dimensionId) => {
|
||||
const payload = { id, dimensionId };
|
||||
this.setState({ loading: true });
|
||||
|
|
@ -84,26 +91,82 @@ class ReportContent extends Component {
|
|||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
queryRangeSetting = (payload) => {
|
||||
this.setState({ loading: true });
|
||||
queryRangeSetting(payload).then(({ status, data }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
const { rangSet } = this.state;
|
||||
this.setState({
|
||||
rangSet: {
|
||||
...rangSet,
|
||||
rangeVal: data
|
||||
}
|
||||
});
|
||||
}
|
||||
}).catch(() => this.setState({ loading: false }));
|
||||
};
|
||||
handleChangeChartOpts = (chartsType, viewType) => {
|
||||
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 }) :
|
||||
this.reportStatisticsReportGetData(reportId, dimensionId);
|
||||
});
|
||||
viewType === "setting" && this.setState({ rangSet: { ...rangSet, visible: true, reportId, chartsType } }, () => {
|
||||
this.queryRangeSetting({ reportId, chartsType });
|
||||
});
|
||||
};
|
||||
handleCancel = () => {
|
||||
this.setState({
|
||||
rangSet: {
|
||||
visible: false, reportId: "",
|
||||
chartsType: "1", rangeVal: {}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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"
|
||||
/> : <ChartEmptyComp/>
|
||||
}
|
||||
</Spin>
|
||||
</div>
|
||||
{/*侧边栏*/}
|
||||
<RightOptions/>
|
||||
<RightOptions onChange={this.handleChangeChartOpts}/>
|
||||
{/* 图表范围数据设置框 */}
|
||||
<ChartsRangeSettingsModal
|
||||
{...rangSet}
|
||||
columns={columns}
|
||||
onCancel={this.handleCancel}
|
||||
onChange={this.queryRangeSetting}
|
||||
/>
|
||||
</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"
|
||||
|
|
|
|||
|
|
@ -117,6 +117,37 @@
|
|||
.ant-spin-nested-loading, .ant-spin-container {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layoutSide {
|
||||
|
|
|
|||
Loading…
Reference in New Issue