You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
335 lines
14 KiB
335 lines
14 KiB
import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, } from "@douyinfe/semi-ui";
|
|
import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons";
|
|
import "./cameraModal.less";
|
|
import PerfectScrollbar from "perfect-scrollbar";
|
|
let equipmentScrollbar;
|
|
|
|
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete }) {
|
|
const form = useRef();
|
|
const { equipmentWarehouse } = actions;
|
|
const [sip, setSip] = useState([]);
|
|
const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表
|
|
const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选
|
|
const [isAllChoose, setIsAllChoose] = useState(false); //全选
|
|
const cameraDataNvr = cameraData.nvr || "";
|
|
|
|
useEffect(() => {
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
|
|
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 = [
|
|
{
|
|
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 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, () => ({
|
|
//传给父组件方法
|
|
//子组件暴露给父组件的方法
|
|
cascadeCameraForm: form.current.validate,
|
|
resetCascadeCamera: form.current.reset,
|
|
}));
|
|
return (
|
|
<>
|
|
<Form
|
|
allowEmpty
|
|
labelPosition="left"
|
|
labelAlign="left"
|
|
labelWidth="115px"
|
|
onValueChange={(values) => {
|
|
console.log(values);
|
|
|
|
}}
|
|
getFormApi={(formApi) => (form.current = formApi)}
|
|
>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Input
|
|
field="externalDomain"
|
|
label="外域名称:"
|
|
maxLength="36"
|
|
initValue={cameraData.externalDomain || ""}
|
|
placeholder="请输入外域 名称，例如“xxx市级平台”"
|
|
style={{ width: 307 }}
|
|
rules={[{ required: true, message: "请输入外域名称" }]}
|
|
/>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Select
|
|
label="级联方式:"
|
|
field="cascadeType"
|
|
initValue={cameraData.cascadeType || "上级域"}
|
|
style={{ width: 307 }}
|
|
rules={[{ required: true, message: "请选择输入级联方式" }]}
|
|
>
|
|
<Form.Select.Option value="上级域">
|
|
上级域
|
|
</Form.Select.Option>
|
|
</Form.Select>
|
|
</Col>
|
|
<Col span={14}>
|
|
<Form.Select
|
|
label="SIP编号:"
|
|
field="sip"
|
|
initValue={parentCamera || ""}
|
|
placeholder="请选择SIP编号"
|
|
style={{ width: 307 }}
|
|
rules={[{ required: true, message: "请选择SIP编号" }]}
|
|
>
|
|
{sip.map((item, index) => (
|
|
<Form.Select.Option key={index} value={item.sipip}>
|
|
{item.sipip}
|
|
</Form.Select.Option>
|
|
))}
|
|
</Form.Select>
|
|
</Col>
|
|
</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>
|
|
</>
|
|
);
|
|
}
|
|
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);
|
|
|