From fe203a6d7650d485ead7f6128820962fbe064c7c Mon Sep 17 00:00:00 2001 From: wang_yp <357754663@qq.com> Date: Thu, 20 Mar 2025 22:38:13 +0800 Subject: [PATCH] fix(staff) --- src/components/form/featch_select.tsx | 2 + src/pages/home/homeBottom/ec.tsx | 83 +++++++++++++---------- src/pages/home/homeBottom/which_video.tsx | 78 +++++++++++++-------- 3 files changed, 99 insertions(+), 64 deletions(-) diff --git a/src/components/form/featch_select.tsx b/src/components/form/featch_select.tsx index 0b7c02b..097b0c3 100644 --- a/src/components/form/featch_select.tsx +++ b/src/components/form/featch_select.tsx @@ -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); }); diff --git a/src/pages/home/homeBottom/ec.tsx b/src/pages/home/homeBottom/ec.tsx index 6890584..fec77b6 100644 --- a/src/pages/home/homeBottom/ec.tsx +++ b/src/pages/home/homeBottom/ec.tsx @@ -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 { @@ -24,7 +23,7 @@ const Ec = (props: Store) => { console.log(error); } }; - + const [value, setValue] = useState([]); async function fetchUserList(username: string): Promise { return usrStore.serchUser(username).then((res) => { @@ -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 - {item.label} - - + maxCount={1} + optionRender={(item: any) => { + return ( + + {item.label} + + + ); }} style={{ width: "100%" }} /> {value.map((item: any) => { return ( -
+
姓名：{item.label}
-
- 点击呼叫： - { - webRTC.init(item.key); - webRTC.calls(); - }} +
+
+
+
{ + webRTC.init(item.value); + webRTC.calls(); + }} + > + 拨打电话 +
+
+

{ + webRTC.close(); + }} + > + 结束通话 +

); })}
-
- {/* */} - -
-

{ - webRTC.close(); - }} - > - 结束通话 -

+
diff --git a/src/pages/home/homeBottom/which_video.tsx b/src/pages/home/homeBottom/which_video.tsx index 23353e4..9a07492 100644 --- a/src/pages/home/homeBottom/which_video.tsx +++ b/src/pages/home/homeBottom/which_video.tsx @@ -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(false); const [deviceList, setDeviceList] = useState>([]); const [channelList, setChannelList] = useState>([]); - const [deviceId, setDeviceId] = useState(0); - const [channelId, setChannelId] = useState(0); + const deviceId = useRef(0); + const channelId = useRef(0); const [videoUrl, setVideoUrl] = useState(""); 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) => { >
-
+
{deviceList.map((item, index) => { return (
{ - setDeviceId(item.DeviceID); + deviceId.current = item.DeviceID; getChannerList(item.DeviceID); }} >

{item.DeviceName} @@ -95,20 +107,32 @@ const WhichVideo = (props) => { })}

-
+
{channelList.map((item, index) => { return (
{ - setChannelId(item.ChannelID); - getUrl(item.ChannelID); + channelId.current = item.ChannelID; + getUrl(); }} >

{item.Name}