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.
350 lines
14 KiB
350 lines
14 KiB
import React, { useState ,useRef} from 'react'
|
|
import { connect } from "react-redux";
|
|
import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui';
|
|
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
|
|
import "./cameraModal.less";
|
|
function cameraModal(props){
|
|
const { TextArea } = Form;
|
|
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 [cloud,setcloud] = useState('')//云台支持
|
|
const [voice,setvoice] = useState('')//语音支持
|
|
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(){//高德经纬度
|
|
window.open('https://lbs.amap.com/tools/picker','_blank')
|
|
}
|
|
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>
|
|
<div>
|
|
<Form
|
|
labelPosition='left'
|
|
labelAlign='left'
|
|
labelWidth= '115px'
|
|
onValueChange={values=>console.log(values)}
|
|
getFormApi={formApi => form.current = formApi}>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Input field='UserName' label='设备名称:' initValue={''} placeholder='请输入设备名称、常用项目或位置定义' style={{ width:307 }}
|
|
rules={[
|
|
{ required: true, message: '请输入设备名称' }
|
|
]}/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.RadioGroup
|
|
label="云台支持:"
|
|
field='role'
|
|
type='pureCard'
|
|
direction='horizontal'
|
|
style={{padding:0}}
|
|
rules={[
|
|
{ required: true, message: '请选择云台支持' }
|
|
]}
|
|
onChange={(checked) => {
|
|
console.log(checked.target.value);
|
|
if(checked.target.value=='yes'){
|
|
setcloud('yes')
|
|
}
|
|
else{
|
|
setcloud('no')
|
|
}
|
|
}}>
|
|
<Form.Radio value="yes" style={{width:58,height:30,padding:0,margin:0,background:'#F9F9F9'}}>
|
|
<div className='cloud' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
|
|
支持
|
|
</div>
|
|
{cloud=='yes'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
|
|
<img src="/assets/images/background/formchoose.png" alt="1" />
|
|
</div>:''}
|
|
</Form.Radio>
|
|
<Form.Radio value="no" style={{width:58,height:30,padding:0,margin:0,marginLeft:18,background:'#F9F9F9'}}>
|
|
<div className='cloud' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
|
|
不支持
|
|
</div>
|
|
{cloud=='no'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
|
|
<img src="/assets/images/background/formchoose.png" alt="1" />
|
|
</div>:''}
|
|
</Form.Radio>
|
|
</Form.RadioGroup>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Input field='Use11rName11' label='设备厂家:' placeholder='请选择设备厂家' style={{ width:307 }}/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<div style={{display:'flex'}}>
|
|
<Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:92 }}>
|
|
<Form.Select.Option value="abc">Semi</Form.Select.Option>
|
|
<Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
|
|
<Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
|
|
</Form.Select>
|
|
<div style={{marginLeft:18}}>
|
|
<Form.RadioGroup
|
|
labelWidth= '76px'
|
|
label="语音支持:"
|
|
field='role2'
|
|
type='pureCard'
|
|
direction='horizontal'
|
|
style={{padding:0}}
|
|
onChange={(checked) => {
|
|
console.log(checked.target.value);
|
|
if(checked.target.value=='yes'){
|
|
setvoice('yes')
|
|
}
|
|
else{
|
|
setvoice('no')
|
|
}
|
|
}}>
|
|
<Form.Radio value="yes" style={{width:58,height:30,padding:0,margin:0,background:'#F9F9F9'}}>
|
|
<div className='voice' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
|
|
支持
|
|
</div>
|
|
{voice=='yes'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
|
|
<img src="/assets/images/background/formchoose.png" alt="1" />
|
|
</div>:''}
|
|
</Form.Radio>
|
|
<Form.Radio value="no" style={{width:58,height:30,padding:0,margin:0,marginLeft:18,background:'#F9F9F9'}}>
|
|
<div className='voice' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
|
|
不支持
|
|
</div>
|
|
{voice=='no'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
|
|
<img src="/assets/images/background/formchoose.png" alt="1" />
|
|
</div>:''}
|
|
</Form.Radio>
|
|
</Form.RadioGroup>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
<Col span={12}>
|
|
<div style={{display:'flex'}}>
|
|
<Form.Input field='Use11rName1312' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:270 }}
|
|
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>
|
|
</div>
|
|
<div>
|
|
<Form.Input field='UserName11' label='设备编号接入:' initValue={''} placeholder='请输入设备编号' style={{ width:307 }}/>
|
|
</div>
|
|
</Col>
|
|
<Col span={12}>
|
|
<TextArea
|
|
style={{ width:320, height: 90 }}
|
|
field='description'
|
|
label='RTMP地址接入:'
|
|
placeholder='请输入RTMP地址接入'
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</div>
|
|
</Spin>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { auth, global, members } = state;
|
|
return {
|
|
loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
members: members.data,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(cameraModal);
|