解决冲突

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);
@@ -56,7 +63,7 @@ const NvrHeader = (props) => {
     equipmentGetNvr();
   }, [query, search]);
 
-   function equipmentGetNvr () {
+  function equipmentGetNvr() {
     dispatch(equipmentWarehouse.getNvr({ ...query, ...search }));
   }
   const columns = [
@@ -137,7 +144,7 @@ const NvrHeader = (props) => {
   ];
 
   //获取表格属性设置
-   function attribute (data) {
+  function attribute(data) {
     const arr = localStorage.getItem(SETUPS)
       ? JSON.parse(localStorage.getItem(SETUPS))
       : [];
@@ -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)}
@@ -552,7 +595,7 @@ const NvrHeader = (props) => {
   );
 };
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   const { auth, global, members, equipmentWarehouseNvr } = state;
   return {
     loading: equipmentWarehouseNvr.isRequesting,