5 changed files with 433 additions and 380 deletions
@ -1,358 +1,417 @@ |
|||||
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 { |
import { |
||||
Form, |
Form, |
||||
Row, |
Row, |
||||
Col, |
Col, |
||||
Button, |
Button, |
||||
CheckboxGroup, |
CheckboxGroup, |
||||
Checkbox, |
Checkbox, |
||||
Radio, |
Radio, |
||||
Input, |
Input, |
||||
|
Spin, |
||||
} from "@douyinfe/semi-ui"; |
} from "@douyinfe/semi-ui"; |
||||
import { IconEdit, IconPlayCircle } from "@douyinfe/semi-icons"; |
import { IconEdit, IconPlayCircle, IconTickCircle } from "@douyinfe/semi-icons"; |
||||
import "./cameraModal.less"; |
import "./cameraModal.less"; |
||||
import PerfectScrollbar from "perfect-scrollbar"; |
import PerfectScrollbar from "perfect-scrollbar"; |
||||
import { isIndexed } from "immutable"; |
import { isIndexed } from "immutable"; |
||||
|
|
||||
let equipmentScrollbar; |
let equipmentScrollbar; |
||||
function nvrCamera({ dispatch, actions, nvrRef, cameraData }) { |
function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }) { |
||||
const { equipmentWarehouse } = actions; |
const { equipmentWarehouse } = actions; |
||||
const cameraDataNvr = cameraData.nvr || ""; |
const cameraDataNvr = cameraData.nvr || ""; |
||||
const form = useRef(); |
const form = useRef(); |
||||
const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选 |
const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选 |
||||
const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表 |
const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表 |
||||
const [isAllChoose, setIsAllChoose] = useState(false); //全选 |
const [isAllChoose, setIsAllChoose] = useState(false); //全选 |
||||
const [equipmentNum, setEquipmentNum] = useState(""); //nvr视频编号 |
const [equipmentNum, setEquipmentNum] = useState(""); //nvr视频编号 |
||||
|
const [isloading, setloading] = useState(false); //是否显示loading |
||||
|
const [loadingTip, setloadingTip] = useState("正在接入视频流..."); //loading tip的值 |
||||
|
const [step, setstep] = useState("none"); |
||||
|
const [stepp, setstepp] = useState("none"); |
||||
|
|
||||
useEffect(() => { |
useEffect(() => { |
||||
NVRcameraList |
NVRcameraList |
||||
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { |
? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", { |
||||
suppressScrollX: true, |
suppressScrollX: true, |
||||
})) |
})) |
||||
: ""; |
: ""; |
||||
}, [NVRcameraList]); |
}, [NVRcameraList]); |
||||
useEffect(() => { |
useEffect(() => { |
||||
const videoStreaming = document.getElementById("video_streaming"); |
const videoStreaming = document.getElementById("video_streaming"); |
||||
if (videoStreaming && equipmentScrollbar) { |
if (videoStreaming && equipmentScrollbar) { |
||||
equipmentScrollbar.update(); |
equipmentScrollbar.update(); |
||||
} |
} |
||||
}); |
}); |
||||
useEffect(() => { |
useEffect(() => { |
||||
cameraDataNvr |
if (cameraDataNvr) { |
||||
? dispatch( |
setloading(true); |
||||
equipmentWarehouse.getVideoStreaming({ |
setstep("block"); |
||||
streamId: cameraDataNvr.serialNo, |
dispatch( |
||||
}) |
equipmentWarehouse.getVideoStreaming({ |
||||
).then((res) => { |
streamId: cameraDataNvr.serialNo, |
||||
let oneData = res.payload.data[0]; |
}) |
||||
|
).then((res) => { |
||||
let modifyData = res.payload.data.find( |
console.log(res) |
||||
(item) => item.camera.name == cameraData.name |
let oneData = res.payload.data[0]; |
||||
); |
let modifyData = res.payload.data.find( |
||||
console.log(oneData); |
(item) => item.camera == null ? false : item.camera.name == cameraData.name |
||||
console.log(modifyData); |
); |
||||
let data = res.payload.data.map((item, index) => { |
let data = res.payload.data.map((item, index) => { |
||||
if (index == 0) { |
if (index == 0) { |
||||
item = modifyData; |
item = modifyData; |
||||
} |
} |
||||
if ( |
if ( |
||||
item.camera |
item.camera |
||||
? item.camera.name == cameraData.name && index > 0 |
? item.camera.name == cameraData.name && index > 0 |
||||
: index < 0 |
: index < 0 |
||||
) { |
) { |
||||
item = oneData; |
item = oneData; |
||||
} |
} |
||||
item.change = false; |
item.change = false; |
||||
item.support = false; |
item.support = false; |
||||
if (item.camera) { |
if (item.camera) { |
||||
item.name = item.camera.name; |
item.name = item.camera.name; |
||||
} |
} |
||||
|
return item; |
||||
|
}); |
||||
|
setNVRcameraList(data); |
||||
|
setNvrCheckList([data[0].id]); |
||||
|
if (res.success) { |
||||
|
setTimeout(() => { |
||||
|
setloadingTip("接入完成"); |
||||
|
setTimeout(() => { |
||||
|
setstep("none"); |
||||
|
setloading(false); |
||||
|
setstepp("block"); |
||||
|
setloadingTip("正在接入视频流..."); |
||||
|
}, 800); |
||||
|
}, 800) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
return item; |
//NVR添加页面跳到nvr摄像头添加页面 |
||||
}); |
if (addNvr) { |
||||
console.log(data); |
setloading(true); |
||||
setNVRcameraList(data); |
setstep("block"); |
||||
|
dispatch(equipmentWarehouse.getVideoStreaming({ streamId: nvrNumber })).then((res) => { |
||||
|
let chooseList = []; |
||||
|
let data = res.payload.data.map((item) => { |
||||
|
item.change = false; |
||||
|
item.support = false; |
||||
|
return item; |
||||
|
}); |
||||
|
setNVRcameraList(data); |
||||
|
for (let index = 0; index < data.length; index++) { |
||||
|
chooseList.push(data[index].id); |
||||
|
} |
||||
|
setNvrCheckList(chooseList); |
||||
|
setIsAllChoose(true); |
||||
|
if (res.success) { |
||||
|
setTimeout(() => { |
||||
|
setloadingTip("接入完成"); |
||||
|
setTimeout(() => { |
||||
|
setstep("none"); |
||||
|
setloading(false); |
||||
|
setstepp("block"); |
||||
|
setloadingTip("正在接入视频流..."); |
||||
|
}, 800); |
||||
|
}, 800) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
setNvrCheckList([data[0].id]); |
}, []); |
||||
}) |
function NvrChangeName (e, index, name) { |
||||
: ""; |
//nvr摄像头视频流获取修改名称 |
||||
}, []); |
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
||||
function NvrChangeName(e, index, name) { |
if (!cameraDataNvr || cameraData.name == name) { |
||||
//nvr摄像头视频流获取修改名称 |
NvrchangeList[index].change = true; |
||||
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
setNVRcameraList(NvrchangeList); |
||||
if (!cameraDataNvr || cameraData.name == name) { |
e.stopPropagation(); |
||||
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 toggle (e, index) { |
||||
|
//nvr云台支持 |
||||
|
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
||||
|
NvrchangeList[index].support = e.target.checked; |
||||
|
setNVRcameraList(NvrchangeList); |
||||
|
e.stopPropagation(); |
||||
|
} |
||||
|
function getVideoList () { |
||||
|
form.current |
||||
|
.validate() |
||||
|
.then((values) => { |
||||
|
//表单校验成功 |
||||
|
let chooseList = []; |
||||
|
let valuess = JSON.parse(JSON.stringify(values)); |
||||
|
valuess.streamId = values.serialNo; |
||||
|
delete valuess.serialNo; |
||||
|
setloading(true); |
||||
|
setstep("block"); |
||||
|
dispatch(equipmentWarehouse.getVideoStreaming(valuess)).then((res) => { |
||||
|
let data = res.payload.data.map((item) => { |
||||
|
item.change = false; |
||||
|
item.support = false; |
||||
|
return item; |
||||
|
}); |
||||
|
setNVRcameraList(data); |
||||
|
for (let index = 0; index < data.length; index++) { |
||||
|
chooseList.push(data[index].id); |
||||
|
} |
||||
|
setNvrCheckList(chooseList); |
||||
|
setIsAllChoose(true); |
||||
|
if (res.success) { |
||||
|
setTimeout(() => { |
||||
|
setloadingTip("接入完成"); |
||||
|
setTimeout(() => { |
||||
|
setstep("none"); |
||||
|
setloading(false); |
||||
|
setstepp("block"); |
||||
|
setloadingTip("正在接入视频流..."); |
||||
|
}, 800); |
||||
|
}, 800) |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
.catch((errors) => { |
||||
|
//表单校验失败 |
||||
|
console.log("errors", errors); |
||||
|
}); |
||||
} |
} |
||||
} |
function allChoose (e) { |
||||
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)); |
|
||||
console.log(e); |
|
||||
NvrchangeList[index].name = e; |
|
||||
setNVRcameraList(NvrchangeList); |
|
||||
} |
|
||||
function toggle(e, index) { |
|
||||
//nvr云台支持 |
|
||||
console.log(e) |
|
||||
let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList)); |
|
||||
console.log(NvrchangeList) |
|
||||
NvrchangeList[index].support = e.target.checked; |
|
||||
setNVRcameraList(NvrchangeList); |
|
||||
e.stopPropagation(); |
|
||||
} |
|
||||
function getVideoList() { |
|
||||
form.current |
|
||||
.validate() |
|
||||
.then((values) => { |
|
||||
//表单校验成功 |
|
||||
let chooseList = []; |
let chooseList = []; |
||||
let valuess = JSON.parse(JSON.stringify(values)); |
if (NVRcameraList.length == nvrCheckList.length) { |
||||
valuess.streamId = values.serialNo; |
setNvrCheckList([]); |
||||
delete valuess.serialNo; |
setIsAllChoose(false); |
||||
dispatch(equipmentWarehouse.getVideoStreaming(valuess)).then((res) => { |
} else { |
||||
let data = res.payload.data.map((item) => { |
for (let index = 0; index < NVRcameraList.length; index++) { |
||||
item.change = false; |
chooseList.push(NVRcameraList[index].id); |
||||
item.support = false; |
} |
||||
return item; |
setNvrCheckList(chooseList); |
||||
}); |
setIsAllChoose(true); |
||||
console.log(data); |
} |
||||
setNVRcameraList(data); |
|
||||
for (let index = 0; index < data.length; index++) { |
|
||||
chooseList.push(data[index].id); |
|
||||
} |
|
||||
console.log(chooseList); |
|
||||
setNvrCheckList(chooseList); |
|
||||
setIsAllChoose(true); |
|
||||
}); |
|
||||
}) |
|
||||
.catch((errors) => { |
|
||||
//表单校验失败 |
|
||||
console.log("errors", errors); |
|
||||
}); |
|
||||
} |
|
||||
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) { |
||||
function playVideo(e) { |
//nvr播放视频 |
||||
//nvr播放视频 |
console.log("22222222222222222"); |
||||
console.log("22222222222222222"); |
e.stopPropagation(); |
||||
e.stopPropagation(); |
|
||||
} |
|
||||
function onDisabled(name) { |
|
||||
if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) { |
|
||||
return false; |
|
||||
} else { |
|
||||
return true; |
|
||||
} |
} |
||||
} |
function onDisabled (name) { |
||||
useImperativeHandle(nvrRef, () => ({ |
if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) { |
||||
//传给父组件方法 |
return false; |
||||
//aa即为子组件暴露给父组件的方法 |
} else { |
||||
resetFluoriteCamera: form.current.reset, |
return true; |
||||
equipmentNum: cameraDataNvr ? cameraDataNvr.serialNo : equipmentNum, |
} |
||||
NVRcameraList: NVRcameraList.filter((v) => |
} |
||||
nvrCheckList.some((e) => e == v.id) |
useImperativeHandle(nvrRef, () => ({ |
||||
), |
//传给父组件方法 |
||||
})); |
//aa即为子组件暴露给父组件的方法 |
||||
return ( |
resetFluoriteCamera: form.current.reset, |
||||
<> |
equipmentNum: cameraDataNvr ? cameraDataNvr.serialNo : addNvr ? nvrNumber : equipmentNum, |
||||
<Form |
NVRcameraList: NVRcameraList.filter((v) => |
||||
allowEmpty |
nvrCheckList.some((e) => e == v.id) |
||||
labelPosition="left" |
), |
||||
labelAlign="left" |
})); |
||||
labelWidth="115px" |
return ( |
||||
onValueChange={(values) => { |
<> |
||||
setEquipmentNum(values.serialNo); |
<Form |
||||
}} |
allowEmpty |
||||
getFormApi={(formApi) => (form.current = formApi)} |
labelPosition="left" |
||||
> |
labelAlign="left" |
||||
<div style={{ display: "flex" }}> |
labelWidth="115px" |
||||
<Form.Input |
onValueChange={(values) => { |
||||
field="serialNo" |
setEquipmentNum(values.serialNo); |
||||
maxLength="39" |
}} |
||||
label="设备编号:" |
getFormApi={(formApi) => (form.current = formApi)} |
||||
disabled={cameraDataNvr ? true : false} |
|
||||
initValue={cameraDataNvr ? cameraDataNvr.serialNo : ""} |
|
||||
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 }} |
|
||||
> |
|
||||
<Radio |
|
||||
checked={isAllChoose} |
|
||||
mode="advanced" |
|
||||
disabled={cameraDataNvr ? true : false} |
|
||||
onChange={(e) => allChoose(e)} |
|
||||
aria-label="全选" |
|
||||
> |
|
||||
全选 |
|
||||
</Radio> |
|
||||
</div> |
|
||||
) : ( |
|
||||
"" |
|
||||
)} |
|
||||
</div> |
|
||||
<Row> |
|
||||
<CheckboxGroup |
|
||||
type="pureCard" |
|
||||
direction="vertical" |
|
||||
aria-label="视频流获取" |
|
||||
value={nvrCheckList} |
|
||||
onChange={(nvrCheck) => { |
|
||||
setNvrCheckList(nvrCheck); |
|
||||
if (NVRcameraList.length == nvrCheck.length) { |
|
||||
setIsAllChoose(true); |
|
||||
} else { |
|
||||
setIsAllChoose(false); |
|
||||
} |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
id="video_streaming" |
|
||||
style={{ maxHeight: 300, position: "relative" }} |
|
||||
> |
> |
||||
{NVRcameraList.length > 0 |
<div style={{ display: "flex" }}> |
||||
? NVRcameraList.map((item, index) => ( |
<Form.Input |
||||
<Col |
field="serialNo" |
||||
key={index} |
maxLength="39" |
||||
span={12} |
label="设备编号:" |
||||
style={{ |
disabled={cameraDataNvr ? true : addNvr ? true : false} |
||||
display: "flex", |
initValue={cameraDataNvr ? cameraDataNvr.serialNo : addNvr ? nvrNumber : ""} |
||||
justifyContent: "center", |
placeholder="请输入设备编号" |
||||
marginTop: 12, |
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 }} |
||||
> |
> |
||||
<Checkbox |
视频流获取 |
||||
value={item.id} |
</Button> |
||||
disabled={onDisabled(item.name)} |
{NVRcameraList.length > 0 ? ( |
||||
extra={ |
<div |
||||
<div> |
style={{ display: "flex", alignItems: "center", marginLeft: 211 }} |
||||
<div |
> |
||||
style={{ |
<Radio |
||||
display: "flex", |
checked={isAllChoose} |
||||
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, 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)} |
|
||||
/> |
|
||||
<Radio |
|
||||
checked={item.support} |
|
||||
mode="advanced" |
mode="advanced" |
||||
disabled={onDisabled(item.name)} |
disabled={cameraDataNvr ? true : false} |
||||
onChange={(e) => toggle(e, index)} |
onChange={(e) => allChoose(e)} |
||||
aria-label="单选" |
aria-label="全选" |
||||
> |
> |
||||
云台支持 |
全选 |
||||
</Radio> |
</Radio> |
||||
</div> |
</div> |
||||
</div> |
) : ( |
||||
} |
"" |
||||
style={{ width: 280, border: "1px solid #F9F9F9" }} |
)} |
||||
></Checkbox> |
</div> |
||||
</Col> |
<Row> |
||||
)) |
<CheckboxGroup |
||||
: ""} |
type="pureCard" |
||||
</div> |
direction="vertical" |
||||
</CheckboxGroup> |
aria-label="视频流获取" |
||||
</Row> |
value={nvrCheckList} |
||||
</Form> |
onChange={(nvrCheck) => { |
||||
</> |
setNvrCheckList(nvrCheck); |
||||
); |
if (NVRcameraList.length == nvrCheck.length) { |
||||
|
setIsAllChoose(true); |
||||
|
} else { |
||||
|
setIsAllChoose(false); |
||||
|
} |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
id="video_streaming" |
||||
|
style={{ maxHeight: 300, position: "relative" }} |
||||
|
> |
||||
|
<Spin tip={loadingTip} spinning={isloading}> |
||||
|
<div style={{ display: stepp }}> |
||||
|
{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)} |
||||
|
></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)} |
||||
|
/> |
||||
|
<Radio |
||||
|
checked={item.support} |
||||
|
mode="advanced" |
||||
|
disabled={onDisabled(item.name)} |
||||
|
onChange={(e) => toggle(e, index)} |
||||
|
aria-label="单选" |
||||
|
> |
||||
|
云台支持 |
||||
|
</Radio> |
||||
|
</div> |
||||
|
</div> |
||||
|
} |
||||
|
style={{ width: 280, border: "1px solid #F9F9F9" }} |
||||
|
></Checkbox> |
||||
|
</Col> |
||||
|
)) |
||||
|
: ""} |
||||
|
</div> |
||||
|
<div style={{ height: 50, width: "100%", display: step }}></div> |
||||
|
</Spin> |
||||
|
|
||||
|
</div> |
||||
|
</CheckboxGroup> |
||||
|
</Row> |
||||
|
</Form> |
||||
|
</> |
||||
|
); |
||||
} |
} |
||||
function mapStateToProps(state) { |
function mapStateToProps (state) { |
||||
const { auth, global, members } = state; |
const { auth, global, members } = state; |
||||
return { |
return { |
||||
loading: members.isRequesting, |
loading: members.isRequesting, |
||||
user: auth.user, |
user: auth.user, |
||||
actions: global.actions, |
actions: global.actions, |
||||
members: members.data, |
members: members.data, |
||||
}; |
}; |
||||
} |
} |
||||
|
|
||||
export default connect(mapStateToProps)(nvrCamera); |
export default connect(mapStateToProps)(nvrCamera); |
||||
|
|||||
Loading…
Reference in new issue