From bb6d4859254f1af0e4e056d57388b12e2675847d Mon Sep 17 00:00:00 2001 From: wenlele Date: Wed, 31 Aug 2022 14:52:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E6=B3=A8=E4=BF=AE=E6=94=B9=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/client/src/components/textScroll.jsx | 23 +++++++++-------- .../src/components/videoPlayer/videoPlay.jsx | 21 +++++++++++----- .../openness/components/container.jsx | 11 ++++---- .../openness/components/videoScreen.jsx | 25 ++++++++++--------- 4 files changed, 46 insertions(+), 34 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx index 3682e6f..ccfee0c 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx +++ b/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 ( -
+
-
{showContent}
-
+
{showContent}
+
) diff --git a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx b/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx index 8fb3a67..56c42d8 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx +++ b/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 }) @@ -426,7 +435,7 @@ const VideoPlay = ({ return ( <> -
+
{/* 顶部信息 */} { +const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => { const [videoWidth, setVideoWidth] = useState() const [videoHeight, setVideoHeight] = useState() // 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_); //只要窗口殴大小发生像素变化就会触发 @@ -40,7 +41,7 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay ,mould}) => { videoStyle='true' containerId={videoObj.key} local={true} /> : - : ""}
{videoObj?.label}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx index 771d081..1856371 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx +++ b/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 })}
case '轮询设置': - return
+ return
{ 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} /> 轮询间隔 - { - setPollingTime(Number(value.replace(/[^0-9]/ig, ''))) + if (value) { + setPollingTime(Number(value.replace(/[^0-9]/ig, ''))) + } else { + setPollingTime(null) + } }} /> 分钟
@@ -623,7 +624,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen() }} /> -
{v.value}
+
{v.value}
})}