From 20daa99a471f0496ff0c2c771ed68e799c1cec91 Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Wed, 18 May 2022 14:57:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=91=84=E5=83=8F=E5=A4=B4?= =?UTF-8?q?=E5=BC=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/cameraModal.jsx | 292 ++++++------------ .../components/cameraModal.less | 3 + .../components/cascadeCamera.jsx | 192 ++++++++++++ .../components/fluoriteCamera.jsx | 262 ++++++++++++++++ .../components/ipcCamera.jsx | 224 ++++++++++++++ .../components/nvrCamera.jsx | 182 +++++++++++ 6 files changed, 965 insertions(+), 190 deletions(-) create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx 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 f9cd3c6..27b1ff9 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,20 +1,21 @@ -import React, { useState ,useRef} from 'react' +import React, { useState ,useRef,useEffect} from 'react' import { connect } from "react-redux"; -import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui'; +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 "./cameraModal.less"; function cameraModal(props){ - const { TextArea } = Form; const {modalName,visible,close}=props - const form = useRef(); - // const [visible, setVisible] = useState(false);//是否显示弹框 + const fluoriteRef = useRef(); + const ipcRef = useRef(); + const cascadeRef = useRef(); const [isloading,setloading] = useState(false);//是否显示loading const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值 - const [step,setstep] = useState(0)//第几步 const [okText,setokText] = useState('确定')//ok弹框text 右边 const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边 - const [cloud,setcloud] = useState('')//云台支持 - const [voice,setvoice] = useState('')//语音支持 const opts ={//添加完成确认后通知 title:'Hi', content:'添加成功', @@ -44,67 +45,103 @@ function cameraModal(props){ text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送' }, ] - const [showcameraList,setcameraList]=useState(cameraList.slice(0,3)); + const [showcameraList,setcameraList]=useState(cameraList.slice(0,3));//轮播图 function handleOk() {//点击弹框确定 右边按钮 - if(step==0){ - form.current.validate() - .then(values=>{//表单校验成功 - setloading(true); - setTimeout(() => { - setloadingTip('...接受成功') - setTimeout(()=>{ - setloadingTip('已完成') - setTimeout(() => { - setstep(1); - setokText('确认'); - setcancelText('上一步'); - setloading(false); - }, 2000); - }, 2000) - }, 2000); - }) - .catch(errors=>{//表单校验失败 - console.log('errors',errors); - }) - - } - else{ - Notification.success(opts) - // setVisible(false); - close(); + 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'); } + // Notification.success(opts) + // close(); } function handleAfterClose(){//在关闭之后 - setstep(0); - setokText('测试校验'); - setcancelText('取消'); + } function handleCancel() {//点击弹框取消 左边按钮 - if(step==0){ - // setVisible(false); - close(); - } - else{ - setstep(0); - setokText('测试校验'); - setcancelText('取消'); - } - } - function handleLocation(){//高德经纬度 - window.open('https://lbs.amap.com/tools/picker','_blank') + close(); } function handleChoose(id){//选择摄像头接入类型 setclickNum(id); } - function turnLift(){ + function turnLift(){//轮播图向左 setcameraList(cameraList.slice(0,3)) } - function turnRight(){ + function turnRight(){//轮播图向右 setcameraList(cameraList.slice(1,4)) } + function onReset(){ + if(clickNum==1){ + fluoriteRef.current.resetFluoriteCamera() + }else if(clickNum==3){ + ipcRef.current.resetIpcCamera() + }else if(clickNum==4){ + + } + } + 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 ( <> - {/*
{modalName=='add'?'添加NVR':'修改'}
*/} -
+
配置属性
-
+ {clickNum!==2?
+ }} onClick={onReset}> 1 重置
@@ -192,145 +229,20 @@ function cameraModal(props){ justifyContent: 'center', alignItems: 'center', cursor: "pointer", - }}> + }} onClick={toTest}> 1 测试
-
+
:''}
-
console.log(values)} - getFormApi={formApi => form.current = formApi}> - - - - - - { - console.log(checked.target.value); - if(checked.target.value=='yes'){ - setcloud('yes') - } - else{ - setcloud('no') - } - }}> - -
- 支持 -
- {cloud=='yes'?
- 1 -
:''} - - -
- 不支持 -
- {cloud=='no'?
- 1 -
:''} - - - - - - - -
- - Semi - 轻颜相机 - 今日头条 - -
- { - console.log(checked.target.value); - if(checked.target.value=='yes'){ - setvoice('yes') - } - else{ - setvoice('no') - } - }}> - -
- 支持 -
- {voice=='yes'?
- 1 -
:''} - - -
- 不支持 -
- {voice=='no'?
- 1 -
:''} - - -
-
- - -
- -
- -
-
-
- -
- - -