salary-management-front/pc4mobx/hrmSalary/pages/custom-pages/lingyue/adjustSalaryFile/content.js

/*
  * 领悦薪酬档案报表
  * 公共列表
  * @Author:    黎永顺
  * @Date:      2025/9/16
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaEchart, WeaLeftRightLayout, WeaLocaleProvider, WeaTable } from "ecCom";
import * as API from "../../../../apis/custom-apis/lingyue";
import { format_with_regex } from "../../../../util";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const colorList = ["#709DF7", "#73DEB3", "#7585A2", "#F7C739", "#5FC3E3", "#AEE279", "#FF7F81"];

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [], dataSource: [], loading: false, chartsDataA: {}, chartsDataB: {},
      showLeft: false
    };
  }

  componentDidMount() {
    this.getSalaryFileReportList();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.isQuery !== this.props.isQuery) this.getSalaryFileReportList(nextProps);
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevState.showLeft !== this.state.showLeft) {
      this.refs.chartA.paint();
      this.refs.chartB.paint();
    }
  }

  getSalaryFileReportList = (props) => {
    const { type, queryParams } = props || this.props,
      { dateRange, pqList, xmList, zwjsList, ...extra } = queryParams;
    const [startDate, endDate] = dateRange;
    const payload = {
      pqList: pqList ? pqList.split(",") : [],
      xmList: xmList ? xmList.split(",") : [],
      zwjsList: zwjsList ? zwjsList.split(",") : [],
      startDate, endDate, ...extra
    };
    this.setState({ loading: true });
    API.getSalaryFileReportList(type, payload).then(({ status, data: result }) => {
      this.setState({ loading: false });
      if (status) {
        const { data: dataSource, columns, chartsDataA, chartsDataB } = result;
        this.setState({
          dataSource,
          chartsDataA: _.reduce(_.keys(chartsDataA), (pre, cur) => {
            return [...pre, { name: cur, value: chartsDataA[cur] }];
          }, []),
          chartsDataB: _.reduce(_.keys(chartsDataB), (pre, cur) => {
            return [...pre, { name: cur, value: chartsDataB[cur] }];
          }, []),
          columns: _.map(columns, o => ({ title: o.text, width: o.width, dataIndex: o.column }))
        });
      }
    });
  };
  mapPieOptions = (data, pieName) => {
    return {
      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: {
        type: "scroll",
        icon: "rect",
        bottom: "2%",
        orient: "horizontal",
        itemGap: 10,
        textStyle: {
          fontSize: 12,//字体大小
          color: "#787E95"//字体颜色
        }
      },
      series: [
        {
          name: pieName,
          data: data,
          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))];
              }
            }
          }
        }
      ]
    };
  };

  render() {
    const { columns, dataSource, chartsDataA, chartsDataB, loading, showLeft } = this.state;
    return (<WeaLeftRightLayout leftWidth={310} showLeft={showLeft}
                                onCollapse={v => this.setState({ showLeft: v })}
                                leftCom={<div className="salaryFileReport_lingyue">
                                  <div className="salaryFileReport_item">
                                    <WeaEchart
                                      ref="chartA" useDefault={false} className="chart"
                                      option={this.mapPieOptions(chartsDataA, getLabel(111, "周期内调薪人数比例"))}
                                    />
                                  </div>
                                  <div className="salaryFileReport_item">
                                    <WeaEchart
                                      ref="chartB" useDefault={false} className="chart"
                                      option={this.mapPieOptions(chartsDataB, getLabel(111, "周期内调薪总额比例"))}
                                    />
                                  </div>
                                </div>}>
      <WeaTable columns={columns} dataSource={dataSource} loading={loading} pagination={false} bordered
                scroll={{ x: 1200, y: `calc(100vh - 126px)` }}/>
    </WeaLeftRightLayout>);
  }
}

export default Content;