表格查看和其它功能的数据对接

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" },
+      });
+  }

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
 }

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

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: "manufactor" },
-    { name: "添加账号", value: "b" },
+    { name: "添加账号", value: "accountNumber" },
-    { name: "通道数", value: "c" },
+    { name: "通道数", value: "passageway" },
-    { name: "端口", value: "d" },
+    { name: "端口", value: "port" },
-    { name: "设备状态", value: "e" },
+    { name: "设备状态", value: "state" },
-    { name: "创建时间", value: "f" },
+    { name: "创建时间", value: "time" },
   ];
   const projectNVR = [
-    { name: "项目名称", value: "g" },
+    { name: "项目名称", value: "name" },
-    { name: "things名称", value: "h" },
+    { name: "pcode", value: "pcode" },
-    { name: "things数量", value: "i" },
+    { name: "结构物", value: "structure" },
   ];
   const equipmentCamera = [
     { name: "设备厂家", value: "manufactor" },

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 = [
+  const [nvrDetails, setNvrDetails] = useState("");
-    {
+  const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
-      name: "项目名称",
+  const type = [
-      a: "南昌县智慧环保",
+    { name: "萤石", key: "yingshi" },
-      b: "南昌县智慧环保",
+    { name: "NVR摄像头", key: "nvr" },
-      c: "南昌市市政隧道综合管理 哦哦哦哦哦  哦哦哦哦  哦哦哦哦 哦哦哦哦哦哦哦哦哦  哦",
+    { name: "IPC 网络摄像头", key: "ipc" },
-      d: "C",
+    { name: "级联摄像头", key: "cascade" },
-    },
-    { 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 information = {
     nvr: [
       {
         name: "基础信息",
         basics: [
-          { name: "设备名称：", value: "消火栓呼呼呼呼" },
+          { name: "设备名称：", key: "name" },
-          { name: "设备编号：", value: "D50F2049010B" },
+          { name: "设备编号：", key: "serialNo" },
-          { name: "接入方式：", value: "NJBJ858G68H" },
+          { name: "接入方式：", key: "NJBJ858G68H" },
-          { name: "厂商：", value: "哇哇哇哇哇" },
+          { name: "厂商：", key: "venderId" },
-          { name: "添加账号：", value: "Superadmin" },
+          { name: "添加账号：", key: "createUser" },
-          { name: "添加时间：", value: "2022-09-09" },
+          { 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服务编号：", key: "1111111111" },
-          { name: "SIP域：", value: "KGU876J87" },
+          { name: "SIP域：", key: "KGU876J87" },
-          { name: "SIP端口号：", value: "KGU876J87" },
+          { name: "SIP端口号：", key: "port" },
-          { name: "通道数量：", value: "16通道" },
+          { name: "通道数量：", key: "channelCount" },
-          { name: "心跳周期：", value: "3600s" },
+          { name: "心跳周期：", key: "3600s" },
-          { name: "最大心跳次数：", value: "3次" },
+          { name: "最大心跳次数：", key: "3次" },
-          { name: "注册密码：", value: "**********" },
+          { name: "注册密码：", key: "**********" },
-          { name: "注册有效期：:", value: "3600s" },
+          { name: "注册有效期：:", key: "3600s" },
-          { name: "接入识别模块：", value: "sssss" },
+          { name: "接入识别模块：", key: "sssss" },
         ],
       },
       {
@@ -83,15 +88,18 @@ function SideSheets(props) {
       {
         name: "基础信息",
         basics: [
-          { name: "设备名称：", value: "消火栓呼呼呼呼" },
+          { name: "设备名称：", key: "name" },
-          { name: "SIP编号/设备编号：", value: "D50F2049010B" },
+          {
-          { name: "接入方式：", value: "NJBJ858G68H" },
+            name: "SIP编号/设备编号：",
-          { name: "厂商：", value: "哇哇哇哇哇" },
+            key: nvrDetails.serialNo ? "serialNo" : "sip",
-          { name: "添加账号：", value: "Superadmin" },
+          },
-          { name: "添加时间：", value: "2022-09-09" },
+          { 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: "HLS地址", key: "" },
-          { name: "FLV地址", value: "" },
+          { name: "FLV地址", key: "" },
-          { name: "RTMP地址", value: "" },
+          { name: "RTMP地址", key: "" },
-          { name: "EZOPEN地址", value: "" },
+          { name: "EZOPEN地址", key: "" },
-          { name: "ONVIF地址", value: "" },
+          { 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 (
     <SideSheet
       visible={visible}
@@ -146,323 +179,399 @@ function SideSheets(props) {
     >
       <Tabs type="line">
         <TabPane tab="项目信息" itemKey="1">
-          <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-evenly",
+            }}
+          >
             {list.map((item, index) => {
               return (
                 <div
-                  key={item.name}
                   style={{
+                    lineHeight: "32px",
+                    background: "#1859C1",
+                    color: "#FFFFFF",
+                    borderRadius: 3,
+                    textAlign: "center",
                     width: 200,
                     margin: "12px 8px",
                   }}
+                  key={item}
                 >
-                  <div
-                    style={{
-                      lineHeight: "32px",
-                      background: "#1859C1",
-                      color: "#FFFFFF",
-                      borderRadius: 3,
-                      textAlign: "center",
-                    }}
-                  >
-                    <img
-                      src={`/assets/images/background/projectIcon${index}.png`}
-                      style={{ marginRight: 10 }}
-                    />
-                    {item.name}
-                  </div>
-                  <div style={styles}>{item.a}</div>
-                  <div style={styles}>{item.b}</div>
-                  <div style={styles}>{item.c}</div>
-                  <div style={styles}>{item.d}</div>
-                </div>
-              );
-            })}
-          </div>
-        </TabPane>
-        <TabPane tab="设备信息" itemKey="2">
-          {(cameraSetup ? information.camera : information.nvr).map(
-            (item, index) => {
-              let str = [];
-              if (index > 0) {
-                str.push(
                   <img
-                    src="/assets/images/background/straightline.png"
+                    src={`/assets/images/background/projectIcon${index}.png`}
-                    key={"img" + index}
+                    style={{ marginRight: 10 }}
-                    alt="无法显示"
-                    style={{ width: 872, display: "block", marginTop: 24 }}
                   />
-                );
+                  {item}
-              }
-              str.push(
-                <div
-                  key={"name" + index}
-                  style={{
-                    fontWeight: "600",
-                    color: "#1859C1",
-                    margin: "15px 0 12px 40px",
-                  }}
-                >
-                  {item.name}
-                  {cameraSetup ? (
-                    index == 1 ? (
-                      <div
-                        style={{
-                          display: "inline-block",
-                          float: "right",
-                          marginRight: 20,
-                        }}
-                      >
-                        <Button style={{ marginRight: 20 }} theme="solid">
-                          高清
-                        </Button>
-                        <Button>标清</Button>
-                      </div>
-                    ) : (
-                      ""
-                    )
-                  ) : (
-                    ""
-                  )}
                 </div>
               );
-              //基础信息
+            })}
-              if (index == 0) {
+          </div>
-                item.basics.map((item, index) => {
+          <div
-                  if (item.difference == "line") {
+            id="project_information"
-                    str.push(
+            style={{
-                      <div key={"basics" + index} style={{ marginTop: 14 }}>
+              height: document.body.clientHeight - 182,
-                        <span
+              // position: "relative",
-                          style={{
+            }}
-                            width: 150,
+          >
-                            display: "inline-block",
+            {nvrDetails
-                            textAlign: "right",
+              ? nvrDetails.station.map((item, index) => {
-                            fontWeight: "600",
+                  return item.structure.projects.map((v, i) => {
-                            color: "rgba(0, 0, 0, 0.45)",
+                    return (
-                          }}
-                        >
-                          {item.name}
-                        </span>
-                        <span style={{ fontWeight: "600", color: " #34383E" }}>
-                          {item.value}
-                        </span>
-                      </div>
-                    );
-                  } else {
-                    str.push(
                       <div
-                        key={"basics" + index}
+                        key={v.name}
                         style={{
-                          width: "50%",
+                          display: "flex",
-                          display: "inline-block",
+                          justifyContent: "space-evenly",
-                          marginTop: 20,
                         }}
                       >
-                        <span
+                        <div style={styles}>{v.name}</div>
-                          style={{
+                        <div style={styles}>{item.structure.name}</div>
-                            width: 150,
+                        <div style={styles}>{item.name}</div>
-                            display: "inline-block",
+                        <div style={styles}>{item.factor.name}</div>
-                            textAlign: "right",
-                            fontWeight: "600",
-                            color: "rgba(0, 0, 0, 0.45)",
-                          }}
-                        >
-                          {item.name}
-                        </span>
-                        <span style={{ fontWeight: "600", color: " #34383E" }}>
-                          {item.value}
-                        </span>
                       </div>
                     );
-                  }
+                  });
-                  return str;
+                })
-                });
+              : ""}
-              }
+          </div>
-              //接入信息/复制直播地址
+        </TabPane>
-              if (index == 1) {
+        <TabPane tab="设备信息" itemKey="2">
-                (cameraSetup ? item.liveBroadcast : item.access).map(
+          <div
+            id="equipment_information"
+            style={{
+              height: document.body.clientHeight - 126,
+            }}
+          >
+            {nvrDetails
+              ? (cameraSetup ? information.camera : information.nvr).map(
                   (item, index) => {
-                    if (cameraSetup) {
+                    let str = [];
-                      str.push(
+                    if (index > 0) {
-                        <div
-                          key={"liveBroadcast" + index}
-                          style={{
-                            width: 120,
-                            height: 130,
-                            display: "inline-block",
-                            borderRadius: 4,
-                            border: "1px solid #D9D9D9",
-                            margin: "20px 0 0 40px",
-                            textAlign: "center",
-                            color: clickStyle == item.name ? "white" : "",
-                            background:
-                              clickStyle == item.name ? "#1859C1" : "",
-                          }}
-                          onClick={() => {
-                            copy(item.name);
-                            // alert("复制成功");
-                            setclickStyle(item.name);
-                          }}
-                        >
-                          <img
-                            src={`/assets/images/background/${
-                              clickStyle == item.name
-                                ? "sewage_camera2"
-                                : "sewage_camera1"
-                            }.png`}
-                            style={{ margin: "20px 0 8px 0" }}
-                          />
-                          <div>
-                            {item.name}
-                            <img
-                              src={`/assets/images/background/${
-                                clickStyle == item.name ? "copy2" : "copy1"
-                              }.png`}
-                              style={{
-                                paddingBottom: 10,
-                                display: "inline-block",
-                                width: 10,
-                                height: 20,
-                              }}
-                            />
-                          </div>
-                        </div>
-                      );
-                    } else {
                       str.push(
-                        <div
+                        <img
-                          key={"access" + index}
+                          src="/assets/images/background/straightline.png"
+                          key={"img" + index}
+                          alt="无法显示"
                           style={{
-                            width: "50%",
+                            width: 872,
-                            display: "inline-block",
+                            display: "block",
-                            marginTop: 20,
+                            marginTop: 24,
                           }}
-                        >
+                        />
-                          <span
-                            style={{
-                              width: 150,
-                              display: "inline-block",
-                              textAlign: "right",
-                              fontWeight: "600",
-                              color: "rgba(0, 0, 0, 0.45)",
-                            }}
-                          >
-                            {item.name}
-                          </span>
-                          <span
-                            style={{ fontWeight: "600", color: " #34383E" }}
-                          >
-                            {item.value}
-                          </span>
-                        </div>
                       );
                     }
-                    return str;
+                    str.push(
-                  }
+                      <div
-                );
+                        key={"name" + index}
-              }
+                        style={{
-              //摄像头信息/复制回收地址
+                          fontWeight: "600",
-              if (index == 2) {
+                          color: "#1859C1",
-                (cameraSetup ? item.recovery : item.CameraInformation).map(
+                          margin: "15px 0 12px 40px",
-                  (item, index) => {
+                        }}
-                    if (cameraSetup) {
+                      >
-                      str.push(
+                        {item.name}
-                        <div
+                        {cameraSetup ? (
-                          key={"liveBroadcast" + index}
+                          index == 1 ? (
-                          style={{
+                            <div
-                            width: 120,
-                            height: 130,
-                            display: "inline-block",
-                            borderRadius: 4,
-                            border: "1px solid #D9D9D9",
-                            margin: "20px 0 0 40px",
-                            textAlign: "center",
-                            color: clickStyle == item.name ? "white" : "",
-                            background:
-                              clickStyle == item.name ? "#1859C1" : "",
-                          }}
-                          onClick={() => {
-                            copy(item.name);
-                            // alert("复制成功");
-                            setclickStyle(item.name);
-                          }}
-                        >
-                          <img
-                            src={`/assets/images/background/${
-                              clickStyle == item.name ? "store2" : "store1"
-                            }.png`}
-                            style={{ margin: "20px 0 8px 0" }}
-                          />
-                          <div>
-                            {item.name}
-                            <img
-                              src={`/assets/images/background/${
-                                clickStyle == item.name ? "copy2" : "copy1"
-                              }.png`}
                               style={{
-                                paddingBottom: 10,
                                 display: "inline-block",
-                                width: 10,
+                                float: "right",
-                                height: 20,
+                                marginRight: 20,
                               }}
-                            />
+                            >
-                          </div>
+                              <Button style={{ marginRight: 20 }} theme="solid">
-                        </div>
+                                高清
-                      );
+                              </Button>
-                    } else {
+                              <Button>标清</Button>
-                      str.push(
+                            </div>
-                        <div
+                          ) : (
-                          key={"access" + index}
+                            ""
-                          style={{
+                          )
-                            width: "40%",
+                        ) : (
-                            display: "inline-block",
+                          ""
-                            borderRadius: 4,
+                        )}
-                            border: "1px solid rgba(151, 151, 151, 0.2)",
+                      </div>
-                            margin: "16px 0 0 36px",
+                    );
-                            color: "rgba(0, 0, 0, 0.85)",
+                    //基础信息
-                            fontWeight: "600",
+                    if (index == 0) {
-                          }}
+                      item.basics.map((item, index) => {
-                        >
+                        if (item.difference == "line") {
-                          <div
+                          str.push(
-                            style={{
+                            <div
-                              padding: "8px 10px",
+                              key={"basics" + index}
-                              borderBottom:
+                              style={{ marginTop: 14 }}
-                                "1px solid rgba(151, 151, 151, 0.2)",
+                            >
-                            }}
+                              <span
-                          >
+                                style={{
-                            <img
+                                  width: 150,
-                              src={`/assets/images/background/camera.png`}
+                                  display: "inline-block",
-                              style={{ marginRight: 10 }}
+                                  textAlign: "right",
-                            />
+                                  fontWeight: "600",
+                                  color: "rgba(0, 0, 0, 0.45)",
+                                }}
+                              >
+                                {item.name}
+                              </span>
+                              <span
+                                style={{ fontWeight: "600", color: " #34383E" }}
+                              >
+                                {nvrDetails[item.key]}
+                              </span>
+                            </div>
+                          );
+                        } else {
+                          str.push(
                             <div
+                              key={"basics" + index}
                               style={{
+                                width: "50%",
                                 display: "inline-block",
+                                marginTop: 20,
                               }}
                             >
-                              {item.name}
+                              <span
+                                style={{
+                                  width: 150,
+                                  display: "inline-block",
+                                  textAlign: "right",
+                                  fontWeight: "600",
+                                  color: "rgba(0, 0, 0, 0.45)",
+                                }}
+                              >
+                                {item.name}
+                              </span>
+                              <span
+                                style={{ fontWeight: "600", color: " #34383E" }}
+                              >
+                                {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]}
+                              </span>
                             </div>
-                          </div>
+                          );
-                          <p style={{ margin: "16px 0 0 30px " }}>
+                        }
-                            {item.value1}
+                        return str;
-                          </p>
+                      });
-                          <p style={{ margin: "16px 0 20px 30px " }}>
+                    }
-                            {item.value2}
+                    //接入信息/复制直播地址
-                          </p>
+                    if (index == 1) {
-                        </div>
+                      (cameraSetup ? item.liveBroadcast : item.access).map(
+                        (item, index) => {
+                          if (cameraSetup) {
+                            str.push(
+                              <div
+                                key={"liveBroadcast" + index}
+                                style={{
+                                  width: 120,
+                                  height: 130,
+                                  display: "inline-block",
+                                  borderRadius: 4,
+                                  border: "1px solid #D9D9D9",
+                                  margin: "20px 0 0 40px",
+                                  textAlign: "center",
+                                  color: clickStyle == item.name ? "white" : "",
+                                  background:
+                                    clickStyle == item.name ? "#1859C1" : "",
+                                }}
+                                onClick={() => {
+                                  copy(item.name);
+                                  // alert("复制成功");
+                                  setclickStyle(item.name);
+                                }}
+                              >
+                                <img
+                                  src={`/assets/images/background/${
+                                    clickStyle == item.name
+                                      ? "sewage_camera2"
+                                      : "sewage_camera1"
+                                  }.png`}
+                                  style={{ margin: "20px 0 8px 0" }}
+                                />
+                                <div>
+                                  {item.name}
+                                  <img
+                                    src={`/assets/images/background/${
+                                      clickStyle == item.name
+                                        ? "copy2"
+                                        : "copy1"
+                                    }.png`}
+                                    style={{
+                                      paddingBottom: 10,
+                                      display: "inline-block",
+                                      width: 10,
+                                      height: 20,
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            );
+                          } else {
+                            str.push(
+                              <div
+                                key={"access" + index}
+                                style={{
+                                  width: "50%",
+                                  display: "inline-block",
+                                  marginTop: 20,
+                                }}
+                              >
+                                <span
+                                  style={{
+                                    width: 150,
+                                    display: "inline-block",
+                                    textAlign: "right",
+                                    fontWeight: "600",
+                                    color: "rgba(0, 0, 0, 0.45)",
+                                  }}
+                                >
+                                  {item.name}
+                                </span>
+                                <span
+                                  style={{
+                                    fontWeight: "600",
+                                    color: " #34383E",
+                                  }}
+                                >
+                                  {nvrDetails[item.key]}
+                                </span>
+                              </div>
+                            );
+                          }
+                          return str;
+                        }
                       );
                     }
+                    //摄像头信息/复制回收地址
+                    if (index == 2) {
+                      (cameraSetup ? item.recovery : nvrDetails.camera).map(
+                        (item, index) => {
+                          if (cameraSetup) {
+                            str.push(
+                              <div
+                                key={"liveBroadcast" + index}
+                                style={{
+                                  width: 120,
+                                  height: 130,
+                                  display: "inline-block",
+                                  borderRadius: 4,
+                                  border: "1px solid #D9D9D9",
+                                  margin: "20px 0 0 40px",
+                                  textAlign: "center",
+                                  color: clickStyle == item.name ? "white" : "",
+                                  background:
+                                    clickStyle == item.name ? "#1859C1" : "",
+                                }}
+                                onClick={() => {
+                                  copy(item.name);
+                                  // alert("复制成功");
+                                  setclickStyle(item.name);
+                                }}
+                              >
+                                <img
+                                  src={`/assets/images/background/${
+                                    clickStyle == item.name
+                                      ? "store2"
+                                      : "store1"
+                                  }.png`}
+                                  style={{ margin: "20px 0 8px 0" }}
+                                />
+                                <div>
+                                  {item.name}
+                                  <img
+                                    src={`/assets/images/background/${
+                                      clickStyle == item.name
+                                        ? "copy2"
+                                        : "copy1"
+                                    }.png`}
+                                    style={{
+                                      paddingBottom: 10,
+                                      display: "inline-block",
+                                      width: 10,
+                                      height: 20,
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            );
+                          } else {
+                            str.push(
+                              <div
+                                key={"access" + index}
+                                style={{
+                                  width: "40%",
+                                  display: "inline-block",
+                                  borderRadius: 4,
+                                  border: "1px solid rgba(151, 151, 151, 0.2)",
+                                  margin: "16px 0 0 36px",
+                                  color: "rgba(0, 0, 0, 0.85)",
+                                  fontWeight: "600",
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    padding: "8px 10px",
+                                    borderBottom:
+                                      "1px solid rgba(151, 151, 151, 0.2)",
+                                  }}
+                                >
+                                  <img
+                                    src={`/assets/images/background/camera.png`}
+                                    style={{ marginRight: 10 }}
+                                  />
+                                  <div
+                                    style={{
+                                      display: "inline-block",
+                                    }}
+                                  >
+                                    {item.channelName}
+                                  </div>
+                                </div>
+                                <p style={{ margin: "16px 0 0 32px " }}>
+                                  {item.id}
+                                </p>
+                                <p style={{ margin: "16px 0 20px 32px " }}>
+                                  {item.name}
+                                </p>
+                              </div>
+                            );
+                          }
+                          return str;
+                        }
+                      );
+                    }
+
                     return str;
                   }
-                );
+                )
-              }
+              : ""}
-
+          </div>
-              return str;
-            }
-          )}
         </TabPane>
       </Tabs>
     </SideSheet>
   );
 }
 
-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);

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();
+    equipmentGetCamera();
-  }, [query]);
+  }, []);
 
-  function equipmentGetNvr() {
+  function equipmentGetCamera() {
-    dispatch(equipmentWarehouse.getNvr(query));
+    dispatch(equipmentWarehouse.getCamera(query));
   }
   const columns = [
     {
@@ -76,7 +88,6 @@ const CameraHeader = (props) => {
       width: "20%",
       dataIndex: "",
       render: (_, row) => {
-        //   console.log(row);
         return (
           <div style={{ display: "flex" }}>
             <Button theme="borderless">
@@ -94,12 +105,27 @@ const CameraHeader = (props) => {
               onClick={() => {
                 setSideSheet(true);
                 setcameraSetup(true);
+                setRowId(row.id);
+                console.log(row.id);
               }}
             >
               查看
             </Button>
             <Button theme="borderless">播放</Button>
-            <Button theme="borderless">禁用</Button>
+            <Button
+              theme="borderless"
+              onClick={() => {
+                console.log(row.id,!row.forbidden);
+                dispatch(
+                  equipmentWarehouse.putForbidden({
+                    cameraId: row.id,
+                    forbidden: !row.forbidden,
+                  })
+                );
+              }}
+            >
+              {row.forbidden ? "启用" : "禁用"}
+            </Button>
             <Button
               theme="borderless"
               onClick={() => {
@@ -116,7 +142,7 @@ const CameraHeader = (props) => {
   ];
 
   //获取表格属性设置
-  function attribute() {
+  function attribute(data) {
     const arr = localStorage.getItem(CAMERAS)
       ? JSON.parse(localStorage.getItem(CAMERAS))
       : [];
@@ -126,10 +152,14 @@ const CameraHeader = (props) => {
         title: "设备厂家",
         dataIndex: "venderId",
         key: "manufactor",
+        render: (_, r, index) => {
+          let manufactorName = data.find((item) => item.id == r.venderId);
+          return manufactorName ? manufactorName.name : "";
+        },
       },
       {
         title: "接入类型",
-        dataIndex: "createUserId",
+        dataIndex: "cameraAbility.ability",
         key: "type",
       },
       {
@@ -144,13 +174,16 @@ const CameraHeader = (props) => {
       },
       {
         title: "内存卡信息",
-        dataIndex: "size",
+        dataIndex: "memoryCard",
         key: "memoryCard",
       },
       {
         title: "设备创建时间",
         dataIndex: "createTime",
         key: "time",
+        render: (text, r, index) => {
+          return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
+        },
       },
       {
         title: "设备添加账号",
@@ -161,26 +194,57 @@ const CameraHeader = (props) => {
         title: "项目名称",
         dataIndex: "updateTime",
         key: "name",
+        render: (_, r, index) => {
+          return r.station.map((item, index) =>
+            station(
+              item.structure.projects[0].name,
+              item.structure.projects,
+              "name"
+            )
+          );
+        },
       },
       {
         title: "pcode",
         dataIndex: "updateTime",
         key: "pcode",
+        render: (_, r, index) => {
+          return r.station.map((item, index) =>
+            station(
+              item.structure.projects[0].url,
+              item.structure.projects,
+              "url"
+            )
+          );
+        },
       },
       {
         title: "结构物",
         dataIndex: "updateTime",
         key: "structure",
+        render: (_, r, index) => {
+          return station(
+            r.station[0].structure.name,
+            r.station,
+            "structure.name"
+          );
+        },
       },
       {
         title: "测点",
         dataIndex: "updateTime",
         key: "measuringPoint",
+        render: (_, r, index) => {
+          return station(r.station[0].name, r.station, "name");
+        },
       },
       {
         title: "监测因素",
         dataIndex: "updateTime",
         key: "factor",
+        render: (_, r, index) => {
+          return station(r.station[0].factor.name, r.station, "factor.name");
+        },
       },
     ];
     for (let i = 0; i < arr.length; i++) {
@@ -192,6 +256,41 @@ const CameraHeader = (props) => {
     setSetupp(columns);
   }
 
+  //表格请求数据中station属性数据的展示
+  function station(first, whole, name) {
+    return (
+      <Popover
+        key="updateTime"
+        position="top"
+        content={
+          <article style={{ padding: 12 }}>
+            {whole.map((v, index) => {
+              let names = "";
+              switch (name) {
+                case "name":
+                  names = v[name];
+                  break;
+                case "url":
+                  names = v[name];
+                  break;
+                case "structure.name":
+                  names = v.structure.name;
+                  break;
+                case "factor.name":
+                  names = v.factor.name;
+                  break;
+                default:
+                  break;
+              }
+              return <div key={index}>{names}</div>;
+            })}
+          </article>
+        }
+      >
+        <Tag>{first}...</Tag>
+      </Popover>
+    );
+  }
   //条件赛选样式
   const screen = {
     width: 193,
@@ -297,6 +396,7 @@ const CameraHeader = (props) => {
               field="type1"
               style={screen}
               placeholder="全部"
+              showClear
             >
               <Form.Select.Option value="12">111</Form.Select.Option>
               <Form.Select.Option value="11">111111</Form.Select.Option>
@@ -307,6 +407,7 @@ const CameraHeader = (props) => {
               style={screen}
               field="venderId"
               placeholder="全部"
+              showClear
             >
               {venderList.map((item) => {
                 return (
@@ -322,6 +423,7 @@ const CameraHeader = (props) => {
               field="type2"
               style={screen}
               placeholder="全部"
+              showClear
             >
               <Form.Select.Option value="yes">在线</Form.Select.Option>
               <Form.Select.Option value="no">离线</Form.Select.Option>
@@ -332,6 +434,7 @@ const CameraHeader = (props) => {
               field="type3"
               style={screen}
               placeholder="全部"
+               showClear
             >
               <Form.Select.Option value="智慧环保">
                 飞尚科技1
@@ -372,7 +475,7 @@ const CameraHeader = (props) => {
                     })
                   );
                 });
-                console.log(equipmentWarehouseNvr.data);
+                console.log(equipmentWarehouseCamera.data);
               }}
             >
               搜素
@@ -453,7 +556,7 @@ const CameraHeader = (props) => {
         </div>
         <Table
           columns={setupp}
-          dataSource={equipmentWarehouseNvr.data}
+          dataSource={equipmentWarehouseCamera.data}
           bordered={false}
           empty="暂无数据"
           style={{
@@ -469,11 +572,11 @@ const CameraHeader = (props) => {
           }}
         >
           <span style={{ lineHeight: "30px" }}>
-            共{equipmentWarehouseNvr.total}个设备
+            共{equipmentWarehouseCamera.total}个设备
           </span>
           <Pagination
             className="22"
-            total={equipmentWarehouseNvr.total}
+            total={equipmentWarehouseCamera.total}
             showSizeChanger
             currentPage={query.page + 1}
             pageSizeOpts={[10, 20, 30, 40]}
@@ -490,7 +593,7 @@ const CameraHeader = (props) => {
             cameraSetup={cameraSetup}
             close={() => {
               setSetup(false);
-              attribute();
+              attribute(venderList);
               setcameraSetup(false);
             }}
           />
@@ -501,6 +604,8 @@ const CameraHeader = (props) => {
         {sideSheet ? (
           <SideSheets
             visible={true}
+            rowId={rowId}
+            venderList={venderList}
             cameraSetup={cameraSetup}
             close={() => {
               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 || [],
   };
 }
 

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 (
           <div>
             <span
               style={{
-                backgroundColor: record.avatarBg,
+                backgroundColor: r.avatarBg,
                 width: "10px",
                 height: "10px",
                 borderRadius: "50%",
@@ -59,7 +65,7 @@ const NvrHeader = (props) => {
                 marginRight: "10px",
               }}
             />
-            {record.name}
+            {r.name}
           </div>
         );
       },
@@ -73,7 +79,6 @@ const NvrHeader = (props) => {
       width: "20%",
       dataIndex: "",
       render: (_, row) => {
-        //   console.log(row);
         return (
           <div style={{ display: "flex" }}>
             <Button theme="borderless">
@@ -90,6 +95,7 @@ const NvrHeader = (props) => {
               theme="borderless"
               onClick={() => {
                 setSideSheet(true);
+                setRowId(row.id);
               }}
             >
               查看
@@ -110,7 +116,7 @@ const NvrHeader = (props) => {
   ];
 
   //获取表格属性设置
-  function attribute() {
+  function attribute(data) {
     const arr = localStorage.getItem(SETUPS)
       ? JSON.parse(localStorage.getItem(SETUPS))
       : [];
@@ -119,50 +125,54 @@ const NvrHeader = (props) => {
       {
         title: "设备厂家",
         dataIndex: "venderId",
-        key: "a",
+        key: "manufactor",
+        render: (_, r, index) => {
+          let manufactorName = data.find((item) => item.id == r.venderId);
+          return manufactorName ? manufactorName.name : "";
+        },
       },
       {
         title: "添加账号",
         dataIndex: "createUserId",
-        key: "b",
+        key: "accountNumber",
       },
       {
         title: "通道数",
         dataIndex: "channelCount",
-        key: "c",
+        key: "passageway",
       },
       {
         title: "端口",
         dataIndex: "port",
-        key: "d",
+        key: "port",
       },
       {
         title: "设备状态",
         dataIndex: "size",
-        key: "e",
+        key: "state",
       },
       {
         title: "创建时间",
         dataIndex: "createTime",
-        key: "f",
+        key: "time",
         render: (text, r, index) => {
           return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
         },
       },
       {
         title: "项目名称",
-        dataIndex: "size",
+        dataIndex: "",
-        key: "g",
+        key: "name",
       },
       {
-        title: "things名称",
+        title: "pcode",
-        dataIndex: "updateTime",
+        dataIndex: "",
-        key: "h",
+        key: "pcode",
       },
       {
-        title: "things数量",
+        title: "结构物",
-        dataIndex: "updateTime",
+        dataIndex: "",
-        key: "i",
+        key: "structure",
       },
     ];
     for (let i = 0; i < arr.length; i++) {
@@ -269,7 +279,7 @@ const NvrHeader = (props) => {
           >
             <Form.Input
               label="设备搜索："
-              field="name"
+              field="keyword"
               placeholder="请输入设备名称"
               labelPosition="left"
               style={screen}
@@ -280,6 +290,7 @@ const NvrHeader = (props) => {
               style={screen}
               field="venderId"
               placeholder="全部"
+              showClear
             >
               {venderList.map((item) => {
                 return (
@@ -295,6 +306,7 @@ const NvrHeader = (props) => {
               field="type2"
               style={screen}
               placeholder="全部"
+              showClear
             >
               <Form.Select.Option value="yes">在线</Form.Select.Option>
               <Form.Select.Option value="no">离线</Form.Select.Option>
@@ -305,6 +317,7 @@ const NvrHeader = (props) => {
               field="type3"
               style={screen}
               placeholder="全部"
+               showClear
             >
               <Form.Select.Option value="智慧环保">
                 飞尚科技1
@@ -333,18 +346,10 @@ const NvrHeader = (props) => {
                 marginRight: 20,
               }}
               onClick={() => {
-                api.current.validate().then((values) => {
+                api.current.validate().then((v) => {
-                  console.log(values);
+                  setearch(v);
-                  console.log(
-                    equipmentWarehouseNvr.data.filter((item) => {
-                      return (
-                        item.name.indexOf(values.name) > -1 &&
-                        item.venderId === values.venderId
-                      );
-                    })
-                  );
                 });
-                console.log(equipmentWarehouseNvr.data);
+                equipmentGetNvr();
               }}
             >
               搜素
@@ -459,7 +464,7 @@ const NvrHeader = (props) => {
             SETUPS={SETUPS}
             close={() => {
               setSetup(false);
-              attribute();
+              attribute(venderList);
             }}
           />
         ) : (
@@ -469,6 +474,8 @@ const NvrHeader = (props) => {
         {sideSheet ? (
           <SideSheets
             visible={true}
+            rowId={rowId}
+            venderList={venderList}
             close={() => {
               setSideSheet(false);
             }}

code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@@ -13,6 +13,12 @@ export const ApiTable = {
     getVender:'vender',
     nvr:'nvr',
     delNvr:'nvr/{nvrId}',
+    getNvrDetails:'nvr/detail/{nvrId}',  //获取nvr详情
+
+    getCamera:"camera/project",   //  获取摄像头列表
+    putForbidden:"camera/banned",   //禁用摄像头
+    getCameraDetails:"camera/{cameraId}/detail",  //获取摄像头详情
+    
 };
 
 export const RouteTable = {