CallApp_React/src/pages/doctorScreen/Index.jsx

import React from 'react';
import logo from '@assets/images/logo.png';
import userImage from '@assets/images/userImage.png';
import { Grid } from 'antd-mobile';
import QRCode from 'qrcode';
import { preload } from 'react-dom';

/**
 * @刘丹: 医生诊室叫号
 */
class DoctorScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      pageSize: 5,
      patList: [],
    };
  }
  componentDidMount() {
    //this.getQrcSrc('https://www.kimi.com/');
    this.initScroll();
  }
  componentDidUpdate(prev) {
    if (prev?.userData?.userQrCode != this.props.userData?.userQrCode) {
      this.getQrcSrc(this.props.userData?.userQrCode);
    }
    if (prev.patList != this.props.patList) {
      this.setPatList();
    }
  }
  // 初始化滚动
  initScroll = () => {
    const parentDom = document.getElementById('patWrapDoc');
    const childDom = document.getElementById('nextDom');
    const style = window.getComputedStyle(parentDom);
    const parentH = parentDom.offsetHeight - parseInt(style.paddingTop) - parseInt(style.paddingBottom);
    const childH = childDom.children[0].offsetHeight;
    const pageSize = Math.floor(parentH / childH) - 1;
    this.setState({
      pageSize,
    });
  };
  // 滚动设置就诊数据
  setPatList = () => {
    if (this.state.timer) {
      clearTimeout(this.state.timer);
    }
    this.setState({
      current: 0,
      totalPage: Math.ceil(this.props.patList?.length / this.state.pageSize),
    }, () => {
      if (this.props.patList?.length <= this.state.pageSize) {
        this.setState({
          patList: this.props.patList,
        });
      } else {
        const fn = () => {
          let current = this.state.current + 1;
          if (current > this.state.totalPage) {
            current = 1;
          }
          const { pageSize } = this.state;
          this.setState({
            current,
            patList: this.props.patList?.slice((current - 1) * pageSize, current * pageSize),
          });
          // 10s切换
          const timer = setTimeout(fn, 6000);
          this.setState({
            timer,
          });
        };
        fn();
      }
    });
  };
  // 链接转二维码链接
  getQrcSrc = (src) => {
    if (!src) {
      return;
    }
    QRCode.toDataURL(src).then((url) => {
      document.querySelector('#qrccodeimg').src = url;
    });
  };
  render() {
    const { userData = {}, reWaitPat = [] } = this.props;
    return (
      <div className='page-body big-scrren'>
        <div className='header'>
          <img
            src={this.props.hosLogo || logo}
            alt='Logo'
            className={this.props.hosLogo ? 'logo' : 'logodefault'}
            onError={(e) => {
              e.target.src = `${logo}`;
            }}
          />
          <span className='heaer-btn'>
            <span className='date'>接诊中</span>
            <br /> Opening
          </span>
        </div>
        <Grid  columns={3} gap={8} className='mt'>
          <Grid.Item span={1}>
            <div className='section'>
              <div className='chinese-name big'>{userData.roomDesc || '诊区'}</div>
            </div>
          </Grid.Item>
          <Grid.Item span={2}>
            <div className='section'>
              <div className='chinese-name big'>{userData.locDesc || '科室'}</div>
            </div>
          </Grid.Item>
        </Grid>
        <div className='section mt'>
          <Grid columns={23} gap={8}>
            <Grid.Item span={4} style={{textAlign: 'center'}}>
              <img
                src={userData.userImage || userImage}
                className='user-header'
              />
            </Grid.Item>
            <Grid.Item span={8}>
              <div className='section section-inner'>
                <div className='chinese-name'>{userData.userDesc || '医生'}</div>
              </div>

            </Grid.Item>
            <Grid.Item span={11}>
              <div className='section section-inner'>
                <div className='chinese-name'>{userData.userTitleDesc  || '职称'}</div>
              </div>
            </Grid.Item>
          </Grid>
        </div>
        <div className='section mt'>
          <Grid  columns={4} gap={16}>
            <Grid.Item span={3}>
              <div className='doctor-profile'>
               {userData.userIntroduce  || '医生简介：暂无'}
              </div>
            </Grid.Item>
            <Grid.Item span={1}>
              <div className='center'>
                <img
                  className='qrccode-img'
                  id="qrccodeimg"
                />
              </div>
              <div className='qrccode-text'>扫码关注医师</div>
            </Grid.Item>
          </Grid>
        </div>
        <div style={{flex: 1, overflow: 'hidden'}} id="patWrapDoc" className='mt'>
          <Grid columns={3} gap={8} style={{height: '100%'}}>
            <Grid.Item span={2} style={{height: '100%'}}>
              <div className='table section' id="nextDom" style={{height: '100%'}}>
                <Grid  columns={1} gap={8}>
                  <Grid.Item span={1}>
                    <div className='table-header'>候诊</div>
                  </Grid.Item>
                </Grid>
                {this.state.patList?.map((item,index) => {
                  return (<Grid  columns={2} gap={8} key={index} className='mt'>
                    <Grid.Item span={1}>
                      <div className='table-content'>{item.patName || '***'} { item.patCallNo }</div>
                    </Grid.Item>
                    <Grid.Item span={1}>
                      <div className={item.status == 'waiting' ? 'table-content waiting'  :'table-content sussess'}>
                        {item.status == 'waiting'
                          ? '候诊'
                          : '正在就诊'
                        }
                      </div>
                    </Grid.Item>
                  </Grid>);
                })}
              </div>
            </Grid.Item>
            <Grid.Item span={1} style={{height: '100%'}}>
              <div className='table section' style={{height: '100%'}}>
                <Grid columns={1} gap={8}>
                  <Grid.Item span={1}>
                    <div className='table-header'>看报告</div>
                  </Grid.Item>
                </Grid>
                {reWaitPat.map((item, index) => {
                  return (<Grid columns={1} gap={8} key={index}>
                    <Grid.Item span={1}>
                      <div className='table-content'>{item.patName || '***'} {item.patCallNo}</div>
                    </Grid.Item>
                  </Grid>);
                })}
              </div>
            </Grid.Item>
          </Grid>
        </div>
        <div className='footer'>请按显示信息排队就诊，看报告请到报道机或护士站报到！</div>
      </div>
    );
  }
}

export default DoctorScreen;