摄像头添加

2 years ago · 5a86abc520
7 changed files with 146 additions and 135 deletions
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
+++ b/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" },
+      });
+  }
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
+++ b/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){

    }
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
+++ b/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 }}
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx
+++ b/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}>
-              <div style={{display:'flex',}}>
-                <div>
-                  <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={18}>
+              
+            </Col> */}
          </Row>
        </Form>
    </>
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
+++ b/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();
      })
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
+++ b/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="暂无数据"
--- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
+++ b/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"//获取摄像头能力列表
+
    
 };