摄像头添加

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js

@@ -40,3 +40,14 @@ export function getCamera(query) {
         reducer: { name: "nvrDetails" },
       });
   }
+  export function getAbility() {
+    return (dispatch) =>
+      basicAction({
+        type: "get",
+        dispatch: dispatch,
+        actionType: "GET_ABILITY",
+        url: `${ApiTable.getAbility}`,
+        msg: { option: "获取摄像头能力列表" },
+        reducer: { name: "equipmentWarehouseCamera" },
+      });
+  }

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx

@@ -16,11 +16,6 @@ function cameraModal(props){
   const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
   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=[//循环摄像头列表
     {
@@ -28,11 +23,6 @@ function cameraModal(props){
       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',
@@ -43,6 +33,11 @@ function cameraModal(props){
       img:'/assets/images/background/cascade.png',
       title:'级联摄像头',
       text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送'
+    },{
+      id:2,
+      img:'/assets/images/background/nvr.png',
+      title:'NVR摄像头',
+      text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头'
     },
   ]
   const [showcameraList,setcameraList]=useState(cameraList.slice(0,3));//轮播图
@@ -56,7 +51,6 @@ function cameraModal(props){
     }else if(clickNum==4){
       console.log('44444444444444');
     }
-    // Notification.success(opts)
     // close();
   }
   function handleAfterClose(){//在关闭之后
@@ -76,9 +70,11 @@ function cameraModal(props){
   }
   function onReset(){
     if(clickNum==1){
-      fluoriteRef.current.resetFluoriteCamera()
+      fluoriteRef.current.resetFluoriteCamera();
+      fluoriteRef.current.toempty();
     }else if(clickNum==3){
-      ipcRef.current.resetIpcCamera()
+      ipcRef.current.resetIpcCamera();
+      ipcRef.current.toempty();
     }else if(clickNum==4){
 
     }

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx

@@ -56,8 +56,14 @@ function fluoriteCamera({cRef}){
   useImperativeHandle(cRef,() => ({//传给父组件方法
     //子组件暴露给父组件的方法
     fluoriteCameraForm : form.current.validate,
-    resetFluoriteCamera : form.current.reset
+    resetFluoriteCamera : form.current.reset,
+    toempty:empty,
   }))
+  function empty(){
+    setcloud(null)
+    setvoice(null)
+    setSwitching(null)
+  }
   return (
     <>
         <Form 
@@ -109,6 +115,12 @@ function fluoriteCamera({cRef}){
                     </div>:''}
                   </Form.Radio>
                 </Form.RadioGroup>
+                {/* 内存 */}
+                <Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:307 }}>
+                  {memoryList.map((item,index)=>(
+                    <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
+                  ))}
+                  </Form.Select>
                 {/* 安装位置 */}
                 <div style={{display:'flex'}}>
                   <Form.Input field='Use11rName1312' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:270 }}
@@ -192,17 +204,9 @@ function fluoriteCamera({cRef}){
                     </div>:''}
                   </Form.Radio>
                 </Form.RadioGroup>
-                {/* 内存 */}
-                <div style={{display:'flex'}}>
-                  <Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:92 }}>
-                  {memoryList.map((item,index)=>(
-                    <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
-                  ))}
-                  </Form.Select>
                 {/* 语音支持 */}
-                  <div style={{marginLeft:18}}>
                 <Form.RadioGroup 
-                      labelWidth= '76px'
+                  // labelWidth= '76px'
                   label="语音支持:" 
                   field='role2' 
                   type='pureCard' 
@@ -234,8 +238,11 @@ function fluoriteCamera({cRef}){
                     </div>:''}
                   </Form.Radio>
                 </Form.RadioGroup>
-                  </div>
+                {/* 设备名称 */}
-                </div>
+                <Form.Input field='serialNumber' label='设备序列号:' initValue={''} placeholder='请输入设备序列号' style={{ width:307 }}
+                rules={[
+                  { required: true, message: '请输入设备序列号' }
+                ]}/>
                 {/* RTMP地址接入 */}
                 <TextArea
                   style={{ width:320, height: 90 }}

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx

@@ -55,8 +55,13 @@ function ipcCamera({aRef}){
   useImperativeHandle(aRef,() => ({//传给父组件方法
     //子组件暴露给父组件的方法
     ipcCameraForm : form.current.validate,
-    resetIpcCamera : form.current.reset
+    resetIpcCamera : form.current.reset,
+    toempty:empty,
   }))
+  function empty(){
+    setcloud(null)
+    setvoice(null)
+  }
   return (
     <>
       <Form 
@@ -72,6 +77,11 @@ function ipcCamera({aRef}){
                 { required: true, message: '请输入设备名称' }
               ]}/>
               <Form.Input field='Use11rName11' label='设备厂家:' placeholder='请选择设备厂家' style={{ width:307 }}/>
+              <Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:307 }}>
+                {memoryList.map((item,index)=>(
+                  <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
+                ))}
+              </Form.Select>
               <div style={{display:'flex'}}>
                 <Form.Input field='Use11rName1312' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:270 }}
                   validate={positionForm}
