@@ -337,7 +384,7 @@ function cameraModal (props) {
}}
onClick={() => handleChoose(item.id)}
>
- {modify ? item.id == clickNum ? "" :
{clickNum == 1 ? (
-
+
+
+
) : clickNum == 2 ? (
-
+
+
+
) : clickNum == 3 ? (
-
+
+
+
) : (
-
+
+
+
)}
-
+
);
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
index 952e06e..5db43aa 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
-import { Form, Row, Col } from "@douyinfe/semi-ui";
+import { Form, Row, Col,Spin } from "@douyinfe/semi-ui";
import "./cameraModal.less";
function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) {
const { TextArea } = Form;
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx
index 464c3af..877c3ac 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrCamera.jsx
@@ -1,358 +1,416 @@
import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
import {
- Form,
- Row,
- Col,
- Button,
- CheckboxGroup,
- Checkbox,
- Radio,
- Input,
+ Form,
+ Row,
+ Col,
+ Button,
+ CheckboxGroup,
+ Checkbox,
+ Radio,
+ Input,
+ Spin,
} from "@douyinfe/semi-ui";
-import { IconEdit, IconPlayCircle } from "@douyinfe/semi-icons";
+import { IconEdit, IconPlayCircle, IconTickCircle } from "@douyinfe/semi-icons";
import "./cameraModal.less";
import PerfectScrollbar from "perfect-scrollbar";
import { isIndexed } from "immutable";
let equipmentScrollbar;
-function nvrCamera({ dispatch, actions, nvrRef, cameraData }) {
- const { equipmentWarehouse } = actions;
- const cameraDataNvr = cameraData.nvr || "";
- const form = useRef();
- const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选
- const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表
- const [isAllChoose, setIsAllChoose] = useState(false); //全选
- const [equipmentNum, setEquipmentNum] = useState(""); //nvr视频编号
+function nvrCamera ({ dispatch, actions, nvrRef, cameraData, addNvr, nvrNumber }) {
+ const { equipmentWarehouse } = actions;
+ const cameraDataNvr = cameraData.nvr || "";
+ const form = useRef();
+ const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选
+ const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表
+ const [isAllChoose, setIsAllChoose] = useState(false); //全选
+ 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(() => {
- 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) => {
+ 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="全选"
+ >
+ 全选
+
+
+ ) : (
+ ""
+ )}
+