叫号滚动优化

src/components/Scroll.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-const ref = React.createRef();
 /**
  * @刘丹: 横向滚动
  */
@@ -8,31 +7,32 @@ class Scroll extends React.Component {
     super();
     this.state = {
       isScroll: false,
+      ref: React.createRef(),
     };
   }
   componentDidMount() {
-    if (ref.current) {
+    if (this.state.ref.current) {
       this.initWidth();
     }
   }
   componentDidUpdate(prev) {
-    if (prev.text !== this.props.text && ref.current) {
+    if (prev.text !== this.props.text && this.state.ref.current) {
       this.initWidth();
     }   
   }
   initWidth = () => {
-    const parentDom = ref.current.parentNode;
+    const parentDom = this.state.ref.current.parentNode;
     if (!parentDom) {
       return;
     }
     const parentW = parentDom.offsetWidth - 0.8 * 2 * document.body.clientWidth / 100;
     this.setState({
-      isScroll: ref.current.offsetWidth > parentW,
+      isScroll: this.state.ref.current.offsetWidth > parentW,
     });
   };
   render() {
     return (
-      <div ref={ ref }>
+      <div ref={this.state.ref}>
         <div className={this.state.isScroll
           ? this.props.isFast ? 'marquee fast' : 'marquee'
           : ''}

src/components/ScrollTop.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-const ref = React.createRef();
 /**
  * @刘丹: 向上滚动
  */
@@ -10,21 +9,22 @@ class ScrollTop extends React.Component {
     this.state = {
       isScroll: false,
       height: '',
+      ref: React.createRef(),
     };
   }
   componentDidMount() {
-    if (ref.current) {
+    if (this.state.ref.current) {
       this.initHeight();
     }
   }
   componentDidUpdate(prev) {
-    if (prev.text !== this.props.text && ref.current) {
+    if (prev.text !== this.props.text && this.state.ref.current) {
       this.initHeight();
     }   
   }
   initHeight = () => {
-    const scrolH = ref.current.parentNode.parentNode.offsetHeight;
-    const curH = ref.current.offsetHeight;
+    const scrolH = this.state.ref.current.parentNode.parentNode.offsetHeight;
+    const curH = this.state.ref.current.offsetHeight;
     this.setState({
       height: (curH - scrolH  + 10) + 'px',
       isScroll: curH > scrolH,
@@ -33,7 +33,7 @@ class ScrollTop extends React.Component {
   render() {
     return (
       <div className='marqueeTop-parent' style={{height: this.state.height}}>
-        <div ref={ ref }  className={this.state.isScroll
+        <div ref={ this.state.ref }  className={this.state.isScroll
         ? this.props.isFast ? 'marqueeTop fast' : 'marqueeTop'
         : ''}>
           {this.props.children}

src/pages/doctorScreen/Index.jsx

@@ -110,7 +110,7 @@ class DoctorScreen extends React.Component {
         </div>
         <div style={{ flex: 1, overflow: 'hidden' }} className='mt'>
           <div style={{display: 'flex', height: '100%'}}>
-            <div style={{flex: '2', height: '100%', marginRight: '0.8rem'}}>
+            <div style={{flex: '3', height: '100%', marginRight: '0.8rem'}}>
               <div className='table section scroll-wrap'>
                 <Grid  columns={1} gap={8}>
                   <Grid.Item span={1}>
@@ -121,8 +121,8 @@ class DoctorScreen extends React.Component {
                   if (item.status == 'waiting') {
                     return null;
                   }
-                  return (<Grid  columns={2} gap={8} key={index} className='mt'>
-                    <Grid.Item span={1}>
+                  return (<Grid  columns={3} gap={8} key={index} className='mt'>
+                    <Grid.Item span={2}>
                       <div className='table-content'>{item.patName || '***'} { item.patCallNo }</div>
                     </Grid.Item>
                     <Grid.Item span={1}>
@@ -136,8 +136,8 @@ class DoctorScreen extends React.Component {
                       if (item.status != 'waiting') {
                         return null;
                       }
-                      return (<Grid  columns={2} gap={8} key={index} className='mt'>
-                        <Grid.Item span={1}>
+                      return (<Grid  columns={3} gap={8} key={index} className='mt'>
+                        <Grid.Item span={2}>
                           <div className='table-content'>{item.patName || '***'} { item.patCallNo }</div>
                         </Grid.Item>
                         <Grid.Item span={1}>
@@ -154,7 +154,7 @@ class DoctorScreen extends React.Component {
                 </div>
               </div>
             </div>
-            <div style={{flex: '1', height: '100%'}}>
+            <div style={{flex: '2', height: '100%'}}>
             <div className='table section scroll-wrap'>
               <Grid columns={1} gap={8}>
                 <Grid.Item span={1}>

src/pages/home/Index.jsx

@@ -69,18 +69,18 @@ class Home extends React.Component {
           {
             'callPat': [{ 'patCallNo': '1号', 'patName': '患*者' }],
             'waitPat': [
-              { 'patCallNo': '1', 'patName': '患*者1' },
-              { 'patCallNo': '2', 'patName': '患*者2' },
-              { 'patCallNo': '3', 'patName': '患*者3' },
-              { 'patCallNo': '4', 'patName': '患*者4' },
-              { 'patCallNo': '5', 'patName': '患*者5' },
-              { 'patCallNo': '6', 'patName': '患*者6' },
-              { 'patCallNo': '7', 'patName': '患*者7' },
-              { 'patCallNo': '8', 'patName': '患*者8' },
-              { 'patCallNo': '9', 'patName': '患*者9' },
-              { 'patCallNo': '10', 'patName': '患*者10' },
-              { 'patCallNo': '11', 'patName': '患*者11' },
-              { 'patCallNo': '12', 'patName': '患*者12' }],
+              { 'patCallNo': 'A1', 'patName': '患*者1' },
+              { 'patCallNo': 'A2', 'patName': '患*者2' },
+              { 'patCallNo': 'A3', 'patName': '患*者3' },
+              { 'patCallNo': 'A4', 'patName': '患*者4' },
+              { 'patCallNo': 'A5', 'patName': '患*者5' },
+              { 'patCallNo': 'A6', 'patName': '患*者6' },
+              { 'patCallNo': 'A7', 'patName': '患*者7' },
+              { 'patCallNo': 'A8', 'patName': '患*者8' },
+              { 'patCallNo': 'A9', 'patName': '患*者9' },
+              { 'patCallNo': 'A10', 'patName': '患*者10' },
+              { 'patCallNo': 'A11', 'patName': '患*者11' },
+              { 'patCallNo': 'A12', 'patName': '患*者12' }],
             'reWaitPat': [
               { 'patCallNo': '复01', 'patName': '患*者1' },
             ],
@@ -91,7 +91,7 @@ class Home extends React.Component {
           {
             'callPat': [{ 'patCallNo': '1号', 'patName': '患*者' }],
             'waitPat': [
-              { 'patCallNo': '复01', 'patName': '患*者1' },
+              { 'patCallNo': 'B复01', 'patName': '患*者1' },
             ],
             'reWaitPat': [
               { 'patCallNo': '复01', 'patName': '患*者1' },
@@ -281,9 +281,9 @@ class Home extends React.Component {
           start = 0;
         }
         this.initVoice('/mp3.wav');
-      }, 2950);
+      }, 3000);
     };
-    // test();
+    //test();
   }
   initAndroidVoice() {
     window.mediaPlayOver = (flag) => {