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;

src/pages/Jobfair/Outdoorfair/Detail/components/AttendeeTab.tsx

@@ -0,0 +1,174 @@
+import React, { useRef, useState } from 'react';
+import { useAccess } from '@umijs/max';
+import { Button, Modal, message } from 'antd';
+import { ActionType, ProColumns, ProTable, ModalForm, ProFormText, ProFormDateTimePicker } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import {
+  getOutdoorFairAttendeeList,
+  addOutdoorFairAttendee,
+  updateOutdoorFairAttendee,
+  deleteOutdoorFairAttendee,
+} from '@/services/jobportal/outdoorFairAttendee';
+import type {
+  OutdoorFairAttendeeItem,
+  OutdoorFairAttendeeForm,
+} from '@/services/jobportal/outdoorFairAttendee';
+
+interface Props {
+  fairId: number;
+}
+
+const AttendeeTab: React.FC<Props> = ({ fairId }) => {
+  const access = useAccess();
+  const actionRef = useRef<ActionType>();
+  const [modalVisible, setModalVisible] = useState(false);
+  const [currentRow, setCurrentRow] = useState<OutdoorFairAttendeeItem>();
+
+  const handleDelete = (id: number) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除该签到人员吗？',
+      onOk: async () => {
+        const res = await deleteOutdoorFairAttendee(id);
+        if (res.code === 200) {
+          message.success('删除成功');
+          actionRef.current?.reload();
+        } else {
+          message.error(res.msg || '删除失败');
+        }
+      },
+    });
+  };
+
+  const columns: ProColumns<OutdoorFairAttendeeItem>[] = [
+    { title: '人员', dataIndex: 'name', ellipsis: true },
+    { title: '手机号', dataIndex: 'phone', ellipsis: true, hideInSearch: true },
+    { title: '住址', dataIndex: 'address', ellipsis: true, hideInSearch: true },
+    {
+      title: '签到时间',
+      dataIndex: 'checkInTime',
+      valueType: 'dateTime',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 160,
+      fixed: 'right',
+      render: (_, record) => [
+        <Button
+          key="edit"
+          type="link"
+          size="small"
+          icon={<EditOutlined />}
+          hidden={!access.hasPerms('cms:outdoorFair:edit')}
+          onClick={() => {
+            setCurrentRow(record);
+            setModalVisible(true);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          key="delete"
+          type="link"
+          size="small"
+          danger
+          icon={<DeleteOutlined />}
+          hidden={!access.hasPerms('cms:outdoorFair:remove')}
+          onClick={() => handleDelete(record.id)}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<OutdoorFairAttendeeItem>
+        actionRef={actionRef}
+        rowKey="id"
+        headerTitle="参会人员管理"
+        search={{ labelWidth: 'auto' }}
+        options={false}
+        pagination={{ pageSize: 10 }}
+        scroll={{ x: 'max-content' }}
+        toolBarRender={() => [
+          <Button
+            key="add"
+            type="primary"
+            icon={<PlusOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:add')}
+            onClick={() => {
+              setCurrentRow(undefined);
+              setModalVisible(true);
+            }}
+          >
+            录入签到人员
+          </Button>,
+        ]}
+        request={async (params) => {
+          const res = await getOutdoorFairAttendeeList({
+            fairId,
+            current: params.current,
+            pageSize: params.pageSize,
+            name: params.name,
+          });
+          return { data: res.rows || [], total: res.total || 0, success: res.code === 200 };
+        }}
+        columns={columns}
+      />
+
+      <ModalForm<OutdoorFairAttendeeForm>
+        title={currentRow ? '编辑签到人员' : '录入签到人员'}
+        open={modalVisible}
+        modalProps={{ destroyOnClose: true, onCancel: () => setModalVisible(false) }}
+        initialValues={
+          currentRow
+            ? {
+                id: currentRow.id,
+                fairId,
+                name: currentRow.name,
+                phone: currentRow.phone,
+                address: currentRow.address,
+                checkInTime: currentRow.checkInTime,
+              }
+            : { fairId }
+        }
+        onFinish={async (values) => {
+          const payload = { ...values, fairId };
+          const res = values.id
+            ? await updateOutdoorFairAttendee(payload)
+            : await addOutdoorFairAttendee(payload);
+          if (res.code === 200) {
+            message.success(values.id ? '修改成功' : '新增成功');
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            actionRef.current?.reload();
+            return true;
+          }
+          message.error(res.msg || '操作失败');
+          return false;
+        }}
+      >
+        <ProFormText
+          name="name"
+          label="人员"
+          placeholder="请输入人员姓名"
+          rules={[{ required: true, message: '请输入人员姓名' }]}
+        />
+        <ProFormText name="phone" label="手机号" placeholder="请输入手机号" />
+        <ProFormText name="address" label="住址" placeholder="请输入住址" />
+        <ProFormDateTimePicker
+          name="checkInTime"
+          label="签到时间"
+          placeholder="请选择签到时间"
+          fieldProps={{ style: { width: '100%' } }}
+        />
+      </ModalForm>
+    </>
+  );
+};
+
+export default AttendeeTab;

src/pages/Jobfair/Outdoorfair/Detail/components/DeviceTab.tsx

@@ -0,0 +1,249 @@
+import React, { useRef, useState } from 'react';
+import { useAccess } from '@umijs/max';
+import { Button, Modal, message, Typography } from 'antd';
+import {
+  ActionType,
+  ProColumns,
+  ProTable,
+  ModalForm,
+  ProFormDigit,
+  ProFormSelect,
+} from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, LinkOutlined, DisconnectOutlined } from '@ant-design/icons';
+import {
+  getOutdoorFairDeviceList,
+  batchGenerateOutdoorFairDevice,
+  bindOutdoorFairDevice,
+  deleteOutdoorFairDevice,
+  getOutdoorFairCompanyOptions,
+} from '@/services/jobportal/outdoorFairDevice';
+import type { OutdoorFairDeviceItem } from '@/services/jobportal/outdoorFairDevice';
+
+interface Props {
+  fairId: number;
+}
+
+const DeviceTab: React.FC<Props> = ({ fairId }) => {
+  const access = useAccess();
+  const actionRef = useRef<ActionType>();
+  const [batchVisible, setBatchVisible] = useState(false);
+  const [bindVisible, setBindVisible] = useState(false);
+  const [currentRow, setCurrentRow] = useState<OutdoorFairDeviceItem>();
+
+  const handleDelete = (id: number) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除该设备码吗？',
+      onOk: async () => {
+        const res = await deleteOutdoorFairDevice(id);
+        if (res.code === 200) {
+          message.success('删除成功');
+          actionRef.current?.reload();
+        } else {
+          message.error(res.msg || '删除失败');
+        }
+      },
+    });
+  };
+
+  const handleUnbind = (record: OutdoorFairDeviceItem) => {
+    Modal.confirm({
+      title: '确认解绑',
+      content: `确定要解除设备码与「${record.companyName}」的绑定吗？`,
+      onOk: async () => {
+        const res = await bindOutdoorFairDevice(record.id, undefined);
+        if (res.code === 200) {
+          message.success('解绑成功');
+          actionRef.current?.reload();
+        } else {
+          message.error(res.msg || '解绑失败');
+        }
+      },
+    });
+  };
+
+  const columns: ProColumns<OutdoorFairDeviceItem>[] = [
+    {
+      title: '设备码',
+      dataIndex: 'deviceCode',
+      ellipsis: true,
+      render: (_, record) => (
+        <Typography.Text copyable code>
+          {record.deviceCode}
+        </Typography.Text>
+      ),
+    },
+    {
+      title: '绑定企业',
+      dataIndex: 'companyName',
+      ellipsis: true,
+      hideInSearch: true,
+      render: (_, record) => (record.companyName ? record.companyName : '— 未绑定 —'),
+    },
+    {
+      title: '绑定时间',
+      dataIndex: 'bindTime',
+      valueType: 'dateTime',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 200,
+      fixed: 'right',
+      render: (_, record) => [
+        record.companyId ? (
+          <Button
+            key="unbind"
+            type="link"
+            size="small"
+            icon={<DisconnectOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:edit')}
+            onClick={() => handleUnbind(record)}
+          >
+            解绑
+          </Button>
+        ) : (
+          <Button
+            key="bind"
+            type="link"
+            size="small"
+            icon={<LinkOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:edit')}
+            onClick={() => {
+              setCurrentRow(record);
+              setBindVisible(true);
+            }}
+          >
+            绑定企业
+          </Button>
+        ),
+        <Button
+          key="delete"
+          type="link"
+          size="small"
+          danger
+          icon={<DeleteOutlined />}
+          hidden={!access.hasPerms('cms:outdoorFair:remove')}
+          onClick={() => handleDelete(record.id)}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<OutdoorFairDeviceItem>
+        actionRef={actionRef}
+        rowKey="id"
+        headerTitle="设备管理"
+        search={{ labelWidth: 'auto' }}
+        options={false}
+        pagination={{ pageSize: 10 }}
+        scroll={{ x: 'max-content' }}
+        toolBarRender={() => [
+          <Button
+            key="batch"
+            type="primary"
+            icon={<PlusOutlined />}
+            hidden={!access.hasPerms('cms:outdoorFair:add')}
+            onClick={() => setBatchVisible(true)}
+          >
+            批量生成设备码
+          </Button>,
+        ]}
+        request={async (params) => {
+          const res = await getOutdoorFairDeviceList({
+            fairId,
+            current: params.current,
+            pageSize: params.pageSize,
+            deviceCode: params.deviceCode,
+            companyName: params.companyName,
+          });
+          return { data: res.rows || [], total: res.total || 0, success: res.code === 200 };
+        }}
+        columns={columns}
+      />
+
+      <ModalForm<{ quantity: number }>
+        title="批量生成设备码"
+        open={batchVisible}
+        modalProps={{ destroyOnClose: true, onCancel: () => setBatchVisible(false) }}
+        initialValues={{ quantity: 10 }}
+        onFinish={async (values) => {
+          const res = await batchGenerateOutdoorFairDevice({
+            fairId,
+            quantity: Number(values.quantity),
+          });
+          if (res.code === 200) {
+            message.success(`成功生成 ${res.data?.length || values.quantity} 个设备码`);
+            setBatchVisible(false);
+            actionRef.current?.reload();
+            return true;
+          }
+          message.error(res.msg || '生成失败');
+          return false;
+        }}
+      >
+        <ProFormDigit
+          name="quantity"
+          label="生成数量"
+          placeholder="请输入需要生成的设备码数量"
+          min={1}
+          max={1000}
+          fieldProps={{ precision: 0 }}
+          rules={[{ required: true, message: '请输入生成数量' }]}
+        />
+      </ModalForm>
+
+      <ModalForm<{ companyId: number }>
+        title="绑定参会企业"
+        open={bindVisible}
+        modalProps={{ destroyOnClose: true, onCancel: () => setBindVisible(false) }}
+        onFinish={async (values) => {
+          if (!currentRow) return false;
+          const res = await bindOutdoorFairDevice(currentRow.id, values.companyId);
+          if (res.code === 200) {
+            message.success('绑定成功');
+            setBindVisible(false);
+            setCurrentRow(undefined);
+            actionRef.current?.reload();
+            return true;
+          }
+          message.error(res.msg || '绑定失败');
+          return false;
+        }}
+      >
+        <ProFormSelect
+          name="companyId"
+          label="参会企业"
+          placeholder="请选择参会企业"
+          showSearch
+          request={async () => {
+            const [companies, devicesRes] = await Promise.all([
+              getOutdoorFairCompanyOptions(fairId),
+              getOutdoorFairDeviceList({ fairId, current: 1, pageSize: 1000 }),
+            ]);
+            // 排除已绑定到其他设备的企业
+            const boundIds = new Set(
+              (devicesRes.rows || [])
+                .map((d) => d.companyId)
+                .filter((cid): cid is number => cid != null),
+            );
+            return companies
+              .filter((item) => !boundIds.has(item.companyId))
+              .map((item) => ({
+                label: item.companyName,
+                value: item.companyId,
+              }));
+          }}
+          rules={[{ required: true, message: '请选择参会企业' }]}
+        />
+      </ModalForm>
+    </>
+  );
+};
+
+export default DeviceTab;

src/pages/Jobfair/Outdoorfair/Detail/index.tsx

@@ -9,6 +9,8 @@ import FairInfoTab from './components/FairInfoTab';
 import BoothTab from './components/BoothTab';
 import ParticipatingCompaniesTab from './components/ParticipatingCompaniesTab';
 import ParticipatingJobsTab from './components/ParticipatingJobsTab';
+import AttendeeTab from './components/AttendeeTab';
+import DeviceTab from './components/DeviceTab';
 
 const OutdoorFairDetail: React.FC = () => {
   const [searchParams] = useSearchParams();
@@ -41,6 +43,8 @@ const OutdoorFairDetail: React.FC = () => {
     { key: 'fair-info', label: '招聘会管理' },
     { key: 'participating-companies', label: '参会企业' },
     { key: 'participating-jobs', label: '参会岗位' },
+    { key: 'attendee', label: '参会人员管理' },
+    { key: 'device', label: '设备管理' },
     { key: 'booth', label: '展位图' },
   ];
 
@@ -84,6 +88,10 @@ const OutdoorFairDetail: React.FC = () => {
                     return <ParticipatingCompaniesTab fairId={fairId} />;
                   case 'participating-jobs':
                     return <ParticipatingJobsTab fairId={fairId} />;
+                  case 'attendee':
+                    return <AttendeeTab fairId={fairId} />;
+                  case 'device':
+                    return <DeviceTab fairId={fairId} />;
                   default:
                     return null;
                 }