改-解决页面因为未给图片默认值出现白屏的错误，给新闻添加图片默认值

components/contentBox/left/index.tsx

-import React from 'react';
-import {Empty} from 'antd';
-import { Box } from './styled';
-import {leftBoxProps} from '../interface';
+import React from "react";
+import { Empty } from "antd";
+import { Box } from "./styled";
+import { leftBoxProps } from "../interface";
 
-export default function Left(props:leftBoxProps) {
-    const { boxIndex , leftRenderDom , leftcontentstyle} = props
+export default function Left(props: leftBoxProps) {
+  const { boxIndex, leftRenderDom, leftcontentstyle } = props;
 
   return (
     <div>
-      {
-          leftRenderDom.columns.map((item)=>{
+      {leftRenderDom.columns.map((item) => {
         if (item.noFor) {
-              return item.element
-            }
-            return null
-          })
+          return item.element;
         }
+        return null;
+      })}
       {
         <Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
-        {
-          leftRenderDom.columns.map((item)=>{
+          {leftRenderDom.columns.map((item) => {
             if (!item.noFor) {
-              return item.element
-            }
-            return null
-          })
+              return item.element;
             }
+            return null;
+          })}
         </Box>
       }
-      {
-        !leftRenderDom.columns.length ? <Empty description={"暂无数据"}/> : null
-      }
+      {!leftRenderDom.columns.length ? (
+        <Empty description={"暂无数据"} />
+      ) : null}
     </div>
-  )
+  );
 }

components/filter/index.tsx

@@ -10,9 +10,8 @@ import PartItem from "./compoents/partItem";
 import QualityItem from "./compoents/qualityItem";
 import Industry from "./compoents/industry";
 import AppType from "./compoents/appType";
