备注功能

2 years ago · c38fb8cbf9
5 changed files with 132 additions and 47 deletions
--- 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) {
+        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)
        }
-   }, [])
-
+      }
+   }, [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>
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
@ -208,3 +208,14 @@ export function postVerifyYingshi(data) {
        msg: { option: "" }, //获取级联视频流
      });
  }
+  export function postCameraRemark(data) {
+    return (dispatch) =>
+      basicAction({
+        type: "post",
+        dispatch: dispatch,
+        data,
+        actionType: "POST_CAMERA_REMARK",
+        url: `${ApiTable.postCameraRemark}`,
+        msg: { option: "摄像头备注" }, //编辑摄像头备注
+      });
+  }
--- 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 { 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'
+    //     ])
+    // }, []);

-    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,
-        })
-    }, []);
    function handleOk () {
        //点击弹框确定  右边按钮
+        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,21 +87,26 @@ function remarksModal (props) {
                    <div style={{width:394}}>
                        <div style={{display:'flex'}}>
                            <div style={{color:'#1859C1',fontWeight: 600}}>请添加备注信息</div>
-                            <div>（3/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>（{showValueNum}/3）</div>
                        </div>
-                        <div style={{marginTop:12}}>
-                            <Input prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>02</div>} showClear></Input>
+                        <div style={{marginTop:8}}>
+                            {ScrollList.map((item, index) => (
+                                <div key={index} style={{marginTop:12}}>
+                                    <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 style={{marginTop:12}}>
-                            <Input prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>03</div>} showClear></Input>
+                            ))}
                        </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)' }}>
-                            <TextScroll content={['周杰伦7月6日出专辑，请大家多多捧场备注周杰伦7月6日出专辑，请大家多多捧场备注，请大家多多捧场备注','assdasdasdasdss']} duration={6} />
+                            <div style={{ position: "absolute",background:'rgba(0, 0, 0, 0.15)',width:306}}>
+                                <TextScroll content={showScrollList} roll={roll} duration={6} />
                            </div>
                            <video
                                id="cameraBanner"
--- 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?
                <RemarksModal
                visible={true}
+                rowId={rowId}
                close={() => {
                    setRemarksModal(false)
+                    setRowId()
                }} >
                </RemarksModal>:''
            }
--- 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 = {