{
- NVRcameraList
- ? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", {
- suppressScrollX: true,
- }))
- : "";
- }, [NVRcameraList]);
- useEffect(() => {
- const videoStreaming = document.getElementById("video_streaming");
- if (videoStreaming && equipmentScrollbar) {
- equipmentScrollbar.update();
- }
- });
- useEffect(() => {
- cameraDataNvr
- ? dispatch(
- equipmentWarehouse.getVideoStreaming({
- streamId: cameraDataNvr.serialNo,
- })
- ).then((res) => {
- let oneData = res.payload.data[0];
-
- let modifyData = res.payload.data.find(
- (item) => item.camera.name == cameraData.name
- );
- console.log(oneData);
- console.log(modifyData);
- let data = res.payload.data.map((item, index) => {
- if (index == 0) {
- item = modifyData;
- }
- if (
- item.camera
- ? item.camera.name == cameraData.name && index > 0
- : index < 0
- ) {
- item = oneData;
- }
- item.change = false;
- item.support = false;
- if (item.camera) {
- item.name = item.camera.name;
- }
+ useEffect(() => {
+ NVRcameraList
+ ? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", {
+ suppressScrollX: true,
+ }))
+ : "";
+ }, [NVRcameraList]);
+ useEffect(() => {
+ const videoStreaming = document.getElementById("video_streaming");
+ if (videoStreaming && equipmentScrollbar) {
+ equipmentScrollbar.update();
+ }
+ });
+ useEffect(() => {
+ if (cameraDataNvr) {
+ setloading(true);
+ setstep("block");
+ dispatch(
+ equipmentWarehouse.getVideoStreaming({
+ streamId: cameraDataNvr.serialNo,
+ })
+ ).then((res) => {
+ console.log(res)
+ let oneData = res.payload.data[0];
+ let modifyData = res.payload.data.find(
+ (item) => item.camera == null ? false : item.camera.name == cameraData.name
+ );
+ let data = res.payload.data.map((item, index) => {
+ if (index == 0) {
+ item = modifyData;
+ }
+ if (
+ item.camera
+ ? item.camera.name == cameraData.name && index > 0
+ : index < 0
+ ) {
+ item = oneData;
+ }
+ item.change = false;
+ item.support = false;
+ if (item.camera) {
+ 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;
- });
- console.log(data);
- setNVRcameraList(data);
+ //NVR添加页面跳到nvr摄像头添加页面
+ if (addNvr) {
+ setloading(true);
+ 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));
- if (!cameraDataNvr || cameraData.name == name) {
- NvrchangeList[index].change = true;
- setNVRcameraList(NvrchangeList);
- e.stopPropagation();
+ }, []);
+ function NvrChangeName (e, index, name) {
+ //nvr摄像头视频流获取修改名称
+ let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
+ if (!cameraDataNvr || 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 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 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) => {
- //表单校验成功
+ function allChoose (e) {
+ //全选/全不选
let chooseList = [];
- let valuess = JSON.parse(JSON.stringify(values));
- valuess.streamId = values.serialNo;
- delete valuess.serialNo;
- dispatch(equipmentWarehouse.getVideoStreaming(valuess)).then((res) => {
- let data = res.payload.data.map((item) => {
- item.change = false;
- item.support = false;
- return item;
- });
- 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);
+ 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;
+ function playVideo (e) {
+ //nvr播放视频
+ console.log("22222222222222222");
+ e.stopPropagation();
}
- }
- useImperativeHandle(nvrRef, () => ({
- //传给父组件方法
- //aa即为子组件暴露给父组件的方法
- resetFluoriteCamera: form.current.reset,
- equipmentNum: cameraDataNvr ? cameraDataNvr.serialNo : equipmentNum,
- NVRcameraList: NVRcameraList.filter((v) =>
- nvrCheckList.some((e) => e == v.id)
- ),
- }));
- return (
- <>
-
-
- );
+ disabled={cameraDataNvr ? true : false}
+ onChange={(e) => allChoose(e)}
+ aria-label="全选"
+ >
+ 全选
+
+
+ ) : (
+ ""
+ )}
+
+
+ {
+ setNvrCheckList(nvrCheck);
+ if (NVRcameraList.length == nvrCheck.length) {
+ setIsAllChoose(true);
+ } else {
+ setIsAllChoose(false);
+ }
+ }}
+ >
+
+
+
+ {NVRcameraList.length > 0
+ ? NVRcameraList.map((item, index) => (
+
+
+
+
+ 通道名称：
+ {item.change ? (
+ inputchange(e, index)}
+ onBlur={() => nvronBlur(index)}
+ >
+ ) : (
+ item.name
+ )}
+
+
+
+ NvrChangeName(e, index, item.name)
+ }
+ />
+
+
+ 设备编号：{item.streamid}
+
+
+ playVideo(e)}
+ />
+ toggle(e, index)}
+ aria-label="单选"
+ >
+ 云台支持
+
+
+
+
+
+ );
}
-function mapStateToProps(state) {
- const { auth, global, members } = state;
- return {
- loading: members.isRequesting,
- user: auth.user,
- actions: global.actions,
- members: members.data,
- };
+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)(nvrCamera);
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
index 578dda1..01fe83b 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect,useImperativeHandle } from "react";
import { connect } from "react-redux";
import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui";
import { IconTickCircle } from "@douyinfe/semi-icons";
@@ -6,7 +6,7 @@ import { IconTickCircle } from "@douyinfe/semi-icons";
import moment from "moment";
function nvrModal(props) {
- const { modalName } = props;
+ const { modalName ,nvrRef} = props;
const { dispatch, actions, vender, close } = props;
const nvrData = props.nvrData || {}; //修改时传来的值
const form = useRef();
@@ -18,10 +18,6 @@ function nvrModal(props) {
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边
const [formObj, setformObj] = useState(); //接口入参
- useEffect(() => {
- console.log(props.user.id);
- }, []);
-
function showDialog() {
//打开弹框
setVisible(true);
@@ -47,6 +43,7 @@ function nvrModal(props) {
.validate()
.then((values) => {
//表单校验
+ console.log(values)
let valuesObj = JSON.parse(JSON.stringify(values));
valuesObj.longitude = values.position.split(",")[0];
valuesObj.latitude = values.position.split(",")[1];
@@ -61,7 +58,6 @@ function nvrModal(props) {
serialNo: valuesObj.serialNo,
})
).then((res) => {
- console.log(res);
var after = new moment(); //验证后时间
var duration = moment.duration(after.diff(front))._data.milliseconds;
if (res.success) {
@@ -127,6 +123,11 @@ function nvrModal(props) {
//高德经纬度
window.open("https://lbs.amap.com/tools/picker", "_blank");
}
+ useImperativeHandle(nvrRef, () => ({
+ //传给父组件方法
+ //aa即为子组件暴露给父组件的方法
+ nvrNumber: ()=>formObj.serialNo
+ }));
return (
<>
{modalName == "add" ? "添加NVR" : "修改"}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
index 523c90e..58242e9 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
@@ -37,6 +37,8 @@ const CameraHeader = (props) => {
const [cameraData, setCameraData] = useState({}); //表格数据
const [modify, setModify] = useState(false); //修改
const [parentCamera, setParentCamera] = useState(""); //级联摄像头父级设备
+ const [addNvr, setAddNvr] = useState(false); //nvr页面传递参数打开NVR摄像头添加弹框
+ const [nvrNumber, setNvrNumber] = useState();
const { equipmentWarehouse } = actions;
const api = useRef();
const searchb = useRef(search)
@@ -44,8 +46,14 @@ const CameraHeader = (props) => {
const CAMERAS = "cameras";
useEffect(() => {
-
console.log(props)
+ if (props.location.query) {
+ setAddNvr(props.location.query.addNvr)
+ setNvrNumber(props.location.query.serialNo)
+ setCameraModal(true);
+ }
+
+
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
attribute(res.payload.data);
@@ -115,7 +123,6 @@ const CameraHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
- console.log(row);
return (