From 72f2e341b4d1b10a0b24f08a0f3a922f245cd719 Mon Sep 17 00:00:00 2001
From: deartibers <947466799@qq.com>
Date: Wed, 27 Apr 2022 16:18:56 +0800
Subject: [PATCH] =?UTF-8?q?nvr=E7=AE=A1=E7=90=86=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/images/background/location.png     | Bin 0 -> 481 bytes
 .../components/nvrModal.jsx                   |  85 ++++++++++++++++++
 .../equipmentWarehouse/containers/nvr.jsx     |  76 ++++++++--------
 3 files changed, 124 insertions(+), 37 deletions(-)
 create mode 100644 code/VideoAccess-VCMP/web/client/assets/images/background/location.png

diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/location.png b/code/VideoAccess-VCMP/web/client/assets/images/background/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..233c47287cf2e31c76eac0d377a8ad7e7dc8cb71
GIT binary patch
literal 481
zcmV<70UrK|P)<h;3K|Lk000e1NJLTq000mG000yS1^@s6gkrsS00001b5ch_0Itp)
z=>Px$n@L1LR5(wSlusz8Q5431k4a%`Rw64)7BtotEF`g^Z<56<Y}AxyBTf0Y__AQB
zh-4w<D`mctY;A^V(u^GoDXE#V6H;<?zTWrk?Rr0PclX|Ne)pVvpXZ8Tm{~J00(1cl
zz$0)D>;g-YuF@%rCuUX&EC8dxhY%diZ-H@1i}8L5U}hCS5$GwC7%t}}efPx}Fbzz-
zF}ZXmkdsu9nR%aQKvf3dAK<OkX6#)8O%9j=CWC-GU`WzV)ZQ2{A6J};%{kx*Xb%7r
zlIGHDX0{1@4&v4waGg=&CrQ5pz!zXG030~rKBNDBNk0O>1dtB^#}2pv8iS2PphMC_
z^voZDzd&6Ox95N@U@+sBPk>dR8u$v-XT;1pU;rq*Lj#F;fmR2&3jYA^f%lA}q`p{*
zEx=Ep=8c5^K${yYZKhseJ5t_joExB1(yzn|NmFJyVB-}xx<b1p9mF|F1u2OC1<M(-
z^(XC<w4W~T1t5C&Z_(cn$NHx-;NA#(%LGIax3}B;2^f~-UU)Ie0wRbz@Kn-Dxm$e(
X#7m0rYtrom00000NkvXXu0mjfB%jFv

literal 0
HcmV?d00001

diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
index e69de29..e4a64fb 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
+++ b/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
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
index 46c2683..da7951b 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
+++ b/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>
         </>
     );