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( + })} +
+
+ {nvrDetails + ? nvrDetails.station.map((item, index) => { + return item.structure.projects.map((v, i) => { + return (
- - {item.name} - - - {item.value} - +
{v.name}
+
{item.structure.name}
+
{item.name}
+
{item.factor.name}
); - } - return str; - }); - } - //接入信息/复制直播地址 - if (index == 1) { - (cameraSetup ? item.liveBroadcast : item.access).map( + }); + }) + : ""} +
+ + +
+ {nvrDetails + ? (cameraSetup ? information.camera : information.nvr).map( (item, index) => { - if (cameraSetup) { - str.push( -
{ - copy(item.name); - // alert("复制成功"); - setclickStyle(item.name); - }} - > - -
- {item.name} - -
-
- ); - } else { + let str = []; + if (index > 0) { str.push( -
- - {item.name} - - - {item.value} - -
+ /> ); } - return str; - } - ); - } - //摄像头信息/复制回收地址 - if (index == 2) { - (cameraSetup ? item.recovery : item.CameraInformation).map( - (item, index) => { - if (cameraSetup) { - str.push( -
{ - copy(item.name); - // alert("复制成功"); - setclickStyle(item.name); - }} - > - -
- {item.name} - + {item.name} + {cameraSetup ? ( + index == 1 ? ( +
-
-
- ); - } else { - str.push( -
-
- + > + + +
+ ) : ( + "" + ) + ) : ( + "" + )} +
+ ); + //基础信息 + if (index == 0) { + item.basics.map((item, index) => { + if (item.difference == "line") { + str.push( +
+ + {item.name} + + + {nvrDetails[item.key]} + +
+ ); + } else { + str.push(
- {item.name} + + {item.name} + + + {item.key == "type" + ? type.find((v) => v.key == nvrDetails.type) + .name + : item.key == "venderId" + ? venderList.find( + (v) => v.id == nvrDetails.venderId + ).name + : item.key == "createUser" + ? nvrDetails.createUser.namePresent + : item.key == "createTime" + ? moment(nvrDetails.createTime).format( + "YYYY-MM-DD HH:MM:SS" + ) + : nvrDetails[item.key]} +
-
-

- {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 (