From 1ebc1f15ae11b905b7a8601760db2da0ee7580da Mon Sep 17 00:00:00 2001
From: deartibers <947466799@qq.com>
Date: Wed, 27 Apr 2022 17:12:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0nvr=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nvrModal.jsx                   | 135 +++++++++++-------
 1 file changed, 81 insertions(+), 54 deletions(-)

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 e4a64fb..0105cdb 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
@@ -1,13 +1,27 @@
 import React, { useState } from 'react'
-import { Modal, Button,Form,Row,Col,Divider } from '@douyinfe/semi-ui';
-
+import { Modal, Button,Form,Row,Col,Divider,Spin } from '@douyinfe/semi-ui';
+import { IconTickCircle } from '@douyinfe/semi-icons';
 function nvrModal(props){
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);//是否显示弹框
+  const [isloading,setloading] = useState(false);//是否显示loading
+  const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
+  const [step,setstep] = useState(0)
   function showDialog() {//打开弹框
     setVisible(true);
   }
   function handleOk() {//点击弹框确定
-    setVisible(false);
+    // setVisible(false);
+    setloading(true);
+    setTimeout(() => {
+      setloadingTip('...接受成功')
+      setTimeout(()=>{
+        setloadingTip('已完成')
+        setTimeout(() => {
+          setstep(1);
+          setloading(false);
+        }, 2000);
+      },2000)
+    }, 2000);
   }
   function handleAfterClose(){//在关闭之后
     console.log('after');
@@ -20,6 +34,8 @@ function nvrModal(props){
         <div onClick={showDialog}>{props.modalName}</div>
         <Modal
             title="添加NVR"
+            okText="测试校验"
+            // cancelText 取消按钮
             visible={visible}
             onOk={handleOk}
             height={386}
@@ -27,56 +43,67 @@ function nvrModal(props){
             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>
+          <Spin tip={loadingTip} spinning={isloading}>
+            {step==0?<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>:
+            <div >
+              <div style={{marginTop:50,display: 'flex', justifyContent: 'center'}}>
+                <IconTickCircle style={{color:'#04B234',fontSize:60}}/>
+              </div>
+              <div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>
+                已完成NVR设备测试和校验，是否确认添加？
+              </div>
+            </div>
+            }
+          </Spin>
         </Modal>
     </>
   );