95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import { Modal } from "antd";
|
||
import { Store } from "antd/es/form/interface";
|
||
import { inject, observer } from "mobx-react";
|
||
import { useState } from "react";
|
||
import "./bot.less";
|
||
import { PhoneTwoTone } from "@ant-design/icons";
|
||
import { webRTC } from "@/util/webRtc";
|
||
|
||
const Ec = (props: Store) => {
|
||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||
const { usrStore } = props;
|
||
const [userList, setUserList] = useState<any>([]);
|
||
const openDispatch = () => {
|
||
try {
|
||
usrStore.getlist().then(() => {
|
||
setUserList(usrStore.list);
|
||
webRTC.init();
|
||
setIsModalOpen(true);
|
||
});
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
};
|
||
const callphone = (record: any) => {
|
||
webRTC.calls(record.identity);
|
||
};
|
||
return (
|
||
<>
|
||
<span onClick={openDispatch}> 应急连线</span>
|
||
<Modal
|
||
title={"应急连线"}
|
||
className="owner_model"
|
||
width={800}
|
||
open={isModalOpen}
|
||
afterClose={() => {}}
|
||
onOk={() => {}}
|
||
footer={null}
|
||
onCancel={() => {
|
||
setIsModalOpen(false);
|
||
}}
|
||
>
|
||
<div className="ec_container">
|
||
<div className="ec_left">
|
||
<div className="ec_left_title">
|
||
<h3>应急连线</h3>
|
||
</div>
|
||
<div className="u-item">
|
||
{userList.map((item: any) => {
|
||
return (
|
||
<div key={item.account}>
|
||
<div>姓名：{item.user_name} : 未在线</div>
|
||
<p></p>
|
||
<div>
|
||
点击呼叫：
|
||
<PhoneTwoTone
|
||
style={{ fontSize: "20px" }}
|
||
onClick={(items) => {
|
||
callphone(item);
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="ec_right">
|
||
<div style={{ display: "flex" }}>
|
||
<video
|
||
id="rtcVideo"
|
||
style={{ width: "300px", height: "300px" }}
|
||
></video>
|
||
<video
|
||
id="remoteVideo"
|
||
style={{ width: "300px", height: "300px" }}
|
||
></video>
|
||
</div>
|
||
|
||
<p
|
||
className="ec_right_end"
|
||
onClick={() => {
|
||
webRTC.close();
|
||
}}
|
||
>
|
||
结束通话
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default inject("usrStore")(observer(Ec));
|