-import DeviceBrand from './compoents/deviceBrand';
-import DeviceModel from './compoents/deviceModel';
-
+import DeviceBrand from "./compoents/deviceBrand";
+import DeviceModel from "./compoents/deviceModel";
 
 export type AdapterResult = {
   brandId?: number;
@@ -21,6 +20,9 @@ export type AdapterResult = {
   partsId?: number;
   productCategoryId?: number;
   qualityId?: number;
+  industryId?: number;
+  appTypeId?: number;
+  categoryId?: number;
 };
 
 export type FilterResult = {
@@ -30,16 +32,30 @@ export type FilterResult = {
   part?: FilterOptionResp;
   model?: FilterOptionResp;
   quality?: FilterOptionResp;
+  industryId?: FilterOptionResp;
+  appTypeId?: FilterOptionResp;
+  categoryId?: FilterOptionResp;
 };
 
-type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色" | "行业" | "应用" | "设备品牌" | "设备型号";
+type itemType =
+  | "类目"
+  | "地域"
+  | "品牌"
+  | "部件"
+  | "型号"
+  | "成色"
+  | "行业"
+  | "应用"
+  | "设备品牌"
+  | "设备型号"
+  | "设备类目";
 
 type Props = {
   types: itemType[]; //需要包含的筛选条件项
   showResultItem: Boolean; //显示结果栏
   onChange: (
     filterResult: FilterResult,
-    adapterFilterResult: AdapterResult,     //适配器,直接用于接口请求
+    adapterFilterResult: AdapterResult //适配器,直接用于接口请求
   ) => void; //筛选条件更改事件
 };
 export default function Filter(props: Props) {
@@ -51,17 +67,17 @@ export default function Filter(props: Props) {
   };
 
   useEffect(() => {
-    props.onChange(
-      result,
-      {
+    props.onChange(result, {
       brandId: result.brand?.id,
       districtId: result.region?.id,
       modelId: result.model?.id,
       partsId: result.part?.id,
       productCategoryId: result.category?.id,
       qualityId: result.quality?.id,
-      }
-    );
+      industryId: result.industryId?.id,
+      appTypeId: result.appTypeId?.id,
+      categoryId: result.categoryId?.id,
+    });
   }, [result]);
   const onDel = (key: string) => {
     //@ts-ignore
@@ -92,7 +108,7 @@ export default function Filter(props: Props) {
         )}
         {props.types.includes("设备品牌") && (
           <DeviceBrand
-            onChange={(item: FilterOptionResp) => onChange(item, "quality")}
+            onChange={(item: FilterOptionResp) => onChange(item, "brand")}
           ></DeviceBrand>
         )}
         {props.types.includes("类目") && (
@@ -100,6 +116,11 @@ export default function Filter(props: Props) {
             onChange={(item: FilterOptionResp) => onChange(item, "category")}
           ></CategoryItem>
         )}
+        {props.types.includes("设备类目") && (
+          <CategoryItem
+            onChange={(item: FilterOptionResp) => onChange(item, "categoryId")}
+          ></CategoryItem>
+        )}
         {props.types.includes("部件") && (
           <PartItem
             onChange={(item: FilterOptionResp) => onChange(item, "part")}
@@ -112,7 +133,7 @@ export default function Filter(props: Props) {
         )}
         {props.types.includes("设备型号") && (
           <DeviceModel
-            onChange={(item: FilterOptionResp) => onChange(item, "quality")}
+            onChange={(item: FilterOptionResp) => onChange(item, "model")}
           ></DeviceModel>
         )}
         {props.types.includes("成色") && (
@@ -122,12 +143,12 @@ export default function Filter(props: Props) {
         )}
         {props.types.includes("行业") && (
           <Industry
-            onChange={(item: FilterOptionResp) => onChange(item, "quality")}
+            onChange={(item: FilterOptionResp) => onChange(item, "industryId")}
           ></Industry>
         )}
         {props.types.includes("应用") && (
           <AppType
-            onChange={(item: FilterOptionResp) => onChange(item, "quality")}
+            onChange={(item: FilterOptionResp) => onChange(item, "appTypeId")}
           ></AppType>
         )}
 

pages/equipmentLeasing/index.page.tsx

 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { Pagination } from "antd";
-import {Box} from './styled';
+import { Box } from "./styled";
 import Layout from "~/components/layout";
-import ContentBox from '~/components/contentBox';
-import Filter, { FilterResult , AdapterResult} from "~/components/filter";
-import Image from 'next/image';
-import api,{Device,Advertisement} from './api';
+import ContentBox from "~/components/contentBox";
+import Filter, { FilterResult, AdapterResult } from "~/components/filter";
+import Image from "next/image";
+import api, { Device, Advertisement } from "./api";
 // 此函数在构建时被调用
 export async function getStaticProps() {
   //获取筛选数据，进行静态渲染
   return {
-    props: {
-    },
+    props: {},
   };
 }
 
-type Props = {
-};
+type Props = {};
 
-export default function EquipmentLeasing(props:Props) {
+export default function EquipmentLeasing(props: Props) {
   const router = useRouter();
-  const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
-  const [rightProductList, setRightProductList] = useState(Array<{element:JSX.Element}>);
+  const [productList, setProductList] = useState(
+    Array<{ element: JSX.Element }>
+  );
+  const [rightProductList, setRightProductList] = useState(
+    Array<{ element: JSX.Element }>
+  );
 
-  const leftDom = (item:Device)=>{
-    return (<div key={item.id} className='item' onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}>
+  const leftDom = (item: Device) => {
+    return (
+      <div
+        key={item.id}
+        className="item"
+        onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}
+      >
         <div className="item-top">
-        <div className="item-top-image"> <Image src={item.wareImgs[0].imgUrl} alt="error" width={116} height={116}/> </div>
+          <div className="item-top-image">
+            {" "}
+            <Image
+              src={item.wareImgs[0].imgUrl}
+              alt="error"
+              width={116}
+              height={116}
+            />{" "}
+          </div>
         </div>
         <div className="item-bottom">
-      <div className="item-bottom-title" title={item.wareTitle}>{item.wareTitle}</div>
+          <div className="item-bottom-title" title={item.wareTitle}>
+            {item.wareTitle}
+          </div>
           <div className="item-bottom-price">
             <span className="money">¥{item.minRent}</span>
             <span className="unit">/天起</span>
           </div>
         </div>
-  </div>)
-  }
+      </div>
+    );
+  };
 
-  const rightDom = (item:Advertisement) => {
+  const rightDom = (item: Advertisement) => {
     return (
       <div key={item.id} className="right-box-item right-item">
-          <Image src={item.imageUrl} alt="error" width={270} height={422}/>
+        <Image src={item.imageUrl} alt="error" width={270} height={422} />
       </div>
-    )
-  }
+    );
+  };
 
   const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
   const [count, setCount] = useState(0); //商品总数
@@ -75,14 +93,18 @@ export default function EquipmentLeasing(props:Props) {
         {
           ...filterResult,
           ...pageParams,
-            ...router.query
+          ...router.query,
         },
         {
           signal: abort?.signal,
         }
       )
       .then((res) => {
-          setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
+        setProductList(
+          res.result?.list.map((item) => {
+            return { element: leftDom(item) };
+          }) || []
+        );
         setCount(res.result?.totalCount || 0);
       });
   }, [abort]);
@@ -95,32 +117,39 @@ export default function EquipmentLeasing(props:Props) {
     setFilterResult(adapterFilterResult);
   };
 
-
-
   useEffect(() => {
-      api
-      .listAdvertisementInfo()
-      .then((res) => {
-        setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || [])
+    api.listAdvertisementInfo().then((res) => {
+      setRightProductList(
+        res.result?.map((item) => {
+          return { element: rightDom(item) };
+        }) || []
+      );
     });
   }, []);
 
-
-  useEffect(()=>{
+  useEffect(() => {
     if (router.query) {
-      setFilterResult({...router.query});
+      setFilterResult({ ...router.query });
     }
-  },[router])
+  }, [router]);
   return (
     <Layout>
       <Box>
         <Filter
-          types={[ "地域", "类目", "设备品牌", "设备型号"]}
+          types={["地域", "设备类目", "设备品牌", "设备型号"]}
           showResultItem
           onChange={onFilterChange}
         ></Filter>
-       <div style={{paddingTop:13}}>
-         <ContentBox boxIndex={4} leftcontentstyle={{width:"916px",margin:{top:0,right:"12px",bottom:"12px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightProductList}}/>
+        <div style={{ paddingTop: 13 }}>
+          <ContentBox
+            boxIndex={4}
+            leftcontentstyle={{
+              width: "916px",
+              margin: { top: 0, right: "12px", bottom: "12px", left: 0 },
+            }}
+            leftRenderDom={{ columns: productList }}
+            rightRenderDom={{ columns: rightProductList }}
+          />
           <Pagination
             current={pageParams.pageNo}
             pageSize={pageParams.pageSize}
@@ -134,5 +163,5 @@ export default function EquipmentLeasing(props:Props) {
         </div>
       </Box>
     </Layout>
-  )
+  );
 }

pages/flyingHandService/index.page.tsx

-import React , {useEffect,useState} from 'react';
-import {Box} from './styled';
-import Image from 'next/image';
-import { Button, Select, Space , Pagination , Cascader } from "antd";
+import React, { useEffect, useState } from "react";
+import { Box } from "./styled";
+import Image from "next/image";
+import { Button, Select, Space, Pagination, Cascader } from "antd";
 import Layout from "~/components/layout";
-import ContentBox from '~/components/contentBox';
-import api , {Flying,SkillsType,RegionResp} from "./api";
-import {useRouter} from 'next/router';
+import ContentBox from "~/components/contentBox";
+import api, { Flying, SkillsType, RegionResp } from "./api";
+import { useRouter } from "next/router";
 interface FilterInfoParams {
-  regionId?:number,
-  flightSkillsId?:number,
-  licenseId?:number
+  regionId?: number;
+  flightSkillsId?: number;
+  licenseId?: number;
 }
 
 export default function FlyingHandService() {
-  const router = useRouter()
-  const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg"])
-  const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
-  const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
-  const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp> )
-  const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType> )
+  const router = useRouter();
+  const [list, setList] = useState([
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg",
+  ]);
+  const [productList, setProductList] = useState(
+    Array<{ element: JSX.Element }>
+  );
+  const [rightDomList, setRightDomList] = useState(
+    Array<{ element: JSX.Element }>
+  );
+  const [secondDistrictInfo, setSecondDistrictInfo] = useState(
+    Array<RegionResp>
+  );
+  const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>);
 
-  const leftDom = (item:Flying)=>{
-    return (<div className='item' key={item.id}>
-    <div className='item-top'>
-    <Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt='#' width={220} height={160}/>
+  const leftDom = (item: Flying) => {
+    return (
+      <div className="item" key={item.id}>
+        <div className="item-top">
+          <Image
+            src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
+            alt="#"
+            width={220}
+            height={160}
+          />
         </div>
-    <div className='item-bottom'>
+        <div className="item-bottom">
           <div className="bottom-title">{item.curriculumName}</div>
           <div className="bottom-details">{item.curriculumDesc}</div>
-          <div className='bottom-price'>
-            <div className='bottom-price-left' title={item.supplierName}>{item.supplierName}</div>
-            <div className='bottom-price-right'>
-              {
-                item.free ? <div className='price-right-label'>{item.price}</div> : <div>
-                  <span className='price-right-label'>限免</span>
+          <div className="bottom-price">
+            <div className="bottom-price-left" title={item.supplierName}>
+              {item.supplierName}
+            </div>
+            <div className="bottom-price-right">
+              {item.free ? (
+                <div className="price-right-label">{item.price}</div>
+              ) : (
+                <div>
+                  <span className="price-right-label">限免</span>
                   {/* <span className='price-right-money'>{`¥${item.price}`}</span> */}
                 </div>
-              }
+              )}
             </div>
           </div>
         </div>
-  </div>)
-  }
+      </div>
+    );
+  };
 
-    const rightDom = (item:string) => {
-     return ( <div className='right-box-item right-item' key={item}>
-          <Image src={item} alt="error" width={260} height={420}/>
-     </div>)
-    }
+  const rightDom = (item: string) => {
+    return (
+      <div className="right-box-item right-item" key={item}>
+        <Image src={item} alt="error" width={260} height={420} />
+      </div>
+    );
+  };
 
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
     pageSize: 12,
   }); //分页器对象
 
-    const [filterParams,setFilterParams] = useState<FilterInfoParams>()
+  const [filterParams, setFilterParams] = useState<FilterInfoParams>();
 
   const [count, setCount] = useState(0); //商品总数
   const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
@@ -70,78 +92,84 @@ export default function FlyingHandService() {
     //中断前一次列表请求
     abort?.abort();
     setAbort(new AbortController());
-    }, [filterParams,pageParams]);
+  }, [filterParams, pageParams]);
 
   //端口列表请求
   useEffect(() => {
     api
-          .listPageJobServicesInfo(
-            {
+      .listPageJobServicesInfo({
         ...pageParams,
         ...filterParams,
-              ...router.query
-            },
-          )
+        ...router.query,
+      })
       .then((res) => {
-            setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
+        setProductList(
+          res.result?.list?.map((item) => {
+            return { element: leftDom(item) };
+          }) || []
+        );
         setCount(res.result?.totalCount || 0);
       });
   }, [abort]);
 
