diff --git a/pc4mobx/hrmSalary/apis/statistics.js b/pc4mobx/hrmSalary/apis/statistics.js index 767d8c7e..197339b5 100644 --- a/pc4mobx/hrmSalary/apis/statistics.js +++ b/pc4mobx/hrmSalary/apis/statistics.js @@ -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); +}; 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..143f16a7 --- /dev/null +++ b/pc4mobx/hrmSalary/pages/reportView/components/chartsRangeSettingsModal.js @@ -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 ( + 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/condition.js b/pc4mobx/hrmSalary/pages/reportView/components/condition.js index 0e86091c..c8422666 100644 --- a/pc4mobx/hrmSalary/pages/reportView/components/condition.js +++ b/pc4mobx/hrmSalary/pages/reportView/components/condition.js @@ -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 + "
"; + for (let item of params) { + str += `
${item.marker}${item.seriesName}${format_with_regex(item.value)}
`; + } + 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 + "
"; + str += params.marker + params.name + ":" + format_with_regex(params.value) + "(" + params.percent + "%" + ")" + "
"; + 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))]; + } + } + } + }; + }) +}); 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 c4b78c01..3e0747f2 100644 --- a/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js +++ b/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js @@ -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) ? + : (viewType === "bar" || viewType === "line" || viewType === "pie") ? + : +
123
; + }; render() { - const { loading } = this.state; + const { loading, viewType, rangSet, columns } = this.state; return (
-