Merge branch 'dev_trial' of https://gitea.free-sun.vip/free-sun/FS-IOT into dev_trial

code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx

@@ -1,46 +1,84 @@
-'use strict';
+"use strict";
-import React from 'react';
+import React from "react";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { Nav } from '@douyinfe/semi-ui';
+import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
 
-const Header = props => {
+const Header = (props) => {
-    const { dispatch, history, user, actions, socket } = props
+  const { dispatch, history, user, actions, socket } = props;
 
   return (
-        <div style={{ position: 'relative', height: 60, minWidth: 520 }}>
+    <>
-            <div style={{ float: 'left', paddingLeft: 32, fontSize: 16 }}>
+      <Nav
-                <div style={{
+        mode={"horizontal"}
-                    lineHeight: '60px', display: 'inline-block', fontSize: 20, textShadow: '0 4px 3px rgba(0, 0, 0, 0.2)',
+        onClick={({ itemKey }) => {
-                    userSelect: 'none'
+          if (itemKey == "logout") {
-                }}>
-                    飞尚物联
-                </div>
-            </div>
-            <div id="nav" style={{ float: 'right' }}>
-                <Nav mode={'horizontal'} onClick={({ itemKey }) => {
-                    if (itemKey == 'logout') {
             dispatch(actions.auth.logout(user));
             if (socket) {
-                            socket.disconnect()
+              socket.disconnect();
             }
             history.push(`/signin`);
           }
-                }}>
+        }}
-                    <Nav.Sub itemKey={'user'} text={<div style={{ display: 'inline-block' }}>{user && user.namePresent}</div>}>
+        style={{
-                        <Nav.Item itemKey={'logout'} text={'退出'} />
+          height: 60,
-                    </Nav.Sub>
+          minWidth: 520,
-                </Nav>
+          background: "url(/assets/images/background/header.png)",
-            </div>
+          backgroundSize: "100% 100%",
+          color: "white",
+        }}
+        header={{
+          logo: (
+            <img
+              src="/assets/images/background/logo.png"
+              style={{ display: "inline-block", width: 280, height: 52}}
+            />
+          ),
+          text: "",
+        }}
+        footer={
+          <Nav.Sub
+            itemKey={"user"}
+            text={
+              <div
+                style={{
+                  marginLeft: 20,
+                  display: "inline-block",
+                  color: "white",
+                }}
+              >
+                <img
+                  src="/assets/images/background/notice.png"
+                  style={{
+                    display: "inline-block",
+                    width: 18,
+                    height: 18,
+                    position: "relative",
+                    top: 6,
+                    left: -10,
+                  }}
+                />
+
+                <Avatar size="small" color="light-blue" style={{ margin: 4 }}>
+                  <img src="/assets/images/avatar/6.png" />
+                </Avatar>
+                {user && user.namePresent}
               </div>
-    )
+            }
+          >
+            <Nav.Item itemKey={"logout"} text={"退出"} />
+          </Nav.Sub>
+        }
+      />
+    </>
+  );
 };
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   const { global, auth, webSocket } = state;
   return {
     actions: global.actions,
     user: auth.user,
-        socket: webSocket.socket
+    socket: webSocket.socket,
   };
 }
 

code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

@@ -5,7 +5,7 @@ import { push } from 'react-router-redux';
 import { Form, Button, Toast } from '@douyinfe/semi-ui';
 import { login, LOGIN_SUCCESS } from '../actions/auth';
 import { IconLock,IconUser } from '@douyinfe/semi-icons';
-import './login.less'
+import '../style.less'
 
 const Login = props => {
     const { dispatch, user, error, actions, apiRoot, isRequesting } = props

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js

@@ -45,6 +45,7 @@ export function addchangeNvr(data) {
       dispatch: dispatch,
       data,
       actionType: "ADD_CHANGE_NVR",
+      msg: { option: "添加/修改" },
       url: `${ApiTable.nvr}`,
     });
 }

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx

