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.
262 lines
8.9 KiB
262 lines
8.9 KiB
import React, { useState ,useRef,useEffect} from 'react'
|
|
import { connect } from "react-redux";
|
|
import { Modal,Spin } from '@douyinfe/semi-ui';
|
|
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
|
|
import FluoriteCamera from "./fluoriteCamera";
|
|
import NvrCamera from './nvrCamera';
|
|
import IpcCamera from './ipcCamera';
|
|
import CascadeCamera from './cascadeCamera';
|
|
import "./cameraModal.less";
|
|
function cameraModal(props){
|
|
const {modalName,visible,close}=props
|
|
const fluoriteRef = useRef();
|
|
const ipcRef = useRef();
|
|
const cascadeRef = useRef();
|
|
const [isloading,setloading] = useState(false);//是否显示loading
|
|
const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
|
|
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(clickNum==1){
|
|
console.log('1111111111111');
|
|
}else if(clickNum==2){
|
|
console.log('22222222222222');
|
|
}else if(clickNum==3){
|
|
console.log('33333333333333');
|
|
}else if(clickNum==4){
|
|
console.log('44444444444444');
|
|
}
|
|
// Notification.success(opts)
|
|
// close();
|
|
}
|
|
function handleAfterClose(){//在关闭之后
|
|
|
|
}
|
|
function handleCancel() {//点击弹框取消 左边按钮
|
|
close();
|
|
}
|
|
function handleChoose(id){//选择摄像头接入类型
|
|
setclickNum(id);
|
|
}
|
|
function turnLift(){//轮播图向左
|
|
setcameraList(cameraList.slice(0,3))
|
|
}
|
|
function turnRight(){//轮播图向右
|
|
setcameraList(cameraList.slice(1,4))
|
|
}
|
|
function onReset(){
|
|
if(clickNum==1){
|
|
fluoriteRef.current.resetFluoriteCamera()
|
|
}else if(clickNum==3){
|
|
ipcRef.current.resetIpcCamera()
|
|
}else if(clickNum==4){
|
|
|
|
}
|
|
}
|
|
function toTest(){
|
|
if(clickNum==1){
|
|
fluoriteRef.current.fluoriteCameraForm().then(values=>{//表单校验成功
|
|
console.log('111111111',values);
|
|
})
|
|
.catch(errors=>{//表单校验失败
|
|
console.log('errors',errors);
|
|
})
|
|
}else if(clickNum==3){
|
|
ipcRef.current.ipcCameraForm().then(values=>{//表单校验成功
|
|
console.log('111111111',values);
|
|
})
|
|
.catch(errors=>{//表单校验失败
|
|
console.log('errors',errors);
|
|
})
|
|
}else if(clickNum==4){
|
|
cascadeRef.current.cascadeCameraForm()
|
|
.then(values=>{//表单校验成功
|
|
let chooseList=[]
|
|
let nvrCameraList=[{
|
|
id:10,
|
|
name:'南昌县1',
|
|
number:'111111111111111111',
|
|
support:false,
|
|
change:false,
|
|
},{
|
|
id:20,
|
|
name:'南昌县2',
|
|
number:'222222222222222222',
|
|
support:false,
|
|
change:false,
|
|
},{
|
|
id:30,
|
|
name:'南昌县3',
|
|
number:'333333333333333333',
|
|
support:false,
|
|
change:false,
|
|
},{
|
|
id:40,
|
|
name:'南昌县4',
|
|
number:'444444444444444444',
|
|
support:false,
|
|
change:false,
|
|
}]
|
|
cascadeRef.current.setNVRcameraList(nvrCameraList)
|
|
for (let index = 0; index < nvrCameraList.length; index++) {
|
|
chooseList.push(nvrCameraList[index].id)
|
|
}
|
|
cascadeRef.current.setNvrCheckList(chooseList)
|
|
cascadeRef.current.setIsAllChoose(true)
|
|
})
|
|
.catch(errors=>{//表单校验失败
|
|
console.log('errors',errors);
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<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={{height:30,marginLeft:'-24px',marginRight:'-24px',marginTop:48,display:'flex',alignItems: 'center',justifyContent: 'space-between'}}>
|
|
<div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>配置属性</div>
|
|
{clickNum!==2?<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
|
|
}} onClick={onReset}>
|
|
<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",
|
|
}} onClick={toTest}>
|
|
<img src="/assets/images/background/test.png" alt="1" style={{marginRight:4}} />
|
|
测试
|
|
</div>
|
|
</div>:''}
|
|
</div>
|
|
<div>
|
|
{clickNum==1?
|
|
<FluoriteCamera cRef={fluoriteRef}/>
|
|
:clickNum==2?
|
|
<NvrCamera/>
|
|
:clickNum==3?
|
|
<IpcCamera aRef={ipcRef} />
|
|
:<CascadeCamera dRef={cascadeRef}/>}
|
|
</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);
|