解决了表格数据展现的BUG

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}
-          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=" "
-            />
-          }
+          loading={loading}
+          active={true}
+          placeholder={skeletonScreen(8, setupp.length)}
         >
           <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/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@@ -10,11 +10,15 @@ import {
   Pagination,
   Skeleton,
   Popconfirm,
+  Popover,
+  Tag,
 } from "@douyinfe/semi-ui";
 import "../style.less";
 import NvrModal from "../components/nvrModal";
 import Setup from "../components/setup";
 import SideSheets from "../components/sideSheet";
+import {skeletonScreen} from "../components/skeletonScreen";
+
 
 export const accessType = [
   { name: "萤石云平台摄像头", key: "yingshi" },
@@ -34,11 +38,14 @@ const NvrHeader = (props) => {
   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
   const [search, setearch] = useState({}); //搜索条件
   const [rowId, setRowId] = useState(); //表格数据id
+  const [load, setLoad] = useState(); //骨架屏是否显现
+
 
   const api = useRef();
   const SETUPS = "setups";
 
   useEffect(() => {
+    setLoad(loading);
     dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
       setvenderList(res.payload.data);
       attribute(res.payload.data);
@@ -184,30 +191,47 @@ const NvrHeader = (props) => {
         title: "项目名称",
         dataIndex: "",
         key: "name",
-        // render: (_, r, index) => {
-        //   console.log(r);
-        //   return r.station.length == 0
-        //     ? ""
-        //     : r.station.map((item, index) => {
-        //         return item.structure.projects.length == 0
-        //           ? ""
-        //           : station(
-        //               r.station[0].structure.projects[0].name,
-        //               item.structure.projects,
-        //               "name"
-        //             );
-        //       });
-        // },
+        render: (_, r, index) => {
+          return r.station.length == 0
+            ? ""
+            : r.station.map((item, index) => {
+                return item.structure.projects.length == 0
+                  ? ""
+                  : station(
+                      r.station[0].structure.projects[0].name,
+                      item.structure.projects,
+                      "name"
+                    );
+              });
+        },
       },
       {
         title: "pcode",
         dataIndex: "",
         key: "pcode",
+        render: (_, r, index) => {
+          return r.station.length == 0
+            ? ""
+            : r.station.map((item, index) => {
+                return item.structure.projects.length == 0
+                  ? ""
+                  : station(
+                      r.station[0].structure.projects[0].url,
+                      item.structure.projects,
+                      "url"
+                    );
+              });
+        },
       },
       {
         title: "结构物",
         dataIndex: "",
         key: "structure",
+        render: (_, r, index) => {
+          return r.station.length == 0
+            ? ""
+            : station(r.station[0].structure.name, r.station, "structure.name");
+        },
       },
     ];
     for (let i = 0; i < arr.length; i++) {
@@ -219,6 +243,42 @@ const NvrHeader = (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,
@@ -229,7 +289,7 @@ const NvrHeader = (props) => {
 
   return (
     <>
-      <div style={{ position: "" }}>
+      <div>
         <video
           id="nvrBanner"
           autoPlay
@@ -468,25 +528,8 @@ const NvrHeader = (props) => {
           </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=""
-            // />
-            <><div style></div></>
-          }
+          loading={load}
+          placeholder={skeletonScreen(8, setupp.length)}
         >
           <Table
             columns={setupp.filter((s) => s)}