备注修改完成

code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx

@@ -3,17 +3,18 @@ import moment from 'moment'
 import './textScroll.less'
 
 function TextScroll (props) {
-   const { content, duration, roll, videoObj } = props
+   const { content, duration, roll, videoObj = {} } = props
    const [showContent, setShowContent] = useState('')
    const showIndex = useRef(0)
    const initialization = useRef(false)
    const cancel = useRef(false)
+   let videoObjId = videoObj.id || 0
    useEffect(() => {
       if (content.length) {
          if (roll) {
-            let contentParent = document.getElementById("marquee_box" + videoObj.id)
-            document.getElementById('contentPMakeUp' + videoObj.id).style.width = contentParent.clientWidth + 'px'
-            const contentP = document.getElementById('contentP' + videoObj.id)
+            let contentParent = document.getElementById("marquee_box" + videoObjId)
+            document.getElementById('contentPMakeUp' + videoObjId).style.width = contentParent.clientWidth + 'px'
+            const contentP = document.getElementById('contentP' + videoObjId)
             contentP.style.visibility = 'visible'
             setShowContent(content[0])
             window.cancelAnimationFrame(cancel.current)
@@ -25,12 +26,12 @@ function TextScroll (props) {
             let repeatTime = moment()
             let refreshTime = moment()
             const scroll = () => {
-               let contentParent = document.getElementById("marquee_box" + videoObj.id)
-               document.getElementById('contentPMakeUp' + videoObj.id).style.width = contentParent.clientWidth + 'px'
+               let contentParent = document.getElementById("marquee_box" + videoObjId)
+               document.getElementById('contentPMakeUp' + videoObjId).style.width = contentParent.clientWidth + 'px'
                //初始化
                // if(!showContent&&!initialization.current){
                if (!initialization.current) {
-                  const contentP = document.getElementById('contentP' + videoObj.id)
+                  const contentP = document.getElementById('contentP' + videoObjId)
                   contentParent.scrollLeft = 0
                   setShowContent(content[showIndex.current])
                   showIndex.current = (showIndex.current + 1) % content.length
@@ -39,7 +40,7 @@ function TextScroll (props) {
                }
                // 控制频率
                if (moment().diff(refreshTime) > 1000 / 60) {
-                  const contentP = document.getElementById('contentP' + videoObj.id)
+                  const contentP = document.getElementById('contentP' + videoObjId)
                   // 静态等待时间
                   if (moment().diff(repeatTime) > 1000 * 1.5) {
                      contentP.style.visibility = 'visible'
@@ -67,10 +68,10 @@ function TextScroll (props) {
       }
    }, [content, roll])
    return (
-      <div className="marquee_box" id={"marquee_box" + videoObj.id} style={{ overflow: 'hidden', color: '#F9F9F9' }} >
+      <div className="marquee_box" id={"marquee_box" + videoObjId} style={{ overflow: 'hidden', color: '#F9F9F9' }} >
          <div style={{ position: 'relative', left: 24 }}>
-            <div id={'contentP' + videoObj.id} style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</div>
-            <div id={'contentPMakeUp' + videoObj.id} style={{ width: 0, display: 'inline-block' }}></div>
+            <div id={'contentP' + videoObjId} style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</div>
+            <div id={'contentPMakeUp' + videoObjId} style={{ width: 0, display: 'inline-block' }}></div>
          </div>
       </div>
    )

code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx

@@ -65,7 +65,7 @@ const VideoPlay = ({
    iotVideoServer,
    local, //是否本地调用视频
 }) => {
-   // console.log(containerId, videoObj);
+   console.log(sizeWh);
    if (videoObj.type == 'yingshi') {
       videoObj = {
          ...videoObj,
@@ -89,7 +89,7 @@ const VideoPlay = ({
    const [photo, setPhoto] = useState(1)//滚动备注
    const [size, setSize] = useState({ parentWidth: sizeWh?.parentWidth, parentHeight: sizeWh?.parentHeight, width: width || sizeWh?.parentWidth, height: height || sizeWh?.parentHeight }) //视频本身和父级尺寸
    const [resolution, setResolution] = useState('sd') // 标清 sd  高清 hd
-   const [videoMask, setVideoMask] = useState(true) // 标清 sd  高清 hd
+   const [videoMask, setVideoMask] = useState(true) // 视频遮罩
 
 
    // 标记萤石操作中，等待ifream返回信息后清空
@@ -209,6 +209,7 @@ const VideoPlay = ({
 
       // 全屏状态监听
       screenfull.on('change', () => {
+         console.log(screenfull);
          if (screenfull.isFullscreen && operationRef.current && !operationRef.current['fullScreen'].select) {
             changeSelectState('fullScreen')
          }
@@ -325,13 +326,14 @@ const VideoPlay = ({
          setjessibuca(jessibuca)
          play({ jessibuca })
       } else {
+
          const player = new EZUIKit.EZUIKitPlayer({
             id: containerId, // 视频容器ID
             accessToken: videoObj?.yingshiToken,
             url: videoObj.playUrlSd,
             width: setupSize('width'),
             height: setupSize('height'),
-            handleSuccess: () => {  //播放成功
+            handleSuccess: (e) => {  //播放成功
                setRoll(true)
                setVideoMask(false)
                playState.current = true
@@ -381,13 +383,16 @@ const VideoPlay = ({
    }
 
    const setupSize = (data) => {
+      console.log(2222);
+      console.log(operationRef.current?.fullScreen.select);
       if (!operationRef.current?.fullScreen.select) {
          let containerWidth = sizeWh?.parentWidth    //容器的宽高和视频的宽高
          let containerHeight = sizeWh?.parentHeight
          let videoWidth = width || sizeWh?.width
          let videoHeight = height || sizeWh?.height
-
+         console.log(2222);
          if (IsSize == 'true') {
+
             if (containerWidth >= videoWidth && containerHeight >= videoHeight) {
                if (videoHeight / videoWidth >= 0.55 && videoHeight / videoWidth <= 0.57) {
 
@@ -412,8 +417,12 @@ const VideoPlay = ({
                player.reSize(videoWidth, videoHeight)
             }
          } else {
+            console.log(48978945);
+            console.log(player);
             if (videoObj.type == 'yingshi' && player?.pluginStatus) {
-               player.reSize(width || sizeWh?.parentWidth, height || sizeWh?.parentHeight)
+               console.log(1111111);
+               console.log(videoWidth, videoHeight);
+               player.reSize(videoWidth, videoHeight)
             }
          }
          setSize({ parentWidth: containerWidth, parentHeight: containerHeight, width: videoWidth, height: videoHeight })

code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx

@@ -11,9 +11,10 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay ,mould}) => {
    // console.log(videoObj);
    useEffect(() => {
 
-      const resize_ = () => {
-         setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
-         setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
+      const resize_ = async () => {
+         console.log(document.getElementById('video' + videoObj.key).clientWidth);
+         await setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
+         await setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
       }
       resize_()
       window.addEventListener('resize', resize_);  //只要窗口殴大小发生像素变化就会触发

code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

@@ -10,7 +10,7 @@ let timing
 let projectScrollbar;
 const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
    // console.log({ 视频: treeData });
-   console.log(filterGroup);
+   // console.log(filterGroup);
    // console.log(headerName);
    // console.log(videoPlay);
    // console.log(template);
@@ -129,7 +129,6 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
 
       const resize_ = () => {
          setFormWidth(document.getElementById('formSearch').scrollWidth)
-         console.log(document.getElementById('formSearch').scrollWidth)
       }
       resize_()
       window.addEventListener('resize', resize_);
@@ -241,7 +240,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
             })
          }
       })
-      console.log(videoData);
+      // console.log(videoData);
 
       if (searchs?.name) {
          videoData = videoData?.filter(v => v.label.includes(searchs.name))
@@ -261,7 +260,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
       if (searchs.hasOwnProperty('field4')) {
          videoData = videoData?.filter(({ cameraId }) => filterGroup[4].filters.find(v => v.num == searchs?.field4).cameraIds.some(v => v == cameraId))
       }
-      console.log(videoData);
+      // console.log(videoData);
       setPlayData(videoData)
 
    }, [searchs])
@@ -272,7 +271,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
    useEffect(() => {
       let pollingTimes = pollingTime || 1
       if (timing) clearInterval(timing)
-      if (polling) {
+      if (pollingTime && polling) {
          timing = setInterval(() => {
             let pages = pageRef.current + 1
             if (pages > Math.ceil(playData?.length / pageSize)) {
@@ -451,8 +450,6 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                            {filterGroup?.map(v => {
                               let nameLength = 2
                               let OptionWidth = 75
-                              console.log(formWidth);
-                              console.log(filterGroup.filter(v => v.forbidden).length);
                               if (formWidth > 910) {
                                  switch (filterGroup.filter(v => v.forbidden).length) {
                                     case 1:
@@ -601,15 +598,19 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
                                              })}
                                           </div>
                                        case '轮询设置':
-                                          return <div style={{ height: 48, background: mould('#01185F', 'linear-gradient(245deg, #FFFFFF 0%, #EAEBEC 100%)', 'linear-gradient(197deg, rgba(38,38,38,0.65) 0%, #101010 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.2500)', 'rgba(97,94,94,0.39)', 'rgba(132,132,132,0.5)')}`, color: ' #D9D9D9', display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
+                                          return <div style={{ height: 48, background: mould('#01185F', 'linear-gradient(245deg, #FFFFFF 0%, #EAEBEC 100%)', 'linear-gradient(197deg, rgba(38,38,38,0.65) 0%, #101010 100%)'), boxShadow: `inset 0px 0px 5px 1px ${mould('rgba(28,96,254,0.2500)', 'rgba(97,94,94,0.39)', 'rgba(132,132,132,0.5)')}`, color: mould("#D9D9D9", '', "#D9D9D9"), display: 'flex', justifyContent: 'space-evenly', alignItems: 'center' }}>
                                              <Switch onChange={(v, e) => {
                                                 console.log(v);
                                                 setPolling(v)
-                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', backgroundColor: polling ? mould('#2f53ea') : '' }} checked={polling} />
+                                             }} aria-label="a switch for demo" style={{ border: ' 1px solid #D9D9D9', backgroundColor: polling ? mould('#2F53EA', '#4B4B4B', '#555F6D') : mould('#E8F0FF', '#C2C2C2', '#D7D7D7') }} checked={polling} />
                                              轮询间隔
-                                             <Input value={pollingTime} disabled={polling ? false : true} style={{ width: 80, color: "#D9D9D9", border: ' 1px solid #D9D9D9', backgroundColor: polling ? "" : 'rgb(217, 217, 217)' }}
+                                             <Input value={pollingTime} disabled={polling ? false : true} style={{ width: 80, color: mould("#D9D9D9", '', "#D9D9D9"), border: ' 1px solid #D9D9D9', backgroundColor: polling ? "" : 'rgb(217, 217, 217)' }}
                                                 onChange={(value) => {
+                                                   if (value) {
                                                       setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
+                                                   } else {
+                                                      setPollingTime(null)
+                                                   }
                                                 }} />
                                              分钟
                                           </div>