diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/Reset.png b/code/VideoAccess-VCMP/web/client/assets/images/background/Reset.png new file mode 100644 index 0000000..daa37b8 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/Reset.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/cascade.png b/code/VideoAccess-VCMP/web/client/assets/images/background/cascade.png new file mode 100644 index 0000000..4ea4de5 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/cascade.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/formchoose.png b/code/VideoAccess-VCMP/web/client/assets/images/background/formchoose.png new file mode 100644 index 0000000..6dc2dfe Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/formchoose.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/ipc.png b/code/VideoAccess-VCMP/web/client/assets/images/background/ipc.png new file mode 100644 index 0000000..e5efb11 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/ipc.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/nvr.png b/code/VideoAccess-VCMP/web/client/assets/images/background/nvr.png new file mode 100644 index 0000000..d9cb1e3 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/nvr.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/test.png b/code/VideoAccess-VCMP/web/client/assets/images/background/test.png new file mode 100644 index 0000000..48096a0 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/test.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/topchoose.png b/code/VideoAccess-VCMP/web/client/assets/images/background/topchoose.png new file mode 100644 index 0000000..44c8165 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/topchoose.png differ diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/ysy.png b/code/VideoAccess-VCMP/web/client/assets/images/background/ysy.png new file mode 100644 index 0000000..243d245 Binary files /dev/null and b/code/VideoAccess-VCMP/web/client/assets/images/background/ysy.png differ 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 new file mode 100644 index 0000000..0d19d87 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx @@ -0,0 +1,202 @@ +import React, { useState ,useRef} from 'react' +import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui'; +import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons'; +function nvrModal(props){ + const {modalName,visible,close}=props + const form = useRef(); + // const [visible, setVisible] = useState(false);//是否显示弹框 + 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 opts ={//添加完成确认后通知 + title:'Hi', + content:'添加成功', + duration:3 + } + const [clickNum,setclickNum] = useState(1);//点击的第几个 + const cameraList=[//循环摄像头列表 + { + id:1, + img:'/assets/images/background/ysy.png', + title:'萤石云平台摄像头', + text:'通过萤石云平台rtmp地址配置完成推流的平台摄像头。' + },{ + id:2, + img:'/assets/images/background/nvr.png', + title:'NVR摄像头', + text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头' + },{ + id:3, + img:'/assets/images/background/ipc.png', + title:'IPC网络摄像头', + text:'通过网络与监控设备直连完成视频流推送的摄像头设备' + },{ + id:4, + img:'/assets/images/background/cascade.png', + title:'级联摄像头', + text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送' + }, + ] + 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(); + } + } + function handleAfterClose(){//在关闭之后 + setstep(0); + setokText('测试校验'); + setcancelText('取消'); + } + function handleCancel() {//点击弹框取消 左边按钮 + if(step==0){ + // setVisible(false); + close(); + } + else{ + setstep(0); + setokText('测试校验'); + setcancelText('取消'); + } + } + function handleLocation(){//高德经纬度 + console.log('handleLocationhandleLocation'); + } + function handleChoose(id){//选择摄像头接入类型 + setclickNum(id); + } + function turnLift(){ + setcameraList(cameraList.slice(0,3)) + } + function turnRight(){ + setcameraList(cameraList.slice(1,4)) + } + return ( + <> + {/*
{modalName=='add'?'添加NVR':'修改'}
*/} + + +
+
接入类型
+
+ +
+ {showcameraList.map((item,index)=>( +
handleChoose(item.id)}> +
+ 设置 +
+
{item.title}
+
{item.text}
+ {clickNum===item.id?
+ 1 +
:''} +
+ ))} +
+ +
+
+
+
配置属性
+
+
+ 1 + 重置 +
+
+ 1 + 测试 +
+
+
+ + + + ); +} + +export default nvrModal \ No newline at end of file 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 b735465..050cba6 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 @@ -2,57 +2,72 @@ import React, { useState, useEffect } from "react"; import { connect } from "react-redux"; import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui"; import "../style.less"; +import CameraModal from "../components/cameraModal"; const CameraHeader = (props) => { + const [cameraModal,setCameraModal] = useState(false) + const [modalName,setModalName] = useState('') return ( <>
+ {cameraModal? + { + setCameraModal(false); + // setEditData(null) + }} + modalName={modalName} />:''} ); };