feat: add attendee and device management tabs, and implement outdoor fair statistics

src/pages/Jobfair/FairStatistics/index.tsx

@@ -0,0 +1,209 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Card,
+  Col,
+  DatePicker,
+  Empty,
+  Row,
+  Segmented,
+  Spin,
+  Statistic,
+  Table,
+  Typography,
+  message,
+} from 'antd';
+import { ArrowDownOutlined, ArrowUpOutlined } 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';
+
+const { RangePicker } = DatePicker;
+const { Text } = Typography;
+
+type Granularity = 'day' | 'week' | 'month' | 'year';
+
+const GRAN_OPTIONS: { label: string; value: Granularity }[] = [
+  { label: '按日', value: 'day' },
+  { label: '按周', value: 'week' },
+  { label: '按月', value: 'month' },
+  { label: '按年', value: 'year' },
+];
+
+const formatBound = (value: any, suffix: string): string | undefined => {
+  if (value && typeof value.format === 'function') {
+    return `${value.format('YYYY-MM-DD')} ${suffix}`;
+  }
+  return undefined;
+};
+
+const FairStatistics: React.FC = () => {
+  const [granularity, setGranularity] = useState<Granularity>('month');
+  const [dateRange, setDateRange] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<OutdoorFairStatisticsResult | null>(null);
+
+  const fetchStats = async (gran: Granularity, range: any) => {
+    setLoading(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);
+      } else {
+        message.error(res?.msg || '统计失败');
+      }
+    } catch (e) {
+      message.error('统计失败');
+    } finally {
+      setLoading(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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [granularity, dateRange]);
+
+  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]);
+
+  const columns: ColumnsType<OutdoorFairStatisticsSeriesItem> = [
+    { title: '时间', dataIndex: 'time', width: 140 },
+    { title: '招聘会数', dataIndex: 'fairCount', width: 120 },
+    { title: '参会单位数', dataIndex: 'companyCount', width: 120 },
+    { title: '职位数', dataIndex: 'jobCount', width: 120 },
+  ];
+
+  return (
+    <PageContainer
+      header={{ title: '招聘会数据统计' }}
+      content="按年/周/月/日维度统计时间区间内的招聘会趋势，含累计发布招聘会数及同比、环比。"
+    >
+      <Card style={{ marginBottom: 16 }}>
+        <Row gutter={16} align="middle">
+          <Col>
+            <span style={{ marginRight: 8 }}>统计粒度</span>
+            <Segmented
+              value={granularity}
+              onChange={(v) => setGranularity(v as Granularity)}
+              options={GRAN_OPTIONS}
+            />
+          </Col>
+          <Col flex="auto">
+            <span style={{ marginRight: 8, marginLeft: 16 }}>时间区间</span>
+            <RangePicker
+              value={dateRange}
+              onChange={(v) => setDateRange(v)}
+              style={{ width: 360 }}
+            />
+          </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>
+            </Row>
+
+            <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="暂无数据" />
+        )}
+      </Spin>
+    </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;