设备管理初始化

src/components/EquipmentManagement/index.module.scss

@@ -0,0 +1,19 @@
+.equipmentManagement {
+  >div:nth-child(1) {
+    >div {
+      display: flex;
+      align-items: center;
+
+      >span {
+        color: #EEEEEE;
+        font-size: 16px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  >div:nth-child(2) {
+    display: flex;
+    justify-content: center;
+  }
+}

src/components/EquipmentManagement/index.tsx

@@ -0,0 +1,52 @@
+import styles from '@/components/EquipmentManagement/index.module.scss'
+import { Button, Modal } from 'antd';
+import { useState, useImperativeHandle, forwardRef } from "react";
+// import { agora } from '@/utils/package/agora';
+const EquipmentManagement = forwardRef((_props: any, ref: any) => {
+  useImperativeHandle(ref, () => ({
+    changeModal: () => {
+      setEquipmentManagementModal(true)
+    }
+  }))
+  const [equipmentManagementModal, setEquipmentManagementModal] = useState(false)
+  return (
+    <>
+      <Modal
+        title="设备管理"
+        open={equipmentManagementModal}
+        footer={null}
+        centered
+        width={'500px'}
+        onCancel={() => {
+          setEquipmentManagementModal(false)
+        }}>
+        <div className={styles.equipmentManagement}>
+          <div>
+            <div>
+              <span>摄像头</span>
+
+            </div>
+            <div>
+              <span>麦克风</span>
+
+            </div>
+            <div>
+              <span>扬声器</span>
+
+            </div>
+          </div>
+          <div>
+            <Button type="primary" className='m-ant-btn' onClick={() => {
+
+            }}>确定</Button>
+            <Button type="primary"
+              style={{ backgroundColor: '#31353A', marginLeft: '10px' }}
+              onClick={() => setEquipmentManagementModal(false)}>取消</Button>
+          </div>
+        </div>
+      </Modal >
+    </>
+  )
+})
+
+export default EquipmentManagement

src/page/Meeting/index.tsx

@@ -18,6 +18,7 @@ import { VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
 import Avatar from '@/components/Avatar';
 import SharedFilesModel from '@/components/SharedFilesModel';
 import StupWizard from '@/components/StupWizard';
+import EquipmentManagement from '@/components/EquipmentManagement';
 import UserVideo from '@/components/UserVideo';
 const { confirm } = Modal;
 const { exec } = require('child_process');
@@ -30,6 +31,7 @@ const Meeting: React.FC = () => {
   const sharedFilesModelRef = useRef<any>();
   const invitingPersonnelRef = useRef<any>();
   const stupWizardRef = useRef<any>();
+  const equipmentManagementRef = useRef<any>();
   const [isClicked, setIsClicked] = useState(false);
   const [statusList, setStatusList] = useState({
     userList: false,
@@ -453,6 +455,14 @@ const Meeting: React.FC = () => {
             }
           }
           break;
+        // 设备列表
+        case 'DriverList':
+          console.log(item);
+          break;
+        // 设置设备
+        case 'SetDriver':
+          console.log(item);
+          break;
       }
     })
     return () => {
@@ -1119,6 +1129,10 @@ const Meeting: React.FC = () => {
       }
     }, 0);
   }
+  // 设备管理
+  const equipmentManagement = (uid: string, userName: string): void => {
+    equipmentManagementRef.current.changeModal()
+  }
   // 开关麦克风
   const postOpenMicr = async (enableMicr: boolean, uid: string, isAll: boolean = false): Promise<void> => {
     await getUserRoomInfo().then(async (res) => {
@@ -1501,7 +1515,7 @@ const Meeting: React.FC = () => {
                           className='m-ant-btn'
                           size={'small'}
                           onClick={() => {
-
+                            equipmentManagement(item.uid, item.userName)
                           }}
                         >设备管理</Button> : null}
                       </div>
@@ -1683,7 +1697,7 @@ const Meeting: React.FC = () => {
                                         style={{ marginTop: '10px', width: '100%' }}
                                         size={'small'}
                                         onClick={() => {
-
+                                          equipmentManagement(item.uid, item.userName)
                                         }}
                                       >设备管理</Button>
                                     </div>
@@ -1823,7 +1837,7 @@ const Meeting: React.FC = () => {
                                       className='m-ant-btn'
                                       size={'small'}
                                       onClick={() => {
-
+                                        equipmentManagement(roomUserItem.uid, roomUserItem.userName)
                                       }}
                                     >设备管理</Button> : null}
                                   </div> : <div style={{ color: 'white' }}>用户不在房间内</div>
@@ -2095,6 +2109,7 @@ const Meeting: React.FC = () => {
       <SpeakerModeModal ref={speakerModeModalRef} />
       <InvitingPersonnelModal ref={invitingPersonnelRef} />
       <StupWizard ref={stupWizardRef} />
+      <EquipmentManagement ref={equipmentManagementRef} />
     </>
   )
 }

src/utils/package/signalr.ts

@@ -160,6 +160,19 @@ export const onSignalr = (callBack: Function) => {
         watchUids
       })
     });
+    // 设备列表
+    connection.on("DriverList", () => {
+      callBack({
+        key: 'DriverList'
+      })
+    });
+    // 设置设备
+    connection.on("SetDriver", (driver:string) => {
+      callBack({
+        key: 'SetDriver',
+        driver
+      })
+    });
   }
 }
 export const offSignalr = () => {
@@ -178,6 +191,8 @@ export const offSignalr = () => {
     connection.off('ManagerRefresh');
     connection.off('ApplyToSpeak');
     connection.off('Watch');
+    connection.off('DriverList');
+    connection.off('SetDriver');
   }
 }
 export const onInvoke = async (str: string, data: any) => {