@@ -8,28 +8,102 @@ import {
 } from "@douyinfe/semi-ui";
 
 function Setup(props) {
-  const { dispatch, actions, user, loading, visible, close, SETUPS } = props;
+  const {
-  const [checkeds, setCheckeds] = useState([]);
+    dispatch,
+    actions,
+    user,
+    loading,
+    visible,
+    close,
+    SETUPS,
+    CAMERAS,
+    cameraSetup,
+  } = props;
   const [check, setCheck] = useState([]);
-
+  const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
-  
-  
-
-  const checkboxcss = { width: "21%", height: 16, marginBottom: "20px" };
 
   useEffect(() => {
     //获取是否勾选信息
-    const ISgetItem = localStorage.getItem(SETUPS);
+    const ISgetItem1 = localStorage.getItem(SETUPS);
-    setCheck(ISgetItem ? JSON.parse(ISgetItem):[]);
+    const ISgetItem2 = localStorage.getItem(CAMERAS);
+    if (cameraSetup) {
+      setCheck(ISgetItem2 ? JSON.parse(ISgetItem2) : []);
+    } else {
+      setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
+    }
+    ischeck();
   }, []);
 
+  const equipmentNVR = [
+    { name: "设备厂家", value: "a" },
+    { name: "添加账号", value: "b" },
+    { name: "通道数", value: "c" },
+    { name: "端口", value: "d" },
+    { name: "设备状态", value: "e" },
+    { name: "创建时间", value: "f" },
+  ];
+  const projectNVR = [
+    { name: "项目名称", value: "g" },
+    { name: "things名称", value: "h" },
+    { name: "things数量", value: "i" },
+  ];
+  const equipmentCamera = [
+    { name: "设备厂家", value: "manufactor" },
+    { name: "接入类型", value: "type" },
+    { name: "设备状态", value: "state" },
+    { name: "云台支持", value: "support" },
+    { name: "内存卡信息", value: "memoryCard" },
+    { name: "设备创建时间", value: "time" },
+    { name: "设备添加账号", value: "account" },
+  ];
+  const projectCamera = [
+    { name: "项目名称", value: "name" },
+    { name: "pcode", value: "pcode" },
+    { name: "结构物", value: "structure" },
+    { name: "测点", value: "measuringPoint" },
+    { name: "监测因素", value: "factor" },
+  ];
+
+  function ischeck(value) {
+    if (check.length >= 8) {
+      if (check.includes(value)) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+  }
+
   return (
     <Modal
-      title="表格属性设置"
+      title={
+        <div>
+          表格属性设置
+          <span
+            style={{
+              width: 50,
+              lineHeight: "19px",
+              display: "inline-block",
+
+              color: "white",
+              textAlign: "center",
+              marginLeft: 6,
+              background:
+                check.length == 8
+                  ? "rgba(40, 123, 255, 1)"
+                  : "rgba(176, 176, 176, 1)",
+            }}
+          >
+            {check.length}/8
+          </span> 
+        </div>
+      }
       visible={visible}
-      style={{ width: 580 }}
+      style={{ width: 600 }}
       onOk={() => {
-        localStorage.setItem(SETUPS, JSON.stringify(checkeds));
+        cameraSetup
+          ? localStorage.setItem(CAMERAS, JSON.stringify(check))
+          : localStorage.setItem(SETUPS, JSON.stringify(check));
         close();
       }}
       onCancel={() => {
@@ -42,14 +116,14 @@ function Setup(props) {
         direction="horizontal"
         defaultValue={check}
         aria-label="表格属性设置"
-        onChange={(checked) => {
+        onChange={(check) => {
-          setCheckeds(checked);
+          setCheck(check);
+          ischeck();
         }}
       >
         <div
           style={{
-            width: 529,
+            width: 550,
-            height: 121,
             border: "1px solid #EAEAEA",
             padding: "0px 5px",
             borderRadius: 4,
@@ -65,32 +139,25 @@ function Setup(props) {
           >
             设备信息
           </div>
-          <div style={{ padding: "15px 30px" }}>
+          <div style={{ padding: "15px 12px", width: 530 }}>
-            <Checkbox value="a" style={checkboxcss}>
+            {(cameraSetup ? equipmentCamera : equipmentNVR).map((item) => {
-              设备厂家
+              return (
-            </Checkbox>
+                <Checkbox
-            <Checkbox value="b" style={checkboxcss}>
+                  key={item.value}
-              添加账号
+                  value={item.value}
-            </Checkbox>
+                  style={checkboxcss}
-            <Checkbox value="c" style={checkboxcss}>
+                  disabled={ischeck(item.value)}
-              通道数
+                >
-            </Checkbox>
+                  {item.name}
-            <Checkbox value="d" style={checkboxcss}>
-              端口
-            </Checkbox>
-            <Checkbox value="e" style={checkboxcss}>
-              设备状态
-            </Checkbox>
-            <Checkbox value="f" style={checkboxcss}>
-              创建时间
                 </Checkbox>
+              );
+            })}
           </div>
         </div>
 
         <div
           style={{
-            width: 529,
+            width: 550,
-            height: 92,
             border: "1px solid #EAEAEA",
             padding: "0px 5px",
             borderRadius: 4,
@@ -106,16 +173,19 @@ function Setup(props) {
           >
             项目信息
           </div>
-          <div style={{ padding: "15px 30px" }}>
+          <div style={{ padding: "15px 12px", width: 530 }}>
-            <Checkbox value="g" style={checkboxcss}>
+            {(cameraSetup ? projectCamera : projectNVR).map((item) => {
-              项目名称
+              return (
-            </Checkbox>
+                <Checkbox
-            <Checkbox value="h" style={checkboxcss}>
+                  key={item.value}
-              things名称
+                  value={item.value}
-            </Checkbox>
+                  style={checkboxcss}
-            <Checkbox value="i" style={checkboxcss}>
+                  disabled={ischeck(item.value)}
-              things数量
+                >
+                  {item.name}
                 </Checkbox>
+              );
+            })}
           </div>
         </div>
       </CheckboxGroup>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@@ -1,16 +1,25 @@
 import React, { useState, useEffect } from "react";
 import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui";
+import copy from "copy-to-clipboard";
 
 function SideSheets(props) {
-  const { dispatch, actions, user, loading, visible, close, SETUPS } = props;
+  const {
-  const [checkeds, setCheckeds] = useState([]);
+    dispatch,
-  const [check, setCheck] = useState([]);
+    actions,
+    user,
+    loading,
+    visible,
+    close,
+    SETUPS,
+    cameraSetup,
+  } = props;
+  const [clickStyle, setclickStyle] = useState();
   const list = [
     {
       name: "项目名称",
       a: "南昌县智慧环保",
       b: "南昌县智慧环保",
-      c: "南昌市市政隧道综合管理平台",
+      c: "南昌市市政隧道综合管理平台cbj次哦爱吃此课程实地考察大检查的吃点【",
       d: "C",
     },
     { name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
@@ -18,35 +27,276 @@ function SideSheets(props) {
     { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
   ];
   const IFname = [
-    "设备名称：",
+    { name: "设备名称：", value: "消火栓呼呼呼呼" },
-    "设备编号：",
+    { name: "设备编号：", value: "D50F2049010B" },
-    "接入方式：",
+    { name: "接入方式：", value: "NJBJ858G68H" },
-    "厂商：",
+    { name: "厂商：", value: "哇哇哇哇哇" },
-    "添加账号：",
+    { name: "添加账号：", value: "Superadmin" },
-    "添加时间：",
+    { name: "添加时间：", value: "2022-09-09" },
-    "行政区别：",
+    { name: "行政区别：", value: "江西省-南昌市-南昌县" },
-    "设备安装位置：",
+    {
-    "SIP服务编号:",
+      name: "设备安装位置：",
-    "SIP域:",
+      value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
-    "SIP端口号:",
+    },
-    "通道数量:",
+    { 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: "通道1",
+      value1: "145641201564-1",
+      value2: "哦哦哦我我我喔噢喔喔我",
+    },
+    { name: "通道2", value1: "145641201564-2", value2: "哦哦哦哦哦噢噢欧欧哦" },
+  ];
+  const sewage = [
+    { name: "设备名称：", value: "消火栓呼呼呼呼" },
+    { name: "SIP编号/设备编号：", value: "D50F2049010B" },
+    { name: "接入方式：", value: "NJBJ858G68H" },
+    { name: "厂商：", value: "哇哇哇哇哇" },
+    { name: "添加账号：", value: "Superadmin" },
+    { name: "添加时间：", value: "2022-09-09" },
+    {
+      name: "设备安装位置：",
+      value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+    },
+    { name: "HLS地址", value: "" },
+    { name: "FLV地址", value: "" },
+    { name: "RTMP地址", value: "" },
+    { name: "EZOPEN地址", value: "" },
+    { name: "ONVIF地址", value: "" },
+    { name: "云储存地址", value: "" },
+    { name: "本地储存地址", value: "" },
   ];
-  console.log(IFname);
+  function pp() {
+    let str = [];
+    for (let i = 0; i < (cameraSetup ? sewage : IFname).length; i++) {
+      if (i === 0) {
+        str.push(
+          <div
+            key="Basic_information"
+            style={{
+              fontWeight: "600",
+              color: "#1859C1",
+              margin: "15px 0 0 40px",
+            }}
+          >
+            基础信息
+          </div>
+        );
+      }
+      if (cameraSetup ? i == 7 : i == 8) {
+        str.push(
+          <div key="Access_information">
+            <img
+              src="/assets/images/background/straightline.png"
+              alt="1"
+              style={{ width: 872, display: "block", marginTop: 24 }}
+            />
+            <div
+              style={{
+                fontWeight: "600",
+                color: "#1859C1",
+                margin: "15px 0 0 40px",
+              }}
+            >
+              {cameraSetup ? "复制直播地址" : "接入信息"}
+            </div>
+          </div>
+        );
+      }
+      if (cameraSetup ? i == 12 : i == 17) {
+        str.push(
+          <div key="Camera_information">
+            <img
+              src="/assets/images/background/straightline.png"
+              alt="1"
+              style={{ width: 872, display: "block", marginTop: 24 }}
+            />
+            <div
+              style={{
+                fontWeight: "600",
+                color: "#1859C1",
+                margin: "15px 0 0 40px",
+              }}
+            >
+              {cameraSetup ? "复制回收地址" : "摄像头信息"}
+            </div>
+          </div>
+        );
+      }
+      if (
+        cameraSetup ? 0 <= i && i < 6 : (0 <= i && i < 6) || (i > 7 && i <= 16)
+      ) {
+        str.push(
+          <div
+            key={i}
+            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)",
+              }}
+            >
+              {(cameraSetup ? sewage : IFname)[i].name}
+            </span>
+            <span style={{ fontWeight: "600", color: " #34383E" }}>
+              {(cameraSetup ? sewage : IFname)[i].value}
+            </span>
+          </div>
+        );
+      }
+      if (cameraSetup ? i == 6 : i > 5 && i < 8) {
+        str.push(
+          <div key={i} style={{ marginTop: 14 }}>
+            <span
+              style={{
+                width: 150,
+                display: "inline-block",
+                textAlign: "right",
+                fontWeight: "600",
+                color: "rgba(0, 0, 0, 0.45)",
+              }}
+            >
+              {(cameraSetup ? sewage : IFname)[i].name}
+            </span>
+            <span style={{ fontWeight: "600", color: " #34383E" }}>
+              {(cameraSetup ? sewage : IFname)[i].value}
+            </span>
+          </div>
+        );
+      }
+      if (cameraSetup ? i > 6 && i < 14 : i > 16) {
+        str.push(
+          <div
+            key={i}
+            style={
+              cameraSetup
+                ? {
+                    width: 120,
+                    height: 130,
+                    display: "inline-block",
+                    borderRadius: 4,
+                    border: "1px solid #D9D9D9",
+                    margin: "20px 0 0 40px",
+                    textAlign: "center",
+                    color: clickStyle == sewage[i].name ? "white" : "",
+                    background: clickStyle == sewage[i].name ? "#1859C1" : "",
+                  }
+                : {
+                    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",
+                  }
+            }
+            onClick={
+              cameraSetup
+                ? (e) => {
+                    copy(sewage[i].name);
+                    // alert("复制成功");
+                    setclickStyle(sewage[i].name);
+                  }
+                : ""
+            }
+          >
+            <div
+              style={
+                cameraSetup
+                  ? {}
+                  : {
+                      padding: "8px 10px",
+                      borderBottom: "1px solid rgba(151, 151, 151, 0.2)",
+                    }
+              }
+            >
+              <img
+                src={`/assets/images/background/${
+                  cameraSetup
+                    ? i < 12
+                      ? clickStyle == sewage[i].name
+                        ? "sewage_camera2"
+                        : "sewage_camera1"
+                      : clickStyle == sewage[i].name
+                      ? "store2"
+                      : "store1"
+                    : "camera"
+                }.png`}
+                style={
+                  cameraSetup ? { margin: "20px 0 8px 0" } : { marginRight: 10 }
+                }
+              />
+              <div
+                style={
+                  cameraSetup
+                    ? {}
+                    : {
+                        display: "inline-block",
+                      }
+                }
+              >
+                {cameraSetup ? (
+                  <>
+                    {sewage[i].name}
+                    <img
+                      src={`/assets/images/background/${
+                        clickStyle == sewage[i].name ? "copy2" : "copy1"
+                      }.png`}
+                      style={{
+                        paddingBottom: 10,
+                        display: "inline-block",
+                        width: 10,
+                        height: 20,
+                      }}
+                    />
+                  </>
+                ) : (
+                  IFname[i].name
+                )}
+              </div>
+            </div>
+            {cameraSetup ? (
+              ""
+            ) : (
+              <>
+                <p style={{ margin: "16px 0 0 30px " }}>{IFname[i].value1}</p>
+                <p style={{ margin: "16px 0 20px 30px " }}>
+                  {IFname[i].value2}
+                </p>
+              </>
+            )}
+          </div>
+        );
+      }
+    }
+    return str;
+  }
   const styles = {
     width: 180,
+    height: 64,
     textAlign: "center",
-    // background: "#FFFFFF",
     background: "url(/assets/images/background/backGround.png)",
     backgroundSize: "100% 100%",
-    padding: "12px 17px",
+    padding: "12px 17px 12px 17px",
     margin: "30px 0 0 10px",
-    lineHeight: "20px",
+    lineHeight: "24px",
-    position: "relative",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitLineClamp: "2",
+    WebkitBoxOrient: "vertical",
     zIndex: 5,
   };
 
@@ -55,7 +305,7 @@ function SideSheets(props) {
   return (
     <SideSheet
       visible={visible}
-      title="智慧设备NVR"
+      title={cameraSetup ? "污水管理出出口" : "智慧设备NVR"}
       style={{ background: "#F9FBFF" }}
       size="large"
       onCancel={() => {
@@ -65,7 +315,7 @@ function SideSheets(props) {
       <Tabs type="line">
         <TabPane tab="项目信息" itemKey="1">
           <div style={{ display: "flex", justifyContent: "space-evenly" }}>
-            {list.map((item) => {
+            {list.map((item, index) => {
               return (
                 <div
                   key={item.name}
@@ -78,10 +328,15 @@ function SideSheets(props) {
                     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>
@@ -94,9 +349,7 @@ function SideSheets(props) {
           </div>
         </TabPane>
         <TabPane tab="设备信息" itemKey="2">
-          {IFname.map((item, index) => {
+          {pp()}
-            return index;
-          })}
         </TabPane>
       </Tabs>
     </SideSheet>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx

@@ -1,12 +1,203 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
+import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
 import CameraModal from "../components/cameraModal";
+import NvrModal from "../components/nvrModal";
+import Setup from "../components/setup";
+import SideSheets from "../components/sideSheet";
 
 const CameraHeader = (props) => {
-  const [cameraModal,setCameraModal] = useState(false)
+  const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
-  const [modalName,setModalName] = useState('')
+  const [cameraModal, setCameraModal] = useState(false);
+  const [modalName, setModalName] = useState("");
+  const [setup, setSetup] = useState(false);
+  const [sideSheet, setSideSheet] = useState(false);
+  const [cameraSetup, setcameraSetup] = useState(false);
+  const [setupp, setSetupp] = useState([]);
+  const [venderList, setvenderList] = useState([]); //厂商信息
+  const [query, setQuery] = useState({ limit: 10, page: 0 });
+  const { equipmentWarehouse } = actions;
+  const api = useRef();
+  const CAMERAS = "cameras";
+
+  useEffect(() => {
+    dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
+      setvenderList(res.payload.data);
+    });
+    //初始化表格显示设置
+    localStorage.setItem(
+      CAMERAS,
+      JSON.stringify(["state", "type", "manufactor"])
+    );
+    attribute();
+  }, []);
+
+  useEffect(() => {
+    equipmentGetNvr();
+  }, [query]);
+
+  function equipmentGetNvr() {
+    dispatch(equipmentWarehouse.getNvr(query));
+  }
+  const columns = [
+    {
+      title: "序号",
+      render: (text, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "设备名称",
+      dataIndex: "name",
+      render: (text, record, index) => {
+        return (
+          <div>
+            <span
+              style={{
+                backgroundColor: record.avatarBg,
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                display: "inline-block",
+                marginRight: "10px",
+              }}
+            />
+            {record.name}
+          </div>
+        );
+      },
+    },
+
+    {
+      title: "操作",
+      width: "20%",
+      dataIndex: "",
+      render: (_, row) => {
+        //   console.log(row);
+        return (
+          <div style={{ display: "flex" }}>
+            <Button theme="borderless">
+              <NvrModal
+                nvrData={row}
+                modalName="revise"
+                venderList={venderList}
+                close={() => {
+                  equipmentGetNvr();
+                }}
+              />
+            </Button>
+            <Button
+              theme="borderless"
+              onClick={() => {
+                setSideSheet(true);
+                setcameraSetup(true);
+              }}
+            >
+              查看
+            </Button>
+            <Button theme="borderless">播放</Button>
+            <Button theme="borderless">禁用</Button>
+            <Button
+              theme="borderless"
+              onClick={() => {
+                dispatch(equipmentWarehouse.delNvr(row.id));
+                equipmentGetNvr();
+              }}
+            >
+              删除
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  //获取表格属性设置
+  function attribute() {
+    const arr = localStorage.getItem(CAMERAS)
+      ? JSON.parse(localStorage.getItem(CAMERAS))
+      : [];
+
+    const column = [
+      {
+        title: "设备厂家",
+        dataIndex: "venderId",
+        key: "manufactor",
+      },
+      {
+        title: "接入类型",
+        dataIndex: "createUserId",
+        key: "type",
+      },
+      {
+        title: "设备状态",
+        dataIndex: "channelCount",
+        key: "state",
+      },
+      {
+        title: "云台支持",
+        dataIndex: "port",
+        key: "support",
+      },
+      {
+        title: "内存卡信息",
+        dataIndex: "size",
+        key: "memoryCard",
+      },
+      {
+        title: "设备创建时间",
+        dataIndex: "createTime",
+        key: "time",
+      },
+      {
+        title: "设备添加账号",
+        dataIndex: "size",
+        key: "account",
+      },
+      {
+        title: "项目名称",
+        dataIndex: "updateTime",
+        key: "name",
+      },
+      {
+        title: "pcode",
+        dataIndex: "updateTime",
+        key: "pcode",
+      },
+      {
+        title: "结构物",
+        dataIndex: "updateTime",
+        key: "structure",
+      },
+      {
+        title: "测点",
+        dataIndex: "updateTime",
+        key: "measuringPoint",
+      },
+      {
+        title: "监测因素",
+        dataIndex: "updateTime",
+        key: "factor",
+      },
+    ];
+    for (let i = 0; i < arr.length; i++) {
+      let colum = column.filter((item) => {
+        return item.key === arr[i];
+      });
+      columns.splice(i + 2, 0, colum[0]);
+    }
+    setSetupp(columns);
+  }
+
+  //条件赛选样式
+  const screen = {
+    width: 193,
+    marginRight: 20,
+    marginBottom: 16,
+    color: "rgba(0, 0, 0, 0.65)",
+  };
+
   return (
     <>
       <div style={{ position: "" }}>
@@ -52,7 +243,7 @@ const CameraHeader = (props) => {
               cursor: "pointer",
             }}
             onClick={() => {
-              setModalName('add')
+              setModalName("add");
               setCameraModal(true);
             }}
           >
@@ -60,25 +251,289 @@ const CameraHeader = (props) => {
           </div>
         </div>
       </div>
-      {cameraModal?
+
+      <div
+        style={{
+          width: "100%",
+          background: "#FFFFFF",
+          borderRadius: 3,
+          padding: "8px 20px",
+          marginTop: 20,
+        }}
+      >
+        <div
+          style={{
+            height: 22,
+            fontSize: 16,
+            fontFamily: "PingFangSC-Medium, PingFang SC",
+            fontWeight: "bold",
+            color: " rgba(0, 0, 0, 0.85)",
+            lineHeight: "22px",
+            marginBottom: 16,
+          }}
+        >
+          筛选条件
+        </div>
+        <div style={{ display: "flex" }}>
+          <Form
+            onSubmit={(values) => console.log(values)}
+            // onValueChange={values=>console.log(values)}
+            getFormApi={(formApi) => (api.current = formApi)}
+            layout="horizontal"
+            style={{ position: "relative", width: "100%", flex: 1 }}
+          >
+            <Form.Input
+              label="设备搜索："
+              field="name"
+              placeholder="请输入设备名称"
+              labelPosition="left"
+              style={screen}
+            />
+            <Form.Select
+              label="接入类型："
+              labelPosition="left"
+              field="type1"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="12">111</Form.Select.Option>
+              <Form.Select.Option value="11">111111</Form.Select.Option>
+            </Form.Select>
+            <Form.Select
+              label="厂家筛选："
+              labelPosition="left"
+              style={screen}
+              field="venderId"
+              placeholder="全部"
+            >
+              {venderList.map((item) => {
+                return (
+                  <Form.Select.Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Form.Select.Option>
+                );
+              })}
+            </Form.Select>
+            <Form.Select
+              label="状态查询："
+              labelPosition="left"
+              field="type2"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="yes">在线</Form.Select.Option>
+              <Form.Select.Option value="no">离线</Form.Select.Option>
+            </Form.Select>
+            {/* <Form.Select
+              label="关联项目："
+              labelPosition="left"
+              field="type3"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="智慧环保">
+                飞尚科技1
+              </Form.Select.Option>
+              <Form.Select.Option value="智慧水务">
+                飞尚科技2
+              </Form.Select.Option>
+            </Form.Select> */}
+          </Form>
+          <div
+            style={{
+              width: 150,
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "flex-end",
+            }}
+          >
+            <Button
+              theme="solid"
+              type="primary"
+              style={{
+                width: 65,
+                height: 30,
+                borderRadius: 3,
+                marginBottom: 20,
+                marginRight: 20,
+              }}
+              onClick={() => {
+                api.current.validate().then((values) => {
+                  console.log(values);
+                  console.log(
+                    equipmentWarehouseNvr.data.filter((item) => {
+                      return (
+                        item.name.indexOf(values.name) > -1 &&
+                        item.venderId === values.venderId
+                      );
+                      // return item.venderId === values.venderId;
+                    })
+                  );
+                });
+                console.log(equipmentWarehouseNvr.data);
+              }}
+            >
+              搜素
+            </Button>
+            <Button
+              theme="light"
+              type="primary"
+              style={{
+                width: 65,
+                height: 30,
+                backGround: "#FFFFFF",
+                borderRadius: 3,
+                border: "1px solid #D9D9D9",
+                marginBottom: 20,
+              }}
+            >
+              重置
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div style={{ background: "#FFFFFF", marginTop: 5 }}>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "13px 20px",
+          }}
+        >
+          <div
+            style={{
+              width: 64,
+              height: 22,
+              fontSize: 16,
+              fontfAmily: "PingFangSC-Medium, PingFang SC",
+              fontWeight: "bold",
+              color: "rgba(0, 0, 0, 0.85)",
+              lineHeight: "22px",
+            }}
+          >
+            设备列表
+          </div>
+          <div>
+            <Button
+              style={{
+                width: 32,
+                height: 32,
+                background: "#D9D9D9",
+                borderadius: 3,
+                marginRight: 20,
+              }}
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setSetup(true);
+                setcameraSetup(true);
+              }}
+            >
+              <img
+                src="/assets/images/background/setup.png"
+                alt="设置"
+                style={{ width: 18, height: 18 }}
+              />
+            </Button>
+            <Button
+              style={{
+                width: 65,
+                height: 32,
+                background: "#FFFFFF",
+                borderRadius: 3,
+                border: "1px solid #1859C1",
+              }}
+            >
+              导出
+            </Button>
+          </div>
+        </div>
+        <Table
+          columns={setupp}
+          dataSource={equipmentWarehouseNvr.data}
+          bordered={false}
+          empty="暂无数据"
+          style={{
+            padding: "0px 20px",
+          }}
+          pagination={false}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            padding: "20px 20px",
+          }}
+        >
+          <span style={{ lineHeight: "30px" }}>
+            共{equipmentWarehouseNvr.total}个设备
+          </span>
+          <Pagination
+            className="22"
+            total={equipmentWarehouseNvr.total}
+            showSizeChanger
+            currentPage={query.page + 1}
+            pageSizeOpts={[10, 20, 30, 40]}
+            onChange={(currentPage, pageSize) => {
+              setQuery({ limit: pageSize, page: currentPage - 1 });
+            }}
+          />
+        </div>
+
+        {setup ? (
+          <Setup
+            visible={true}
+            CAMERAS={CAMERAS}
+            cameraSetup={cameraSetup}
+            close={() => {
+              setSetup(false);
+              attribute();
+              setcameraSetup(false);
+            }}
+          />
+        ) : (
+          ""
+        )}
+
+        {sideSheet ? (
+          <SideSheets
+            visible={true}
+            cameraSetup={cameraSetup}
+            close={() => {
+              setSideSheet(false);
+              setcameraSetup(false);
+            }}
+          />
+        ) : (
+          []
+        )}
+      </div>
+
+      {cameraModal ? (
         <CameraModal
           visible={true}
           close={() => {
             setCameraModal(false);
             // setEditData(null)
           }}
-      modalName={modalName} />:''}
+          modalName={modalName}
+        />
+      ) : (
+        ""
+      )}
     </>
   );
 };
 
 function mapStateToProps(state) {
-  const { auth, global, members } = state;
+  const { auth, global, members, equipmentWarehouseNvr } = state;
   return {
     loading: members.isRequesting,
     user: auth.user,
     actions: global.actions,
     members: members.data,
+    equipmentWarehouseNvr: equipmentWarehouseNvr.data || [],
   };
 }
 

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
+import moment from "moment";
 import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
 import NvrModal from "../components/nvrModal";
@@ -14,6 +15,7 @@ const NvrHeader = (props) => {
   const [setupp, setSetupp] = useState([]);
   const [venderList, setvenderList] = useState([]); //厂商信息
   const [query, setQuery] = useState({ limit: 10, page: 0 });
+  const api = useRef();
   const SETUPS = "setups";
 
   useEffect(() => {
@@ -71,7 +73,7 @@ const NvrHeader = (props) => {
       render: (_, row) => {
         //   console.log(row);
         return (
-          <>
+          <div style={{ display: "flex" }}>
             <Button theme="borderless">
               <NvrModal
                 nvrData={row}
@@ -90,11 +92,16 @@ const NvrHeader = (props) => {
             >
               查看
             </Button>
-            <Button theme="borderless" onClick={()=>{
+            <Button
+              theme="borderless"
+              onClick={() => {
                 dispatch(equipmentWarehouse.delNvr(row.id));
                 equipmentGetNvr();
-            }}>删除</Button>
+              }}
-          </>
+            >
+              删除
+            </Button>
+          </div>
         );
       },
     },
@@ -136,6 +143,9 @@ const NvrHeader = (props) => {
         title: "创建时间",
         dataIndex: "createTime",
         key: "f",
+        render: (text, r, index) => {
+          return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
+        },
       },
       {
         title: "项目名称",
@@ -250,11 +260,14 @@ const NvrHeader = (props) => {
         <div style={{ display: "flex" }}>
           <Form
             onSubmit={(values) => console.log(values)}
+            // onValueChange={values=>console.log(values)}
+            getFormApi={(formApi) => (api.current = formApi)}
             layout="horizontal"
             style={{ position: "relative", width: "100%", flex: 1 }}
           >
             <Form.Input
-              field="设备搜索："
+              label="设备搜索："
+              field="name"
               placeholder="请输入设备名称"
               labelPosition="left"
               style={screen}
@@ -263,7 +276,7 @@ const NvrHeader = (props) => {
               label="厂家筛选："
               labelPosition="left"
               style={screen}
-              field="type1"
+              field="venderId"
               placeholder="全部"
             >
               {venderList.map((item) => {
@@ -284,16 +297,20 @@ const NvrHeader = (props) => {
               <Form.Select.Option value="yes">在线</Form.Select.Option>
               <Form.Select.Option value="no">离线</Form.Select.Option>
             </Form.Select>
-            <Form.Select
+            {/* <Form.Select
               label="关联项目："
               labelPosition="left"
               field="type3"
               style={screen}
               placeholder="全部"
             >
-              <Form.Select.Option value="oper ">飞尚科技1</Form.Select.Option>
+              <Form.Select.Option value="智慧环保">
-              <Form.Select.Option value="r">飞尚科技2</Form.Select.Option>
+                飞尚科技1
-            </Form.Select>
+              </Form.Select.Option>
+              <Form.Select.Option value="智慧水务">
+                飞尚科技2
+              </Form.Select.Option>
+            </Form.Select> */}
           </Form>
           <div
             style={{
@@ -313,7 +330,20 @@ const NvrHeader = (props) => {
                 marginBottom: 20,
                 marginRight: 20,
               }}
-              onClick={() => {}}
+              onClick={() => {
+                api.current.validate().then((values) => {
+                  console.log(values);
+                  console.log(
+                    equipmentWarehouseNvr.data.filter((item) => {
+                      return (
+                        item.name.indexOf(values.name) > -1 &&
+                        item.venderId === values.venderId
+                      );
+                    })
+                  );
+                });
+                console.log(equipmentWarehouseNvr.data);
+              }}
             >
               搜素
             </Button>
@@ -414,10 +444,10 @@ const NvrHeader = (props) => {
             className="22"
             total={equipmentWarehouseNvr.total}
             showSizeChanger
+            currentPage={query.page + 1}
             pageSizeOpts={[10, 20, 30, 40]}
             onChange={(currentPage, pageSize) => {
               setQuery({ limit: pageSize, page: currentPage - 1 });
-              console.log(currentPage, pageSize);
             }}
           />
         </div>

code/VideoAccess-VCMP/web/package.json

@@ -60,12 +60,13 @@
         "@vitejs/plugin-react": "^1.3.1",
         "@vitejs/plugin-react-refresh": "^1.3.6",
         "args": "^5.0.1",
+        "copy-to-clipboard": "^3.3.1",
         "cross-env": "^7.0.3",
         "fs-web-server-scaffold": "^1.0.6",
         "koa-better-http-proxy": "^0.2.5",
         "koa-proxy": "^1.0.0-alpha.3",
         "koa-view": "^2.1.4",
-        "moment": "^2.22.0",
+        "moment": "^2.29.3",
         "npm": "^7.20.6",
         "perfect-scrollbar": "^1.5.5",
         "socket.io-client": "^4.5.0",