115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
import {
|
|
inject,
|
|
observer,
|
|
} from 'mobx-react';
|
|
|
|
import {
|
|
toJS
|
|
} from 'mobx';
|
|
|
|
import {
|
|
WeaEchart,
|
|
WeaLocaleProvider
|
|
} from 'ecCom';
|
|
|
|
import {
|
|
Tabs
|
|
} from 'antd';
|
|
const TabPane = Tabs.TabPane;
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
import Query from './Query';
|
|
|
|
@inject('hrmUsedemand')
|
|
@observer
|
|
export default class TabsWp extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
componentDidMount() {
|
|
// this.props.hrmUsedemand.getTabsDatas();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
tabs
|
|
} = hrmUsedemand, {
|
|
key
|
|
} = tabs;
|
|
|
|
this[`echart${key}`] && this[`echart${key}`].paint();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.hrmUsedemand.resetTabs();
|
|
}
|
|
|
|
setRef = (ref, alias) => {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
setRef
|
|
} = hrmUsedemand;
|
|
|
|
this[alias] = ref;
|
|
|
|
setRef({
|
|
ref,
|
|
alias,
|
|
type: 'tabs',
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
hrmUsedemand
|
|
} = this.props, {
|
|
tabs,
|
|
tabsCallback,
|
|
} = hrmUsedemand, {
|
|
charts,
|
|
key,
|
|
} = tabs;
|
|
|
|
return (<div style={{float:'left', width: '100%',padding:16}}>
|
|
<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@i27qoz`} onChange={key => tabsCallback(key)} type="card">{
|
|
toJS(charts).map((chart, index) => {
|
|
const {title, option} = chart;
|
|
|
|
const bl1 = option.series[0].data.length > 0;
|
|
return (
|
|
<TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@3l040q@${index}`} tab={title} key={index}>
|
|
<Query ecId={`${this && this.props && this.props.ecId || ''}_Query@76h1r1@${index}`}
|
|
title={title}
|
|
index={index}
|
|
bl1={bl1}
|
|
/>
|
|
<div style={{height: 380}}>
|
|
{
|
|
bl1
|
|
?
|
|
<div style={{height: '100%'}}>
|
|
{key == index && <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@i0c0mc@${index}`}
|
|
ref={ref =>this.setRef(ref,`echart${index}`)}
|
|
option={chart.option}
|
|
useDefault={false}
|
|
/>}
|
|
</div>
|
|
: <i
|
|
className='icon-coms-blank'
|
|
style={{fontSize: 50, position:'absolute',top:'50%',left:'50%',marginLeft: -25,marginTop: -50}}
|
|
>
|
|
<span style={{display:'block',fontSize: 12}}>{getLabel(83553, '暂无数据')}</span>
|
|
</i>
|
|
}
|
|
</div>
|
|
</TabPane>
|
|
)
|
|
})
|
|
}</Tabs>
|
|
</div>)
|
|
}
|
|
} |