表格功能完成

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

@@ -13,3 +13,15 @@ export function getMembers (orgId) {
         reducer: { name: 'members' }
     });
 }
+
+export function getNvr (query) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_NVR',
+        query:query,
+        url: `${ApiTable.getNvr}`,
+        msg: { option: '获取nvr列表信息' },
+        reducer: { name: 'equipmentWarehouseNvr' }
+    });
+}

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

@@ -6,19 +6,48 @@ function SideSheets(props) {
   const [checkeds, setCheckeds] = useState([]);
   const [check, setCheck] = useState([]);
   const list = [
-    { name: "1111", a: "a", b: "B", c: "C", d: "C" },
+    {
-    { name: "2222", a: "a", b: "B", c: "C", d: "C" },
+      name: "项目名称",
-    { name: "3333", a: "a", b: "B", c: "C", d: "C" },
+      a: "南昌县智慧环保",
-    { name: "4444", a: "a", b: "B", c: "C", d: "C" },
+      b: "南昌县智慧环保",
+      c: "南昌市市政隧道综合管理平台",
+      d: "C",
+    },
+    { name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
+    { name: "关联测点", a: "a", b: "B", c: "C", d: "C" },
+    { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
   ];
+  const IFname = [
+    "设备名称：",
+    "设备编号：",
+    "接入方式：",
+    "厂商：",
+    "添加账号：",
+    "添加时间：",
+    "行政区别：",
+    "设备安装位置：",
+    "SIP服务编号:",
+    "SIP域:",
+    "SIP端口号:",
+    "通道数量:",
+    "心跳周期:",
+    "最大心跳次数:",
+    "注册密码:",
+    "注册有效期::",
+    "接入识别模块:",
+  ];
+  console.log(IFname);
   const styles = {
     width: 180,
     textAlign: "center",
-    background: "#FFFFFF",
+    // background: "#FFFFFF",
+    background: "url(/assets/images/background/backGround.png)",
+    backgroundSize: "100% 100%",
     padding: "12px 17px",
     margin: "30px 0 0 10px",
     lineHeight: "20px",
-    
+    position: "relative",
+    zIndex: 5,
   };
 
   useEffect(() => {}, []);
@@ -35,36 +64,39 @@ function SideSheets(props) {
     >
       <Tabs type="line">
         <TabPane tab="项目信息" itemKey="1">
-          {list.map((item) => {
+          <div style={{ display: "flex", justifyContent: "space-evenly" }}>
-            return (
+            {list.map((item) => {
-              <div
+              return (
-                key={item.name}
-                style={{
-                  display: "inline-block",
-                  width: 200,
-                  margin: "12px 8px",
-                }}
-              >
                 <div
+                  key={item.name}
                   style={{
-                    lineHeight: "32px",
+                    width: 200,
-                    background: "#1859C1",
+                    margin: "12px 8px",
-                    borderRadius: 3,
-                    textAlign: "center",
                   }}
                 >
-                  {item.name}
+                  <div
+                    style={{
+                      lineHeight: "32px",
+                      background: "#1859C1",
+                      borderRadius: 3,
+                      textAlign: "center",
+                    }}
+                  >
+                    {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 style={styles}>{item.a}</div>
+              );
-                <div style={styles}>{item.b}</div>
+            })}
-                <div style={styles}>{item.c}</div>
+          </div>
-                <div style={styles}>{item.d}</div>
-              </div>
-            );
-          })}
         </TabPane>
         <TabPane tab="设备信息" itemKey="2">
-          快速起步
+          {IFname.map((item, index) => {
+            return index;
+          })}
         </TabPane>
       </Tabs>
     </SideSheet>

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

@@ -1,31 +1,31 @@
 import React, { useState, useEffect } 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 NvrModal from "../components/nvrModal";
 import Setup from "../components/setup";
 import SideSheets from "../components/sideSheet";
 
 const NvrHeader = (props) => {
-  const { dispatch, actions, user, loading } = props;
+  const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
+  const { equipmentWarehouse } = actions;
   const [setup, setSetup] = useState(false);
   const [sideSheet, setSideSheet] = useState(false);
   const [setupp, setSetupp] = useState([]);
+  const [pagination, setPagination] = useState({limit:10,page:0});
+
   const SETUPS = "setups";
 
   const columns = [
     {
       title: "序号",
-
       render: (text, record, index) => {
         return index + 1;
       },
     },
     {
       title: "设备名称",
-      //   dataIndex: "name",///
+      dataIndex: "name",
-      width: 200,
-      background: "red",
       render: (text, record, index) => {
         return (
           <div>
@@ -74,9 +74,15 @@ const NvrHeader = (props) => {
     },
   ];
 
+  useEffect(() => {
+    localStorage.setItem(SETUPS, JSON.stringify(["a", "c", "d", "e"]));
+    dispatch(equipmentWarehouse.getNvr(pagination));
+  }, [pagination]);
+console.log(equipmentWarehouseNvr);
   useEffect(() => {
     attribute();
   }, []);
+
   //获取表格属性设置
   function attribute() {
     const arr = localStorage.getItem(SETUPS)
@@ -86,22 +92,22 @@ const NvrHeader = (props) => {
     const column = [
       {
         title: "设备厂家",
-        dataIndex: "size",
+        dataIndex: "venderId",
         key: "a",
       },
       {
-        title: "添加张账号",
+        title: "添加账号",
-        dataIndex: "size",
+        dataIndex: "createUserId",
         key: "b",
       },
       {
         title: "通道数",
-        dataIndex: "size",
+        dataIndex: "channelCount",
         key: "c",
       },
       {
         title: "端口",
-        dataIndex: "size",
+        dataIndex: "port",
         key: "d",
       },
       {
@@ -111,7 +117,7 @@ const NvrHeader = (props) => {
       },
       {
         title: "创建时间",
-        dataIndex: "size",
+        dataIndex: "createTime",
         key: "f",
       },
       {
@@ -139,6 +145,7 @@ const NvrHeader = (props) => {
     setSetupp(columns);
   }
 
+  //条件赛选样式
   const screen = {
     width: 193,
     marginRight: 20,
@@ -146,35 +153,6 @@ const NvrHeader = (props) => {
     color: "rgba(0, 0, 0, 0.65)",
   };
 
-  const data = [
-    {
-      key: "1",
-      name: "智能设备NVR1",
-      nameIconSrc: "12",
-      size: "飞尚科技1",
-      owner: "192.168.1.1",
-      updateTime: "5000",
-      avatarBg: "red",
-    },
-    {
-      key: "2",
-      name: "智能设备NVR2",
-      nameIconSrc: "8",
-      size: "飞尚科技2",
-      owner: "192.168.1.3",
-      updateTime: "5001",
-      avatarBg: "green",
-    },
-    {
-      key: "3",
-      name: "智能设备NVR3",
-      nameIconSrc: "9",
-      size: "飞尚科技3",
-      owner: "192.168.1.2",
-      updateTime: "5002",
-      avatarBg: "green",
-    },
-  ];
   return (
     <>
       <div style={{ position: "" }}>
@@ -386,14 +364,29 @@ const NvrHeader = (props) => {
         </div>
         <Table
           columns={setupp}
-          dataSource={data}
+          dataSource={equipmentWarehouseNvr.data}
-          pagination={false}
           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
+          pageSizeOpts={[10, 20, 30,40 ]}
+          onChange={(currentPage,pageSize)=>{
+            setPagination({limit:pageSize,page:currentPage-1})
+            console.log(currentPage,pageSize);
+          }}
         />
+        </div>
+        
+
         {setup ? (
           <Setup
             visible={true}
@@ -401,10 +394,7 @@ const NvrHeader = (props) => {
             close={() => {
               setSetup(false);
               attribute();
-              // setEditData(null)
             }}
-            // reportType={reportType}
-            // editData={editData}
           />
         ) : (
           ""
@@ -426,12 +416,13 @@ const NvrHeader = (props) => {
 };
 
 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/utils/webapi.js

@@ -8,6 +8,8 @@ export const ApiTable = {
     logout: 'logout',
 
     getEnterprisesMembers: 'enterprises/{enterpriseId}/members',
+
+    getNvr:'nvr',
 };
 
 export const RouteTable = {