样式调整

src/assets/scss/style.scss

@@ -166,7 +166,6 @@ html{
       background-color: #f0f0f0;
       border-color: #f0f0f0;
       color: #333;
-      font-size: 1.5rem;
       &.docname{
         background: #21469b;
         border-radius: 0.5rem;
@@ -200,8 +199,24 @@ html{
   }
   .footer {
     font-size: 1.2rem;
-    padding: 0.8rem 0 0.4rem 0;
+    padding: 0.8rem 3.5rem 0.4rem 0;
+    box-sizing: border-box;
     color: #fff;
+    &.big{
+      font-size: 1.5rem;
+      display: flex;
+      padding: 0.6rem  3.5rem 0.4rem 0;
+      .scroll-big{
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        div{
+          position: relative;
+          display: inline-block;
+        }
+      }
+    }
   }
 }
 .white-bg {

src/components/ScrollTop.jsx

@@ -25,7 +25,6 @@ class ScrollTop extends React.Component {
   initHeight = () => {
     const scrolH = ref.current.parentNode.parentNode.offsetHeight;
     const curH = ref.current.offsetHeight;
-    console.log(curH > scrolH, curH, scrolH);
     this.setState({
       height: (curH - scrolH  + 10) + 'px',
       isScroll: curH > scrolH,

src/pages/bigScreen/Index.jsx

@@ -55,14 +55,14 @@ class BigScreen extends React.Component {
         </div>
         <div className='table section mt scroll-wrap'>
           <Grid columns={24} gap={6}>
-            <Grid.Item span={4}>
+            <Grid.Item span={5}>
               {/* <div className='table-header'>{userData.locDesc === '验光配镜分诊区' ? '验光室' : '诊室'}</div> */}
               <div className='table-header'>{ userData.locDesc === '验光配镜分诊区' ? '验光师':'医生' }</div>
             </Grid.Item >
             <Grid.Item span={3}>
               <div className='table-header'>正在就诊</div>
             </Grid.Item >
-             <Grid.Item span={12}>
+             <Grid.Item span={11}>
               <div className='table-header'>准备就诊</div>
             </Grid.Item >
             <Grid.Item span={5}>
@@ -73,7 +73,7 @@ class BigScreen extends React.Component {
             <ScrollTop text={this.state.patList}>
             {this.state.patList.map((item,index) => {
               return (<Grid columns={24} gap={6} key={index} className='mt'>
-                <Grid.Item span={4}>
+                <Grid.Item span={5}>
                   <div className='table-content docname'>{item.roomDesc}-{item.docName || '-'}</div>
                 </Grid.Item >
                 <Grid.Item span={3}>
@@ -81,7 +81,7 @@ class BigScreen extends React.Component {
                     {item?.callMsg?.callPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
                   </div>
                 </Grid.Item >
-                <Grid.Item span={12}>
+                <Grid.Item span={11}>
                   <div className='table-content'>
                     <Scroll
                       text={item?.callMsg?.waitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
@@ -101,7 +101,12 @@ class BigScreen extends React.Component {
             </ScrollTop>
           </div>
         </div>
-        <div className='footer'>过号患者:{ this.props.delayPat}</div>
+        <div className='footer big'>
+          过号患者:
+          <div className='scroll-big'>
+            <Scroll text={this.props.delayPat}/>
+          </div>
+        </div>
       </div>
     );
   }

src/pages/home/Index.jsx

@@ -34,7 +34,7 @@ class Home extends React.Component {
       // 模拟数据
       tempList: [
         {
-          'roomDesc': '专家诊室', 'docName': '宦大达', 'callMsg':
+          'roomDesc': '专家诊室一', 'docName': '宦大达', 'callMsg':
           {
             'callPat': [{ 'patCallNo': '11号', 'patName': '患*者' }],
             'waitPat': [
@@ -58,7 +58,8 @@ class Home extends React.Component {
               { 'patCallNo': '复02', 'patName': '患*者2' },
               { 'patCallNo': '复03', 'patName': '患者3a' },
               { 'patCallNo': '复04', 'patName': '患者4a' }],
-          }
+          },
+          delayPat: '患*者1,患*者2,患者3a,患*者1,患*者2,患者3a,患者4a,患*者1,患*者2,患者3a,患*者1,患*者2,患者3a,患者4a患*者1,患*者2,患者3a,患*者1,患*者2,患者3a,患者4a',
         },
         {
           'roomDesc': '诊室1', 'docName': '医生1', 'callMsg':
@@ -258,7 +259,7 @@ class Home extends React.Component {
           roomObj,
           delayPat: data.delayPat,
         });
-       // ++start;
+        ++start;
         if (start > 13) {
           start = 0;
         }
@@ -269,12 +270,13 @@ class Home extends React.Component {
           audioSrc: data.path + data.voiceFileName,
         }, () => {
           const domAudio = document.querySelector('#audio');
+          domAudio.playbackRate = 1;
           domAudio.currentTime = 0;
           domAudio.play();
         });
       }, 1000);
     };
-    //test();
+    // test();
   }
   initDevice = async () => {
     //接收Android端身份证信息函数
@@ -421,7 +423,6 @@ class Home extends React.Component {
           if (obj[data.code] == 'doctor') {
             document.querySelector('html').className = '';
           } else {
-            console.log(1);
             document.querySelector('html').className = 'big';
           }
           return data?.result[0] || null;
@@ -466,7 +467,7 @@ class Home extends React.Component {
               />
 
         }
-      </div>
+        </div>
       <span
         className='bottom-set'
       >
@@ -479,7 +480,7 @@ class Home extends React.Component {
           style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}
         />
         </span>
-        <audio src={this.state.audioSrc} controls id="audio" style={{display: 'none'}}></audio>
+        <audio src={this.state.audioSrc} controls id="audio" style={{ display: 'none' }}></audio>
     </>
     );
   }

src/pages/operateScreen/Index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import logo from '@assets/images/logo.png';
 import { Grid } from 'antd-mobile';
 import { initDate } from '@utils/index.js';
+import Scroll from '@components/Scroll.jsx';
 import ScrollTop from '@components/ScrollTop.jsx';
 /**
  * @刘丹: 手术室叫号
@@ -101,7 +102,12 @@ class OperateScreen extends React.Component {
             </ScrollTop>
           </div>
         </div>
-        <div className='footer'>过号患者:{ this.props.delayPat}</div>
+        <div className='footer big'>
+           过号患者:
+           <div className='scroll-big'>
+             <Scroll text={this.props.delayPat}/>
+           </div>
+         </div>
       </div>
     );
   }