叫号新页面

src/assets/scss/style.scss

@@ -200,6 +200,51 @@ html{
         border-color: #6fba2c;
       }
     }
+    .swaper-wrap{
+      background-color: #E1E1E1;
+      height: 100%;
+    }
+    .swaper-header{
+      font-size: 1.4rem;
+      text-align: center;
+      padding: 0.6rem 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.bg{
+        background-color: #21469b;
+        color: #fff;
+      }
+      &.red{
+        color: #F22039;
+      }
+    }
+    .swaper-text-wrap{
+      display: flex;
+    }
+    .swaper-text{
+      flex: 1;
+      height: 2.88rem;
+      line-height: 2.88rem;;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 1.6rem;
+      text-align: center;
+      &.green{
+        color: #64B77C;
+      }
+      &.yellow{
+        color: #E0A11B;
+      }
+      &.icon{
+       flex: 0 0 1.9rem;
+      }
+      &.state{
+        font-size: 1.4rem;
+        flex: 0 0 3rem;
+      }
+    }
   }
   .footer {
     font-size: 1.2rem;

src/pages/bigScreen/Index.jsx

@@ -4,6 +4,7 @@ import Scroll from '@components/Scroll.jsx';
 import { Grid } from 'antd-mobile';
 import { initDate } from '@utils/index.js';
 import ScrollTop from '@components/ScrollTop.jsx';
+import { Swiper } from 'antd-mobile';
 /**
  * @刘丹: 大屏叫号
  */
@@ -13,6 +14,7 @@ class BigScreen extends React.Component {
     this.state = {
       dateStr: {},
       patList: [],
+      swapperArray: [], // 数据拆分为4个一组
     };
   }
   componentDidMount() {
@@ -20,12 +22,51 @@ class BigScreen extends React.Component {
     this.initRoom();
   }
   componentDidUpdate(prev) {
-    if (prev.patListArea != this.props.patListArea) {
+    if (prev.roomObj != this.props.roomObj) {
+      if (this.props.roomObj?.callMsg?.refreshFlag == 'Y') {
+        this.initRoom();
+        return; // 重新获取数据
+      }
+      const { patList } = this.state;
+      const newArray = [];
+      let flag = false;
+      patList.forEach((item) => {
+        if (this.props.roomObj?.roomDesc == item.roomDesc) {
+          flag = true;
+          newArray.push(this.props.roomObj);
+        } else {
+          newArray.push(item);
+        }
+      });
+      if (!flag) {
+        newArray.push(this.props.roomObj);
+      }
       this.setState({
-        patList: this.props.patListArea,
+        patList: newArray,
       });
+      this.initArray(newArray);
     }
   }
+  initArray = (data) => {
+    const newArray = [];
+    const len = data.length;
+    if (len <= 4) {
+      newArray.push(data);
+    } else {
+      for (let i = 0, j = 0; i < data.length; i++) {
+        if (i != 0 && i % 4 == 0) {
+          ++j;
+        }
+        if (!newArray[j]) {
+          newArray[j] = [];
+        }
+        newArray[j].push(data[i]);
+      }
+    }
+    this.setState({
+      swapperArray: newArray,
+    });
+  };
   // 叫号的诊室数据默认
   initRoom = () => {
     React.$fetchPost('04150020', {
@@ -33,10 +74,228 @@ class BigScreen extends React.Component {
        locID: '2068',
      }],
     }, true).then((data) => {
-      if (data) {
+      // data = {
+      //   'errorCode': 0,
+      //   'errorMessage': '成功',
+      //   'result': [
+      //     {
+      //       'locID': '2068',
+      //       'locDesc': '眼科门诊护士站',
+      //       'locENDesc': '',
+      //       'roomID': '1054',
+      //       'roomDesc': '专家诊室1',
+      //       'smallRoomDesc': '专家诊室1',
+      //       'roomENDesc': '',
+      //       'callMsg': {
+      //         'callPat': [
+      //           {
+      //             'patName': '',
+      //             'patCallNo': '',
+      //             'patCallStatus': '',
+      //             'patCallStatusDesc': ''
+      //           }
+      //         ],
+      //         'waitPat': [],
+      //         'reWaitPat': [],
+      //         'delayPat': ''
+      //       },
+      //       'delayPat': '',
+      //       'readMsg': '',
+      //       'areaID': '2068',
+      //       'docName': '王化峰',
+      //       'deviceList': [
+      //         {
+      //           'deviceID': 'BE998867F1FE62AB90EF5D698A1B7AFA3F7B6BF3'
+      //         },
+      //         {
+      //           'deviceID': '0.0.0.0'
+      //         },
+      //         {
+      //           'deviceID': '5e1af217e8d46320AA7DE4007D0836C2F370B1427C0A6D1DBBDA88B1'
+      //         }
+      //       ],
+      //       'path': '/images/wav/',
+      //       'holdNumber': '0',
+      //       'userData': {
+      //         'userID': '5802',
+      //         'userCode': '390007',
+      //         'userDesc': '王化峰',
+      //         'userENDesc': '',
+      //         'userTitleID': '6',
+      //         'userTitleDesc': '副主任医师',
+      //         'userTitleENDesc': '232',
+      //         'titleDisplay': '',
+      //         'userSexID': '1',
+      //         'userSexDesc': '男',
+      //         'userPositionID': '',
+      //         'userPositionDesc': '',
+      //         'userLanguageID': '1',
+      //         'userLanguageDesc': '简体中文',
+      //         'userEmailName': '90',
+      //         'userMobile': '13669859107',
+      //         'userDOB': '1973-05-29',
+      //         'userPswActiveDate': 9999,
+      //         'userDocFlag': 'Y',
+      //         'userNurFlag': 'N',
+      //         'userCertNo': '110441900006510',
+      //         'userSpecID': '',
+      //         'userSpecDesc': '',
+      //         'userSubSpecID': '',
+      //         'userSubSpecDesc': '',
+      //         'userSurgeon': 'N',
+      //         'userAnaesthetist': 'Y',
+      //         'userComments': '',
+      //         'userDateTo': '',
+      //         'userDateFrom': '2024-06-28',
+      //         'userActive': '有效',
+      //         'userEffective': 'Y',
+      //         'userAllowLayout': 'N',
+      //         'userAllowColumn': 'N',
+      //         'userName': '王化峰',
+      //         'userCredTypeID': '1',
+      //         'userCredTypeDesc': '居民身份证',
+      //         'userCredNo': '340202197305290058',
+      //         'userPostID': '',
+      //         'userPostDesc': '',
+      //         'userImage': '/images/photo/ff6beb5f6dbb23eeca997eca0a44df56.jpg',
+      //         'personImage': '',
+      //         'signUrl': '/images/photo/3b09d32a5eb6ba49047666063693b4bc.jpg',
+      //         'userIntroduce': '副主任医师，医学硕士\n东莞光明眼科医院门诊部主任，常平健明眼科医院业务院长，对眼科常见病和疑难病症有丰富的治疗经验，擅长眼表疾病，白内障，青光眼，眼底病，眼外伤等疾病的诊治，擅长白内障超声乳化摘除加人工晶体植入术，玻璃体视网膜手术，尤其对视网膜脱离和糖尿病视网膜病变的手术治疗有非常丰富的经验。\n中山大学中山眼科中心硕士研究生毕业，从事眼科临床工作二十余年,担任广东省医院协会眼健康管理专业委员会常委，广东省医师协会眼科分会眼底外科学组委员，广东省视光学学会眼底影像专委会委员，广东省医师协会眼科分会眼外伤学组委员。',
+      //         'insuUserCode': 'D441901014389',
+      //         'superDocFlag': 'N',
+      //         'attendDocFlag': 'N',
+      //         'optometryFlag': 'N',
+      //         'financialAuthority': 'N',
+      //         'hospDesc': '东莞常平健明眼科医院',
+      //         'organizationCode': 'H44190100519',
+      //         'businesslicense': '91441900MA4UNP4N95',
+      //         'certNo': '110441900006510',
+      //         'userLocked': 0,
+      //         'userTypeDesc': '医师/麻醉医生/',
+      //         'locCode': '',
+      //         'locDesc': '眼科门诊护士站',
+      //         'roomID': '1054',
+      //         'roomCode': '',
+      //         'roomDesc': '专家诊室1',
+      //         'userQrCode': 'https://np.h03.p0551.com/doctorpage/caf1ecdde8c9e81d321e0099ac4dde1f6ed689480130321e43ec40ad6dc82c1b60e259f5500a4deae7d3c1bd110fed012d3b72b372a69fb41b344f1762d946d8'
+      //       },
+      //       'voicenameArr': [
+      //         'zh-CN',
+      //         'zh-HK'
+      //       ],
+      //       'rate': 0
+      //     },
+      //     {
+      //       'locID': '2068',
+      //       'locDesc': '眼科门诊护士站',
+      //       'locENDesc': '',
+      //       'roomID': '1057',
+      //       'roomDesc': '专家诊室4',
+      //       'smallRoomDesc': '专家诊室4',
+      //       'roomENDesc': '',
+      //       'callMsg': {
+      //         'callPat': [
+      //           {
+      //             'patName': '',
+      //             'patCallNo': '',
+      //             'patCallStatus': '',
+      //             'patCallStatusDesc': ''
+      //           }
+      //         ],
+      //         'waitPat': [],
+      //         'reWaitPat': [],
+      //         'delayPat': ''
+      //       },
+      //       'delayPat': '',
+      //       'readMsg': '',
+      //       'areaID': '2068',
+      //       'docName': '张雪玲',
+      //       'deviceList': [
+      //         {
+      //           'deviceID': 'BE998867F1FE62AB90EF5D698A1B7AFA3F7B6BF3'
+      //         },
+      //         {
+      //           'deviceID': '5e1af217e8d46320AA7DE4007D0836C2F370B1427C0A6D1DBBDA88B1'
+      //         }
+      //       ],
+      //       'path': '/images/wav/',
+      //       'holdNumber': 1,
+      //       'userData': {
+      //         'userID': '6539',
+      //         'userCode': '340141',
+      //         'userDesc': '张雪玲',
+      //         'userENDesc': '',
+      //         'userTitleID': '5',
+      //         'userTitleDesc': '主任医师',
+      //         'userTitleENDesc': '231',
+      //         'titleDisplay': '',
+      //         'userSexID': '2',
+      //         'userSexDesc': '女',
+      //         'userPositionID': '',
+      //         'userPositionDesc': '',
+      //         'userLanguageID': '1',
+      //         'userLanguageDesc': '简体中文',
+      //         'userEmailName': '89',
+      //         'userMobile': '13669898332',
+      //         'userDOB': '1959-11-17',
+      //         'userPswActiveDate': 9999,
+      //         'userDocFlag': 'N',
+      //         'userNurFlag': 'N',
+      //         'userCertNo': '199844110420620591117004',
+      //         'userSpecID': '',
+      //         'userSpecDesc': '',
+      //         'userSubSpecID': '',
+      //         'userSubSpecDesc': '',
+      //         'userSurgeon': 'N',
+      //         'userAnaesthetist': 'N',
+      //         'userComments': '',
+      //         'userDateTo': '',
+      //         'userDateFrom': '2024-11-25',
+      //         'userActive': '有效',
+      //         'userEffective': 'Y',
+      //         'userAllowLayout': '',
+      //         'userAllowColumn': '',
+      //         'userName': '张雪玲',
+      //         'userCredTypeID': '1',
+      //         'userCredTypeDesc': '居民身份证',
+      //         'userCredNo': '420620591117004',
+      //         'userPostID': '',
+      //         'userPostDesc': '',
+      //         'userImage': '/images/photo/f46bea3ff2065c581a6c0fb22cb1ea6a.png',
+      //         'personImage': '',
+      //         'signUrl': '',
+      //         'userIntroduce': '主任医师 东莞光明眼科医院特聘专家\n擅 长：中西医结合治疗眼科常见病、多发病，尤其是对眼表疾病、白内障、青光眼、眼外伤、眼底病的诊断和治疗\n经历：曾任东莞市中医院眼耳鼻喉科主任、中心门诊部主任、东莞市医学会眼科分会委员。从事眼科临床工作四十余年，积累了丰富的临床诊疗经验。',
+      //         'insuUserCode': 'D441901008067',
+      //         'superDocFlag': 'N',
+      //         'attendDocFlag': 'N',
+      //         'optometryFlag': 'N',
+      //         'financialAuthority': 'N',
+      //         'hospDesc': '东莞光明眼科医院',
+      //         'organizationCode': '74366622544190031A5122',
+      //         'businesslicense': '74366622544190031A5122',
+      //         'certNo': '199844110420620591117004',
+      //         'userLocked': 0,
+      //         'userTypeDesc': '',
+      //         'locCode': '',
+      //         'locDesc': '眼科门诊护士站',
+      //         'roomID': '1057',
+      //         'roomCode': '',
+      //         'roomDesc': '专家诊室4',
+      //         'userQrCode': 'https://np.h03.p0551.com/doctorpage/48ec77d28e35953d627330a854ef2d62e95595f37f10fd78d1b733eb5b0add7ac637d5a4258f18be32ee1b1cca7761d85b217ccf8c120c293710c957d81da28a'
+      //       },
+      //       'voicenameArr': [
+      //         'zh-CN',
+      //         'zh-HK'
+      //       ],
+      //       'rate': 0
+      //     }
+      //   ]
+      // };
+      if (data && data.result) {
         this.setState({
           patList: data.result,
         });
+        this.initArray(data.result);
       }
     });
   };
@@ -69,52 +328,59 @@ class BigScreen extends React.Component {
           </span>
         </div>
         <div className='table section mt scroll-wrap'>
-          <Grid columns={24} gap={6}>
-            <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={11}>
-              <div className='table-header'>准备就诊</div>
-            </Grid.Item >
-            <Grid.Item span={5}>
-              <div className='table-header'>看报告</div>
-            </Grid.Item >
-          </Grid>
-          <div className='scroll-content'>
-            <ScrollTop text={this.state.patList}>
-            {this.state.patList.map((item,index) => {
-              return (<Grid columns={24} gap={6} key={index} className='mt'>
-                <Grid.Item span={5}>
-                  <div className='table-content docname'>{item.roomDesc}-{item.docName || '-'}</div>
-                </Grid.Item >
-                <Grid.Item span={3}>
-                  <div className='table-content patname'>
-                    {item?.callMsg?.callPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
-                  </div>
-                </Grid.Item >
-                <Grid.Item span={11}>
-                  <div className='table-content wait-list'>
-                    <Scroll
-                      text={item?.callMsg?.waitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
-                    />
-                  </div>
-                </Grid.Item >
-                <Grid.Item span={5}>
-                  <div className='table-content wait-list'>
-                    <Scroll
-                      text={item?.callMsg?.reWaitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
-                      isFast={true}
-                    />
-                  </div>
-                </Grid.Item >
-              </Grid>);
-            })}
-            </ScrollTop>
-          </div>
+        <Swiper
+          autoplay={true}
+          autoplayInterval={6000}
+          loop={true}
+          style={{height: '100%'}}
+          total={this.state.swapperArray.length}
+          indicator={false}
+          defaultIndex={1}
+        >
+          {this.state.swapperArray.map((patlist, index) => {
+            return <Swiper.Item key={index} style={{ height: '100%' }}>
+              <Grid columns={4} gap={6} className='swaper-wrap'>
+              {patlist.map((item,i) => {
+                return <Grid.Item span={1} key={index + i}  className='scroll-wrap'>
+                  <div className='swaper-header bg'>{item.roomDesc}-{item.docName || '-'} </div>
+                  <div className='swaper-header red'> {item?.callMsg?.callPat?.map(v => v.patCallNo + '' + v.patName).join(('、'))}正在就诊</div>
+                  <Grid columns={24} className='scroll-content'>
+                    <Grid.Item span={15} className='scroll-wrap'>
+                      <div className='swaper-header bg'>候诊</div>
+                      <div className='scroll-content'>
+                        <ScrollTop isFast={true}>
+                          {item?.callMsg?.waitPat?.map((v, wi) => {
+                            return <div className='swaper-text-wrap' key={wi}>
+                              <div className='swaper-text icon'>{v.patCallType}</div>
+                              <div className='swaper-text'>{v.patCallNo}{v.patName}</div>
+                              <div className={
+                                v.patCallStatusDesc == '待诊'
+                                  ? 'swaper-text state green'
+                                  : v.patCallStatusDesc == '未签'
+                                    ? 'swaper-text state yellow'
+                                    : 'swaper-text state'}>{v.patCallStatusDesc}</div>
+                            </div>;
+                          })}
+                        </ScrollTop>
+                      </div>
+                    </Grid.Item >
+                    <Grid.Item span={9} className='scroll-wrap'>
+                      <div className='swaper-header bg'>看报告</div>
+                      <div className='scroll-content'>
+                        <ScrollTop>
+                          {item?.callMsg?.reWaitPat?.map((v, ri) => {
+                            return <div className='swaper-text' key={ri}>{v.patCallNo}{v.patName}</div>;
+                          })}
+                        </ScrollTop>
+                      </div>
+                    </Grid.Item >
+                  </Grid>
+                </Grid.Item >;
+              })}
+              </Grid>
+            </Swiper.Item>;
+          })}
+        </Swiper>
         </div>
         <div className='footer big'>
           过号患者:

src/pages/bigScreen/IndexOld.jsx

@@ -0,0 +1,366 @@
+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';
+import ScrollTop from '@components/ScrollTop.jsx';
+/**
+ * @刘丹: 大屏叫号
+ */
+class BigScreen extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      dateStr: {},
+      patList: [],
+    };
+  }
+  componentDidMount() {
+    this.initDate();
+    this.initRoom();
+  }
+  componentDidUpdate(prev) {
+    if (prev.roomObj != this.props.roomObj) {
+       // todo
+      if (this.props.roomObj.t) {
+        this.initRoom();
+        return; // 重新获取数据
+      }
+      const { patList } = this.state;
+      const newArray = [];
+      let flag = false;
+      patList.forEach((item) => {
+        if (this.props.roomObj?.roomDesc == item.roomDesc) {
+          flag = true;
+          newArray.push(this.props.roomObj);
+        } else {
+          newArray.push(item);
+        }
+      });
+      if (!flag) {
+        newArray.push(this.props.roomObj);
+      }
+      this.setState({
+        patList: newArray,
+      });
+    }
+  }
+  // 叫号的诊室数据默认
+  initRoom = () => {
+    React.$fetchPost('04150020', {
+      params: [{
+       locID: '2068',
+     }],
+    }, true).then((data) => {
+      // data = {
+      //   'errorCode': 0,
+      //   'errorMessage': '成功',
+      //   'result': [
+      //     {
+      //       'locID': '2068',
+      //       'locDesc': '眼科门诊护士站',
+      //       'locENDesc': '',
+      //       'roomID': '1054',
+      //       'roomDesc': '专家诊室1',
+      //       'smallRoomDesc': '专家诊室1',
+      //       'roomENDesc': '',
+      //       'callMsg': {
+      //         'callPat': [
+      //           {
+      //             'patName': '',
+      //             'patCallNo': '',
+      //             'patCallStatus': '',
+      //             'patCallStatusDesc': ''
+      //           }
+      //         ],
+      //         'waitPat': [],
+      //         'reWaitPat': [],
+      //         'delayPat': ''
+      //       },
+      //       'delayPat': '',
+      //       'readMsg': '',
+      //       'areaID': '2068',
+      //       'docName': '王化峰',
+      //       'deviceList': [
+      //         {
+      //           'deviceID': 'BE998867F1FE62AB90EF5D698A1B7AFA3F7B6BF3'
+      //         },
+      //         {
+      //           'deviceID': '0.0.0.0'
+      //         },
+      //         {
+      //           'deviceID': '5e1af217e8d46320AA7DE4007D0836C2F370B1427C0A6D1DBBDA88B1'
+      //         }
+      //       ],
+      //       'path': '/images/wav/',
+      //       'holdNumber': '0',
+      //       'userData': {
+      //         'userID': '5802',
+      //         'userCode': '390007',
+      //         'userDesc': '王化峰',
+      //         'userENDesc': '',
+      //         'userTitleID': '6',
+      //         'userTitleDesc': '副主任医师',
+      //         'userTitleENDesc': '232',
+      //         'titleDisplay': '',
+      //         'userSexID': '1',
+      //         'userSexDesc': '男',
+      //         'userPositionID': '',
+      //         'userPositionDesc': '',
+      //         'userLanguageID': '1',
+      //         'userLanguageDesc': '简体中文',
+      //         'userEmailName': '90',
+      //         'userMobile': '13669859107',
+      //         'userDOB': '1973-05-29',
+      //         'userPswActiveDate': 9999,
+      //         'userDocFlag': 'Y',
+      //         'userNurFlag': 'N',
+      //         'userCertNo': '110441900006510',
+      //         'userSpecID': '',
+      //         'userSpecDesc': '',
+      //         'userSubSpecID': '',
+      //         'userSubSpecDesc': '',
+      //         'userSurgeon': 'N',
+      //         'userAnaesthetist': 'Y',
+      //         'userComments': '',
+      //         'userDateTo': '',
+      //         'userDateFrom': '2024-06-28',
+      //         'userActive': '有效',
+      //         'userEffective': 'Y',
+      //         'userAllowLayout': 'N',
+      //         'userAllowColumn': 'N',
+      //         'userName': '王化峰',
+      //         'userCredTypeID': '1',
+      //         'userCredTypeDesc': '居民身份证',
+      //         'userCredNo': '340202197305290058',
+      //         'userPostID': '',
+      //         'userPostDesc': '',
+      //         'userImage': '/images/photo/ff6beb5f6dbb23eeca997eca0a44df56.jpg',
+      //         'personImage': '',
+      //         'signUrl': '/images/photo/3b09d32a5eb6ba49047666063693b4bc.jpg',
+      //         'userIntroduce': '副主任医师，医学硕士\n东莞光明眼科医院门诊部主任，常平健明眼科医院业务院长，对眼科常见病和疑难病症有丰富的治疗经验，擅长眼表疾病，白内障，青光眼，眼底病，眼外伤等疾病的诊治，擅长白内障超声乳化摘除加人工晶体植入术，玻璃体视网膜手术，尤其对视网膜脱离和糖尿病视网膜病变的手术治疗有非常丰富的经验。\n中山大学中山眼科中心硕士研究生毕业，从事眼科临床工作二十余年,担任广东省医院协会眼健康管理专业委员会常委，广东省医师协会眼科分会眼底外科学组委员，广东省视光学学会眼底影像专委会委员，广东省医师协会眼科分会眼外伤学组委员。',
+      //         'insuUserCode': 'D441901014389',
+      //         'superDocFlag': 'N',
+      //         'attendDocFlag': 'N',
+      //         'optometryFlag': 'N',
+      //         'financialAuthority': 'N',
+      //         'hospDesc': '东莞常平健明眼科医院',
+      //         'organizationCode': 'H44190100519',
+      //         'businesslicense': '91441900MA4UNP4N95',
+      //         'certNo': '110441900006510',
+      //         'userLocked': 0,
+      //         'userTypeDesc': '医师/麻醉医生/',
+      //         'locCode': '',
+      //         'locDesc': '眼科门诊护士站',
+      //         'roomID': '1054',
+      //         'roomCode': '',
+      //         'roomDesc': '专家诊室1',
+      //         'userQrCode': 'https://np.h03.p0551.com/doctorpage/caf1ecdde8c9e81d321e0099ac4dde1f6ed689480130321e43ec40ad6dc82c1b60e259f5500a4deae7d3c1bd110fed012d3b72b372a69fb41b344f1762d946d8'
+      //       },
+      //       'voicenameArr': [
+      //         'zh-CN',
+      //         'zh-HK'
+      //       ],
+      //       'rate': 0
+      //     },
+      //     {
+      //       'locID': '2068',
+      //       'locDesc': '眼科门诊护士站',
+      //       'locENDesc': '',
+      //       'roomID': '1057',
+      //       'roomDesc': '专家诊室4',
+      //       'smallRoomDesc': '专家诊室4',
+      //       'roomENDesc': '',
+      //       'callMsg': {
+      //         'callPat': [
+      //           {
+      //             'patName': '',
+      //             'patCallNo': '',
+      //             'patCallStatus': '',
+      //             'patCallStatusDesc': ''
+      //           }
+      //         ],
+      //         'waitPat': [],
+      //         'reWaitPat': [],
+      //         'delayPat': ''
+      //       },
+      //       'delayPat': '',
+      //       'readMsg': '',
+      //       'areaID': '2068',
+      //       'docName': '张雪玲',
+      //       'deviceList': [
+      //         {
+      //           'deviceID': 'BE998867F1FE62AB90EF5D698A1B7AFA3F7B6BF3'
+      //         },
+      //         {
+      //           'deviceID': '5e1af217e8d46320AA7DE4007D0836C2F370B1427C0A6D1DBBDA88B1'
+      //         }
+      //       ],
+      //       'path': '/images/wav/',
+      //       'holdNumber': 1,
+      //       'userData': {
+      //         'userID': '6539',
+      //         'userCode': '340141',
+      //         'userDesc': '张雪玲',
+      //         'userENDesc': '',
+      //         'userTitleID': '5',
+      //         'userTitleDesc': '主任医师',
+      //         'userTitleENDesc': '231',
+      //         'titleDisplay': '',
+      //         'userSexID': '2',
+      //         'userSexDesc': '女',
+      //         'userPositionID': '',
+      //         'userPositionDesc': '',
+      //         'userLanguageID': '1',
+      //         'userLanguageDesc': '简体中文',
+      //         'userEmailName': '89',
+      //         'userMobile': '13669898332',
+      //         'userDOB': '1959-11-17',
+      //         'userPswActiveDate': 9999,
+      //         'userDocFlag': 'N',
+      //         'userNurFlag': 'N',
+      //         'userCertNo': '199844110420620591117004',
+      //         'userSpecID': '',
+      //         'userSpecDesc': '',
+      //         'userSubSpecID': '',
+      //         'userSubSpecDesc': '',
+      //         'userSurgeon': 'N',
+      //         'userAnaesthetist': 'N',
+      //         'userComments': '',
+      //         'userDateTo': '',
+      //         'userDateFrom': '2024-11-25',
+      //         'userActive': '有效',
+      //         'userEffective': 'Y',
+      //         'userAllowLayout': '',
+      //         'userAllowColumn': '',
+      //         'userName': '张雪玲',
+      //         'userCredTypeID': '1',
+      //         'userCredTypeDesc': '居民身份证',
+      //         'userCredNo': '420620591117004',
+      //         'userPostID': '',
+      //         'userPostDesc': '',
+      //         'userImage': '/images/photo/f46bea3ff2065c581a6c0fb22cb1ea6a.png',
+      //         'personImage': '',
+      //         'signUrl': '',
+      //         'userIntroduce': '主任医师 东莞光明眼科医院特聘专家\n擅 长：中西医结合治疗眼科常见病、多发病，尤其是对眼表疾病、白内障、青光眼、眼外伤、眼底病的诊断和治疗\n经历：曾任东莞市中医院眼耳鼻喉科主任、中心门诊部主任、东莞市医学会眼科分会委员。从事眼科临床工作四十余年，积累了丰富的临床诊疗经验。',
+      //         'insuUserCode': 'D441901008067',
+      //         'superDocFlag': 'N',
+      //         'attendDocFlag': 'N',
+      //         'optometryFlag': 'N',
+      //         'financialAuthority': 'N',
+      //         'hospDesc': '东莞光明眼科医院',
+      //         'organizationCode': '74366622544190031A5122',
+      //         'businesslicense': '74366622544190031A5122',
+      //         'certNo': '199844110420620591117004',
+      //         'userLocked': 0,
+      //         'userTypeDesc': '',
+      //         'locCode': '',
+      //         'locDesc': '眼科门诊护士站',
+      //         'roomID': '1057',
+      //         'roomCode': '',
+      //         'roomDesc': '专家诊室4',
+      //         'userQrCode': 'https://np.h03.p0551.com/doctorpage/48ec77d28e35953d627330a854ef2d62e95595f37f10fd78d1b733eb5b0add7ac637d5a4258f18be32ee1b1cca7761d85b217ccf8c120c293710c957d81da28a'
+      //       },
+      //       'voicenameArr': [
+      //         'zh-CN',
+      //         'zh-HK'
+      //       ],
+      //       'rate': 0
+      //     }
+      //   ]
+      // };
+      if (data && data.result?.length > 0) {
+        this.setState({
+          patList: data.result,
+        });
+      }
+    });
+  };
+  initDate = () => {
+    this.setState({
+      dateStr: initDate(),
+    });
+    setTimeout(() => {
+      this.initDate();
+    }, 3000);
+  };
+  render() {
+    const { dateStr } = this.state;
+    const { userData } = this.props;
+    return (
+      <div className='page-body big'>
+        <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='room-name'>{ userData.areaDesc || userData.locDesc}</span>
+          <span className='heaer-btn'>
+            <span className='date'>{ dateStr.dateNow}</span>
+            <br /> {dateStr.weekNow} {  dateStr.timeNow}
+          </span>
+        </div>
+        <div className='table section mt scroll-wrap'>
+          <Grid columns={24} gap={6}>
+            <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={11}>
+              <div className='table-header'>准备就诊</div>
+            </Grid.Item >
+            <Grid.Item span={5}>
+              <div className='table-header'>看报告</div>
+            </Grid.Item >
+          </Grid>
+          <div className='scroll-content'>
+            <ScrollTop text={this.state.patList}>
+            {this.state.patList.map((item,index) => {
+              return (<Grid columns={24} gap={6} key={index} className='mt'>
+                <Grid.Item span={5}>
+                  <div className='table-content docname'>{item.roomDesc}-{item.docName || '-'}</div>
+                </Grid.Item >
+                <Grid.Item span={3}>
+                  <div className='table-content patname'>
+                    {item?.callMsg?.callPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
+                  </div>
+                </Grid.Item >
+                <Grid.Item span={11}>
+                  <div className='table-content wait-list'>
+                    <Scroll
+                      text={item?.callMsg?.waitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
+                    />
+                  </div>
+                </Grid.Item >
+                <Grid.Item span={5}>
+                  <div className='table-content wait-list'>
+                    <Scroll
+                      text={item?.callMsg?.reWaitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
+                      isFast={true}
+                    />
+                  </div>
+                </Grid.Item >
+              </Grid>);
+            })}
+            </ScrollTop>
+          </div>
+        </div>
+        <div className='footer big'>
+          过号患者:
+          <div className='scroll-big'>
+            <Scroll text={this.props.delayPat}/>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BigScreen;

src/pages/home/Index.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import Login from '@components/login/Index.jsx';
 import DoctorScreen from '@pages/doctorScreen/Index.jsx';
 import BigScreen from '@pages/bigScreen/Index.jsx';
+import BigScreenOld from '@pages/bigScreen/IndexOld.jsx';
 import OperateScreen from '@pages/operateScreen/Index.jsx';
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { initSocket } from '@api/index.js';
 import { AntOutline, SetOutline } from 'antd-mobile-icons';
 import { Toast } from 'antd-mobile';
-import src from '../../assets/images/test1.jpeg';
 
 window.webGetDeviceId = function (callback) {
   window.callback = callback;
@@ -16,12 +16,11 @@ class Home extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showImage: false,
+      isGm: false,
       visibleLogin: false,
       userData: {}, // 用户及房间数据
       patList: [], // 就诊等待数据
       waitPat: [],
-      patListArea: [], //区域等待就诊患者数据
       reWaitPat: [], // 复诊的患者
       roomObj: {},
       delayPat: [], //候诊数据
@@ -37,7 +36,7 @@ class Home extends React.Component {
       // 模拟数据
       tempList: [
         {
-          'roomDesc': '专家诊室一', 'docName': '宦大达', 'callMsg':
+          'roomDesc': '专家诊室1', 'docName': '宦大达', 'callMsg':
           {
             'callPat': [{ 'patCallNo': '11号', 'patName': '患*者' }],
             'waitPat': [
@@ -65,7 +64,7 @@ class Home extends React.Component {
           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':
+          'roomDesc': '专家诊室2', 'docName': '医生1', 'callMsg':
           {
             'callPat': [{ 'patCallNo': '1号', 'patName': '患*者' }],
             'waitPat': [
@@ -138,7 +137,7 @@ class Home extends React.Component {
           }
         },
         {
-          'roomDesc': '诊室6', 'docName': '医生1', 'callMsg':
+          'roomDesc': '专家诊室4', 'docName': '医生1', 'callMsg':
           {
             'callPat': [{ 'patCallNo': '1号', 'patName': '患*者' }],
             'waitPat': [
@@ -188,6 +187,7 @@ class Home extends React.Component {
         {
           'roomDesc': '诊室10', 'docName': '医生1', 'callMsg':
           {
+            refreshFlag: 'Y',
             'callPat': [{ 'patCallNo': '1号', 'patName': '患*者' }],
             'waitPat': [
               { 'patCallNo': '复01', 'patName': '患*者1' },
@@ -254,18 +254,13 @@ class Home extends React.Component {
     const test = () => {
       var start = 0;
       setInterval(() => {
-        if (start > 3) {
+        if (start > 12) {
           return;
         }
         const data = this.state.tempList[start];
         const patList = [...data.callMsg.callPat, ...data.callMsg.waitPat.map(v => {
           return { ...v, status: 'waiting' };
         })];
-        const { roomObj } = this.state;
-        roomObj[data.roomDesc] = data;
-        const newArray = Object.keys(roomObj).map(key => {
-          return roomObj[key];
-        });
         this.setState({
           userData: {
             ...data?.userData,
@@ -275,14 +270,13 @@ class Home extends React.Component {
           patList,
           waitPat: data.callMsg.waitPat,
           reWaitPat: data.callMsg.reWaitPat,
-          patListArea: newArray,
-          roomObj,
+          roomObj: data,
           delayPat: data.delayPat,
         });
         ++start;
-      }, 3000);
+      }, 5000);
     };
-    //test();
+   // test();
   }
   initAndroidVoice() {
     window.mediaPlayOver = (flag) => {
@@ -356,8 +350,8 @@ class Home extends React.Component {
       colorName = '';
     }
     this.setState({
-      colorName,
-      showImage: !this.state.showImage,
+      // colorName,
+      isGm: !this.state.isGm,
     });
     localStorage.setItem('ZZJ-color', colorName);
   };
@@ -402,11 +396,6 @@ class Home extends React.Component {
         const patList = [...data.callMsg.callPat, ...data.callMsg.waitPat.map(v => {
           return { ...v, status: 'waiting' };
         })];
-        const { roomObj } = this.state;
-        roomObj[data.roomDesc] = data;
-        const newArray = Object.keys(roomObj).map(key => {
-          return roomObj[key];
-        });
         this.setState({
           userData: {
              ...data?.userData,
@@ -415,9 +404,7 @@ class Home extends React.Component {
           },
           patList,
           waitPat: data.callMsg.waitPat,
-          reWaitPat: data.callMsg.reWaitPat,
-          patListArea: newArray,
-          roomObj,
+          roomObj: data,
           delayPat: data.delayPat,
         });
         if (!data.path || !data.voiceFileName) {
@@ -489,10 +476,7 @@ class Home extends React.Component {
           loginInit={this.loginInit}
           deviceID={this.state.deviceID}
           />
-          {this.state.showImage
-            ? <img src={src} width={'100%'} />
-            : <>
-                 {this.state.showType == 'doctor'
+        {this.state.showType == 'doctor'
           ? <DoctorScreen
               userData={this.state.userData}
               patList={this.state.patList}
@@ -505,34 +489,36 @@ class Home extends React.Component {
                 userData={this.state.userData}
                 hosLogo={this.state.hosLogo}
               />
-            : < BigScreen
+              : this.state.isGm
+                ? <BigScreen
+                  userData={this.state.userData}
+                  roomObj={this.state.roomObj}
+                  delayPat={this.state.delayPat}
+                  hosLogo={this.state.hosLogo}
+                />
+                :< BigScreenOld
                 userData={this.state.userData}
-                patListArea={this.state.patListArea}
+                roomObj={this.state.roomObj}
                 delayPat={this.state.delayPat}
                 hosLogo={this.state.hosLogo}
               />
-
         }
-       
-      <span
-        className='bottom-set'
-      >
-        <AntOutline
-          style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}
-          onClick={this.changeSwitch}
-        />
-        <SetOutline
-          onClick={this.openLogin}
-          style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}
-        />
+        <span
+          className='bottom-set'
+        >
+          <AntOutline
+            style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}
+            onClick={this.changeSwitch}
+          />
+          <SetOutline
+            onClick={this.openLogin}
+            style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}
+          />
         </span>
         <audio controls id="audio"
           style={{ position: 'fixed', left: '-1000px', top: '100px' }}
         ></audio>
-            </>
-          }
-          {/* 医生诊室呼叫 */}
-          </div>
+      </div>
     </>
     );
   }