改-首页-左侧模块图片

改-跳转之后参数请求为number

components/filter/index.tsx

@@ -61,8 +61,12 @@ type Props = {
 export default function Filter(props: Props) {
   const [result, setResult] = useState<FilterResult>({});
   const onChange = (item: FilterOptionResp, type: string) => {
+    console.log(item, type);
+
     let data: { [key: string]: FilterOptionResp } = {};
     data[type] = item;
+    console.log(data);
+
     setResult({ ...result, ...data });
   };
 

pages/home/waterfallFlowBody/api/index.ts

-import request, { Response } from '~/api/request';
+import request, { Response } from "~/api/request";
 
 export interface AllType {
   type?: string;
-  id?: number,
-  name?: string,
-  appName?: string,
-  createTime?: string,
-  industryIcon?: string,
-  shortName?: null,
-  industryType?: null,
-  propagate1?: string,
-  propagate2?: string,
-  image?: string,
-  video?: string,
-  newsTitle?: string,
-  newsAuthor?: string,
-  userAccountId?: number,
-  surfaceImg?:string,
-  newsContents?: string,
-  updateTime?: string | null
-  tenderNewsId?: number,
-  tenderInfoNo?: string,
-  tenderContent?: string,
-  tenderPrice?: number,
-  apply?: number,
-  skillsName?: string
+  id?: number;
+  name?: string;
+  appName?: string;
+  createTime?: string;
+  industryIcon?: string;
+  shortName?: null;
+  industryType?: null;
+  propagate1?: string;
+  propagate2?: string;
+  image?: string;
+  video?: string;
+  newsTitle?: string;
+  newsAuthor?: string;
+  userAccountId?: number;
+  surfaceImg?: string;
+  newsContents?: string;
+  updateTime?: string | null;
+  tenderNewsId?: number;
+  tenderInfoNo?: string;
+  tenderContent?: string;
+  tenderPrice?: number;
+  apply?: number;
+  skillsName?: string;
 }
 
 export interface FilterOptionResp {
   type: string;
-  id: number,
-  name: string
+  id: number;
+  name: string;
 }
 
 export interface RegionResp {
-  childInfo: RegionResp[] | null,
-  id: number,
-  level: number,
-  name: string,
-  pid: number
+  childInfo: RegionResp[] | null;
+  id: number;
+  level: number;
+  name: string;
+  pid: number;
 }
 
 export const equipmentLeasingApi = {
   deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/category');
+    return request("/pms/webProductMall/category");
   },
   deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/deviceBrand');
+    return request("/pms/webDevice/deviceBrand");
   },
   deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/deviceModel');
+    return request("/pms/webDevice/deviceModel");
   },
-}
+};
 
 export interface AppType {
-  id: number,
-  appName: string,
-  createTime: string,
-  type:string
+  id: number;
+  appName: string;
+  createTime: string;
+  type: string;
 }
 
 export interface IndustryType {
-  id: number,
-  industryIcon: string,
-  name: string,
-  shortName: null,
-  industryType: null,
-  propagate1: string,
-  propagate2: string,
-  image: string,
-  video: string,
-  type:string
+  id: number;
+  industryIcon: string;
+  name: string;
+  shortName: null;
+  industryType: null;
+  propagate1: string;
+  propagate2: string;
+  image: string;
+  video: string;
+  type: string;
 }
 
 export const jobServicesApi = {
   listAllAppType: (): Promise<Response<Array<AppType>>> => {
-    return request('/release/work/listAllAppType');
+    return request("/release/work/listAllAppType");
   },
   listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
-    return request('/release/work/listAllIndustry');
+    return request("/release/work/listAllIndustry");
   },
-}
+};
 
 export const mallApi = {
   listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/category');
+    return request("/pms/webProductMall/category");
   },
   listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/parts');
+    return request("/pms/webProductMall/parts");
   },
   listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/quality');
+    return request("/pms/webProductMall/quality");
   },
-}
+};
 
 export interface SkillsType {
   type: string;
-      id: 1,
-      skillsName: string
+  id: 1;
+  skillsName: string;
 }
 
 export const flightSkillsApi = {
   IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
-    return request('/release/curriculum/getIndustryFlightSkills');
+    return request("/release/curriculum/getIndustryFlightSkills");
   },
