feat: add recruitment fair statistics dashboard

src/pages/Jobfair/FairStatistics/index.tsx

@@ -1,209 +1,284 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
+  Button,
   Card,
   Col,
   DatePicker,
   Empty,
   Row,
   Segmented,
+  Select,
   Spin,
   Statistic,
   Table,
-  Typography,
   message,
 } from 'antd';
-import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Line } from '@ant-design/charts';
 import type { ColumnsType } from 'antd/es/table';
-import { getOutdoorFairStatistics } from '@/services/jobportal/outdoorFair';
-import type {
-  OutdoorFairStatisticsResult,
-  OutdoorFairStatisticsSeriesItem,
-} from '@/services/jobportal/outdoorFair';
+import { getPublicJobFairList } from '@/services/jobfair/publicJobFair';
+import { getOutdoorFairList } from '@/services/jobportal/outdoorFair';
+import {
+  getFairStatisticsSummary,
+  type FairStatisticsFairItem,
+  type FairStatisticsSummary,
+  type RecruitmentFairType,
+} from '@/services/jobfair/fairStatistics';
 
 const { RangePicker } = DatePicker;
-const { Text } = Typography;
 
-type Granularity = 'day' | 'week' | 'month' | 'year';
+type StatisticsScope = 'single' | 'range';
 
-const GRAN_OPTIONS: { label: string; value: Granularity }[] = [
-  { label: '按日', value: 'day' },
-  { label: '按周', value: 'week' },
-  { label: '按月', value: 'month' },
-  { label: '按年', value: 'year' },
-];
+interface FairOption {
+  value: string;
+  label: string;
+}
 
