src/api/Home/User/index.ts

@@ -58,3 +58,29 @@ export const PostUserImport = (data: any) =>
     method: 'post',
     data
   })
+
+export const GetSigninList = () =>
+  request({
+    url: `/user/signin-list`,
+    method: 'get',
+  })
+
+export const PostUserImportSigninList = (data: any) =>
+  request({
+    url: `/user/import/signin-list`,
+    method: 'post',
+    data
+  })
+
+export const GetSigns = (uid: string) =>
+  request({
+    url: `/user/signs?uid=${uid}`,
+    method: 'get',
+  })
+
+export const PutSigns = (uid: string, data: any) =>
+  request({
+    url: `/user/signs?uid=${uid}`,
+    method: 'put',
+    data,
+  })

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,79 @@
+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: () => {
+      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) {
+        if (res.data.length) {
+          setSingInModal(true)
+        }
+        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/Home/User/index.module.scss

@@ -99,3 +99,18 @@
     }
   }
 }
+
+.signInUserModal {
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+
+  >div:nth-child(1) {
+    flex-grow: 1;
+    overflow-y: auto;
+  }
+
+  >div:nth-child(2) {
+    flex-shrink: 0;
+  }
+}

src/page/Home/User/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react";
 import Operation from '@/components/Operation';
 import { Button, Input, Table, Pagination, Modal, message, Select } from "antd";
 import { ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons';
-import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList, PostUserImport, GetSubDpList, PutUserBth } from '@/api/Home/User';
+import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList, PostUserImport, GetSubDpList, PutUserBth, GetSigninList, PostUserImportSigninList, GetSigns, PutSigns } from '@/api/Home/User';
 import * as CryptoJS from 'crypto-js';
 import ImageUrl from '@/utils/package/imageUrl';
 import { storage } from '@/utils';
@@ -35,8 +35,14 @@ const User: React.FC = () => {
     year: '0',
   })
   const [changeUserPawModal, setChangeUserPawModal] = useState(false)
+  const [signInModal, setSignInModal] = useState(false)
+  const [signInUserModal, setSignInUserModal] = useState(false)
+  const [signInUserForm, setSignInUserForm] = useState({
+    currentUserList: [],
+    uid: ''
+  })
   const [changeImportModal, setChangeImportModal] = useState(false)
