不良反应静态知识

src/components/Treat/AdverseReactions/index.jsx

@@ -7,21 +7,76 @@ import $ from "jquery";
 class AdverseReactions extends Component {
     constructor(props){
         super(props);
+        this.state = {
+            currentIndex: -1
+        }
+        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
+        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
+        this.setDrugInfo = this.setDrugInfo.bind(this);
       
     }
     changeReact(it, index) {
         this.props.changeReact(it, index);
     }
+    handleMouseEnterDrug(index, item) {
+        const drugNameWidth = parseInt($('#'+item.id)[0].offsetWidth)
+        const imgLeft = drugNameWidth/2-8
+        $('#'+item.id).find('img').css('left', imgLeft)
+        this.setState({
+            currentIndex: index,
+        })
+    }
+    handleMouseLeaveDrug() {
+        this.setState({
+            currentIndex: -1, 
+        })
+    }
+    handleMouseEnterImg() {
+        this.setState({
+            hasEnterImg: true
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            hasEnterImg: false
+        })
+    }
+    setDrugInfo(item) {
+        const { setDrugInfo } = this.props;
+        setDrugInfo && setDrugInfo(item, 10, 6);
+    }
 
 
     render() {
-        const { icon, titleStyle,titleBg, filter, title,  adversReactionList } = this.props
+        const { icon, titleStyle,titleBg, filter, title,  adversReactionList, showDrugInfo, setDrugInfo } = this.props
+        const  { currentIndex, hasEnterImg } = this.state
         return(
             <div className={style['last-treat-wrapper']}>
                 <div className={style['last-treat-title-box']} style={titleStyle}></div>
                 <div className={style['last-treat-title']} ><img className={style['last-treat-icon']} src={icon}/>{title}</div>
+                {/* {console.log('adversReactionList', adversReactionList)} */}
+
                 {adversReactionList.map((item, index) => {
-                    return (<div key={item.id}><span className={style['last-treat-name-box']}>{item.tagName}:</span>
+                    return (<div className={style['adverse-reactions-item']} key={item.id}>
+                    <span className={style['last-treat-name-box']}
+                        
+                    >   
+                        <span   id={item.id} 
+                                className={style['last-treat-big-name-box']} 
+                                onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item)}
+                                onMouseLeave = {this.handleMouseLeaveDrug}
+                        >
+                            {item.tagName}:
+                            {<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)}
+                                onMouseLeave = {this.handleMouseLeaveImg}
+                                onClick={() =>{this.setDrugInfo(item);showDrugInfo();}}/>}
+                        
+                        </span>
+                        
+                    </span>
                         {item.details.map((it, idx) => {
                             return <span key={item.id + it.name}>
                                 <input type="checkbox" checked={it.checked} id={item.id + it.name} onChange={this.changeReact.bind(this, it, index)}/>

src/components/Treat/AdverseReactions/index.less

@@ -26,6 +26,20 @@
 .last-treat-name-box {
     display: inline-block;
     width: 150px;
+    position: relative;
+}
+.adverse-reactions-item{
+    border-bottom: 1px dotted #D2D2D2;
+    line-height: 36px;
+}
+.info-img {
+    position: absolute;
+    width: 15px;
+    position: absolute;
+    top: -8px;
+}
+.last-treat-big-name-box {
+    display: inline-block;
+    
 }
-
 

src/components/Treat/DrugHistory/LastDrug/index.jsx

@@ -15,9 +15,10 @@ class LastDrug extends Component {
         this.setDrugInfo = this.setDrugInfo.bind(this);
     }
     handleMouseEnterDrug(index, item) {
-        const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
+        const drugNameWidth = parseInt($('#'+item.id)[0].offsetWidth)
+        console.log(drugNameWidth,'drugNameWidth')
         const imgLeft = drugNameWidth/2-8
-        $('#'+item.medicitionName).find('img').css('left', imgLeft)
+        $('#'+item.id).find('img').css('left', imgLeft)
         this.setState({
             currentIndex: index,
         })
@@ -39,7 +40,7 @@ class LastDrug extends Component {
     }
     setDrugInfo(item) {
         const { setDrugInfo } = this.props;
-        setDrugInfo && setDrugInfo(item);
+        setDrugInfo && setDrugInfo(item,8,5);
     }
 
 
@@ -48,13 +49,13 @@ class LastDrug extends Component {
         const  { currentIndex, hasEnterImg } = this.state
         return(
              <div className={style['last-common-box']}>
-                <div className={style['last-common-title']}>{title}</div>
+                <div className={style['last-common-title']}>{title}:</div>
                 <div className={style['last-common-list']}>
                     {lastDrugList.map((item, index) => {
                         return<span
                             onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item)}
                             onMouseLeave = {this.handleMouseLeaveDrug}
-                            id={item.medicitionName}
+                            id={item.id}
                             className={style['last-common-warpper']}
                             > 
                             {item.medicitionName} 

src/components/Treat/DrugHistory/LastDrug/index.less

@@ -1,14 +1,22 @@
+.last-common-box {
+    border-bottom: 1px dotted  #D2D2D2;
+    line-height: 36px;
+}
+
 .last-common-title {
-    height: 30px;
-    line-height: 30px;
+    height: 36px;
+    line-height: 36px;
+    float: left;
+    margin: 0 15px 0 0;
 }
 .last-common-warpper {
     position: relative;
-    margin: 0 20px 0 0
+    margin: 0 20px 0 0;
+    display: inline-block;
 }
 .info-img {
     position: absolute;
     width: 15px;
     position: absolute;
-    top: -15px;
+    top: -8px;
 }

src/components/Treat/DrugTreat/index.jsx

@@ -58,7 +58,7 @@ class DrugTreat extends Component {
     }
     setDrugInfo(item) {
         const { setDrugInfo } = this.props;
-        setDrugInfo && setDrugInfo(item);
+        setDrugInfo && setDrugInfo(item, 8, 5);
     }
     getImg() {
     }

src/components/Treat/DrugTreat/index.less

@@ -1,3 +1,6 @@
+.drug-box {
+    padding: 10px 0 0 0;
+}
 .drug-title{
     background: #EAF7FA;
     height: 36px;

src/components/Treat/FollowUp/Textarea/index.less

@@ -5,4 +5,5 @@
     min-width: 30px;
     text-align: center;
     margin-right: 5px;
+    line-height: 20px
 }

src/components/Treat/FollowUp/index.jsx

@@ -23,8 +23,7 @@ class FollowUp extends Component {
                     <div className={style['general-title-box']} style={titleStyle}></div>
                     <div className={style['general-title']} ><img className={style['general-icon']} src={icon}/>{title}</div>
                 </div>}
-                
-                <div style={textStyle}>
+                <div className={noHeader?'':style['follow-up-box']} style={textStyle}>
                     {noTitle?'': '回访时间：'}<Textarea value={followUp} handleInputFollowUp={this.handleInputFollowUp} isRead={isRead}></Textarea>后回访，不适随诊
                 </div>
             </div>

src/components/Treat/FollowUp/index.less

@@ -23,4 +23,7 @@
     float: left;
     margin: 10px;
 }
-
+.follow-up-box {
+    border-bottom: 1px dotted  #D2D2D2;
+    line-height: 36px;
+}

src/components/Treat/index.jsx

@@ -95,7 +95,9 @@ class Treat extends Component {
                             titleStyle={{background:'#C72F2F',opacity:'0.1', filter:'alpha(opacity=10);',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=10);'}} 
                             title='不良反应' 
                             adversReactionList = {adversReactionList} 
-                            changeReact = {changeReact}>
+                            changeReact = {changeReact}
+                            showDrugInfo = {showDrugInfo} 
+                            setDrugInfo={ setDrugInfo }>
                         </AdverseReactions>}
                         <DrugTreat treatment={ treatment } 
                                 selectDrug={selectDrug} 

src/components/TreatDesc/index.jsx

@@ -99,7 +99,7 @@ class TreatDesc extends Component {
                                 src={currentIndex === index ?  (hasEnterImg ? info3 : info2) : info2} 
                                 onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
                                 onMouseLeave = {this.handleMouseLeaveImg}
-                                onClick={() =>{setDrugInfo(item);showDrugInfo();}}
+                                onClick={() =>{setDrugInfo(item,8,5);showDrugInfo();}}
                                 />}
                         </span>              
                         
@@ -107,7 +107,7 @@ class TreatDesc extends Component {
                             src={currentIndex === index ? info1 : info} 
                             onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
                             onMouseLeave = {this.handleMouseLeaveImg}
-                            onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>} */}
+                            onClick={() =>{setDrugInfo(item,8,5);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> : ''},
                         <span  style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>
                         

src/containers/Treat.js

@@ -50,8 +50,8 @@ function mapDispatchToProps(dispatch) {
             //推荐依据不展示
             // dispatch(getRecommendBasic(item))
         },
-        setDrugInfo: (item) => {
-            dispatch(getInstroduce(item));
+        setDrugInfo: (item, type, position) => {
+            dispatch(getInstroduce(item, type, position));
         },
         hideTreat: () => {
             dispatch({

src/store/async-actions/treat.js

@@ -299,14 +299,14 @@ export const setAllFollowUp = (item) => {
     }
 }
 
-export const getInstroduce = (item)=>{
+export const getInstroduce = (item, type, position)=>{
 
     return (dispatch, getState) =>{
         const url = '/introduceInfo/getByQuestionId';
         const params = {
             questionId: item.id,
-            type: 8,
-            position: 5
+            type: type,
+            position: position
         }
         json(url, params)
         .then((data)=>{
@@ -314,7 +314,7 @@ export const getInstroduce = (item)=>{
                     dispatch({
                         type: SET_DRUG_INFO,
                         instroduce: data.data.data.introduceDetailList,
-                        name: item.medicitionName
+                        name: type ==8 ?item.medicitionName : type == 10 ? item.tagName : ''
                     })
                 } else {
                     dispatch({