|
@ -1,23 +1,52 @@ |
|
|
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, Checkbox, Radio, CheckboxGroup, } from "@douyinfe/semi-ui"; |
|
|
import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, Input } from "@douyinfe/semi-ui"; |
|
|
import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons"; |
|
|
import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons"; |
|
|
import "./cameraModal.less"; |
|
|
import "./cameraModal.less"; |
|
|
import PerfectScrollbar from "perfect-scrollbar"; |
|
|
import PerfectScrollbar from "perfect-scrollbar"; |
|
|
let equipmentScrollbar; |
|
|
let equipmentScrollbar; |
|
|
|
|
|
|
|
|
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete }) { |
|
|
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close }) { |
|
|
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 [cascadeList, setCascadeList] = useState([]); //nvr视频流列表 |
|
|
const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选 |
|
|
const [CheckList, setCheckList] = useState([]); //nvr视频流多选 |
|
|
const [isAllChoose, setIsAllChoose] = useState(false); //全选 |
|
|
const [isAllChoose, setIsAllChoose] = useState(false); //全选 |
|
|
const cameraDataNvr = cameraData.nvr || ""; |
|
|
const [formData, setFormData] = useState() //表单数据 |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { |
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { |
|
|
setSip(res.payload.data); |
|
|
setSip(res.payload.data); |
|
|
|
|
|
if (cameraData) { |
|
|
|
|
|
let sip=res.payload.data.find((item)=>item.streamid==cameraData.topSerialNo) |
|
|
|
|
|
dispatch(equipmentWarehouse.getCascadeStream({ sip: sip.sipip })).then((res) => { |
|
|
|
|
|
console.log(res.payload.data); |
|
|
|
|
|
let oneData = res.payload.data[0]; |
|
|
|
|
|
let modifyData = res.payload.data.find( |
|
|
|
|
|
(item) => item.id == cameraData.gbId |
|
|
|
|
|
); |
|
|
|
|
|
console.log(modifyData) |
|
|
|
|
|
let data = res.payload.data.map((item, index) => { |
|
|
|
|
|
if (item.camera) { |
|
|
|
|
|
item.name = item.camera.name; |
|
|
|
|
|
} |
|
|
|
|
|
if (index == 0) { |
|
|
|
|
|
item = modifyData; |
|
|
|
|
|
} |
|
|
|
|
|
if ( |
|
|
|
|
|
|
|
|
|
|
|
item.camera&&item.camera.name == cameraData.name |
|
|
|
|
|
|
|
|
|
|
|
) { |
|
|
|
|
|
item = oneData; |
|
|
|
|
|
} |
|
|
|
|
|
return item; |
|
|
|
|
|
}) |
|
|
|
|
|
setCascadeList(data) |
|
|
|
|
|
setCheckList([data[0].id]) |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
const videoStreaming = document.getElementById("video_streaming"); |
|
|
const videoStreaming = document.getElementById("video_streaming"); |
|
|
if (videoStreaming && equipmentScrollbar) { |
|
|
if (videoStreaming && equipmentScrollbar) { |
|
@ -26,32 +55,32 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
}, []); |
|
|
}, []); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
NVRcameraList |
|
|
cascadeList |
|
|
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { |
|
|
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { |
|
|
suppressScrollX: true, |
|
|
suppressScrollX: true, |
|
|
})) |
|
|
})) |
|
|
: ""; |
|
|
: ""; |
|
|
}, [NVRcameraList]); |
|
|
}, [cascadeList]); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
//测试成功后获取级联视频流 |
|
|
//测试成功后获取级联视频流 |
|
|
console.log(testComplete) |
|
|
|
|
|
if (testComplete) { |
|
|
if (testComplete) { |
|
|
dispatch(equipmentWarehouse.getCascadeStream({ sip: "111" })).then((res) => { |
|
|
dispatch(equipmentWarehouse.getCascadeStream({ sip: formData.sip })).then((res) => { |
|
|
console.log(res.payload.data); |
|
|
console.log(res.payload.data); |
|
|
let chooseList = []; |
|
|
let chooseList = []; |
|
|
let data = res.payload.data.map((item, index) => { |
|
|
let data = res.payload.data.map((item, index) => { |
|
|
item.change = false; |
|
|
item.change = false; |
|
|
return item; |
|
|
return item; |
|
|
}) |
|
|
}) |
|
|
setNVRcameraList(data) |
|
|
setCascadeList(data) |
|
|
for (let index = 0; index < data.length; index++) { |
|
|
for (let index = 0; index < data.length; index++) { |
|
|
chooseList.push(data[index].id); |
|
|
chooseList.push(data[index].id); |
|
|
} |
|
|
} |
|
|
setNvrCheckList(chooseList); |
|
|
setCheckList(chooseList); |
|
|
setIsAllChoose(true); |
|
|
setIsAllChoose(true); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
close() |
|
|
}, [testComplete]) |
|
|
}, [testComplete]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -87,48 +116,49 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
function NvrChangeName (e, index, name) { |
|
|
function NvrChangeName (e, index, id) { |
|
|
//级联摄像头视频流获取修改名称 |
|
|
//级联摄像头视频流获取修改名称 |
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList)); |
|
|
if (cameraData.name == name) { |
|
|
if (!cameraData||cameraData.gbId==id) { |
|
|
NvrchangeList[index].change = true; |
|
|
NvrchangeList[index].change = true; |
|
|
setNVRcameraList(NvrchangeList); |
|
|
setCascadeList(NvrchangeList); |
|
|
} |
|
|
} |
|
|
e.stopPropagation(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
} |
|
|
function nvronBlur (index) { |
|
|
function nvronBlur (index) { |
|
|
//nvr摄像头名称修改失去焦点 |
|
|
//nvr摄像头名称修改失去焦点 |
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList)); |
|
|
NvrchangeList[index].change = false; |
|
|
NvrchangeList[index].change = false; |
|
|
setNVRcameraList(NvrchangeList); |
|
|
setCascadeList(NvrchangeList); |
|
|
} |
|
|
} |
|
|
function inputchange (e, index) { |
|
|
function inputchange (e, index) { |
|
|
//nvr摄像头名称修改 |
|
|
//nvr摄像头名称修改 |
|
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
|
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList)); |
|
|
NvrchangeList[index].name = e; |
|
|
NvrchangeList[index].name = e; |
|
|
setNVRcameraList(NvrchangeList); |
|
|
setCascadeList(NvrchangeList); |
|
|
} |
|
|
} |
|
|
function allChoose (e) { |
|
|
function allChoose (e) { |
|
|
//全选/全不选 |
|
|
//全选/全不选 |
|
|
let chooseList = []; |
|
|
let chooseList = []; |
|
|
if (NVRcameraList.length == nvrCheckList.length) { |
|
|
if (cascadeList.length == CheckList.length) { |
|
|
setNvrCheckList([]); |
|
|
setCheckList([]); |
|
|
setIsAllChoose(false); |
|
|
setIsAllChoose(false); |
|
|
} else { |
|
|
} else { |
|
|
for (let index = 0; index < NVRcameraList.length; index++) { |
|
|
for (let index = 0; index < cascadeList.length; index++) { |
|
|
chooseList.push(NVRcameraList[index].id); |
|
|
chooseList.push(cascadeList[index].id); |
|
|
} |
|
|
} |
|
|
setNvrCheckList(chooseList); |
|
|
setCheckList(chooseList); |
|
|
setIsAllChoose(true); |
|
|
setIsAllChoose(true); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
function playVideo (e) { |
|
|
function playVideo (e) { |
|
|
//nvr播放视频 |
|
|
//nvr播放视频 |
|
|
console.log("22222222222222222"); |
|
|
console.log("22222222222222222"); |
|
|
|
|
|
|
|
|
e.stopPropagation(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
} |
|
|
function onDisabled (name) { |
|
|
function onDisabled (id) { |
|
|
if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) { |
|
|
if (id==cameraData.gbId) { |
|
|
return false; |
|
|
return false; |
|
|
} else { |
|
|
} else { |
|
|
return true; |
|
|
return true; |
|
@ -140,6 +170,12 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
//子组件暴露给父组件的方法 |
|
|
//子组件暴露给父组件的方法 |
|
|
cascadeCameraForm: form.current.validate, |
|
|
cascadeCameraForm: form.current.validate, |
|
|
resetCascadeCamera: form.current.reset, |
|
|
resetCascadeCamera: form.current.reset, |
|
|
|
|
|
cascadeList: cascadeList.filter((v) => |
|
|
|
|
|
CheckList.some((e) => e == v.id) |
|
|
|
|
|
), |
|
|
|
|
|
toempty: () => { |
|
|
|
|
|
setCascadeList([]) |
|
|
|
|
|
} |
|
|
})); |
|
|
})); |
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
@ -150,6 +186,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
labelWidth="115px" |
|
|
labelWidth="115px" |
|
|
onValueChange={(values) => { |
|
|
onValueChange={(values) => { |
|
|
console.log(values); |
|
|
console.log(values); |
|
|
|
|
|
setFormData(values) |
|
|
|
|
|
|
|
|
}} |
|
|
}} |
|
|
getFormApi={(formApi) => (form.current = formApi)} |
|
|
getFormApi={(formApi) => (form.current = formApi)} |
|
@ -202,14 +239,14 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
id="video_streaming" |
|
|
id="video_streaming" |
|
|
style={{ maxHeight: 300, position: "relative" }} |
|
|
style={{ maxHeight: 300, position: "relative" }} |
|
|
> |
|
|
> |
|
|
{NVRcameraList.length > 0 ? ( |
|
|
{cascadeList.length > 0 ? ( |
|
|
<div |
|
|
<div |
|
|
style={{ display: "flex", alignItems: "center", marginLeft: 211 }} |
|
|
style={{ display: "flex", justifyContent: "flex-end", marginRight: 50 }} |
|
|
> |
|
|
> |
|
|
<Radio |
|
|
<Radio |
|
|
checked={isAllChoose} |
|
|
checked={isAllChoose} |
|
|
mode="advanced" |
|
|
mode="advanced" |
|
|
disabled={true} |
|
|
disabled={cameraData ? true : false} |
|
|
onChange={(e) => allChoose(e)} |
|
|
onChange={(e) => allChoose(e)} |
|
|
aria-label="全选" |
|
|
aria-label="全选" |
|
|
> |
|
|
> |
|
@ -223,17 +260,17 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
type="pureCard" |
|
|
type="pureCard" |
|
|
direction="vertical" |
|
|
direction="vertical" |
|
|
aria-label="视频流获取" |
|
|
aria-label="视频流获取" |
|
|
value={nvrCheckList} |
|
|
value={CheckList} |
|
|
onChange={(nvrCheck) => { |
|
|
onChange={(nvrCheck) => { |
|
|
setNvrCheckList(nvrCheck); |
|
|
setCheckList(nvrCheck); |
|
|
if (NVRcameraList.length == nvrCheck.length) { |
|
|
if (cascadeList.length == nvrCheck.length) { |
|
|
setIsAllChoose(true); |
|
|
setIsAllChoose(true); |
|
|
} else { |
|
|
} else { |
|
|
setIsAllChoose(false); |
|
|
setIsAllChoose(false); |
|
|
} |
|
|
} |
|
|
}}> |
|
|
}}> |
|
|
{NVRcameraList.length > 0 |
|
|
{cascadeList.length > 0 |
|
|
? NVRcameraList.map((item, index) => ( |
|
|
? cascadeList.map((item, index) => ( |
|
|
<Col |
|
|
<Col |
|
|
key={index} |
|
|
key={index} |
|
|
span={12} |
|
|
span={12} |
|
@ -245,7 +282,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
> |
|
|
> |
|
|
<Checkbox |
|
|
<Checkbox |
|
|
value={item.id} |
|
|
value={item.id} |
|
|
disabled={onDisabled(item.name)} |
|
|
disabled={onDisabled(item.id)} |
|
|
extra={ |
|
|
extra={ |
|
|
<div> |
|
|
<div> |
|
|
<div |
|
|
<div |
|
@ -285,7 +322,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes |
|
|
color: "#1859C1", |
|
|
color: "#1859C1", |
|
|
}} |
|
|
}} |
|
|
onClick={(e) => |
|
|
onClick={(e) => |
|
|
NvrChangeName(e, index, item.name) |
|
|
NvrChangeName(e, index, item.id) |
|
|
} |
|
|
} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|