deartibers
3 years ago
10 changed files with 232 additions and 15 deletions
|
After Width: | Height: | Size: 350 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 354 B |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 125 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
@ -0,0 +1,202 @@ |
|||
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 |
|||
Loading…
Reference in new issue