添-首页-布局修改

components/contentBox/index.tsx

@@ -10,6 +10,7 @@ export default function ContentBox(props: BoxProps) {
         boxIndex={props.boxIndex}
         leftRenderDom={props.leftRenderDom}
         leftcontentstyle={props.leftcontentstyle}
+        leftWaterfallDom={props.leftWaterfallDom}
       />
       <Right rightRenderDom={props.rightRenderDom} />
     </Box>

components/contentBox/interface.ts

@@ -5,9 +5,18 @@ export interface DomType {
   }[];
   pagination?: JSX.Element;
 }
+export interface WaterfallType {
+  columns: {
+    noFor?: boolean;
+    type?: string,
+    element: JSX.Element;
+  }[];
+  pagination?: JSX.Element;
+}
 export interface leftBoxProps {
   boxIndex: number;
-  leftRenderDom: DomType;
+  leftRenderDom?: DomType;
+  leftWaterfallDom?: WaterfallType;
   leftcontentstyle?: {
     width?: string;
     margin?: {
@@ -24,7 +33,8 @@ export interface rightBoxProps {
 
 export interface BoxProps {
   boxIndex: number;
-  leftRenderDom: DomType;
+  leftRenderDom?: DomType;
+  leftWaterfallDom?: WaterfallType;
   leftcontentstyle?: {
     width?: string;
     margin?: {

components/contentBox/left/index.tsx

 import React from "react";
 import { Empty } from "antd";
-import { Box } from "./styled";
+import { Box , WaterfallBox } from "./styled";
 import { leftBoxProps } from "../interface";
 
 export default function Left(props: leftBoxProps) {
-  const { boxIndex, leftRenderDom, leftcontentstyle } = props;
-
+  const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
   return (
     <div>
-      {leftRenderDom.columns.map((item) => {
+      {leftRenderDom?.columns.map((item) => {
         if (item.noFor) {
           return item.element;
         }
@@ -16,7 +15,7 @@ export default function Left(props: leftBoxProps) {
       })}
       {
         <Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
-          {leftRenderDom.columns.map((item) => {
+          {leftRenderDom?.columns.map((item) => {
             if (!item.noFor) {
               return item.element;
             }
@@ -24,8 +23,29 @@ export default function Left(props: leftBoxProps) {
           })}
         </Box>
       }
-      {leftRenderDom.pagination ? leftRenderDom.pagination : null}
-      {!leftRenderDom.columns.length ? (
+      {
+        <WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
+
+        { <div className="left-columns">
+            {leftWaterfallDom?.columns.map((item) => {
+            if (!item.noFor && item.type === "left") {
+                return item.element
+            }
+            return null
+          })}
+        </div>}
+        { <div className="right-columns">
+            {leftWaterfallDom?.columns.map((item) => {
+            if (!item.noFor && item.type === "right") {
+                return item.element
+            }
+            return null
+          })}
+        </div>}
+      </WaterfallBox>
+      }
+      {leftRenderDom?.pagination ? leftRenderDom?.pagination : null}
+      {!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length? (
         <Empty description={"暂无数据"} />
       ) : null}
     </div>

components/contentBox/left/styled.tsx

@@ -33,4 +33,31 @@ export const Box = styled.div<BoxProps>`
 				margin-right: 0;
 			} 
 	}
+`
+
+export const WaterfallBox = styled.div<BoxProps>`
+	box-sizing: border-box;
+    display: flex;
+	width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"};
+    .item{
+			// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
+			// 同时设置下边距margin-bottom（每个元素的上下间隙）
+			/* margin: 0 24px 15px 0; */
+			margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`)  : "0 24px 15px 0"};;
+			width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});   
+			// 这里一行显示index个，所以是/index，一行显示几个就除以几 
+			// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
+			min-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
+			max-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index});
+			// 每行最右侧的那个不设置右外边距
+			&:nth-child(${props => props.index}n + ${props => props.index}) {
+				margin-right: 0;
+			} 
+	}
+	.left-columns{
+
+	}
+	.right-columns{
+		
+	}
 `
\ No newline at end of file

pages/home/waterfallFlowBody/index.tsx

@@ -96,16 +96,16 @@ export default function WaterfallFlowBody() {
       router: "/mall",
     },
     {
-      title: "无人机服务",
-      router: "/jobServices",
+      title: "无人机保险",
+      router: "",
     },
     {
       title: "无人机培训",
       router: "flyingHandService",
     },
     {
-      title: "无人机保险",
-      router: "",
+      title: "无人机服务",
+      router: "/jobServices",
     },
     {
       title: "无人机工具软件",
@@ -114,7 +114,7 @@ export default function WaterfallFlowBody() {
   ];
 
   const [leftDomList, setLeftDomList] = useState(
-    Array<{ element: JSX.Element }>
+    Array<{ element: JSX.Element , type?: string,}>
   );
   const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
   const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
@@ -130,11 +130,12 @@ export default function WaterfallFlowBody() {
     "modelId",
     "qualityId",
   ];
+  const { IndustryFlightSkills } = flightSkillsApi;
+  const flightApiTypeList = ["licenseId", "flightSkillsId"];
+  
   const { listAllIndustry, listAllAppType } = jobServicesApi;
   const jobApiTypeList = ["industryId", "appTypeId"];
 
-  const { IndustryFlightSkills } = flightSkillsApi;
-  const flightApiTypeList = ["licenseId", "flightSkillsId"];
 
   useEffect(() => {
     (async () => {
@@ -155,8 +156,8 @@ export default function WaterfallFlowBody() {
         listAllParts(),
         listAllQuality(),
       ]);
-      let res3 = await Promise.all([listAllIndustry(), listAllAppType()]);
-      let res4 = await Promise.all([IndustryFlightSkills()]);
+      let res3 = await Promise.all([IndustryFlightSkills()]);
+      let res4 = await Promise.all([listAllIndustry(), listAllAppType()]);
       //  let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
       //  let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
 
@@ -201,16 +202,22 @@ export default function WaterfallFlowBody() {
       const listValue: any = [
         resValuelist1,
         resValuelist2,
+        [],
         resValuelist3,
         resValuelist4.flat(),
         [],
-        [],
       ];
 
       setMoreEqList(res1.map((item) => item.result).flat());
       setLeftDomList(
         columns.map((item, index) => {
-          return { element: leftDom(item, index, listValue) };
+          
+          if (index < 3) {
+            console.log("路由跳转",index);
+            return { element: leftDom(item, index, listValue) , type:"left" };  
+          }
+          console.log("路由跳转",index);
+          return { element: leftDom(item, index, listValue) , type:"right" };  
         })
       );
 
@@ -220,6 +227,8 @@ export default function WaterfallFlowBody() {
   }, []);
 
   const routerPath = (index: number, item?: AllType) => {
+    console.log(index);
+    
     if (item) {
       router.push({
         pathname: columns[index].router,
@@ -260,7 +269,7 @@ export default function WaterfallFlowBody() {
         </div>
         <div className="item-body">
           <Space size={[15, 0]} wrap>
-            {index === 4
+            {index === 2
               ? list.map((item, index) => (
                   <div
                     key={item}
@@ -282,12 +291,12 @@ export default function WaterfallFlowBody() {
                     {item}
                   </div>
                 ))
-              : resultList[index].map((item, index) => {
+              : resultList[index].map((item, indexer) => {
                   return (
                     <div
                       key={item?.name || item?.appName || item?.skillsName}
                       className={`item-bubble ${
-                        index === 0 || index === 1 || index === 2
+                        indexer === 0 || indexer === 1 || indexer === 2
                           ? "active"
                           : ""
                       }`}
@@ -380,12 +389,12 @@ export default function WaterfallFlowBody() {
   return (
     <Box>
       <ContentBox
-        boxIndex={2}
+        boxIndex={1} //分为左右两列，每列一个,从上而下
         leftcontentstyle={{
           width: "806px",
           margin: { top: 0, right: "10px", bottom: "10px", left: 0 },
         }}
-        leftRenderDom={{
+        leftWaterfallDom={{
           columns: [
             { noFor: true, element: <RotationChart key={45645645} /> },
             ...leftDomList,