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.
202 lines
7.1 KiB
202 lines
7.1 KiB
import React, { useState ,useRef} from 'react'
|
|
import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui';
|
|
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
|
|
function nvrModal(props){
|
|
const {modalName,visible,close}=props
|
|
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 opts ={//添加完成确认后通知
|
|
title:'Hi',
|
|
content:'添加成功',
|
|
duration:3
|
|
}
|
|
const [clickNum,setclickNum] = useState(1);//点击的第几个
|
|
const cameraList=[//循环摄像头列表
|
|
{
|
|
id:1,
|
|
img:'/assets/images/background/ysy.png',
|
|
title:'萤石云平台摄像头',
|
|
text:'通过萤石云平台rtmp地址配置完成推流的平台摄像头。'
|
|
},{
|
|
id:2,
|
|
img:'/assets/images/background/nvr.png',
|
|
title:'NVR摄像头',
|
|
text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头'
|
|
},{
|
|
id:3,
|
|
img:'/assets/images/background/ipc.png',
|
|
title:'IPC网络摄像头',
|
|
text:'通过网络与监控设备直连完成视频流推送的摄像头设备'
|
|
},{
|
|
id:4,
|
|
img:'/assets/images/background/cascade.png',
|
|
title:'级联摄像头',
|
|
text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送'
|
|
},
|
|
]
|
|
const [showcameraList,setcameraList]=useState(cameraList.slice(0,3));
|
|
function handleOk() {//点击弹框确定 右边按钮
|
|
if(step==0){
|
|
form.current.validate()
|
|
.then(values=>{//表单校验成功
|
|
setloading(true);
|
|
setTimeout(() => {
|
|
setloadingTip('...接受成功')
|
|
setTimeout(()=>{
|
|
setloadingTip('已完成')
|
|
setTimeout(() => {
|
|
setstep(1);
|
|
setokText('确认');
|
|
setcancelText('上一步');
|
|
setloading(false);
|
|
}, 2000);
|
|
},2000)
|
|
}, 2000);
|
|
})
|
|
.catch(errors=>{//表单校验失败
|
|
console.log('errors',errors);
|
|
})
|
|
|
|
}
|
|
else{
|
|
Notification.success(opts)
|
|
// setVisible(false);
|
|
close();
|
|
}
|
|
}
|
|
function handleAfterClose(){//在关闭之后
|
|
setstep(0);
|
|
setokText('测试校验');
|
|
setcancelText('取消');
|
|
}
|
|
function handleCancel() {//点击弹框取消 左边按钮
|
|
if(step==0){
|
|
// setVisible(false);
|
|
close();
|
|
}
|
|
else{
|
|
setstep(0);
|
|
setokText('测试校验');
|
|
setcancelText('取消');
|
|
}
|
|
}
|
|
function handleLocation(){//高德经纬度
|
|
console.log('handleLocationhandleLocation');
|
|
}
|
|
function handleChoose(id){//选择摄像头接入类型
|
|
setclickNum(id);
|
|
}
|
|
function turnLift(){
|
|
setcameraList(cameraList.slice(0,3))
|
|
}
|
|
function turnRight(){
|
|
setcameraList(cameraList.slice(1,4))
|
|
}
|
|
return (
|
|
<>
|
|
{/* <div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div> */}
|
|
<Modal
|
|
title={modalName=='add'?'添加摄像头':'修改摄像头'}
|
|
okText={okText}
|
|
cancelText={cancelText} //取消按钮
|
|
visible={visible}
|
|
onOk={handleOk}
|
|
width={921}
|
|
afterClose={handleAfterClose}
|
|
onCancel={handleCancel}
|
|
>
|
|
<Spin tip={loadingTip} spinning={isloading}>
|
|
<div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:8}}>
|
|
<div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>接入类型</div>
|
|
<div style={{marginTop:5,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
|
|
<IconChevronLeft
|
|
style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginLeft:29,cursor: "pointer",}}
|
|
onClick={turnLift}/>
|
|
<div
|
|
style={{display:'flex',alignItems:'center',height:146}}>
|
|
{showcameraList.map((item,index)=>(
|
|
<div
|
|
key={item.id}
|
|
style={{
|
|
width:266,
|
|
height:146,
|
|
marginRight:12,
|
|
border:clickNum===item.id?'1px solid #1859C1':'1px solid #F9F9F9',
|
|
borderRadius:3,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
cursor: "pointer",
|
|
position: 'relative'}}
|
|
onClick={()=>handleChoose(item.id)}>
|
|
<div
|
|
style={{marginTop:5,
|
|
height:65,
|
|
width:116,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'}}>
|
|
<img
|
|
src={item.img}
|
|
alt="设置"
|
|
/>
|
|
</div>
|
|
<div style={{marginTop:2,fontSize:14,color:'rgba(0, 0, 0, 0.85)',}}>{item.title}</div>
|
|
<div style={{width:210,height:34,marginTop:9,fontSize:12,color:'rgba(0, 0, 0, 0.45)',textAlign:'center'}}>{item.text}</div>
|
|
{clickNum===item.id?<div style={{ position: 'absolute', top: '-3px', right: '-5px'}}>
|
|
<img src="/assets/images/background/topchoose.png" alt="1" />
|
|
</div>:''}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<IconChevronRight
|
|
style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginRight:18,cursor: "pointer",}}
|
|
onClick={turnRight}/>
|
|
</div>
|
|
</div>
|
|
<div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:48,display:'flex',alignItems: 'center',justifyContent: 'space-between'}}>
|
|
<div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>配置属性</div>
|
|
<div style={{display:'flex',marginRight:43,}}>
|
|
<div style={{
|
|
height:30,
|
|
width:64,
|
|
border:'1px solid #D9D9D9',
|
|
borderRadius: '3px',
|
|
color:'rgba(0, 0, 0, 0.65)',
|
|
display:'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
cursor: "pointer",
|
|
marginRight:16
|
|
}}>
|
|
<img src="/assets/images/background/Reset.png" alt="1" style={{marginRight:4}}/>
|
|
重置
|
|
</div>
|
|
<div style={{
|
|
height:30,
|
|
width:64,
|
|
border:'1px solid #1859C1',
|
|
borderRadius: '3px',
|
|
color:'#1859C1',
|
|
display:'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
cursor: "pointer",
|
|
}}>
|
|
<img src="/assets/images/background/test.png" alt="1" style={{marginRight:4}} />
|
|
测试
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default nvrModal
|