From b73ef8e8a55e7ec1f74fbbfec046af4e47831c61 Mon Sep 17 00:00:00 2001 From: Chengliang <1546584672@qq.com> Date: Wed, 11 Dec 2024 17:56:58 +0800 Subject: [PATCH] =?UTF-8?q?#QC3421143#=20=E5=9F=BA=E6=9C=AC=E7=8A=B6?= =?UTF-8?q?=E5=86=B5=E5=88=86=E6=9E=90=E6=98=8E=E7=BB=86=E6=95=B0=E6=8D=AE?= =?UTF-8?q?,=E5=B7=A5=E9=BE=84=E7=8A=B6=E5=86=B5=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=8F=B8=E9=BE=84=E7=8A=B6=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../report/BasicConditionAnalysis.js | 509 +++++++----- pc4mobx/hrm/components/report/ReportChart.js | 728 +++++++++++++----- pc4mobx/hrm/stores/perStatusReport.js | 12 +- 3 files changed, 877 insertions(+), 372 deletions(-) diff --git a/pc4mobx/hrm/components/report/BasicConditionAnalysis.js b/pc4mobx/hrm/components/report/BasicConditionAnalysis.js index e49121f..ca6db5a 100644 --- a/pc4mobx/hrm/components/report/BasicConditionAnalysis.js +++ b/pc4mobx/hrm/components/report/BasicConditionAnalysis.js @@ -1,7 +1,4 @@ -import { - inject, - observer, -} from 'mobx-react'; +import { inject, observer } from 'mobx-react' import { WeaTop, @@ -10,15 +7,13 @@ import { WeaRightMenu, WeaRadioGroup, WeaMoreButton, -} from 'ecCom'; - + WeaLocaleProvider, + WeaDialog +} from 'ecCom' import { - Row, - Col, - Tabs, - Spin, - Button, -} from 'antd' + WeaTableNew +} from 'comsMobx' +import { Row, Col, Tabs, Spin, Button } from 'antd' import React from 'react' import * as mobx from 'mobx' @@ -27,114 +22,168 @@ import RadioGroupWrapper from './RadioGroupWrapper' import ReportChart from './ReportChart' import DataStatistics from './DataStatistics' import More from './More' -import {addContentPath} from '../../util/index.js' +import { addContentPath } from '../../util/index.js' -import '../../style/report.css'; -import { - i18n -} from '../../public/i18n'; -import {Authority} from '../../public/coms/index.js'; +import '../../style/report.css' +import { i18n } from '../../public/i18n' +import { Authority } from '../../public/coms/index.js' -const toJS = mobx.toJS; -const TabPane = Tabs.TabPane; +const toJS = mobx.toJS +const TabPane = Tabs.TabPane +const getLabel = WeaLocaleProvider.getLabel + +const WeaTable = WeaTableNew.WeaTable; @inject('hrmPerStatusReport') - @observer class BasicConditionAnalysis extends React.Component { - constructor(props) { - super(props); + constructor (props) { + super(props) } - componentWillMount() { - this.pre(); + componentWillMount () { + this.pre() } - componentDidMount() { - const{hrmPerStatusReport:store}=this.props; - store.getRight().then(hasRight=>{ - hasRight && this.init(); + componentDidMount () { + const { hrmPerStatusReport: store } = this.props + store.getRight().then(hasRight => { + hasRight && this.init() }) } - componentWillReceiveProps(nextProps) { - const { - hrmPerStatusReport - } = this.props; + componentWillReceiveProps (nextProps) { + const { hrmPerStatusReport } = this.props if (this.props.location.key !== nextProps.location.key) { - this.pre(nextProps); - hrmPerStatusReport.optionReset(); - hrmPerStatusReport.conditionReset(); - hrmPerStatusReport.paramReset(); - hrmPerStatusReport.apiFinishedStatusReset(); - hrmPerStatusReport.getSearchCondition(); - hrmPerStatusReport.tabKeyReset(); - this.refs.page && this.refs.page.click(); - this.init(); + this.pre(nextProps) + hrmPerStatusReport.optionReset() + hrmPerStatusReport.conditionReset() + hrmPerStatusReport.paramReset() + hrmPerStatusReport.apiFinishedStatusReset() + hrmPerStatusReport.getSearchCondition() + hrmPerStatusReport.tabKeyReset() + this.refs.page && this.refs.page.click() + this.init() } } - pre(nextProps) { - const { - hrmPerStatusReport - } = this.props; - let pathname; + pre (nextProps) { + const { hrmPerStatusReport } = this.props + let pathname if (!nextProps) { - pathname = this.props.location.pathname.split('/').pop(); + pathname = this.props.location.pathname.split('/').pop() } else { - pathname = nextProps.location.pathname.split('/').pop(); + pathname = nextProps.location.pathname.split('/').pop() } - hrmPerStatusReport.optionReset(); - hrmPerStatusReport.setPathName(pathname); - hrmPerStatusReport.pathToTitle(); - hrmPerStatusReport.getCurWindowWidth(); + hrmPerStatusReport.optionReset() + hrmPerStatusReport.setPathName(pathname) + hrmPerStatusReport.pathToTitle() + hrmPerStatusReport.getCurWindowWidth() } - init() { - const { - hrmPerStatusReport - } = this.props; - const { - pathname - } = hrmPerStatusReport; - hrmPerStatusReport.setKey('1'); - if (pathname !== 'basicConditionAnalysis') hrmPerStatusReport.setIntervalShow(false); + init () { + const { hrmPerStatusReport } = this.props + const { pathname } = hrmPerStatusReport + hrmPerStatusReport.setKey('1') + if (pathname !== 'basicConditionAnalysis') + hrmPerStatusReport.setIntervalShow(false) } - getTabPanes() { - const { - hrmPerStatusReport - } = this.props; - const { - tabKey - } = hrmPerStatusReport; + getTabPanes () { + const { hrmPerStatusReport } = this.props + const { tabKey } = hrmPerStatusReport return ( -
- {hrmPerStatusReport.setKey(key); hrmPerStatusReport.getData()}} type="card"> - - - - - - - - - - +
+ { + hrmPerStatusReport.setKey(key) + hrmPerStatusReport.getData() + }} + type='card' + > + + + + + + + + + + {this.getChart(hrmPerStatusReport.getTabName())}
- ) } - getChart(tagName) { - const { - hrmPerStatusReport - } = this.props; + getChart (tagName) { + const { hrmPerStatusReport } = this.props const { option1, option2, @@ -150,64 +199,73 @@ class BasicConditionAnalysis extends React.Component { ids, yAxisData, linkList, - winWidth - } = hrmPerStatusReport; + winWidth, + cmd + } = hrmPerStatusReport return ( - hrmPerStatusReport.setGap(val)} - getData={(tag) => hrmPerStatusReport.getData(tag)} + setGap={val => hrmPerStatusReport.setGap(val)} + getData={tag => hrmPerStatusReport.getData(tag)} + showDialog = {() => hrmPerStatusReport.setDialogVisible(true)} /> ) } - getDeadline() { - const { - hrmPerStatusReport - } = this.props; - const { - deadline - } = hrmPerStatusReport; + getDeadline () { + const { hrmPerStatusReport } = this.props + const { deadline } = hrmPerStatusReport return ( -
- - -

{deadline}

+
+ + +

{deadline}
) } - search(v) { - const { - hrmPerStatusReport - } = this.props; - hrmPerStatusReport.setSearchCondition(v); - hrmPerStatusReport.getData('search'); + search (v) { + const { hrmPerStatusReport } = this.props + hrmPerStatusReport.setSearchCondition(v) + hrmPerStatusReport.getData('search') } - handleMenuClick(key) { - if (key == '0') this.refs.a.click(); + handleMenuClick (key) { + if (key == '0') this.refs.a.click() } - render() { - const { - hrmPerStatusReport - } = this.props; + render () { + const { hrmPerStatusReport } = this.props const { title, pathname, @@ -220,72 +278,168 @@ class BasicConditionAnalysis extends React.Component { isApiOneFinished, isApiTwoFinished, authorityStore, - } = hrmPerStatusReport; + dialogVisible + } = hrmPerStatusReport const btn = [ - (), - (), - () + , + , + ] - const btn1 = btn.slice(0, 1); - const btn2 = btn.slice(1, 3); + const btn1 = btn.slice(0, 1) + const btn2 = btn.slice(1, 3) - const dropMenuDatas = [{ - key: '0', - content: i18n.button.export1(), - icon: - }, { - key: '1', - content: i18n.button.more(), - disabled: true, - icon: - }, ] + const dropMenuDatas = [ + { + key: '0', + content: i18n.button.export1(), + icon: + }, + { + key: '1', + content: i18n.button.more(), + disabled: true, + icon: + } + ] - const dropMenuDatas1 = dropMenuDatas.slice(0, 1); - const dropMenuDatas2 = dropMenuDatas.slice(1, 2); + const dropMenuDatas1 = dropMenuDatas.slice(0, 1) + const dropMenuDatas2 = dropMenuDatas.slice(1, 2) return ( - - -
- this.handleMenuClick(e)} - collectParams={{favname: title,favouritetype:5}} - > - } - iconBgcolor='#217346' - loading={true} - buttons={ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? btn1 : []} - showDropIcon={true} - dropMenuDatas={(pathname == 'departmentStatistics' || pathname == 'postStatistics') ? dropMenuDatas1 : dropMenuDatas2} - onDropMenuClick={(e) => this.handleMenuClick(e)} - > - - {pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''} - {pathname !== 'basicConditionAnalysis' ? : '' } - {pathname !== 'basicConditionAnalysis' ? this.getChart() : '' } - {this.getDeadline()} - + + +
+ this.handleMenuClick(e)} + collectParams={{ favname: title, favouritetype: 5 }} + > + } + iconBgcolor='#217346' + loading={true} + buttons={ + pathname == 'departmentStatistics' || + pathname == 'postStatistics' + ? btn1 + : [] + } + showDropIcon={true} + dropMenuDatas={ + pathname == 'departmentStatistics' || + pathname == 'postStatistics' + ? dropMenuDatas1 + : dropMenuDatas2 + } + onDropMenuClick={e => this.handleMenuClick(e)} + > + + {pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''} + {pathname !== 'basicConditionAnalysis' ? ( + + ) : ( + '' + )} + {pathname !== 'basicConditionAnalysis' ? this.getChart() : ''} + {this.getDeadline()} + - hrmPerStatusReport.setVisible(false)} - search={(v) => this.search(v)} - tableStore={tableStore} - loading={tableStore.loading} - strokeColor={'#6FBCEA'} - /> - + hrmPerStatusReport.setVisible(false)} + search={v => this.search(v)} + tableStore={tableStore} + loading={tableStore.loading} + strokeColor={'#6FBCEA'} + /> + + hrmPerStatusReport.setDialogVisible(false)} + title={'明细数据'} + visible={dialogVisible} + style={{ width: 800, height: 500 }} + hasScroll + buttons={} + > + this.reRenderColumns(c)} + //onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)} + /> + + +
@@ -293,5 +447,4 @@ class BasicConditionAnalysis extends React.Component { } } - -export default BasicConditionAnalysis \ No newline at end of file +export default BasicConditionAnalysis diff --git a/pc4mobx/hrm/components/report/ReportChart.js b/pc4mobx/hrm/components/report/ReportChart.js index 7646cb1..d1033f5 100644 --- a/pc4mobx/hrm/components/report/ReportChart.js +++ b/pc4mobx/hrm/components/report/ReportChart.js @@ -1,169 +1,225 @@ -import { - WeaInput, - WeaEchart, -} from 'ecCom' +import { WeaInput, WeaEchart,WeaLocaleProvider } from 'ecCom' -import { - Row, - Col, - message, -} from 'antd'; -import { - i18n -} from '../../public/i18n'; +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' +import { jumpToHrmDept } from '../../util/pulic-func' class ReportChart extends React.Component { - constructor(props) { - super(props); + constructor (props) { + super(props) } - componentDidUpdate() { - if (this.refs.echart) this.refs.echart.paint(); - if (this.refs.echart1) this.refs.echart1.paint(); + componentDidUpdate () { + if (this.refs.echart) this.refs.echart.paint() + if (this.refs.echart1) this.refs.echart1.paint() } - componentWillReceiveProps(nextProps) { + 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(); + 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) { - + getDOM ( + interval, + key, + setGap, + getData, + isIntervalShow, + pathname, + tag, + isChartsShow, + chartTitle + ) { return ( -
-
-
- {this.getName(key) + ':'} -
-
- setGap(val)} +
+
+
{this.getName(key) + ':'}
+
+ setGap(val)} />
-
+
{this.getSuffix(key)}
- - - ) } - getName(key) { + getName (key) { switch (key) { case '1': - return i18n.label.ageRange(); + return i18n.label.ageRange() case '3': - return i18n.label.workingAgeRange(); + return getLabel('548321', "司龄区间") case '7': - return i18n.label.rankingInterval(); + return i18n.label.rankingInterval() } } - getSuffix(key) { + getSuffix (key) { switch (key) { case '7': - return i18n.label.level(); + return i18n.label.level() default: - return i18n.label.year(); + return i18n.label.year() } } - - getImgSrc(tag, chartTitle) { - let cvs = document.getElementsByTagName('canvas'); + getImgSrc (tag, chartTitle) { + let cvs = document.getElementsByTagName('canvas') if (tag !== 'right') { - this.downloadCvs2Img(cvs[0], chartTitle); + this.downloadCvs2Img(cvs[0], chartTitle) } else { - this.downloadCvs2Img(cvs[1], chartTitle); + this.downloadCvs2Img(cvs[1], chartTitle) } } - downloadCvs2Img(cvs, chartTitle) { - let $a = document.createElement('a'); - $a.download = chartTitle + '.jpg'; - $a.target = '_blank'; - let url; + downloadCvs2Img (cvs, chartTitle) { + let $a = document.createElement('a') + $a.download = chartTitle + '.jpg' + $a.target = '_blank' + let url if (cvs) { - url = cvs.toDataURL("image/jpg"); + url = cvs.toDataURL('image/jpg') } 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') { var evt = new MouseEvent('click', { view: window, bubbles: true, cancelable: false - }); - $a.dispatchEvent(evt); + }) + $a.dispatchEvent(evt) } else { if (window.navigator.msSaveOrOpenBlob) { - var bstr = atob(url.split(',')[1]); - var n = bstr.length; - var u8arr = new Uint8Array(n); + var bstr = atob(url.split(',')[1]) + var n = bstr.length + var u8arr = new Uint8Array(n) while (n--) { - u8arr[n] = bstr.charCodeAt(n); + u8arr[n] = bstr.charCodeAt(n) } - var blob = new Blob([u8arr]); - window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg'); + var blob = new Blob([u8arr]) + window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg') } else { - var html = '' + + var html = + '' + '' + - '' + - ''; - var tab = window.open(); - tab.document.write(html); + '' + + '' + 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)); + chartAction (chart, ids, yAxisData, linkList) { + chart.off('click') + chart.on('click', params => + this.handleClick(params, ids, yAxisData, linkList) + ) } - handleClick(params, ids, yAxisData, linkList) { - const { - pathname - } = this.props; - if (pathname !== 'departmentStatistics') return false; - let anid = params.event.target.anid; + // #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') { + 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) { return } - let index = anid.split('_')[1]; + let index = anid.split('_')[1] jumpToHrmDept(ids[index]) } - render() { + render () { const { option, isIntervalShow, @@ -178,109 +234,395 @@ class ReportChart extends React.Component { yAxisData, linkList, tagName - } = this.props; + } = this.props return ( -
- {(pathname == 'basicConditionAnalysis') ? (
- - -
- {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], tagName)} -
- - - - - {isChartsShow[0] ? (
- -
) - :
-
-
{i18n.message.dataNone()}
-
} - - -
) : ''} - { (pathname == 'departmentStatistics' || pathname == 'postStatistics') ?
- - -
-
{chartTitle[0]}
-
- {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], chartTitle[0])} -
-
- - - - - {isChartsShow[0] ? (
- this.chartAction(chart, ids, yAxisData, linkList)}/> -
) - :
-
-
{i18n.message.dataNone()}
-
} - - -
: ''} - { (pathname == 'jobStatusStatistics') ? - -
- - -
-
{chartTitle[0]}
-
- {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'left', isChartsShow[1], chartTitle[0])} -
-
- - - - - {isChartsShow[1] ?
- -
- :
-
-
{i18n.message.dataNone()}
-
- } - - -
- - -
- - -
-
{chartTitle[1]}
-
- {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'right', isChartsShow[2], chartTitle[1])} -
-
- - - - - {isChartsShow[2] ?
- -
- :
-
-
{i18n.message.dataNone()}
-
} - - -
- - : ''} -
+
+ {pathname == 'basicConditionAnalysis' ? ( +
+ + +
+ {this.getDOM( + interval, + tabKey, + setGap, + getData, + isIntervalShow, + pathname, + pathname, + isChartsShow[0], + tagName + )} +
+ + + + + {isChartsShow[0] ? ( +
+ + this.basicChartAction(chart) + } + /> +
+ ) : ( +
+
+ +
+
+ {i18n.message.dataNone()} +
+
+ )} + + +
+ ) : ( + '' + )} + {pathname == 'departmentStatistics' || pathname == 'postStatistics' ? ( +
+ + +
+
+ {chartTitle[0]} +
+
+ {this.getDOM( + interval, + tabKey, + setGap, + getData, + isIntervalShow, + pathname, + pathname, + isChartsShow[0], + chartTitle[0] + )} +
+
+ + + + + {isChartsShow[0] ? ( +
+ + this.chartAction(chart, ids, yAxisData, linkList) + } + /> +
+ ) : ( +
+
+ +
+
+ {i18n.message.dataNone()} +
+
+ )} + + +
+ ) : ( + '' + )} + {pathname == 'jobStatusStatistics' ? ( + + +
+ + +
+
+ {chartTitle[0]} +
+
+ {this.getDOM( + interval, + tabKey, + setGap, + getData, + isIntervalShow, + pathname, + 'left', + isChartsShow[1], + chartTitle[0] + )} +
+
+ + + + + {isChartsShow[1] ? ( +
+ +
+ ) : ( +
+
+ +
+
+ {i18n.message.dataNone()} +
+
+ )} + + +
+ + +
+ + +
+
+ {chartTitle[1]} +
+
+ {this.getDOM( + interval, + tabKey, + setGap, + getData, + isIntervalShow, + pathname, + 'right', + isChartsShow[2], + chartTitle[1] + )} +
+
+ + + + + {isChartsShow[2] ? ( +
+ +
+ ) : ( +
+
+ +
+
+ {i18n.message.dataNone()} +
+
+ )} + + +
+ + + ) : ( + '' + )} +
) } } -export default ReportChart \ No newline at end of file +export default ReportChart diff --git a/pc4mobx/hrm/stores/perStatusReport.js b/pc4mobx/hrm/stores/perStatusReport.js index 83aa9a9..b58738b 100644 --- a/pc4mobx/hrm/stores/perStatusReport.js +++ b/pc4mobx/hrm/stores/perStatusReport.js @@ -332,7 +332,7 @@ export class HrmPerStatusReport { case '2': return getLabel('386389', "性别状况"); case '3': - return getLabel('386390', "工龄状况"); + return getLabel('548320', "司龄状况"); case '4': return getLabel('386391', "学历状况"); 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) { this.isIntervalShow = bool; }