285 lines
10 KiB
JavaScript
285 lines
10 KiB
JavaScript
/*
|
||
* Author: 黎永顺
|
||
* name: 报表内容区
|
||
* Description:
|
||
* Date: 2023/4/21
|
||
*/
|
||
import React, { Component } from "react";
|
||
import { Spin } from "antd";
|
||
import { WeaEchart } from "ecCom";
|
||
import RightOptions from "./rightOptions";
|
||
import ChartsRangeSettingsModal from "./chartsRangeSettingsModal";
|
||
import { mapBarOptions, mapLineOptions, mapPieOptions } from "./condition";
|
||
import { queryRangeSetting, reportStatisticsReportGetData } from "../../../apis/statistics";
|
||
import PovitpivotChartModal from "./povitpivotChartModal";
|
||
import "../index.less";
|
||
|
||
class ReportContent extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
columns: [],
|
||
dataSource: [],
|
||
countResult: {},
|
||
loading: false,
|
||
viewType: "dataView",
|
||
chartsType: "0",
|
||
chartsInfo: {},
|
||
povitView: {
|
||
visible: false, id: "", isShare: false,
|
||
dimensionId: "", dimensionValue: ""
|
||
},
|
||
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, nextProps.report.isShare);
|
||
this.setState({ viewType: "dataView", chartsInfo: {} });
|
||
}
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
window.removeEventListener("message", this.handleReceive, false);
|
||
}
|
||
|
||
handleReceive = ({ data }) => {
|
||
const { type, payload: { id, params } = {} } = data;
|
||
if (type === "init") {
|
||
const { columns, countResult, dataSource } = this.state;
|
||
this.postMessageToChild({
|
||
columns, countResult, dataSource,
|
||
showSum: !_.isEmpty(countResult)
|
||
});
|
||
} else if (type === "turn") {
|
||
//数据透视弹框
|
||
if (id === "PIVOTCHART") {
|
||
const { record } = params;
|
||
const { dimension: dimensionValue } = record;
|
||
const { id: pivotId, dimensionId, isShare } = this.props.report;
|
||
this.setState({
|
||
povitView: {
|
||
visible: true, id: pivotId, dimensionId, dimensionValue, isShare
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
postMessageToChild = (payload) => {
|
||
const childFrameObj = document.getElementById("atdTable");
|
||
const { dataSource, columns, showSum, countResult } = payload;
|
||
childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({
|
||
dataSource, columns, showSum, countResult
|
||
}), "*");
|
||
};
|
||
reportStatisticsReportGetData = (id, dimensionId, isShare) => {
|
||
const payload = { id, dimensionId, isShare };
|
||
this.setState({ loading: true });
|
||
reportStatisticsReportGetData(payload).then(({ status, data }) => {
|
||
this.setState({ loading: false });
|
||
if (status && id.toString() === data.reportId.toString()) {
|
||
const { countResult, columns, pageInfo: { list } } = data;
|
||
this.setState({
|
||
countResult,
|
||
columns: _.map(columns, it => ({
|
||
...it,
|
||
dataIndex: it.column, width: 150,
|
||
title: it.text, align: "center",
|
||
children: !_.isNil(it.children) ? _.map(it.children, child => ({
|
||
...child,
|
||
dataIndex: child.column, width: 150,
|
||
title: child.text, align: "center"
|
||
})) : []
|
||
})),
|
||
dataSource: list || []
|
||
}, () => {
|
||
this.postMessageToChild({
|
||
columns: this.state.columns, countResult: this.state.countResult,
|
||
dataSource: this.state.dataSource,
|
||
showSum: !_.isEmpty(this.state.countResult)
|
||
});
|
||
});
|
||
}
|
||
}).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, isShare } } = 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, isShare);
|
||
});
|
||
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, isShare } = report;
|
||
this.setState({ viewType: "dataView" }, () => this.reportStatisticsReportGetData(id, dimensionId, isShare));
|
||
};
|
||
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, viewType, rangSet, columns, povitView } = this.state;
|
||
const { report } = this.props;
|
||
const { isShare } = report;
|
||
return (
|
||
<div className="layoutContent">
|
||
<div className="layoutBox">
|
||
<Spin spinning={loading}>
|
||
{
|
||
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 isShare={isShare} onChange={this.handleChangeChartOpts}/>
|
||
{/* 图表范围数据设置框 */}
|
||
<ChartsRangeSettingsModal
|
||
{...rangSet}
|
||
columns={columns}
|
||
onCancel={this.handleCancel}
|
||
onChange={this.queryRangeSetting}
|
||
onGetData={this.handleGetData}
|
||
/>
|
||
{/* 数据透视弹框*/}
|
||
<PovitpivotChartModal
|
||
{...povitView}
|
||
onCancel={() => this.setState({
|
||
povitView: {
|
||
visible: false, id: "", dimensionId: "", dimensionValue: "",
|
||
isShare: false
|
||
}
|
||
})}
|
||
/>
|
||
</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>;
|
||
};
|