@@ -93,8 +103,27 @@ function ipcCamera({aRef}){
                   <img src="../../../assets/images/background/location.png" width={16} height={20}/>
                 </div>
               </div>
+              <div style={{display:'flex',}}>
                 <div>
-                <Form.Input field='UserName11' label='设备编号接入:' initValue={''} placeholder='请输入设备编号' style={{ width:307 }}/>
+                  <Form.Select label="设备类型:" field='business23' placeholder='请选择摄像头类型' style={{ width:160 }}
+                  rules={[
+                    { required: true, message: '请选择摄像头类型' }
+                  ]}>
+                    {memoryList.map((item,index)=>(
+                      <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
+                    ))}
+                  </Form.Select>
+                </div>
+                <div style={{marginLeft:7}}>
+                  <Form.Select noLabel='true' field='business244' placeholder='请选择能力' style={{ width:140 }}
+                  rules={[
+                    { required: true, message: '请选择能力' }
+                  ]}>
+                    {memoryList.map((item,index)=>(
+                      <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
+                    ))}
+                  </Form.Select>
+                </div>
               </div>
             </Col>
             <Col span={12}>
@@ -133,15 +162,7 @@ function ipcCamera({aRef}){
                   </div>:''}
                 </Form.Radio>
               </Form.RadioGroup>
-              <div style={{display:'flex'}}>
-                <Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:92 }}>
-                {memoryList.map((item,index)=>(
-                  <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
-                ))}
-                </Form.Select>
-                <div  style={{marginLeft:18}}>
               <Form.RadioGroup 
-                    labelWidth= '76px'
                 label="语音支持:" 
                 field='role2' 
                 type='pureCard' 
@@ -173,7 +194,8 @@ function ipcCamera({aRef}){
                   </div>:''}
                 </Form.Radio>
               </Form.RadioGroup>
-                </div>
+              <div>
+                <Form.Input field='UserName11' label='设备编号接入:' initValue={''} placeholder='请输入设备编号' style={{ width:307 }}/>
               </div>
               <TextArea
                 style={{ width:320, height: 90 }}
@@ -182,30 +204,9 @@ function ipcCamera({aRef}){
                 placeholder='请输入RTMP地址接入'
               />
             </Col>
-            <Col span={18}>
+            {/* <Col span={18}>
-              <div style={{display:'flex',}}>
+              
-                <div>
+            </Col> */}
-                  <Form.Select label="设备类型:" field='business23' placeholder='请选择摄像头类型' style={{ width:160 }}
-                  rules={[
-                    { required: true, message: '请选择摄像头类型' }
-                  ]}>
-                    {memoryList.map((item,index)=>(
-                      <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
-                    ))}
-                  </Form.Select>
-                </div>
-                <div style={{marginLeft:7}}>
-                  <Form.Select noLabel='true' field='business244' placeholder='请选择能力' style={{ width:140 }}
-                  rules={[
-                    { required: true, message: '请选择能力' }
-                  ]}>
-                    {memoryList.map((item,index)=>(
-                      <Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option>
-                    ))}
-                  </Form.Select>
-                </div>
-              </div>
-            </Col>
           </Row>
         </Form>
     </>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx

@@ -1,10 +1,10 @@
 import React, { useState ,useRef} from 'react'
 import { connect } from "react-redux";
-import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
+import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui';
 import { IconTickCircle } from '@douyinfe/semi-icons';
 function nvrModal(props){
   const {modalName}=props
-  const { dispatch, actions, user, loading,vender,close } = props;
+  const { dispatch, actions,vender,close } = props;
   const nvrData = props.nvrData||{}//修改时传来的值
   const form = useRef();
   const [visible, setVisible] = useState(false);//是否显示弹框
@@ -14,11 +14,6 @@ function nvrModal(props){
   const [okText,setokText] = useState('测试校验')//ok弹框text  右边
   const [cancelText,setcancelText] = useState('取消')//取消弹框text  左边
   const [formObj,setformObj] = useState()//接口入参
-  const opts ={//添加完成确认后通知
-    title:'Hi',
-    content:'添加成功',
-    duration:3
-  }
   function showDialog() {//打开弹框
     setVisible(true);
   }
@@ -72,7 +67,6 @@ function nvrModal(props){
     }
     else{
       dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => {
-        Notification.success(opts)
         setVisible(false);
         close();
       })

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx

@@ -559,7 +559,7 @@ const CameraHeader = (props) => {
           </div>
         </div>
         <Table
-          columns={setupp}
+          columns={setupp.filter(s => s)}
           dataSource={equipmentWarehouseCamera.data}
           bordered={false}
           empty="暂无数据"

code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@@ -18,6 +18,8 @@ export const ApiTable = {
     getCamera:"camera/project",   //  获取摄像头列表
     putForbidden:"camera/banned",   //禁用摄像头
     getCameraDetails:"camera/{cameraId}/detail",  //获取摄像头详情
+    getAbility:"/camera/ability"//获取摄像头能力列表
+
     
 };