-  const [changeUserPawFrom, setChangeUserPawFrom] = useState({
+  const [changeUserPawForm, setChangeUserPawForm] = useState({
     Pwd: "",
     newPwd: '',
   })
@@ -94,6 +100,7 @@ const User: React.FC = () => {
       const buffer = Buffer.from(arrayBuffer);
       await fs.writeFile(`${setting.shareFilesPath}\\${data.fileName}`, buffer, {});
       setChangeImportModal(false)
+      setSignInModal(false)
       confirm({
         title: '提示',
         icon: <ExclamationCircleFilled />,
@@ -160,14 +167,14 @@ const User: React.FC = () => {
               }}
               icon={<img src={ImageUrl.icon8} alt="" />}
               className='m-ant-btn'>
-              添加用户
+              添加
             </Button>
             <Button type="primary"
               onClick={() => {
                 setChangeImportModal(true)
               }}
               className='m-ant-btn'>
-              批量导入用户
+              批量添加
             </Button>
             <Button type="primary"
               onClick={() => {
@@ -192,7 +199,14 @@ const User: React.FC = () => {
                 }
               }}
               className='m-ant-btn'>
-              批量修改用户信息
+              批量修改
+            </Button>
+            <Button type="primary"
+              onClick={() => {
+                setSignInModal(true)
+              }}
+              className='m-ant-btn'>
+              批量签到绑定
             </Button>
             <Button type="primary"
               icon={<img src={ImageUrl.icon21} alt="" />}
@@ -207,6 +221,7 @@ const User: React.FC = () => {
             >
               删除用户
             </Button>
+            
           </div>
           <div className={`${styles.userBtnsRight} drag`}>
             <Input
@@ -260,7 +275,7 @@ const User: React.FC = () => {
                 <div>{subjectList.find((subject: any) => subject.value === item.subject)?.label}</div>
               </>
             )} />
-            <Column title="操作" width={200} render={(item) => (
+            <Column title="操作" width={300} render={(item) => (
               <>
                 <Button
                   type="primary"
@@ -288,7 +303,7 @@ const User: React.FC = () => {
                   style={{ backgroundColor: '#715AFF40', marginRight: '14px' }}
                   size={'small'}
                   onClick={() => {
-                    setChangeUserPawFrom({
+                    setChangeUserPawForm({
                       Pwd: "",
                       newPwd: '',
                     })
@@ -301,6 +316,25 @@ const User: React.FC = () => {
                     })
                     setChangeUserPawModal(true)
                   }}>更改密码</Button>
+                <Button
+                  type="primary"
+                  style={{ backgroundColor: '#0085FF30', marginRight: '14px' }}
+                  size={'small'}
+                  onClick={() => {
+                    setSignInUserForm({
+                      currentUserList: [],
+                      uid: item.id,
+                    })
+                    GetSigns(item.id).then(res => {
+                      if (res.code === 200) {
+                        setSignInUserForm({
+                          uid: item.id,
+                          currentUserList: res.data,
+                        })
+                        setSignInUserModal(true)
+                      }
+                    })
+                  }}>签到绑定</Button>
               </>
             )} />
           </Table>
@@ -478,10 +512,10 @@ const User: React.FC = () => {
               <Input.Password
                 placeholder="请输入新密码"
                 style={{ flexGrow: 1 }}
-                value={changeUserPawFrom.Pwd}
+                value={changeUserPawForm.Pwd}
                 onChange={(e) => {
-                  setChangeUserPawFrom({
+                  setChangeUserPawForm({
-                    ...changeUserPawFrom,
+                    ...changeUserPawForm,
                     Pwd: e.target.value,
                   });
                 }}
@@ -492,10 +526,10 @@ const User: React.FC = () => {
               <Input.Password
                 placeholder="再次输入密码"
                 style={{ flexGrow: 1 }}
-                value={changeUserPawFrom.newPwd}
+                value={changeUserPawForm.newPwd}
                 onChange={(e) => {
-                  setChangeUserPawFrom({
+                  setChangeUserPawForm({
-                    ...changeUserPawFrom,
+                    ...changeUserPawForm,
                     newPwd: e.target.value,
                   });
                 }}
@@ -507,14 +541,14 @@ const User: React.FC = () => {
           }}>
             <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setChangeUserPawModal(false)}>取消</Button>
             <Button type="primary" className='m-ant-btn' onClick={async () => {
-              if (!changeUserPawFrom.Pwd || !changeUserPawFrom.newPwd) {
+              if (!changeUserPawForm.Pwd || !changeUserPawForm.newPwd) {
                 return message.error('请输入密码！')
               }
-              if (changeUserPawFrom.Pwd !== changeUserPawFrom.newPwd) {
+              if (changeUserPawForm.Pwd !== changeUserPawForm.newPwd) {
                 return message.error('新密码与确认密码不一致！')
               }
 
-              await PutUserPwd({ id: addUserFrom.Id, pwd: CryptoJS.MD5(changeUserPawFrom.Pwd).toString(CryptoJS.enc.Hex) }).then(res => {
+              await PutUserPwd({ id: addUserFrom.Id, pwd: CryptoJS.MD5(changeUserPawForm.Pwd).toString(CryptoJS.enc.Hex) }).then(res => {
                 if (res.code === 200) {
                   setChangeUserPawModal(false)
                   message.success('修改成功')
@@ -609,6 +643,135 @@ const User: React.FC = () => {
           </div>
         </div>
       </Modal>
+      <Modal title='签到绑定' open={signInModal} onCancel={() => setSignInModal(false)} footer={null} centered width={'300px'}>
+        <div>
+          <div>
+            <Button type="primary" className='m-ant-btn' style={{ width: '100%', marginBottom: '10px' }}
+              onClick={async () => {
+                const setting = await JSON.parse(storage.getItem('setting') as string)
+                await GetSigninList().then(res => {
+                  if (res.code === 200) {
+                    const fileName = res.data.split('/').pop().split('?')[0];
+                    fileUpLoad({
+                      url: res.data,
+                      content: `下载签到模板成功！文件已保存至:${setting.shareFilesPath}`,
+                      fileName: fileName,
+                    })
+                  }
+                })
+              }}
+            >
+              下载签到模版
+            </Button>
+          </div>
+          <div>
+            <Button type="primary" className='m-ant-btn' style={{ width: '100%' }}
+              onClick={() => {
+                const file = document.createElement("input") as any;
+                file.type = "file";
+                // file.accept = ".xls,.xlsx";
+                file.onchange = async () => {
+                  const setting = await JSON.parse(storage.getItem('setting') as string)
+                  const fileInfo = file.files[0];
+                  const formData = new FormData();
+                  formData.append("file", fileInfo);
+                  await PostUserImportSigninList(formData).then(res => {
+                    if (res.code === 200) {
+                      if (res.data.item1) {
+                        message.success(res.data.item3)
+                      } else {
+                        if (res.data.item2) {
+                          const fileName = res.data.item2.split('/').pop().split('?')[0];
+                          fileUpLoad({
+                            url: res.data.item2,
+                            content: `导入模板失败！失败文件已保存至:${setting.shareFilesPath}`,
+                            fileName
+                          })
+                        }
+                        message.error(res.data.item3)
+                      }
+                    }
+                  })
+                  setSignInModal(false)
+                };
+                file.click();
+              }}
+            >
+              选择导入文件
+            </Button>
+          </div>
+        </div>
+      </Modal>
+      <Modal title='签到绑定' open={signInUserModal} destroyOnClose={true} onCancel={() => setSignInUserModal(false)} footer={null} centered width={'300px'}>
+        <div className={styles.signInUserModal}>
+          <div id='signInView'>
+            {signInUserForm.currentUserList.map((item: any, index: number) => {
+              return (
+                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }} key={index}>
+                  <Input
+                    placeholder="请输入用户名称"
+                    value={item.signInName}
+                    onChange={(e) => {
+                      let currentUserListTemp: any = [...signInUserForm.currentUserList]
+                      currentUserListTemp[index].signInName = e.target.value
+                      setSignInUserForm({
+                        ...signInUserForm,
+                        currentUserList: currentUserListTemp,
+                      })
+                    }}
+                  />
+                  <img src={ImageUrl.icon21} alt="" style={{ cursor: 'pointer', marginLeft: '10px' }} onClick={() => {
+                    let currentUserListTemp: any = [...signInUserForm.currentUserList]
+                    currentUserListTemp.splice(index, 1)
+                    setSignInUserForm({
+                      ...signInUserForm,
+                      currentUserList: currentUserListTemp,
+                    })
+                  }} />
+                </div>
+              )
+            })
+            }
+            <Button type="primary"
+              onClick={() => {
+                let currentUserListTemp: any = [...signInUserForm.currentUserList, {
+                  id: 0,
+                  uId: signInUserForm.uid,
+                  signInName: '',
+                }]
+                setSignInUserForm({
+                  ...signInUserForm,
+                  currentUserList: currentUserListTemp,
+                })
+                setTimeout(() => {
+                  const signInView = document.getElementById('signInView') as HTMLElement;
+                  if (signInView) {
+                    signInView.scrollTop = signInView.scrollHeight;
+                  }
+                }, 0);
+              }}
+              style={{ width: '100%', marginBottom: '20px' }}
+              icon={<img src={ImageUrl.icon8} alt="" />}
+              className='m-ant-btn'>
+              添加签到人
+            </Button>
+          </div>
+          <div style={{
+            display: 'flex', justifyContent: 'center'
+          }}>
+            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }}
+              onClick={() => setSignInUserModal(false)}>取消</Button>
+            <Button type="primary" className='m-ant-btn' onClick={() => {
+              PutSigns(signInUserForm.uid, signInUserForm.currentUserList).then(res => {
+                if (res.code === 200) {
+                  message.success('签到绑定成功')
+                  setSignInUserModal(false)
+                }
+              })
+            }}>确定</Button>
+          </div>
+        </div>
+      </Modal>
       <StupWizard ref={stupWizardRef} />
     </>
   )

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,
@@ -409,6 +418,15 @@ const Meeting: React.FC = () => {
     firstFooterList[0][1].title = state.enableCamera ? '关闭视频' : '开启视频'
     firstFooterList[0][1].active = !state.enableCamera
     setFooterList(firstFooterList)
+    function showSingIn() {
+      if (!role.ID.includes(userInfo.roleId)) {
+        singInRef.current.getModal().then((res: boolean) => {
+          if (!res) {
+            singInRef.current.changeModal()
+          }
+        })
+      }
+    }
     setTimeout(async () => {
       const setting = await JSON.parse(storage.getItem('setting') as string);
       const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
@@ -432,8 +450,10 @@ const Meeting: React.FC = () => {
                     } else {
                       message.error('当前不在会议室！')
                     }
+                    showSingIn()
                   },
                   onCancel() {
+                    showSingIn()
                   }
                 })
               }
@@ -442,6 +462,13 @@ const Meeting: React.FC = () => {
           }
           return data
         })
+      } else {
+        setIsScreenCapture(bool => {
+          if (!bool) {
+            showSingIn()
+          }
+          return bool
+        })
       }
     }, 10000);
     return () => {
@@ -1455,7 +1482,6 @@ const Meeting: React.FC = () => {
         await getUserRoomInfo().then(async (res) => {
           stupWizardRef.current.changeModal(0, res)
         })
-
         break;
       case '邀请人员':
         await getUserRoomInfo().then(async (res) => {
@@ -1559,6 +1585,9 @@ const Meeting: React.FC = () => {
         storage.setItem('noViewChatList', 0)
         setNoViewChatList(0)
         break;
+      case '签到':
+        singInRef.current.changeModal()
+        break;
     }
   }
   // 停止录制
@@ -2705,10 +2734,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 +2959,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
 }

src/utils/styles/App.scss

@@ -26,6 +26,20 @@ $pagination-hover-background-color: #5575F2;
   .ant-select-suffix {
     color: white !important;
   }
+
+  .ant-select-selection-overflow-item {
+    .ant-select-selection-item {
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .ant-select-selection-item-remove {
+      color: white !important;
+    }
+  }
+
+  .ant-select-selection-search-input {
+    color: white !important;
+  }
 }
 
 // input