备注功能

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 { content, duration,roll } = props
-   const [showContent, setShowContent] = useState('1231231')
+   const [showContent, setShowContent] = useState('')
-   const [timer, setTimer] = useState(null)
    const showIndex = useRef(0)
-
+   const initialization = useRef(false)
+   const cancel = useRef(false)
    useEffect(() => {
       if (content.length) {
-         let repeatTime = moment()
+        if(roll){
-         let refreshTime = moment()
+            let contentParent = document.getElementById('marquee_box')
-         const scroll = () => {
+            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 (
-      <div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden' }} >
+      <div className="marquee_box" id='marquee_box' style={{ overflow: 'hidden',color:'#F9F9F9' }} >
          <p style={{ position: 'relative', left: 24 }}>
             <p id='contentP' style={{ display: 'inline-block', visibility: 'hidden' }}>{showContent}</p>
             <p id='contentPMakeUp' style={{ width: 0, display: 'inline-block' }}></p>

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: "摄像头备注" }, //编辑摄像头备注
+      });
   }

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 { equipmentWarehouse } = actions;
-    const [videoObj, setVideoObj] = useState(); //播放条件
+    const [ScrollList, setScrollList] = useState([{num:'01',value:''},{num:'02',value:''},{num:'03',value:''}]); //显示
-    useEffect(() => {
+    const [showScrollList, setShowScrollList] = useState([]); //显示
-        setVideoObj({
+    const [roll,setroll] = useState(false);
-            type: 'remarks',
+    const [showValueNum,setShowValueNum] = useState(0);
-            // serialNo: row.serialNo,
+    const valueNum = useRef(0);
-            // yingshiToken: row.secretYingshi?.token,
+
-            // playUrlSd: row.gbCamera?.playUrl?.liveUrl?.sd?.ezopen,
+    // useEffect(() => {
-            // playUrlHd: row.gbCamera?.playUrl?.liveUrl?.hd?.ezopen,
+    //     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 (
         <>
             <Modal
@@ -46,31 +87,36 @@ function remarksModal (props) {
                     <div style={{width:394}}>
                         <div style={{display:'flex'}}>
                             <div style={{color:'#1859C1',fontWeight: 600}}>请添加备注信息</div>
-                            <div>（3/3）</div>
+                            <div>（{showValueNum}/3）</div>
-                        </div>
-                        <div style={{marginTop:20}}>
-                            <Input prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>01</div>} showClear></Input>
                         </div>
-                        <div style={{marginTop:12}}>
+                        <div style={{marginTop:8}}>
-                            <Input prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>02</div>} showClear></Input>
+                            {ScrollList.map((item, index) => (
-                        </div>
+                                <div key={index} style={{marginTop:12}}>
-                        <div style={{marginTop:12}}>
+                                    <Input 
-                            <Input prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>03</div>} showClear></Input>
+                                        prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>{item.num}</div>}
+                                        value={item.value}
+                                        onChange={(value)=>onChange(value,index)}
+                                        onFocus={()=>onFocus(index)}
+                                        onBlur={onBlur}
+                                        maxLength={25}
+                                        showClear></Input>
+                                </div>
+                            ))}
                         </div>
                     </div>
                     <div style={{width:306,marginLeft:20,position: ""}}>
-                        <div style={{ paddingRight: 12,position: "absolute",width: 306,color:'#F9F9F9',background:'rgba(24, 89, 193, 0.8)' }}>
+                            <div style={{ position: "absolute",background:'rgba(0, 0, 0, 0.15)',width:306}}>
-                            <TextScroll content={['周杰伦7月6日出专辑，请大家多多捧场备注周杰伦7月6日出专辑，请大家多多捧场备注，请大家多多捧场备注','assdasdasdasdss']} duration={6} />
+                                <TextScroll content={showScrollList} roll={roll} duration={6} />
-                        </div>
+                            </div>
-                        <video
+                            <video
-                            id="cameraBanner"
+                                id="cameraBanner"
-                            autoPlay
+                                autoPlay
-                            loop
+                                loop
-                            muted
+                                muted
-                            style={{ width: 306,height:185, objectFit: "cover", }}
+                                style={{ width: 306,height:185, objectFit: "cover", }}
-                            src="/assets/video/remarks.mp4"
+                                src="/assets/video/remarks.mp4"
-                            type="video/mp4"
+                                type="video/mp4"
-                        />
+                            />
                     </div>
                 </div>
             </Modal>

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?
                 <RemarksModal
                 visible={true}
+                rowId={rowId}
                 close={() => {
                     setRemarksModal(false)
+                    setRowId()
                 }} >
                 </RemarksModal>:''
             }

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 = {