|
|
@ -1,20 +1,60 @@ |
|
|
import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; |
|
|
import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
import { connect } from "react-redux"; |
|
|
import { Form, Row, Col } from "@douyinfe/semi-ui"; |
|
|
import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, } from "@douyinfe/semi-ui"; |
|
|
|
|
|
import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons"; |
|
|
import "./cameraModal.less"; |
|
|
import "./cameraModal.less"; |
|
|
function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { |
|
|
import PerfectScrollbar from "perfect-scrollbar"; |
|
|
|
|
|
let equipmentScrollbar; |
|
|
|
|
|
|
|
|
|
|
|
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete }) { |
|
|
const form = useRef(); |
|
|
const form = useRef(); |
|
|
const { equipmentWarehouse } = actions; |
|
|
const { equipmentWarehouse } = actions; |
|
|
const [sip, setSip] = useState([]); |
|
|
const [sip, setSip] = useState([]); |
|
|
|
|
|
const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表 |
|
|
|
|
|
const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选 |
|
|
|
|
|
const [isAllChoose, setIsAllChoose] = useState(false); //全选 |
|
|
|
|
|
const cameraDataNvr = cameraData.nvr || ""; |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { |
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { |
|
|
setSip(res.payload.data); |
|
|
setSip(res.payload.data); |
|
|
}); |
|
|
}); |
|
|
|
|
|
const videoStreaming = document.getElementById("video_streaming"); |
|
|
|
|
|
if (videoStreaming && equipmentScrollbar) { |
|
|
|
|
|
equipmentScrollbar.update(); |
|
|
|
|
|
} |
|
|
}, []); |
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
NVRcameraList |
|
|
|
|
|
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { |
|
|
|
|
|
suppressScrollX: true, |
|
|
|
|
|
})) |
|
|
|
|
|
: ""; |
|
|
|
|
|
}, [NVRcameraList]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
//测试成功后获取级联视频流 |
|
|
|
|
|
console.log(testComplete) |
|
|
|
|
|
if (testComplete) { |
|
|
|
|
|
dispatch(equipmentWarehouse.getCascadeStream({ sip: "111" })).then((res) => { |
|
|
|
|
|
console.log(res.payload.data); |
|
|
|
|
|
let chooseList = []; |
|
|
|
|
|
let data = res.payload.data.map((item, index) => { |
|
|
|
|
|
item.change = false; |
|
|
|
|
|
return item; |
|
|
|
|
|
}) |
|
|
|
|
|
setNVRcameraList(data) |
|
|
|
|
|
for (let index = 0; index < data.length; index++) { |
|
|
|
|
|
chooseList.push(data[index].id); |
|
|
|
|
|
} |
|
|
|
|
|
setNvrCheckList(chooseList); |
|
|
|
|
|
setIsAllChoose(true); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}, [testComplete]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//内存卡列表 |
|
|
//内存卡列表 |
|
|
const memoryList = [ |
|
|
const memoryList = [ |
|
|
{ |
|
|
{ |
|
|
@ -47,6 +87,54 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
function NvrChangeName (e, index, name) { |
|
|
|
|
|
//级联摄像头视频流获取修改名称 |
|
|
|
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
|
|
|
if (cameraData.name == name) { |
|
|
|
|
|
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 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(); |
|
|
|
|
|
} |
|
|
|
|
|
function onDisabled (name) { |
|
|
|
|
|
if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) { |
|
|
|
|
|
return false; |
|
|
|
|
|
} else { |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
useImperativeHandle(dRef, () => ({ |
|
|
useImperativeHandle(dRef, () => ({ |
|
|
//传给父组件方法 |
|
|
//传给父组件方法 |
|
|
//子组件暴露给父组件的方法 |
|
|
//子组件暴露给父组件的方法 |
|
|
@ -108,6 +196,128 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData ,parentCamera}) { |
|
|
</Form.Select> |
|
|
</Form.Select> |
|
|
</Col> |
|
|
</Col> |
|
|
</Row> |
|
|
</Row> |
|
|
|
|
|
<Row> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
id="video_streaming" |
|
|
|
|
|
style={{ maxHeight: 300, position: "relative" }} |
|
|
|
|
|
> |
|
|
|
|
|
{NVRcameraList.length > 0 ? ( |
|
|
|
|
|
<div |
|
|
|
|
|
style={{ display: "flex", alignItems: "center", marginLeft: 211 }} |
|
|
|
|
|
> |
|
|
|
|
|
<Radio |
|
|
|
|
|
checked={isAllChoose} |
|
|
|
|
|
mode="advanced" |
|
|
|
|
|
disabled={true} |
|
|
|
|
|
onChange={(e) => allChoose(e)} |
|
|
|
|
|
aria-label="全选" |
|
|
|
|
|
> |
|
|
|
|
|
全选 |
|
|
|
|
|
</Radio> |
|
|
|
|
|
</div> |
|
|
|
|
|
) : ( |
|
|
|
|
|
"" |
|
|
|
|
|
)} |
|
|
|
|
|
<CheckboxGroup |
|
|
|
|
|
type="pureCard" |
|
|
|
|
|
direction="vertical" |
|
|
|
|
|
aria-label="视频流获取" |
|
|
|
|
|
value={nvrCheckList} |
|
|
|
|
|
onChange={(nvrCheck) => { |
|
|
|
|
|
setNvrCheckList(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} |
|
|
|
|
|
disabled={onDisabled(item.name)} |
|
|
|
|
|
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)} |
|
|
|
|
|
onClick={(e) => e.stopPropagation()} |
|
|
|
|
|
></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, item.name) |
|
|
|
|
|
} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ marginTop: 8, width: 246 }}> |
|
|
|
|
|
设备编号：{item.streamid} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
style={{ |
|
|
|
|
|
marginTop: 12, |
|
|
|
|
|
display: "flex", |
|
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<IconPlayCircle |
|
|
|
|
|
size="extra-large" |
|
|
|
|
|
style={{ color: "#1859C1" }} |
|
|
|
|
|
onClick={(e) => playVideo(e)} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
|
|
|
style={{ width: 280, border: "1px solid #F9F9F9" }} |
|
|
|
|
|
></Checkbox> |
|
|
|
|
|
</Col> |
|
|
|
|
|
)) |
|
|
|
|
|
: ""} |
|
|
|
|
|
</CheckboxGroup> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</Row> |
|
|
</Form> |
|
|
</Form> |
|
|
</> |
|
|
</> |
|
|
); |
|
|
); |
|
|
|
