fix(staff)

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);
       });

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<UserValue[]>([]);
   async function fetchUserList(username: string): Promise<UserValue[]> {
     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) => {
+                onChange={(newValue, options) => {
-                  setValue(newValue as UserValue[]);
+                  setValue(options as UserValue[]);
                 }}
-                optionRender={(item:any) => {
+                maxCount={1}
-                  return <Space key={item.key}>
+                optionRender={(item: any) => {
-                  <span>{item.label}</span>
+                  return (
-                  <img src={item.data.head_img} alt="" width={40} height={40} />
+                    <Space key={item.key}>
-              </Space>
+                      <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>
+                    <div style={{ marginTop: "10px" }}>
-                      点击呼叫：
+                      <img
-                      <PhoneTwoTone
+                        src={item.head_img}
-                        style={{ fontSize: "20px" }}
+                        style={{ width: "100%" }}
-                        onClick={(items) => {
+                        alt=""
-                          webRTC.init(item.key);
-                          webRTC.calls();
-                        }}
                       />
                     </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
-              {/* <video
+              id="remoteVideo"
-                id="rtcVideo"
+              style={{ width: "100%", height: "90%", objectFit: "contain" }}
-                style={{ width: "300px", height: "300px" }}
+            ></video>
-              ></video> */}
-              <video
-                id="remoteVideo"
-                style={{ width: "300px", height: "300px" }}
-              ></video>
-            </div>
-            <p
-              className="ec_right_end"
-              onClick={() => {
-                webRTC.close();
-              }}
-            >
-              结束通话
-            </p>
           </div>
         </div>
       </Modal>

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<boolean>(false);
   const [deviceList, setDeviceList] = useState<Array<any>>([]);
   const [channelList, setChannelList] = useState<Array<any>>([]);
-  const [deviceId, setDeviceId] = useState<number>(0);
+  const deviceId = useRef<number>(0);
-  const [channelId, setChannelId] = useState<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 fetchUrl = async (did, cid) => {
-  const getUrl = async (id) => {
+    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 () => {
+    fetchUrl(deviceId.current, channelId.current);
-      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();
     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);
+                      channelId.current = item.ChannelID;
-                      getUrl(item.ChannelID);
+                      getUrl();
                     }}
                   >
                     <p
                       style={{
-                        color: channelId === item.ChannelID ? "yellow" : "#fff",
+                        color:
+                          channelId.current === item.ChannelID
+                            ? "yellow"
+                            : "#fff",
                       }}
                     >
                       {item.Name}