nvr弹出框交互

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

@@ -3,6 +3,7 @@ import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
 import { IconTickCircle } from '@douyinfe/semi-icons';
 function nvrModal(props){
   const {modalName}=props
+  const nvrData = props.nvrData||{}
   const form = useRef();
   const [visible, setVisible] = useState(false);//是否显示弹框
   const [isloading,setloading] = useState(false);//是否显示loading
@@ -66,9 +67,9 @@ function nvrModal(props){
   }
   return (
     <>
-      <div onClick={showDialog}>{modalName}</div>
+      <div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div>
       <Modal
-          title="添加NVR"
+          title={modalName=='add'?'添加NVR':'修改NVR'}
           okText={okText}
           cancelText={cancelText} //取消按钮
           visible={visible}
@@ -87,7 +88,7 @@ function nvrModal(props){
               getFormApi={formApi => form.current = formApi}>
               <Row>
                 <Col span={12}>
-                  <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
+                  <Form.Input field='UserName' label='设备编号:' initValue={nvrData.name||''} placeholder='请输入设备编号' style={{ width:149 }}
                   rules={[
                     { required: true, message: '请输入设备编号' }
                   ]}/>

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

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
+import "../style.less";
+
+const CameraHeader = (props) => {
+  return (
+    <>
+      <div style={{ position: "" }}>
+        <video
+          id="nvrBanner"
+          autoPlay
+          loop
+          muted
+          style={{ width: "100%", objectFit: "cover", height: 171 }}
+          src="/assets/video/nvr_banner.mp4"
+          type="video/mp4"
+        />
+        <div style={{ position: "absolute", top: 12 }}>
+          <div
+            style={{
+              fontSize: 22 + "px",
+              paddingTop: 15 + "px",
+              marginLeft: 21 + "px",
+            }}
+          >
+            摄像头管理
+          </div>
+          <div
+            style={{
+              fontSize: 14 + "px",
+              paddingTop: 18 + "px",
+              marginLeft: 20 + "px",
+            }}
+          >
+            对NVR（网络硬盘录像机）设备节点的管理
+          </div>
+          <div
+            style={{
+              fontSize: 14 + "px",
+              marginTop: 28 + "px",
+              marginLeft: 21 + "px",
+              width: 89 + "px",
+              height: 32 + "px",
+              lineHeight: 32 + "px",
+              textAlign: "center",
+              backgroundColor: "#D9EAFF",
+              color: "#1859C1",
+              cursor: "pointer",
+            }}
+          >
+            {/* <NvrModal modalName="add" /> */}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+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)(CameraHeader);

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/index.js

@@ -1,5 +1,5 @@
 'use strict';
 
 import Nvr from './nvr';
-
+import Camera from './camera';
-export { Nvr };
+export { Nvr,Camera };

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

@@ -67,7 +67,7 @@ const NvrHeader = (props) => {
         //   console.log(row);
         return (
           <>
-            <Button theme="borderless"><NvrModal row1={row} modalName="修改" /></Button>
+            <Button theme="borderless"><NvrModal nvrData={row} modalName="revise" /></Button>
             <Button theme="borderless">查看</Button>
             <Button theme="borderless">删除</Button>
           </>
@@ -149,7 +149,7 @@ const NvrHeader = (props) => {
               cursor: "pointer",
             }}
           >
-            <NvrModal modalName="添加NVR" />
+            <NvrModal modalName="add" />
           </div>
         </div>
       </div>

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

@@ -1,5 +1,5 @@
 'use strict';
-import { Nvr, } from './containers';
+import { Nvr,Camera } from './containers';
 
 export default [{
     type: 'inner',
@@ -16,7 +16,7 @@ export default [{
         },{
             path: '/camera',
             key: 'camera',
-            component: Nvr,
+            component: Camera,
             breadcrumb: '摄像头管理',
         }]
     }

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/style.less

@@ -1,5 +0,0 @@
-.NvrHeader{
-  background-image: url(/assets/images/background/nvr_banner.png);
-  height: 171px;
-  background-size:100% 100%;
-}