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 b7814e4..701b12b 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 @@ -162,37 +162,49 @@ export function getParentCamera(query) { }); } -export function getVerifyYingshi(data) { +export function postVerifyYingshi(data) { return (dispatch) => basicAction({ type: "post", dispatch: dispatch, data, actionType: "POST_VERIFY_YINGSHI", - url: `${ApiTable.getVerifyYingshi}`, - msg: { option: "" }, //获取级联摄像头父级设备 + url: `${ApiTable.postVerifyYingshi}`, + msg: { option: "" }, ///验证萤石摄像头信息 }); } - export function getVerifyIpc(data) { + export function postVerifyIpc(data) { return (dispatch) => basicAction({ type: "post", dispatch: dispatch, data, actionType: "POST_VERIFY_IPC", - url: `${ApiTable.getVerifyIpc}`, - msg: { option: "" }, //获取级联摄像头父级设备 + url: `${ApiTable.postVerifyIpc}`, + msg: { option: "" }, //验证IPC摄像头信息 }); } - export function getVerifyCascade(data) { + export function postVerifyCascade(data) { return (dispatch) => basicAction({ type: "post", dispatch: dispatch, data, actionType: "POST_VERIFY_CASCADE", - url: `${ApiTable.getVerifyCascade}`, - msg: { option: "" }, //获取级联摄像头父级设备 + url: `${ApiTable.postVerifyCascade}`, + msg: { option: "" }, //验证级联摄像头信息 + }); + } + + export function getCascadeStream(query) { + return (dispatch) => + basicAction({ + type: "get", + dispatch: dispatch, + query, + actionType: "GET_CASCADE_STREAM", + url: `${ApiTable.getCascadeStream}`, + msg: { option: "" }, //获取级联视频流 }); } \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx index f306306..4b2298f 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx @@ -35,7 +35,7 @@ function cameraModal (props) { const [loadingTip, setloadingTip] = useState("测试中..."); //loading tip的值 const [okText, setokText] = useState("确定"); //ok弹框text 右边 const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 - + const testComplete = useRef(false) //测试完成 const [clickNum, setclickNum] = useState( cameraData.type == "yingshi" ? 1 @@ -200,6 +200,7 @@ function cameraModal (props) { close(); } else if (clickNum == 4) { cascadeRef.current.resetCascadeCamera(); + testComplete.current = false close(); } else { nvrRef.current.resetFluoriteCamera(); @@ -231,7 +232,7 @@ function cameraModal (props) { var front = new moment(); //验证前时间 setloading(true); dispatch( - equipmentWarehouse.getVerifyYingshi({ + equipmentWarehouse.postVerifyYingshi({ serialNo: values.serialNo, }) ).then((res) => { @@ -269,7 +270,7 @@ function cameraModal (props) { var front = new moment(); //验证前时间 setloading(true); dispatch( - equipmentWarehouse.getVerifyIpc({ + equipmentWarehouse.postVerifyIpc({ serialNo: values.serialNo, }) ).then((res) => { @@ -306,7 +307,7 @@ function cameraModal (props) { var front = new moment(); //验证前时间 setloading(true); dispatch( - equipmentWarehouse.getVerifyCascade({ + equipmentWarehouse.postVerifyCascade({ sip: values.sip, }) ).then((res) => { @@ -315,9 +316,11 @@ function cameraModal (props) { if (res.success) { setTimeout(() => { setloadingTip("测试完成"); + testComplete.current = true setTimeout(() => { setloading(false); setloadingTip("测试中..."); + }, 800); }, duration > 2000 ? 0 : 2000 - duration) } else { @@ -405,7 +408,7 @@ function cameraModal (props) { }} onClick={() => handleChoose(item.id)} > - {modify || addNvr ||axyData? item.id == clickNum ? "" :
) : ( - + )}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx index 471e7a3..2754a4f 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx @@ -1,20 +1,60 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; import { connect } from "react-redux"; -import { Form, Row, Col } from "@douyinfe/semi-ui"; - +import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, } from "@douyinfe/semi-ui"; +import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons"; import "./cameraModal.less"; -function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { +import PerfectScrollbar from "perfect-scrollbar"; +let equipmentScrollbar; + +function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete }) { const form = useRef(); const { equipmentWarehouse } = actions; const [sip, setSip] = useState([]); + const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表 + const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选 + const [isAllChoose, setIsAllChoose] = useState(false); //全选 + const cameraDataNvr = cameraData.nvr || ""; useEffect(() => { dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { setSip(res.payload.data); }); - + const videoStreaming = document.getElementById("video_streaming"); + if (videoStreaming && equipmentScrollbar) { + equipmentScrollbar.update(); + } }, []); + useEffect(() => { + NVRcameraList + ? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { + suppressScrollX: true, + })) + : ""; + }, [NVRcameraList]); + + useEffect(() => { + //测试成功后获取级联视频流 + console.log(testComplete) + if (testComplete) { + dispatch(equipmentWarehouse.getCascadeStream({ sip: "111" })).then((res) => { + console.log(res.payload.data); + let chooseList = []; + let data = res.payload.data.map((item, index) => { + item.change = false; + return item; + }) + setNVRcameraList(data) + for (let index = 0; index < data.length; index++) { + chooseList.push(data[index].id); + } + setNvrCheckList(chooseList); + setIsAllChoose(true); + }); + } + }, [testComplete]) + + //内存卡列表 const memoryList = [ { @@ -47,6 +87,54 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { }, ]; + function NvrChangeName (e, index, name) { + //级联摄像头视频流获取修改名称 + let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); + if (cameraData.name == name) { + NvrchangeList[index].change = true; + setNVRcameraList(NvrchangeList); + } + e.stopPropagation(); + } + function nvronBlur (index) { + //nvr摄像头名称修改失去焦点 + let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); + NvrchangeList[index].change = false; + setNVRcameraList(NvrchangeList); + } + function inputchange (e, index) { + //nvr摄像头名称修改 + let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); + NvrchangeList[index].name = e; + setNVRcameraList(NvrchangeList); + } + function allChoose (e) { + //全选/全不选 + let chooseList = []; + if (NVRcameraList.length == nvrCheckList.length) { + setNvrCheckList([]); + setIsAllChoose(false); + } else { + for (let index = 0; index < NVRcameraList.length; index++) { + chooseList.push(NVRcameraList[index].id); + } + setNvrCheckList(chooseList); + setIsAllChoose(true); + } + } + function playVideo (e) { + //nvr播放视频 + console.log("22222222222222222"); + e.stopPropagation(); + } + function onDisabled (name) { + if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) { + return false; + } else { + return true; + } + } + useImperativeHandle(dRef, () => ({ //传给父组件方法 //子组件暴露给父组件的方法 @@ -72,7 +160,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { field="externalDomain" label="外域名称:" maxLength="36" - initValue={cameraData.externalDomain || ""} + initValue={cameraData.externalDomain || ""} placeholder="请输入外域 名称，例如“xxx市级平台”" style={{ width: 307 }} rules={[{ required: true, message: "请输入外域名称" }]} @@ -108,6 +196,128 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { + + +
+ {NVRcameraList.length > 0 ? ( +
+ allChoose(e)} + aria-label="全选" + > + 全选 + +
+ ) : ( + "" + )} + { + setNvrCheckList(nvrCheck); + if (NVRcameraList.length == nvrCheck.length) { + setIsAllChoose(true); + } else { + setIsAllChoose(false); + } + }}> + {NVRcameraList.length > 0 + ? NVRcameraList.map((item, index) => ( + + +
+
+ 通道名称： + {item.change ? ( + inputchange(e, index)} + onBlur={() => nvronBlur(index)} + onClick={(e) => e.stopPropagation()} + > + ) : ( + item.name + )} +
+
+ + NvrChangeName(e, index, item.name) + } + /> +
+
+
+ 设备编号：{item.streamid} +
+
+ playVideo(e)} + /> +
+
+ } + style={{ width: 280, border: "1px solid #F9F9F9" }} + > + + )) + : ""} + + + + ); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx index 00aa70b..cf90045 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx @@ -129,8 +129,8 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } if (!cameraDataNvr || cameraData.name == name) { NvrchangeList[index].change = true; setNVRcameraList(NvrchangeList); - e.stopPropagation(); } + e.stopPropagation(); } function nvronBlur (index) { //nvr摄像头名称修改失去焦点 @@ -189,7 +189,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } }) .catch((errors) => { //表单校验失败 - console.log("errors", errors); + // console.log("errors", errors); }); } function allChoose (e) { @@ -336,6 +336,7 @@ function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber } value={item.name} onChange={(e) => inputchange(e, index)} onBlur={() => nvronBlur(index)} + onClick={(e) => e.stopPropagation()} > ) : ( item.name diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index f175fb6..93c0992 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js @@ -31,9 +31,11 @@ export const ApiTable = { getCascadeSIP: "camera/sip_list/cascade", //获取级联摄像头sip列表 postAddCascade: "camera/create/cascade", //添加级联摄像头 getParentCamera:"camera/cascade_device", //获取级联摄像头父级设备 - getVerifyYingshi:"camera/verify/yingshi", //验证萤石摄像头信息 - getVerifyIpc:"camera/verify/ipc", //验证IPC摄像头信息 - getVerifyCascade:"camera/verify/cascade", //验证级联摄像头信息 + postVerifyYingshi:"camera/verify/yingshi", //验证萤石摄像头信息 + postVerifyIpc:"camera/verify/ipc", //验证IPC摄像头信息 + postVerifyCascade:"camera/verify/cascade", //验证级联摄像头信息 + getCascadeStream:"/camera/cascade_stream", //获取级联视频流 + };