From 205f8f177e3a31a213f68fc321b5a92abf042e9e Mon Sep 17 00:00:00 2001 From: wenlele Date: Wed, 1 Jun 2022 20:56:58 +0800 Subject: [PATCH] =?UTF-8?q?=E8=90=A4=E7=9F=B3=E4=BA=91=E6=91=84=E5=83=8F?= =?UTF-8?q?=E5=A4=B4=E5=92=8CIPC=E6=91=84=E5=83=8F=E5=A4=B4=E7=9A=84?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0,=E6=91=84=E5=83=8F=E5=A4=B4=E5=88=A0?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../equipmentWarehouse/actions/camera.js | 57 +- .../equipmentWarehouse/actions/nvr.js | 12 + .../components/cameraModal.jsx | 620 +++++--- .../components/fluoriteCamera.jsx | 692 ++++++--- .../components/ipcCamera.jsx | 562 ++++--- .../components/skeletonScreen.jsx | 13 +- .../equipmentWarehouse/containers/camera.jsx | 1291 +++++++++-------- .../equipmentWarehouse/containers/nvr.jsx | 36 +- .../web/client/src/utils/webapi.js | 45 +- 9 files changed, 1994 insertions(+), 1334 deletions(-) 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 08c2e2c..8ae3ece 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 @@ -24,11 +24,23 @@ export function putForbidden(data, forbidden) { actionType: "PUT_FORBIDDEN", data, url: `${ApiTable.putForbidden}`, - msg: { option: forbidden ? "启用":"禁用" }, //禁用摄像头 + msg: { option: forbidden ? "启用" : "禁用" }, //禁用摄像头 reducer: {}, }); } +export function delCamera(query) { + return (dispatch) => + basicAction({ + type: "del", + dispatch: dispatch, + actionType: "DEL_CAMERA", + query, + url: `${ApiTable.delCamera}`, + msg: { option: "删除摄像头" }, //删除摄像头 + reducer: {}, + }); +} export function getCameraDetails(orgId) { return (dispatch) => basicAction({ @@ -40,6 +52,19 @@ export function getCameraDetails(orgId) { reducer: { name: "nvrDetails" }, }); } + +export function getCameraKind() { + return (dispatch) => + basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_CAMERA_KIND", + url: `${ApiTable.getCameraKind}`, + msg: { option: "" }, //获取摄像头种类列表 + reducer: { name: "CameraKind" }, + }); +} + export function getAbility() { return (dispatch) => basicAction({ @@ -47,7 +72,33 @@ export function getAbility() { dispatch: dispatch, actionType: "GET_ABILITY", url: `${ApiTable.getAbility}`, - msg: { option: "获取摄像头能力列表" }, - reducer: { name: "equipmentWarehouseCamera" }, + msg: { option: "" }, //获取摄像头能力列表 + reducer: { name: "CameraAbility" }, + }); +} + +export function postCameraYingshi(data) { + return (dispatch) => + basicAction({ + type: "post", + dispatch: dispatch, + data, + actionType: "POST_CAMERA_YINGSHI", + url: `${ApiTable.postCameraYingshi}`, + msg: { option: "" }, //创建萤石摄像头 + reducer: { name: "" }, + }); +} + +export function postCameraIpc(data) { + return (dispatch) => + basicAction({ + type: "post", + dispatch: dispatch, + data, + actionType: "POST_CAMERA_IPC", + url: `${ApiTable.postCameraIpc}`, + msg: { option: "" }, //创建IPC摄像头 + reducer: { name: "" }, }); } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js index 7b47f41..1c45006 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js @@ -77,3 +77,15 @@ export function getVender() { reducer: { name: "vender" }, }); } + +export function getExport() { + return (dispatch) => + basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_EXPORT", + url: `${ApiTable.getExport}`, + msg: { option: "导出" }, //导出 + reducer: { name: "" }, + }); +} 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 4df61da..926dc75 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 @@ -1,244 +1,447 @@ -import React, { useState ,useRef,useEffect} from 'react' +import React, { useState, useRef, useEffect } from "react"; import { connect } from "react-redux"; -import { Modal,Spin } from '@douyinfe/semi-ui'; -import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons'; +import { Modal, Spin } from "@douyinfe/semi-ui"; +import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons"; import FluoriteCamera from "./fluoriteCamera"; -import NvrCamera from './nvrCamera'; -import IpcCamera from './ipcCamera'; -import CascadeCamera from './cascadeCamera'; +import NvrCamera from "./nvrCamera"; +import IpcCamera from "./ipcCamera"; +import CascadeCamera from "./cascadeCamera"; import "./cameraModal.less"; -function cameraModal(props){ - const {modalName,visible,close}=props + +function cameraModal(props) { + const { + dispatch, + actions, + modalName, + visible, + close, + venderList, + CameraKind, + CameraAbility, + cameraData, //修改时传来的值 + } = props; + const { equipmentWarehouse } = actions; const fluoriteRef = useRef(); const ipcRef = useRef(); const cascadeRef = useRef(); - const [isloading,setloading] = useState(false);//是否显示loading - const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值 - const [okText,setokText] = useState('确定')//ok弹框text 右边 - const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边 - const [clickNum,setclickNum] = useState(1);//点击的第几个 - const cameraList=[//循环摄像头列表 + const [isloading, setloading] = useState(false); //是否显示loading + const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 + const [okText, setokText] = useState("确定"); //ok弹框text 右边 + const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 + const [clickNum, setclickNum] = useState( + cameraData.type == "yingshi" + ? 1 + : cameraData.type == "ipc" + ? 3 + : cameraData.type == "nvr" + ? 2 + : cameraData.type == "cascade" + ? 4 + : 1 + ); //点击的第几个 + + useEffect(() => { + dispatch(equipmentWarehouse.getCameraKind()); + dispatch(equipmentWarehouse.getAbility()); + }, []); + const cameraList = [ + //循环摄像头列表 + { + id: 1, + img: "/assets/images/background/ysy.png", + title: "萤石云平台摄像头", + text: "通过萤石云平台rtmp地址配置完成推流的平台摄像头。", + }, + { + id: 3, + img: "/assets/images/background/ipc.png", + title: "IPC网络摄像头", + text: "通过网络与监控设备直连完成视频流推送的摄像头设备", + }, + { + id: 4, + img: "/assets/images/background/cascade.png", + title: "级联摄像头", + text: "通过GB/T28181协议级联的平台摄像头，常用于平台对接推送", + }, { - id:1, - img:'/assets/images/background/ysy.png', - title:'萤石云平台摄像头', - text:'通过萤石云平台rtmp地址配置完成推流的平台摄像头。' - },{ - id:3, - img:'/assets/images/background/ipc.png', - title:'IPC网络摄像头', - text:'通过网络与监控设备直连完成视频流推送的摄像头设备' - },{ - id:4, - img:'/assets/images/background/cascade.png', - title:'级联摄像头', - text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送' - },{ - id:2, - img:'/assets/images/background/nvr.png', - title:'NVR摄像头', - text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头' + id: 2, + img: "/assets/images/background/nvr.png", + title: "NVR摄像头", + text: "通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头", }, - ] - const [showcameraList,setcameraList]=useState(cameraList.slice(0,3));//轮播图 - function handleOk() {//点击弹框确定 右边按钮 - if(clickNum==1){ - console.log('1111111111111'); - }else if(clickNum==2){ - console.log('22222222222222'); - }else if(clickNum==3){ - console.log('33333333333333'); - }else if(clickNum==4){ - console.log('44444444444444'); + ]; + const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); //轮播图 + function handleOk() { + //点击弹框确定 右边按钮 + if (clickNum == 1) { + //萤石云平台摄像头 + fluoriteRef.current.fluoriteCameraForm().then((values) => { + values = JSON.parse(JSON.stringify(values)); + values.longitude = values.position.split(",")[0]; + values.latitude = values.position.split(",")[1]; + delete values.position; + if (cameraData.id) { + values.id = cameraData.id; + } + dispatch(equipmentWarehouse.postCameraYingshi(values)).then((res) => { + if (res.success) { + onReset(); + } + }); + }); + } else if (clickNum == 2) { + console.log("22222222222222"); + close(); + } else if (clickNum == 3) { + //IPC网络摄像头 + ipcRef.current.ipcCameraForm().then((values) => { + values = JSON.parse(JSON.stringify(values)); + values.longitude = values.position.split(",")[0]; + values.latitude = values.position.split(",")[1]; + delete values.position; + if (cameraData.id) { + values.id = cameraData.id; + } + console.log(values); + dispatch(equipmentWarehouse.postCameraIpc(values)).then((res) => { + if (res.success) { + onReset(); + } + }); + }); + } else if (clickNum == 4) { + console.log("44444444444444"); + close(); } - // close(); } - function handleAfterClose(){//在关闭之后 - + function handleAfterClose() { + //在关闭之后 } - function handleCancel() {//点击弹框取消 左边按钮 - close(); + function handleCancel() { + onReset(); + //点击弹框取消 左边按钮 } - function handleChoose(id){//选择摄像头接入类型 + function handleChoose(id) { + //选择摄像头接入类型 setclickNum(id); } - function turnLift(){//轮播图向左 - setcameraList(cameraList.slice(0,3)) + function turnLift() { + //轮播图向左 + setcameraList(cameraList.slice(0, 3)); } - function turnRight(){//轮播图向右 - setcameraList(cameraList.slice(1,4)) + function turnRight() { + //轮播图向右 + setcameraList(cameraList.slice(1, 4)); } - function onReset(){ - if(clickNum==1){ + function onReset() { + if (clickNum == 1) { fluoriteRef.current.resetFluoriteCamera(); fluoriteRef.current.toempty(); - }else if(clickNum==3){ + close(); + } else if (clickNum == 3) { ipcRef.current.resetIpcCamera(); ipcRef.current.toempty(); - }else if(clickNum==4){ - + close(); + } else if (clickNum == 4) { + close(); } + close(); } - function toTest(){ - if(clickNum==1){ - fluoriteRef.current.fluoriteCameraForm().then(values=>{//表单校验成功 - console.log('111111111',values); - }) - .catch(errors=>{//表单校验失败 - console.log('errors',errors); - }) - }else if(clickNum==3){ - ipcRef.current.ipcCameraForm().then(values=>{//表单校验成功 - console.log('111111111',values); - }) - .catch(errors=>{//表单校验失败 - console.log('errors',errors); - }) - }else if(clickNum==4){ - cascadeRef.current.cascadeCameraForm() - .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, - }] - cascadeRef.current.setNVRcameraList(nvrCameraList) - for (let index = 0; index < nvrCameraList.length; index++) { - chooseList.push(nvrCameraList[index].id) - } - cascadeRef.current.setNvrCheckList(chooseList) - cascadeRef.current.setIsAllChoose(true) - }) - .catch(errors=>{//表单校验失败 - console.log('errors',errors); - }) + function toTest() { + if (clickNum == 1) { + fluoriteRef.current + .fluoriteCameraForm() + .then((values) => { + //表单校验成功 + console.log("111111111", values); + }) + .catch((errors) => { + //表单校验失败 + console.log("errors", errors); + }); + } else if (clickNum == 3) { + ipcRef.current + .ipcCameraForm() + .then((values) => { + //表单校验成功 + console.log("111111111", values); + }) + .catch((errors) => { + //表单校验失败 + console.log("errors", errors); + }); + } else if (clickNum == 4) { + cascadeRef.current + .cascadeCameraForm() + .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, + }, + ]; + cascadeRef.current.setNVRcameraList(nvrCameraList); + for (let index = 0; index < nvrCameraList.length; index++) { + chooseList.push(nvrCameraList[index].id); + } + cascadeRef.current.setNvrCheckList(chooseList); + cascadeRef.current.setIsAllChoose(true); + }) + .catch((errors) => { + //表单校验失败 + console.log("errors", errors); + }); } } - + return ( <> -
-
接入类型
-
- -
- {showcameraList.map((item,index)=>( -
+
handleChoose(item.id)}> -
- 设置 -
-
{item.title}
-
{item.text}
- {clickNum===item.id?
- 1 -
:''} -
- ))} + marginLeft: 29, + color: "#1859C1", + fontSize: 14, + fontWeight: 500, + }} + > + 接入类型
- +
+ +
+ {showcameraList.map((item, index) => ( +
handleChoose(item.id)} + > +
+ 设置 +
+
+ {item.title} +
+
+ {item.text} +
+ {clickNum === item.id ? ( +
+ 1 +
+ ) : ( + "" + )} +
+ ))} +
+
-
-
配置属性
- {clickNum!==2?
-
- 1 - 重置 -
-
- 1 - 测试 +
+
+ 配置属性 +
+ {clickNum !== 2 ? ( +
+
+ 1 + 重置 +
+
+ 1 + 测试 +
-
:''} + ) : ( + "" + )}
- {clickNum==1? - - :clickNum==2? - - :clickNum==3? - - :} + {clickNum == 1 ? ( + + ) : clickNum == 2 ? ( + + ) : clickNum == 3 ? ( + + ) : ( + + )}
@@ -246,13 +449,14 @@ function cameraModal(props){ ); } function mapStateToProps(state) { - const { auth, global, members } = state; + const { auth, global, members, CameraKind, CameraAbility } = state; return { loading: members.isRequesting, user: auth.user, actions: global.actions, - members: members.data, + CameraKind: CameraKind.data || [], + CameraAbility: CameraAbility.data || [], }; } -export default connect(mapStateToProps)(cameraModal); \ No newline at end of file +export default connect(mapStateToProps)(cameraModal); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx index 1616577..b246bb4 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx @@ -1,258 +1,474 @@ -import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react' +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 } from "@douyinfe/semi-ui"; import "./cameraModal.less"; -function fluoriteCamera({cRef}){ +function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) { const { TextArea } = Form; const form = useRef(); - const [cloud,setcloud] = useState('')//云台支持 - const [voice,setvoice] = useState('')//语音支持 - const [switching,setSwitching] = useState('')//高清切换 - const [memoryList,setMemoryList] = useState([ + const [cloud, setcloud] = useState(""); //云台支持 + const [voice, setvoice] = useState(""); //语音支持 + const [switching, setSwitching] = useState(""); //高清切换 + const [memoryList, setMemoryList] = useState([ { - id:1, - value:'8g' - },{ - id:2, - value:'16g' - },{ - id:3, - value:'32g' - },{ - id:4, - value:'64g' - },{ - id:5, - value:'128g' - },{ - id:6, - value:'256g' - },{ - id:7, - value:'>256g' - } - ])//内存卡列表 - function handleLocation(){//高德经纬度 - window.open('https://lbs.amap.com/tools/picker','_blank') + id: 1, + value: "8g", + }, + { + id: 2, + value: "16g", + }, + { + id: 3, + value: "32g", + }, + { + id: 4, + value: "64g", + }, + { + id: 5, + value: "128g", + }, + { + id: 6, + value: "256g", + }, + { + id: 7, + value: ">256g", + }, + ]); //内存卡列表 + + useEffect(() => { + setcloud(cameraData.cloudControl || ""); + setvoice(cameraData.voice || ""); + setSwitching(cameraData.highDefinition || ""); + }, []); + function handleLocation() { + //高德经纬度 + window.open("https://lbs.amap.com/tools/picker", "_blank"); } - function positionForm(val){//安装位置校验 - let zz = /^(-?\d+)(\.\d+)?$/ - if(!val){ - return '请输入或拾取高德经纬度坐标' - } - else if(val.split(',').length!=2){ - return '请输入格式为116.354169,39.835452的经纬度坐标' - } - else if(!zz.test(val.split(',')[0])){ - return '只能填写数字' - } - else if(!zz.test(val.split(',')[1])){ - return '只能填写数字' - } - else{ - return '' + function positionForm(val) { + //安装位置校验 + let zz = /^(-?\d+)(\.\d+)?$/; + if (!val) { + return "请输入或拾取高德经纬度坐标"; + } else if (val.split(",").length != 2) { + return "请输入格式为116.354169,39.835452的经纬度坐标"; + } else if (!zz.test(val.split(",")[0])) { + return "只能填写数字"; + } else if (!zz.test(val.split(",")[1])) { + return "只能填写数字"; + } else { + return ""; } } - useImperativeHandle(cRef,() => ({//传给父组件方法 + useImperativeHandle(cRef, () => ({ + //传给父组件方法 //子组件暴露给父组件的方法 - fluoriteCameraForm : form.current.validate, - resetFluoriteCamera : form.current.reset, - toempty:empty, - })) - function empty(){ - setcloud(null) - setvoice(null) - setSwitching(null) + fluoriteCameraForm: form.current.validate, + resetFluoriteCamera: form.current.reset, + toempty: empty, + })); + function empty() { + setcloud(""); + setvoice(""); + setSwitching(""); } return ( <> -
console.log(values)} - getFormApi={formApi => form.current = formApi}> - - - {/* 设备名称 */} - console.log(values)} + initValues={{ + name: cameraData ? cameraData.name : "", + highDefinition: cameraData ? cameraData.highDefinition : "", + memoryCard: cameraData ? cameraData.memoryCard : "", + position: cameraData.longitude + ? `${cameraData.longitude},${cameraData.latitude}` + : "", + kindId: cameraData ? cameraData.kindId : "", + abilityId: cameraData + ? cameraData.cameraAbilities + ? cameraData.cameraAbilities.map((item) => item.id) + : "" + : "", + cloudControl: cameraData ? cameraData.cloudControl : "", + voice: cameraData ? cameraData.voice : "", + serialNo: cameraData ? cameraData.serialNo : "", + rtmp: cameraData ? cameraData.rtmp : "", + }} + getFormApi={(formApi) => (form.current = formApi)} + > + + + {/* 设备名称 */} + + {/* 高清切换 */} + { + if (checked.target.value == true) { + setSwitching(true); + } else { + setSwitching(false); + } + }} + > + +
+ 支持 +
+ {switching == true ? ( +
+ 1 +
+ ) : ( + "" + )} + + +
+ 不支持 +
+ {switching == false && switching !== "" ? ( +
+ 1 +
+ ) : ( + "" + )} + + + {/* 内存 */} + + {memoryList.map((item, index) => ( + + {item.value} + + ))} + + {/* 安装位置 */} +
+ - {/* 高清切换 */} - { - console.log(checked.target.value); - if(checked.target.value=='yes'){ - setSwitching('yes') - } - else{ - setSwitching('no') - } - }}> - -
- 支持 -
- {switching=='yes'?
- 1 -
:''} - - -
- 不支持 -
- {switching=='no'?
- 1 -
:''} - - - {/* 内存 */} - - {memoryList.map((item,index)=>( - {item.value} - ))} - - {/* 安装位置 */} -
- -
- + { required: true, message: "请输入或拾取高德经纬度坐标" }, + ]} + /> +
+ +
+
+ {/* 设备类型 */} + + + {CameraKind.map((item, index) => ( + + {item.kind} + + ))} + + + + {CameraAbility.map((item, index) => ( + + {item.ability} + + ))} + + + + {/* 云台支持 */} + { + if (checked.target.value == true) { + setcloud(true); + } else { + setcloud(false); + } + }} + > + +
+ 支持 +
+ {cloud == true ? ( +
+ 1
+ ) : ( + "" + )} + + +
+ 不支持
- {/* 设备类型 */} -
-
- - {memoryList.map((item,index)=>( - {item.value} - ))} - + {cloud == false && cloud !== "" ? ( +
+ 1
-
- - {memoryList.map((item,index)=>( - {item.value} - ))} - + ) : ( + "" + )} + + + {/* 语音支持 */} + { + if (checked.target.value == true) { + setvoice(true); + } else { + setvoice(false); + } + }} + > + +
+ 支持 +
+ {voice == true ? ( +
+ 1
+ ) : ( + "" + )} + + +
+ 不支持
- - - {/* 云台支持 */} - { - console.log(checked.target.value); - if(checked.target.value=='yes'){ - setcloud('yes') - } - else{ - setcloud('no') - } - }}> - -
- 支持 -
- {cloud=='yes'?
- 1 -
:''} - - -
- 不支持 -
- {cloud=='no'?
- 1 -
:''} - - - {/* 语音支持 */} - { - console.log(checked.target.value); - if(checked.target.value=='yes'){ - setvoice('yes') - } - else{ - setvoice('no') - } - }}> - -
- 支持 -
- {voice=='yes'?
- 1 -
:''} - - -
- 不支持 -
- {voice=='no'?
- 1 -
:''} - - - {/* 设备名称 */} - - {/* RTMP地址接入 */} -