-
-  const onProvinceChange = (value: string, type:string) => {
-    if (type === '考证') {
-      setFilterParams((props)=>{
+  const onProvinceChange = (value: string, type: string) => {
+    if (type === "考证") {
+      setFilterParams((props) => {
         return {
           ...props,
-          licenseId:Number(value)
-        }
-      })
-    }else{
-      setFilterParams((props)=>{
+          licenseId: Number(value),
+        };
+      });
+    } else {
+      setFilterParams((props) => {
         return {
           ...props,
-          flightSkillsId:Number(value)
-        }
-      })
+          flightSkillsId: Number(value),
+        };
+      });
     }
   };
 
   const onChange = (value: any) => {
-    console.log(value);
+    setFilterParams((props) => {
+      return {
+        ...props,
+        flightSkillsId: (value && value[value.length - 1]) || undefined,
+      };
+    });
   };
 
   useEffect(() => {
-      setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
-      api
-      .region()
-      .then((res) => {
-        setSecondDistrictInfo(res.result || [])
+    setRightDomList(
+      list.map((item) => {
+        return { element: rightDom(item) };
+      })
+    );
+    api.region().then((res) => {
+      setSecondDistrictInfo(res.result || []);
     });
 
-      api
-      .IndustryFlightSkills()
-      .then((res) => {
-        setFlightSkillsList(res.result || [])
+    api.IndustryFlightSkills().then((res) => {
+      setFlightSkillsList(res.result || []);
     });
   }, []);
 
-  useEffect(()=>{
+  useEffect(() => {
     if (Object.keys(router.query).length) {
-      setFilterParams((props)=>{
+      setFilterParams((props) => {
         return {
           ...props,
-          ...router.query
-        }
+          ...router.query,
+        };
       });
     }
-  },[router])
+  }, [router]);
 
   return (
     <Layout>
       <Box>
-        <div className='flyingTop'>
-          <div className='flyingTop-left'>
+        <div className="flyingTop">
+          <div className="flyingTop-left">
             <Space>
               {/* <Select
                   className='selectItem'
@@ -152,37 +180,61 @@ export default function FlyingHandService() {
                   onChange={onProvinceChange}
                   options={secondDistrictInfo}
                 /> */}
-                <Cascader clearIcon placeholder="地域" bordered={false} className='selectItem' size="large" fieldNames={{ label: "name", value: "id", children: "childInfo" }} options={secondDistrictInfo} onChange={onChange} changeOnSelect />
+              <Cascader
+                allowClear
+                placeholder="地域"
+                bordered={false}
+                className="selectItem"
+                size="large"
+                fieldNames={{
+                  label: "name",
+                  value: "id",
+                  children: "childInfo",
+                }}
+                options={secondDistrictInfo}
+                onChange={onChange}
+                changeOnSelect
+              />
               <Select
-                  className='selectItem'
+                className="selectItem"
                 bordered={false}
                 popupMatchSelectWidth={false}
                 placeholder="考证"
                 size="large"
-                  onChange={(value)=>onProvinceChange(value,"考证")}
+                onChange={(value) => onProvinceChange(value, "考证")}
                 options={[
                   { value: "1", label: "视距内驾驶员" },
                   { value: "2", label: "视距外驾驶员" },
                   { value: "3", label: "教员" },
                 ]}
-                  clearIcon
+                allowClear
               />
               <Select
-                  className='selectItem'
+                className="selectItem"
                 bordered={false}
                 popupMatchSelectWidth={false}
                 placeholder="技能"
                 size="large"
-                  onChange={(value)=>onProvinceChange(value,"技能")}
+                onChange={(value) => onProvinceChange(value, "技能")}
                 options={flightSkillsList}
-                  fieldNames={{value:"id",label:"skillsName"}}
-                  clearIcon
+                fieldNames={{ value: "id", label: "skillsName" }}
+                allowClear
               />
             </Space>
           </div>
-          <Button type="primary" className='btn'>报名学习课程</Button>
+          <Button type="primary" className="btn">
+            报名学习课程
+          </Button>
         </div>
-        <ContentBox boxIndex={4} leftcontentstyle={{width:"925px",margin:{top:0,right:"15px",bottom:"15px",left:0}}} leftRenderDom={{columns:productList}} rightRenderDom={{columns:rightDomList}}/>
+        <ContentBox
+          boxIndex={4}
+          leftcontentstyle={{
+            width: "925px",
+            margin: { top: 0, right: "15px", bottom: "15px", left: 0 },
+          }}
+          leftRenderDom={{ columns: productList }}
+          rightRenderDom={{ columns: rightDomList }}
+        />
         <Pagination
           current={pageParams.pageNo}
           pageSize={pageParams.pageSize}

pages/home/waterfallFlowBody/index.tsx

@@ -187,15 +187,6 @@ export default function WaterfallFlowBody() {
         })
         .flat();
 
-      // console.log("测试数据1");
-      // console.log("测试数据2",);
-      // console.log("测试数据3",res3.map((item,index)=>{
-      //   return item.result?.map(it=>{it.type = mallApiTypeList[index];return it})
-      // }));
-      // console.log("测试数据5",res5.map((item,index)=>{
-      //   return item.result?.map(it=>{it.type = flightApiTypeList[index];return it})
-      // }));
-
       let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 10 });
       let res8 = await listNewsApi.listNewTenderInfo({
         pageNo: 1,
@@ -220,16 +211,6 @@ export default function WaterfallFlowBody() {
       setRightTopDomList(rightDom(res7.result?.list!));
       setRightBottomDomList(rightDom2(res8.result?.list!));
     })();
-    // Promise.all([category(),brand(),model(),part(),quality(),region()]).then((res)=>{
-    //   console.log("resssss  ",res);
-    //   const resultList = res.map(item=>{ return {result:item.result}})
-    //   console.log(resultList[0].result);
-    //   console.log(Array(resultList[0].result)[0]!.map((item,index)=>{
-    //     console.log(item,index);
-    //     return item.name
-    //   }));
-    //   setLeftDomList(columns.map((item,index)=>{return {element:leftDom(item,index,resultList)}}))
-    // })
   }, []);
 
   const routerPath = (item: AllType, index: number) => {
@@ -297,7 +278,7 @@ export default function WaterfallFlowBody() {
 
   const rightDom = (list: Array<NewsPageType>) => {
     return (
-      <div className="right-box-item right-item">
+      <div key={1} className="right-box-item right-item">
         <div className="title">行业新闻</div>
         <div className="body">
           {list?.map((item) => (
@@ -306,7 +287,11 @@ export default function WaterfallFlowBody() {
               <div className="item-image">
                 <Image
                   className="item-image"
-                  src={item.surfaceImg}
+                  src={
+                    item.surfaceImg
+                      ? item.surfaceImg
+                      : require("./assets/xw.jpg")
+                  }
                   alt="#"
                   width={40}
                   height={40}
@@ -321,7 +306,7 @@ export default function WaterfallFlowBody() {
 
   const rightDom2 = (list: Array<NewsTenderType>) => {
     return (
-      <div className="right-box-item right-item-second">
+      <div key={2} className="right-box-item right-item-second">
         <div className="title">招标快讯</div>
         <div className="body">
           {list?.map((item) => (