free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

备注修改完成

release_1.3.0
wenlele 3 years ago
parent
c2b7eeee16
commit
bb6d485925
4 changed files with 46 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx
  2. 21
      code/VideoAccess-VCMP/web/client/src/components/videoPlayer/videoPlay.jsx
  3. 11
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/container.jsx
  4. 25
      code/VideoAccess-VCMP/web/client/src/sections/openness/components/videoScreen.jsx

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

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

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

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

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

@ -5,15 +5,16 @@ import { VideoPlay } from "$components";
import { useState } from 'react'; import { useState } from 'react';
const Container = ({ videoObj, pageSize, showHeader, videoPlay ,mould}) => { const Container = ({ videoObj, pageSize, showHeader, videoPlay, mould }) => {
const [videoWidth, setVideoWidth] = useState() const [videoWidth, setVideoWidth] = useState()
const [videoHeight, setVideoHeight] = useState() const [videoHeight, setVideoHeight] = useState()
// console.log(videoObj); // console.log(videoObj);
useEffect(() => { useEffect(() => {
const resize_ = () => { const resize_ = async () => {
setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth) console.log(document.getElementById('video' + videoObj.key).clientWidth);
setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight) await setVideoWidth(document.getElementById('video' + videoObj.key).clientWidth)
await setVideoHeight(document.getElementById('video' + videoObj.key).clientHeight)
} }
resize_() resize_()
window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发 window.addEventListener('resize', resize_); //只要窗口殴大小发生像素变化就会触发
@ -40,7 +41,7 @@ const Container = ({ videoObj, pageSize, showHeader, videoPlay ,mould}) => {
videoStyle='true' videoStyle='true'
containerId={videoObj.key} containerId={videoObj.key}
local={true} /> : local={true} /> :
<img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2','white2','black2') : mould('blue1.5','white1.5','black1.5')}.png`} style={{ <img src={`/assets/images/openness/${pageSize == 1 || pageSize == 4 ? mould('blue2', 'white2', 'black2') : mould('blue1.5', 'white1.5', 'black1.5')}.png`} style={{
display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30, display: 'inline-block', width: videoWidth - 10, height: videoHeight - 30,
}} /> : ""} }} /> : ""}
<div style={{ lineHeight: '30px', paddingLeft: 6 }}>{videoObj?.label}</div> <div style={{ lineHeight: '30px', paddingLeft: 6 }}>{videoObj?.label}</div>

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

@ -10,7 +10,7 @@ let timing
let projectScrollbar; let projectScrollbar;
const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => { const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, showHeader }) => {
// console.log({ 视频: treeData }); // console.log({ 视频: treeData });
console.log(filterGroup); // console.log(filterGroup);
// console.log(headerName); // console.log(headerName);
// console.log(videoPlay); // console.log(videoPlay);
// console.log(template); // console.log(template);
@ -129,7 +129,6 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
const resize_ = () => { const resize_ = () => {
setFormWidth(document.getElementById('formSearch').scrollWidth) setFormWidth(document.getElementById('formSearch').scrollWidth)
console.log(document.getElementById('formSearch').scrollWidth)
} }
resize_() resize_()
window.addEventListener('resize', 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) { if (searchs?.name) {
videoData = videoData?.filter(v => v.label.includes(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')) { if (searchs.hasOwnProperty('field4')) {
videoData = videoData?.filter(({ cameraId }) => filterGroup[4].filters.find(v => v.num == searchs?.field4).cameraIds.some(v => v == cameraId)) 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) setPlayData(videoData)
}, [searchs]) }, [searchs])
@ -272,7 +271,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
useEffect(() => { useEffect(() => {
let pollingTimes = pollingTime || 1 let pollingTimes = pollingTime || 1
if (timing) clearInterval(timing) if (timing) clearInterval(timing)
if (polling) { if (pollingTime && polling) {
timing = setInterval(() => { timing = setInterval(() => {
let pages = pageRef.current + 1 let pages = pageRef.current + 1
if (pages > Math.ceil(playData?.length / pageSize)) { if (pages > Math.ceil(playData?.length / pageSize)) {
@ -451,8 +450,6 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
{filterGroup?.map(v => { {filterGroup?.map(v => {
let nameLength = 2 let nameLength = 2
let OptionWidth = 75 let OptionWidth = 75
console.log(formWidth);
console.log(filterGroup.filter(v => v.forbidden).length);
if (formWidth > 910) { if (formWidth > 910) {
switch (filterGroup.filter(v => v.forbidden).length) { switch (filterGroup.filter(v => v.forbidden).length) {
case 1: case 1:
@ -601,15 +598,19 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
})} })}
</div> </div>
case '轮询设置': 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) => { <Switch onChange={(v, e) => {
console.log(v); console.log(v);
setPolling(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) => { onChange={(value) => {
setPollingTime(Number(value.replace(/[^0-9]/ig, ''))) if (value) {
setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
} else {
setPollingTime(null)
}
}} /> }} />
分钟 分钟
</div> </div>
@ -623,7 +624,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen() if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen()
}} /> }} />
</Popover> </Popover>
<div style={{ width: 32, marginLeft: 16,color: mould('#D9D9D9', '#615E5E', '#D9D9D9'), }}>{v.value}</div> <div style={{ width: 32, marginLeft: 16, color: mould('#D9D9D9', '#615E5E', '#D9D9D9'), }}>{v.value}</div>
</div> </div>
})} })}
</div> </div>

Write Preview
Loading…
Cancel
Save