src/api/Meeting/index.ts

@@ -135,3 +135,16 @@ export const GetPolling = (roomNum: string, count: string) =>
     url: `/room/polling?roomNum=${roomNum}&count=${count}`,
     method: 'get'
   })
+
+export const GetRoomSingnIn = () =>
+  request({
+    url: `/room/sign-in`,
+    method: 'get'
+  })
+
+export const PostRoomSingnIn = (data: any) =>
+  request({
+    url: `/room/sign-in`,
+    method: 'post',
+    data
+  })

src/components/SingIn/index.module.scss

@@ -0,0 +1,32 @@
+.singInModal {
+  max-height: 80vh;
+
+  .singInModalContent {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin: 10px 0;
+
+    >div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px #363636 solid;
+      padding-bottom: 10px;
+
+      >span {
+        flex-grow: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 16px;
+        color: white;
+      }
+    }
+  }
+
+  .singInModalFooter {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+  }
+}

src/components/SingIn/index.tsx

@@ -0,0 +1,77 @@
+import { GetRoomSingnIn, PostRoomSingnIn } from '@/api/Meeting';
+import styles from '@/components/SingIn/index.module.scss'
+import { storage } from '@/utils';
+import { Button, message, Modal } from 'antd';
+import { useState, useImperativeHandle, forwardRef } from "react";
+const SingIn = forwardRef((props: any, ref: any) => {
+  useImperativeHandle(ref, () => ({
+    changeModal: () => {
+      setSingInModal(true)
+      getRoomSingnIn()
+    },
+    getModal: () => {
+      return new Promise((resolve, reject) => {
+        setSingInModal(bool => {
+          resolve(bool)
+          return bool
+        })
+      })
+    },
+  }))
+  const [singInModal, setSingInModal] = useState(false);
+  const [singInList, setSingInList] = useState([]);
+  const getRoomSingnIn = async (): Promise<void> => {
+    await GetRoomSingnIn().then(res => {
+      if (res.code === 200) {
+        setSingInList(res.data.map((item: any) => {
+          return {
+            ...item,
+            active: true
+          }
+        }))
+      }
+    })
+  }
+  return (
+    <>
+      <Modal
+        title="会议签到"
+        open={singInModal}
+        footer={null}
+        destroyOnClose={true}
+        onCancel={() => setSingInModal(false)}
+        centered
+        width={'300px'}
+      >
+        <div className={styles.singInModal}>
+          <div className={styles.singInModalContent}>
+            {singInList.map((item: any, index: number) => {
+              return <div key={index}>
+                <span>{item.signInName}</span>
+                {item.active ?
+                  <Button type="primary" className='m-ant-btn' onClick={async () => {
+                    const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
+                    const singInListTemp: any = [...singInList]
+                    singInListTemp[index].active = false;
+                    PostRoomSingnIn([{ signInName: item.signInName, roomNum: stateInfo.channelId }]).then(res => {
+                      if (res.code === 200) {
+                        message.success('签到成功')
+                        setSingInList(singInListTemp)
+                      }
+                    })
+                  }}>签到</Button>
+                  : <Button type="primary" style={{ backgroundColor: 'rgb(57,66,99)', marginLeft: '10px' }}>已签到</Button>}
+              </div>
+            })}
+          </div>
+          <div className={styles.singInModalFooter}>
+            <Button type="primary" style={{ backgroundColor: 'rgb(16,20,24)', width: '100%' }}
+              onClick={() => setSingInModal(false)}>关闭</Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+})
+
+export default SingIn

src/page/Meeting/index.tsx

@@ -23,6 +23,7 @@ import { role } from '@/config/role';
 import { fixWebmDuration } from "webm-duration-fix-buffer";
 import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
 import MeetingDisconnected from '@/components/MeetingDisconnected';
+import SingIn from '@/components/SingIn';
 const { confirm } = Modal;
 const { exec } = require('child_process');
 const fs = require('fs').promises;
@@ -36,6 +37,7 @@ const Meeting: React.FC = () => {
   const stupWizardRef = useRef<any>();
   const equipmentManagementRef = useRef<any>();
   const meetingDisconnectedRef = useRef<any>();
+  const singInRef = useRef<any>();
   const [isClicked, setIsClicked] = useState(false);
   const [statusList, setStatusList] = useState({
     userList: false,
@@ -102,6 +104,13 @@ const Meeting: React.FC = () => {
         active: false,
         select: false,
       },
+      {
+        title: '签到',
+        icon: ImageUrl.icon52,
+        iconSelect: ImageUrl.icon52Select,
+        active: false,
+        select: false,
+      },
       {
         title: '设置',
         icon: ImageUrl.icon28,
@@ -432,8 +441,18 @@ const Meeting: React.FC = () => {
                     } else {
                       message.error('当前不在会议室！')
                     }
+                    singInRef.current.getModal().then((res: boolean) => {
+                      if (!res) {
+                        singInRef.current.changeModal()
+                      }
+                    })
                   },
                   onCancel() {
+                    singInRef.current.getModal().then((res: boolean) => {
+                      if (!res) {
+                        singInRef.current.changeModal()
+                      }
+                    })
                   }
                 })
               }
@@ -1455,7 +1474,6 @@ const Meeting: React.FC = () => {
         await getUserRoomInfo().then(async (res) => {
           stupWizardRef.current.changeModal(0, res)
         })
-
         break;
       case '邀请人员':
         await getUserRoomInfo().then(async (res) => {
@@ -1559,6 +1577,9 @@ const Meeting: React.FC = () => {
         storage.setItem('noViewChatList', 0)
         setNoViewChatList(0)
         break;
+      case '签到':
+        singInRef.current.changeModal()
+        break;
     }
   }
   // 停止录制
@@ -2705,10 +2726,23 @@ const Meeting: React.FC = () => {
                             <span>{row.title}</span>
                           </div>
                         </Popover>
+                      case '签到':
+                        if (!role.ID.includes(user.roleId)) {
+                          return <div className='drag'
+                            onClick={() => changeStatusList(row, itemIndex, rowIndex)}
+                            onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                            onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                            onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                            key={rowIndex}>
+                            {row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.icon} alt="" />}
+                            <span>{row.title}</span>
+                          </div>
+                        }
+                        return null
                       case '申请发言':
                         // if (!role.ID.includes(user.roleId)) {
                         //   return <div className='drag' onClick={() => changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}>
-                        //     <img src={row.active ? row.iconActive : row.icon} alt="" />
+                        //     {row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
                         //     <span>{row.title}</span>
                         //   </div>
                         // }
@@ -2917,6 +2951,7 @@ const Meeting: React.FC = () => {
       <StupWizard ref={stupWizardRef} />
       <EquipmentManagement ref={equipmentManagementRef} />
       <MeetingDisconnected ref={meetingDisconnectedRef} />
+      <SingIn ref={singInRef} />
     </>
   )
 }

src/utils/package/imageUrl.ts

@@ -79,6 +79,8 @@ import virtualBackground3 from '@/assets/virtualBackground/3.png'
 import virtualBackground4 from '@/assets/virtualBackground/4.png'
 import virtualBackground5 from '@/assets/virtualBackground/5.png'
 import virtualBackground6 from '@/assets/virtualBackground/6.png'
+import icon52 from '@/assets/icon52.png'
+import icon52Select from '@/assets/icon52-select.png'
 export default {
   loading,
   icon,
@@ -161,4 +163,6 @@ export default {
   virtualBackground4,
   virtualBackground5,
   virtualBackground6,
+  icon52,
+  icon52Select
 }