From c38fb8cbf9d740998604942836e9894d319140fe Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Wed, 6 Jul 2022 16:31:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E6=B3=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/client/src/components/textScroll.jsx | 48 ++++++-- .../equipmentWarehouse/actions/camera.js | 11 ++ .../components/remarksModal.jsx | 112 ++++++++++++------ .../equipmentWarehouse/containers/camera.jsx | 3 + .../web/client/src/utils/webapi.js | 5 +- 5 files changed, 132 insertions(+), 47 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx index 6f3c216..2a4d2af 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx +++ b/code/VideoAccess-VCMP/web/client/src/components/textScroll.jsx @@ -3,18 +3,40 @@ import moment from 'moment' import './textScroll.less' function TextScroll (props) { - const { content, duration } = props - const [showContent, setShowContent] = useState('1231231') - const [timer, setTimer] = useState(null) + const { content, duration,roll } = props + const [showContent, setShowContent] = useState('') const showIndex = useRef(0) - + const initialization = useRef(false) + const cancel = useRef(false) useEffect(() => { if (content.length) { - let repeatTime = moment() - let refreshTime = moment() - const scroll = () => { + if(roll){ + let contentParent = document.getElementById('marquee_box') + document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' + const contentP = document.getElementById('contentP') + contentP.style.visibility = 'visible' + setShowContent(content[0]) + window.cancelAnimationFrame(cancel.current) + contentParent.scrollLeft = 0 + initialization.current=false + showIndex.current = 0 + } + else{ + let repeatTime = moment() + let refreshTime = moment() + const scroll = () => { let contentParent = document.getElementById('marquee_box') document.getElementById('contentPMakeUp').style.width = contentParent.clientWidth + 'px' + //初始化 + // if(!showContent&&!initialization.current){ + if(!initialization.current){ + const contentP = document.getElementById('contentP') + contentParent.scrollLeft = 0 + setShowContent(content[showIndex.current]) + showIndex.current = (showIndex.current + 1) % content.length + contentP.style.visibility = 'visible' + initialization.current=true + } // 控制频率 if (moment().diff(refreshTime) > 1000 / 60) { const contentP = document.getElementById('contentP') @@ -36,14 +58,16 @@ function TextScroll (props) { } refreshTime = moment() } - window.requestAnimationFrame(scroll) + let text = null + text=window.requestAnimationFrame(scroll) + cancel.current=text } - window.requestAnimationFrame(scroll) + window.requestAnimationFrame(scroll) + } } - }, []) - + }, [content,roll]) return ( -
+

{showContent}

diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js index 701b12b..503f756 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js @@ -207,4 +207,15 @@ export function postVerifyYingshi(data) { url: `${ApiTable.getCascadeStream}`, msg: { option: "" }, //获取级联视频流 }); + } + export function postCameraRemark(data) { + return (dispatch) => + basicAction({ + type: "post", + dispatch: dispatch, + data, + actionType: "POST_CAMERA_REMARK", + url: `${ApiTable.postCameraRemark}`, + msg: { option: "摄像头备注" }, //编辑摄像头备注 + }); } \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/remarksModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/remarksModal.jsx index 7b08608..cae0297 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/remarksModal.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/remarksModal.jsx @@ -7,21 +7,34 @@ function remarksModal (props) { const { close, visible, + rowId, + dispatch, + actions } = props; - - const [videoObj, setVideoObj] = useState(); //播放条件 - useEffect(() => { - setVideoObj({ - type: 'remarks', - // serialNo: row.serialNo, - // yingshiToken: row.secretYingshi?.token, - // playUrlSd: row.gbCamera?.playUrl?.liveUrl?.sd?.ezopen, - // playUrlHd: row.gbCamera?.playUrl?.liveUrl?.hd?.ezopen, - }) - }, []); + const { equipmentWarehouse } = actions; + const [ScrollList, setScrollList] = useState([{num:'01',value:''},{num:'02',value:''},{num:'03',value:''}]); //显示 + const [showScrollList, setShowScrollList] = useState([]); //显示 + const [roll,setroll] = useState(false); + const [showValueNum,setShowValueNum] = useState(0); + const valueNum = useRef(0); + + // useEffect(() => { + // setShowScrollList([ + // '周杰伦7月6日出专辑，请大家多多捧场备注', + // '111111111111111111111111111111111111111111111111111111' + // ]) + // }, []); + function handleOk () { //点击弹框确定 右边按钮 - close(); + dispatch( + equipmentWarehouse.postCameraRemark({ + cameraId:rowId, + remark:showScrollList + }) + ).then((res) => { + close(); + }) } function handleAfterClose () { //在关闭之后 @@ -30,6 +43,34 @@ function remarksModal (props) { close(); //点击弹框取消 左边按钮 } + function onChange(value,num){ + valueNum.current=0 + let myScrollList=ScrollList + myScrollList[num].value=value + setScrollList(myScrollList); + setShowScrollList([value]) + for (let index = 0; index < myScrollList.length; index++) { + if(myScrollList[index].value){ + valueNum.current=valueNum.current+1 + } + } + setShowValueNum(valueNum.current); + } + function onFocus(num){ + setShowScrollList([ScrollList[num].value]) + setroll(true) + } + function onBlur(){ + setShowScrollList([]) + let myScrollList = [] + for (let index = 0; index < ScrollList.length; index++) { + if(ScrollList[index].value){ + myScrollList.push(ScrollList[index].value) + } + } + setShowScrollList(myScrollList) + setroll(false) + } return ( <>
请添加备注信息
-
（3/3）
-
-
- 01
} showClear> +
（{showValueNum}/3）
-
- 02
} showClear> -
-
- 03
} showClear> +
+ {ScrollList.map((item, index) => ( +
+ {item.num}
} + value={item.value} + onChange={(value)=>onChange(value,index)} + onFocus={()=>onFocus(index)} + onBlur={onBlur} + maxLength={25} + showClear> +
+ ))}
-
- -
-
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx index 67c9fe9..0a6e85a 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx @@ -280,6 +280,7 @@ const CameraHeader = (props) => { // playUrlSd: row.gbCamera.playUrl.liveUrl.sd.ezopen, // playUrlHd: row.gbCamera.playUrl.liveUrl.hd.ezopen, }) + setRowId(row.id); setRemarksModal(true) }} > @@ -830,8 +831,10 @@ const CameraHeader = (props) => { remarksModal? { setRemarksModal(false) + setRowId() }} > :'' } diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index d5783d3..34bf1d5 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js @@ -25,7 +25,7 @@ export const ApiTable = { delCamera: "camera/{cameraId}", //删除摄像头 getCameraDetails: "camera/{cameraId}/detail", //获取摄像头详情 getCameraKind: "camera/kind", //获取摄像头种类列表 - getAbility: "/camera/ability", //获取摄像头能力列表 + getAbility: "camera/ability", //获取摄像头能力列表 postCameraYingshi: "camera/create/yingshi", //创建萤石摄像头 postCameraIpc: "camera/create/ipc", //创建IPC摄像头 getVideoStreaming: "camera/nvr_stream", //获取NVR视频流 @@ -36,8 +36,9 @@ export const ApiTable = { postVerifyYingshi: "camera/verify/yingshi", //验证萤石摄像头信息 postVerifyIpc: "camera/verify/ipc", //验证IPC摄像头信息 postVerifyCascade: "camera/verify/cascade", //验证级联摄像头信息 - getCascadeStream: "/camera/cascade_stream", //获取级联视频流 + getCascadeStream: "camera/cascade_stream", //获取级联视频流 uploadYingshiVoice: 'camera/yingshi_voice/upload', //上传萤石语音 + postCameraRemark: 'camera/remark',//编辑摄像头备注 }; export const VideoServeApi = {