From 8bd124c7dc4a34f5ae71c7952557e3a4f05abfec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com> Date: Fri, 12 May 2023 10:18:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81-=E8=96=AA=E9=85=AC=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1=E5=88=86=E6=9E=90=E6=8A=A5=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pc4mobx/hrmSalary/apis/statistics.js | 8 + pc4mobx/hrmSalary/common/Icon-empty-file.svg | 38 ++ .../pages/analysisOfSalaryStatistics/index.js | 3 +- .../components/chartsRangeSettingsModal.js | 404 ++++++++++++++++++ .../pages/reportView/components/index.less | 50 +++ .../reportView/components/reportContent.js | 85 +++- .../reportView/components/rightOptions.js | 14 +- pc4mobx/hrmSalary/pages/reportView/index.less | 31 ++ 8 files changed, 616 insertions(+), 17 deletions(-) create mode 100644 pc4mobx/hrmSalary/common/Icon-empty-file.svg create mode 100644 pc4mobx/hrmSalary/pages/reportView/components/chartsRangeSettingsModal.js create mode 100644 pc4mobx/hrmSalary/pages/reportView/components/index.less diff --git a/pc4mobx/hrmSalary/apis/statistics.js b/pc4mobx/hrmSalary/apis/statistics.js index 767d8c7e..4abd90fb 100644 --- a/pc4mobx/hrmSalary/apis/statistics.js +++ b/pc4mobx/hrmSalary/apis/statistics.js @@ -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); +}; diff --git a/pc4mobx/hrmSalary/common/Icon-empty-file.svg b/pc4mobx/hrmSalary/common/Icon-empty-file.svg new file mode 100644 index 00000000..cfab82a9 --- /dev/null +++ b/pc4mobx/hrmSalary/common/Icon-empty-file.svg @@ -0,0 +1,38 @@ + + + Icon-empty-file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/index.js b/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/index.js index 5fc4c40b..fe08d250 100644 --- a/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/index.js +++ b/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/index.js @@ -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 }); }); }; diff --git a/pc4mobx/hrmSalary/pages/reportView/components/chartsRangeSettingsModal.js b/pc4mobx/hrmSalary/pages/reportView/components/chartsRangeSettingsModal.js new file mode 100644 index 00000000..f9dc7cfa --- /dev/null +++ b/pc4mobx/hrmSalary/pages/reportView/components/chartsRangeSettingsModal.js @@ -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 ( + this.setState({ selectedKey }, () => this.handleResetFormVal())} + onSaveChartsRangeSettings={this.handleSaveChartsRangeSettings} + />} + > + + {getLabel(111, "统计项数据展示范围设置")} + + + } + showGroup items={dataShowItems} needTigger col={1} + /> + + + ); + } +} + +export default ChartsRangeSettingsModal; + +const RangSetingTitle = (props) => { + const { selectedKey, onChange, onSaveChartsRangeSettings, loading } = props; + const btns = []; + return } + 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 ( + + {label} + { + helpfulTip && + + } + + } labelCol={{ span: 8 }} wrapperCol={{ span: 12 }}> + + onChange({ key: name, val })}/> + + + ); +}; +const RangMultiItem = payload => { + const { label, onChange, value, options } = payload; + const { itemSortValue, itemColSortValue, sortType, sortNum } = value; + const { sortStatisticsOptions, sortColumnsOptions } = options; + return ( + + + {getLabel(111, "排序统计项：")} + onChange({ key: "itemSortValue", val })}/> + + + {getLabel(111, "排序列：")} + onChange({ key: "itemColSortValue", val })}/> + + + + onChange({ key: "sortType", val })} + /> + + + {getLabel(111, "前")} + onChange({ key: "sortNum", val })}/> + + + + ); +}; diff --git a/pc4mobx/hrmSalary/pages/reportView/components/index.less b/pc4mobx/hrmSalary/pages/reportView/components/index.less new file mode 100644 index 00000000..33c5aed0 --- /dev/null +++ b/pc4mobx/hrmSalary/pages/reportView/components/index.less @@ -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; + } +} diff --git a/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js b/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js index 413740e6..902396c5 100644 --- a/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js +++ b/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js @@ -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 (
-