细节调整

src/assets/scss/style.scss

@@ -19,15 +19,6 @@ body {
   color: #333;
   height: 100%;
   box-sizing: border-box;
-  &.big {
-    .room-name {
-      font-size: 1.8rem !important;
-    }
-    .table-content,
-    .table-header {
-      font-size: 1.6rem !important;
-    }
-  }
 }
 .page-body {
   margin: 0;
@@ -45,8 +36,10 @@ body {
 
   .header {
     position: relative;
+    display: flex;
+    align-items: center;
     .logo {
-      width: 16rem;
+      width: 10rem;
       border-radius: 0.5rem;
       display: inline-block;
       padding: 0.1em 1.5rem;
@@ -68,7 +61,7 @@ body {
       box-sizing: border-box;
       display: inline-block;
       padding: 0.8rem 2rem;
-      font-size: 1.6rem;
+      font-size: 2rem;
       font-weight: 500;
       color: #fff;
       white-space: nowrap;
@@ -135,11 +128,7 @@ body {
   }
   .table {
     flex: 1;
-    margin-top: 0.5rem;
     overflow: hidden;
-    &.section {
-      padding-top: 0.3rem;
-    }
     .table-content,
     .table-header {
       box-sizing: border-box;
@@ -147,15 +136,18 @@ body {
       border-radius: 0.5rem;
       border: 0.14rem solid #21469b;
       padding: 0 0.8rem;
-      font-size: 1.4rem;
+      font-size: 1.6rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      height: 3.8rem;
-      line-height: 3.5rem;
+      height: 3.9rem;
+      line-height: 3.62rem;
       text-align: center;
       color: #fff;
-      margin-top: 0.5rem;
+      div{
+        display: inline-block;
+        position: relative;
+      }
     }
     .table-content {
       background-color: #f0f0f0;
@@ -195,7 +187,7 @@ body {
   }
   .footer {
     font-size: 1.2rem;
-    margin: 0.8rem 0 0 0;
+    padding: 0.8rem 0 0.4rem 0;
     color: #fff;
   }
 }
@@ -263,3 +255,18 @@ body {
     color: #fff;
   }
 }
+
+.marquee {
+  animation: marquee 10s linear infinite;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.marquee.fast {
+  animation: marquee 5s linear infinite;
+}
+@keyframes marquee {
+  0% { left: 0; }
+  100% { left: -50%; }
+}

src/components/Scroll.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Input, Form, Modal, Selector, Toast } from 'antd-mobile';
+const ref = React.createRef();
+/**
+ * @刘丹: 登录公用
+ */
+class Scroll extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      isScroll: false,
+    };
+  }
+  componentDidMount() {
+    if (ref.current) {
+      this.setState({
+        isScroll: ref.current.offsetWidth > ref.current.parentNode.offsetWidth,
+      });
+    }
+  }
+  componentDidUpdate(prev) {
+    if (prev.text !== this.props.text && ref.current) {
+      this.setState({
+        isScroll: ref.current.offsetWidth > ref.current.parentNode.offsetWidth,
+      });
+    }
+   
+  }
+  render() {
+    return (
+      <div ref = { ref }>
+        <div className={this.state.isScroll
+          ? this.props.isFast ? 'marquee fast' : 'marquee'
+          : ''}
+        >
+          {this.props.text}
+        </div>
+     </div>
+    );
+  }
+}
+
+export default Scroll;

src/pages/bigScreen/Index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import logo from '@assets/images/logo.png';
+import Scroll from '@components/Scroll.jsx';
 import { Grid } from 'antd-mobile';
 import { initDate } from '@utils/index.js';
 /**
@@ -15,12 +16,37 @@ class BigScreen extends React.Component {
       pageSize: 6, // 一页显示的数据条数
       timer: null, // 切换页面显示的定时器
       // 模拟数据
-      tempList: [{ 'roomDesc': '一诊室', 'docName': '医生1','callMsg':{'callPat':[{'patCallNo':'','patName':'患者1'}],'waitPat':[{'patCallNo':'','patName':'患者2a'}]}},
-       { 'roomDesc': '二诊室', 'docName': '医生2','callMsg':{'callPat':[{'patCallNo':'','patName':'患者2'}],'waitPat':[{'patCallNo':'','patName':'患者2v'}]}},
+      tempList: [{
+        'roomDesc': '专家诊室', 'docName': '宦大达', 'callMsg':
+        {
+          'callPat': [{ 'patCallNo': '11号', 'patName': '患*者' }],
+          'waitPat': [
+            { 'patCallNo': '复01', 'patName': '患*者1' },
+            { 'patCallNo': '复02', 'patName': '患*者2' },
+            { 'patCallNo': '复03', 'patName': '患者3a' },
+            { 'patCallNo': '复01', 'patName': '患*者' },
+            { 'patCallNo': '复01', 'patName': '患者2a' },
+            { 'patCallNo': '复01', 'patName': '患者2a' },
+            { 'patCallNo': '复01', 'patName': '患者2a' }],
+          'reWaitPat': [
+            { 'patCallNo': '复01', 'patName': '患*者1' },
+            { 'patCallNo': '复02', 'patName': '患*者2' },
+            { 'patCallNo': '复03', 'patName': '患者3a' },
+            { 'patCallNo': '复04', 'patName': '患者4a' }],
+        }
+      },
+       { 'roomDesc': '二诊室', 'docName': '医生2','callMsg':{'callPat':[{'patCallNo':'','patName':'患者2'}],'waitPat':[{'patCallNo':'','patName':'患者2v'}]},},
        { 'roomDesc': '三诊室', 'docName': '医生3','callMsg':{'callPat':[{'patCallNo':'','patName':'患者3'}],'waitPat':[{'patCallNo':'','patName':'患者2d'}]}},
        { 'roomDesc': '四诊室', 'docName': '医生4','callMsg':{'callPat':[{'patCallNo':'','patName':'患者4'}],'waitPat':[{'patCallNo':'','patName':'患者2g'}]}},
        { 'roomDesc': '五诊室', 'docName': '医生5','callMsg':{'callPat':[{'patCallNo':'','patName':'患者5'}],'waitPat':[{'patCallNo':'','patName':'患者2f'}]}},
-       { 'roomDesc': '六诊室', 'docName': '医生6','callMsg':{'callPat':[{'patCallNo':'','patName':'患者6'}],'waitPat':[{'patCallNo':'','patName':'患者2h'}]}},
+        { 'roomDesc': '六诊室', 'docName': '医生6', 'callMsg': { 'callPat': [{ 'patCallNo': '', 'patName': '患者6' }], 'waitPat': [{ 'patCallNo': '', 'patName': '患者2h' }] } },
+        { 'roomDesc': '六诊室', 'docName': '医生6', 'callMsg': { 'callPat': [{ 'patCallNo': '', 'patName': '患者6' }], 'waitPat': [{ 'patCallNo': '', 'patName': '患者2h' }] } },
+        { 'roomDesc': '六诊室', 'docName': '医生6', 'callMsg': { 'callPat': [{ 'patCallNo': '', 'patName': '患者6' }], 'waitPat': [{ 'patCallNo': '', 'patName': '患者2h' }] } },
+        { 'roomDesc': '六诊室', 'docName': '医生6','callMsg':{'callPat':[{'patCallNo':'','patName':'患者6'}],'waitPat':[{'patCallNo':'','patName':'患者2h'}]}},
+        { 'roomDesc': '六诊室', 'docName': '医生6','callMsg':{'callPat':[{'patCallNo':'','patName':'患者6'}],'waitPat':[{'patCallNo':'','patName':'患者2h'}]}},
+        { 'roomDesc': '六诊室', 'docName': '医生6','callMsg':{'callPat':[{'patCallNo':'','patName':'患者6'}],'waitPat':[{'patCallNo':'','patName':'患者2h'}]}},
+        { 'roomDesc': '六诊室', 'docName': '医生6','callMsg':{'callPat':[{'patCallNo':'','patName':'患者6'}],'waitPat':[{'patCallNo':'','patName':'患者2h'}]}},
+        { 'roomDesc': '六诊室', 'docName': '医生6','callMsg':{'callPat':[{'patCallNo':'','patName':'患者6'}],'waitPat':[{'patCallNo':'','patName':'患者2h'}]}},
        { 'roomDesc': '七诊室', 'docName': '医生7','callMsg':{'callPat':[{'patCallNo':'','patName':'患者7'}],'waitPat':[{'patCallNo':'','patName':'患者2y'}]}}],
     };
   }
@@ -90,7 +116,6 @@ class BigScreen extends React.Component {
   render() {
     const { dateStr } = this.state;
     const { userData } = this.props;
-    const hasRe = this.state.patList?.filter(v => v.callMsg?.reWaitPat && v.callMsg?.reWaitPat.length > 0).length > 0;
     return (
       <div className='page-body big'>
         <div className='header'>
@@ -108,42 +133,47 @@ class BigScreen extends React.Component {
             <br /> {dateStr.weekNow} {  dateStr.timeNow}
           </span>
         </div>
-        <div className='table section' id="patWrap">
-          <Grid columns={hasRe ? 5 : 4} gap={8}>
-            <Grid.Item span={1}>
+        <div className='table section mt' id="patWrap">
+          <Grid columns={12} gap={8}>
+            <Grid.Item span={2}>
               {/* <div className='table-header'>{userData.locDesc === '验光配镜分诊区' ? '验光室' : '诊室'}</div> */}
               <div className='table-header'>{ userData.locDesc === '验光配镜分诊区' ? '验光师':'医生' }</div>
             </Grid.Item >
             <Grid.Item span={1}>
               <div className='table-header'>正在就诊</div>
             </Grid.Item >
-             <Grid.Item span={2}>
+             <Grid.Item span={7}>
               <div className='table-header'>准备就诊</div>
             </Grid.Item >
-             {hasRe &&  <Grid.Item span={1}>
+            <Grid.Item span={2}>
               <div className='table-header'>看报告</div>
-            </Grid.Item > }
+            </Grid.Item >
           </Grid>
           {this.state.patList.map((item,index) => {
-            return (<Grid columns={5} gap={8} key={index}>
-              <Grid.Item span={1}>
+            return (<Grid columns={12} gap={8} key={index} className='mt'>
+              <Grid.Item span={2}>
                 <div className='table-content docname'>{item.roomDesc}-{item.docName || '-'}</div>
               </Grid.Item >
               <Grid.Item span={1}>
                 <div className='table-content patname'>
-                  {item?.callMsg?.callPat?.map(v => v.patName + ' ' + v.patCallNo).join((','))}
+                  {item?.callMsg?.callPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
                 </div>
               </Grid.Item >
-              <Grid.Item span={2}>
+              <Grid.Item span={7}>
                 <div className='table-content'>
-                  {item?.callMsg?.waitPat?.map(v => v.patName + ' ' + v.patCallNo).join((','))}
+                  <Scroll
+                    text={item?.callMsg?.waitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
+                  />
                 </div>
               </Grid.Item >
-              { hasRe && <Grid.Item span={1}>
+              <Grid.Item span={2}>
                 <div className='table-content'>
-                  {item?.callMsg?.reWaitPat?.map(v => v.patName + ' ' + v.patCallNo).join((','))}
+                  <Scroll
+                    text={item?.callMsg?.reWaitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
+                    isFast={true}
+                  />
                 </div>
-              </Grid.Item >}
+              </Grid.Item >
             </Grid>);
           })}
         </div>

src/pages/doctorScreen/Index.jsx

@@ -101,7 +101,7 @@ class DoctorScreen extends React.Component {
             <br /> Opening
           </span>
         </div>
-        <Grid  columns={3} gap={8}>
+        <Grid  columns={3} gap={8} className='mt'>
           <Grid.Item span={1}>
             <div className='section'>
               <div className='chinese-name big'>{userData.roomDesc || '诊区'}</div>
@@ -152,17 +152,17 @@ class DoctorScreen extends React.Component {
             </Grid.Item>
           </Grid>
         </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">
+        <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}>
+                  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>
@@ -178,8 +178,8 @@ class DoctorScreen extends React.Component {
                 })}
               </div>
             </Grid.Item>
-            {reWaitPat?.length > 0 && <Grid.Item span={1}>
-              <div className='table section'>
+            <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>
@@ -193,7 +193,7 @@ class DoctorScreen extends React.Component {
                   </Grid>);
                 })}
               </div>
-            </Grid.Item>}
+            </Grid.Item>
           </Grid>
         </div>
         <div className='footer'>请按显示信息排队就诊，看报告请到报道机或护士站报到！</div>

src/pages/home/Index.jsx

@@ -221,7 +221,7 @@ class Home extends React.Component {
         }
       </div>
       <span
-        style={{ position: 'fixed', right: 0, bottom: 0, padding: '0.4rem' }}
+        style={{ position: 'fixed', right: '0.6rem', bottom: '0.6rem', padding: '0.4rem' }}
       >
         <AntOutline
           style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}

src/pages/operateScreen/Index.jsx

@@ -98,8 +98,8 @@ class OperateScreen extends React.Component {
             <br /> {dateStr.weekNow} {  dateStr.timeNow}
           </span>
         </div>
-         <div className='table section' id="patWrap">
-            <Grid columns={7} gap={8}>
+         <div className='table section mt' id="patWrap">
+            <Grid columns={12} gap={8}>
               <Grid.Item span={1}>
                 <div className='table-header'>姓名</div>
               </Grid.Item>
@@ -109,7 +109,7 @@ class OperateScreen extends React.Component {
                <Grid.Item span={1}>
                 <div className='table-header'>年龄</div>
               </Grid.Item>
-              <Grid.Item span={2}>
+              <Grid.Item span={7}>
                 <div className='table-header'>手术类别</div>
               </Grid.Item>
               <Grid.Item span={1}>
@@ -120,7 +120,7 @@ class OperateScreen extends React.Component {
               </Grid.Item>
             </Grid>
             {this.state.patList.map((item,index) => {
-              return (<Grid  columns={7} gap={8} key={index}>
+              return (<Grid  columns={12} gap={8} key={index} className='mt'>
                 <Grid.Item span={1}>
                   <div className='table-content'>{ item.patName || '***'}</div>
                 </Grid.Item>
@@ -130,7 +130,7 @@ class OperateScreen extends React.Component {
                  <Grid.Item span={1}>
                   <div className='table-content'>{item.patAge || '***'}</div>
                 </Grid.Item>
-                 <Grid.Item span={2}>
+                 <Grid.Item span={7}>
                   <div className='table-content patOpeName'>
                     {item.patOpeName || '***'}
                   </div>