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.
198 lines
7.2 KiB
198 lines
7.2 KiB
import React, { useState ,useRef} from 'react'
|
|
import { connect } from "react-redux";
|
|
import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
|
|
import { IconTickCircle } from '@douyinfe/semi-icons';
|
|
function nvrModal(props){
|
|
const {modalName}=props
|
|
const { dispatch, actions, user, loading,vender,close } = props;
|
|
const nvrData = props.nvrData||{}//修改时传来的值
|
|
// console.log('nvrDatanvrDatanvrData',nvrData);
|
|
const form = useRef();
|
|
const [visible, setVisible] = useState(false);//是否显示弹框
|
|
const [isloading,setloading] = useState(false);//是否显示loading
|
|
const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
|
|
const [step,setstep] = useState(0)//第几步
|
|
const [okText,setokText] = useState('测试校验')//ok弹框text 右边
|
|
const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边
|
|
const [formObj,setformObj] = useState()//接口入参
|
|
const opts ={//添加完成确认后通知
|
|
title:'Hi',
|
|
content:'添加成功',
|
|
duration:3
|
|
}
|
|
function showDialog() {//打开弹框
|
|
setVisible(true);
|
|
}
|
|
function positionForm(val){
|
|
let zz = /^(-?\d+)(\.\d+)?$/
|
|
if(!val){
|
|
return '请输入或拾取高德经纬度坐标'
|
|
}
|
|
else if(val.split(',').length!=2){
|
|
return '请输入格式为116.354169,39.835452的经纬度坐标'
|
|
}
|
|
else if(!zz.test(val.split(',')[0])){
|
|
return '只能填写数字'
|
|
}
|
|
else if(!zz.test(val.split(',')[1])){
|
|
return '只能填写数字'
|
|
}
|
|
else{
|
|
return ''
|
|
}
|
|
}
|
|
function handleOk() {//点击弹框确定 右边按钮
|
|
if(step==0){
|
|
form.current.validate()
|
|
.then(values=>{//表单校验成功
|
|
let valuesObj=JSON.parse(JSON.stringify(values))
|
|
valuesObj.longitude=values.position.split(',')[0]
|
|
valuesObj.latitude=values.position.split(',')[1]
|
|
delete valuesObj.position
|
|
if(nvrData.id){
|
|
valuesObj.id=nvrData.id
|
|
}
|
|
console.log('valuesObjvaluesObj',valuesObj);
|
|
setformObj(valuesObj)
|
|
setloading(true);
|
|
setTimeout(() => {
|
|
setloadingTip('...接受成功')
|
|
setTimeout(()=>{
|
|
setloadingTip('已完成')
|
|
setTimeout(() => {
|
|
setstep(1);
|
|
setokText('确认');
|
|
setcancelText('上一步');
|
|
setloading(false);
|
|
}, 2000);
|
|
},2000)
|
|
}, 2000);
|
|
})
|
|
.catch(errors=>{//表单校验失败
|
|
console.log('errors',errors);
|
|
})
|
|
|
|
}
|
|
else{
|
|
dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => {
|
|
Notification.success(opts)
|
|
setVisible(false);
|
|
close();
|
|
})
|
|
}
|
|
}
|
|
function handleAfterClose(){//在关闭之后
|
|
setstep(0);
|
|
setokText('测试校验');
|
|
setcancelText('取消');
|
|
}
|
|
function handleCancel() {//点击弹框取消 左边按钮
|
|
if(step==0){
|
|
setVisible(false);
|
|
}
|
|
else{
|
|
setstep(0);
|
|
setokText('测试校验');
|
|
setcancelText('取消');
|
|
}
|
|
}
|
|
function handleLocation(){//高德经纬度
|
|
window.open('https://lbs.amap.com/tools/picker','_blank')
|
|
}
|
|
return (
|
|
<>
|
|
<div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div>
|
|
<Modal
|
|
title={modalName=='add'?'添加NVR':'修改NVR'}
|
|
okText={okText}
|
|
cancelText={cancelText} //取消按钮
|
|
visible={visible}
|
|
onOk={handleOk}
|
|
width={607}
|
|
afterClose={handleAfterClose}
|
|
onCancel={handleCancel}
|
|
>
|
|
<Spin tip={loadingTip} spinning={isloading}>
|
|
{step==0?<div style={{paddingLeft:16}}>
|
|
<Form
|
|
allowEmpty
|
|
labelPosition='left'
|
|
labelAlign='left'
|
|
labelWidth= '90px'
|
|
onValueChange={values=>console.log(values)}
|
|
getFormApi={formApi => form.current = formApi}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Input maxLength='39' field='serialNo' label='设备编号:' initValue={nvrData.serialNo||''} placeholder='请输入设备编号' style={{ width:149 }}
|
|
rules={[
|
|
{ required: true, message: '请输入设备编号' }
|
|
]}/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Input maxLength='15' field='regionCode' label='行政区区码:' initValue={nvrData.regionCode||''} placeholder='请输入行政区区码' style={{ width:149 }}/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<Form.Input maxLength='36' field='name' label='设备名称:' initValue={nvrData.name||''} placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
|
|
rules={[
|
|
{ required: true, message: '请输入设备名称、常用项目或位置定义' }
|
|
]}/>
|
|
</Col>
|
|
<Col span={24}>
|
|
<Form.Select label="设备厂家:" field='venderId' initValue={nvrData.venderId||''} placeholder='请选择设备厂家' style={{ width: 421 }}>
|
|
{vender.map((item,index)=>(
|
|
<Form.Select.Option key={index} value={item.id}>{item.name}</Form.Select.Option>
|
|
))}
|
|
</Form.Select>
|
|
</Col>
|
|
<Col span={24} style={{display:'flex'}}>
|
|
<Form.Input maxLength='39' field='position' label='安装位置:' initValue={nvrData.longitude&&nvrData.latitude?nvrData.longitude+','+nvrData.latitude:''} placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
|
|
validate={positionForm}
|
|
rules={[
|
|
{ required: true, message: '请输入或拾取高德经纬度坐标' }
|
|
]}/>
|
|
<div style={{
|
|
width:32,
|
|
height:32,
|
|
background:"#1859C1",
|
|
marginLeft:4,
|
|
display:'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
cursor: "pointer",
|
|
marginTop:12,
|
|
borderRadius: 3+'px'}}
|
|
onClick={handleLocation}>
|
|
<img src="../../../assets/images/background/location.png" width={16} height={20}/>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</div>
|
|
://下一步
|
|
<div style={{height:224}}>
|
|
<div style={{paddingTop: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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { auth, global, members,vender } = state;
|
|
return {
|
|
loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
members: members.data,
|
|
vender:vender.data||[],//设备厂家
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(nvrModal);
|