nvr管理头部弹框

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

@@ -0,0 +1,85 @@
+import React, { useState } from 'react'
+import { Modal, Button,Form,Row,Col,Divider } from '@douyinfe/semi-ui';
+
+function nvrModal(props){
+  const [visible, setVisible] = useState(false);
+  function showDialog() {//打开弹框
+    setVisible(true);
+  }
+  function handleOk() {//点击弹框确定
+    setVisible(false);
+  }
+  function handleAfterClose(){//在关闭之后
+    console.log('after');
+  }
+  function handleCancel() {//点击弹框取消
+    setVisible(false);
+  }
+  return (
+    <>
+        <div onClick={showDialog}>{props.modalName}</div>
+        <Modal
+            title="添加NVR"
+            visible={visible}
+            onOk={handleOk}
+            height={386}
+            width={607}
+            afterClose={handleAfterClose} //>=1.16.0
+            onCancel={handleCancel}
+        >
+          <div style={{paddingLeft:16+'px'}}>
+            <Form 
+              labelPosition='left'
+              labelAlign='left'
+              labelWidth= '90px'
+              onValueChange={values=>console.log(values)}>
+              <Row>
+                <Col span={12}>
+                  <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
+                  rules={[
+                    { required: true, message: '请输入设备编号' }
+                  ]}/>
+                </Col>
+                <Col span={12}>
+                  <Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
+                </Col>
+                <Col span={24}>
+                  <Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
+                   rules={[
+                    { required: true, message: '请输入设备名称、常用项目或位置定义' }
+                  ]}/>
+                </Col>
+                <Col span={24}>
+                  <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}>
+                    <Form.Select.Option value="abc">Semi</Form.Select.Option>
+                    <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
+                    <Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
+                </Form.Select>
+                </Col>
+                <Col span={24} style={{display:'flex',alignItems:'center'}}>
+                  <Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
+                   rules={[
+                    { required: true, message: '请输入或拾取高德经纬度坐标' }
+                  ]}/>
+                  <div style={{
+                    width:32,
+                    height:32,
+                    background:"#1859C1",
+                    marginLeft:4+'px',
+                    display:'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    cursor: "pointer",
+                    borderRadius: 3+'px'}}>
+                    <img src="../../../assets/images/background/location.png" width={16} height={20}/>
+                  </div>
+                </Col>
+              </Row>
+            </Form>
+          </div>
+        </Modal>
+    </>
+  );
+}
+
+export default nvrModal

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

@@ -2,49 +2,51 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { Card } from "@douyinfe/semi-ui";
 import "../style.less";
+import NvrModal from "../components/nvrModal"
 
 const NvrHeader = (props) => {
     const { dispatch, actions, user, loading } = props;
     return (
         <>
-            {/* <div className="NvrHeader"> */}
-            <video id='nvrBanner' autoPlay loop muted style={{ width: '100%', objectFit: 'cover', height: 120 }} src='/assets/video/nvr_banner.mp4' type='video/mp4'>
-                <div
-                    style={{
-                        fontSize: 22 + "px",
-                        paddingTop: 15 + "px",
-                        marginLeft: 21 + "px",
-                    }}
-                >
-                    NVR管理
+            <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",
+                        }}
+                    >
+                        NVR管理
+                    </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="添加NVR"/>
+                    </div>
                 </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",
-                    }}
-                >
-                    添加NVR
-                </div>
-            </video>
-            {/* </div> */}
+            </div>
             <Card title="筛选条件" headerLine={false}></Card>
         </>
     );