-}
-
-
+};
 
 export interface NewsPageType {
-        id: number,
-        newsTitle: string,
-        newsAuthor: string,
-        userAccountId: number,
-        surfaceImg:string,
-        newsContents: string,
-        createTime: string,
-        updateTime: string | null
+  id: number;
+  newsTitle: string;
+  newsAuthor: string;
+  userAccountId: number;
+  surfaceImg: string;
+  newsContents: string;
+  createTime: string;
+  updateTime: string | null;
 }
 
 export interface NewsTenderType {
-        id: number,
-        tenderNewsId: number,
-        tenderInfoNo: string,
-        tenderContent: string,
-        tenderPrice: number,
-        createTime: string,
-        apply: number
+  id: number;
+  tenderNewsId: number;
+  tenderInfoNo: string;
+  tenderContent: string;
+  tenderPrice: number;
+  createTime: string;
+  apply: number;
 }
 
 export interface ListPageNewsInfoResp {
-  pageNo: 1,
-  pageSize: 10,
-  list: Array<NewsPageType>,
-  totalCount: 0,
-  totalPage: 0
+  pageNo: 1;
+  pageSize: 10;
+  list: Array<NewsPageType>;
+  totalCount: 0;
+  totalPage: 0;
 }
 
 export interface ListTenderNewsInfoResp {
-  pageNo: 1,
-  pageSize: 10,
-  list: Array<NewsTenderType>,
-  totalCount: 0,
-  totalPage: 0
+  pageNo: 1;
+  pageSize: 10;
+  list: Array<NewsTenderType>;
+  totalCount: 0;
+  totalPage: 0;
 }
 
 interface ListPageNewsInfoParams {
-    pageNo: number,
-    pageSize: number,
-    cityCode?: number,
-    date?: string,
-    districtCode?: number,
-    provinceCode?: number
+  pageNo: number;
+  pageSize: number;
+  cityCode?: number;
+  date?: string;
+  districtCode?: number;
+  provinceCode?: number;
 }
 
 interface ListTenderNewsInfoParams {
-    pageNo: number,
-    pageSize: number,
-    cityCode?: number,
-    date?: string,
-    districtCode?: number,
-    provinceCode?: number
+  pageNo: number;
+  pageSize: number;
+  cityCode?: number;
+  date?: string;
+  districtCode?: number;
+  provinceCode?: number;
 }
 
