You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
4.5 KiB
112 lines
4.5 KiB
import React, { useState } from 'react'
|
|
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 [isloading,setloading] = useState(false);//是否显示loading
|
|
const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
|
|
const [step,setstep] = useState(0)
|
|
function showDialog() {//打开弹框
|
|
setVisible(true);
|
|
}
|
|
function handleOk() {//点击弹框确定
|
|
// setVisible(false);
|
|
setloading(true);
|
|
setTimeout(() => {
|
|
setloadingTip('...接受成功')
|
|
setTimeout(()=>{
|
|
setloadingTip('已完成')
|
|
setTimeout(() => {
|
|
setstep(1);
|
|
setloading(false);
|
|
}, 2000);
|
|
},2000)
|
|
}, 2000);
|
|
}
|
|
function handleAfterClose(){//在关闭之后
|
|
console.log('after');
|
|
}
|
|
function handleCancel() {//点击弹框取消
|
|
setVisible(false);
|
|
}
|
|
return (
|
|
<>
|
|
<div onClick={showDialog}>{props.modalName}</div>
|
|
<Modal
|
|
title="添加NVR"
|
|
okText="测试校验"
|
|
// cancelText 取消按钮
|
|
visible={visible}
|
|
onOk={handleOk}
|
|
height={386}
|
|
width={607}
|
|
afterClose={handleAfterClose} //>=1.16.0
|
|
onCancel={handleCancel}
|
|
>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default nvrModal
|