后端查看效果，不用拉取

src/app.tsx

@@ -1,271 +1,271 @@
-import { AvatarDropdown, AvatarName, Footer, SelectLang } from '@/components';
-import type { Settings as LayoutSettings } from '@ant-design/pro-components';
-import { SettingDrawer } from '@ant-design/pro-components';
-import type { RunTimeLayoutConfig } from '@umijs/max';
-import { history } from '@umijs/max';
-import defaultSettings from '../config/defaultSettings';
-import { errorConfig } from './requestErrorConfig';
-import { clearSessionToken, getAccessToken, getRefreshToken, getTokenExpireTime } from './access';
-import {
-  getRemoteMenu,
-  getRoutersInfo,
-  getUserInfo,
-  patchRouteWithRemoteMenus,
-  setRemoteMenu,
-} from './services/session';
-import { PageEnum } from './enums/pagesEnums';
-import { stringify } from 'querystring';
-import { message } from 'antd';
-
-const isDev = process.env.NODE_ENV === 'development';
-const loginOut = async () => {
-  clearSessionToken();
-  setRemoteMenu(null);
-  const { search, pathname } = window.location;
-  const urlParams = new URL(window.location.href).searchParams;
-  /** 此方法会跳转到 redirect 参数所在的位置 */
-  const redirect = urlParams.get('redirect');
-  // Note: There may be security issues, please note
-  console.log('redirect', window.location.pathname, redirect);
-  if (window.location.pathname !== '/qingdao/user/login' && !redirect) {
-    history.replace({
-      pathname: '/user/login',
-      search: stringify({
-        redirect: pathname.replace('/qingdao', '') + search,
-      }),
-    });
-  }
-};
-
-/**
- * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
- * */
-export async function getInitialState(): Promise<{
-  settings?: Partial<LayoutSettings>;
-  currentUser?: API.CurrentUser;
-  loading?: boolean;
-  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
-}> {
-  const fetchUserInfo = async () => {
-    try {
-      const response = await getUserInfo({
-        skipErrorHandler: true,
-      });
-      if (response.user.avatar === '') {
-        response.user.avatar =
-          'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
-      }
-      return {
-        ...response.user,
-        permissions: response.permissions,
-        roles: response.roles,
-      } as API.CurrentUser;
-    } catch (error) {
-      console.log(error);
-      history.push(PageEnum.LOGIN);
-    }
-    return undefined;
-  };
-  // 如果不是登录页面，执行
-  const { location } = history;
-  if (location.pathname !== PageEnum.LOGIN) {
-    const currentUser = await fetchUserInfo();
-    return {
-      fetchUserInfo,
-      currentUser,
-      settings: defaultSettings as Partial<LayoutSettings>,
-    };
-  }
-  return {
-    fetchUserInfo,
-    settings: defaultSettings as Partial<LayoutSettings>,
-  };
-}
-
-// ProLayout 支持的api https://procomponents.ant.design/components/layout
-export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
-  return {
-    // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
-    actionsRender: () => [<SelectLang key="SelectLang" />],
-    avatarProps: {
-      src: initialState?.currentUser?.avatar,
-      title: <AvatarName />,
-      render: (_, avatarChildren) => {
-        return <AvatarDropdown menu="True">{avatarChildren}</AvatarDropdown>;
-      },
-    },
-    waterMarkProps: {
-      // content: initialState?.currentUser?.nickName,
-    },
-    // actionRef: layoutActionRef,
-    menu: {
-      locale: false,
-      // // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
-      params: {
-        userId: initialState?.currentUser?.userId,
-      },
-      request: async () => {
-        if (!initialState?.currentUser?.userId) {
-          return [];
-        }
-        return getRemoteMenu();
-      },
-    },
-    footerRender: () => <Footer />,
-    onPageChange: () => {
-      const { location } = history;
-      // 如果没有登录，重定向到 login
-      if (!initialState?.currentUser && location.pathname !== PageEnum.LOGIN) {
-        history.push(PageEnum.LOGIN);
-      }
-    },
-    layoutBgImgList: [
-      {
-        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
-        left: 85,
-        bottom: 100,
-        height: '303px',
-      },
-      {
-        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
-        bottom: -68,
-        right: -45,
-        height: '303px',
-      },
-      {
-        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
-        bottom: 0,
-        left: 0,
-        width: '331px',
-      },
-    ],
-    pure: false,
-    // links: isDev
-    //   ? [
-    //     <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
-    //       <LinkOutlined />
-    //       <span>OpenAPI 文档</span>
-    //     </Link>,
-    //   ]
-    //   : [],
-    menuHeaderRender: undefined,
-    // 自定义 403 页面
-    // unAccessible: <div>unAccessible</div>,
-    // 增加一个 loading 的状态
-    childrenRender: (children) => {
-      // if (initialState?.loading) return <PageLoading />;
-      return (
-        <>
-          {children}
-          <SettingDrawer
-            disableUrlParams
-            enableDarkTheme
-            settings={initialState?.settings}
-            onSettingChange={(settings) => {
-              setInitialState((preInitialState) => ({
-                ...preInitialState,
-                settings,
-              }));
-            }}
-          />
-        </>
-      );
-    },
-    ...initialState?.settings,
-  };
-};
-
-export async function onRouteChange({ clientRoutes, location }) {
-  const menus = getRemoteMenu();
-  // console.log('onRouteChange', clientRoutes, location, menus);
-  if (menus === null && location.pathname !== PageEnum.LOGIN) {
-    console.log('refresh');
-    // history.go(0);
-  }
-}
-
-// export function patchRoutes({ routes, routeComponents }) {
-//   console.log('patchRoutes', routes, routeComponents);
-// }
-
-export async function patchClientRoutes({ routes }) {
-  // console.log('patchClientRoutes', routes);
-  patchRouteWithRemoteMenus(routes);
-}
-
-export async function render(oldRender: () => void) {
-  console.log('render get routers', oldRender);
-  const token = getAccessToken();
-  if (!token || token?.length === 0) {
-    oldRender();
-    return;
-  }
-  await getRoutersInfo().then((res) => {
-    console.log('render get routers', 123);
-
-    setRemoteMenu(res);
-    oldRender();
-  });
-}
-
-/**
- * @name request 配置，可以配置错误处理
- * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
- * @doc https://umijs.org/docs/max/request#配置
- */
-const checkRegion = 5 * 60 * 1000;
-export const request = {
-  ...errorConfig,
-  baseURL: process.env.NODE_ENV === 'development' ? '' : 'http://39.98.44.136:8080',
-  // baseURL: 'http://39.98.44.136:8080',
-  requestInterceptors: [
-    (url: any, options: { headers: any }) => {
-      const headers = options.headers ? options.headers : [];
-      console.log('request ====>:', url);
-      const authHeader = headers['Authorization'];
-      const isToken = headers['isToken'];
-      if (!authHeader && isToken !== false) {
-        const expireTime = getTokenExpireTime();
-        if (expireTime) {
-          const left = Number(expireTime) - new Date().getTime();
-          const refreshToken = getRefreshToken();
-          if (left < checkRegion && refreshToken) {
-            if (left < 0) {
-              clearSessionToken();
-            }
-          } else {
-            const accessToken = getAccessToken();
-            if (accessToken) {
-              headers['Authorization'] = `Bearer ${accessToken}`;
-            }
-          }
-        } else {
-          clearSessionToken();
-        }
-      }
-      if (process.env.NODE_ENV !== 'development') {
-        if (url.startsWith('/api')) {
-          url = url.replace(/^\/api/, '');
-        }
-      }
-      return { url, options };
-    },
-  ],
-  responseInterceptors: [
-    (response) => {
-      // 不再需要异步处理读取返回体内容，可直接在data中读出，部分字段可在 config 中找到
-      const { data = {} as any, config } = response;
-      switch (data.code) {
-        case 401:
-          loginOut();
-          break;
-      }
-      if (data.code !== 200 && data.msg) {
-        message.info(data.msg);
-      }
-      // console.log('data: ', data)
-      // console.log('config: ', config)
-      return response;
-    },
-  ],
-};
+import { AvatarDropdown, AvatarName, Footer, SelectLang } from '@/components';
+import type { Settings as LayoutSettings } from '@ant-design/pro-components';
+import { SettingDrawer } from '@ant-design/pro-components';
+import type { RunTimeLayoutConfig } from '@umijs/max';
+import { history } from '@umijs/max';
+import defaultSettings from '../config/defaultSettings';
+import { errorConfig } from './requestErrorConfig';
+import { clearSessionToken, getAccessToken, getRefreshToken, getTokenExpireTime } from './access';
+import {
+  getRemoteMenu,
+  getRoutersInfo,
+  getUserInfo,
+  patchRouteWithRemoteMenus,
+  setRemoteMenu,
+} from './services/session';
+import { PageEnum } from './enums/pagesEnums';
+import { stringify } from 'querystring';
+import { message } from 'antd';
+
+const isDev = process.env.NODE_ENV === 'development';
+const loginOut = async () => {
+  clearSessionToken();
+  setRemoteMenu(null);
+  const { search, pathname } = window.location;
+  const urlParams = new URL(window.location.href).searchParams;
+  /** 此方法会跳转到 redirect 参数所在的位置 */
+  const redirect = urlParams.get('redirect');
+  // Note: There may be security issues, please note
+  console.log('redirect', window.location.pathname, redirect);
+  if (window.location.pathname !== '/qingdao/user/login' && !redirect) {
+    history.replace({
+      pathname: '/user/login',
+      search: stringify({
+        redirect: pathname.replace('/qingdao', '') + search,
+      }),
+    });
+  }
+};
+
+/**
+ * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
+ * */
+export async function getInitialState(): Promise<{
+  settings?: Partial<LayoutSettings>;
+  currentUser?: API.CurrentUser;
+  loading?: boolean;
+  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
+}> {
+  const fetchUserInfo = async () => {
+    try {
+      const response = await getUserInfo({
+        skipErrorHandler: true,
+      });
+      if (response.user.avatar === '') {
+        response.user.avatar =
+          'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
+      }
+      return {
+        ...response.user,
+        permissions: response.permissions,
+        roles: response.roles,
+      } as API.CurrentUser;
+    } catch (error) {
+      console.log(error);
+      history.push(PageEnum.LOGIN);
+    }
+    return undefined;
+  };
+  // 如果不是登录页面，执行
+  const { location } = history;
+  if (location.pathname !== PageEnum.LOGIN) {
+    const currentUser = await fetchUserInfo();
+    return {
+      fetchUserInfo,
+      currentUser,
+      settings: defaultSettings as Partial<LayoutSettings>,
+    };
+  }
+  return {
+    fetchUserInfo,
+    settings: defaultSettings as Partial<LayoutSettings>,
+  };
+}
+
+// ProLayout 支持的api https://procomponents.ant.design/components/layout
+export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
+  return {
+    // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
+    actionsRender: () => [<SelectLang key="SelectLang" />],
+    avatarProps: {
+      src: initialState?.currentUser?.avatar,
+      title: <AvatarName />,
+      render: (_, avatarChildren) => {
+        return <AvatarDropdown menu="True">{avatarChildren}</AvatarDropdown>;
+      },
+    },
+    waterMarkProps: {
+      // content: initialState?.currentUser?.nickName,
+    },
+    // actionRef: layoutActionRef,
+    menu: {
+      locale: false,
+      // // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
+      params: {
+        userId: initialState?.currentUser?.userId,
+      },
+      request: async () => {
+        if (!initialState?.currentUser?.userId) {
+          return [];
+        }
+        return getRemoteMenu();
+      },
+    },
+    footerRender: () => <Footer />,
+    onPageChange: () => {
+      const { location } = history;
+      // 如果没有登录，重定向到 login
+      if (!initialState?.currentUser && location.pathname !== PageEnum.LOGIN) {
+        history.push(PageEnum.LOGIN);
+      }
+    },
+    layoutBgImgList: [
+      {
+        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/D2LWSqNny4sAAAAAAAAAAAAAFl94AQBr',
+        left: 85,
+        bottom: 100,
+        height: '303px',
+      },
+      {
+        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/C2TWRpJpiC0AAAAAAAAAAAAAFl94AQBr',
+        bottom: -68,
+        right: -45,
+        height: '303px',
+      },
+      {
+        src: 'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/F6vSTbj8KpYAAAAAAAAAAAAAFl94AQBr',
+        bottom: 0,
+        left: 0,
+        width: '331px',
+      },
+    ],
+    pure: false,
+    // links: isDev
+    //   ? [
+    //     <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
+    //       <LinkOutlined />
+    //       <span>OpenAPI 文档</span>
+    //     </Link>,
+    //   ]
+    //   : [],
+    menuHeaderRender: undefined,
+    // 自定义 403 页面
+    // unAccessible: <div>unAccessible</div>,
+    // 增加一个 loading 的状态
+    childrenRender: (children) => {
+      // if (initialState?.loading) return <PageLoading />;
+      return (
+        <>
+          {children}
+          <SettingDrawer
+            disableUrlParams
+            enableDarkTheme
+            settings={initialState?.settings}
+            onSettingChange={(settings) => {
+              setInitialState((preInitialState) => ({
+                ...preInitialState,
+                settings,
+              }));
+            }}
+          />
+        </>
+      );
+    },
+    ...initialState?.settings,
+  };
+};
+
+export async function onRouteChange({ clientRoutes, location }) {
+  const menus = getRemoteMenu();
+  // console.log('onRouteChange', clientRoutes, location, menus);
+  if (menus === null && location.pathname !== PageEnum.LOGIN) {
+    console.log('refresh');
+    // history.go(0);
+  }
+}
+
+// export function patchRoutes({ routes, routeComponents }) {
+//   console.log('patchRoutes', routes, routeComponents);
+// }
+
+export async function patchClientRoutes({ routes }) {
+  // console.log('patchClientRoutes', routes);
+  patchRouteWithRemoteMenus(routes);
+}
+
+export async function render(oldRender: () => void) {
+  console.log('render get routers', oldRender);
+  const token = getAccessToken();
+  if (!token || token?.length === 0) {
+    oldRender();
+    return;
+  }
+  await getRoutersInfo().then((res) => {
+    console.log('render get routers', 123);
+
+    setRemoteMenu(res);
+    oldRender();
+  });
+}
+
+/**
+ * @name request 配置，可以配置错误处理
+ * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
+ * @doc https://umijs.org/docs/max/request#配置
+ */
+const checkRegion = 5 * 60 * 1000;
+export const request = {
+  ...errorConfig,
+  baseURL: process.env.NODE_ENV === 'development' ? '' : 'https://qd.zhaopinzao8dian.com/api',
+  // baseURL: 'http://39.98.44.136:8080',
+  requestInterceptors: [
+    (url: any, options: { headers: any }) => {
+      const headers = options.headers ? options.headers : [];
+      console.log('request ====>:', url);
+      const authHeader = headers['Authorization'];
+      const isToken = headers['isToken'];
+      if (!authHeader && isToken !== false) {
+        const expireTime = getTokenExpireTime();
+        if (expireTime) {
+          const left = Number(expireTime) - new Date().getTime();
+          const refreshToken = getRefreshToken();
+          if (left < checkRegion && refreshToken) {
+            if (left < 0) {
+              clearSessionToken();
+            }
+          } else {
+            const accessToken = getAccessToken();
+            if (accessToken) {
+              headers['Authorization'] = `Bearer ${accessToken}`;
+            }
+          }
+        } else {
+          clearSessionToken();
+        }
+      }
+      if (process.env.NODE_ENV !== 'development') {
+        if (url.startsWith('/api')) {
+          url = url.replace(/^\/api/, '');
+        }
+      }
+      return { url, options };
+    },
+  ],
+  responseInterceptors: [
+    (response) => {
+      // 不再需要异步处理读取返回体内容，可直接在data中读出，部分字段可在 config 中找到
+      const { data = {} as any, config } = response;
+      switch (data.code) {
+        case 401:
+          loginOut();
+          break;
+      }
+      if (data.code !== 200 && data.msg) {
+        message.info(data.msg);
+      }
+      // console.log('data: ', data)
+      // console.log('config: ', config)
+      return response;
+    },
+  ],
+};

