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}>
重置
@@ -192,145 +229,20 @@ function cameraModal(props){
justifyContent: 'center',
alignItems: 'center',
cursor: "pointer",
- }}>
+ }} onClick={toTest}>
测试
-
+
:''}
-
+ {clickNum==1?
+
+ :clickNum==2?
+
+ :clickNum==3?
+
+ :}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
index a53e2f0..62a91f9 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
@@ -3,4 +3,7 @@
}
.semi-radio-cardRadioGroup_checked .voice{
color: #1859C1;
+}
+.semi-radio-cardRadioGroup_checked .switching{
+ color: #1859C1;
}
\ No newline at end of file
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
new file mode 100644
index 0000000..725c1be
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
@@ -0,0 +1,192 @@
+import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react'
+import { connect } from "react-redux";
+import { Form,Row,Col,CheckboxGroup, Checkbox,Radio,Input } from '@douyinfe/semi-ui';
+import { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons';
+import "./cameraModal.less";
+function cascadeCamera({dRef}){
+ const form = useRef();
+ 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'
+ }
+ ])//内存卡列表
+ const [nvrCheckList, setNvrCheckList] = useState([]);//nvr视频流多选
+ const [NVRcameraList,setNVRcameraList]=useState([])//nvr视频流列表
+ const [isAllChoose,setIsAllChoose]=useState(false)//全选
+ const [equipmentNum,setEquipmentNum]=useState('')//nvr视频编号
+ 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 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 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()
+ }
+ useImperativeHandle(dRef,() => ({//传给父组件方法
+ //子组件暴露给父组件的方法
+ cascadeCameraForm : form.current.validate,
+ resetCascadeCamera : form.current.reset,
+ setNVRcameraList : setNVRcameraList,
+ setNvrCheckList : setNvrCheckList,
+ setIsAllChoose : setIsAllChoose,
+ }))
+ return (
+ <>
+
+ >
+ );
+}
+function mapStateToProps(state) {
+ const { auth, global, members } = state;
+ return {
+ loading: members.isRequesting,
+ user: auth.user,
+ actions: global.actions,
+ members: members.data,
+ };
+}
+
+export default connect(mapStateToProps)(cascadeCamera);
\ No newline at end of file
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
new file mode 100644
index 0000000..4a1ebf0
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
@@ -0,0 +1,262 @@
+import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react'
+import { connect } from "react-redux";
+import { Form,Row,Col} from '@douyinfe/semi-ui';
+import "./cameraModal.less";
+function fluoriteCamera({cRef}){
+ const { TextArea } = Form;
+ const form = useRef();
+ 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')
+ }
+ 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,() => ({//传给父组件方法
+ //子组件暴露给父组件的方法
+ fluoriteCameraForm : form.current.validate,
+ resetFluoriteCamera : form.current.reset
+ }))
+ return (
+ <>
+
+ >
+ );
+}
+function mapStateToProps(state) {
+ const { auth, global, members } = state;
+ return {
+ loading: members.isRequesting,
+ user: auth.user,
+ actions: global.actions,
+ members: members.data,
+ };
+}
+
+export default connect(mapStateToProps)(fluoriteCamera);
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx
new file mode 100644
index 0000000..013fb37
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx
@@ -0,0 +1,224 @@
+import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react'
+import { connect } from "react-redux";
+import { Form,Row,Col } from '@douyinfe/semi-ui';
+import "./cameraModal.less";
+function ipcCamera({aRef}){
+ const { TextArea } = Form;
+ const form = useRef();
+ const [cloud,setcloud] = useState('')//云台支持
+ const [voice,setvoice] = 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')
+ }
+ 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(aRef,() => ({//传给父组件方法
+ //子组件暴露给父组件的方法
+ ipcCameraForm : form.current.validate,
+ resetIpcCamera : form.current.reset
+ }))
+ return (
+ <>
+
+ >
+ );
+}
+function mapStateToProps(state) {
+ const { auth, global, members } = state;
+ return {
+ loading: members.isRequesting,
+ user: auth.user,
+ actions: global.actions,
+ members: members.data,
+ };
+}
+
+export default connect(mapStateToProps)(ipcCamera);
\ No newline at end of file
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
new file mode 100644
index 0000000..0036165
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx
@@ -0,0 +1,182 @@
+import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react'
+import { connect } from "react-redux";
+import { Form,Row,Col,Button,CheckboxGroup, Checkbox,Radio,Input } from '@douyinfe/semi-ui';
+import { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons';
+import "./cameraModal.less";
+function nvrCamera({cRef}){
+ const form = useRef();
+ const [nvrCheckList, setNvrCheckList] = useState([]);//nvr视频流多选
+ const [NVRcameraList,setNVRcameraList]=useState([])//nvr视频流列表
+ const [isAllChoose,setIsAllChoose]=useState(false)//全选
+ const [equipmentNum,setEquipmentNum]=useState('')//nvr视频编号
+ 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 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 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 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()
+ }
+ // useImperativeHandle(cRef,() => ({//传给父组件方法
+ // //aa即为子组件暴露给父组件的方法
+ // getDate : form.current.validate,
+ // // resetFluoriteCamera : form.current.reset
+ // }))
+ return (
+ <>
+
+ >
+ );
+}
+function mapStateToProps(state) {
+ const { auth, global, members } = state;
+ return {
+ loading: members.isRequesting,
+ user: auth.user,
+ actions: global.actions,
+ members: members.data,
+ };
+}
+
+export default connect(mapStateToProps)(nvrCamera);
\ No newline at end of file