|
|
|
@ -1,157 +1,269 @@ |
|
|
|
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,Button,CheckboxGroup, Checkbox,Radio,Input } from '@douyinfe/semi-ui'; |
|
|
|
import { IconEdit,IconPlayCircle } from '@douyinfe/semi-icons'; |
|
|
|
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}){ |
|
|
|
import PerfectScrollbar from "perfect-scrollbar"; |
|
|
|
|
|
|
|
let equipmentScrollbar; |
|
|
|
function nvrCamera({ dispatch, actions, nvrRef }) { |
|
|
|
const { equipmentWarehouse } = actions; |
|
|
|
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() |
|
|
|
const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选 |
|
|
|
const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表 |
|
|
|
const [isAllChoose, setIsAllChoose] = useState(false); //全选 |
|
|
|
const [equipmentNum, setEquipmentNum] = useState(""); //nvr视频编号 |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
NVRcameraList |
|
|
|
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { |
|
|
|
suppressScrollX: true, |
|
|
|
})) |
|
|
|
: ""; |
|
|
|
}, [NVRcameraList]); |
|
|
|
useEffect(() => { |
|
|
|
const videoStreaming = document.getElementById("video_streaming"); |
|
|
|
if (videoStreaming && equipmentScrollbar) { |
|
|
|
equipmentScrollbar.update(); |
|
|
|
} |
|
|
|
function nvronBlur(index){//nvr摄像头名称修改失去焦点 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) |
|
|
|
NvrchangeList[index].change=false |
|
|
|
setNVRcameraList(NvrchangeList) |
|
|
|
}); |
|
|
|
function NvrChangeName(e, index) { |
|
|
|
//nvr摄像头视频流获取修改名称 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
|
NvrchangeList[index].change = true; |
|
|
|
setNVRcameraList(NvrchangeList); |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
function inputchange(e,index){//nvr摄像头名称修改 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)) |
|
|
|
NvrchangeList[index].name=e |
|
|
|
setNVRcameraList(NvrchangeList) |
|
|
|
function nvronBlur(index) { |
|
|
|
//nvr摄像头名称修改失去焦点 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
|
NvrchangeList[index].change = false; |
|
|
|
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 inputchange(e, index) { |
|
|
|
//nvr摄像头名称修改 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
|
console.log(e); |
|
|
|
NvrchangeList[index].name = e; |
|
|
|
setNVRcameraList(NvrchangeList); |
|
|
|
} |
|
|
|
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) |
|
|
|
function toggle(e, index) { |
|
|
|
//nvr云台支持 |
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
|
NvrchangeList[index].support = e.target.checked; |
|
|
|
setNVRcameraList(NvrchangeList); |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
setNvrCheckList(chooseList) |
|
|
|
setIsAllChoose(true) |
|
|
|
}) |
|
|
|
.catch(errors=>{//表单校验失败 |
|
|
|
console.log('errors',errors); |
|
|
|
}) |
|
|
|
function getVideoList() { |
|
|
|
form.current |
|
|
|
.validate() |
|
|
|
.then((values) => { |
|
|
|
//表单校验成功 |
|
|
|
let chooseList = []; |
|
|
|
let valuess = JSON.parse(JSON.stringify(values)); |
|
|
|
valuess.streamId = values.serialNo; |
|
|
|
delete valuess.serialNo; |
|
|
|
dispatch(equipmentWarehouse.getVideoStreaming(valuess)).then((res) => { |
|
|
|
let data = res.payload.data.map((item) => { |
|
|
|
item.change = false; |
|
|
|
item.support = false; |
|
|
|
return item; |
|
|
|
}); |
|
|
|
console.log(data); |
|
|
|
setNVRcameraList(data); |
|
|
|
for (let index = 0; index < data.length; index++) { |
|
|
|
chooseList.push(data[index].id); |
|
|
|
} |
|
|
|
function allChoose(e){//全选/全不选 |
|
|
|
let chooseList=[] |
|
|
|
if(NVRcameraList.length==nvrCheckList.length){ |
|
|
|
setNvrCheckList([]) |
|
|
|
setIsAllChoose(false) |
|
|
|
console.log(chooseList); |
|
|
|
setNvrCheckList(chooseList); |
|
|
|
setIsAllChoose(true); |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch((errors) => { |
|
|
|
//表单校验失败 |
|
|
|
console.log("errors", errors); |
|
|
|
}); |
|
|
|
} |
|
|
|
else{ |
|
|
|
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) |
|
|
|
chooseList.push(NVRcameraList[index].id); |
|
|
|
} |
|
|
|
setNvrCheckList(chooseList) |
|
|
|
setIsAllChoose(true) |
|
|
|
setNvrCheckList(chooseList); |
|
|
|
setIsAllChoose(true); |
|
|
|
} |
|
|
|
} |
|
|
|
function playVideo(e) {//nvr播放视频 |
|
|
|
console.log('22222222222222222'); |
|
|
|
e.stopPropagation() |
|
|
|
function playVideo(e) { |
|
|
|
//nvr播放视频 |
|
|
|
console.log("22222222222222222"); |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
// useImperativeHandle(cRef,() => ({//传给父组件方法 |
|
|
|
// //aa即为子组件暴露给父组件的方法 |
|
|
|
// getDate : form.current.validate, |
|
|
|
// // resetFluoriteCamera : form.current.reset |
|
|
|
// })) |
|
|
|
useImperativeHandle(nvrRef, () => ({ |
|
|
|
//传给父组件方法 |
|
|
|
//aa即为子组件暴露给父组件的方法 |
|
|
|
resetFluoriteCamera: form.current.reset, |
|
|
|
equipmentNum: equipmentNum, |
|
|
|
NVRcameraList: NVRcameraList.filter((v) => |
|
|
|
nvrCheckList.some((e) => e == v.id) |
|
|
|
), |
|
|
|
})); |
|
|
|
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 }} |
|
|
|
labelPosition="left" |
|
|
|
labelAlign="left" |
|
|
|
labelWidth="115px" |
|
|
|
onValueChange={(values) => { |
|
|
|
setEquipmentNum(values.serialNo); |
|
|
|
}} |
|
|
|
getFormApi={(formApi) => (form.current = formApi)} |
|
|
|
> |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Form.Input |
|
|
|
field="serialNo" |
|
|
|
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}}> |
|
|
|
{ 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="全选"> |
|
|
|
onChange={(e) => allChoose(e)} |
|
|
|
aria-label="全选" |
|
|
|
> |
|
|
|
全选 |
|
|
|
</Radio> |
|
|
|
</div>:''} |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
"" |
|
|
|
)} |
|
|
|
</div> |
|
|
|
<Row> |
|
|
|
<CheckboxGroup type='pureCard' direction='vertical' aria-label="视频流获取" |
|
|
|
<CheckboxGroup |
|
|
|
type="pureCard" |
|
|
|
direction="vertical" |
|
|
|
aria-label="视频流获取" |
|
|
|
value={nvrCheckList} |
|
|
|
onChange={(nvrCheck) => { |
|
|
|
setNvrCheckList(nvrCheck); |
|
|
|
// console.log('11111111111',nvrCheck); |
|
|
|
if(NVRcameraList.length==nvrCheck.length){ |
|
|
|
setIsAllChoose(true) |
|
|
|
if (NVRcameraList.length == nvrCheck.length) { |
|
|
|
setIsAllChoose(true); |
|
|
|
} else { |
|
|
|
setIsAllChoose(false); |
|
|
|
} |
|
|
|
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} |
|
|
|
}} |
|
|
|
> |
|
|
|
<div id="video_streaming" style={{ maxHeight: 300,position: "relative"}}> |
|
|
|
{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'}}> |
|
|
|
<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)}/> |
|
|
|
style={{ |
|
|
|
fontSize: 16, |
|
|
|
marginLeft: 18, |
|
|
|
cursor: "pointer", |
|
|
|
color: "#1859C1", |
|
|
|
}} |
|
|
|
onClick={(e) => NvrChangeName(e, index)} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 8, width: 246 }}> |
|
|
|
设备编号：{item.parent} |
|
|
|
</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)}/> |
|
|
|
<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)} |
|
|
|
onChange={(e) => toggle(e, index)} |
|
|
|
aria-label="单选" |
|
|
|
> |
|
|
|
云台支持 |
|
|
|
@ -159,10 +271,12 @@ function nvrCamera({cRef}){ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
style={{width:280,border:'1px solid #F9F9F9',}}> |
|
|
|
</Checkbox> |
|
|
|
style={{ width: 280, border: "1px solid #F9F9F9" }} |
|
|
|
></Checkbox> |
|
|
|
</Col> |
|
|
|
)):''} |
|
|
|
)) |
|
|
|
: ""} |
|
|
|
</div> |
|
|
|
</CheckboxGroup> |
|
|
|
</Row> |
|
|
|
</Form> |
|
|
|
|
