|
|
|
@ -1,177 +1,284 @@ |
|
|
|
import React, { useState ,useRef} from 'react' |
|
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui'; |
|
|
|
import { IconTickCircle } from '@douyinfe/semi-icons'; |
|
|
|
function nvrModal(props){ |
|
|
|
const {modalName}=props |
|
|
|
const { dispatch, actions,vender,close } = props; |
|
|
|
const nvrData = props.nvrData||{}//修改时传来的值 |
|
|
|
import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui"; |
|
|
|
import { IconTickCircle } from "@douyinfe/semi-icons"; |
|
|
|
|
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
function nvrModal(props) { |
|
|
|
const { modalName } = props; |
|
|
|
const { dispatch, actions, vender, close } = props; |
|
|
|
const nvrData = props.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()//接口入参 |
|
|
|
function showDialog() {//打开弹框 |
|
|
|
const [visible, setVisible] = useState(false); //是否显示弹框 |
|
|
|
const [isloading, setloading] = useState(false); //是否显示loading |
|
|
|
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 |
|
|
|
const [step, setstep] = useState("none"); //第几步 |
|
|
|
const [okText, setokText] = useState("测试校验"); //ok弹框text 右边 |
|
|
|
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 |
|
|
|
const [formObj, setformObj] = useState(); //接口入参 |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
console.log(props.user.id); |
|
|
|
}, []); |
|
|
|
|
|
|
|
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 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 |
|
|
|
} |
|
|
|
setformObj(valuesObj) |
|
|
|
setloading(true); |
|
|
|
setTimeout(() => { |
|
|
|
setloadingTip('...接受成功') |
|
|
|
setTimeout(()=>{ |
|
|
|
setloadingTip('已完成') |
|
|
|
setTimeout(() => { |
|
|
|
setstep(1); |
|
|
|
setokText('确认'); |
|
|
|
setcancelText('上一步'); |
|
|
|
setloading(false); |
|
|
|
}, 1000); |
|
|
|
}, 1000) |
|
|
|
}, 1000); |
|
|
|
}) |
|
|
|
.catch(errors=>{//表单校验失败 |
|
|
|
console.log('errors',errors); |
|
|
|
}) |
|
|
|
} |
|
|
|
else{ |
|
|
|
dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => { |
|
|
|
function handleOk() { |
|
|
|
//点击弹框确定 右边按钮 |
|
|
|
if (step == "none") { |
|
|
|
form.current |
|
|
|
.validate() |
|
|
|
.then((values) => { |
|
|
|
//表单校验成功 |
|
|
|
console.log(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; |
|
|
|
} |
|
|
|
var x = new moment(); |
|
|
|
setloading(true); |
|
|
|
dispatch( |
|
|
|
actions.equipmentWarehouse.getCheck({ |
|
|
|
serialNo: valuesObj.serialNo, |
|
|
|
}) |
|
|
|
).then((res) => { |
|
|
|
console.log(res); |
|
|
|
var y = new moment(); |
|
|
|
var duration = moment.duration(y.diff(x))._data.milliseconds; |
|
|
|
if (res.success) { |
|
|
|
setTimeout( |
|
|
|
() => { |
|
|
|
setloadingTip("已完成"); |
|
|
|
setTimeout(() => { |
|
|
|
setstep("block"); |
|
|
|
setloading(false); |
|
|
|
setokText("确认"); |
|
|
|
setcancelText("上一步"); |
|
|
|
setloadingTip("获取中...请稍后..."); |
|
|
|
}, 1000); |
|
|
|
}, |
|
|
|
duration > 2000 ? 0 : 2000 - duration |
|
|
|
); |
|
|
|
} else { |
|
|
|
setTimeout( |
|
|
|
() => { |
|
|
|
setloadingTip("校验失败"); |
|
|
|
setTimeout(() => { |
|
|
|
setstep("none"); |
|
|
|
setloading(false); |
|
|
|
setokText("测试校验"); |
|
|
|
setcancelText("取消"); |
|
|
|
setloadingTip("获取中...请稍后..."); |
|
|
|
}, 1000); |
|
|
|
}, |
|
|
|
duration > 2000 ? 0 : 2000 - duration |
|
|
|
); |
|
|
|
} |
|
|
|
}); |
|
|
|
setformObj(valuesObj); |
|
|
|
}) |
|
|
|
.catch((errors) => { |
|
|
|
//表单校验失败 |
|
|
|
console.log("errors", errors); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then((res) => { |
|
|
|
setVisible(false); |
|
|
|
close(); |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
function handleAfterClose(){//在关闭之后 |
|
|
|
setstep(0); |
|
|
|
setokText('测试校验'); |
|
|
|
setcancelText('取消'); |
|
|
|
function handleAfterClose() { |
|
|
|
//在关闭之后 |
|
|
|
setstep("none"); |
|
|
|
setokText("测试校验"); |
|
|
|
setcancelText("取消"); |
|
|
|
} |
|
|
|
function handleCancel() {//点击弹框取消 左边按钮 |
|
|
|
if(step==0){ |
|
|
|
function handleCancel() { |
|
|
|
//点击弹框取消 左边按钮 |
|
|
|
if (step == "none") { |
|
|
|
setVisible(false); |
|
|
|
} |
|
|
|
else{ |
|
|
|
setstep(0); |
|
|
|
setokText('测试校验'); |
|
|
|
setcancelText('取消'); |
|
|
|
} else { |
|
|
|
setstep("none"); |
|
|
|
setokText("测试校验"); |
|
|
|
setcancelText("取消"); |
|
|
|
} |
|
|
|
} |
|
|
|
function handleLocation(){//高德经纬度 |
|
|
|
window.open('https://lbs.amap.com/tools/picker','_blank') |
|
|
|
function handleLocation() { |
|
|
|
//高德经纬度 |
|
|
|
window.open("https://lbs.amap.com/tools/picker", "_blank"); |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div> |
|
|
|
<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} |
|
|
|
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}}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
paddingLeft: 16, |
|
|
|
display: step == "none" ? "block" : "none", |
|
|
|
}} |
|
|
|
> |
|
|
|
<Form |
|
|
|
allowEmpty |
|
|
|
labelPosition='left' |
|
|
|
labelAlign='left' |
|
|
|
labelWidth= '90px' |
|
|
|
onValueChange={values=>console.log(values)} |
|
|
|
getFormApi={formApi => form.current = formApi}> |
|
|
|
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: '请输入设备编号' } |
|
|
|
]}/> |
|
|
|
<Form.Input |
|
|
|
maxLength="39" |
|
|
|
field="serialNo" |
|
|
|
label="设备编号:" |
|
|
|
initValue={nvrData.serialNo || ""} |
|
|
|
placeholder="请输入设备编号" |
|
|
|
style={{ width: 149 }} |
|
|
|
rules={[{ required: true, message: "请输入设备编号" }]} |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
<Form.InputNumber formatter={value => `${value}`.replace(/\D/g, '')} hideButtons={true} maxLength='15' field='regionCode' label='行政区区码:' initValue={nvrData.regionCode||''} placeholder='请输入行政区区码' style={{ width:149 }}/> |
|
|
|
<Form.InputNumber |
|
|
|
formatter={(value) => `${value}`.replace(/\D/g, "")} |
|
|
|
hideButtons={true} |
|
|
|
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: '请输入设备名称、常用项目或位置定义' } |
|
|
|
]}/> |
|
|
|
<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||null} placeholder='请选择设备厂家' style={{ width: 421 }} |
|
|
|
rules={[ |
|
|
|
{ required: true, message: '请选择设备厂家' } |
|
|
|
]}> |
|
|
|
{vender.map((item,index)=>( |
|
|
|
<Form.Select.Option key={index} value={item.id}>{item.name}</Form.Select.Option> |
|
|
|
<Form.Select |
|
|
|
label="设备厂家:" |
|
|
|
field="venderId" |
|
|
|
initValue={nvrData.venderId || null} |
|
|
|
placeholder="请选择设备厂家" |
|
|
|
style={{ width: 421 }} |
|
|
|
rules={[{ required: true, message: "请选择设备厂家" }]} |
|
|
|
> |
|
|
|
{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} |
|
|
|
<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}/> |
|
|
|
{ |
|
|
|
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 style={{ height: 224, display: step }}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
paddingTop: 50, |
|
|
|
display: "flex", |
|
|
|
justifyContent: "center", |
|
|
|
}} |
|
|
|
> |
|
|
|
<IconTickCircle style={{ color: "#04B234", fontSize: 60 }} /> |
|
|
|
</div> |
|
|
|
<div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
marginTop: 20, |
|
|
|
display: "flex", |
|
|
|
justifyContent: "center", |
|
|
|
}} |
|
|
|
> |
|
|
|
已完成NVR设备测试和校验，是否确认添加？ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</Spin> |
|
|
|
</Modal> |
|
|
|
</> |
|
|
|
@ -179,13 +286,13 @@ function nvrModal(props){ |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global, members,vender } = state; |
|
|
|
const { auth, global, members, vender } = state; |
|
|
|
return { |
|
|
|
loading: members.isRequesting, |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
members: members.data, |
|
|
|
vender:vender.data||[],//设备厂家 |
|
|
|
vender: vender.data || [], //设备厂家 |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
yuan_yi
3 years ago