添-首页-筛选跳转功能

pages/home/waterfallFlowBody/api/index.ts

@@ -55,6 +55,7 @@ export const equipmentLeasingApi = {
 
 export interface AppType {
   id: number;
+  name: string;
   appName: string;
   createTime: string;
   type: string;
@@ -64,13 +65,14 @@ export interface IndustryType {
   id: number;
   industryIcon: string;
   name: string;
-  shortName: null;
-  industryType: null;
+  shortName: string;
+  industryType: string;
   propagate1: string;
   propagate2: string;
   image: string;
   video: string;
   type: string;
+  appName: string;
 }
 
 export const jobServicesApi = {
@@ -95,8 +97,9 @@ export const mallApi = {
 };
 
 export interface SkillsType {
+  name: string;
   type: string;
-  id: 1;
+  id: number;
   skillsName: string;
 }
 
@@ -128,19 +131,19 @@ export interface NewsTenderType {
 }
 
 export interface ListPageNewsInfoResp {
-  pageNo: 1;
-  pageSize: 10;
+  pageNo: number;
+  pageSize: number;
   list: Array<NewsPageType>;
-  totalCount: 0;
-  totalPage: 0;
+  totalCount: number;
+  totalPage: number;
 }
 
 export interface ListTenderNewsInfoResp {
-  pageNo: 1;
-  pageSize: 10;
+  pageNo: number;
+  pageSize: number;
   list: Array<NewsTenderType>;
-  totalCount: 0;
-  totalPage: 0;
+  totalCount: number;
+  totalPage: number;
 }
 
 interface ListPageNewsInfoParams {

pages/home/waterfallFlowBody/components/map/index.tsx

 import React, { Component, useEffect, useState } from "react";
 import { Box } from "./styled";
 import api from "./api";
+import icon from "./assets/icon.png";
 let Map: any;
 export default function MapComponent() {
   const [mapItem, setMapItem] = useState(0);
@@ -41,11 +42,27 @@ export default function MapComponent() {
 
   const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
     if (!AMap) return;
+    // 创建 AMap.Icon 实例：
+    const Icon = new AMap.Icon({
+      size: new AMap.Size(40, 50), // 图标尺寸
+      image: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // Icon的图像
+      imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
+      imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
+    });
+    // 将 Icon 实例添加到 marker 上:
     const marker = new AMap.Marker({
-      map: Map,
-      position: [lan, lon],
+      position: new AMap.LngLat(lan, lon),
+      offset: new AMap.Pixel(-10, -10),
+      icon: Icon, // 添加 Icon 实例
       title: dizhi,
+      zoom: 9,
+      map: Map,
     });
+    // const marker = new AMap.Marker({
+    //   map: Map,
+    //   position: [lan, lon],
+    //   title: dizhi,
+    // });
     // //鼠标点击marker弹出自定义的信息窗体
     // AMap.Event.addListener(marker, "click", function () {
     //   infoWindow.open(map, marker.getPosition());

pages/home/waterfallFlowBody/components/map/styled.tsx

@@ -46,4 +46,9 @@ export const Box = styled.div`
       color: #ff552d;
     }
   }
+  #container {
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+  }
 `;

pages/home/waterfallFlowBody/index.tsx

@@ -31,9 +31,7 @@ interface ColumnsType {
 
 export default function WaterfallFlowBody() {
   const router = useRouter();
-  const onMoreChange = (value: string) => {
-    console.log("更多", value);
-  };
+
   const [list, setList] = useState([
     "中国人寿",
     "中国平安",
@@ -74,9 +72,6 @@ export default function WaterfallFlowBody() {
     "云享飞",
     "科比特智教",
   ]);
-  //  const [brandData,setBrandData] = useState<FilterOptionResp[]>([])
-
-  const [moreEqList, setMoreEqList] = useState<any>();
 
   const columns = [
     {
@@ -108,6 +103,7 @@ export default function WaterfallFlowBody() {
   const [leftDomList, setLeftDomList] = useState(
     Array<{ element: JSX.Element; type?: string }>
   );
+
   const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
   const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
 
@@ -128,15 +124,17 @@ export default function WaterfallFlowBody() {
   const { listAllIndustry, listAllAppType } = jobServicesApi;
   const jobApiTypeList = ["industryId", "appTypeId"];
 
+  const onMoreChange = (
+    value: { value: string; label: number },
+    index: number,
+    option: []
+  ) => {
+    const [item] = option.filter((item: any) => item.name === value.value);
+    routerPath(index, item);
+  };
+
   useEffect(() => {
     (async () => {
-      // listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 }).then((res) => {
-      //   setRightTopDomList(rightDom(res.result?.list!));
-      // });
-      // listNewsApi.listNewTenderInfo({ pageNo: 1, pageSize: 6 }).then((res) => {
-      //   setRightBottomDomList(rightDom2(res.result?.list!));
-      // });
-
       let res1 = await Promise.all([
         deviceCategory(),
         deviceBrand(),
@@ -172,6 +170,7 @@ export default function WaterfallFlowBody() {
         .map((item, index) => {
           return item.result?.map((it) => {
             it.type = flightApiTypeList[index];
+            it.name = it.name || it.skillsName;
             return it;
           });
         })
@@ -180,6 +179,8 @@ export default function WaterfallFlowBody() {
         .map((item, index) => {
           return item.result?.map((it) => {
             it.type = jobApiTypeList[index];
+            console.log(it);
+            it.name = it.name || it.appName;
             return it;
           });
         })
@@ -195,17 +196,42 @@ export default function WaterfallFlowBody() {
         resValuelist2,
         [],
         resValuelist3,
-        resValuelist4.flat(),
+        resValuelist4,
         [],
       ];
+      const listOption = JSON.parse(JSON.stringify(list)).map(
+        (item: string, index: number) => {
+          return { id: index, name: item, value: index };
+        }
+      );
+      const list2Option = JSON.parse(JSON.stringify(list2)).map(
+        (item: string, index: number) => {
+          return { id: index, name: item, value: index };
+        }
+      );
+
+      const optionList = [
+        resValuelist1,
+        resValuelist2,
+        listOption,
+        resValuelist3,
+        resValuelist4,
+        list2Option,
+      ];
+      console.log(optionList);
 
-      setMoreEqList(res1.map((item) => item.result).flat());
       setLeftDomList(
         columns.map((item, index) => {
           if (index < 3) {
-            return { element: leftDom(item, index, listValue), type: "left" };
+            return {
+              element: leftDom(item, index, listValue, optionList[index]),
+              type: "left",
+            };
           }
-          return { element: leftDom(item, index, listValue), type: "right" };
+          return {
+            element: leftDom(item, index, listValue, optionList[index]),
+            type: "right",
+          };
         })
       );
 
@@ -230,7 +256,8 @@ export default function WaterfallFlowBody() {
   const leftDom = (
     item: ColumnsType,
     index: number,
-    resultList: Array<Array<AllType>>
+    resultList: Array<Array<AllType>>,
+    option: []
   ) => {
     return (
       <div key={item.title} className="item">
@@ -240,15 +267,19 @@ export default function WaterfallFlowBody() {
               {item.title}
             </div>
           </div>
-          <div>
+          <div key={item.title}>
             <Select
               className="select-box"
               placeholder="筛选"
-              onChange={onMoreChange}
+              labelInValue
+              onChange={(value) => onMoreChange(value, index, option)}
               bordered={false}
               dropdownMatchSelectWidth={false}
-              options={moreEqList}
-              fieldNames={{ value: "id", label: "name" }}
+              options={option}
+              fieldNames={{
+                value: "name",
+                label: "name",
+              }}
             />
           </div>
         </div>

pages/home/waterfallFlowBody/styled.tsx

@@ -192,6 +192,7 @@ export const Box = styled.div`
     border-radius: 6px;
     background-color: #fff;
     background: url(${xwbg.src}) no-repeat;
+    background-size: contain;
     .title {
       display: flex;
       align-items: center;
@@ -280,6 +281,7 @@ export const Box = styled.div`
           width: 103px;
           height: 22px;
           background: url(${button.src}) no-repeat;
+          background-size: contain;
           .left {
             width: 35px;
             height: 22px;