添加摄像头页面

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 (
+    <>
+      {/* <div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div> */}
+      <Modal
+          title={modalName=='add'?'添加摄像头':'修改摄像头'}
+          okText={okText}
+          cancelText={cancelText} //取消按钮
+          visible={visible}
+          onOk={handleOk}
+          width={921}
+          afterClose={handleAfterClose}
+          onCancel={handleCancel}
+      >
+        <Spin tip={loadingTip} spinning={isloading}>
+          <div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:8}}>
+            <div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>接入类型</div>
+            <div style={{marginTop:5,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
+            <IconChevronLeft 
+            style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginLeft:29,cursor: "pointer",}}
+            onClick={turnLift}/>
+            <div 
+              style={{display:'flex',alignItems:'center',height:146}}>
+              {showcameraList.map((item,index)=>(
+              <div 
+              key={item.id}
+              style={{
+                width:266,
+                height:146,
+                marginRight:12,
+                border:clickNum===item.id?'1px solid #1859C1':'1px solid #F9F9F9',
+                borderRadius:3,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                cursor: "pointer",
+                position: 'relative'}}
+                onClick={()=>handleChoose(item.id)}>
+                <div 
+                style={{marginTop:5,
+                height:65,
+                width:116,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center'}}>
+                  <img
+                    src={item.img}
+                    alt="设置"
+                  />
+                </div>
+                <div style={{marginTop:2,fontSize:14,color:'rgba(0, 0, 0, 0.85)',}}>{item.title}</div>
+                <div style={{width:210,height:34,marginTop:9,fontSize:12,color:'rgba(0, 0, 0, 0.45)',textAlign:'center'}}>{item.text}</div>  
+                {clickNum===item.id?<div style={{    position: 'absolute', top: '-3px', right: '-5px'}}>
+                  <img src="/assets/images/background/topchoose.png" alt="1" />
+                </div>:''}
+              </div>
+              ))}
+            </div>
+            <IconChevronRight 
+            style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginRight:18,cursor: "pointer",}}
+            onClick={turnRight}/>
+            </div>
+          </div>
+          <div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:48,display:'flex',alignItems: 'center',justifyContent: 'space-between'}}>
+            <div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>配置属性</div>
+            <div style={{display:'flex',marginRight:43,}}>
+              <div style={{
+                height:30,
+                width:64,
+                border:'1px solid #D9D9D9',
+                borderRadius: '3px',
+                color:'rgba(0, 0, 0, 0.65)',
+                display:'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: "pointer",
+                marginRight:16
+                }}>
+                <img src="/assets/images/background/Reset.png" alt="1" style={{marginRight:4}}/>
+                重置
+              </div>
+              <div style={{
+                height:30,
+                width:64,
+                border:'1px solid #1859C1',
+                borderRadius: '3px',
+                color:'#1859C1',
+                display:'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: "pointer",
+                }}>
+                <img src="/assets/images/background/test.png" alt="1" style={{marginRight:4}} />
+                测试
+              </div>
+            </div>
+          </div>
+        </Spin>
+      </Modal>
+    </>
+  );
+}
+
+export default nvrModal

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 (
     <>
       <div style={{ position: "" }}>
         <video
-          id="nvrBanner"
+          id="cameraBanner"
           autoPlay
           loop
           muted
           style={{ width: "100%", objectFit: "cover", height: 171 }}
-          src="/assets/video/nvr_banner.mp4"
+          src="/assets/video/camera_banner.mp4"
           type="video/mp4"
         />
         <div style={{ position: "absolute", top: 12 }}>
           <div
             style={{
-              fontSize: 22 + "px",
+              fontSize: 22,
-              paddingTop: 15 + "px",
+              paddingTop: 15,
-              marginLeft: 21 + "px",
+              marginLeft: 21,
             }}
           >
             摄像头管理
           </div>
           <div
             style={{
-              fontSize: 14 + "px",
+              fontSize: 14,
-              paddingTop: 18 + "px",
+              paddingTop: 18,
-              marginLeft: 20 + "px",
+              marginLeft: 20,
             }}
           >
-            对NVR（网络硬盘录像机）设备节点的管理
+            对监控摄像设备设备添加、修改、删除的硬件管理页面。
           </div>
           <div
             style={{
-              fontSize: 14 + "px",
+              fontSize: 14,
-              marginTop: 28 + "px",
+              marginTop: 28,
-              marginLeft: 21 + "px",
+              marginLeft: 21,
-              width: 89 + "px",
+              width: 89,
-              height: 32 + "px",
+              height: 32,
               lineHeight: 32 + "px",
               textAlign: "center",
               backgroundColor: "#D9EAFF",
               color: "#1859C1",
               cursor: "pointer",
             }}
+            onClick={() => {
+              setModalName('add')
+              setCameraModal(true);
+            }}
           >
-            {/* <NvrModal modalName="add" /> */}
+            添加摄像头
           </div>
         </div>
       </div>
+      {cameraModal?
+      <CameraModal
+      visible={true}
+      close={() => {
+        setCameraModal(false);
+        // setEditData(null)
+      }}
+      modalName={modalName} />:''}
     </>
   );
 };