diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
new file mode 100644
index 0000000..80bd4cf
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/camera.js
@@ -0,0 +1,42 @@
+"use strict";
+
+import { basicAction } from "@peace/utils";
+import { ApiTable } from "$utils";
+
+export function getCamera(query) {
+ return (dispatch) =>
+ basicAction({
+ type: "get",
+ dispatch: dispatch,
+ actionType: "GET_CAMREA",
+ query: query,
+ url: `${ApiTable.getCamera}`,
+ msg: { option: "获取摄像头列表信息" },
+ reducer: { name: "equipmentWarehouseCamera" },
+ });
+ }
+
+ export function putForbidden(data) {
+ return (dispatch) =>
+ basicAction({
+ type: "put",
+ dispatch: dispatch,
+ actionType: "PUT_FORBIDDEN",
+ data,
+ url: `${ApiTable.putForbidden}`,
+ msg: { option: "" }, //禁用摄像头
+ reducer: {},
+ });
+ }
+
+ export function getCameraDetails(orgId) {
+ return (dispatch) =>
+ basicAction({
+ type: "get",
+ dispatch: dispatch,
+ actionType: "GET_CAMREA_DETAILS",
+ url: `${ApiTable.getCameraDetails.replace("{cameraId}", orgId)}`,
+ msg: { option: "" }, //获取摄像头详情
+ reducer: { name: "nvrDetails" },
+ });
+ }
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/index.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/index.js
index a6624cc..a4b6caa 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/index.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/index.js
@@ -1,7 +1,8 @@
'use strict';
import * as nvr from './nvr'
+import * as camera from './camera'
export default {
- ...nvr
+ ...nvr,...camera
}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
index f642944..23b98c5 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
@@ -27,6 +27,18 @@ export function getNvr(query) {
reducer: { name: "equipmentWarehouseNvr" },
});
}
+
+export function getNvrDetails(orgId) {
+ return (dispatch) =>
+ basicAction({
+ type: "get",
+ dispatch: dispatch,
+ actionType: "GET_NVR_DETAILS",
+ url: `${ApiTable.getNvrDetails.replace("{nvrId}", orgId)}`,
+ msg: { option: "" }, //获取nvr详情
+ reducer: { name: "nvrDetails" },
+ });
+}
export function delNvr(orgId) {
return (dispatch) =>
basicAction({
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
index 942c765..57d9d02 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
@@ -20,6 +20,7 @@ function Setup(props) {
cameraSetup,
} = props;
const [check, setCheck] = useState([]);
+
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
useEffect(() => {
@@ -35,17 +36,17 @@ function Setup(props) {
}, []);
const equipmentNVR = [
- { name: "设备厂家", value: "a" },
- { name: "添加账号", value: "b" },
- { name: "通道数", value: "c" },
- { name: "端口", value: "d" },
- { name: "设备状态", value: "e" },
- { name: "创建时间", value: "f" },
+ { name: "设备厂家", value: "manufactor" },
+ { name: "添加账号", value: "accountNumber" },
+ { name: "通道数", value: "passageway" },
+ { name: "端口", value: "port" },
+ { name: "设备状态", value: "state" },
+ { name: "创建时间", value: "time" },
];
const projectNVR = [
- { name: "项目名称", value: "g" },
- { name: "things名称", value: "h" },
- { name: "things数量", value: "i" },
+ { name: "项目名称", value: "name" },
+ { name: "pcode", value: "pcode" },
+ { name: "结构物", value: "structure" },
];
const equipmentCamera = [
{ name: "设备厂家", value: "manufactor" },
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
index 1e68740..1605372 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
@@ -1,6 +1,12 @@
import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
import { SideSheet, Tabs, TabPane, Button } from "@douyinfe/semi-ui";
import copy from "copy-to-clipboard";
+import moment from "moment";
+import PerfectScrollbar from "perfect-scrollbar";
+
+let projectScrollbar;
+let equipmentScrollbar;
function SideSheets(props) {
const {
@@ -12,39 +18,38 @@ function SideSheets(props) {
close,
SETUPS,
cameraSetup,
+ rowId,
+ venderList,
} = props;
+ const { equipmentWarehouse } = actions;
const [clickStyle, setclickStyle] = useState();
- const list = [
- {
- name: "项目名称",
- a: "南昌县智慧环保",
- b: "南昌县智慧环保",
- c: "南昌市市政隧道综合管理 哦哦哦哦哦 哦哦哦哦 哦哦哦哦 哦哦哦哦哦哦哦哦哦 哦",
- d: "C",
- },
- { name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
- { name: "关联测点", a: "a", b: "B", c: "C", d: "C" },
- { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
+ const [nvrDetails, setNvrDetails] = useState("");
+ const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
+ const type = [
+ { name: "萤石", key: "yingshi" },
+ { name: "NVR摄像头", key: "nvr" },
+ { name: "IPC 网络摄像头", key: "ipc" },
+ { name: "级联摄像头", key: "cascade" },
];
const information = {
nvr: [
{
name: "基础信息",
basics: [
- { name: "设备名称:", value: "消火栓呼呼呼呼" },
- { name: "设备编号:", value: "D50F2049010B" },
- { name: "接入方式:", value: "NJBJ858G68H" },
- { name: "厂商:", value: "哇哇哇哇哇" },
- { name: "添加账号:", value: "Superadmin" },
- { name: "添加时间:", value: "2022-09-09" },
+ { name: "设备名称:", key: "name" },
+ { name: "设备编号:", key: "serialNo" },
+ { name: "接入方式:", key: "NJBJ858G68H" },
+ { name: "厂商:", key: "venderId" },
+ { name: "添加账号:", key: "createUser" },
+ { name: "添加时间:", key: "createTime" },
{
name: "行政区别:",
- value: "江西省-南昌市-南昌县",
+ key: "江西省-南昌市-南昌县",
difference: "difference",
},
{
name: "设备安装位置:",
- value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+ key: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
difference: "line",
},
],
@@ -52,15 +57,15 @@ function SideSheets(props) {
{
name: "接入信息",
access: [
- { name: "SIP服务编号:", value: "1111111111" },
- { name: "SIP域:", value: "KGU876J87" },
- { name: "SIP端口号:", value: "KGU876J87" },
- { name: "通道数量:", value: "16通道" },
- { name: "心跳周期:", value: "3600s" },
- { name: "最大心跳次数:", value: "3次" },
- { name: "注册密码:", value: "**********" },
- { name: "注册有效期::", value: "3600s" },
- { name: "接入识别模块:", value: "sssss" },
+ { name: "SIP服务编号:", key: "1111111111" },
+ { name: "SIP域:", key: "KGU876J87" },
+ { name: "SIP端口号:", key: "port" },
+ { name: "通道数量:", key: "channelCount" },
+ { name: "心跳周期:", key: "3600s" },
+ { name: "最大心跳次数:", key: "3次" },
+ { name: "注册密码:", key: "**********" },
+ { name: "注册有效期::", key: "3600s" },
+ { name: "接入识别模块:", key: "sssss" },
],
},
{
@@ -83,15 +88,18 @@ function SideSheets(props) {
{
name: "基础信息",
basics: [
- { name: "设备名称:", value: "消火栓呼呼呼呼" },
- { name: "SIP编号/设备编号:", value: "D50F2049010B" },
- { name: "接入方式:", value: "NJBJ858G68H" },
- { name: "厂商:", value: "哇哇哇哇哇" },
- { name: "添加账号:", value: "Superadmin" },
- { name: "添加时间:", value: "2022-09-09" },
+ { name: "设备名称:", key: "name" },
+ {
+ name: "SIP编号/设备编号:",
+ key: nvrDetails.serialNo ? "serialNo" : "sip",
+ },
+ { name: "接入方式:", key: "type" },
+ { name: "厂商:", key: "venderId" },
+ { name: "添加账号:", key: "createUser" },
+ { name: "添加时间:", key: "createTime" },
{
name: "设备安装位置:",
- value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+ key: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
difference: "line",
},
],
@@ -99,11 +107,11 @@ function SideSheets(props) {
{
name: "复制直播地址",
liveBroadcast: [
- { name: "HLS地址", value: "" },
- { name: "FLV地址", value: "" },
- { name: "RTMP地址", value: "" },
- { name: "EZOPEN地址", value: "" },
- { name: "ONVIF地址", value: "" },
+ { name: "HLS地址", key: "" },
+ { name: "FLV地址", key: "" },
+ { name: "RTMP地址", key: "" },
+ { name: "EZOPEN地址", key: "" },
+ { name: "ONVIF地址", key: "" },
],
},
{
@@ -132,8 +140,33 @@ function SideSheets(props) {
zIndex: 5,
};
- useEffect(() => {}, []);
+ useEffect(() => {
+ dispatch(
+ equipmentWarehouse[cameraSetup ? "getCameraDetails" : "getNvrDetails"](
+ rowId
+ )
+ ).then((res) => {
+ setNvrDetails(res.payload.data);
+ projectScrollbar = new PerfectScrollbar("#project_information", {
+ suppressScrollX: true,
+ });
+ equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
+ suppressScrollX: true,
+ });
+ });
+ console.log(nvrDetails);
+ }, []);
+ useEffect(() => {
+ const domProject = document.getElementById("project_information");
+ if (domProject && projectScrollbar) {
+ projectScrollbar.update();
+ }
+ const domEquipment = document.getElementById("equipment_information");
+ if (domEquipment && equipmentScrollbar) {
+ projectScrollbar.update();
+ }
+ });
return (
-
+
{list.map((item, index) => {
return (
-
-
- {item.name}
-
-
{item.a}
-
{item.b}
-
{item.c}
-
{item.d}
-
- );
- })}
-
-
-
- {(cameraSetup ? information.camera : information.nvr).map(
- (item, index) => {
- let str = [];
- if (index > 0) {
- str.push(
- );
- }
- str.push(
-
- {item.name}
- {cameraSetup ? (
- index == 1 ? (
-
-
-
-
- ) : (
- ""
- )
- ) : (
- ""
- )}
+ {item}
);
- //基础信息
- if (index == 0) {
- item.basics.map((item, index) => {
- if (item.difference == "line") {
- str.push(
-
-
- {item.name}
-
-
- {item.value}
-
-
- );
- } else {
- str.push(
+ })}
+
+
+
+
+
-
- {item.value1}
-
-
- {item.value2}
-
-
+ );
+ }
+ return str;
+ });
+ }
+ //接入信息/复制直播地址
+ if (index == 1) {
+ (cameraSetup ? item.liveBroadcast : item.access).map(
+ (item, index) => {
+ if (cameraSetup) {
+ str.push(
+ {
+ copy(item.name);
+ // alert("复制成功");
+ setclickStyle(item.name);
+ }}
+ >
+
+
+ {item.name}
+
+
+
+ );
+ } else {
+ str.push(
+
+
+ {item.name}
+
+
+ {nvrDetails[item.key]}
+
+
+ );
+ }
+ return str;
+ }
);
}
+ //摄像头信息/复制回收地址
+ if (index == 2) {
+ (cameraSetup ? item.recovery : nvrDetails.camera).map(
+ (item, index) => {
+ if (cameraSetup) {
+ str.push(
+ {
+ copy(item.name);
+ // alert("复制成功");
+ setclickStyle(item.name);
+ }}
+ >
+
+
+ {item.name}
+
+
+
+ );
+ } else {
+ str.push(
+
+
+
+
+ {item.channelName}
+
+
+
+ {item.id}
+
+
+ {item.name}
+
+
+ );
+ }
+ return str;
+ }
+ );
+ }
+
return str;
}
- );
- }
-
- return str;
- }
- )}
+ )
+ : ""}
+
);
}
-export default SideSheets;
+function mapStateToProps(state) {
+ const { auth, global, members } = state;
+ return {
+ loading: members.isRequesting,
+ user: auth.user,
+ actions: global.actions,
+ global: global,
+ members: members.data,
+ };
+}
+export default connect(mapStateToProps)(SideSheets);
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 92c6c1a..f80b0ae 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
@@ -1,6 +1,16 @@
import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
-import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
+import moment from "moment";
+import {
+ Button,
+ Form,
+ Input,
+ Row,
+ Table,
+ Pagination,
+ Popover,
+ Tag,
+} from "@douyinfe/semi-ui";
import "../style.less";
import CameraModal from "../components/cameraModal";
import NvrModal from "../components/nvrModal";
@@ -8,7 +18,7 @@ import Setup from "../components/setup";
import SideSheets from "../components/sideSheet";
const CameraHeader = (props) => {
- const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
+ const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props;
const [cameraModal, setCameraModal] = useState(false);
const [modalName, setModalName] = useState("");
const [setup, setSetup] = useState(false);
@@ -17,6 +27,8 @@ const CameraHeader = (props) => {
const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //厂商信息
const [query, setQuery] = useState({ limit: 10, page: 0 });
+ const [rowId, setRowId] = useState(); //表格数据id
+
const { equipmentWarehouse } = actions;
const api = useRef();
const CAMERAS = "cameras";
@@ -24,6 +36,7 @@ const CameraHeader = (props) => {
useEffect(() => {
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
+ attribute(res.payload.data);
});
//初始化表格显示设置
localStorage.getItem(CAMERAS) == null
@@ -32,15 +45,14 @@ const CameraHeader = (props) => {
JSON.stringify(["state", "type", "manufactor"])
)
: "";
- attribute();
}, []);
useEffect(() => {
- equipmentGetNvr();
- }, [query]);
+ equipmentGetCamera();
+ }, []);
- function equipmentGetNvr() {
- dispatch(equipmentWarehouse.getNvr(query));
+ function equipmentGetCamera() {
+ dispatch(equipmentWarehouse.getCamera(query));
}
const columns = [
{
@@ -76,7 +88,6 @@ const CameraHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
- // console.log(row);
return (
-
+
{
}}
>
- 共{equipmentWarehouseNvr.total}个设备
+ 共{equipmentWarehouseCamera.total}个设备
{
cameraSetup={cameraSetup}
close={() => {
setSetup(false);
- attribute();
+ attribute(venderList);
setcameraSetup(false);
}}
/>
@@ -501,6 +604,8 @@ const CameraHeader = (props) => {
{sideSheet ? (
{
setSideSheet(false);
@@ -529,13 +634,13 @@ const CameraHeader = (props) => {
};
function mapStateToProps(state) {
- const { auth, global, members, equipmentWarehouseNvr } = state;
+ const { auth, global, members, equipmentWarehouseCamera } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
- equipmentWarehouseNvr: equipmentWarehouseNvr.data || [],
+ equipmentWarehouseCamera: equipmentWarehouseCamera.data || [],
};
}
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
index 936acf8..c5d126a 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
@@ -14,27 +14,33 @@ const NvrHeader = (props) => {
const [sideSheet, setSideSheet] = useState(false);
const [setupp, setSetupp] = useState([]);
const [venderList, setvenderList] = useState([]); //厂商信息
- const [query, setQuery] = useState({ limit: 10, page: 0 });
+ const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
+ const [search, setearch] = useState({}); //搜索条件
+ const [rowId, setRowId] = useState(); //表格数据id
+
const api = useRef();
const SETUPS = "setups";
useEffect(() => {
dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data);
+ attribute(res.payload.data);
});
//初始化表格显示设置
localStorage.getItem(SETUPS) == null
- ? localStorage.setItem(SETUPS, JSON.stringify(["a", "c", "d", "e"]))
+ ? localStorage.setItem(
+ SETUPS,
+ JSON.stringify(["manufactor", "passageway", "port", "state"])
+ )
: "";
// ;
- attribute();
}, []);
useEffect(() => {
equipmentGetNvr();
- }, [query]);
+ }, [query, search]);
function equipmentGetNvr() {
- dispatch(equipmentWarehouse.getNvr(query));
+ dispatch(equipmentWarehouse.getNvr({ ...query, ...search }));
}
const columns = [
{
@@ -46,12 +52,12 @@ const NvrHeader = (props) => {
{
title: "设备名称",
dataIndex: "name",
- render: (text, record, index) => {
+ render: (text, r, index) => {
return (
{
marginRight: "10px",
}}
/>
- {record.name}
+ {r.name}
);
},
@@ -73,7 +79,6 @@ const NvrHeader = (props) => {
width: "20%",
dataIndex: "",
render: (_, row) => {
- // console.log(row);
return (