NVR跳转传参功能完成,NVR摄像头获取视频流时交互样式

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx

@@ -20,7 +20,9 @@ function cameraModal (props) {
         CameraAbility,
         cameraData, //修改时传来的值
         modify,
-        parentCamera
+        parentCamera,
+        addNvr,
+        nvrNumber
     } = props;
     const { equipmentWarehouse } = actions;
     const fluoriteRef = useRef();
@@ -37,7 +39,7 @@ function cameraModal (props) {
             ? 1
             : cameraData.type == "ipc"
                 ? 3
-                : cameraData.type == "nvr"
+                : cameraData.type == "nvr" || addNvr
                     ? 2
                     : cameraData.type == "cascade"
                         ? 4
@@ -47,7 +49,7 @@ function cameraModal (props) {
     useEffect(() => {
         dispatch(equipmentWarehouse.getCameraKind());
         dispatch(equipmentWarehouse.getAbility());
-        cameraData.type == "nvr" ? setcameraList(cameraList.slice(1, 4)) : "";
+        cameraData.type == "nvr" || addNvr ? setcameraList(cameraList.slice(1, 4)) : "";
     }, []);
     const cameraList = [
         //循环摄像头列表
@@ -149,20 +151,19 @@ function cameraModal (props) {
     }
     function handleChoose (id) {
         //选择摄像头接入类型
-        if (!modify) {
+        if (!addNvr && !modify) {
             setclickNum(id);
         }
-
     }
     function turnLift () {
         //轮播图向左
-        if (!modify) {
+        if (!addNvr && !modify) {
             setcameraList(cameraList.slice(0, 3));
         }
     }
     function turnRight () {
         //轮播图向右
-        if (!modify) {
+        if (!addNvr && !modify) {
             setcameraList(cameraList.slice(1, 4));
         }
     }
@@ -337,7 +338,7 @@ function cameraModal (props) {
                                         }}
                                         onClick={() => handleChoose(item.id)}
                                     >
-                                        {modify ? item.id == clickNum ? "" : <div style={{
+                                        {modify || addNvr ? item.id == clickNum ? "" : <div style={{
                                             width: 266,
                                             height: 146,
                                             borderRadius: 3,
@@ -490,7 +491,7 @@ function cameraModal (props) {
                                 cameraData={cameraData}
                             />
                         ) : clickNum == 2 ? (
-                            <NvrCamera nvrRef={nvrRef} cameraData={cameraData} />
+                            <NvrCamera nvrRef={nvrRef} cameraData={cameraData} addNvr={addNvr} nvrNumber={nvrNumber} />
                         ) : clickNum == 3 ? (
                             <IpcCamera
                                 aRef={ipcRef}

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx

@@ -9,14 +9,15 @@ import {
     Checkbox,
     Radio,
     Input,
+    Spin,
 } from "@douyinfe/semi-ui";
-import { IconEdit, IconPlayCircle } from "@douyinfe/semi-icons";
+import { IconEdit, IconPlayCircle, IconTickCircle } from "@douyinfe/semi-icons";
 import "./cameraModal.less";
 import PerfectScrollbar from "perfect-scrollbar";
 import { isIndexed } from "immutable";
 
 let equipmentScrollbar;
-function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
+function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }) {
     const { equipmentWarehouse } = actions;
     const cameraDataNvr = cameraData.nvr || "";
     const form = useRef();
@@ -24,6 +25,10 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
     const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表
     const [isAllChoose, setIsAllChoose] = useState(false); //全选
     const [equipmentNum, setEquipmentNum] = useState(""); //nvr视频编号
+    const [isloading, setloading] = useState(false); //是否显示loading
+    const [loadingTip, setloadingTip] = useState("正在接入视频流..."); //loading tip的值
+    const [step, setstep] = useState("none");
+    const [stepp, setstepp] = useState("none");
 
     useEffect(() => {
         NVRcameraList
@@ -39,19 +44,19 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
         }
     });
     useEffect(() => {
-    cameraDataNvr
-      ? dispatch(
+        if (cameraDataNvr) {
+            setloading(true);
+            setstep("block");
+            dispatch(
                 equipmentWarehouse.getVideoStreaming({
                     streamId: cameraDataNvr.serialNo,
                 })
             ).then((res) => {
+                console.log(res)
                 let oneData = res.payload.data[0];
-
                 let modifyData = res.payload.data.find(
-            (item) => item.camera.name == cameraData.name
+                    (item) => item.camera == null ? false : item.camera.name == cameraData.name
                 );
-          console.log(oneData);
-          console.log(modifyData);
                 let data = res.payload.data.map((item, index) => {
                     if (index == 0) {
                         item = modifyData;
@@ -68,17 +73,57 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
                     if (item.camera) {
                         item.name = item.camera.name;
                     }
-
                     return item;
                 });
-          console.log(data);
                 setNVRcameraList(data);
-
                 setNvrCheckList([data[0].id]);
+                if (res.success) {
+                    setTimeout(() => {
+                        setloadingTip("接入完成");
+                        setTimeout(() => {
+                            setstep("none");
+                            setloading(false);
+                            setstepp("block");
+                            setloadingTip("正在接入视频流...");
+                        }, 800);
+                    }, 800)
+                }
             })
-      : "";
+        }
+
+        //NVR添加页面跳到nvr摄像头添加页面
+        if (addNvr) {
+            setloading(true);
+            setstep("block");
+            dispatch(equipmentWarehouse.getVideoStreaming({ streamId: nvrNumber })).then((res) => {
+                let chooseList = [];
+                let data = res.payload.data.map((item) => {
+                    item.change = false;
+                    item.support = false;
+                    return item;
+                });
+                setNVRcameraList(data);
+                for (let index = 0; index < data.length; index++) {
+                    chooseList.push(data[index].id);
+                }
+                setNvrCheckList(chooseList);
+                setIsAllChoose(true);
+                if (res.success) {
+                    setTimeout(() => {
+                        setloadingTip("接入完成");
+                        setTimeout(() => {
+                            setstep("none");
+                            setloading(false);
+                            setstepp("block");
+                            setloadingTip("正在接入视频流...");
+                        }, 800);
+                    }, 800)
+                }
+            })
+        }
+
     }, []);
-  function NvrChangeName(e, index, name) {
+    function NvrChangeName (e, index, name) {
         //nvr摄像头视频流获取修改名称
         let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
         if (!cameraDataNvr || cameraData.name == name) {
@@ -87,29 +132,26 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
             e.stopPropagation();
         }
     }
-  function nvronBlur(index) {
+    function nvronBlur (index) {
         //nvr摄像头名称修改失去焦点
         let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
         NvrchangeList[index].change = false;
         setNVRcameraList(NvrchangeList);
     }
-  function inputchange(e, index) {
+    function inputchange (e, index) {
         //nvr摄像头名称修改
         let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
-    console.log(e);
         NvrchangeList[index].name = e;
         setNVRcameraList(NvrchangeList);
     }
-  function toggle(e, index) {
+    function toggle (e, index) {
         //nvr云台支持
-    console.log(e)
         let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
-    console.log(NvrchangeList)
         NvrchangeList[index].support = e.target.checked;
         setNVRcameraList(NvrchangeList);
         e.stopPropagation();
     }
-  function getVideoList() {
+    function getVideoList () {
         form.current
             .validate()
             .then((values) => {
@@ -118,20 +160,31 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
                 let valuess = JSON.parse(JSON.stringify(values));
                 valuess.streamId = values.serialNo;
                 delete valuess.serialNo;
+                setloading(true);
+                setstep("block");
                 dispatch(equipmentWarehouse.getVideoStreaming(valuess)).then((res) => {
                     let data = res.payload.data.map((item) => {
                         item.change = false;
                         item.support = false;
                         return item;
                     });
-          console.log(data);
                     setNVRcameraList(data);
                     for (let index = 0; index < data.length; index++) {
                         chooseList.push(data[index].id);
                     }
-          console.log(chooseList);
                     setNvrCheckList(chooseList);
                     setIsAllChoose(true);
+                    if (res.success) {
+                        setTimeout(() => {
+                            setloadingTip("接入完成");
+                            setTimeout(() => {
+                                setstep("none");
+                                setloading(false);
+                                setstepp("block");
+                                setloadingTip("正在接入视频流...");
+                            }, 800);
+                        }, 800)
+                    }
                 });
             })
             .catch((errors) => {
@@ -139,7 +192,7 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
                 console.log("errors", errors);
             });
     }
-  function allChoose(e) {
+    function allChoose (e) {
         //全选/全不选
         let chooseList = [];
         if (NVRcameraList.length == nvrCheckList.length) {
@@ -153,12 +206,12 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
             setIsAllChoose(true);
         }
     }
-  function playVideo(e) {
+    function playVideo (e) {
         //nvr播放视频
         console.log("22222222222222222");
         e.stopPropagation();
     }
-  function onDisabled(name) {
+    function onDisabled (name) {
         if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) {
             return false;
         } else {
@@ -169,7 +222,7 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
         //传给父组件方法
         //aa即为子组件暴露给父组件的方法
         resetFluoriteCamera: form.current.reset,
-    equipmentNum: cameraDataNvr ? cameraDataNvr.serialNo : equipmentNum,
+        equipmentNum: cameraDataNvr ? cameraDataNvr.serialNo : addNvr ? nvrNumber : equipmentNum,
         NVRcameraList: NVRcameraList.filter((v) =>
             nvrCheckList.some((e) => e == v.id)
         ),
@@ -191,8 +244,8 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
                         field="serialNo"
                         maxLength="39"
                         label="设备编号:"
-            disabled={cameraDataNvr ? true : false}
-            initValue={cameraDataNvr ? cameraDataNvr.serialNo : ""}
+                        disabled={cameraDataNvr ? true : addNvr ? true : false}
+                        initValue={cameraDataNvr ? cameraDataNvr.serialNo : addNvr ? nvrNumber : ""}
                         placeholder="请输入设备编号"
                         style={{ width: 307 }}
                         rules={[
@@ -248,6 +301,8 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
                             id="video_streaming"
                             style={{ maxHeight: 300, position: "relative" }}
                         >
+                            <Spin tip={loadingTip} spinning={isloading}>
+                                <div style={{ display: stepp }}>
                                     {NVRcameraList.length > 0
                                         ? NVRcameraList.map((item, index) => (
                                             <Col
@@ -339,13 +394,17 @@ function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
                                         ))
                                         : ""}
                                 </div>
+                                <div style={{ height: 50, width: "100%", display: step }}></div>
+                            </Spin>
+
+                        </div>
                     </CheckboxGroup>
                 </Row>
             </Form>
         </>
     );
 }
-function mapStateToProps(state) {
+function mapStateToProps (state) {
     const { auth, global, members } = state;
     return {
         loading: members.isRequesting,

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect,useImperativeHandle } from "react";
 import { connect } from "react-redux";
 import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui";
 import { IconTickCircle } from "@douyinfe/semi-icons";
@@ -6,7 +6,7 @@ import { IconTickCircle } from "@douyinfe/semi-icons";
 import moment from "moment";
 
 function nvrModal(props) {
-  const { modalName } = props;
+  const { modalName ,nvrRef} = props;
   const { dispatch, actions, vender, close } = props;
   const nvrData = props.nvrData || {}; //修改时传来的值
   const form = useRef();
@@ -18,10 +18,6 @@ function nvrModal(props) {
   const [cancelText, setcancelText] = useState("取消"); //取消弹框text  左边
   const [formObj, setformObj] = useState(); //接口入参
 
-  useEffect(() => {
-    console.log(props.user.id);
-  }, []);
-
   function showDialog() {
     //打开弹框
     setVisible(true);
@@ -47,6 +43,7 @@ function nvrModal(props) {
         .validate()
         .then((values) => {
           //表单校验
+          console.log(values)
           let valuesObj = JSON.parse(JSON.stringify(values));
           valuesObj.longitude = values.position.split(",")[0];
           valuesObj.latitude = values.position.split(",")[1];
@@ -61,7 +58,6 @@ function nvrModal(props) {
               serialNo: valuesObj.serialNo,
             })
           ).then((res) => {
-            console.log(res);
             var after = new moment();  //验证后时间
             var duration = moment.duration(after.diff(front))._data.milliseconds;
             if (res.success) {
@@ -127,6 +123,11 @@ function nvrModal(props) {
     //高德经纬度
     window.open("https://lbs.amap.com/tools/picker", "_blank");
   }
+  useImperativeHandle(nvrRef, () => ({
+    //传给父组件方法
+    //aa即为子组件暴露给父组件的方法
+    nvrNumber: ()=>formObj.serialNo
+  }));
   return (
     <>
       <div onClick={showDialog}>{modalName == "add" ? "添加NVR" : "修改"}</div>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx

@@ -37,6 +37,8 @@ const CameraHeader = (props) => {
     const [cameraData, setCameraData] = useState({}); //表格数据
     const [modify, setModify] = useState(false); //修改
     const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备
+    const [addNvr, setAddNvr] = useState(false); //nvr页面传递参数打开NVR摄像头添加弹框
+    const [nvrNumber, setNvrNumber] = useState();
     const { equipmentWarehouse } = actions;
     const api = useRef();
     const searchb = useRef(search)
@@ -44,8 +46,14 @@ const CameraHeader = (props) => {
     const CAMERAS = "cameras";
 
     useEffect(() => {
-
         console.log(props)
+        if (props.location.query) {
+            setAddNvr(props.location.query.addNvr)
+            setNvrNumber(props.location.query.serialNo)
+            setCameraModal(true);
+        }
+
+
         dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
             setvenderList(res.payload.data);
             attribute(res.payload.data);
@@ -115,7 +123,6 @@ const CameraHeader = (props) => {
             width: "20%",
             dataIndex: "",
             render: (_, row) => {
-                console.log(row);
                 return (
                     <div style={{ display: "flex" }}>
                         <Button
@@ -220,26 +227,6 @@ const CameraHeader = (props) => {
         },
     ];
 
-    const device_ = (r) => {
-        console.log(searchb)
-        if (deviceClick) {
-            // if (r.type == "nvr") {
-            //     console.log(search)
-            //     setearch({ ...search, nvrId: r.nvr.id })
-            // } else {
-            //     setearch({ ...search, externalDomain: r.externalDomain })
-            // }
-            setDeviceClick(false)
-        } else {
-            // if (r.type == "nvr") {
-            //     setearch({ ...search, nvrId: null })
-            // } else {
-            //     setearch({ ...search, externalDomain: null })
-            // }
-            setDeviceClick(true)
-        }
-    }
-
     //获取表格属性设置
     function attribute (data) {
         const arr = localStorage.getItem(CAMERAS)
@@ -706,14 +693,17 @@ const CameraHeader = (props) => {
                     venderList={venderList}
                     cameraData={cameraData}
                     modify={modify}
+                    addNvr={addNvr}
+                    nvrNumber={nvrNumber}
                     parentCamera={parentCamera}
                     close={() => {
                         setCameraModal(false);
                         setCameraData({});
                         setModify(false)
                         setParentCamera("")
+                        setAddNvr(false)
+                        setNvrNumber("")
                         equipmentGetCamera();
-
                     }}
                     modalName={modalName}
                 />

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { push } from "react-router-redux";
+// import { push } from "react-router-redux";
 import moment from "moment";
 import {
     Button,
@@ -30,7 +30,7 @@ export const accessType = [
 ];
 
 const NvrHeader = (props) => {
-    const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
+    const { history,dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
     const { equipmentWarehouse } = actions;
     const [setup, setSetup] = useState(false);
     const [sideSheet, setSideSheet] = useState(false);
@@ -39,12 +39,13 @@ const NvrHeader = (props) => {
     const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
     const [search, setearch] = useState({}); //搜索条件
     const [rowId, setRowId] = useState(); //表格数据id
-
     const [reminder, setReminder] = useState(false); //提醒弹框
     const api = useRef();
     const SETUPS = "setups";
+    const nvrRef = useRef();  //获取子组件的设备编号
 
     useEffect(() => {
+        console.log(props)
         dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
             setvenderList(res.payload.data);
             attribute(res.payload.data);
@@ -157,7 +158,6 @@ const NvrHeader = (props) => {
                 dataIndex: "venderId",
                 key: "manufactor",
                 render: (_, r, index) => {
-                    console.log(r);
                     let manufactorName = data.find((item) => item.id == r.venderId);
                     return manufactorName ? manufactorName.name : "";
                 },
@@ -327,7 +327,9 @@ const NvrHeader = (props) => {
                         <NvrModal
                             modalName="add"
                             venderList={venderList}
+                            nvrRef={nvrRef}
                             close={() => {
+                                setReminder(true)
                                 equipmentGetNvr();
                             }}
                         />
@@ -592,7 +594,7 @@ const NvrHeader = (props) => {
                     toadd="去添加"
                     visible={reminder}
                     onOk={() => {
-                        dispatch(push('/equipmentWarehouse/camera/:addNvr=true'));
+                        history.push({pathname:'/equipmentWarehouse/camera',query:{addNvr:true,serialNo:nvrRef.current.nvrNumber()}});
                         setReminder(false)
                     }}
                 />