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
Split 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'
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>
)

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

@ -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 (
<>
<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' }}>
{/* 顶部信息 */}
<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';
const Container = ({ videoObj, pageSize, showHeader, videoPlay ,mould}) => {
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} /> :
<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,
}} /> : ""}
<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;
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) => {
setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
if (value) {
setPollingTime(Number(value.replace(/[^0-9]/ig, '')))
} else {
setPollingTime(null)
}
}} />
分钟
</div>
@ -623,7 +624,7 @@ const VideoScreen = ({ treeData, filterGroup, videoPlay, template, headerName, s
if (v.value == '背投') document.getElementById('rearProjection').requestFullscreen()
}} />
</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>

Write Preview
Loading…
Cancel
Save