liang.cheng
/
weaver_trunk_cli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#QC3421143# 基本状况分析明细数据,工龄状况修改为司龄状况

This commit is contained in:
Chengliang 2024-12-11 17:56:58 +08:00
parent a4535b2ceb
commit b73ef8e8a5
3 changed files with 877 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

499
pc4mobx/hrm/components/report/BasicConditionAnalysis.js
View File

@ -1,7 +1,4 @@
import { import { inject, observer } from 'mobx-react'
inject,
observer,
} from 'mobx-react';
import { import {
WeaTop, WeaTop,
@ -10,15 +7,13 @@ import {
WeaRightMenu, WeaRightMenu,
WeaRadioGroup, WeaRadioGroup,
WeaMoreButton, WeaMoreButton,
} from 'ecCom'; WeaLocaleProvider,
WeaDialog
} from 'ecCom'
import { import {
Row, WeaTableNew
Col, } from 'comsMobx'
Tabs, import { Row, Col, Tabs, Spin, Button } from 'antd'
Spin,
Button,
} from 'antd'
import React from 'react' import React from 'react'
import * as mobx from 'mobx' import * as mobx from 'mobx'
@ -27,114 +22,168 @@ import RadioGroupWrapper from './RadioGroupWrapper'
import ReportChart from './ReportChart' import ReportChart from './ReportChart'
import DataStatistics from './DataStatistics' import DataStatistics from './DataStatistics'
import More from './More' import More from './More'
import {addContentPath} from '../../util/index.js' import { addContentPath } from '../../util/index.js'
import '../../style/report.css'; import '../../style/report.css'
import { import { i18n } from '../../public/i18n'
i18n import { Authority } from '../../public/coms/index.js'
} from '../../public/i18n';
import {Authority} from '../../public/coms/index.js';
const toJS = mobx.toJS; const toJS = mobx.toJS
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane
const getLabel = WeaLocaleProvider.getLabel
const WeaTable = WeaTableNew.WeaTable;
@inject('hrmPerStatusReport') @inject('hrmPerStatusReport')
@observer @observer
class BasicConditionAnalysis extends React.Component { class BasicConditionAnalysis extends React.Component {
constructor(props) { constructor (props) {
super(props); super(props)
} }
componentWillMount() { componentWillMount () {
this.pre(); this.pre()
} }
componentDidMount() { componentDidMount () {
const{hrmPerStatusReport:store}=this.props; const { hrmPerStatusReport: store } = this.props
store.getRight().then(hasRight=>{ store.getRight().then(hasRight => {
hasRight && this.init(); hasRight && this.init()
}) })
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps (nextProps) {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport
} = this.props;
if (this.props.location.key !== nextProps.location.key) { if (this.props.location.key !== nextProps.location.key) {
this.pre(nextProps); this.pre(nextProps)
hrmPerStatusReport.optionReset(); hrmPerStatusReport.optionReset()
hrmPerStatusReport.conditionReset(); hrmPerStatusReport.conditionReset()
hrmPerStatusReport.paramReset(); hrmPerStatusReport.paramReset()
hrmPerStatusReport.apiFinishedStatusReset(); hrmPerStatusReport.apiFinishedStatusReset()
hrmPerStatusReport.getSearchCondition(); hrmPerStatusReport.getSearchCondition()
hrmPerStatusReport.tabKeyReset(); hrmPerStatusReport.tabKeyReset()
this.refs.page && this.refs.page.click(); this.refs.page && this.refs.page.click()
this.init(); this.init()
} }
} }
pre(nextProps) { pre (nextProps) {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport let pathname
} = this.props;
let pathname;
if (!nextProps) { if (!nextProps) {
pathname = this.props.location.pathname.split('/').pop(); pathname = this.props.location.pathname.split('/').pop()
} else { } else {
pathname = nextProps.location.pathname.split('/').pop(); pathname = nextProps.location.pathname.split('/').pop()
} }
hrmPerStatusReport.optionReset(); hrmPerStatusReport.optionReset()
hrmPerStatusReport.setPathName(pathname); hrmPerStatusReport.setPathName(pathname)
hrmPerStatusReport.pathToTitle(); hrmPerStatusReport.pathToTitle()
hrmPerStatusReport.getCurWindowWidth(); hrmPerStatusReport.getCurWindowWidth()
} }
init() { init () {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport const { pathname } = hrmPerStatusReport
} = this.props; hrmPerStatusReport.setKey('1')
const { if (pathname !== 'basicConditionAnalysis')
pathname hrmPerStatusReport.setIntervalShow(false)
} = hrmPerStatusReport;
hrmPerStatusReport.setKey('1');
if (pathname !== 'basicConditionAnalysis') hrmPerStatusReport.setIntervalShow(false);
} }
getTabPanes() { getTabPanes () {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport const { tabKey } = hrmPerStatusReport
} = this.props;
const {
tabKey
} = hrmPerStatusReport;
return ( return (
<div style={{margin: '8px 16px'}}> <div style={{ margin: '8px 16px' }}>
<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@gs0hfe`} activeKey={tabKey} onTabClick={key => {hrmPerStatusReport.setKey(key); hrmPerStatusReport.getData()}} type="card"> <Tabs
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@9cn3g1`} tab={i18n.label.ageStatus()} key="1"></TabPane> ecId={`${(this && this.props && this.props.ecId) || ''}_Tabs@gs0hfe`}
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@esi1fz`} tab={i18n.label.genderStatus()} key="2"></TabPane> activeKey={tabKey}
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@7y3472`} tab={i18n.label.workingAgeStatus()} key="3"></TabPane> onTabClick={key => {
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@b43k25`} tab={i18n.label.eduStatus()} key="4"></TabPane> hrmPerStatusReport.setKey(key)
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@wlbzlu`} tab={i18n.label.maritalStatus()} key="5"></TabPane> hrmPerStatusReport.getData()
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@uzc70h`} tab={i18n.label.proTitleStatus()} key="6"></TabPane> }}
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@g0s8cy`} tab={i18n.label.rankStatus()} key="7"></TabPane> type='card'
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@w5q6jf`} tab={i18n.label.workNature()} key="10"></TabPane> >
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@4fswhv`} tab={i18n.label.stateStatistics()} key="11"></TabPane> <TabPane
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@k2w6ke`} tab={i18n.label.securtitylevel()} key="12"></TabPane> ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@9cn3g1`}
tab={i18n.label.ageStatus()}
key='1'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@esi1fz`}
tab={i18n.label.genderStatus()}
key='2'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@7y3472`}
tab={getLabel('548320', '司龄状况')}
key='3'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@b43k25`}
tab={i18n.label.eduStatus()}
key='4'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@wlbzlu`}
tab={i18n.label.maritalStatus()}
key='5'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@uzc70h`}
tab={i18n.label.proTitleStatus()}
key='6'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@g0s8cy`}
tab={i18n.label.rankStatus()}
key='7'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@w5q6jf`}
tab={i18n.label.workNature()}
key='10'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@4fswhv`}
tab={i18n.label.stateStatistics()}
key='11'
></TabPane>
<TabPane
ecId={`${
(this && this.props && this.props.ecId) || ''
}_TabPane@k2w6ke`}
tab={i18n.label.securtitylevel()}
key='12'
></TabPane>
</Tabs> </Tabs>
{this.getChart(hrmPerStatusReport.getTabName())} {this.getChart(hrmPerStatusReport.getTabName())}
</div> </div>
) )
} }
getChart(tagName) { getChart (tagName) {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport
} = this.props;
const { const {
option1, option1,
option2, option2,
@ -150,64 +199,73 @@ class BasicConditionAnalysis extends React.Component {
ids, ids,
yAxisData, yAxisData,
linkList, linkList,
winWidth winWidth,
} = hrmPerStatusReport; cmd
} = hrmPerStatusReport
return ( return (
<ReportChart ecId={`${this && this.props && this.props.ecId || ''}_ReportChart@8tx6up`} <ReportChart
ecId={`${
(this && this.props && this.props.ecId) || ''
}_ReportChart@8tx6up`}
option={[toJS(option1), toJS(option2)]} option={[toJS(option1), toJS(option2)]}
isIntervalShow={isIntervalShow} isIntervalShow={isIntervalShow}
interval={interval} interval={interval}
tabKey={tabKey} tabKey={tabKey}
pathname={pathname} pathname={pathname}
chartTitle={[typeof(chartTitle1) == 'function' ? `${chartTitle1()}(Top5)` : chartTitle1, typeof(chartTitle2) == 'function' ? `${chartTitle2()}(Top5)` : chartTitle2]} chartTitle={[
typeof chartTitle1 == 'function'
? `${chartTitle1()}(Top5)`
: chartTitle1,
typeof chartTitle2 == 'function'
? `${chartTitle2()}(Top5)`
: chartTitle2
]}
isChartsShow={[isEchartsShow, isLeftEchartsShow, isRightEchartsShow]} isChartsShow={[isEchartsShow, isLeftEchartsShow, isRightEchartsShow]}
ids={toJS(ids)} ids={toJS(ids)}
yAxisData={toJS(yAxisData)} yAxisData={toJS(yAxisData)}
linkList={linkList} linkList={linkList}
tagName={tagName} tagName={tagName}
cmd={cmd}
winWidth={winWidth} winWidth={winWidth}
setGap={(val) => hrmPerStatusReport.setGap(val)} setGap={val => hrmPerStatusReport.setGap(val)}
getData={(tag) => hrmPerStatusReport.getData(tag)} getData={tag => hrmPerStatusReport.getData(tag)}
showDialog = {() => hrmPerStatusReport.setDialogVisible(true)}
/> />
) )
} }
getDeadline() { getDeadline () {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport const { deadline } = hrmPerStatusReport
} = this.props;
const {
deadline
} = hrmPerStatusReport;
return ( return (
<div style={{color: '#989898', marginTop: 4, marginRight: 16}}> <div style={{ color: '#989898', marginTop: 4, marginRight: 16 }}>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9z095w`}> <Row
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mifi75`}> ecId={`${(this && this.props && this.props.ecId) || ''}_Row@9z095w`}
<p style={{textAlign: 'right'}}>{deadline}</p> >
<Col
ecId={`${(this && this.props && this.props.ecId) || ''}_Col@mifi75`}
>
<p style={{ textAlign: 'right' }}>{deadline}</p>
</Col> </Col>
</Row> </Row>
</div> </div>
) )
} }
search(v) { search (v) {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport hrmPerStatusReport.setSearchCondition(v)
} = this.props; hrmPerStatusReport.getData('search')
hrmPerStatusReport.setSearchCondition(v);
hrmPerStatusReport.getData('search');
} }
handleMenuClick(key) { handleMenuClick (key) {
if (key == '0') this.refs.a.click(); if (key == '0') this.refs.a.click()
} }
render() { render () {
const { const { hrmPerStatusReport } = this.props
hrmPerStatusReport
} = this.props;
const { const {
title, title,
pathname, pathname,
@ -220,72 +278,168 @@ class BasicConditionAnalysis extends React.Component {
isApiOneFinished, isApiOneFinished,
isApiTwoFinished, isApiTwoFinished,
authorityStore, authorityStore,
} = hrmPerStatusReport; dialogVisible
} = hrmPerStatusReport
const btn = [ const btn = [
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zo2az2@1`} type="primary" onClick={() => this.refs.a.click()} > <Button
<a ref='a' href={ addContentPath((pathname == 'departmentStatistics') ? '/api/hrm/resourceState/downloadExcel?cmd=DepartmentRp' + paramsStr: '/api/hrm/resourceState/downloadExcel?cmd=JobRp' + paramsStr)}>{i18n.button.export1()}</a> ecId={`${
</Button>), (this && this.props && this.props.ecId) || ''
(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4f1zjp@2`} type="primary" onClick={() => this.refs.a1.click()} > }_Button@zo2az2@1`}
<a href={addContentPath(href) } ref='a1'>{i18n.button.export()}</a> type='primary'
</Button>), onClick={() => this.refs.a.click()}
(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@e4ss8c@3`} />) >
<a
ref='a'
href={addContentPath(
pathname == 'departmentStatistics'
? '/api/hrm/resourceState/downloadExcel?cmd=DepartmentRp' +
paramsStr
: '/api/hrm/resourceState/downloadExcel?cmd=JobRp' + paramsStr
)}
>
{i18n.button.export1()}
</a>
</Button>,
<Button
ecId={`${
(this && this.props && this.props.ecId) || ''
}_Button@4f1zjp@2`}
type='primary'
onClick={() => this.refs.a1.click()}
>
<a href={addContentPath(href)} ref='a1'>
{i18n.button.export()}
</a>
</Button>,
<WeaMoreButton
ecId={`${
(this && this.props && this.props.ecId) || ''
}_WeaMoreButton@e4ss8c@3`}
/>
] ]
const btn1 = btn.slice(0, 1); const btn1 = btn.slice(0, 1)
const btn2 = btn.slice(1, 3); const btn2 = btn.slice(1, 3)
const dropMenuDatas = [{ const dropMenuDatas = [
key: '0', {
content: i18n.button.export1(), key: '0',
icon: <i className='icon-coms-leading-in' /> content: i18n.button.export1(),
}, { icon: <i className='icon-coms-leading-in' />
key: '1', },
content: i18n.button.more(), {
disabled: true, key: '1',
icon: <i className='icon-coms-task-list' /> content: i18n.button.more(),
}, ] disabled: true,
icon: <i className='icon-coms-task-list' />
}
]
const dropMenuDatas1 = dropMenuDatas.slice(0, 1); const dropMenuDatas1 = dropMenuDatas.slice(0, 1)
const dropMenuDatas2 = dropMenuDatas.slice(1, 2); const dropMenuDatas2 = dropMenuDatas.slice(1, 2)
return ( return (
<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@q2pgvy`} store={authorityStore}> <Authority
<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@565xx0`} spinning={ !(isApiOneFinished && isApiTwoFinished)}> ecId={`${
<div style={{backgroundColor: '#fff'}} ref='page'> (this && this.props && this.props.ecId) || ''
<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5l9z5o`} }_Authority@q2pgvy`}
datas={(pathname == 'departmentStatistics' || pathname == 'postStatistics') ? dropMenuDatas1 : dropMenuDatas2} store={authorityStore}
onClick={(e) => this.handleMenuClick(e)} >
collectParams={{favname: title,favouritetype:5}} <Spin
> ecId={`${(this && this.props && this.props.ecId) || ''}_Spin@565xx0`}
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qwurqz`} spinning={!(isApiOneFinished && isApiTwoFinished)}
title={title} >
icon={<i className='icon-coms-hrm' />} <div style={{ backgroundColor: '#fff' }} ref='page'>
iconBgcolor='#217346' <WeaRightMenu
loading={true} ecId={`${
buttons={ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? btn1 : []} (this && this.props && this.props.ecId) || ''
showDropIcon={true} }_WeaRightMenu@5l9z5o`}
dropMenuDatas={(pathname == 'departmentStatistics' || pathname == 'postStatistics') ? dropMenuDatas1 : dropMenuDatas2} datas={
onDropMenuClick={(e) => this.handleMenuClick(e)} pathname == 'departmentStatistics' ||
> pathname == 'postStatistics'
<RadioGroupWrapper ecId={`${this && this.props && this.props.ecId || ''}_RadioGroupWrapper@2kc6vr`} /> ? dropMenuDatas1
{pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''} : dropMenuDatas2
{pathname !== 'basicConditionAnalysis' ? <DataStatistics ecId={`${this && this.props && this.props.ecId || ''}_DataStatistics@9vnmnn`} countDatas={toJS(countDatas)} pathname={pathname} /> : '' } }
{pathname !== 'basicConditionAnalysis' ? this.getChart() : '' } onClick={e => this.handleMenuClick(e)}
{this.getDeadline()} collectParams={{ favname: title, favouritetype: 5 }}
</WeaTop> >
<WeaTop
ecId={`${
(this && this.props && this.props.ecId) || ''
}_WeaTop@qwurqz`}
title={title}
icon={<i className='icon-coms-hrm' />}
iconBgcolor='#217346'
loading={true}
buttons={
pathname == 'departmentStatistics' ||
pathname == 'postStatistics'
? btn1
: []
}
showDropIcon={true}
dropMenuDatas={
pathname == 'departmentStatistics' ||
pathname == 'postStatistics'
? dropMenuDatas1
: dropMenuDatas2
}
onDropMenuClick={e => this.handleMenuClick(e)}
>
<RadioGroupWrapper
ecId={`${
(this && this.props && this.props.ecId) || ''
}_RadioGroupWrapper@2kc6vr`}
/>
{pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''}
{pathname !== 'basicConditionAnalysis' ? (
<DataStatistics
ecId={`${
(this && this.props && this.props.ecId) || ''
}_DataStatistics@9vnmnn`}
countDatas={toJS(countDatas)}
pathname={pathname}
/>
) : (
''
)}
{pathname !== 'basicConditionAnalysis' ? this.getChart() : ''}
{this.getDeadline()}
</WeaTop>
<More ecId={`${this && this.props && this.props.ecId || ''}_More@6dxvt0`} <More
title={hrmPerStatusReport.getChartTitle()} ecId={`${
visible={visible} (this && this.props && this.props.ecId) || ''
buttons={btn2} }_More@6dxvt0`}
onCancel={() => hrmPerStatusReport.setVisible(false)} title={hrmPerStatusReport.getChartTitle()}
search={(v) => this.search(v)} visible={visible}
tableStore={tableStore} buttons={btn2}
loading={tableStore.loading} onCancel={() => hrmPerStatusReport.setVisible(false)}
strokeColor={'#6FBCEA'} search={v => this.search(v)}
/> tableStore={tableStore}
</WeaRightMenu> loading={tableStore.loading}
strokeColor={'#6FBCEA'}
/>
<WeaDialog
onCancel={() =>hrmPerStatusReport.setDialogVisible(false)}
title={'明细数据'}
visible={dialogVisible}
style={{ width: 800, height: 500 }}
hasScroll
buttons={<Button type="primary">导出明细</Button>}
>
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
comsWeaTableStore={tableStore}
hasOrder={true}
needScroll={true}
//getColumns={c => this.reRenderColumns(c)}
//onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
/>
</WeaDialog>
</WeaRightMenu>
</div> </div>
</Spin> </Spin>
</Authority> </Authority>
@ -293,5 +447,4 @@ class BasicConditionAnalysis extends React.Component {
} }
} }
export default BasicConditionAnalysis export default BasicConditionAnalysis

722
pc4mobx/hrm/components/report/ReportChart.js
View File

@ -1,169 +1,225 @@
import { import { WeaInput, WeaEchart,WeaLocaleProvider } from 'ecCom'
WeaInput,
WeaEchart,
} from 'ecCom'
import { import { Row, Col, message } from 'antd'
Row, import { i18n } from '../../public/i18n'
Col, const getLabel = WeaLocaleProvider.getLabel;
message,
} from 'antd';
import {
i18n
} from '../../public/i18n';
import React from 'react' import React from 'react'
import { import { jumpToHrmDept } from '../../util/pulic-func'
jumpToHrmDept
} from '../../util/pulic-func'
class ReportChart extends React.Component { class ReportChart extends React.Component {
constructor(props) { constructor (props) {
super(props); super(props)
} }
componentDidUpdate() { componentDidUpdate () {
if (this.refs.echart) this.refs.echart.paint(); if (this.refs.echart) this.refs.echart.paint()
if (this.refs.echart1) this.refs.echart1.paint(); if (this.refs.echart1) this.refs.echart1.paint()
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps (nextProps) {
if (this.props.winWidth !== nextProps.winWidth) { if (this.props.winWidth !== nextProps.winWidth) {
if (this.refs.echart) this.refs.echart.chart.resize(); if (this.refs.echart) this.refs.echart.chart.resize()
if (this.refs.echart1) this.refs.echart1.chart.resize(); if (this.refs.echart1) this.refs.echart1.chart.resize()
} }
} }
getDOM(interval, key, setGap, getData, isIntervalShow, pathname, tag, isChartsShow, chartTitle) { getDOM (
interval,
key,
setGap,
getData,
isIntervalShow,
pathname,
tag,
isChartsShow,
chartTitle
) {
return ( return (
<div style={{position: 'absolute', right: 0}}> <div style={{ position: 'absolute', right: 0 }}>
<div style={ isIntervalShow ? {display: 'block',float: 'left'} : {display: 'none'} }> <div
<div className='hrm-report-interval'> style={
{this.getName(key) + ':'} isIntervalShow
</div> ? { display: 'block', float: 'left' }
<div style={{width: 70, paddingTop: 8, paddingLeft: 0}} className='hrm-report-interval hrm-report-input'> : { display: 'none' }
<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@f9l569`} }
type="text" >
<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' viewAttr='2'
value={interval} value={interval}
onChange={(val) => setGap(val)} onChange={val => setGap(val)}
/> />
</div> </div>
<div className='hrm-report-interval' style={{paddingLeft: 0}}> <div className='hrm-report-interval' style={{ paddingLeft: 0 }}>
{this.getSuffix(key)} {this.getSuffix(key)}
</div> </div>
<div className='hrm-report-interval' style={{fontSize: 16}}> <div className='hrm-report-interval' style={{ fontSize: 16 }}>
<a onClick={() => getData()} className='hrm-report-linkStyle' title={i18n.button.refresh()}> <a
onClick={() => getData()}
className='hrm-report-linkStyle'
title={i18n.button.refresh()}
>
<i className='icon-coms-Refresh' /> <i className='icon-coms-Refresh' />
</a> </a>
</div> </div>
</div> </div>
<div style={pathname !== 'basicConditionAnalysis' ? {display: 'block', float: 'left', padding: '10px 0'} : {display: 'none'} }> <div
<a onClick={() => getData(tag)} className='hrm-report-linkStyle'>{i18n.button.more()}</a> style={
</div> pathname !== 'basicConditionAnalysis'
<div className='hrm-report-interval' style={{padding: '8px 20px 10px 10px', fontSize: 16}}> ? { display: 'block', float: 'left', padding: '10px 0' }
{ isChartsShow ? <a onClick={() => this.getImgSrc(tag, chartTitle)} className='hrm-report-linkStyle' title={i18n.button.saveAsImage()}> : { display: 'none' }
<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>
} }
>
<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>
</div> </div>
) )
} }
getName(key) { getName (key) {
switch (key) { switch (key) {
case '1': case '1':
return i18n.label.ageRange(); return i18n.label.ageRange()
case '3': case '3':
return i18n.label.workingAgeRange(); return getLabel('548321', "司龄区间")
case '7': case '7':
return i18n.label.rankingInterval(); return i18n.label.rankingInterval()
} }
} }
getSuffix(key) { getSuffix (key) {
switch (key) { switch (key) {
case '7': case '7':
return i18n.label.level(); return i18n.label.level()
default: default:
return i18n.label.year(); return i18n.label.year()
} }
} }
getImgSrc (tag, chartTitle) {
getImgSrc(tag, chartTitle) { let cvs = document.getElementsByTagName('canvas')
let cvs = document.getElementsByTagName('canvas');
if (tag !== 'right') { if (tag !== 'right') {
this.downloadCvs2Img(cvs[0], chartTitle); this.downloadCvs2Img(cvs[0], chartTitle)
} else { } else {
this.downloadCvs2Img(cvs[1], chartTitle); this.downloadCvs2Img(cvs[1], chartTitle)
} }
} }
downloadCvs2Img(cvs, chartTitle) { downloadCvs2Img (cvs, chartTitle) {
let $a = document.createElement('a'); let $a = document.createElement('a')
$a.download = chartTitle + '.jpg'; $a.download = chartTitle + '.jpg'
$a.target = '_blank'; $a.target = '_blank'
let url; let url
if (cvs) { if (cvs) {
url = cvs.toDataURL("image/jpg"); url = cvs.toDataURL('image/jpg')
} else { } else {
message.info(i18n.message.dataNone()); message.info(i18n.message.dataNone())
} }
if (url) $a.href = url; if (url) $a.href = url
if (typeof MouseEvent === 'function') { if (typeof MouseEvent === 'function') {
var evt = new MouseEvent('click', { var evt = new MouseEvent('click', {
view: window, view: window,
bubbles: true, bubbles: true,
cancelable: false cancelable: false
}); })
$a.dispatchEvent(evt); $a.dispatchEvent(evt)
} else { } else {
if (window.navigator.msSaveOrOpenBlob) { if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(url.split(',')[1]); var bstr = atob(url.split(',')[1])
var n = bstr.length; var n = bstr.length
var u8arr = new Uint8Array(n); var u8arr = new Uint8Array(n)
while (n--) { while (n--) {
u8arr[n] = bstr.charCodeAt(n); u8arr[n] = bstr.charCodeAt(n)
} }
var blob = new Blob([u8arr]); var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg'); window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg')
} else { } else {
var html = '' + var html =
'' +
'<body style="margin:0;">' + '<body style="margin:0;">' +
'<img src="' + url + '" style="max-width:100%;" title="" />' + '<img src="' +
'</body>'; url +
var tab = window.open(); '" style="max-width:100%;" title="" />' +
tab.document.write(html); '</body>'
var tab = window.open()
tab.document.write(html)
} }
} }
} }
chartAction(chart, ids, yAxisData, linkList) { chartAction (chart, ids, yAxisData, linkList) {
chart.off('click'); chart.off('click')
chart.on('click', (params) => this.handleClick(params, ids, yAxisData, linkList)); chart.on('click', params =>
this.handleClick(params, ids, yAxisData, linkList)
)
} }
handleClick(params, ids, yAxisData, linkList) { // #QC3421143# pie图增加点击事件,弹出框显示明细
const { basicChartAction = chart => {
pathname chart.off("click");
} = this.props; chart.on("click", params => {
if (pathname !== 'departmentStatistics') return false; this.handleBasicClick(params);
let anid = params.event.target.anid; });
};
handleBasicClick (params) {
const { pathname,cmd,showDialog } = this.props
if (pathname !== 'basicConditionAnalysis') return false;
if (cmd == 'AgeRp' || cmd == 'SexRp' || cmd == 'SeniorityRp' || cmd == 'EduRp') {
console.log("params", params);
showDialog();
}
}
handleClick (params, ids, yAxisData, linkList) {
const { pathname } = this.props
if (pathname !== 'departmentStatistics') return false
let anid = params.event.target.anid
if (!anid) { if (!anid) {
return return
} }
let index = anid.split('_')[1]; let index = anid.split('_')[1]
jumpToHrmDept(ids[index]) jumpToHrmDept(ids[index])
} }
render() { render () {
const { const {
option, option,
isIntervalShow, isIntervalShow,
@ -178,107 +234,393 @@ class ReportChart extends React.Component {
yAxisData, yAxisData,
linkList, linkList,
tagName tagName
} = this.props; } = this.props
return ( return (
<div style={{padding: '8px 16px'}}> <div style={{ padding: '8px 16px' }}>
{(pathname == 'basicConditionAnalysis') ? (<div style={{height: 500, position: 'relative'}}> {pathname == 'basicConditionAnalysis' ? (
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bk161k`}> <div style={{ height: 500, position: 'relative' }}>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tiem4w`} span={24}> <Row
<div style={{ height: 50 }}> ecId={`${
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], tagName)} (this && this.props && this.props.ecId) || ''
</div> }_Row@bk161k`}
</Col> >
</Row> <Col
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yyxmps`}> ecId={`${
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r3yrz9`} span={24}> (this && this.props && this.props.ecId) || ''
{isChartsShow[0] ? (<div style={{height: 400}}> }_Col@tiem4w`}
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@94v101`} ref="echart" option={option[0]} useDefault={false}/> span={24}
</div>) >
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}> <div style={{ height: 50 }}>
<div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div> {this.getDOM(
<div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div> interval,
</div>} tabKey,
</Col> setGap,
</Row> getData,
</div>) : ''} isIntervalShow,
{ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? <div style={{height: 350, border: '1px solid #DDD', borderRadius: 3}}> pathname,
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xs2v2c`}> pathname,
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@e1wc91`} span={24}> isChartsShow[0],
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}> tagName
<div style={{display: 'block', width: '30%', height: '100%', float: 'left', padding: '11px 0 12px 16px' }}>{chartTitle[0]}</div> )}
<div style={{ height: 50 }}> </div>
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], chartTitle[0])} </Col>
</div> </Row>
</div> <Row
</Col> ecId={`${
</Row> (this && this.props && this.props.ecId) || ''
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zdbixg`}> }_Row@yyxmps`}
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cpfhsg`} span={20} offset={2}> >
{isChartsShow[0] ? (<div style={{height: 300}}> <Col
<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)}/> ecId={`${
</div>) (this && this.props && this.props.ecId) || ''
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}> }_Col@r3yrz9`}
<div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div> span={24}
<div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div> >
</div>} {isChartsShow[0] ? (
</Col> <div style={{ height: 400 }}>
</Row> <WeaEchart
</div> : ''} ecId={`${
{ (pathname == 'jobStatusStatistics') ? <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d50f92`}> (this && this.props && this.props.ecId) || ''
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4odteb`} span={12}> }_WeaEchart@94v101`}
<div style={{height: 350, marginRight: 8, border: '1px solid #DDD', borderRadius: 3}}> ref='echart'
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9vp3z8`}> option={option[0]}
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j8v6ki`}> useDefault={false}
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}> chartAction={chart =>
<div style={{height: '100%', padding: '11px 0 12px 16px', float: 'left' }}>{chartTitle[0]}</div> this.basicChartAction(chart)
<div style={{height: 50 }}> }
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'left', isChartsShow[1], chartTitle[0])} />
</div> </div>
</div> ) : (
</Col> <div
</Row> style={{
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z1e7gk`}> position: 'absolute',
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6gm6oz`}> top: 100,
{isChartsShow[1] ? <div style={{height: 300}}> left: '50%',
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@mgu4rb`} ref="echart" option={option[0]} useDefault={false}/> marginLeft: -40,
</div> textAlign: 'center'
: <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 style={{ fontSize: 80 }}>
</div> <i className='icon-coms-blank'></i>
} </div>
</Col> <div style={{ fontSize: 20, color: '#B2B2B2' }}>
</Row> {i18n.message.dataNone()}
</div> </div>
</Col> </div>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j3wbd0`} span={12}> )}
<div style={{height: 350, marginLeft: 8, border: '1px solid #DDD', borderRadius: 3}}> </Col>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kx8mey`}> </Row>
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d3qj2t`}> </div>
<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])} {pathname == 'departmentStatistics' || pathname == 'postStatistics' ? (
</div> <div
</div> style={{ height: 350, border: '1px solid #DDD', borderRadius: 3 }}
</Col> >
</Row> <Row
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@i0dgsy`}> ecId={`${
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@svragf`}> (this && this.props && this.props.ecId) || ''
{isChartsShow[2] ? <div style={{height: 300}}> }_Row@xs2v2c`}
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@ohcxa9`} ref="echart1" option={option[1]} useDefault={false}/> >
</div> <Col
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -20, textAlign: 'center'}}> ecId={`${
<div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div> (this && this.props && this.props.ecId) || ''
<div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div> }_Col@e1wc91`}
</div>} span={24}
</Col> >
</Row> <div
</div> style={{
</Col> height: 40,
</Row> : ''} backgroundColor: '#F9F9F9',
</div> 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>
) )
} }
} }

12
pc4mobx/hrm/stores/perStatusReport.js
View File

@ -332,7 +332,7 @@ export class HrmPerStatusReport {
case '2': case '2':
return getLabel('386389', "性别状况"); return getLabel('386389', "性别状况");
case '3': case '3':
return getLabel('386390', "工龄状况"); return getLabel('548320', "司龄状况");
case '4': case '4':
return getLabel('386391', "学历状况"); return getLabel('386391', "学历状况");
case '5': case '5':
@ -545,6 +545,16 @@ export class HrmPerStatusReport {
} }
} }
/**************** #QC3421143# 基本状况分析明细数据**************************/
@observable dialogVisible = false;
@observable tableStore = new TableStore();
setDialogVisible(bool) {
this.dialogVisible = bool;
}
/**************** #QC3421143# 基本状况分析明细数据**************************/
setIntervalShow(bool) { setIntervalShow(bool) {
this.isIntervalShow = bool; this.isIntervalShow = bool;
} }