添加企业服务管理、企业数据管理页面

src/pages/Company/ServiceManagement/components/chartcards.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import { Card, Select, Spin, Empty, Row, Col } from 'antd';
+import { Line, Bar, Pie, Heatmap } from '@ant-design/charts';
+
+export const IndustryTrendCard = ({
+  loading,
+  currentIndustryData,
+  config,
+  availableIndustries,
+  selectedIndustry,
+  onIndustryChange,
+}) => (
+  <Card
+    title="岗位趋势分析"
+    style={{ marginBottom: 16 }}
+    bodyStyle={{ padding: '12px', height: 250 }}
+    extra={
+      <Select
+        value={selectedIndustry}
+        onChange={onIndustryChange}
+        style={{ width: 180 }}
+        loading={loading}
+        placeholder="选择行业"
+        disabled={availableIndustries.length === 0}
+      >
+        {availableIndustries.map((industry: any) => (
+          <Option key={industry} value={industry}>
+            {industry}
+          </Option>
+        ))}
+      </Select>
+    }
+  >
+    <Spin spinning={loading}>
+      {currentIndustryData.length > 0 ? (
+        <Line {...config} />
+      ) : (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={
+            loading
+              ? '数据加载中...'
+              : selectedIndustry
+                ? '当前时间段无数据'
+                : '请先选择岗位'
+          }
+        />
+      )}
+    </Spin>
+  </Card>
+);
+
+export const AreaAnalysisCard = ({ loading, areaData, config }) => (
+  <Card
+    title="人员区域分析"
+    style={{ marginBottom: 16 }}
+    bodyStyle={{
+      padding: 12,
+      height: 250,
+      position: 'relative',
+    }}
+  >
+    {loading ? (
+      <Spin tip="数据加载中..." size="large" />
+    ) : areaData.length > 0 ? (
+      <div style={{ height: '100%', width: '100%', minHeight: 300 }}>
+        <Heatmap {...config} />
+      </div>
+    ) : (
+      <Empty description="暂无区域数据" />
+    )}
+  </Card>
+);
+
+export const SalaryTrendCard = ({
+  loading,
+  currentSalaryData,
+  config,
+  availableSalaryRanges,
+  selectedSalaryRange,
+  onSalaryRangeChange,
+}) => (
+  <Card
+    title="薪资区间分析"
+    style={{ marginBottom: 16 }}
+    bodyStyle={{ padding: '12px', height: 250 }}
+    extra={
+      <Select
+        value={selectedSalaryRange}
+        onChange={onSalaryRangeChange}
+        style={{ width: 180 }}
+        loading={loading}
+        placeholder="选择薪资区间"
+        disabled={availableSalaryRanges.length === 0}
+      >
+        {availableSalaryRanges.map((range) => (
+          <Option key={range} value={range}>
+            {range}
+          </Option>
+        ))}
+      </Select>
+    }
+  >
+    <Spin spinning={loading}>
+      {currentSalaryData.length > 0 ? (
+        <Line {...config} />
+      ) : (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={
+            loading
+              ? '数据加载中...'
+              : selectedSalaryRange
+                ? '当前时间段无数据'
+                : '请先选择薪资区间'
+          }
+        />
+      )}
+    </Spin>
+  </Card>
+);
+
+export const WorkYearCard = ({
+  loading,
+  workYearData,
+  config,
+  availableWorkYearRanges,
+  selectedWorkYearRange,
+  onWorkYearRangeChange,
+}) => (
+  <Card
+    title="企业服务方向分布"
+    style={{ marginBottom: 16 }}
+    bodyStyle={{
+      padding: '12px',
+      height: 250,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+    }}
+    extra={
+      <Select
+        value={selectedWorkYearRange}
+        onChange={onWorkYearRangeChange}
+        style={{ width: 180 }}
+        loading={loading}
+        placeholder="选择服务方向"
+        disabled={availableWorkYearRanges.length === 0}
+      >
+        {availableWorkYearRanges.map((range: any) => (
+          <Option key={range} value={range}>
+            {range}
+          </Option>
+        ))}
+      </Select>
+    }
+  >
+    <Spin spinning={loading}>
+      {workYearData && workYearData.length > 0 ? (
+        <div style={{ width: '100%', height: '100%', padding: 8 }}>
+          <Pie {...config} />
+        </div>
+      ) : (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={loading ? '数据加载中...' : '暂无工作经验数据'}
+        />
+      )}
+    </Spin>
+  </Card>
+);
+
+export const EducationCard = ({
+  loading,
+  educationData,
+  config,
+  availableEducationLevels,
+  selectedEducationLevel,
+  onEducationLevelChange,
+}) => (
+  <Card
+    title="企业学历分布"
+    style={{ marginBottom: 16 }}
+    bodyStyle={{ padding: '12px', height: 250 }}
+    extra={
+      <Select
+        value={selectedEducationLevel}
+        onChange={onEducationLevelChange}
+        style={{ width: 180 }}
+        loading={loading}
+        placeholder="选择学历要求"
+        disabled={availableEducationLevels.length === 0}
+      >
+        <Option value="">全部学历</Option>
+        {availableEducationLevels.map((level) => (
+          <Option key={level} value={level}>
+            {level}
+          </Option>
+        ))}
+      </Select>
+    }
+  >
+    <Spin spinning={loading}>
+      {educationData.length > 0 ? (
+        <Bar {...config} />
+      ) : (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={loading ? '数据加载中...' : '暂无学历数据'}
+        />
+      )}
+    </Spin>
+  </Card>
+);