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

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

@@ -0,0 +1,115 @@
+import { Table } from "@douyinfe/semi-ui";
+
+export function skeletonScreen(line, columns) {
+  //   function TableHead() {
+  //     let str = [];
+  //     for (let i = 0; i <= column; i++) {
+  //         if(i==column-2){
+
+  //         }else{
+  //             str.push(<div>ngfbn</div>)
+  //         }
+  //     }
+  //     return str;
+  //   }
+  const data = () => {
+    let str = [];
+    for (let i = 0; i < line; i++) {
+      if (i == line - 1) {
+        str.push({
+          createUserId: (
+            <div
+              style={{
+                width: 30,
+                height: 14,
+                background: "rgba(217, 216, 216, 0.3)",
+              }}
+            ></div>
+          ),
+          operation: (
+            <div
+              style={{
+                width: 50,
+                height: 14,
+                background: "rgba(217, 216, 216, 0.3)",
+              }}
+            ></div>
+          ),
+        });
+      } else {
+        str.push({
+          createUserId: (
+            <div
+              style={{
+                width: 30,
+                height: 14,
+                background: "rgba(217, 216, 216, 0.3)",
+              }}
+            ></div>
+          ),
+          operation: (
+            <div
+              style={{
+                width: 50,
+                height: 14,
+                background: "red",
+              }}
+            ></div>
+          ),
+        });
+      }
+    }
+    return str;
+  };
+  const column = () => {
+    let str = [];
+    for (let i = 0; i < columns; i++) {
+      if (i == columns - 1) {
+        str.push({
+          title: (
+            <div
+              style={{
+                width: 30,
+                height: 14,
+                background: "rgba(217, 216, 216, 0.5)",
+              }}
+            ></div>
+          ),
+          dataIndex: "operation",
+          key: i,
+          width: "20%",
+        });
+      } else {
+        str.push({
+          title: (
+            <div
+              style={{
+                width: 30,
+                height: 14,
+                background: "rgba(217, 216, 216, 0.5)",
+              }}
+            ></div>
+          ),
+          dataIndex: "createUserId",
+          key: i,
+        });
+      }
+    }
+    return str;
+  };
+
+  return (
+    <>
+      <Table
+        columns={column()}
+        dataSource={data()}
+        bordered={false}
+        empty="暂无数据"
+        style={{
+          padding: "0px 20px",
+        }}
+        pagination={false}
+      />
+    </>
+  );
+}

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

@@ -18,6 +18,7 @@ import CameraModal from "../components/cameraModal";
 import NvrModal from "../components/nvrModal";
 import Setup from "../components/setup";
 import SideSheets from "../components/sideSheet";
+import { skeletonScreen } from "../components/skeletonScreen";
 import { accessType } from "./nvr";
 
 const CameraHeader = (props) => {
@@ -32,12 +33,14 @@ const CameraHeader = (props) => {
   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
   const [search, setearch] = useState({}); //搜索条件
   const [rowId, setRowId] = useState(); //表格数据id
+  const [load, setLoad] = useState(); //骨架屏是否显现
 
   const { equipmentWarehouse } = actions;
   const api = useRef();
   const CAMERAS = "cameras";
 
   useEffect(() => {
+    setLoad(loading);
     dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
       setvenderList(res.payload.data);
       attribute(res.payload.data);
@@ -270,7 +273,7 @@ const CameraHeader = (props) => {
       },
       {
         title: "结构物",
-        dataIndex: "updateTime",
+        dataIndex: "",
         key: "structure",
         render: (_, r, index) => {
           return r.station.length == 0
@@ -608,24 +611,9 @@ const CameraHeader = (props) => {
           </div>
         </div>
         <Skeleton
-          loading={!loading}
+          loading={loading}
-          placeholder={
+          active={true}
-            <Table
+          placeholder={skeletonScreen(8, setupp.length)}
-              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)}
@@ -711,7 +699,8 @@ const CameraHeader = (props) => {
 function mapStateToProps(state) {
   const { auth, global, members, equipmentWarehouseCamera } = state;
   return {
-    loading: equipmentWarehouseCamera.isRequesting,
+    loading:
+      equipmentWarehouseCamera.isRequesting && !equipmentWarehouseCamera.data,
     user: auth.user,
     actions: global.actions,
     members: members.data,

code/VideoAccess-VCMP/web/package.json

@@ -74,4 +74,4 @@
       "webpack-dev-server": "^3.11.2",
       "webpack-hot-middleware": "^2.25.0"
    }
-}
+}