添加骨架屏

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

@@ -12,7 +12,7 @@ export function getCamera(query) {
       query: query,
       url: `${ApiTable.getCamera}`,
       msg: { option: "获取摄像头列表信息" },
-        reducer: { name: "equipmentWarehouseCamera" },
+      reducer: { name: "equipmentWarehouseCamera", params: { noClear: true } },
     });
 }
 

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

@@ -24,7 +24,7 @@ export function getNvr(query) {
       query: query,
       url: `${ApiTable.getNvr}`,
       msg: { option: "获取nvr列表信息" },
-      reducer: { name: "equipmentWarehouseNvr" },
+      reducer: { name: "equipmentWarehouseNvr", params: { noClear: true } },
     });
 }
 

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

@@ -33,7 +33,7 @@ function SideSheets(props) {
         basics: [
           { name: "设备名称：", key: "name" },
           { name: "设备编号：", key: "serialNo" },
-          { name: "接入方式：", key: "type" },
+          { name: "接入方式：", key: "accessWay" },
           { name: "厂商：", key: "venderId" },
           { name: "添加账号：", key: "createUser" },
           { name: "添加时间：", key: "createTime" },
@@ -148,8 +148,8 @@ function SideSheets(props) {
       equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
         suppressScrollX: true,
       });
-    });
       console.log(nvrDetails);
+    });
   }, []);
 
   useEffect(() => {
@@ -340,13 +340,16 @@ function SideSheets(props) {
                               <span
                                 style={{ fontWeight: "600", color: " #34383E" }}
                               >
-                                {item.key == "typ"
+                                {item.key == "typ"  ////////////////////////////////要改
-                                  ? accessType.find((v) => v.key == nvrDetails.type)
+                                  ? accessType.find(
-                                      .name
+                                      (v) => v.key == nvrDetails.type
+                                    ).name
                                   : item.key == "venderId"
+                                  ? nvrDetails.venderId
                                     ? venderList.find(
                                         (v) => v.id == nvrDetails.venderId
                                       ).name
+                                    : ""
                                   : item.key == "createUser"
                                   ? nvrDetails.createUser.namePresent
                                   : item.key == "createTime"

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

@@ -10,6 +10,7 @@ import {
   Pagination,
   Popover,
   Tag,
+  Skeleton,
 } from "@douyinfe/semi-ui";
 import "../style.less";
 import CameraModal from "../components/cameraModal";
@@ -100,7 +101,7 @@ const CameraHeader = (props) => {
                 modalName="revise"
                 venderList={venderList}
                 close={() => {
-                  equipmentGetNvr();
+                  equipmentGetCamera();
                 }}
               />
             </Button>
@@ -119,13 +120,13 @@ const CameraHeader = (props) => {
             <Button
               theme="borderless"
               onClick={() => {
-                console.log(row.id, !row.forbidden);
                 dispatch(
                   equipmentWarehouse.putForbidden({
                     cameraId: row.id,
                     forbidden: !row.forbidden,
                   })
                 );
+                equipmentGetCamera();
               }}
             >
               {row.forbidden ? "启用" : "禁用"}
@@ -134,7 +135,7 @@ const CameraHeader = (props) => {
               theme="borderless"
               onClick={() => {
                 dispatch(equipmentWarehouse.delNvr(row.id));
-                equipmentGetNvr();
+                equipmentGetCamera();
               }}
             >
               删除
@@ -495,6 +496,11 @@ const CameraHeader = (props) => {
                 border: "1px solid #D9D9D9",
                 marginBottom: 20,
               }}
+              onClick={() => {
+                api.current.reset();
+                setearch({});
+                equipmentGetCamera();
+              }}
             >
               重置
             </Button>
@@ -558,8 +564,20 @@ const CameraHeader = (props) => {
             </Button>
           </div>
         </div>
+        <Skeleton
+          loading={loading}
+          placeholder={
+            <Table
+              columns={setupp.filter((s) => s)}
+              dataSource={[{ name: "" },{ key: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" }]}
+              pagination={false}
+              style={{ background: "rgba(217, 216, 216, 1)" }}
+              empty=""
+            />
+          }
+        >
           <Table
-          columns={setupp.filter(s => s)}
+            columns={setupp.filter((s) => s)}
             dataSource={equipmentWarehouseCamera.data}
             bordered={false}
             empty="暂无数据"
@@ -568,6 +586,7 @@ const CameraHeader = (props) => {
             }}
             pagination={false}
           />
+        </Skeleton>
         <div
           style={{
             display: "flex",
@@ -641,7 +660,7 @@ const CameraHeader = (props) => {
 function mapStateToProps(state) {
   const { auth, global, members, equipmentWarehouseCamera } = state;
   return {
-    loading: members.isRequesting,
+    loading: equipmentWarehouseCamera.isRequesting,
     user: auth.user,
     actions: global.actions,
     members: members.data,

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

@@ -1,7 +1,15 @@
 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 {
+  Button,
+  Form,
+  Input,
+  Row,
+  Table,
+  Pagination,
+  Skeleton,
+} from "@douyinfe/semi-ui";
 import "../style.less";
 import NvrModal from "../components/nvrModal";
 import Setup from "../components/setup";
@@ -17,6 +25,7 @@ export const accessType = [
 const NvrHeader = (props) => {
   const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
   const { equipmentWarehouse } = actions;
+  // const [loading, setLoading] = useState(false);
   const [setup, setSetup] = useState(false);
   const [sideSheet, setSideSheet] = useState(false);
   const [setupp, setSetupp] = useState([]);
@@ -110,8 +119,9 @@ const NvrHeader = (props) => {
             <Button
               theme="borderless"
               onClick={() => {
-                        dispatch(equipmentWarehouse.delNvr(row.id));
+                dispatch(equipmentWarehouse.delNvr(row.id)).then(() => {
                   equipmentGetNvr();
+                });
               }}
             >
               删除
@@ -372,6 +382,11 @@ const NvrHeader = (props) => {
                 border: "1px solid #D9D9D9",
                 marginBottom: 20,
               }}
+              onClick={() => {
+                api.current.reset();
+                setearch({});
+                equipmentGetNvr();
+              }}
             >
               重置
             </Button>
@@ -434,8 +449,20 @@ const NvrHeader = (props) => {
             </Button>
           </div>
         </div>
+        <Skeleton
+          loading={loading}
+          placeholder={
             <Table
-               columns={setupp.filter(s => s)}
+              columns={setupp.filter((s) => s)}
+              dataSource={[{ name: "" },{ key: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" },{ name: "" }]}
+              pagination={false}
+              style={{ background: "rgba(217, 216, 216, 1)" }}
+              empty=""
+            />
+          }
+        >
+          <Table
+            columns={setupp.filter((s) => s)}
             dataSource={equipmentWarehouseNvr.data}
             bordered={false}
             empty="暂无数据"
@@ -444,6 +471,8 @@ const NvrHeader = (props) => {
             }}
             pagination={false}
           />
+        </Skeleton>
+
         <div
           style={{
             display: "flex",
@@ -496,11 +525,10 @@ const NvrHeader = (props) => {
   );
 };
 
-
 function mapStateToProps(state) {
   const { auth, global, members, equipmentWarehouseNvr } = state;
   return {
-      loading: members.isRequesting,
+    loading: equipmentWarehouseNvr.isRequesting,
     user: auth.user,
     actions: global.actions,
     members: members.data,