weaver_trunk_cli/pc4mobx/hrm/components/report/ReportChart.js

import { WeaInput, WeaEchart,WeaLocaleProvider } from 'ecCom'

import { Row, Col, message } from 'antd'
import { i18n } from '../../public/i18n'
const getLabel = WeaLocaleProvider.getLabel;

import React from 'react'

import { jumpToHrmDept } from '../../util/pulic-func'

class ReportChart extends React.Component {
  constructor (props) {
    super(props)
  }

  componentDidUpdate () {
    if (this.refs.echart) this.refs.echart.paint()
    if (this.refs.echart1) this.refs.echart1.paint()
  }

  componentWillReceiveProps (nextProps) {
    if (this.props.winWidth !== nextProps.winWidth) {
      if (this.refs.echart) this.refs.echart.chart.resize()
      if (this.refs.echart1) this.refs.echart1.chart.resize()
    }
  }

  getDOM (
    interval,
    key,
    setGap,
    getData,
    isIntervalShow,
    pathname,
    tag,
    isChartsShow,
    chartTitle
  ) {
    return (
      <div style={{ position: 'absolute', right: 0 }}>
        <div
          style={
            isIntervalShow
              ? { display: 'block', float: 'left' }
              : { display: 'none' }
          }
        >
          <div className='hrm-report-interval'>{this.getName(key) + ':'}</div>
          <div
            style={{ width: 70, paddingTop: 8, paddingLeft: 0 }}
            className='hrm-report-interval hrm-report-input'
          >
            <WeaInput
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_WeaInput@f9l569`}
              type='text'
              viewAttr='2'
              value={interval}
              onChange={val => setGap(val)}
            />
          </div>
          <div className='hrm-report-interval' style={{ paddingLeft: 0 }}>
            {this.getSuffix(key)}
          </div>
          <div className='hrm-report-interval' style={{ fontSize: 16 }}>
            <a
              onClick={() => getData()}
              className='hrm-report-linkStyle'
              title={i18n.button.refresh()}
            >
              <i className='icon-coms-Refresh' />
            </a>
          </div>
        </div>
        <div
          style={
            pathname !== 'basicConditionAnalysis'
              ? { display: 'block', float: 'left', padding: '10px 0' }
              : { display: 'none' }
          }
        >
          <a onClick={() => getData(tag)} className='hrm-report-linkStyle'>
            {i18n.button.more()}
          </a>
        </div>
        <div
          className='hrm-report-interval'
          style={{ padding: '8px 20px 10px 10px', fontSize: 16 }}
        >
          {isChartsShow ? (
            <a
              onClick={() => this.getImgSrc(tag, chartTitle)}
              className='hrm-report-linkStyle'
              title={i18n.button.saveAsImage()}
            >
              <i className='icon-coms-download2' />
            </a>
          ) : (
            <a
              onClick={() => {
                message.info(i18n.message.dataNone())
              }}
              className='hrm-report-linkStyle'
              title={i18n.button.saveAsImage()}
            >
              <i className='icon-coms-download2' />
            </a>
          )}
        </div>
      </div>
    )
  }

  getName (key) {
    switch (key) {
      case '1':
        return i18n.label.ageRange()
      case '3':
        return getLabel('548321', "司龄区间")
      case '7':
        return i18n.label.rankingInterval()
    }
  }

  getSuffix (key) {
    switch (key) {
      case '7':
        return i18n.label.level()
      default:
        return i18n.label.year()
    }
  }

  getImgSrc (tag, chartTitle) {
    let cvs = document.getElementsByTagName('canvas')
    if (tag !== 'right') {
      this.downloadCvs2Img(cvs[0], chartTitle)
    } else {
      this.downloadCvs2Img(cvs[1], chartTitle)
    }
  }

  downloadCvs2Img (cvs, chartTitle) {
    let $a = document.createElement('a')
    $a.download = chartTitle + '.jpg'
    $a.target = '_blank'
    let url
    if (cvs) {
      url = cvs.toDataURL('image/jpg')
    } else {
      message.info(i18n.message.dataNone())
    }
    if (url) $a.href = url
    if (typeof MouseEvent === 'function') {
      var evt = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: false
      })
      $a.dispatchEvent(evt)
    } else {
      if (window.navigator.msSaveOrOpenBlob) {
        var bstr = atob(url.split(',')[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        var blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg')
      } else {
        var html =
          '' +
          '<body style="margin:0;">' +
          '<img src="' +
          url +
          '" style="max-width:100%;" title="" />' +
          '</body>'
        var tab = window.open()
        tab.document.write(html)
      }
    }
  }

  chartAction (chart, ids, yAxisData, linkList) {
    chart.off('click')
    chart.on('click', params =>
      this.handleClick(params, ids, yAxisData, linkList)
    )
  }

  // #QC3421143# pie图增加点击事件,弹出框显示明细
  basicChartAction = chart => {
    chart.off("click");
    chart.on("click", params => {
      this.handleBasicClick(params);
    });
  };

  handleBasicClick (params) {
    const { pathname,cmd,showDialog } = this.props
    if (pathname !== 'basicConditionAnalysis') return false;
    if (cmd == 'AgeRp' || cmd == 'SexRp' || cmd == 'SeniorityRp' || cmd == 'EduRp' || cmd == "JobCallRp") {
      showDialog(params.name);
    }
  
  }

  handleClick (params, ids, yAxisData, linkList) {
    const { pathname } = this.props
    if (pathname !== 'departmentStatistics') return false
    let anid = params.event.target.anid
    if (!anid) {
      return
    }
    let index = anid.split('_')[1]
    jumpToHrmDept(ids[index])
  }

  render () {
    const {
      option,
      isIntervalShow,
      interval,
      tabKey,
      pathname,
      setGap,
      getData,
      chartTitle,
      isChartsShow,
      ids,
      yAxisData,
      linkList,
      tagName
    } = this.props

    return (
      <div style={{ padding: '8px 16px' }}>
        {pathname == 'basicConditionAnalysis' ? (
          <div style={{ height: 500, position: 'relative' }}>
            <Row
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Row@bk161k`}
            >
              <Col
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Col@tiem4w`}
                span={24}
              >
                <div style={{ height: 50 }}>
                  {this.getDOM(
                    interval,
                    tabKey,
                    setGap,
                    getData,
                    isIntervalShow,
                    pathname,
                    pathname,
                    isChartsShow[0],
                    tagName
                  )}
                </div>
              </Col>
            </Row>
            <Row
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Row@yyxmps`}
            >
              <Col
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Col@r3yrz9`}
                span={24}
              >
                {isChartsShow[0] ? (
                  <div style={{ height: 400 }}>
                    <WeaEchart
                      ecId={`${
                        (this && this.props && this.props.ecId) || ''
                      }_WeaEchart@94v101`}
                      ref='echart'
                      option={option[0]}
                      useDefault={false}
                      chartAction={chart =>
                        this.basicChartAction(chart)
                      }
                    />
                  </div>
                ) : (
                  <div
                    style={{
                      position: 'absolute',
                      top: 100,
                      left: '50%',
                      marginLeft: -40,
                      textAlign: 'center'
                    }}
                  >
                    <div style={{ fontSize: 80 }}>
                      <i className='icon-coms-blank'></i>
                    </div>
                    <div style={{ fontSize: 20, color: '#B2B2B2' }}>
                      {i18n.message.dataNone()}
                    </div>
                  </div>
                )}
              </Col>
            </Row>
          </div>
        ) : (
          ''
        )}
        {pathname == 'departmentStatistics' || pathname == 'postStatistics' ? (
          <div
            style={{ height: 350, border: '1px solid #DDD', borderRadius: 3 }}
          >
            <Row
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Row@xs2v2c`}
            >
              <Col
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Col@e1wc91`}
                span={24}
              >
                <div
                  style={{
                    height: 40,
                    backgroundColor: '#F9F9F9',
                    position: 'relative'
                  }}
                >
                  <div
                    style={{
                      display: 'block',
                      width: '30%',
                      height: '100%',
                      float: 'left',
                      padding: '11px 0 12px 16px'
                    }}
                  >
                    {chartTitle[0]}
                  </div>
                  <div style={{ height: 50 }}>
                    {this.getDOM(
                      interval,
                      tabKey,
                      setGap,
                      getData,
                      isIntervalShow,
                      pathname,
                      pathname,
                      isChartsShow[0],
                      chartTitle[0]
                    )}
                  </div>
                </div>
              </Col>
            </Row>
            <Row
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Row@zdbixg`}
            >
              <Col
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Col@cpfhsg`}
                span={20}
                offset={2}
              >
                {isChartsShow[0] ? (
                  <div style={{ height: 300 }}>
                    <WeaEchart
                      ecId={`${
                        (this && this.props && this.props.ecId) || ''
                      }_WeaEchart@5ri10l`}
                      ref='echart'
                      option={option[0]}
                      useDefault={false}
                      chartAction={chart =>
                        this.chartAction(chart, ids, yAxisData, linkList)
                      }
                    />
                  </div>
                ) : (
                  <div
                    style={{
                      position: 'absolute',
                      top: 100,
                      left: '50%',
                      marginLeft: -40,
                      textAlign: 'center'
                    }}
                  >
                    <div style={{ fontSize: 80 }}>
                      <i className='icon-coms-blank'></i>
                    </div>
                    <div style={{ fontSize: 20, color: '#B2B2B2' }}>
                      {i18n.message.dataNone()}
                    </div>
                  </div>
                )}
              </Col>
            </Row>
          </div>
        ) : (
          ''
        )}
        {pathname == 'jobStatusStatistics' ? (
          <Row
            ecId={`${(this && this.props && this.props.ecId) || ''}_Row@d50f92`}
          >
            <Col
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Col@4odteb`}
              span={12}
            >
              <div
                style={{
                  height: 350,
                  marginRight: 8,
                  border: '1px solid #DDD',
                  borderRadius: 3
                }}
              >
                <Row
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_Row@9vp3z8`}
                >
                  <Col
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_Col@j8v6ki`}
                  >
                    <div
                      style={{
                        height: 40,
                        backgroundColor: '#F9F9F9',
                        position: 'relative'
                      }}
                    >
                      <div
                        style={{
                          height: '100%',
                          padding: '11px 0 12px 16px',
                          float: 'left'
                        }}
                      >
                        {chartTitle[0]}
                      </div>
                      <div style={{ height: 50 }}>
                        {this.getDOM(
                          interval,
                          tabKey,
                          setGap,
                          getData,
                          isIntervalShow,
                          pathname,
                          'left',
                          isChartsShow[1],
                          chartTitle[0]
                        )}
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_Row@z1e7gk`}
                >
                  <Col
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_Col@6gm6oz`}
                  >
                    {isChartsShow[1] ? (
                      <div style={{ height: 300 }}>
                        <WeaEchart
                          ecId={`${
                            (this && this.props && this.props.ecId) || ''
                          }_WeaEchart@mgu4rb`}
                          ref='echart'
                          option={option[0]}
                          useDefault={false}
                        />
                      </div>
                    ) : (
                      <div
                        style={{
                          position: 'absolute',
                          top: 100,
                          left: '50%',
                          marginLeft: -20,
                          textAlign: 'center'
                        }}
                      >
                        <div style={{ fontSize: 50 }}>
                          <i className='icon-coms-blank'></i>
                        </div>
                        <div style={{ fontSize: 15, color: '#B2B2B2' }}>
                          {i18n.message.dataNone()}
                        </div>
                      </div>
                    )}
                  </Col>
                </Row>
              </div>
            </Col>
            <Col
              ecId={`${
                (this && this.props && this.props.ecId) || ''
              }_Col@j3wbd0`}
              span={12}
            >
              <div
                style={{
                  height: 350,
                  marginLeft: 8,
                  border: '1px solid #DDD',
                  borderRadius: 3
                }}
              >
                <Row
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_Row@kx8mey`}
                >
                  <Col
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_Col@d3qj2t`}
                  >
                    <div
                      style={{
                        height: 40,
                        backgroundColor: '#F9F9F9',
                        position: 'relative'
                      }}
                    >
                      <div
                        style={{
                          height: '100%',
                          padding: '11px 0 12px 16px',
                          float: 'left'
                        }}
                      >
                        {chartTitle[1]}
                      </div>
                      <div style={{ height: 50 }}>
                        {this.getDOM(
                          interval,
                          tabKey,
                          setGap,
                          getData,
                          isIntervalShow,
                          pathname,
                          'right',
                          isChartsShow[2],
                          chartTitle[1]
                        )}
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row
                  ecId={`${
                    (this && this.props && this.props.ecId) || ''
                  }_Row@i0dgsy`}
                >
                  <Col
                    ecId={`${
                      (this && this.props && this.props.ecId) || ''
                    }_Col@svragf`}
                  >
                    {isChartsShow[2] ? (
                      <div style={{ height: 300 }}>
                        <WeaEchart
                          ecId={`${
                            (this && this.props && this.props.ecId) || ''
                          }_WeaEchart@ohcxa9`}
                          ref='echart1'
                          option={option[1]}
                          useDefault={false}
                        />
                      </div>
                    ) : (
                      <div
                        style={{
                          position: 'absolute',
                          top: 100,
                          left: '50%',
                          marginLeft: -20,
                          textAlign: 'center'
                        }}
                      >
                        <div style={{ fontSize: 50 }}>
                          <i className='icon-coms-blank'></i>
                        </div>
                        <div style={{ fontSize: 15, color: '#B2B2B2' }}>
                          {i18n.message.dataNone()}
                        </div>
                      </div>
                    )}
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>
        ) : (
          ''
        )}
      </div>
    )
  }
}

export default ReportChart