|
|
@ -1,244 +1,447 @@ |
|
|
import React, { useState ,useRef,useEffect} from 'react' |
|
|
import React, { useState, useRef, useEffect } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { connect } from "react-redux"; |
|
|
import { Modal,Spin } from '@douyinfe/semi-ui'; |
|
|
import { Modal, Spin } from "@douyinfe/semi-ui"; |
|
|
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons'; |
|
|
import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons"; |
|
|
import FluoriteCamera from "./fluoriteCamera"; |
|
|
import FluoriteCamera from "./fluoriteCamera"; |
|
|
import NvrCamera from './nvrCamera'; |
|
|
import NvrCamera from "./nvrCamera"; |
|
|
import IpcCamera from './ipcCamera'; |
|
|
import IpcCamera from "./ipcCamera"; |
|
|
import CascadeCamera from './cascadeCamera'; |
|
|
import CascadeCamera from "./cascadeCamera"; |
|
|
import "./cameraModal.less"; |
|
|
import "./cameraModal.less"; |
|
|
function cameraModal(props){ |
|
|
|
|
|
const {modalName,visible,close}=props |
|
|
function cameraModal(props) { |
|
|
|
|
|
const { |
|
|
|
|
|
dispatch, |
|
|
|
|
|
actions, |
|
|
|
|
|
modalName, |
|
|
|
|
|
visible, |
|
|
|
|
|
close, |
|
|
|
|
|
venderList, |
|
|
|
|
|
CameraKind, |
|
|
|
|
|
CameraAbility, |
|
|
|
|
|
cameraData, //修改时传来的值 |
|
|
|
|
|
} = props; |
|
|
|
|
|
const { equipmentWarehouse } = actions; |
|
|
const fluoriteRef = useRef(); |
|
|
const fluoriteRef = useRef(); |
|
|
const ipcRef = useRef(); |
|
|
const ipcRef = useRef(); |
|
|
const cascadeRef = useRef(); |
|
|
const cascadeRef = useRef(); |
|
|
const [isloading,setloading] = useState(false);//是否显示loading |
|
|
const [isloading, setloading] = useState(false); //是否显示loading |
|
|
const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值 |
|
|
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 |
|
|
const [okText,setokText] = useState('确定')//ok弹框text 右边 |
|
|
const [okText, setokText] = useState("确定"); //ok弹框text 右边 |
|
|
const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边 |
|
|
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 |
|
|
const [clickNum,setclickNum] = useState(1);//点击的第几个 |
|
|
const [clickNum, setclickNum] = useState( |
|
|
const cameraList=[//循环摄像头列表 |
|
|
cameraData.type == "yingshi" |
|
|
|
|
|
? 1 |
|
|
|
|
|
: cameraData.type == "ipc" |
|
|
|
|
|
? 3 |
|
|
|
|
|
: cameraData.type == "nvr" |
|
|
|
|
|
? 2 |
|
|
|
|
|
: cameraData.type == "cascade" |
|
|
|
|
|
? 4 |
|
|
|
|
|
: 1 |
|
|
|
|
|
); //点击的第几个 |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
dispatch(equipmentWarehouse.getCameraKind()); |
|
|
|
|
|
dispatch(equipmentWarehouse.getAbility()); |
|
|
|
|
|
}, []); |
|
|
|
|
|
const cameraList = [ |
|
|
|
|
|
//循环摄像头列表 |
|
|
|
|
|
{ |
|
|
|
|
|
id: 1, |
|
|
|
|
|
img: "/assets/images/background/ysy.png", |
|
|
|
|
|
title: "萤石云平台摄像头", |
|
|
|
|
|
text: "通过萤石云平台rtmp地址配置完成推流的平台摄像头。", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 3, |
|
|
|
|
|
img: "/assets/images/background/ipc.png", |
|
|
|
|
|
title: "IPC网络摄像头", |
|
|
|
|
|
text: "通过网络与监控设备直连完成视频流推送的摄像头设备", |
|
|
|
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id:1, |
|
|
id: 4, |
|
|
img:'/assets/images/background/ysy.png', |
|
|
img: "/assets/images/background/cascade.png", |
|
|
title:'萤石云平台摄像头', |
|
|
title: "级联摄像头", |
|
|
text:'通过萤石云平台rtmp地址配置完成推流的平台摄像头。' |
|
|
text: "通过GB/T28181协议级联的平台摄像头，常用于平台对接推送", |
|
|
},{ |
|
|
|
|
|
id:3, |
|
|
|
|
|
img:'/assets/images/background/ipc.png', |
|
|
|
|
|
title:'IPC网络摄像头', |
|
|
|
|
|
text:'通过网络与监控设备直连完成视频流推送的摄像头设备' |
|
|
|
|
|
},{ |
|
|
|
|
|
id:4, |
|
|
|
|
|
img:'/assets/images/background/cascade.png', |
|
|
|
|
|
title:'级联摄像头', |
|
|
|
|
|
text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送' |
|
|
|
|
|
},{ |
|
|
|
|
|
id:2, |
|
|
|
|
|
img:'/assets/images/background/nvr.png', |
|
|
|
|
|
title:'NVR摄像头', |
|
|
|
|
|
text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头' |
|
|
|
|
|
}, |
|
|
}, |
|
|
] |
|
|
{ |
|
|
const [showcameraList,setcameraList]=useState(cameraList.slice(0,3));//轮播图 |
|
|
id: 2, |
|
|
function handleOk() {//点击弹框确定 右边按钮 |
|
|
img: "/assets/images/background/nvr.png", |
|
|
if(clickNum==1){ |
|
|
title: "NVR摄像头", |
|
|
console.log('1111111111111'); |
|
|
text: "通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头", |
|
|
}else if(clickNum==2){ |
|
|
}, |
|
|
console.log('22222222222222'); |
|
|
]; |
|
|
}else if(clickNum==3){ |
|
|
const [showcameraList, setcameraList] = useState(cameraList.slice(0, 3)); //轮播图 |
|
|
console.log('33333333333333'); |
|
|
function handleOk() { |
|
|
}else if(clickNum==4){ |
|
|
//点击弹框确定 右边按钮 |
|
|
console.log('44444444444444'); |
|
|
if (clickNum == 1) { |
|
|
|
|
|
//萤石云平台摄像头 |
|
|
|
|
|
fluoriteRef.current.fluoriteCameraForm().then((values) => { |
|
|
|
|
|
values = JSON.parse(JSON.stringify(values)); |
|
|
|
|
|
values.longitude = values.position.split(",")[0]; |
|
|
|
|
|
values.latitude = values.position.split(",")[1]; |
|
|
|
|
|
delete values.position; |
|
|
|
|
|
if (cameraData.id) { |
|
|
|
|
|
values.id = cameraData.id; |
|
|
} |
|
|
} |
|
|
// close(); |
|
|
dispatch(equipmentWarehouse.postCameraYingshi(values)).then((res) => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
onReset(); |
|
|
} |
|
|
} |
|
|
function handleAfterClose(){//在关闭之后 |
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
} else if (clickNum == 2) { |
|
|
|
|
|
console.log("22222222222222"); |
|
|
|
|
|
close(); |
|
|
|
|
|
} else if (clickNum == 3) { |
|
|
|
|
|
//IPC网络摄像头 |
|
|
|
|
|
ipcRef.current.ipcCameraForm().then((values) => { |
|
|
|
|
|
values = JSON.parse(JSON.stringify(values)); |
|
|
|
|
|
values.longitude = values.position.split(",")[0]; |
|
|
|
|
|
values.latitude = values.position.split(",")[1]; |
|
|
|
|
|
delete values.position; |
|
|
|
|
|
if (cameraData.id) { |
|
|
|
|
|
values.id = cameraData.id; |
|
|
|
|
|
} |
|
|
|
|
|
console.log(values); |
|
|
|
|
|
dispatch(equipmentWarehouse.postCameraIpc(values)).then((res) => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
onReset(); |
|
|
} |
|
|
} |
|
|
function handleCancel() {//点击弹框取消 左边按钮 |
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
} else if (clickNum == 4) { |
|
|
|
|
|
console.log("44444444444444"); |
|
|
close(); |
|
|
close(); |
|
|
} |
|
|
} |
|
|
function handleChoose(id){//选择摄像头接入类型 |
|
|
} |
|
|
|
|
|
function handleAfterClose() { |
|
|
|
|
|
//在关闭之后 |
|
|
|
|
|
} |
|
|
|
|
|
function handleCancel() { |
|
|
|
|
|
onReset(); |
|
|
|
|
|
//点击弹框取消 左边按钮 |
|
|
|
|
|
} |
|
|
|
|
|
function handleChoose(id) { |
|
|
|
|
|
//选择摄像头接入类型 |
|
|
setclickNum(id); |
|
|
setclickNum(id); |
|
|
} |
|
|
} |
|
|
function turnLift(){//轮播图向左 |
|
|
function turnLift() { |
|
|
setcameraList(cameraList.slice(0,3)) |
|
|
//轮播图向左 |
|
|
|
|
|
setcameraList(cameraList.slice(0, 3)); |
|
|
} |
|
|
} |
|
|
function turnRight(){//轮播图向右 |
|
|
function turnRight() { |
|
|
setcameraList(cameraList.slice(1,4)) |
|
|
//轮播图向右 |
|
|
|
|
|
setcameraList(cameraList.slice(1, 4)); |
|
|
} |
|
|
} |
|
|
function onReset(){ |
|
|
function onReset() { |
|
|
if(clickNum==1){ |
|
|
if (clickNum == 1) { |
|
|
fluoriteRef.current.resetFluoriteCamera(); |
|
|
fluoriteRef.current.resetFluoriteCamera(); |
|
|
fluoriteRef.current.toempty(); |
|
|
fluoriteRef.current.toempty(); |
|
|
}else if(clickNum==3){ |
|
|
close(); |
|
|
|
|
|
} else if (clickNum == 3) { |
|
|
ipcRef.current.resetIpcCamera(); |
|
|
ipcRef.current.resetIpcCamera(); |
|
|
ipcRef.current.toempty(); |
|
|
ipcRef.current.toempty(); |
|
|
}else if(clickNum==4){ |
|
|
close(); |
|
|
|
|
|
} else if (clickNum == 4) { |
|
|
|
|
|
close(); |
|
|
} |
|
|
} |
|
|
|
|
|
close(); |
|
|
} |
|
|
} |
|
|
function toTest(){ |
|
|
function toTest() { |
|
|
if(clickNum==1){ |
|
|
if (clickNum == 1) { |
|
|
fluoriteRef.current.fluoriteCameraForm().then(values=>{//表单校验成功 |
|
|
fluoriteRef.current |
|
|
console.log('111111111',values); |
|
|
.fluoriteCameraForm() |
|
|
}) |
|
|
.then((values) => { |
|
|
.catch(errors=>{//表单校验失败 |
|
|
//表单校验成功 |
|
|
console.log('errors',errors); |
|
|
console.log("111111111", values); |
|
|
}) |
|
|
|
|
|
}else if(clickNum==3){ |
|
|
|
|
|
ipcRef.current.ipcCameraForm().then(values=>{//表单校验成功 |
|
|
|
|
|
console.log('111111111',values); |
|
|
|
|
|
}) |
|
|
}) |
|
|
.catch(errors=>{//表单校验失败 |
|
|
.catch((errors) => { |
|
|
console.log('errors',errors); |
|
|
//表单校验失败 |
|
|
|
|
|
console.log("errors", errors); |
|
|
|
|
|
}); |
|
|
|
|
|
} else if (clickNum == 3) { |
|
|
|
|
|
ipcRef.current |
|
|
|
|
|
.ipcCameraForm() |
|
|
|
|
|
.then((values) => { |
|
|
|
|
|
//表单校验成功 |
|
|
|
|
|
console.log("111111111", values); |
|
|
}) |
|
|
}) |
|
|
}else if(clickNum==4){ |
|
|
.catch((errors) => { |
|
|
cascadeRef.current.cascadeCameraForm() |
|
|
//表单校验失败 |
|
|
.then(values=>{//表单校验成功 |
|
|
console.log("errors", errors); |
|
|
let chooseList=[] |
|
|
}); |
|
|
let nvrCameraList=[{ |
|
|
} else if (clickNum == 4) { |
|
|
id:10, |
|
|
cascadeRef.current |
|
|
name:'南昌县1', |
|
|
.cascadeCameraForm() |
|
|
number:'111111111111111111', |
|
|
.then((values) => { |
|
|
support:false, |
|
|
//表单校验成功 |
|
|
change:false, |
|
|
let chooseList = []; |
|
|
},{ |
|
|
let nvrCameraList = [ |
|
|
id:20, |
|
|
{ |
|
|
name:'南昌县2', |
|
|
id: 10, |
|
|
number:'222222222222222222', |
|
|
name: "南昌县1", |
|
|
support:false, |
|
|
number: "111111111111111111", |
|
|
change:false, |
|
|
support: false, |
|
|
},{ |
|
|
change: false, |
|
|
id:30, |
|
|
}, |
|
|
name:'南昌县3', |
|
|
{ |
|
|
number:'333333333333333333', |
|
|
id: 20, |
|
|
support:false, |
|
|
name: "南昌县2", |
|
|
change:false, |
|
|
number: "222222222222222222", |
|
|
},{ |
|
|
support: false, |
|
|
id:40, |
|
|
change: false, |
|
|
name:'南昌县4', |
|
|
}, |
|
|
number:'444444444444444444', |
|
|
{ |
|
|
support:false, |
|
|
id: 30, |
|
|
change:false, |
|
|
name: "南昌县3", |
|
|
}] |
|
|
number: "333333333333333333", |
|
|
cascadeRef.current.setNVRcameraList(nvrCameraList) |
|
|
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++) { |
|
|
for (let index = 0; index < nvrCameraList.length; index++) { |
|
|
chooseList.push(nvrCameraList[index].id) |
|
|
chooseList.push(nvrCameraList[index].id); |
|
|
} |
|
|
} |
|
|
cascadeRef.current.setNvrCheckList(chooseList) |
|
|
cascadeRef.current.setNvrCheckList(chooseList); |
|
|
cascadeRef.current.setIsAllChoose(true) |
|
|
cascadeRef.current.setIsAllChoose(true); |
|
|
}) |
|
|
|
|
|
.catch(errors=>{//表单校验失败 |
|
|
|
|
|
console.log('errors',errors); |
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
.catch((errors) => { |
|
|
|
|
|
//表单校验失败 |
|
|
|
|
|
console.log("errors", errors); |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<Modal |
|
|
<Modal |
|
|
title={modalName=='add'?'添加摄像头':'修改摄像头'} |
|
|
title={modalName == "add" ? "添加摄像头" : "修改摄像头"} |
|
|
okText={okText} |
|
|
okText={okText} |
|
|
cancelText={cancelText} //取消按钮 |
|
|
cancelText={cancelText} //取消按钮 |
|
|
visible={visible} |
|
|
visible={visible} |
|
|
onOk={handleOk} |
|
|
onOk={handleOk} |
|
|
width={921} |
|
|
width={966} |
|
|
afterClose={handleAfterClose} |
|
|
afterClose={handleAfterClose} |
|
|
onCancel={handleCancel} |
|
|
onCancel={handleCancel} |
|
|
> |
|
|
> |
|
|
<Spin tip={loadingTip} spinning={isloading}> |
|
|
<Spin tip={loadingTip} spinning={isloading}> |
|
|
<div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:8}}> |
|
|
<div |
|
|
<div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>接入类型</div> |
|
|
style={{ marginLeft: "-24px", marginRight: "-24px", marginTop: 8 }} |
|
|
<div style={{marginTop:5,display:'flex',alignItems:'center',justifyContent:'space-between'}}> |
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
style={{ |
|
|
|
|
|
marginLeft: 29, |
|
|
|
|
|
color: "#1859C1", |
|
|
|
|
|
fontSize: 14, |
|
|
|
|
|
fontWeight: 500, |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
接入类型 |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
style={{ |
|
|
|
|
|
marginTop: 5, |
|
|
|
|
|
display: "flex", |
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
<IconChevronLeft |
|
|
<IconChevronLeft |
|
|
style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginLeft:29,cursor: "pointer",}} |
|
|
style={{ |
|
|
onClick={turnLift}/> |
|
|
color: "rgba(0, 0, 0, 0.45)", |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
marginLeft: 29, |
|
|
|
|
|
cursor: "pointer", |
|
|
|
|
|
}} |
|
|
|
|
|
onClick={turnLift} |
|
|
|
|
|
/> |
|
|
<div |
|
|
<div |
|
|
style={{display:'flex',alignItems:'center',height:146}}> |
|
|
style={{ display: "flex", alignItems: "center", height: 146 }} |
|
|
{showcameraList.map((item,index)=>( |
|
|
> |
|
|
|
|
|
{showcameraList.map((item, index) => ( |
|
|
<div |
|
|
<div |
|
|
key={item.id} |
|
|
key={item.id} |
|
|
style={{ |
|
|
style={{ |
|
|
width:266, |
|
|
width: 266, |
|
|
height:146, |
|
|
height: 146, |
|
|
marginRight:12, |
|
|
marginRight: 12, |
|
|
border:clickNum===item.id?'1px solid #1859C1':'1px solid #F9F9F9', |
|
|
border: |
|
|
borderRadius:3, |
|
|
clickNum === item.id |
|
|
display: 'flex', |
|
|
? "1px solid #1859C1" |
|
|
flexDirection: 'column', |
|
|
: "1px solid #F9F9F9", |
|
|
alignItems: 'center', |
|
|
borderRadius: 3, |
|
|
|
|
|
display: "flex", |
|
|
|
|
|
flexDirection: "column", |
|
|
|
|
|
alignItems: "center", |
|
|
cursor: "pointer", |
|
|
cursor: "pointer", |
|
|
position: 'relative'}} |
|
|
position: "relative", |
|
|
onClick={()=>handleChoose(item.id)}> |
|
|
}} |
|
|
|
|
|
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 |
|
|
<div |
|
|
style={{marginTop:5, |
|
|
style={{ |
|
|
height:65, |
|
|
position: "absolute", |
|
|
width:116, |
|
|
top: "-3px", |
|
|
display: 'flex', |
|
|
right: "-5px", |
|
|
justifyContent: 'center', |
|
|
}} |
|
|
alignItems: 'center'}}> |
|
|
> |
|
|
<img |
|
|
<img |
|
|
src={item.img} |
|
|
src="/assets/images/background/topchoose.png" |
|
|
alt="设置" |
|
|
alt="1" |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</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> |
|
|
))} |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
<IconChevronRight |
|
|
<IconChevronRight |
|
|
style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginRight:18,cursor: "pointer",}} |
|
|
style={{ |
|
|
onClick={turnRight}/> |
|
|
color: "rgba(0, 0, 0, 0.45)", |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
marginRight: 18, |
|
|
|
|
|
cursor: "pointer", |
|
|
|
|
|
}} |
|
|
|
|
|
onClick={turnRight} |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{height:30,marginLeft:'-24px',marginRight:'-24px',marginTop:48,display:'flex',alignItems: 'center',justifyContent: 'space-between'}}> |
|
|
<div |
|
|
<div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>配置属性</div> |
|
|
style={{ |
|
|
{clickNum!==2?<div style={{display:'flex',marginRight:43,}}> |
|
|
height: 30, |
|
|
<div style={{ |
|
|
marginLeft: "-24px", |
|
|
height:30, |
|
|
marginRight: "-24px", |
|
|
width:64, |
|
|
marginTop: 48, |
|
|
border:'1px solid #D9D9D9', |
|
|
display: "flex", |
|
|
borderRadius: '3px', |
|
|
alignItems: "center", |
|
|
color:'rgba(0, 0, 0, 0.65)', |
|
|
justifyContent: "space-between", |
|
|
display:'flex', |
|
|
}} |
|
|
justifyContent: 'center', |
|
|
> |
|
|
alignItems: 'center', |
|
|
<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", |
|
|
cursor: "pointer", |
|
|
marginRight:16 |
|
|
marginRight: 16, |
|
|
}} onClick={onReset}> |
|
|
}} |
|
|
<img src="/assets/images/background/Reset.png" alt="1" style={{marginRight:4}}/> |
|
|
onClick={onReset} |
|
|
|
|
|
> |
|
|
|
|
|
<img |
|
|
|
|
|
src="/assets/images/background/Reset.png" |
|
|
|
|
|
alt="1" |
|
|
|
|
|
style={{ marginRight: 4 }} |
|
|
|
|
|
/> |
|
|
重置 |
|
|
重置 |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ |
|
|
<div |
|
|
height:30, |
|
|
style={{ |
|
|
width:64, |
|
|
height: 30, |
|
|
border:'1px solid #1859C1', |
|
|
width: 64, |
|
|
borderRadius: '3px', |
|
|
border: "1px solid #1859C1", |
|
|
color:'#1859C1', |
|
|
borderRadius: "3px", |
|
|
display:'flex', |
|
|
color: "#1859C1", |
|
|
justifyContent: 'center', |
|
|
display: "flex", |
|
|
alignItems: 'center', |
|
|
justifyContent: "center", |
|
|
|
|
|
alignItems: "center", |
|
|
cursor: "pointer", |
|
|
cursor: "pointer", |
|
|
}} onClick={toTest}> |
|
|
}} |
|
|
<img src="/assets/images/background/test.png" alt="1" style={{marginRight:4}} /> |
|
|
onClick={toTest} |
|
|
|
|
|
> |
|
|
|
|
|
<img |
|
|
|
|
|
src="/assets/images/background/test.png" |
|
|
|
|
|
alt="1" |
|
|
|
|
|
style={{ marginRight: 4 }} |
|
|
|
|
|
/> |
|
|
测试 |
|
|
测试 |
|
|
</div> |
|
|
</div> |
|
|
</div>:''} |
|
|
</div> |
|
|
|
|
|
) : ( |
|
|
|
|
|
"" |
|
|
|
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
|
{clickNum==1? |
|
|
{clickNum == 1 ? ( |
|
|
<FluoriteCamera cRef={fluoriteRef}/> |
|
|
<FluoriteCamera |
|
|
:clickNum==2? |
|
|
cRef={fluoriteRef} |
|
|
<NvrCamera/> |
|
|
CameraKind={CameraKind} |
|
|
:clickNum==3? |
|
|
CameraAbility={CameraAbility} |
|
|
<IpcCamera aRef={ipcRef} /> |
|
|
cameraData={cameraData} |
|
|
:<CascadeCamera dRef={cascadeRef}/>} |
|
|
/> |
|
|
|
|
|
) : clickNum == 2 ? ( |
|
|
|
|
|
<NvrCamera /> |
|
|
|
|
|
) : clickNum == 3 ? ( |
|
|
|
|
|
<IpcCamera |
|
|
|
|
|
aRef={ipcRef} |
|
|
|
|
|
CameraKind={CameraKind} |
|
|
|
|
|
CameraAbility={CameraAbility} |
|
|
|
|
|
venderList={venderList} |
|
|
|
|
|
cameraData={cameraData} |
|
|
|
|
|
/> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<CascadeCamera dRef={cascadeRef} /> |
|
|
|
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
</Spin> |
|
|
</Spin> |
|
|
</Modal> |
|
|
</Modal> |
|
|
@ -246,12 +449,13 @@ function cameraModal(props){ |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
function mapStateToProps(state) { |
|
|
function mapStateToProps(state) { |
|
|
const { auth, global, members } = state; |
|
|
const { auth, global, members, CameraKind, CameraAbility } = state; |
|
|
return { |
|
|
return { |
|
|
loading: members.isRequesting, |
|
|
loading: members.isRequesting, |
|
|
user: auth.user, |
|
|
user: auth.user, |
|
|
actions: global.actions, |
|
|
actions: global.actions, |
|
|
members: members.data, |
|
|
CameraKind: CameraKind.data || [], |
|
|
|
|
|
CameraAbility: CameraAbility.data || [], |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
