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 8ae3ece..2f5c892 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 @@ -29,14 +29,13 @@ export function putForbidden(data, forbidden) { }); } -export function delCamera(query) { +export function delCamera(orgId) { return (dispatch) => basicAction({ type: "del", dispatch: dispatch, actionType: "DEL_CAMERA", - query, - url: `${ApiTable.delCamera}`, + url: `${ApiTable.delCamera.replace("{cameraId}", orgId)}`, msg: { option: "删除摄像头" }, //删除摄像头 reducer: {}, }); @@ -102,3 +101,27 @@ export function postCameraIpc(data) { reducer: { name: "" }, }); } + +export function getVideoStreaming(query) { + return (dispatch) => + basicAction({ + type: "get", + dispatch: dispatch, + query, + actionType: "GET_VIDEO_STREAMING", + url: `${ApiTable.getVideoStreaming}`, + msg: { option: "" }, //获取NVR视频流 + reducer: { name: "videoStreaming" }, + }); +} +export function postCameraNvr(data) { + return (dispatch) => + basicAction({ + type: "post", + dispatch: dispatch, + data, + actionType: "POST_CAMERA_NVR", + url: `${ApiTable.postCameraNvr}`, + msg: { option: "" }, //记录NVR摄像头 + }); +} 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 926dc75..ba3cf9f 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 @@ -24,6 +24,7 @@ function cameraModal(props) { const fluoriteRef = useRef(); const ipcRef = useRef(); const cascadeRef = useRef(); + const nvrRef = useRef(); const [isloading, setloading] = useState(false); //是否显示loading const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 const [okText, setokText] = useState("确定"); //ok弹框text 右边 @@ -91,8 +92,20 @@ function cameraModal(props) { }); }); } else if (clickNum == 2) { - console.log("22222222222222"); - close(); + //NVR摄像头 + let data = nvrRef.current.NVRcameraList.map((v) => { + return { streamid: v.streamid, name: v.name, cloudControl: v.support }; + }); + dispatch( + equipmentWarehouse.postCameraNvr({ + serialNo: nvrRef.current.equipmentNum, + data: data, + }) + ).then((res) => { + if (res.success) { + onReset(); + } + }); } else if (clickNum == 3) { //IPC网络摄像头 ipcRef.current.ipcCameraForm().then((values) => { @@ -145,9 +158,25 @@ function cameraModal(props) { close(); } else if (clickNum == 4) { close(); + } else { + nvrRef.current.resetFluoriteCamera(); + close(); + } + } + //重置 + function reset() { + if (clickNum == 1) { + fluoriteRef.current.resetFluoriteCamera(); + fluoriteRef.current.toempty(); + } else if (clickNum == 3) { + ipcRef.current.resetIpcCamera(); + ipcRef.current.toempty(); + } else if (clickNum == 4) { + } else { + nvrRef.current.resetFluoriteCamera(); } - close(); } + function toTest() { if (clickNum == 1) { fluoriteRef.current @@ -386,7 +415,7 @@ function cameraModal(props) { cursor: "pointer", marginRight: 16, }} - onClick={onReset} + onClick={reset} > ) : clickNum == 2 ? ( - + ) : clickNum == 3 ? ( { + NVRcameraList + ? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { + suppressScrollX: true, + })) + : ""; + }, [NVRcameraList]); + useEffect(() => { + const videoStreaming = document.getElementById("video_streaming"); + if (videoStreaming && equipmentScrollbar) { + equipmentScrollbar.update(); + } + }); + function NvrChangeName(e, index) { + //nvr摄像头视频流获取修改名称 + let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); + 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 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 toggle(e,index){//nvr云台支持 - let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) - NvrchangeList[index].support=e.target.checked - setNVRcameraList(NvrchangeList) - e.stopPropagation() + function inputchange(e, index) { + //nvr摄像头名称修改 + let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); + console.log(e); + NvrchangeList[index].name = e; + setNVRcameraList(NvrchangeList); } - function getVideoList(){ - form.current.validate().then(values=>{//表单校验成功 - let chooseList=[] - let nvrCameraList=[{ - id:10, - name:'南昌县1', - number:'111111111111111111', - support:false, - change:false, - },{ - id:20, - name:'南昌县2', - number:'222222222222222222', - support:false, - change:false, - },{ - id:30, - name:'南昌县3', - number:'333333333333333333', - support:false, - change:false, - },{ - id:40, - name:'南昌县4', - number:'444444444444444444', - support:false, - change:false, - }] - setNVRcameraList(nvrCameraList) - for (let index = 0; index < nvrCameraList.length; index++) { - chooseList.push(nvrCameraList[index].id) - } - setNvrCheckList(chooseList) - setIsAllChoose(true) - }) - .catch(errors=>{//表单校验失败 - console.log('errors',errors); - }) + function toggle(e, index) { + //nvr云台支持 + let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); + NvrchangeList[index].support = e.target.checked; + setNVRcameraList(NvrchangeList); + e.stopPropagation(); } - function allChoose(e){//全选/全不选 - let chooseList=[] - if(NVRcameraList.length==nvrCheckList.length){ - setNvrCheckList([]) - setIsAllChoose(false) - } - else{ + function getVideoList() { + form.current + .validate() + .then((values) => { + //表单校验成功 + let chooseList = []; + let valuess = JSON.parse(JSON.stringify(values)); + valuess.streamId = values.serialNo; + delete valuess.serialNo; + 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); + }); + }) + .catch((errors) => { + //表单校验失败 + console.log("errors", errors); + }); + } + 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) + chooseList.push(NVRcameraList[index].id); } - setNvrCheckList(chooseList) - setIsAllChoose(true) + setNvrCheckList(chooseList); + setIsAllChoose(true); } } - function playVideo(e) {//nvr播放视频 - console.log('22222222222222222'); - e.stopPropagation() + function playVideo(e) { + //nvr播放视频 + console.log("22222222222222222"); + e.stopPropagation(); } - // useImperativeHandle(cRef,() => ({//传给父组件方法 - // //aa即为子组件暴露给父组件的方法 - // getDate : form.current.validate, - // // resetFluoriteCamera : form.current.reset - // })) + useImperativeHandle(nvrRef, () => ({ + //传给父组件方法 + //aa即为子组件暴露给父组件的方法 + resetFluoriteCamera: form.current.reset, + equipmentNum: equipmentNum, + NVRcameraList: NVRcameraList.filter((v) => + nvrCheckList.some((e) => e == v.id) + ), + })); return ( <> -
{setEquipmentNum(values.equipmentNum)}} - getFormApi={formApi => form.current = formApi}> -
- - - {NVRcameraList.length>0?
- { + setEquipmentNum(values.serialNo); + }} + getFormApi={(formApi) => (form.current = formApi)} + > +
+ + + {NVRcameraList.length > 0 ? ( +
+ allChoose(e)} - aria-label="全选"> + onChange={(e) => allChoose(e)} + aria-label="全选" + > 全选 -
:''} -
+
+ ) : ( + "" + )} +
- { setNvrCheckList(nvrCheck); - // console.log('11111111111',nvrCheck); - if(NVRcameraList.length==nvrCheck.length){ - setIsAllChoose(true) - } - else{ - setIsAllChoose(false) + 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)}>:item.name}
-
- NvrChangeName(e,index)}/> -
-
-
设备编号:{item.number}
-
- playVideo(e)}/> - toggle(e,index)} - aria-label="单选" - > - 云台支持 - -
- - } - style={{width:280,border:'1px solid #F9F9F9',}}> -
- - )):''} + }} + > +
+ {NVRcameraList.length > 0 + ? NVRcameraList.map((item, index) => ( + + +
+
+ 通道名称: + {item.change ? ( + inputchange(e, index)} + onBlur={() => nvronBlur(index)} + > + ) : ( + item.name + )} +
+
+ NvrChangeName(e, index)} + /> +
+
+
+ 设备编号:{item.parent} +
+
+ playVideo(e)} + /> + toggle(e, index)} + aria-label="单选" + > + 云台支持 + +
+
+ } + style={{ width: 280, border: "1px solid #F9F9F9" }} + > + + )) + : ""} +
@@ -179,4 +293,4 @@ function mapStateToProps(state) { }; } -export default connect(mapStateToProps)(nvrCamera); \ No newline at end of file +export default connect(mapStateToProps)(nvrCamera); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx index 0f2745f..374c715 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx @@ -57,9 +57,9 @@ function nvrModal(props){ setokText('确认'); setcancelText('上一步'); setloading(false); - }, 2000); - }, 2000) - }, 2000); + }, 1000); + }, 1000) + }, 1000); }) .catch(errors=>{//表单校验失败 console.log('errors',errors); @@ -120,7 +120,7 @@ function nvrModal(props){ ]}/> - + `${value}`.replace(/\D/g, '')} hideButtons={true} maxLength='15' field='regionCode' label='行政区区码:' initValue={nvrData.regionCode||''} placeholder='请输入行政区区码' style={{ width:149 }}/> {nvrDetails @@ -236,7 +235,7 @@ function SideSheets(props) {
{nvrDetails diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx index d41e37d..31f7bd0 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/skeletonScreen.jsx @@ -1,5 +1,7 @@ +import React from "react"; import { Table } from "@douyinfe/semi-ui"; + export function skeletonScreen(line, columns) { const data = () => { let str = []; 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 61de67e..a9addd4 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 @@ -169,7 +169,7 @@ const CameraHeader = (props) => { position="topRight" onConfirm={() => { dispatch( - equipmentWarehouse.delCamera({ cameraId: row.id }) + equipmentWarehouse.delCamera(row.id ) ).then(() => { equipmentGetCamera(); }); @@ -215,8 +215,12 @@ const CameraHeader = (props) => { }, { title: "云台支持", - dataIndex: "port", + dataIndex: "cloudControl", key: "support", + render: (text, r, index) => { + return r.cloudControl ? "支持" : "不支持"; + }, + }, { title: "内存卡信息", diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx index 7e68ce1..e10c379 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx @@ -154,6 +154,7 @@ 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 : ""; }, @@ -162,6 +163,10 @@ const NvrHeader = (props) => { title: "添加账号", dataIndex: "createUserId", key: "accountNumber", + render: (_, r, index) => { + let createUserName = r.createUser; + return createUserName ? createUserName.name : ""; + }, }, { title: "通道数", @@ -528,7 +533,10 @@ const NvrHeader = (props) => {
- + s)} dataSource={equipmentWarehouseNvr.data} diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index 755780a..b104540 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js @@ -18,12 +18,15 @@ export const ApiTable = { getCamera: "camera/project", // 获取摄像头列表 putForbidden: "camera/banned", //禁用摄像头 - delCamera:"camera", //删除摄像头 + delCamera:"camera/{cameraId}", //删除摄像头 getCameraDetails: "camera/{cameraId}/detail", //获取摄像头详情 getCameraKind: "camera/kind", //获取摄像头种类列表 getAbility: "/camera/ability", //获取摄像头能力列表 postCameraYingshi: "camera/create/yingshi", //创建萤石摄像头 postCameraIpc: "camera/create/ipc", //创建IPC摄像头 + getVideoStreaming:"camera/nvr_stream", //获取NVR视频流 + postCameraNvr:"camera/create/nvr", //记录NVR摄像头 + }; export const RouteTable = {