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