|
|
@@ -3,6 +3,7 @@ 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';
|
|
|
|
|
|
/**
|
|
|
* @刘丹: 医生诊室叫号
|
|
|
@@ -11,17 +12,68 @@ class DoctorScreen extends React.Component {
|
|
|
constructor() {
|
|
|
super();
|
|
|
this.state = {
|
|
|
-
|
|
|
+ pageSize: 5,
|
|
|
+ patList: [],
|
|
|
};
|
|
|
}
|
|
|
componentDidMount() {
|
|
|
- this.getQrcSrc('https://www.kimi.com/');
|
|
|
+ //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) {
|
|
|
@@ -32,7 +84,7 @@ class DoctorScreen extends React.Component {
|
|
|
});
|
|
|
};
|
|
|
render() {
|
|
|
- const { userData = {}, patList = [] } = this.props;
|
|
|
+ const { userData = {}, reWaitPat = [] } = this.props;
|
|
|
return (
|
|
|
<div className='page-body big-scrren'>
|
|
|
<div className='header'>
|
|
|
@@ -100,36 +152,51 @@ class DoctorScreen extends React.Component {
|
|
|
</Grid.Item>
|
|
|
</Grid>
|
|
|
</div>
|
|
|
- <div className='table section'>
|
|
|
- <Grid columns={12} gap={8}>
|
|
|
- <Grid.Item span={4}>
|
|
|
- <div className='table-header'>姓名</div>
|
|
|
- </Grid.Item>
|
|
|
- <Grid.Item span={4}>
|
|
|
- <div className='table-header'>就诊号</div>
|
|
|
- </Grid.Item>
|
|
|
- <Grid.Item span={4}>
|
|
|
- <div className='table-header'>状态</div>
|
|
|
+ <div style={{flex: 1, overflow: 'hidden'}} id="patWrapDoc">
|
|
|
+ <Grid columns={reWaitPat?.length > 0 ? 3 : 2} gap={8}>
|
|
|
+ <Grid.Item span={2}>
|
|
|
+ <div className='table section' id="nextDom">
|
|
|
+ <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}>
|
|
|
+ <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>
|
|
|
+ {reWaitPat?.length > 0 && <Grid.Item span={1}>
|
|
|
+ <div className='table section'>
|
|
|
+ <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>
|
|
|
- {patList.map((item,index) => {
|
|
|
- return (<Grid columns={12} gap={8} key={index}>
|
|
|
- <Grid.Item span={4}>
|
|
|
- <div className='table-content'>{item.patName || '***'}</div>
|
|
|
- </Grid.Item>
|
|
|
- <Grid.Item span={4}>
|
|
|
- <div className='table-content'>{item.patCallNo || '***'}</div>
|
|
|
- </Grid.Item>
|
|
|
- <Grid.Item span={4}>
|
|
|
- {item.status == 'waiting'
|
|
|
- ? <div className='table-content waiting'>准备就诊</div>
|
|
|
- : <div className='table-content sussess'>就诊中</div>
|
|
|
- }
|
|
|
- </Grid.Item>
|
|
|
- </Grid>);
|
|
|
- })}
|
|
|
</div>
|
|
|
- <div className='footer'>请依据队列显示信息，依次排队就诊</div>
|
|
|
+ <div className='footer'>请按显示信息排队就诊，看报告请到报道机或护士站报到！</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
