Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop

src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/HistoryTable.jsx

@@ -21,9 +21,10 @@ export default function HistoryTable(props) {
     const [visible, setVisible]= useState(false)
 
     const [timeRange, setTimeRange] = useState([moment(new Date(new Date().getTime() - 7*86400*1000)), moment()])
-    const videoRef = useRef()
+    const modalVideoRef = useRef()
     const [videoUrl, setVideoUrl] = useState('')
     const intervalPlayRef = useRef()
+    const recordRef = useRef()
     const columns = [
         {
           title: '序号',
@@ -50,7 +51,7 @@ export default function HistoryTable(props) {
           key: 'operation',
           width: 150,
           align: "center",
-          render: (va, record) => <a onClick={()=>{getOneVideoPlay(record.start_time, record.end_time)}}>查看回放</a>,
+          render: (va, record) => <a onClick={()=>{getOneVideoPlay(record)}}>查看回放</a>,
         },
     ];
 
@@ -73,12 +74,17 @@ export default function HistoryTable(props) {
         })
     }
 
-    const getOneVideoPlay =(time1, time2)=>{
-        ajax.getOneVideoPlay({id: id, start_time: time1, end_time: time2, type: 2}).then(
+    const getOneVideoPlay =(record)=>{
+        recordRef.current = record
+        ajax.getOneVideoPlay({id: id, start_time: record.start_time, end_time: record.end_time, type: 2}).then(
             res=>{
                 if(res.status == 20000){
                     setVisible(true)
                     setVideoUrl(res.data.url)
+                    setTimeout(() => {
+                        modalVideoRef.current.changeUrl(res.data.url)
+                    }, 300);
+                    startIntervalToPlay()
                 }
             }
         ).catch(err=>{
@@ -86,12 +92,29 @@ export default function HistoryTable(props) {
         })
     }
 
-    // const stopIntervalToClose = ()=>{
-    //     if(intervalPlayRef.current){
-    //         clearInterval(intervalPlayRef.current)
-    //         intervalPlayRef.current = null
-    //     }
-    // }
+    const startIntervalToPlay = ()=>{
+        if(!intervalPlayRef.current){
+            intervalPlayRef.current = setInterval(() => {
+                ajax.getOutRoadVideoPlaying({id: id, start_time: recordRef.current.start_time, end_time: recordRef.current.end_time, type:2}).then((res)=>{
+                    if(res.status == 20000){
+                 
+                    }
+                })
+            }, 5000);
+        }
+    }
+    
+    const stopIntervalToClose = ()=>{
+        if(modalVideoRef.current){
+            modalVideoRef.current.closeVideo()
+            // videoRef.current = null
+        }
+        if(intervalPlayRef.current){
+            clearInterval(intervalPlayRef.current)
+            intervalPlayRef.current = null
+        }
+    }
+    
 
     useEffect(()=>{
         getHistoryVideoList()
@@ -99,6 +122,9 @@ export default function HistoryTable(props) {
 
   useEffect(()=>{
     getHistoryVideoList()
+    return ()=>{
+        stopIntervalToClose()
+    }
   },[])
 
   return (
@@ -141,13 +167,11 @@ export default function HistoryTable(props) {
         open={visible} 
         width={1200}
         title="" 
-        onCancel={()=>{setVisible(false);}}
+        onCancel={()=>{setVisible(false);stopIntervalToClose(); }}
         footer={null}
         >
             <div>
-                {
-                  videoUrl ?  <VideoPlay videoType="mp4" ref={videoRef} videoUrl={videoUrl} ></VideoPlay> : null
-                }
+              <VideoPlay videoType="mp4" ref={modalVideoRef}  ></VideoPlay>
             </div>
         </Modal>
     </div>

src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx

@@ -91,6 +91,7 @@ function OutMonitorMgm(props) {
 
   const [oneVideoRealtimeUrlInfo, setOneVideoRealtimeUrlInfo] = useState({})
   const videoRef = useRef()
+  const urlRef = useRef()
   const intervalRef = useRef()
   const rowDataRef = useRef()
   rowDataRef.current = rowData
@@ -211,6 +212,7 @@ function OutMonitorMgm(props) {
           if(res.status == 20000 && res.data.url){
             setVideoModalVisible(true)
             // setOneVideoRealtimeUrlInfo({id: item.id, url: res.data.url})
+            urlRef.current= res.data.url
             setTimeout(() => {
               videoRef.current.changeUrl(res.data.url)
             }, 300);
@@ -225,10 +227,10 @@ function OutMonitorMgm(props) {
 
   };
 
-  const startIntervalToPlay = (type)=>{
+  const startIntervalToPlay = ()=>{
     if(!intervalPlayRef.current){
       intervalPlayRef.current = setInterval(() => {
-        ajax.getOutRoadVideoPlaying({id: rowDataRef.current.id, type:type}).then((res)=>{
+        ajax.getOutRoadVideoPlaying({id: rowDataRef.current.id, type:1}).then((res)=>{
           if(res.status == 20000){
             // console.log('')
           }
@@ -240,7 +242,7 @@ function OutMonitorMgm(props) {
   const stopIntervalToClose = ()=>{
     if(videoRef.current){
       videoRef.current.closeVideo()
-      videoRef.current = null
+      // videoRef.current = null
     }
     if(intervalPlayRef.current){
       clearInterval(intervalPlayRef.current)
@@ -250,8 +252,15 @@ function OutMonitorMgm(props) {
 
   const clickSwitch=(val)=>{
     setPlayType(val); 
+    if(val == 2){ // 切换到回放, 需要关闭实时的轮询和 视频播放
       stopIntervalToClose(); 
-    startIntervalToPlay(val)
+    }else{ // 切换回实时,需要重新播放
+      startIntervalToPlay()
+      setTimeout(() => {
+        videoRef.current.changeUrl(urlRef.current)
+      }, 200);
+    }
+    // startIntervalToPlay(val)
   }
 
   const handleDel = (item) => {
@@ -914,7 +923,7 @@ function OutMonitorMgm(props) {
           {
             playType == '1' ? 
             <div>
-              <VideoPlay videoType="mp4" ref={videoRef}  ></VideoPlay>
+              <VideoPlay videoType="mp4" ref={(e)=>{videoRef.current = e}}  ></VideoPlay>
             </div>
             :
             <div >