-const formatBound = (value: any, suffix: string): string | undefined => {
-  if (value && typeof value.format === 'function') {
-    return `${value.format('YYYY-MM-DD')} ${suffix}`;
-  }
-  return undefined;
-};
+const formatDate = (value: any): string | undefined =>
+  value && typeof value.format === 'function' ? value.format('YYYY-MM-DD') : undefined;
 
 const FairStatistics: React.FC = () => {
-  const [granularity, setGranularity] = useState<Granularity>('month');
+  const [fairType, setFairType] = useState<RecruitmentFairType>('online');
+  const [scope, setScope] = useState<StatisticsScope>('single');
+  const [fairOptions, setFairOptions] = useState<FairOption[]>([]);
+  const [selectedFairId, setSelectedFairId] = useState<string>();
   const [dateRange, setDateRange] = useState<any>(null);
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState<OutdoorFairStatisticsResult | null>(null);
+  const [loadingFairs, setLoadingFairs] = useState(false);
+  const [loadingSummary, setLoadingSummary] = useState(false);
+  const [summary, setSummary] = useState<FairStatisticsSummary>();
 
-  const fetchStats = async (gran: Granularity, range: any) => {
-    setLoading(true);
+  const interactionLabel = fairType === 'online' ? '投递岗位数' : '签到数';
+  const interactionUnit = fairType === 'online' ? '个' : '人次';
+
+  const loadFairOptions = useCallback(async (type: RecruitmentFairType) => {
+    setLoadingFairs(true);
     try {
-      const res = await getOutdoorFairStatistics({
-        granularity: gran,
-        startTime: formatBound(range?.[0], '00:00:00'),
-        endTime: formatBound(range?.[1], '23:59:59'),
-      });
-      if (res?.code === 200 && res.data) {
-        setResult(res.data);
+      if (type === 'online') {
+        const res = await getPublicJobFairList({ pageNum: 1, pageSize: 1000, jobFairType: '1' });
+        if (res.code !== 200) {
+          message.error(res.msg || '线上招聘会列表加载失败');
+          setFairOptions([]);
+          return;
+        }
+        setFairOptions(
+          (res.rows || []).map((item) => ({
+            value: String(item.jobFairId),
+            label: `${item.jobFairTitle}${item.jobFairStartTime ? `（${item.jobFairStartTime}）` : ''}`,
+          })),
+        );
       } else {
-        message.error(res?.msg || '统计失败');
+        const res = await getOutdoorFairList({ current: 1, pageSize: 1000 });
+        if (res.code !== 200) {
+          message.error(res.msg || '户外招聘会列表加载失败');
+          setFairOptions([]);
+          return;
+        }
+        setFairOptions(
+          (res.rows || []).map((item) => ({
+            value: String(item.id),
+            label: `${item.title}${item.holdTime ? `（${item.holdTime}）` : ''}`,
+          })),
+        );
       }
-    } catch (e) {
-      message.error('统计失败');
+    } catch {
+      message.error('招聘会列表加载失败，请稍后重试');
+      setFairOptions([]);
     } finally {
-      setLoading(false);
+      setLoadingFairs(false);
     }
-  };
+  }, []);
 
-  // 粒度或日期变化即查询；区间半选（只选了一端）不查询，避免中途无效查询
   useEffect(() => {
-    const complete = dateRange && dateRange[0] && dateRange[1];
-    const empty = !dateRange || (!dateRange[0] && !dateRange[1]);
-    if (complete) {
-      fetchStats(granularity, dateRange);
-    } else if (empty) {
-      fetchStats(granularity, null);
+    setSelectedFairId(undefined);
+    setDateRange(null);
+    setSummary(undefined);
+    loadFairOptions(fairType);
+  }, [fairType, loadFairOptions]);
+
+  const queryReady = useMemo(() => {
+    if (scope === 'single') return Boolean(selectedFairId);
+    return Boolean(dateRange?.[0] && dateRange?.[1]);
+  }, [dateRange, scope, selectedFairId]);
+
+  const loadSummary = useCallback(async () => {
+    if (!queryReady) {
+      setSummary(undefined);
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [granularity, dateRange]);
+    setLoadingSummary(true);
+    try {
+      const res = await getFairStatisticsSummary({
+        fairType,
+        fairId: scope === 'single' ? selectedFairId : undefined,
+        startDate: scope === 'range' ? formatDate(dateRange?.[0]) : undefined,
+        endDate: scope === 'range' ? formatDate(dateRange?.[1]) : undefined,
+      });
+      if (res.code === 200 && res.data) {
+        setSummary(res.data);
+      } else {
+        setSummary(undefined);
+        message.error(res.msg || '统计数据加载失败');
+      }
+    } catch {
+      setSummary(undefined);
+      message.error('统计数据加载失败，请稍后重试');
+    } finally {
+      setLoadingSummary(false);
+    }
+  }, [dateRange, fairType, queryReady, scope, selectedFairId]);
 
-  const chartData = useMemo(() => {
-    if (!result?.series) return [];
-    const rows: { time: string; category: string; value: number }[] = [];
-    result.series.forEach((item: OutdoorFairStatisticsSeriesItem) => {
-      rows.push({ time: item.time, category: '招聘会数', value: item.fairCount });
-      rows.push({ time: item.time, category: '参会单位数', value: item.companyCount });
-      rows.push({ time: item.time, category: '职位数', value: item.jobCount });
-    });
-    return rows;
-  }, [result]);
+  useEffect(() => {
+    loadSummary();
+  }, [loadSummary]);
 
-  const columns: ColumnsType<OutdoorFairStatisticsSeriesItem> = [
-    { title: '时间', dataIndex: 'time', width: 140 },
-    { title: '招聘会数', dataIndex: 'fairCount', width: 120 },
-    { title: '参会单位数', dataIndex: 'companyCount', width: 120 },
-    { title: '职位数', dataIndex: 'jobCount', width: 120 },
+  const columns: ColumnsType<FairStatisticsFairItem> = useMemo(
+    () => [
+      { title: '招聘会名称', dataIndex: 'fairTitle', ellipsis: true },
+      { title: '起始时间', dataIndex: 'startTime', width: 180, render: (value) => value || '--' },
+      { title: '参会单位数', dataIndex: 'companyCount', width: 110, align: 'right' },
+      { title: '职位数', dataIndex: 'jobCount', width: 90, align: 'right' },
+      { title: '需求人数', dataIndex: 'demandCount', width: 100, align: 'right' },
+      { title: interactionLabel, dataIndex: 'interactionCount', width: 120, align: 'right' },
+    ],
+    [interactionLabel],
+  );
+
+  const statisticsCards = [
+    { title: '参会单位数', value: summary?.companyCount ?? 0, suffix: '家' },
+    { title: '职位数', value: summary?.jobCount ?? 0, suffix: '个' },
+    { title: '需求人数', value: summary?.demandCount ?? 0, suffix: '人' },
+    { title: interactionLabel, value: summary?.interactionCount ?? 0, suffix: interactionUnit },
   ];
 
   return (
     <PageContainer
       header={{ title: '招聘会数据统计' }}
-      content="按年/周/月/日维度统计时间区间内的招聘会趋势，含累计发布招聘会数及同比、环比。"
+      content="分别统计线上招聘会与户外招聘会；可查看单场招聘会，或按招聘会起始时间汇总一个时间段。"
     >
       <Card style={{ marginBottom: 16 }}>
-        <Row gutter={16} align="middle">
+        <Row gutter={[16, 16]} align="middle">
           <Col>
-            <span style={{ marginRight: 8 }}>统计粒度</span>
+            <Button.Group>
+              <Button
+                type={fairType === 'online' ? 'primary' : 'default'}
+                onClick={() => setFairType('online')}
+              >
+                线上招聘会
+              </Button>
+              <Button
+                type={fairType === 'outdoor' ? 'primary' : 'default'}
+                onClick={() => setFairType('outdoor')}
+              >
+                户外招聘会
+              </Button>
+            </Button.Group>
+          </Col>
+          <Col>
+            <span style={{ marginRight: 8 }}>统计范围</span>
             <Segmented
-              value={granularity}
-              onChange={(v) => setGranularity(v as Granularity)}
-              options={GRAN_OPTIONS}
+              value={scope}
+              options={[
+                { label: '统计单场', value: 'single' },
+                { label: '按起始时间统计', value: 'range' },
+              ]}
+              onChange={(value) => {
+                setScope(value as StatisticsScope);
+                setSummary(undefined);
+              }}
             />
           </Col>
           <Col flex="auto">
-            <span style={{ marginRight: 8, marginLeft: 16 }}>时间区间</span>
-            <RangePicker
-              value={dateRange}
-              onChange={(v) => setDateRange(v)}
-              style={{ width: 360 }}
-            />
+            {scope === 'single' ? (
+              <Select
+                allowClear
+                showSearch
+                placeholder={`请选择一场${fairType === 'online' ? '线上' : '户外'}招聘会`}
+                optionFilterProp="label"
+                loading={loadingFairs}
+                value={selectedFairId}
+                options={fairOptions}
+                onChange={(value) => setSelectedFairId(value)}
+                style={{ width: '100%', minWidth: 320 }}
+              />
+            ) : (
+              <RangePicker
+                value={dateRange}
+                onChange={(value) => setDateRange(value)}
+                style={{ width: '100%', minWidth: 320 }}
+                placeholder={['起始日期', '结束日期']}
+              />
+            )}
           </Col>
         </Row>
       </Card>
 
-      <Spin spinning={loading}>
-        {result ? (
-          <>
-            <Row gutter={16} style={{ marginBottom: 16 }}>
-              <Col span={8}>
-                <Card>
-                  <Statistic title="累计发布招聘会数" value={result.totals.fairCount} />
-                  <div style={{ marginTop: 8 }}>
-                    <RateText label="同比" rate={result.yoy?.rate} />
-                    <span style={{ marginLeft: 16 }}>
-                      <RateText label="环比" rate={result.mom?.rate} />
-                    </span>
-                  </div>
-                </Card>
-              </Col>
-              <Col span={8}>
-                <Card>
-                  <Statistic title="参会单位数" value={result.totals.companyCount} />
-                </Card>
-              </Col>
-              <Col span={8}>
-                <Card>
-                  <Statistic title="职位数" value={result.totals.jobCount} />
-                </Card>
-              </Col>
+      <Spin spinning={loadingSummary}>
+        <Card
+          title={
+            summary
+              ? `统计结果（共 ${summary.fairCount} 场${fairType === 'online' ? '线上' : '户外'}招聘会）`
+              : '统计结果'
+          }
+          style={{ marginBottom: 16 }}
+        >
+          {queryReady ? (
+            <Row gutter={[16, 16]}>
+              {statisticsCards.map((item) => (
+                <Col key={item.title} xs={24} sm={12} lg={6}>
+                  <Card
+                    size="small"
+                    style={{ background: item.title === interactionLabel ? '#f0f5ff' : '#fafafa' }}
+                  >
+                    <Statistic title={item.title} value={item.value} suffix={item.suffix} />
+                  </Card>
+                </Col>
+              ))}
             </Row>
+          ) : (
+            <Empty
+              description={
+                scope === 'single' ? '请选择一场招聘会' : '请选择完整的起始日期和结束日期'
+              }
+            />
+          )}
+        </Card>
 
-            <Card title="招聘会趋势" style={{ marginBottom: 16 }} bodyStyle={{ padding: 12 }}>
-              {chartData.length > 0 ? (
-                <Line
-                  height={320}
-                  data={chartData}
-                  xField="time"
-                  yField="value"
-                  seriesField="category"
-                  smooth
-                  legend={{ position: 'bottom' }}
-                  tooltip={{
-                    fields: ['value'],
-                  }}
-                />
-              ) : (
-                <Empty description="所选区间无数据" />
-              )}
-            </Card>
-
-            <Card title="分时段明细" bordered={false}>
-              <Table<OutdoorFairStatisticsSeriesItem>
-                rowKey="time"
-                dataSource={result.series || []}
-                columns={columns}
-                pagination={false}
-                size="small"
-              />
-            </Card>
-          </>
-        ) : (
-          <Empty description="暂无数据" />
+        {summary && (
+          <Card title="涉及招聘会明细" style={{ marginBottom: 16 }} bodyStyle={{ paddingTop: 8 }}>
+            <Table<FairStatisticsFairItem>
+              rowKey="fairId"
+              columns={columns}
+              dataSource={summary.fairs || []}
+              pagination={false}
+              size="small"
+              scroll={{ x: 860 }}
+            />
+          </Card>
         )}
       </Spin>
+
+      <Card
+        size="small"
+        title={
+          <span>
+            <InfoCircleOutlined style={{ color: '#1677ff', marginRight: 8 }} />
+            统计口径
+          </span>
+        }
+      >
+        <Row gutter={[24, 8]}>
+          <Col xs={24} lg={12}>
+            需求人数取岗位招聘数；招聘数填写“若干”、为空或非正数时，按 1 人计算。
+          </Col>
+          <Col xs={24} lg={12}>
+            {fairType === 'online'
+              ? '线上招聘会统计投递岗位数，即本场有效招聘会岗位中至少有一条有效投递记录的岗位数。'
+              : '户外招聘会不提供报名投递简历，统计现场签到记录数，不显示投递岗位数。'}
+          </Col>
+        </Row>
+      </Card>
     </PageContainer>
   );
 };
 
-const RateText: React.FC<{ label: string; rate?: number | null }> = ({ label, rate }) => {
-  if (rate === null || rate === undefined) {
-    return (
-      <Text type="secondary">
-        {label}：--
-      </Text>
-    );
-  }
-  const up = rate >= 0;
-  const color = up ? '#cf1322' : '#3f8600';
-  const pct = `${(rate * 100).toFixed(1)}%`;
-  return (
-    <Text style={{ color }}>
-      {label}：
-      {up ? <ArrowUpOutlined /> : <ArrowDownOutlined />} {pct}
-    </Text>
-  );
-};
-
 export default FairStatistics;