src/pages/Analysis/Industrytrend/index.tsx

@@ -1,24 +1,45 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker } from 'antd';
-import { Line } from '@ant-design/charts';
-import { getIndustryTrend } from '@/services/analysis/industry';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { Card, Select, Button, Space, Spin, Empty, Row, Col, message, DatePicker, Tabs } from 'antd';
+import { Line, Heatmap } from '@ant-design/charts';
+import { getIndustryTrend, getIndustryAreaTrend, getSalaryTrend } from '@/services/analysis/industry';
 import dayjs from 'dayjs';
 import { useRequest } from '@umijs/max';
-import { 
+import {
   TimeDimension,
   AnalysisType,
   IndustryTrendState,
   IndustryDataItem,
-  ChartConfig
+  ChartConfig,
 } from '@/types/analysis/industry';
-import { 
-  formatQuarter, 
-  formatDateForDisplay,
-  convertApiData
-} from './utils';
+import { formatQuarter, formatDateForDisplay, convertApiData, convertSalaryData } from './utils';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
+const { TabPane } = Tabs;
+
+const flattenAreaData = (apiResponse: any) => {
+  if (!apiResponse || typeof apiResponse !== 'object') {
+    return [];
+  }
+
+  const flattenedData = [];
+
+  for (const month in apiResponse) {
+    if (apiResponse.hasOwnProperty(month)) {
+      const areas = apiResponse[month];
+
+      areas.forEach((area) => {
+        flattenedData.push({
+          name: area.name,
+          time: area.time,
+          value: parseInt(area.data) || 0,
+        });
+      });
+    }
+  }
+
+  return flattenedData;
+};
 
 const IndustryTrendPage: React.FC = () => {
   const [params, setParams] = useState<IndustryTrendState>({
@@ -26,26 +47,33 @@ const IndustryTrendPage: React.FC = () => {
     type: '岗位发布数量',
     startTime: dayjs().subtract(5, 'month').format('YYYY-MM'),
     endTime: dayjs().format('YYYY-MM'),
-    selectedIndustry: ''
+    selectedIndustry: '',
+    selectedSalaryRange: '',
+    analysisCategory: 'industry', // 默认显示行业分析
   });
 
   const [allData, setAllData] = useState<IndustryDataItem[]>([]);
+  const [areaData, setAreaData] = useState<any[]>([]);
+  const [salaryData, setSalaryData] = useState<any[]>([]);
   const [availableIndustries, setAvailableIndustries] = useState<string[]>([]);
+  const [availableSalaryRanges, setAvailableSalaryRanges] = useState<string[]>([]);
+  const heatmapRef = useRef(null);
 
-  const { loading, run: fetchData } = useRequest(
+  // 获取行业趋势数据
+  const { loading: industryLoading, run: fetchIndustryData } = useRequest(
     async () => {
       let { startTime, endTime, timeDimension, type } = params;
-      
+
       if (timeDimension === '季度') {
         startTime = formatQuarter(startTime);
         endTime = formatQuarter(endTime);
       }
-      
+
       return await getIndustryTrend({
         timeDimension,
         type,
         startTime,
-        endTime
+        endTime,
       });
     },
     {
@@ -53,25 +81,273 @@ const IndustryTrendPage: React.FC = () => {
       onSuccess: (data) => {
         const formattedData = convertApiData(data);
         setAllData(formattedData);
-        
-        const industries = Array.from(
-          new Set(formattedData.map((item: { category: any; }) => item.category))
-        ).filter(Boolean).sort();
-        
+
+        const industries = Array.from(new Set(formattedData.map((item: any) => item.category)))
+          .filter(Boolean)
+          .sort();
+
         setAvailableIndustries(industries);
-        
+
         if (industries.length > 0 && !industries.includes(params.selectedIndustry)) {
-          setParams(p => ({ ...p, selectedIndustry: industries[0] }));
+          setParams((p) => ({ ...p, selectedIndustry: industries[0] }));
         }
       },
-      onError: () => message.error('数据加载失败')
-    }
+      onError: (error) => {
+        message.error('行业数据加载失败');
+      },
+    },
   );
 
+  // 获取地区趋势数据
+  const { loading: areaLoading, run: fetchAreaData } = useRequest(
+    async () => {
+      let { startTime, endTime, timeDimension, type } = params;
+
+      if (timeDimension === '季度') {
+        startTime = formatQuarter(startTime);
+        endTime = formatQuarter(endTime);
+      }
+
+      return await getIndustryAreaTrend({
+        timeDimension,
+        type,
+        startTime,
+        endTime,
+      });
+    },
+    {
+      manual: true,
+      onSuccess: (res) => {
+        const formattedData = flattenAreaData(res);
+        setAreaData(formattedData);
+      },
+      onError: (error) => {
+        message.error('地区数据加载失败');
+      },
+    },
+  );
+
+  // 获取薪资趋势数据
+  const { loading: salaryLoading, run: fetchSalaryData } = useRequest(
+    async () => {
+      let { startTime, endTime, timeDimension, type } = params;
+
+      if (timeDimension === '季度') {
+        startTime = formatQuarter(startTime);
+        endTime = formatQuarter(endTime);
+      }
+
+      return await getSalaryTrend({
+        timeDimension,
+        type,
+        startTime,
+        endTime,
+      });
+    },
+    {
+      manual: true,
+      onSuccess: (data) => {
+        const formattedData = convertSalaryData(data);
+        setSalaryData(formattedData);
+
+        const ranges = Array.from(new Set(formattedData.map((item: any) => item.category)))
+          .filter(Boolean)
+          .sort();
+          
+        setAvailableSalaryRanges(ranges);
+
+        if (ranges.length > 0 && !ranges.includes(params.selectedSalaryRange)) {
+          setParams((p) => ({ ...p, selectedSalaryRange: ranges[0] }));
+        }
+      },
+      onError: (error) => {
+        message.error('薪资数据加载失败');
+      },
+    },
+  );
+
+  // 根据分析类别获取当前数据
+  const currentData = useMemo(() => {
+    if (params.analysisCategory === 'industry') {
+      return allData
+        .filter((item) => item.category === params.selectedIndustry)
+        .map((item) => ({
+          ...item,
+          originalDate: item.date,
+          date: formatDateForDisplay(item.date, params.timeDimension),
+        }))
+        .sort((a, b) => {
+          if (params.timeDimension === '季度') {
+            const [yearA, quarterA] = a.originalDate.split('-');
+            const [yearB, quarterB] = b.originalDate.split('-');
+
+            const quarterToNumber = (q: string) => {
+              if (q.includes('第一')) return 1;
+              if (q.includes('第二')) return 2;
+              if (q.includes('第三')) return 3;
+              if (q.includes('第四')) return 4;
+              return 0;
+            };
+
+            return yearA === yearB
+              ? quarterToNumber(quarterA) - quarterToNumber(quarterB)
+              : parseInt(yearA) - parseInt(yearB);
+          } else if (params.timeDimension === '年') {
+            return parseInt(a.originalDate) - parseInt(b.originalDate);
+          } else {
+            return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
+          }
+        });
+    } else if (params.analysisCategory === 'salary') {
+      return salaryData
+        .filter((item) => item.category === params.selectedSalaryRange)
+        .map((item) => ({
+          ...item,
+          originalDate: item.date,
+          date: formatDateForDisplay(item.date, params.timeDimension),
+        }))
+        .sort((a, b) => {
+          if (params.timeDimension === '季度') {
+            const [yearA, quarterA] = a.originalDate.split('-');
+            const [yearB, quarterB] = b.originalDate.split('-');
+
+            const quarterToNumber = (q: string) => {
+              if (q.includes('第一')) return 1;
+              if (q.includes('第二')) return 2;
+              if (q.includes('第三')) return 3;
+              if (q.includes('第四')) return 4;
+              return 0;
+            };
+
+            return yearA === yearB
+              ? quarterToNumber(quarterA) - quarterToNumber(quarterB)
+              : parseInt(yearA) - parseInt(yearB);
+          } else if (params.timeDimension === '年') {
+            return parseInt(a.originalDate) - parseInt(b.originalDate);
+          } else {
+            return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
+          }
+        });
+    }
+    return [];
+  }, [allData, salaryData, params]);
+
+  // 热力图配置
+  const heatmapConfig = useMemo(() => {
+    const sortedData = [...areaData].sort((a, b) => {
+      if (params.timeDimension === '年') {
+        return parseInt(a.time) - parseInt(b.time);
+      } else if (params.timeDimension === '季度') {
+        const [yearA, quarterA] = a.time.split('-Q');
+        const [yearB, quarterB] = b.time.split('-Q');
+        return yearA === yearB
+          ? parseInt(quarterA) - parseInt(quarterB)
+          : parseInt(yearA) - parseInt(yearB);
+      } else {
+        return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
+      }
+    });
+
+    // 计算最大值和阈值
+    const maxValue = Math.max(...sortedData.map((item) => item.value), 1);
+    const hotThreshold = maxValue * 0.8; // 热门阈值(前20%)
+    const growthThreshold = maxValue * 0.5; // 增长阈值(前50%)
+
+    return {
+      data: sortedData,
+      height: 300,
+      autoFit: false,
+      xField: 'name',
+      yField: 'time',
+      colorField: 'value',
+      mark: 'cell',
+      style: {
+        inset: 1,
+        fillOpacity: 0.9,
+      },
+      cellSize: [100, 40], 
+      color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
+      label: {
+        text: (d: { value: number }) => {
+          if (d.value >= 10000) return (d.value / 10000).toFixed(0) + 'w';
+          if (d.value >= 1000) return (d.value / 1000).toFixed(0) + 'k';
+          return d.value;
+        },
+        style: {
+          fill: '#fff',
+          fontSize: 12,
+          fontWeight: 'bold',
+          textShadow: '0 0 3px rgba(0,0,0,0.7)',
+        },
+        position: 'inside',
+      },
+      xAxis: {
+        title: {
+          text: '区域',
+          style: { fontSize: 12 },
+        },
+        label: {
+          autoRotate: true,
+          style: {
+            fontSize: 11,
+            fill: '#666',
+          },
+        },
+      },
+      yAxis: {
+        title: {
+          text: '时间',
+          style: { fontSize: 12 },
+        },
+        label: {
+          formatter: (text) => {
+            if (params.timeDimension === '年') return `${text}年`;
+            if (params.timeDimension === '季度') return text.replace('-Q', '年Q');
+            return text.replace('-', '年').replace('-', '月');
+          },
+          style: {
+            fontSize: 11,
+            fill: '#666',
+          },
+        },
+        sortable: false,
+      },
+      tooltip: {
+        title: (d) => `${d.name} - ${d.time}`,
+        field: 'value',
+        valueFormatter: (v) => {
+          if (v >= 10000) return (v / 10000).toFixed(1) + '万';
+          if (v >= 1000) return (v / 1000).toFixed(1) + '千';
+          return v;
+        },
+        pointerEvents: 'none',
+        domStyles: {
+          'g2-tooltip': {
+            padding: '8px 12px',
+            borderRadius: '4px',
+          },
+        },
+      },
+      interactions: [{ type: 'element-active' }],
+      legend: {
+        position: 'bottom',
+        layout: 'horizontal',
+        slidable: true,
+        title: false,
+        itemName: {
+          style: {
+            fill: '#666',
+            fontSize: 12,
+          },
+        },
+      },
+    };
+  }, [areaData, params.timeDimension]);
+
   const handleTimeDimensionChange = (value: TimeDimension) => {
     const now = dayjs();
     let newStartTime = '';
-    
+
     if (value === '月') {
       newStartTime = now.subtract(5, 'month').format('YYYY-MM');
     } else if (value === '季度') {
@@ -79,31 +355,35 @@ const IndustryTrendPage: React.FC = () => {
     } else {
       newStartTime = now.subtract(5, 'year').format('YYYY');
     }
-    
-    setParams(p => ({
+
+    setParams((p) => ({
       ...p,
       timeDimension: value,
       startTime: newStartTime,
-      endTime: value === '月' ? now.format('YYYY-MM') : 
-               value === '季度' ? now.format('YYYY-Q') : 
-               now.format('YYYY'),
-      selectedIndustry: ''
+      endTime:
+        value === '月'
+          ? now.format('YYYY-MM')
+          : value === '季度'
+            ? now.format('YYYY-Q')
+            : now.format('YYYY'),
+      selectedIndustry: params.analysisCategory === 'industry' ? '' : p.selectedIndustry,
+      selectedSalaryRange: params.analysisCategory === 'salary' ? '' : p.selectedSalaryRange,
     }));
   };
 
   const handleDateRangeChange = (dates: any, dateStrings: [string, string]) => {
     if (dates && dates[0] && dates[1]) {
-      setParams(p => ({
+      setParams((p) => ({
         ...p,
         startTime: dateStrings[0],
-        endTime: dateStrings[1]
+        endTime: dateStrings[1],
       }));
     }
   };
 
   const disabledDate = (current: dayjs.Dayjs) => {
     const now = dayjs();
-    
+
     if (params.timeDimension === '月') {
       return current.isAfter(now.endOf('month'));
     } else if (params.timeDimension === '季度') {
@@ -113,68 +393,41 @@ const IndustryTrendPage: React.FC = () => {
     }
   };
 
-  const currentIndustryData = useMemo(() => {
-    if (!params.selectedIndustry || allData.length === 0) return [];
-    
-    return allData
-      .filter(item => item.category === params.selectedIndustry)
-      .map(item => ({
-        ...item,
-        originalDate: item.date,
-        date: formatDateForDisplay(item.date, params.timeDimension)
-      }))
-      .sort((a, b) => {
-        if (params.timeDimension === '季度') {
-          // 处理中文季度格式，如 "2024-第一季度" -> ["2024", "第一"]
-          const [yearA, quarterA] = a.originalDate.split('-');
-          const [yearB, quarterB] = b.originalDate.split('-');
-          
-          // 转换中文季度为数字（"第一" -> 1, "第二" -> 2...）
-          const quarterToNumber = (q: string) => {
-            if (q.includes('第一')) return 1;
-            if (q.includes('第二')) return 2;
-            if (q.includes('第三')) return 3;
-            if (q.includes('第四')) return 4;
-            return 0;
-          };
-          
-          return yearA === yearB 
-            ? quarterToNumber(quarterA) - quarterToNumber(quarterB)
-            : parseInt(yearA) - parseInt(yearB);
-        } else if (params.timeDimension === '年') {
-          return parseInt(a.originalDate) - parseInt(b.originalDate);
-        } else {
-          return dayjs(a.originalDate).valueOf() - dayjs(b.originalDate).valueOf();
-        }
-      });
-  }, [allData, params.selectedIndustry, params.timeDimension]);
-
   const getPickerValue = () => {
     try {
       return [
-        dayjs(params.startTime, params.timeDimension === '年' ? 'YYYY' : 
-             params.timeDimension === '季度' ? 'YYYY-Q' : 'YYYY-MM'),
-        dayjs(params.endTime, params.timeDimension === '年' ? 'YYYY' : 
-             params.timeDimension === '季度' ? 'YYYY-Q' : 'YYYY-MM')
+        dayjs(
+          params.startTime,
+          params.timeDimension === '年'
+            ? 'YYYY'
+            : params.timeDimension === '季度'
+              ? 'YYYY-Q'
+              : 'YYYY-MM',
+        ),
+        dayjs(
+          params.endTime,
+          params.timeDimension === '年'
+            ? 'YYYY'
+            : params.timeDimension === '季度'
+              ? 'YYYY-Q'
+              : 'YYYY-MM',
+        ),
       ];
     } catch (e) {
-      console.error('日期解析错误:', e);
       return null;
     }
   };
 
   const chartConfig: ChartConfig = {
-    data: currentIndustryData,
+    data: currentData,
     height: 180,
     xField: 'date',
     yField: 'value',
     seriesField: 'category',
     xAxis: {
       type: 'cat',
-      
       label: {
         formatter: (text: string) => text,
-        
       },
     },
     yAxis: {
@@ -205,7 +458,10 @@ const IndustryTrendPage: React.FC = () => {
                 {list.map((item, index) => {
                   const { name, value, color } = item;
                   return (
-                    <div key={index} style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}>
+                    <div
+                      key={index}
+                      style={{ margin: '4px 0', display: 'flex', justifyContent: 'space-between' }}
+                    >
                       <div style={{ display: 'flex', alignItems: 'center' }}>
                         <span
                           style={{
@@ -219,7 +475,10 @@ const IndustryTrendPage: React.FC = () => {
                         ></span>
                         <span>{name}</span>
                       </div>
-                      <b>{value}{params.type === '招聘增长率' ? '%' : ''}</b>
+                      <b>
+                        {value}
+                        {params.type === '招聘增长率' ? '%' : ''}
+                      </b>
                     </div>
                   );
                 })}
@@ -233,31 +492,71 @@ const IndustryTrendPage: React.FC = () => {
     tooltip: {
       showTitle: undefined,
       title: undefined,
-      customContent: undefined
-    }
+      customContent: undefined,
+    },
   };
 
   useEffect(() => {
-    fetchData();
-  }, [params.timeDimension, params.startTime, params.endTime, params.type]);
+    if (params.analysisCategory === 'industry') {
+      fetchIndustryData();
+      fetchAreaData();
+    } else if (params.analysisCategory === 'salary') {
+      fetchSalaryData();
+      fetchAreaData();
+    }
+  }, [params.timeDimension, params.startTime, params.endTime, params.type, params.analysisCategory]);
 
   return (
     <div style={{ padding: 16 }}>
-      <Card title="行业趋势分析" style={{ marginBottom: 24 }}>
+      <Card title="趋势分析" style={{ marginBottom: 24 }}>
+        <Tabs
+          activeKey={params.analysisCategory}
+          onChange={(key) => setParams(p => ({ 
+            ...p, 
+            analysisCategory: key as 'industry' | 'salary' | 'area',
+            selectedIndustry: key === 'industry' && availableIndustries.length > 0 ? availableIndustries[0] : p.selectedIndustry,
+            selectedSalaryRange: key === 'salary' && availableSalaryRanges.length > 0 ? availableSalaryRanges[0] : p.selectedSalaryRange
+          }))}
+        >
+          <TabPane tab="行业趋势" key="industry" />
+          <TabPane tab="薪资趋势" key="salary" />
+        </Tabs>
+        
         <div style={{ marginBottom: 24 }}>
           <Space size="middle" wrap>
-            <Select
-              value={params.selectedIndustry}
-              onChange={(value) => setParams(p => ({ ...p, selectedIndustry: value }))}
-              style={{ width: 150 }}
-              loading={loading}
-              placeholder="选择行业"
-              disabled={availableIndustries.length === 0}
-            >
-              {availableIndustries.map(industry => (
-                <Option key={industry} value={industry}>{industry}</Option>
-              ))}
-            </Select>
+            {params.analysisCategory === 'industry' && (
+              <Select
+                value={params.selectedIndustry}
+                onChange={(value) => setParams((p) => ({ ...p, selectedIndustry: value }))}
+                style={{ width: 150 }}
+                loading={industryLoading}
+                placeholder="选择行业"
+                disabled={availableIndustries.length === 0}
+              >
+                {availableIndustries.map((industry) => (
+                  <Option key={industry} value={industry}>
+                    {industry}
+                  </Option>
+                ))}
+              </Select>
+            )}
+
+            {params.analysisCategory === 'salary' && (
+              <Select
+                value={params.selectedSalaryRange}
+                onChange={(value) => setParams((p) => ({ ...p, selectedSalaryRange: value }))}
+                style={{ width: 150 }}
+                loading={salaryLoading}
+                placeholder="选择薪资区间"
+                disabled={availableSalaryRanges.length === 0}
+              >
+                {availableSalaryRanges.map((range) => (
+                  <Option key={range} value={range}>
+                    {range}
+                  </Option>
+                ))}
+              </Select>
+            )}
 
             <Select
               value={params.timeDimension}
@@ -270,19 +569,24 @@ const IndustryTrendPage: React.FC = () => {
             </Select>
 
             <RangePicker
-              picker={params.timeDimension === '月' ? 'month' : 
-                     params.timeDimension === '季度' ? 'quarter' : 'year'}
+              picker={
+                params.timeDimension === '月'
+                  ? 'month'
+                  : params.timeDimension === '季度'
+                    ? 'quarter'
+                    : 'year'
+              }
               value={getPickerValue()}
               onChange={handleDateRangeChange}
               style={{ width: 180 }}
-              disabled={loading}
+              disabled={industryLoading || areaLoading || salaryLoading}
               allowClear={false}
               disabledDate={disabledDate}
             />
 
             <Select
               value={params.type}
-              onChange={(value) => setParams(p => ({ ...p, type: value }))}
+              onChange={(value) => setParams((p) => ({ ...p, type: value }))}
               style={{ width: 100 }}
             >
               <Option value="岗位发布数量">岗位数量</Option>
@@ -291,89 +595,76 @@ const IndustryTrendPage: React.FC = () => {
 
             <Button
               type="primary"
-              onClick={() => fetchData()}
-              loading={loading}
+              onClick={() => {
+                if (params.analysisCategory === 'industry') {
+                  fetchIndustryData();
+                  fetchAreaData();
+                } else if (params.analysisCategory === 'salary') {
+                  fetchSalaryData();
+                  fetchAreaData();
+                }
+              }}
+              loading={industryLoading || areaLoading || salaryLoading}
             >
               查询
             </Button>
           </Space>
         </div>
 
-        <Card 
-          title={`${params.selectedIndustry || '请选择行业'}趋势 (${params.type})`}
-          style={{ marginBottom: 24 }}
-          bodyStyle={{ padding: '24px 12px' }}
-        >
-          <Spin spinning={loading}>
-            {currentIndustryData.length > 0 ? (
-              <Line {...chartConfig} />
-            ) : (
-              <Empty 
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-                description={
-                  loading ? '数据加载中...' : 
-                  params.selectedIndustry ? '当前时间段无数据' : '请先选择行业'
-                } 
-              />
-            )}
-          </Spin>
-        </Card>
-
         <Row gutter={[16, 16]}>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="区域分析" 
-              bodyStyle={{ 
+          {params.analysisCategory !== 'area' && (
+            <Col span={24}>
+              <Card
+                title={
+                  params.analysisCategory === 'industry'
+                    ? `${params.selectedIndustry || '请选择行业'}趋势 (${params.type})`
+                    : `${params.selectedSalaryRange || '请选择薪资区间'}趋势 (${params.type})`
+                }
+                style={{ marginBottom: 24 }}
+                bodyStyle={{ padding: '24px 12px', height: 210 }}
+              >
+                <Spin spinning={params.analysisCategory === 'industry' ? industryLoading : salaryLoading}>
+                  {currentData.length > 0 ? (
+                    <Line {...chartConfig} />
+                  ) : (
+                    <Empty
+                      image={Empty.PRESENTED_IMAGE_SIMPLE}
+                      description={
+                        industryLoading || salaryLoading
+                          ? '数据加载中...'
+                          : params.analysisCategory === 'industry'
+                            ? params.selectedIndustry
+                              ? '当前时间段无数据'
+                              : '请先选择行业'
+                            : params.selectedSalaryRange
+                              ? '当前时间段无数据'
+                              : '请先选择薪资区间'
+                      }
+                    />
+                  )}
+                </Spin>
+              </Card>
+            </Col>
+          )}
+
+          <Col span={24}>
+            <Card
+              title="区域分析"
+              bodyStyle={{
                 padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
+                height: 400,
+                position: 'relative',
               }}
             >
-              <Empty description="热力地图预留位置" />
-            </Card>
-          </Col>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="薪资趋势" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              <Empty description="薪资分析预留位置" />
-            </Card>
-          </Col>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="经验要求" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              <Empty description="经验分析预留位置" />
-            </Card>
-          </Col>
-          <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-            <Card 
-              title="技能需求" 
-              bodyStyle={{ 
-                padding: 12,
-                height: 300,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-              }}
-            >
-              <Empty description="技能分析预留位置" />
+              {areaLoading ? (
+                <Spin tip="数据加载中..." size="large" />
+              ) : areaData.length > 0 ? (
+                <div style={{ height: '100%', width: '100%' }}>
+                  <Heatmap {...heatmapConfig} />
+                </div>
+              ) : (
+                <Empty description="暂无区域数据" />
+              )}
             </Card>
           </Col>
         </Row>

src/pages/Analysis/Industrytrend/utils.ts

@@ -1,5 +1,4 @@
-
-import { TimeDimension, QuarterFormat, DateFormatter, QuarterFormatter, ApiDataConverter, IndustryDataItem } from '@/types/analysis/industry';
+import { TimeDimension, QuarterFormat, DateFormatter, QuarterFormatter, ApiDataConverter, IndustryDataItem, AreaDataItem } from '@/types/analysis/industry';
 
 export const formatQuarter: QuarterFormatter = (dateStr: string): QuarterFormat => {
   if (dateStr.includes('第')) return dateStr as QuarterFormat;
@@ -77,4 +76,86 @@ export const convertApiData: ApiDataConverter = (apiData: any) => {
     console.error('数据转换错误:', error);
     return [];
   }
+};
+
+export const convertAreaApiData = (apiData: any): AreaDataItem[] => {
+  if (!apiData?.data) {
+    console.warn('convertAreaApiData: apiData.data 为空');
+    return [];
+  }
+
+  try {
+    const result: AreaDataItem[] = [];
+    
+    // 处理嵌套的月份数据
+    if (typeof apiData.data === 'object' && !Array.isArray(apiData.data)) {
+      Object.entries(apiData.data).forEach(([time, items]) => {
+        if (Array.isArray(items)) {
+          items.forEach((item: any) => {
+            if (!item) return;
+            const uniqueName = items.filter((i: any) => i.name === item.name).length > 1 
+              ? `${item.name}_${index}` 
+              : item.name;
+            result.push({
+              name: item.name || '未知区域',
+              value: Number(item.data) || 0,
+              time: item.time || time,
+              x:uniqueName,
+              y:time,
+              category: item.name,
+              originalData: item 
+            });
+          });
+        }
+      });
+      return result;
+    }
+     if (Array.isArray(apiData.data)) {
+      return apiData.data.map((item: any) => ({
+        name: item.name || '未知区域',
+        value: Number(item.data) || 0,
+        time: item.time || '未知时间',
+        x: item.name,
+        y: item.time,
+        category: item.name,
+        originalData: item
+      }));
+    }
+    return [];
+  } catch (error) {
+    console.error('数据转换错误:', error);
+    return [];
+  }
+};
+
+export const convertSalaryData: ApiDataConverter = (apiData: any) => {
+  if (!apiData) return [];
+  try {
+    if (Array.isArray(apiData)) {
+      return apiData.map(item => ({
+        date: item.time || item.date,
+        category: item.name || item.category || '未知薪资区间',
+        value: Number(item.data || item.value) || 0
+      }));
+    }
+    if (typeof apiData === 'object') {
+      const result: IndustryDataItem[] = [];
+      Object.entries(apiData).forEach(([date, items]) => {
+        if (Array.isArray(items)) {
+          items.forEach((item: any) => {
+            result.push({
+              date,
+              category: item.name || item.category || '未知薪资区间',
+              value: Number(item.data || item.value) || 0
+            });
+          });
+        }
+      });
+      return result;
+    }
+    return [];
+  } catch (error) {
+    console.error('薪资数据转换错误:', error);
+    return [];
+  }
 };

src/services/analysis/industry.ts

@@ -5,4 +5,28 @@ export async function getIndustryTrend(params?: API.Analysis.IndustryParams) {
     method: 'GET',
     params
   });
+}
+export async function getIndustryAreaTrend(params: any) {
+  try {
+    const response = await request('/api/cms/statics/industryArea', {
+      method: 'GET',
+      params,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    
+    console.log('接口原始响应:', response); // 调试日志
+    return response; // 兼容不同后端响应格式
+  } catch (error) {
+    console.error('接口请求异常:', error);
+    throw error;
+  }
+}
+
+export async function getSalaryTrend(params?: API.Analysis.IndustryParams) {
+  return request<API.Analysis.IndustryResult>('/api/cms/statics/salary', {
+    method: 'GET',
+    params
+  });
 }

src/types/analysis/industry.d.ts

@@ -4,18 +4,25 @@ import { ReactNode } from 'react';
 export type TimeDimension = '月' | '季度' | '年';
 export type AnalysisType = '岗位发布数量' | '招聘增长率';
 export type QuarterFormat = `${number}-${'Q1'|'Q2'|'Q3'|'Q4'|'第一季度'|'第二季度'|'第三季度'|'第四季度'}`;
+export type AnalysisCategory = 'industry' | 'area' | 'salary';
+export type SalaryRange = '3k-5k' | '5k-8k' | '8k-10k' | '10k+';
 
 export interface IndustryDataItem {
   date: string;
   category: string;
   value: number;
 }
-
+export interface AreaDataItem {
+  name: string;    
+  value: number;   
+  time: string;
+}
 export interface IndustryTrendParams {
   timeDimension: TimeDimension;
   type: AnalysisType;
   startTime: string;
   endTime: string;
+  selectedIndustry: string;
 }
 
 export interface IndustryTrendState extends IndustryTrendParams {
@@ -80,7 +87,15 @@ export interface ChartConfig {
   }>;
   legend?: boolean;
 }
-
+export interface IndustryTrendState {
+  timeDimension: TimeDimension;
+  type: AnalysisType;
+  startTime: string;
+  endTime: string;
+  selectedIndustry: string;
+  selectedSalaryRange: string;
+  analysisCategory: AnalysisCategory; // 新增分析类别
+}
 export type DateFormatter = (dateStr: string, dimension: TimeDimension) => string;
 export type QuarterFormatter = (dateStr: string) => QuarterFormat;
 export type ApiDataConverter = (apiData: any) => IndustryDataItem[];