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.
403 lines
17 KiB
403 lines
17 KiB
import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, Input } from "@douyinfe/semi-ui";
|
|
import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons";
|
|
import "./cameraModal.less";
|
|
import PerfectScrollbar from "perfect-scrollbar";
|
|
import { VideoPlayModal } from "$components";
|
|
|
|
let equipmentScrollbar;
|
|
function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close, ashTrue, ashFalse }) {
|
|
const form = useRef();
|
|
const { equipmentWarehouse } = actions;
|
|
const [sip, setSip] = useState([]);
|
|
const [cascadeList, setCascadeList] = useState([]); //nvr视频流列表
|
|
const [CheckList, setCheckList] = useState([]); //nvr视频流多选
|
|
const [isAllChoose, setIsAllChoose] = useState(false); //全选
|
|
const [formData, setFormData] = useState() //表单数据
|
|
const [videoPlay, setVideoPlay] = useState(false);//播放
|
|
const [videoObj, setVideoObj] = useState(); //播放条件
|
|
|
|
useEffect(() => {
|
|
dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
|
|
setSip(res.payload.data);
|
|
if (cameraData.id) {
|
|
let sip = res.payload.data.find((item) => item.streamid == cameraData.topSerialNo)
|
|
console.log(sip);
|
|
dispatch(equipmentWarehouse.getCascadeStream({ streamId: sip.streamid })).then((res) => {
|
|
let oneData = res.payload.data[0];
|
|
let modifyData = res.payload.data.find(
|
|
(item) => item.id == cameraData.gbId
|
|
);
|
|
let data = res.payload.data.map((item, index) => {
|
|
if (item.camera) {
|
|
item.name = item.camera.name;
|
|
}
|
|
if (item.id == cameraData.gbId) {
|
|
item = oneData;
|
|
}
|
|
if (index == 0) {
|
|
item = modifyData;
|
|
}
|
|
return item;
|
|
})
|
|
setCascadeList(data)
|
|
setCheckList([data[0].id])
|
|
});
|
|
}
|
|
});
|
|
const videoStreaming = document.getElementById("video_streaming");
|
|
if (videoStreaming && equipmentScrollbar) {
|
|
equipmentScrollbar.update();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
cascadeList
|
|
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", {
|
|
suppressScrollX: true,
|
|
}))
|
|
: "";
|
|
}, [cascadeList]);
|
|
|
|
useEffect(() => {
|
|
//测试成功后获取级联视频流
|
|
if (testComplete) {
|
|
console.log(formData);
|
|
dispatch(equipmentWarehouse.getCascadeStream({ streamId: formData.streamId })).then((res) => {
|
|
console.log(res.payload.data);
|
|
let chooseList = [];
|
|
let data = res.payload.data.map((item, index) => {
|
|
if (item.camera) {
|
|
item.name = item.camera.name;
|
|
}
|
|
return item;
|
|
})
|
|
setCascadeList(data)
|
|
for (let index = 0; index < data.length; index++) {
|
|
chooseList.push(data[index].id);
|
|
}
|
|
setCheckList(chooseList);
|
|
setIsAllChoose(true);
|
|
});
|
|
}
|
|
close()
|
|
}, [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, id) {
|
|
//级联摄像头视频流获取修改名称
|
|
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList));
|
|
if (!cameraData.gbId || cameraData.gbId == id) {
|
|
NvrchangeList[index].change = true;
|
|
setCascadeList(NvrchangeList);
|
|
}
|
|
e.stopPropagation();
|
|
}
|
|
function nvronBlur (index) {
|
|
//nvr摄像头名称修改失去焦点
|
|
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList));
|
|
NvrchangeList[index].change = false;
|
|
setCascadeList(NvrchangeList);
|
|
}
|
|
function inputchange (e, index) {
|
|
//nvr摄像头名称修改
|
|
let NvrchangeList = JSON.parse(JSON.stringify(cascadeList));
|
|
NvrchangeList[index].name = e;
|
|
setCascadeList(NvrchangeList);
|
|
}
|
|
function allChoose (e) {
|
|
//全选/全不选
|
|
let chooseList = [];
|
|
if (cascadeList.length == CheckList.length) {
|
|
setCheckList([]);
|
|
setIsAllChoose(false);
|
|
} else {
|
|
for (let index = 0; index < cascadeList.length; index++) {
|
|
chooseList.push(cascadeList[index].id);
|
|
}
|
|
setCheckList(chooseList);
|
|
setIsAllChoose(true);
|
|
}
|
|
}
|
|
function playVideo (e, id) {
|
|
//nvr播放视频
|
|
if (cameraData.gbId == id || !cameraData.gbId) {
|
|
let data = cascadeList.find((item) => item.id == id)
|
|
console.log(formData);
|
|
setVideoObj({
|
|
type: 'cascade',
|
|
audio: false,
|
|
serialNo: data.streamid,
|
|
topSerialNo: cameraData.id ? cameraData.topSerialNo : formData?.streamId,
|
|
playUrlSd: data?.playUrl?.liveUrl?.sd["WS-RAW"],
|
|
})
|
|
setVideoPlay(true);
|
|
}
|
|
e.stopPropagation();
|
|
}
|
|
function onDisabled (id) {
|
|
if (id == cameraData.gbId || !cameraData.gbId) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
useImperativeHandle(dRef, () => ({
|
|
//传给父组件方法
|
|
//子组件暴露给父组件的方法
|
|
cascadeCameraForm: form.current.validate,
|
|
resetCascadeCamera: form.current.reset,
|
|
cascadeList: cascadeList.filter((v) =>
|
|
CheckList.some((e) => e == v.id)
|
|
),
|
|
toempty: () => {
|
|
setCascadeList([])
|
|
}
|
|
}));
|
|
return (
|
|
<>
|
|
<Form
|
|
labelPosition="left"
|
|
labelAlign="left"
|
|
labelWidth="115px"
|
|
onValueChange={(values) => {
|
|
setFormData(values)
|
|
let setting = ["externalDomain", "cascadeType", "streamId"]
|
|
let b = {}
|
|
setting.map((item) => {
|
|
if (values.hasOwnProperty(item)) {
|
|
return b.true = values.hasOwnProperty(item)
|
|
} else {
|
|
return b.false = values.hasOwnProperty(item)
|
|
}
|
|
})
|
|
Object.keys(b).length == 1 ? ashTrue() : ashFalse()
|
|
|
|
}}
|
|
initValues={{
|
|
externalDomain: cameraData.externalDomain || ""
|
|
}}
|
|
getFormApi={(formApi) => (form.current = formApi)}
|
|
>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Input
|
|
field="externalDomain"
|
|
label="外域名称:"
|
|
maxLength="36"
|
|
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="streamId"
|
|
disabled={cameraData.id ? true : false}
|
|
initValue={cameraData?.topSerialNo || ""}
|
|
placeholder="请选择SIP编号"
|
|
style={{ width: 307 }}
|
|
rules={[{ required: true, message: "请选择SIP编号" }]}
|
|
>
|
|
{sip.map((item, index) => (
|
|
<Form.Select.Option key={index} value={item.streamid}>
|
|
{item.streamid}
|
|
</Form.Select.Option>
|
|
))}
|
|
</Form.Select>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
|
|
<div
|
|
id="video_streaming"
|
|
style={{ maxHeight: 300, position: "relative" }}
|
|
>
|
|
{cascadeList.length > 0 ? (
|
|
<div
|
|
style={{ display: "flex", justifyContent: "flex-end", marginRight: 50 }}
|
|
>
|
|
<Radio
|
|
checked={isAllChoose}
|
|
mode="advanced"
|
|
disabled={cameraData.gbId ? true : false}
|
|
onChange={(e) => allChoose(e)}
|
|
aria-label="全选"
|
|
>
|
|
全选
|
|
</Radio>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
<CheckboxGroup
|
|
type="pureCard"
|
|
direction="vertical"
|
|
aria-label="视频流获取"
|
|
value={CheckList}
|
|
onChange={(nvrCheck) => {
|
|
setCheckList(nvrCheck);
|
|
if (cascadeList.length == nvrCheck.length) {
|
|
setIsAllChoose(true);
|
|
} else {
|
|
setIsAllChoose(false);
|
|
}
|
|
}}>
|
|
{cascadeList.length > 0
|
|
? cascadeList.map((item, index) => (
|
|
<Col
|
|
key={index}
|
|
span={12}
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
marginTop: 12,
|
|
}}
|
|
>
|
|
<Checkbox
|
|
value={item.id}
|
|
disabled={onDisabled(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)}
|
|
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.id)
|
|
}
|
|
/>
|
|
</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, item.id)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
style={{ width: 280, border: "1px solid #F9F9F9" }}
|
|
></Checkbox>
|
|
</Col>
|
|
))
|
|
: ""}
|
|
</CheckboxGroup>
|
|
</div>
|
|
|
|
</Row>
|
|
</Form>
|
|
{videoPlay ?
|
|
<VideoPlayModal
|
|
visible={true}
|
|
videoObj={videoObj}
|
|
close={() => {
|
|
setVideoPlay(false)
|
|
}} />
|
|
: ""
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
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);
|
|
|