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

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) => {
+        if (item.noFor) {
+          return item.element;
+        }
+        return null;
+      })}
       {
-          leftRenderDom.columns.map((item)=>{
-            if (item.noFor) {
-              return item.element
-            }
-            return null
-          })
-      }
-      {
-      <Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
-        {
-          leftRenderDom.columns.map((item)=>{
+        <Box index={boxIndex} leftcontentstyle={leftcontentstyle}>
+          {leftRenderDom.columns.map((item) => {
             if (!item.noFor) {
-              return item.element
+              return item.element;
             }
-            return null
-          })
-        }
-      </Box>
-      }
-      {
-        !leftRenderDom.columns.length ? <Empty description={"暂无数据"}/> : null
+            return null;
+          })}
+        </Box>
       }
+      {!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,
-      {
-        brandId: result.brand?.id,
-        districtId: result.region?.id,
-        modelId: result.model?.id,
-        partsId: result.part?.id,
-        productCategoryId: result.category?.id,
-        qualityId: result.quality?.id,
-      }
-    );
+    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,15 +143,15 @@ 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>
         )}
-        
+
         {props.showResultItem && (
           <ResultItem data={result} onDel={onDel}></ResultItem>
         )}

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}`)}>
-    <div className="item-top">
-        <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-price">
-        <span className="money">¥{item.minRent}</span>
-        <span className="unit">/天起</span>
+  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>
+        <div className="item-bottom">
+          <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>
-  </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); //商品总数
@@ -68,71 +86,82 @@ export default function EquipmentLeasing(props:Props) {
     setAbort(new AbortController());
   }, [filterResult, pageParams]);
 
-    //端口列表请求
-    useEffect(() => {
-      api
-        .listPageDeviceInfo(
-          {
-            ...filterResult,
-            ...pageParams,
-            ...router.query
-          },
-          {
-            signal: abort?.signal,
-          }
-        )
-        .then((res) => {
-          setProductList(res.result?.list.map(item=>{return { element:leftDom(item) }}) || []);
-          setCount(res.result?.totalCount || 0);
-        });
-    }, [abort]);
-
-    const onFilterChange = (
-      filterResult: FilterResult,
-      adapterFilterResult: AdapterResult
-    ) => {
-      console.log("filterResult", filterResult, adapterFilterResult);
-      setFilterResult(adapterFilterResult);
-    };
-
-
-
+  //端口列表请求
   useEffect(() => {
-      api
-      .listAdvertisementInfo()
+    api
+      .listPageDeviceInfo(
+        {
+          ...filterResult,
+          ...pageParams,
+          ...router.query,
+        },
+        {
+          signal: abort?.signal,
+        }
+      )
       .then((res) => {
-        setRightProductList(res.result?.map(item=>{return { element:rightDom(item) }}) || [])
+        setProductList(
+          res.result?.list.map((item) => {
+            return { element: leftDom(item) };
+          }) || []
+        );
+        setCount(res.result?.totalCount || 0);
       });
-  }, []);
+  }, [abort]);
 
+  const onFilterChange = (
+    filterResult: FilterResult,
+    adapterFilterResult: AdapterResult
+  ) => {
+    console.log("filterResult", filterResult, adapterFilterResult);
+    setFilterResult(adapterFilterResult);
+  };
 
-  useEffect(()=>{
+  useEffect(() => {
+    api.listAdvertisementInfo().then((res) => {
+      setRightProductList(
+        res.result?.map((item) => {
+          return { element: rightDom(item) };
+        }) || []
+      );
+    });
+  }, []);
+
+  useEffect(() => {
     if (router.query) {
-      setFilterResult({...router.query});
+      setFilterResult({ ...router.query });
     }
-  },[router])
-  return  (
+  }, [router]);
+  return (
     <Layout>
       <Box>
-       <Filter
-          types={[ "地域", "类目", "设备品牌", "设备型号"]}
+        <Filter
+          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}}/>
-         <Pagination
-                current={pageParams.pageNo}
-                pageSize={pageParams.pageSize}
-                showSizeChanger={false}
-                showQuickJumper
-                total={count}
-                onChange={onPageChange}
-                hideOnSinglePage={true}
-                style={{ marginTop: 20 }}
-              />
-       </div>
+        <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}
+            showSizeChanger={false}
+            showQuickJumper
+            total={count}
+            onChange={onPageChange}
+            hideOnSinglePage={true}
+            style={{ marginTop: 20 }}
+          />
+        </div>
       </Box>
     </Layout>
-  )
+  );
 }

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) => (