|
@@ -4,29 +4,53 @@ import $ from "jquery";
|
|
import close from './img/close.png';
|
|
import close from './img/close.png';
|
|
import info from './img/info.png';
|
|
import info from './img/info.png';
|
|
import info1 from './img/info1.png';
|
|
import info1 from './img/info1.png';
|
|
|
|
+import info2 from './img/info2.png';
|
|
|
|
+import info3 from './img/info3.png';
|
|
|
|
|
|
|
|
|
|
class TreatDesc extends Component {
|
|
class TreatDesc extends Component {
|
|
constructor(props){
|
|
constructor(props){
|
|
super(props);
|
|
super(props);
|
|
this.state = {
|
|
this.state = {
|
|
- currentIndex: -1
|
|
|
|
|
|
+ currentIndex: -1,
|
|
|
|
+ hasEnterImg: false
|
|
}
|
|
}
|
|
this.hideTreatDesc = this.hideTreatDesc.bind(this);
|
|
this.hideTreatDesc = this.hideTreatDesc.bind(this);
|
|
this.handleSelect= this.handleSelect.bind(this);
|
|
this.handleSelect= this.handleSelect.bind(this);
|
|
|
|
+ this.handleMouseEnterDrug = this.handleMouseEnterDrug.bind(this)
|
|
|
|
+ this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this)
|
|
|
|
+ this.handleMouseEnterImg = this.handleMouseEnterImg.bind(this)
|
|
this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this)
|
|
this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this)
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
- handleMouseEnterImg(index) {
|
|
|
|
|
|
+ handleMouseEnterDrug( index, item) {
|
|
|
|
+ console.log('item', item)
|
|
|
|
+ const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
|
|
|
|
+
|
|
|
|
+ const imgLeft = drugNameWidth/2-10
|
|
|
|
+ console.log('imgLeft', imgLeft)
|
|
|
|
+ $('#'+item.medicitionName).find('img').css('left', imgLeft)
|
|
|
|
+
|
|
this.setState({
|
|
this.setState({
|
|
currentIndex: index,
|
|
currentIndex: index,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
- handleMouseLeaveImg() {
|
|
|
|
|
|
+ handleMouseLeaveDrug() {
|
|
this.setState({
|
|
this.setState({
|
|
currentIndex: -1,
|
|
currentIndex: -1,
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+ handleMouseEnterImg() {
|
|
|
|
+ this.setState({
|
|
|
|
+ hasEnterImg: true
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ handleMouseLeaveImg() {
|
|
|
|
+ this.setState({
|
|
|
|
+ hasEnterImg: false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
handleSelect(index,ii) {
|
|
handleSelect(index,ii) {
|
|
const { selectDrug } = this.props;
|
|
const { selectDrug } = this.props;
|
|
selectDrug && selectDrug(index,ii);
|
|
selectDrug && selectDrug(index,ii);
|
|
@@ -40,7 +64,7 @@ class TreatDesc extends Component {
|
|
render(){
|
|
render(){
|
|
const { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
|
|
const { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
|
|
const { title, basic, otherDrugIndex, drugDesc} = treatDesc
|
|
const { title, basic, otherDrugIndex, drugDesc} = treatDesc
|
|
- const { currentIndex } = this.state
|
|
|
|
|
|
+ const { currentIndex, hasEnterImg } = this.state
|
|
return (treatment && treatment.length >0 && <div className={style['treat-desc-box']}>
|
|
return (treatment && treatment.length >0 && <div className={style['treat-desc-box']}>
|
|
|
|
|
|
{title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
|
|
{title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
|
|
@@ -57,22 +81,32 @@ class TreatDesc extends Component {
|
|
{treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
|
|
{treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
|
|
return (<span >
|
|
return (<span >
|
|
{index === 0 ? '' : ', '}
|
|
{index === 0 ? '' : ', '}
|
|
- <span className={style['drug-name-box']}>
|
|
|
|
|
|
+ <span className={style['drug-name-box']}
|
|
|
|
+ onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item )}
|
|
|
|
+ onMouseLeave = {this.handleMouseLeaveDrug}
|
|
|
|
+ id={item.medicitionName}
|
|
|
|
+ >
|
|
<span className={style['drug-name']}
|
|
<span className={style['drug-name']}
|
|
// onDoubleClick={() =>{setDrugInfo(item);showDrugInfo();}}
|
|
// onDoubleClick={() =>{setDrugInfo(item);showDrugInfo();}}
|
|
onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(otherDrugIndex,index)}}
|
|
onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(otherDrugIndex,index)}}
|
|
style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : item.selected ? {color: '#3B9ED0'}:''}
|
|
style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : item.selected ? {color: '#3B9ED0'}:''}
|
|
-
|
|
|
|
>
|
|
>
|
|
{item.medicitionName}
|
|
{item.medicitionName}
|
|
</span>
|
|
</span>
|
|
|
|
+ {<img className={style['info-img']}
|
|
|
|
+ style ={currentIndex === index ? {display: "inline-block"} : {display: "none"}}
|
|
|
|
+ src={currentIndex === index ? (hasEnterImg ? info3 : info2) : info2}
|
|
|
|
+ onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
|
|
|
|
+ onMouseLeave = {this.handleMouseLeaveImg}
|
|
|
|
+ onClick={() =>{setDrugInfo(item);showDrugInfo();}}
|
|
|
|
+ />}
|
|
</span>
|
|
</span>
|
|
|
|
|
|
- {<img className={style['info-img']}
|
|
|
|
|
|
+ {/* {<img className={style['info-img']}
|
|
src={currentIndex === index ? info1 : info}
|
|
src={currentIndex === index ? info1 : info}
|
|
onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
|
|
onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
|
|
onMouseLeave = {this.handleMouseLeaveImg}
|
|
onMouseLeave = {this.handleMouseLeaveImg}
|
|
- onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>}
|
|
|
|
|
|
+ onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>} */}
|
|
{item.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: item.forbidden === '2' ? <span className={style['info-flag']} style={{opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)',border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''},
|
|
{item.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: item.forbidden === '2' ? <span className={style['info-flag']} style={{opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)',border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''},
|
|
<span style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>
|
|
<span style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>
|
|
|
|
|