newICSS/src/components/EmergencyProcedure/index.jsx

import styles from './index.less';
import right from './img/right.png';
import EmergencyModal from './EmergencyModal';
import $ from 'jquery';
import ReactDom from "react-dom";

class EmergencyProcedure extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      show:false,
      data:{}
    }
    this.handleShow=this.handleShow.bind(this)
  }
  slideToggle(type){
    if(type){
      $("#emergencyName").css({"display":"block"})
      $("#emergencyPic").css("display","block")
      $("#emergencys").css("display","none")
      $("#emergency").css("display","block")
      $("#emergencyWrap").css({"width":"auto","height":"44px","paddingLeft":"50px","paddingRight":"30px"})
    }else{
      $("#emergencyName").css({"display":"none","padding":"0"})
      $("#emergencyPic").css("display","none")
      $("#emergencyWrap").css({"width":"44px","height":"44px","padding":"0"})
      $("#emergencys").css("display","block")
      $("#emergency").css("display","none")
    }
  }
  handleShow(type){
    const newinConf = {
      width: '600',   //窗口的文档显示区的宽度。以像素计。
      height: '826',  //窗口文档显示区的高度。以像素计。
      left: '0',  //窗口的 x 坐标。以像素计。
      top: '0',    //窗口的 y 坐标。以像素计。
      openMode: "_blank"  //每次都是新窗口打开为_blank,打开同一窗口填写任意字符串
    }
    
    const newWindowLocation = `width=${newinConf.width}, height=${newinConf.height}, left=${newinConf.left}, top=${newinConf.top} scrollbars=yes`
    window.open('http://localhost:8082/emergency.html?disName='+'气胸', newinConf.openMode, newWindowLocation)
    this.setState({
      show:type
    })
    !type&&this.slideToggle(0)
  }
  render(){
    const {emergencyname} = this.props;
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(<div className={styles.emergencyProdureWrap}>
      <div id="emergencyWrap" className={styles.emergencyWrap}>
        <span id="emergencys" onClick={()=>this.slideToggle(1)} className={styles.emergency}>急</span>
        <span id="emergency" className={`${styles.emergency}`} onClick={()=>this.slideToggle(0)}>急</span>
        <div id="emergencyName" className={styles.emergencyName} onClick={()=>this.handleShow(true)}>{emergencyname}救治流程</div>
        <i onClick={()=>this.slideToggle(0)} id="emergencyPic"><img src={right} alt=""/></i>
      </div>
    </div>,domNode)
  }
}

export default EmergencyProcedure;