-
-
 export const listNewsApi = {
-  listNewsPage: (params:ListPageNewsInfoParams): Promise<Response<ListPageNewsInfoResp>> => {
-    return request('/release/industry-news/listNewsPage',"post",params);
+  listNewsPage: (
+    params: ListPageNewsInfoParams
+  ): Promise<Response<ListPageNewsInfoResp>> => {
+    return request("/release/industry-news/listNewsPage", "post", params);
   },
-  listNewTenderInfo: (params:ListTenderNewsInfoParams): Promise<Response<ListTenderNewsInfoResp>> => {
-    return request('/release/tender/listNewTenderInfo','post',params);
+  listNewTenderInfo: (
+    params: ListTenderNewsInfoParams
+  ): Promise<Response<ListTenderNewsInfoResp>> => {
+    return request("/release/tender/listNewTenderInfo", "post", params);
   },
-}
\ No newline at end of file
+};

pages/home/waterfallFlowBody/index.tsx

@@ -6,7 +6,14 @@ import { Box } from "./styled";
 import ContentBox from "~/components/contentBox";
 import RotationChart from "./components/rotationChart";
 import Map from "./components/map";
-import icon from "./assets/图标.png";
+
+import tubiao from "./assets/tubiao.png";
+import fuwu from "./assets/fuwu.png";
+import xiaoshou from "./assets/xiaoshou.png";
+import baoxian from "./assets/baoxian.png";
+import peixun from "./assets/peixun.png";
+import gongju from "./assets/gongju.png";
+const icon = [tubiao, fuwu, xiaoshou, baoxian, peixun, gongju];
 import {
   FilterOptionResp,
   RegionResp,
@@ -230,7 +237,7 @@ export default function WaterfallFlowBody() {
         <div className="item-title">
           <div className="item-left">
             <div className="item-left-icon">
-              <Image src={icon} alt="#" />
+              <Image src={icon[index]} alt="#" />
             </div>
             <div className="item-left-label">{item.title}</div>
           </div>

pages/jobServices/index.page.tsx

 import React, { useEffect, useState } from "react";
-import {Box} from './styled';
+import { Box } from "./styled";
 import { Pagination } from "antd";
 import Layout from "~/components/layout";
-import ContentBox from '~/components/contentBox';
+import ContentBox from "~/components/contentBox";
 import { useRouter } from "next/router";
-import Filter, { FilterResult , AdapterResult} from "~/components/filter";
-import api , {Job} from "./api";
-import Image from 'next/image';
+import Filter, { FilterResult, AdapterResult } from "~/components/filter";
+import api, { Job } from "./api";
+import Image from "next/image";
 // 此函数在构建时被调用
 export async function getServerSideProps() {
   return {
@@ -14,39 +14,56 @@ export async function getServerSideProps() {
   };
 }
 
-interface ImageListType {
-  
-}
+interface ImageListType {}
 
 export default function JobServices() {
-
   const router = useRouter();
-  const [list,setList] = useState(["https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg","https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg"])
-  const [productList, setProductList] = useState(Array<{element:JSX.Element}>);
-  const [rightDomList, setRightDomList] = useState(Array<{element:JSX.Element}>)
-  const leftDom = (item:Job) => {
-    return (<div key={item.id} className='item' onClick={() => router.push(`/jobServices/detail/${item.id}`)}>
+  const [list, setList] = useState([
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
+  ]);
+  const [productList, setProductList] = useState(
+    Array<{ element: JSX.Element }>
+  );
+  const [rightDomList, setRightDomList] = useState(
+    Array<{ element: JSX.Element }>
+  );
+  const leftDom = (item: Job) => {
+    return (
+      <div
+        key={item.id}
+        className="item"
+        onClick={() => router.push(`/jobServices/detail/${item.id}`)}
+      >
         <div className="item-top">
           <div className="value">
             <div className="value-left">
               <div className="label">{item.serviceName}</div>
               <div className="com">{item.teamName}</div>
             </div>
-                <div className="value-right"><span className="money">{item.price}</span> <span className="unit">/平</span></div>
+            <div className="value-right">
+              <span className="money">{item.price}</span>{" "}
+              <span className="unit">/平</span>
+            </div>
           </div>
         </div>
         <div className="item-bottom">
-          <div className="bottom-left">{ Math.round( Math.random()*(150-100)+100) }条评价</div>
+          <div className="bottom-left">
+            {Math.round(Math.random() * (150 - 100) + 100)}条评价
+          </div>
           <div className="bottom-right">专业飞手团队，精通巡航业务</div>
         </div>
-  </div>)
-  }
+      </div>
+    );
+  };
 
-  const rightDom = (item:string) => {
-    return (<div className="right-box-item advertisement" key={item}>
-    <Image src={item} alt="error" width={260} height={420}/>
-</div>)
-  }
+  const rightDom = (item: string) => {
+    return (
+      <div className="right-box-item advertisement" key={item}>
+        <Image src={item} alt="error" width={260} height={420} />
+      </div>
+    );
+  };
 
   const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
 
@@ -73,19 +90,27 @@ export default function JobServices() {
 
   //端口列表请求
   useEffect(() => {
+    let queryVal = JSON.parse(JSON.stringify(router.query));
+    for (const key in queryVal) {
+      queryVal[key] = Number(queryVal[key]);
+    }
     api
       .listPageJobServicesInfo(
         {
           ...filterResult,
           ...pageParams,
-            ...router.query
+          ...queryVal,
         },
         {
           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]);
@@ -101,32 +126,40 @@ export default function JobServices() {
   const [query, setQuery] = useState<string | string[]>();
 
   useEffect(() => {
-      console.log(router.query);
-      // if(router.query) setQuery(router.query)
-      setRightDomList(list.map(item=>{return {element:rightDom(item)}}))
+    setRightDomList(
+      list.map((item) => {
+        return { element: rightDom(item) };
+      })
+    );
   }, []);
 
-  useEffect(()=>{
-    if (router.query) {
-      setFilterResult({...router.query});
+  useEffect(() => {
+    if (router.query && Object.keys(router.query).length) {
+      let queryVal = JSON.parse(JSON.stringify(router.query));
+      for (const key in queryVal) {
+        queryVal[key] = Number(queryVal[key]);
       }
-  },[router])
-  
-  
+      setFilterResult({ ...queryVal });
+    }
+  }, [router]);
 
   return (
     <Layout>
       <Box>
         <Filter
-          types={[ "地域", "行业", "应用"]}
+          types={["地域", "行业", "应用"]}
           showResultItem
           onChange={onFilterChange}
         ></Filter>
-        <div style={{marginTop:18}}>
-          <ContentBox boxIndex={2}
-          leftRenderDom={{columns:productList}} 
-            rightRenderDom={{columns:rightDomList}}
-            leftcontentstyle={{width:"924px",margin:{top:0,right:"16px",bottom:"16px",left:0}}}
+        <div style={{ marginTop: 18 }}>
+          <ContentBox
+            boxIndex={2}
+            leftRenderDom={{ columns: productList }}
+            rightRenderDom={{ columns: rightDomList }}
+            leftcontentstyle={{
+              width: "924px",
+              margin: { top: 0, right: "16px", bottom: "16px", left: 0 },
+            }}
           />
           <Pagination
             current={pageParams.pageNo}
@@ -141,5 +174,5 @@ export default function JobServices() {
         </div>
       </Box>
     </Layout>
-  )
+  );
 }