free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加nvr弹框

release_0.0.1
deartibers 3 years ago
parent
72f2e341b4
commit
1ebc1f15ae
1 changed files with 81 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx

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

@ -1,13 +1,27 @@
import React, { useState } from 'react' 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){ 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() {//打开弹框 function showDialog() {//打开弹框
setVisible(true); setVisible(true);
} }
function handleOk() {//点击弹框确定 function handleOk() {//点击弹框确定
setVisible(false); // setVisible(false);
setloading(true);
setTimeout(() => {
setloadingTip('...接受成功')
setTimeout(()=>{
setloadingTip('已完成')
setTimeout(() => {
setstep(1);
setloading(false);
}, 2000);
},2000)
}, 2000);
} }
function handleAfterClose(){//在关闭之后 function handleAfterClose(){//在关闭之后
console.log('after'); console.log('after');
@ -20,6 +34,8 @@ function nvrModal(props){
<div onClick={showDialog}>{props.modalName}</div> <div onClick={showDialog}>{props.modalName}</div>
<Modal <Modal
title="添加NVR" title="添加NVR"
okText="测试校验"
// cancelText 取消按钮
visible={visible} visible={visible}
onOk={handleOk} onOk={handleOk}
height={386} height={386}
@ -27,56 +43,67 @@ function nvrModal(props){
afterClose={handleAfterClose} //>=1.16.0 afterClose={handleAfterClose} //>=1.16.0
onCancel={handleCancel} onCancel={handleCancel}
> >
<div style={{paddingLeft:16+'px'}}> <Spin tip={loadingTip} spinning={isloading}>
<Form {step==0?<div style={{paddingLeft:16+'px'}}>
labelPosition='left' <Form
labelAlign='left' labelPosition='left'
labelWidth= '90px' labelAlign='left'
onValueChange={values=>console.log(values)}> labelWidth= '90px'
<Row> onValueChange={values=>console.log(values)}>
<Col span={12}> <Row>
<Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }} <Col span={12}>
rules={[ <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
{ required: true, message: '请输入设备编号' } rules={[
]}/> { required: true, message: '请输入设备编号' }
</Col> ]}/>
<Col span={12}> </Col>
<Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/> <Col span={12}>
</Col> <Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
<Col span={24}> </Col>
<Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }} <Col span={24}>
rules={[ <Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
{ required: true, message: '请输入设备名称、常用项目或位置定义' } rules={[
]}/> { required: true, message: '请输入设备名称、常用项目或位置定义' }
</Col> ]}/>
<Col span={24}> </Col>
<Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}> <Col span={24}>
<Form.Select.Option value="abc">Semi</Form.Select.Option> <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}>
<Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option> <Form.Select.Option value="abc">Semi</Form.Select.Option>
<Form.Select.Option value="toutiao">今日头条</Form.Select.Option> <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
</Form.Select> <Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
</Col> </Form.Select>
<Col span={24} style={{display:'flex',alignItems:'center'}}> </Col>
<Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }} <Col span={24} style={{display:'flex',alignItems:'center'}}>
rules={[ <Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
{ required: true, message: '请输入或拾取高德经纬度坐标' } rules={[
]}/> { required: true, message: '请输入或拾取高德经纬度坐标' }
<div style={{ ]}/>
width:32, <div style={{
height:32, width:32,
background:"#1859C1", height:32,
marginLeft:4+'px', background:"#1859C1",
display:'flex', marginLeft:4+'px',
justifyContent: 'center', display:'flex',
alignItems: 'center', justifyContent: 'center',
cursor: "pointer", alignItems: 'center',
borderRadius: 3+'px'}}> cursor: "pointer",
<img src="../../../assets/images/background/location.png" width={16} height={20}/> borderRadius: 3+'px'}}>
</div> <img src="../../../assets/images/background/location.png" width={16} height={20}/>
</Col> </div>
</Row> </Col>
</Form> </Row>
</div> </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> </Modal>
</> </>
); );

Write Preview
Loading…
Cancel
Save