yuan_yi
2 years ago
6 changed files with 965 additions and 190 deletions
@ -0,0 +1,192 @@ |
|||
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 "./cameraModal.less"; |
|||
function cascadeCamera({dRef}){ |
|||
const form = useRef(); |
|||
const [memoryList,setMemoryList] = useState([ |
|||
{ |
|||
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,() => ({//传给父组件方法 |
|||
//子组件暴露给父组件的方法 |
|||
cascadeCameraForm : form.current.validate, |
|||
resetCascadeCamera : form.current.reset, |
|||
setNVRcameraList : setNVRcameraList, |
|||
setNvrCheckList : setNvrCheckList, |
|||
setIsAllChoose : setIsAllChoose, |
|||
})) |
|||
return ( |
|||
<> |
|||
<Form |
|||
allowEmpty |
|||
labelPosition='left' |
|||
labelAlign='left' |
|||
labelWidth= '115px' |
|||
onValueChange={values=>{console.log(values);setEquipmentNum(values.equipmentNum)}} |
|||
getFormApi={formApi => form.current = formApi}> |
|||
<Row> |
|||
<Col span={12}> |
|||
<Form.Input field='foreignDomainName' label='外域名称:' initValue={''} 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> |
|||
</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> |
|||
</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> |
|||
</> |
|||
); |
|||
} |
|||
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)(cascadeCamera); |
|||
@ -0,0 +1,262 @@ |
|||
import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react' |
|||
import { connect } from "react-redux"; |
|||
import { Form,Row,Col} from '@douyinfe/semi-ui'; |
|||
import "./cameraModal.less"; |
|||
function fluoriteCamera({cRef}){ |
|||
const { TextArea } = Form; |
|||
const form = useRef(); |
|||
const [cloud,setcloud] = useState('')//云台支持 |
|||
const [voice,setvoice] = useState('')//语音支持 |
|||
const [switching,setSwitching] = useState('')//高清切换 |
|||
const [memoryList,setMemoryList] = useState([ |
|||
{ |
|||
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' |
|||
} |
|||
])//内存卡列表 |
|||
function handleLocation(){//高德经纬度 |
|||
window.open('https://lbs.amap.com/tools/picker','_blank') |
|||
} |
|||
function positionForm(val){//安装位置校验 |
|||
let zz = /^(-?\d+)(\.\d+)?$/ |
|||
if(!val){ |
|||
return '请输入或拾取高德经纬度坐标' |
|||
} |
|||
else if(val.split(',').length!=2){ |
|||
return '请输入格式为116.354169,39.835452的经纬度坐标' |
|||
} |
|||
else if(!zz.test(val.split(',')[0])){ |
|||
return '只能填写数字' |
|||
} |
|||
else if(!zz.test(val.split(',')[1])){ |
|||
return '只能填写数字' |
|||
} |
|||
else{ |
|||
return '' |
|||
} |
|||
} |
|||
useImperativeHandle(cRef,() => ({//传给父组件方法 |
|||
//子组件暴露给父组件的方法 |
|||
fluoriteCameraForm : form.current.validate, |
|||
resetFluoriteCamera : form.current.reset |
|||
})) |
|||
return ( |
|||
<> |
|||
<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: '请输入设备名称' } |
|||
]}/> |
|||
{/* 高清切换 */} |
|||
<Form.RadioGroup |
|||
label="高清切换:" |
|||
field='hdSwitching' |
|||
type='pureCard' |
|||
direction='horizontal' |
|||
style={{padding:0,paddingTop:1,paddingBottom:1}} |
|||
rules={[ |
|||
{ required: true, message: '请选择高清切换' } |
|||
]} |
|||
onChange={(checked) => { |
|||
console.log(checked.target.value); |
|||
if(checked.target.value=='yes'){ |
|||
setSwitching('yes') |
|||
} |
|||
else{ |
|||
setSwitching('no') |
|||
} |
|||
}}> |
|||
<Form.Radio value="yes" style={{width:58,height:30,padding:0,margin:0,background:'#F9F9F9'}}> |
|||
<div className='switching' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}> |
|||
支持 |
|||
</div> |
|||
{switching=='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='switching' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}> |
|||
不支持 |
|||
</div> |
|||
{switching=='no'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}> |
|||
<img src="/assets/images/background/formchoose.png" alt="1" /> |
|||
</div>:''} |
|||
</Form.Radio> |
|||
</Form.RadioGroup> |
|||
{/* 安装位置 */} |
|||
<div style={{display:'flex'}}> |
|||
<Form.Input field='Use11rName1312' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:270 }} |
|||
validate={positionForm} |
|||
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 style={{display:'flex',}}> |
|||
<div> |
|||
<Form.Select label="设备类型:" field='business23' placeholder='请选择摄像头类型' style={{ width:160 }} |
|||
rules={[ |
|||
{ required: true, message: '请选择摄像头类型' } |
|||
]}> |
|||
{memoryList.map((item,index)=>( |
|||
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
</div> |
|||
<div style={{marginLeft:7}}> |
|||
<Form.Select noLabel='true' field='business244' placeholder='请选择能力' style={{ width:140 }} |
|||
rules={[ |
|||
{ required: true, message: '请选择能力' } |
|||
]}> |
|||
{memoryList.map((item,index)=>( |
|||
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
</div> |
|||
</div> |
|||
</Col> |
|||
<Col span={12}> |
|||
{/* 云台支持 */} |
|||
<Form.RadioGroup |
|||
label="云台支持:" |
|||
field='role' |
|||
type='pureCard' |
|||
direction='horizontal' |
|||
style={{padding:0,paddingTop:1,paddingBottom:1}} |
|||
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> |
|||
{/* 内存 */} |
|||
<div style={{display:'flex'}}> |
|||
<Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:92 }}> |
|||
{memoryList.map((item,index)=>( |
|||
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
{/* 语音支持 */} |
|||
<div style={{marginLeft:18}}> |
|||
<Form.RadioGroup |
|||
labelWidth= '76px' |
|||
label="语音支持:" |
|||
field='role2' |
|||
type='pureCard' |
|||
direction='horizontal' |
|||
style={{padding:0,paddingTop:1,paddingBottom:1}} |
|||
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> |
|||
{/* RTMP地址接入 */} |
|||
<TextArea |
|||
style={{ width:320, height: 90 }} |
|||
field='description' |
|||
label='RTMP地址接入:' |
|||
placeholder='请输入RTMP地址接入' |
|||
/> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</> |
|||
); |
|||
} |
|||
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)(fluoriteCamera); |
|||
@ -0,0 +1,224 @@ |
|||
import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react' |
|||
import { connect } from "react-redux"; |
|||
import { Form,Row,Col } from '@douyinfe/semi-ui'; |
|||
import "./cameraModal.less"; |
|||
function ipcCamera({aRef}){ |
|||
const { TextArea } = Form; |
|||
const form = useRef(); |
|||
const [cloud,setcloud] = useState('')//云台支持 |
|||
const [voice,setvoice] = useState('')//语音支持 |
|||
const [memoryList,setMemoryList] = useState([ |
|||
{ |
|||
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' |
|||
} |
|||
])//内存卡列表 |
|||
function handleLocation(){//高德经纬度 |
|||
window.open('https://lbs.amap.com/tools/picker','_blank') |
|||
} |
|||
function positionForm(val){//安装位置校验 |
|||
let zz = /^(-?\d+)(\.\d+)?$/ |
|||
if(!val){ |
|||
return '请输入或拾取高德经纬度坐标' |
|||
} |
|||
else if(val.split(',').length!=2){ |
|||
return '请输入格式为116.354169,39.835452的经纬度坐标' |
|||
} |
|||
else if(!zz.test(val.split(',')[0])){ |
|||
return '只能填写数字' |
|||
} |
|||
else if(!zz.test(val.split(',')[1])){ |
|||
return '只能填写数字' |
|||
} |
|||
else{ |
|||
return '' |
|||
} |
|||
} |
|||
useImperativeHandle(aRef,() => ({//传给父组件方法 |
|||
//子组件暴露给父组件的方法 |
|||
ipcCameraForm : form.current.validate, |
|||
resetIpcCamera : form.current.reset |
|||
})) |
|||
return ( |
|||
<> |
|||
<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: '请输入设备名称' } |
|||
]}/> |
|||
<Form.Input field='Use11rName11' label='设备厂家:' placeholder='请选择设备厂家' style={{ width:307 }}/> |
|||
<div style={{display:'flex'}}> |
|||
<Form.Input field='Use11rName1312' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:270 }} |
|||
validate={positionForm} |
|||
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}> |
|||
<Form.RadioGroup |
|||
label="云台支持:" |
|||
field='role' |
|||
type='pureCard' |
|||
direction='horizontal' |
|||
style={{padding:0,paddingTop:1,paddingBottom:1}} |
|||
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> |
|||
<div style={{display:'flex'}}> |
|||
<Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:92 }}> |
|||
{memoryList.map((item,index)=>( |
|||
<Form.Select.Option key={index} value={item.id}>{item.value}</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> |
|||
<TextArea |
|||
style={{ width:320, height: 90 }} |
|||
field='description' |
|||
label='RTMP地址接入:' |
|||
placeholder='请输入RTMP地址接入' |
|||
/> |
|||
</Col> |
|||
<Col span={18}> |
|||
<div style={{display:'flex',}}> |
|||
<div> |
|||
<Form.Select label="设备类型:" field='business23' placeholder='请选择摄像头类型' style={{ width:160 }} |
|||
rules={[ |
|||
{ required: true, message: '请选择摄像头类型' } |
|||
]}> |
|||
{memoryList.map((item,index)=>( |
|||
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
</div> |
|||
<div style={{marginLeft:7}}> |
|||
<Form.Select noLabel='true' field='business244' placeholder='请选择能力' style={{ width:140 }} |
|||
rules={[ |
|||
{ required: true, message: '请选择能力' } |
|||
]}> |
|||
{memoryList.map((item,index)=>( |
|||
<Form.Select.Option key={index} value={item.id}>{item.value}</Form.Select.Option> |
|||
))} |
|||
</Form.Select> |
|||
</div> |
|||
</div> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</> |
|||
); |
|||
} |
|||
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)(ipcCamera); |
|||
@ -0,0 +1,182 @@ |
|||
import React, { useState ,useRef,useEffect,useImperativeHandle} from 'react' |
|||
import { connect } from "react-redux"; |
|||
import { Form,Row,Col,Button,CheckboxGroup, Checkbox,Radio,Input } from '@douyinfe/semi-ui'; |
|||
import { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons'; |
|||
import "./cameraModal.less"; |
|||
function nvrCamera({cRef}){ |
|||
const form = useRef(); |
|||
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 getVideoList(){ |
|||
form.current.validate().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, |
|||
}] |
|||
setNVRcameraList(nvrCameraList) |
|||
for (let index = 0; index < nvrCameraList.length; index++) { |
|||
chooseList.push(nvrCameraList[index].id) |
|||
} |
|||
setNvrCheckList(chooseList) |
|||
setIsAllChoose(true) |
|||
}) |
|||
.catch(errors=>{//表单校验失败 |
|||
console.log('errors',errors); |
|||
}) |
|||
} |
|||
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(cRef,() => ({//传给父组件方法 |
|||
// //aa即为子组件暴露给父组件的方法 |
|||
// getDate : form.current.validate, |
|||
// // resetFluoriteCamera : form.current.reset |
|||
// })) |
|||
return ( |
|||
<> |
|||
<Form |
|||
allowEmpty |
|||
labelPosition='left' |
|||
labelAlign='left' |
|||
labelWidth= '115px' |
|||
onValueChange={values=>{setEquipmentNum(values.equipmentNum)}} |
|||
getFormApi={formApi => form.current = formApi}> |
|||
<div style={{display:'flex'}}> |
|||
<Form.Input field='equipmentNum' maxLength='39' label='设备编号:' initValue={''} placeholder='请输入设备编号' style={{ width:307 }} |
|||
rules={[ |
|||
{ required: true, message: '请输入设备编号' }, |
|||
{ pattern: '^[A-Za-z0-9]+$', message: '只能输入数字或者字母' } |
|||
]}/> |
|||
<Button disabled={!equipmentNum.length>0} theme='solid' type='primary' onClick={()=>{getVideoList()}} style={{ marginLeft: 8,marginTop:12 }}>视频流获取</Button> |
|||
{NVRcameraList.length>0?<div style={{display: 'flex',alignItems: 'center',marginLeft: 211}}> |
|||
<Radio |
|||
checked={isAllChoose} |
|||
mode="advanced" |
|||
onChange={e=>allChoose(e)} |
|||
aria-label="全选"> |
|||
全选 |
|||
</Radio> |
|||
</div>:''} |
|||
</div> |
|||
<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> |
|||
</> |
|||
); |
|||
} |
|||
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)(nvrCamera); |
|||
Loading…
Reference in new issue