|
|
|
@ -1,179 +1,110 @@ |
|
|
|
import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react' |
|
|
|
import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { Form,Row,Col,CheckboxGroup, Checkbox,Radio,Input } from '@douyinfe/semi-ui'; |
|
|
|
import { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons'; |
|
|
|
import { Form, Row, Col } from "@douyinfe/semi-ui"; |
|
|
|
|
|
|
|
import "./cameraModal.less"; |
|
|
|
function cascadeCamera({dRef}){ |
|
|
|
function cascadeCamera({ dRef, dispatch, actions }) { |
|
|
|
const form = useRef(); |
|
|
|
const [memoryList,setMemoryList] = useState([ |
|
|
|
const { equipmentWarehouse } = actions; |
|
|
|
const [sip, setSip] = useState([]); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { |
|
|
|
console.log(res) |
|
|
|
setSip(res.payload.data); |
|
|
|
}); |
|
|
|
}, []); |
|
|
|
|
|
|
|
//内存卡列表 |
|
|
|
const memoryList = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
value: "8g", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
value: "16g", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
value: "32g", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
value: "64g", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id:1, |
|
|
|
value:'8g' |
|
|
|
},{ |
|
|
|
id:2, |
|
|
|
value:'16g' |
|
|
|
},{ |
|
|
|
id:3, |
|
|
|
value:'32g' |
|
|
|
},{ |
|
|
|
id:4, |
|
|
|
value:'64g' |
|
|
|
},{ |
|
|
|
id:5, |
|
|
|
value:'128g' |
|
|
|
},{ |
|
|
|
id:6, |
|
|
|
value:'256g' |
|
|
|
},{ |
|
|
|
id:7, |
|
|
|
value:'>256g' |
|
|
|
} |
|
|
|
])//内存卡列表 |
|
|
|
const [nvrCheckList, setNvrCheckList] = useState([]);//nvr视频流多选 |
|
|
|
const [NVRcameraList,setNVRcameraList]=useState([])//nvr视频流列表 |
|
|
|
const [isAllChoose,setIsAllChoose]=useState(false)//全选 |
|
|
|
const [equipmentNum,setEquipmentNum]=useState('')//nvr视频编号 |
|
|
|
function NvrChangeName(e,index){//nvr摄像头视频流获取修改名称 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) |
|
|
|
NvrchangeList[index].change=true |
|
|
|
setNVRcameraList(NvrchangeList) |
|
|
|
e.stopPropagation() |
|
|
|
} |
|
|
|
function nvronBlur(index){//nvr摄像头名称修改失去焦点 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) |
|
|
|
NvrchangeList[index].change=false |
|
|
|
setNVRcameraList(NvrchangeList) |
|
|
|
} |
|
|
|
function inputchange(e,index){//nvr摄像头名称修改 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) |
|
|
|
NvrchangeList[index].name=e |
|
|
|
setNVRcameraList(NvrchangeList) |
|
|
|
} |
|
|
|
function toggle(e,index){//nvr云台支持 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) |
|
|
|
NvrchangeList[index].support=e.target.checked |
|
|
|
setNVRcameraList(NvrchangeList) |
|
|
|
e.stopPropagation() |
|
|
|
} |
|
|
|
function allChoose(e){//全选/全不选 |
|
|
|
let chooseList=[] |
|
|
|
if(NVRcameraList.length==nvrCheckList.length){ |
|
|
|
setNvrCheckList([]) |
|
|
|
setIsAllChoose(false) |
|
|
|
} |
|
|
|
else{ |
|
|
|
for (let index = 0; index < NVRcameraList.length; index++) { |
|
|
|
chooseList.push(NVRcameraList[index].id) |
|
|
|
} |
|
|
|
setNvrCheckList(chooseList) |
|
|
|
setIsAllChoose(true) |
|
|
|
} |
|
|
|
} |
|
|
|
function playVideo(e) {//nvr播放视频 |
|
|
|
console.log('22222222222222222'); |
|
|
|
e.stopPropagation() |
|
|
|
} |
|
|
|
useImperativeHandle(dRef,() => ({//传给父组件方法 |
|
|
|
id: 5, |
|
|
|
value: "128g", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 6, |
|
|
|
value: "256g", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 7, |
|
|
|
value: ">256g", |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
useImperativeHandle(dRef, () => ({ |
|
|
|
//传给父组件方法 |
|
|
|
//子组件暴露给父组件的方法 |
|
|
|
cascadeCameraForm : form.current.validate, |
|
|
|
resetCascadeCamera : form.current.reset, |
|
|
|
setNVRcameraList : setNVRcameraList, |
|
|
|
setNvrCheckList : setNvrCheckList, |
|
|
|
setIsAllChoose : setIsAllChoose, |
|
|
|
})) |
|
|
|
cascadeCameraForm: form.current.validate, |
|
|
|
resetCascadeCamera: form.current.reset, |
|
|
|
})); |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Form |
|
|
|
<Form |
|
|
|
allowEmpty |
|
|
|
labelPosition='left' |
|
|
|
labelAlign='left' |
|
|
|
labelWidth= '115px' |
|
|
|
onValueChange={values=>{console.log(values);setEquipmentNum(values.equipmentNum)}} |
|
|
|
getFormApi={formApi => form.current = formApi}> |
|
|
|
labelPosition="left" |
|
|
|
labelAlign="left" |
|
|
|
labelWidth="115px" |
|
|
|
onValueChange={(values) => { |
|
|
|
console.log(values); |
|
|
|
|
|
|
|
}} |
|
|
|
getFormApi={(formApi) => (form.current = formApi)} |
|
|
|
> |
|
|
|
<Row> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Input field='foreignDomainName' label='外域名称:' initValue={''} placeholder='请输入外域名称' style={{ width:307 }} |
|
|
|
rules={[ |
|
|
|
{ required: true, message: '请输入外域名称' } |
|
|
|
]}/> |
|
|
|
<Form.Input |
|
|
|
field="externalDomain" |
|
|
|
label="外域名称:" |
|
|
|
initValue={""}v |
|
|
|
placeholder="请输入外域名称" |
|
|
|
style={{ width: 307 }} |
|
|
|
rules={[{ required: true, message: "请输入外域名称" }]} |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Select label="级联方式:" field='cascadeMode' placeholder='请选择级联方式' style={{ width:307 }} |
|
|
|
rules={[ |
|
|
|
{ required: true, message: '请选择输入级联方式' } |
|
|
|
]}> |
|
|
|
{memoryList.map((item,index)=>( |
|
|
|
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|
|
|
))} |
|
|
|
<Form.Select |
|
|
|
label="级联方式:" |
|
|
|
field="cascadeType" |
|
|
|
initValue="上级域" |
|
|
|
style={{ width: 307 }} |
|
|
|
rules={[{ required: true, message: "请选择输入级联方式" }]} |
|
|
|
> |
|
|
|
<Form.Select.Option value="上级域"> |
|
|
|
上级域 |
|
|
|
</Form.Select.Option> |
|
|
|
</Form.Select> |
|
|
|
</Col> |
|
|
|
<Col span={12}> |
|
|
|
<Form.Select label="SIP编号:" field='sipNum' placeholder='请选择SIP编号' style={{ width:307 }} |
|
|
|
rules={[ |
|
|
|
{ required: true, message: '请选择SIP编号' } |
|
|
|
]}> |
|
|
|
{memoryList.map((item,index)=>( |
|
|
|
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|
|
|
<Form.Select |
|
|
|
label="SIP编号:" |
|
|
|
field="sip" |
|
|
|
placeholder="请选择SIP编号" |
|
|
|
style={{ width: 307 }} |
|
|
|
rules={[{ required: true, message: "请选择SIP编号" }]} |
|
|
|
> |
|
|
|
{sip.map((item, index) => ( |
|
|
|
<Form.Select.Option key={index} value={item.streamid}> |
|
|
|
{item.streamid} |
|
|
|
</Form.Select.Option> |
|
|
|
))} |
|
|
|
</Form.Select> |
|
|
|
</Col> |
|
|
|
<Col span={24}> |
|
|
|
{NVRcameraList.length>0?<div style={{display: 'flex',alignItems: 'center',justifyContent: 'flex-end',marginRight:19}}> |
|
|
|
<Radio |
|
|
|
checked={isAllChoose} |
|
|
|
mode="advanced" |
|
|
|
onChange={e=>allChoose(e)} |
|
|
|
aria-label="全选"> |
|
|
|
全选 |
|
|
|
</Radio> |
|
|
|
</div>:''} |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<CheckboxGroup type='pureCard' direction='vertical' aria-label="视频流获取" |
|
|
|
value={nvrCheckList} |
|
|
|
onChange={(nvrCheck) => { |
|
|
|
setNvrCheckList(nvrCheck); |
|
|
|
console.log('11111111111',nvrCheck); |
|
|
|
if(NVRcameraList.length==nvrCheck.length){ |
|
|
|
setIsAllChoose(true) |
|
|
|
} |
|
|
|
else{ |
|
|
|
setIsAllChoose(false) |
|
|
|
} |
|
|
|
}}> |
|
|
|
{NVRcameraList.length>0?NVRcameraList.map((item,index)=>( |
|
|
|
<Col key={index} span={12} style={{display:'flex',justifyContent:'center',marginTop:12}}> |
|
|
|
<Checkbox value={item.id} |
|
|
|
extra={ |
|
|
|
<div> |
|
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',height:30}}> |
|
|
|
<div>通道名称：{item.change?<Input autofocus style={{width:100}} value={item.name} onChange={e=>inputchange(e,index)} onBlur={()=>nvronBlur(index)}></Input>:item.name}</div> |
|
|
|
<div style={{display:'flex',alignItems:'center'}}> |
|
|
|
<IconEdit |
|
|
|
style={{fontSize:16,marginLeft:18,cursor: "pointer",color:'#1859C1'}} |
|
|
|
onClick={e=>NvrChangeName(e,index)}/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{marginTop:8,width:246}}>设备编号：{item.number}</div> |
|
|
|
<div style={{marginTop:12,display:'flex',justifyContent:'space-between',alignItems:'center'}}> |
|
|
|
<IconPlayCircle size='extra-large' style={{color:'#1859C1',}} onClick={e=>playVideo(e)}/> |
|
|
|
<Radio |
|
|
|
checked={item.support} |
|
|
|
mode="advanced" |
|
|
|
onChange={e=>toggle(e,index)} |
|
|
|
aria-label="单选" |
|
|
|
> |
|
|
|
云台支持 |
|
|
|
</Radio> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
style={{width:280,border:'1px solid #F9F9F9',}}> |
|
|
|
</Checkbox> |
|
|
|
</Col> |
|
|
|
)):''} |
|
|
|
</CheckboxGroup> |
|
|
|
</Row> |
|
|
|
</Form> |
|
|
|
</> |
|
|
|
@ -189,4 +120,4 @@ function mapStateToProps(state) { |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(cascadeCamera); |
|
|
|
export default connect(mapStateToProps)(cascadeCamera); |
|
|
|
|
