fix(staff)
This commit is contained in:
parent
59f71dca3d
commit
fe203a6d76
|
|
@ -15,6 +15,7 @@ const DebounceSelect = <
|
|||
label: React.ReactNode;
|
||||
value: string | number;
|
||||
head_img?: string;
|
||||
identity?: string;
|
||||
} = any
|
||||
>({
|
||||
fetchOptions,
|
||||
|
|
@ -36,6 +37,7 @@ const DebounceSelect = <
|
|||
if (fetchId !== fetchRef.current) {
|
||||
return;
|
||||
}
|
||||
console.log(newOptions)
|
||||
setOptions(newOptions);
|
||||
setFetching(false);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ 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";
|
||||
import DebounceSelect from "@/components/form/featch_select";
|
||||
interface UserValue {
|
||||
|
|
@ -32,7 +31,7 @@ const Ec = (props: Store) => {
|
|||
label: item.user_name,
|
||||
value: item.identity,
|
||||
identity: item.identity,
|
||||
head_img:item.head_img,
|
||||
head_img: item.head_img,
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
|
@ -63,55 +62,65 @@ const Ec = (props: Store) => {
|
|||
value={value}
|
||||
placeholder="输入搜索"
|
||||
fetchOptions={fetchUserList}
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue as UserValue[]);
|
||||
onChange={(newValue, options) => {
|
||||
setValue(options as UserValue[]);
|
||||
}}
|
||||
optionRender={(item:any) => {
|
||||
return <Space key={item.key}>
|
||||
<span>{item.label}</span>
|
||||
<img src={item.data.head_img} alt="" width={40} height={40} />
|
||||
</Space>
|
||||
maxCount={1}
|
||||
optionRender={(item: any) => {
|
||||
return (
|
||||
<Space key={item.key}>
|
||||
<span>{item.label}</span>
|
||||
<img
|
||||
src={item.data.head_img}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
</Space>
|
||||
);
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
{value.map((item: any) => {
|
||||
return (
|
||||
<div key={item.key}>
|
||||
<div key={item.value} style={{ marginTop: "10px" }}>
|
||||
<div>姓名：{item.label}</div>
|
||||
<div>
|
||||
点击呼叫：
|
||||
<PhoneTwoTone
|
||||
style={{ fontSize: "20px" }}
|
||||
onClick={(items) => {
|
||||
webRTC.init(item.key);
|
||||
webRTC.calls();
|
||||
}}
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<img
|
||||
src={item.head_img}
|
||||
style={{ width: "100%" }}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div style={{height:"10px"}}></div>
|
||||
<div
|
||||
style={{ textAlign: "center" }}
|
||||
onClick={(items) => {
|
||||
webRTC.init(item.value);
|
||||
webRTC.calls();
|
||||
}}
|
||||
>
|
||||
拨打电话
|
||||
</div>
|
||||
<div style={{height:"10px"}}></div>
|
||||
<p
|
||||
style={{ textAlign: "center" }}
|
||||
onClick={() => {
|
||||
webRTC.close();
|
||||
}}
|
||||
>
|
||||
结束通话
|
||||
</p>
|
||||
</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>
|
||||
<video
|
||||
id="remoteVideo"
|
||||
style={{ width: "100%", height: "90%", objectFit: "contain" }}
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import { Modal } from "antd";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Config from "@/util/config";
|
||||
import EasyPlayer from "../videoTow";
|
||||
const WhichVideo = (props) => {
|
||||
import { Store } from "antd/es/form/interface";
|
||||
const WhichVideo = (props:Store) => {
|
||||
const { homeStore } = props;
|
||||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||||
const [deviceList, setDeviceList] = useState<Array<any>>([]);
|
||||
const [channelList, setChannelList] = useState<Array<any>>([]);
|
||||
const [deviceId, setDeviceId] = useState<number>(0);
|
||||
const [channelId, setChannelId] = useState<number>(0);
|
||||
const deviceId = useRef<number>(0);
|
||||
const channelId = useRef<number>(0);
|
||||
const [videoUrl, setVideoUrl] = useState<string | null>("");
|
||||
let timer: any = null;
|
||||
|
||||
|
|
@ -22,31 +23,31 @@ const WhichVideo = (props) => {
|
|||
let reqs = await homeStore.getChannerUrlList(id);
|
||||
setChannelList(reqs.EasyDarwin.Body.Channels);
|
||||
};
|
||||
|
||||
const getUrl = async (id) => {
|
||||
const fetchUrl = async (did, cid) => {
|
||||
try {
|
||||
const reqs = await homeStore.getChannerStrem(did, cid);
|
||||
if (!reqs.EasyDarwin) return;
|
||||
const url = Config.videoApis + reqs.EasyDarwin.Body.URL;
|
||||
setVideoUrl(url);
|
||||
} catch (error) {
|
||||
console.error("Error fetching video URL:", error);
|
||||
}
|
||||
};
|
||||
const getUrl = async () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
const fetchUrl = async () => {
|
||||
try {
|
||||
const reqs = await homeStore.getChannerStrem(deviceId, id);
|
||||
if (!reqs.EasyDarwin) return;
|
||||
const url = Config.videoApis + reqs.EasyDarwin.Body.URL;
|
||||
setVideoUrl(url);
|
||||
} catch (error) {
|
||||
console.error("Error fetching video URL:", error);
|
||||
}
|
||||
};
|
||||
fetchUrl();
|
||||
fetchUrl(deviceId.current, channelId.current);
|
||||
timer = setInterval(() => {
|
||||
fetchUrl();
|
||||
console.log();
|
||||
fetchUrl(deviceId.current, channelId.current);
|
||||
}, 35000);
|
||||
};
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
|
|
@ -62,7 +63,7 @@ const WhichVideo = (props) => {
|
|||
setDeviceList([]);
|
||||
setChannelList([]);
|
||||
setVideoUrl(null);
|
||||
setChannelId(0);
|
||||
deviceId.current = 0;
|
||||
}}
|
||||
onOk={() => {}}
|
||||
footer={null}
|
||||
|
|
@ -72,20 +73,31 @@ const WhichVideo = (props) => {
|
|||
>
|
||||
<div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ overflowY: "scroll", height: "550px" }}>
|
||||
<div
|
||||
style={{
|
||||
overflowY: "scroll",
|
||||
height: "550px",
|
||||
width: "240px",
|
||||
border: "1px solid #ccc",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
{deviceList.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setDeviceId(item.DeviceID);
|
||||
deviceId.current = item.DeviceID;
|
||||
getChannerList(item.DeviceID);
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: deviceId === item.DeviceID ? "yellow" : "#fff",
|
||||
color:
|
||||
deviceId.current === item.DeviceID
|
||||
? "yellow"
|
||||
: "#fff",
|
||||
}}
|
||||
>
|
||||
{item.DeviceName}
|
||||
|
|
@ -95,20 +107,32 @@ const WhichVideo = (props) => {
|
|||
})}
|
||||
</div>
|
||||
<div style={{ width: "20px" }}></div>
|
||||
<div style={{ height: "550px", overflow: "scroll" }}>
|
||||
<div
|
||||
style={{
|
||||
height: "550px",
|
||||
overflow: "scroll",
|
||||
width: "240px",
|
||||
border: "1px solid #ccc",
|
||||
marginBottom: "20px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
{channelList.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setChannelId(item.ChannelID);
|
||||
getUrl(item.ChannelID);
|
||||
channelId.current = item.ChannelID;
|
||||
getUrl();
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: channelId === item.ChannelID ? "yellow" : "#fff",
|
||||
color:
|
||||
channelId.current === item.ChannelID
|
||||
? "yellow"
|
||||
: "#fff",
|
||||
}}
|
||||
>
|
||||
{item.Name}
|
||||
|
|
|
|||
Loading…
Reference in New Issue