添加nvr弹框

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,7 +43,8 @@ function nvrModal(props){
             afterClose={handleAfterClose} //>=1.16.0
             onCancel={handleCancel}
         >
-          <div style={{paddingLeft:16+'px'}}>
+          <Spin tip={loadingTip} spinning={isloading}>
+            {step==0?<div style={{paddingLeft:16+'px'}}>
               <Form 
                 labelPosition='left'
                 labelAlign='left'
@@ -76,7 +93,17 @@ function nvrModal(props){
                   </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>
     </>
   );