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

447
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,71 +278,167 @@ 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', key: '0',
content: i18n.button.export1(), content: i18n.button.export1(),
icon: <i className='icon-coms-leading-in' /> icon: <i className='icon-coms-leading-in' />
}, { },
{
key: '1', key: '1',
content: i18n.button.more(), content: i18n.button.more(),
disabled: true, disabled: true,
icon: <i className='icon-coms-task-list' /> 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}}
> >
<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qwurqz`} <Spin
ecId={`${(this && this.props && this.props.ecId) || ''}_Spin@565xx0`}
spinning={!(isApiOneFinished && isApiTwoFinished)}
>
<div style={{ backgroundColor: '#fff' }} ref='page'>
<WeaRightMenu
ecId={`${
(this && this.props && this.props.ecId) || ''
}_WeaRightMenu@5l9z5o`}
datas={
pathname == 'departmentStatistics' ||
pathname == 'postStatistics'
? dropMenuDatas1
: dropMenuDatas2
}
onClick={e => this.handleMenuClick(e)}
collectParams={{ favname: title, favouritetype: 5 }}
>
<WeaTop
ecId={`${
(this && this.props && this.props.ecId) || ''
}_WeaTop@qwurqz`}
title={title} title={title}
icon={<i className='icon-coms-hrm' />} icon={<i className='icon-coms-hrm' />}
iconBgcolor='#217346' iconBgcolor='#217346'
loading={true} loading={true}
buttons={ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? btn1 : []} buttons={
pathname == 'departmentStatistics' ||
pathname == 'postStatistics'
? btn1
: []
}
showDropIcon={true} showDropIcon={true}
dropMenuDatas={(pathname == 'departmentStatistics' || pathname == 'postStatistics') ? dropMenuDatas1 : dropMenuDatas2} dropMenuDatas={
onDropMenuClick={(e) => this.handleMenuClick(e)} pathname == 'departmentStatistics' ||
pathname == 'postStatistics'
? dropMenuDatas1
: dropMenuDatas2
}
onDropMenuClick={e => this.handleMenuClick(e)}
> >
<RadioGroupWrapper ecId={`${this && this.props && this.props.ecId || ''}_RadioGroupWrapper@2kc6vr`} /> <RadioGroupWrapper
ecId={`${
(this && this.props && this.props.ecId) || ''
}_RadioGroupWrapper@2kc6vr`}
/>
{pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''} {pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''}
{pathname !== 'basicConditionAnalysis' ? <DataStatistics ecId={`${this && this.props && this.props.ecId || ''}_DataStatistics@9vnmnn`} countDatas={toJS(countDatas)} pathname={pathname} /> : '' } {pathname !== 'basicConditionAnalysis' ? (
{pathname !== 'basicConditionAnalysis' ? this.getChart() : '' } <DataStatistics
ecId={`${
(this && this.props && this.props.ecId) || ''
}_DataStatistics@9vnmnn`}
countDatas={toJS(countDatas)}
pathname={pathname}
/>
) : (
''
)}
{pathname !== 'basicConditionAnalysis' ? this.getChart() : ''}
{this.getDeadline()} {this.getDeadline()}
</WeaTop> </WeaTop>
<More ecId={`${this && this.props && this.props.ecId || ''}_More@6dxvt0`} <More
ecId={`${
(this && this.props && this.props.ecId) || ''
}_More@6dxvt0`}
title={hrmPerStatusReport.getChartTitle()} title={hrmPerStatusReport.getChartTitle()}
visible={visible} visible={visible}
buttons={btn2} buttons={btn2}
onCancel={() => hrmPerStatusReport.setVisible(false)} onCancel={() => hrmPerStatusReport.setVisible(false)}
search={(v) => this.search(v)} search={v => this.search(v)}
tableStore={tableStore} tableStore={tableStore}
loading={tableStore.loading} loading={tableStore.loading}
strokeColor={'#6FBCEA'} 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> </WeaRightMenu>
</div> </div>
</Spin> </Spin>
@ -293,5 +447,4 @@ class BasicConditionAnalysis extends React.Component {
} }
} }
export default BasicConditionAnalysis export default BasicConditionAnalysis

684
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,106 +234,392 @@ 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
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 }}> <div style={{ height: 50 }}>
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], tagName)} {this.getDOM(
interval,
tabKey,
setGap,
getData,
isIntervalShow,
pathname,
pathname,
isChartsShow[0],
tagName
)}
</div> </div>
</Col> </Col>
</Row> </Row>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yyxmps`}> <Row
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r3yrz9`} span={24}> ecId={`${
{isChartsShow[0] ? (<div style={{height: 400}}> (this && this.props && this.props.ecId) || ''
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@94v101`} ref="echart" option={option[0]} useDefault={false}/> }_Row@yyxmps`}
</div>) >
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}> <Col
<div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div> ecId={`${
<div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div> (this && this.props && this.props.ecId) || ''
</div>} }_Col@r3yrz9`}
</Col> span={24}
</Row> >
</div>) : ''} {isChartsShow[0] ? (
{ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? <div style={{height: 350, border: '1px solid #DDD', borderRadius: 3}}> <div style={{ height: 400 }}>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xs2v2c`}> <WeaEchart
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@e1wc91`} span={24}> ecId={`${
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}> (this && this.props && this.props.ecId) || ''
<div style={{display: 'block', width: '30%', height: '100%', float: 'left', padding: '11px 0 12px 16px' }}>{chartTitle[0]}</div> }_WeaEchart@94v101`}
<div style={{ height: 50 }}> ref='echart'
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], chartTitle[0])} option={option[0]}
</div> useDefault={false}
</div> chartAction={chart =>
</Col> this.basicChartAction(chart)
</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>
} }
/>
</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> </Col>
</Row> </Row>
</div> </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`}> {pathname == 'departmentStatistics' || pathname == 'postStatistics' ? (
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d3qj2t`}> <div
<div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}> style={{ height: 350, border: '1px solid #DDD', borderRadius: 3 }}
<div style={{height: '100%', padding: '11px 0 12px 16px', float: 'left' }}>{chartTitle[1]}</div> >
<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 }}> <div style={{ height: 50 }}>
{this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'right', isChartsShow[2], chartTitle[1])} {this.getDOM(
interval,
tabKey,
setGap,
getData,
isIntervalShow,
pathname,
pathname,
isChartsShow[0],
chartTitle[0]
)}
</div> </div>
</div> </div>
</Col> </Col>
</Row> </Row>
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@i0dgsy`}> <Row
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@svragf`}> ecId={`${
{isChartsShow[2] ? <div style={{height: 300}}> (this && this.props && this.props.ecId) || ''
<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@ohcxa9`} ref="echart1" option={option[1]} useDefault={false}/> }_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>
: <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -20, textAlign: 'center'}}> ) : (
<div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div> <div
<div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div> style={{
</div>} 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> </Col>
</Row> </Row>
</div> </div>
</Col> </Col>
</Row> : ''} <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> </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;
} }