|
@@ -3,7 +3,7 @@ import style from './index.less';
|
|
import DiagnosticItem from '@containers/DiagnosticItem'
|
|
import DiagnosticItem from '@containers/DiagnosticItem'
|
|
import showImg from "@common/images/show.png";
|
|
import showImg from "@common/images/show.png";
|
|
import hideImg from "@common/images/close.png";
|
|
import hideImg from "@common/images/close.png";
|
|
-
|
|
|
|
|
|
+import $ from 'jquery'
|
|
|
|
|
|
/***
|
|
/***
|
|
* 接收参数:
|
|
* 接收参数:
|
|
@@ -18,8 +18,10 @@ class PushDiag extends Component {
|
|
constructor(props) {
|
|
constructor(props) {
|
|
super(props)
|
|
super(props)
|
|
this.state = {
|
|
this.state = {
|
|
- showMore: true,
|
|
|
|
|
|
+ domH:'',
|
|
|
|
+ showSlide:true
|
|
}
|
|
}
|
|
|
|
+ this.$ide = React.createRef()
|
|
this.handleShow = this.handleShow.bind(this)
|
|
this.handleShow = this.handleShow.bind(this)
|
|
}
|
|
}
|
|
componentWillMount() {
|
|
componentWillMount() {
|
|
@@ -27,37 +29,34 @@ class PushDiag extends Component {
|
|
moreNum: this.props.maxShowNum
|
|
moreNum: this.props.maxShowNum
|
|
})
|
|
})
|
|
}
|
|
}
|
|
-
|
|
|
|
- handleShow(ItemNum) {
|
|
|
|
|
|
+ componentDidMount(){
|
|
|
|
+ let domH = this.$ide.current.offsetHeight
|
|
|
|
+ this.setState({
|
|
|
|
+ domH:domH
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ handleShow() {
|
|
this.setState({
|
|
this.setState({
|
|
- showMore: !this.state.showMore
|
|
|
|
- },()=>{
|
|
|
|
- this.setState({
|
|
|
|
- moreNum: this.state.showMore ? this.props.maxShowNum : ItemNum
|
|
|
|
- })
|
|
|
|
|
|
+ showSlide:!this.state.showSlide
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
render() {
|
|
- const { icon, title, titleBg, diagList, maxShowNum } = this.props
|
|
|
|
- const { showMore,moreNum } = this.state
|
|
|
|
|
|
+ const { icon, title, titleBg, diagList } = this.props
|
|
|
|
+ const { domH,showSlide } = this.state
|
|
let ItemNum = 0;
|
|
let ItemNum = 0;
|
|
return (<div className={style['push-diag-wrapper']}>
|
|
return (<div className={style['push-diag-wrapper']}>
|
|
<h1 className={style['push-diag-title']} style={{background:titleBg}}><img className={style['push-diag-icon']} src={icon} />{title}</h1>
|
|
<h1 className={style['push-diag-title']} style={{background:titleBg}}><img className={style['push-diag-icon']} src={icon} />{title}</h1>
|
|
- <div className={style['push-diag-box']}>
|
|
|
|
- {maxShowNum ? diagList.map((item, index) => {
|
|
|
|
- ItemNum = ItemNum + item.name.length + 1;
|
|
|
|
- if (ItemNum <= moreNum) {
|
|
|
|
|
|
+ <div className={`${style['push-diag-box']} ${domH>50&&showSlide?style['push-diag-more-slide-d']:style['push-diag-more-slide-u']}`} ref={this.$ide}>
|
|
|
|
+ {
|
|
|
|
+ diagList.map((item, index) => {
|
|
|
|
+ ItemNum = ItemNum + item.name.length + 1;
|
|
return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item} type='disSelect'/></div>
|
|
return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item} type='disSelect'/></div>
|
|
- }
|
|
|
|
- }) : diagList.map((item, index) => {
|
|
|
|
- return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item} type='disSelect'/></div>
|
|
|
|
- })}
|
|
|
|
- {ItemNum > maxShowNum && <div onClick={() => this.handleShow(ItemNum)} className={style['push-diag-more']}>{showMore ? ' 更多': '收起'}<img className={style['push-diag-more-icon']} src={showMore ? showImg : hideImg}/></div>}
|
|
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ {domH>50&&<div onClick={() => this.handleShow()} className={`${style['push-diag-more']} ${showSlide?style['push-diag-more-d']:style['push-diag-more-u']}`}>{showSlide ? ' 更多': '收起'}<img className={style['push-diag-more-icon']} src={showSlide ? showImg : hideImg}/></div>}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
-
|
|
|
|
</div>)
|
|
</div>)
|
|
}
|
|
}
|
|
}
|
|
}
|