feat: 添加股票mock数据
This commit is contained in:
zdl
@@ -1,183 +0,0 @@
|
||||
// src/views/Community/components/EventFilters.js
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, DatePicker, Button, Select, Form, Cascader } from 'antd';
|
||||
import { FilterOutlined } from '@ant-design/icons';
|
||||
import moment from 'moment';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import { useIndustry } from '../../../contexts/IndustryContext';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Option } = Select;
|
||||
|
||||
const EventFilters = ({ filters, onFilterChange, loading }) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 使用全局行业数据
|
||||
const { industryData, loading: industryLoading, loadIndustryData } = useIndustry();
|
||||
|
||||
// 初始化表单值
|
||||
useEffect(() => {
|
||||
const initialValues = {
|
||||
date_range: filters.date_range ? filters.date_range.split(' 至 ').map(d => moment(d)) : null,
|
||||
sort: filters.sort,
|
||||
importance: filters.importance,
|
||||
industry_code: filters.industry_code ? filters.industry_code.split(',') : []
|
||||
};
|
||||
form.setFieldsValue(initialValues);
|
||||
}, [filters, form]);
|
||||
|
||||
// Cascader 获得焦点时确保数据已加载
|
||||
const handleCascaderFocus = async () => {
|
||||
if (!industryData || industryData.length === 0) {
|
||||
logger.debug('EventFilters', 'Cascader 获得焦点，触发数据加载');
|
||||
await loadIndustryData();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateRangeChange = (dates) => {
|
||||
if (dates && dates.length === 2) {
|
||||
const dateRange = `${dates[0].format('YYYY-MM-DD')} 至 ${dates[1].format('YYYY-MM-DD')}`;
|
||||
onFilterChange('date_range', dateRange);
|
||||
} else {
|
||||
onFilterChange('date_range', '');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSortChange = (value) => {
|
||||
onFilterChange('sort', value);
|
||||
};
|
||||
|
||||
const handleImportanceChange = (value) => {
|
||||
onFilterChange('importance', value);
|
||||
};
|
||||
|
||||
// 收集所有叶子节点的 value（递归）
|
||||
const collectLeafValues = (node) => {
|
||||
// 如果没有子节点，说明是叶子节点
|
||||
if (!node.children || node.children.length === 0) {
|
||||
return [node.value];
|
||||
}
|
||||
|
||||
// 有子节点，递归收集所有子节点的叶子节点
|
||||
let leafValues = [];
|
||||
node.children.forEach(child => {
|
||||
leafValues = leafValues.concat(collectLeafValues(child));
|
||||
});
|
||||
return leafValues;
|
||||
};
|
||||
|
||||
// 根据级联路径找到对应的节点
|
||||
const findNodeByPath = (options, path) => {
|
||||
let current = options;
|
||||
let node = null;
|
||||
|
||||
for (let i = 0; i < path.length; i++) {
|
||||
node = current.find(item => item.value === path[i]);
|
||||
if (!node) return null;
|
||||
if (i < path.length - 1) {
|
||||
current = node.children || [];
|
||||
}
|
||||
}
|
||||
return node;
|
||||
};
|
||||
|
||||
// 行业级联选择变化
|
||||
const handleIndustryChange = (value) => {
|
||||
if (!value || value.length === 0) {
|
||||
onFilterChange('industry_code', '');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取选中的节点
|
||||
const selectedNode = findNodeByPath(industryData || [], value);
|
||||
|
||||
if (!selectedNode) {
|
||||
// 如果找不到节点，使用最后一个值
|
||||
onFilterChange('industry_code', value[value.length - 1]);
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果选中的节点有子节点，收集所有叶子节点的 value
|
||||
// 这样可以匹配该级别下的所有事件
|
||||
if (selectedNode.children && selectedNode.children.length > 0) {
|
||||
const leafValues = collectLeafValues(selectedNode);
|
||||
onFilterChange('industry_code', leafValues.join(','));
|
||||
} else {
|
||||
// 叶子节点，直接使用该 value
|
||||
onFilterChange('industry_code', selectedNode.value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="event-filters" title="事件筛选" style={{ marginBottom: 16 }}>
|
||||
<Form form={form} layout="vertical">
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="日期范围" name="date_range">
|
||||
<RangePicker
|
||||
style={{ width: '100%' }}
|
||||
locale={locale}
|
||||
placeholder={['开始日期', '结束日期']}
|
||||
onChange={handleDateRangeChange}
|
||||
disabled={loading}
|
||||
allowEmpty={[true, true]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Row gutter={8}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="排序方式" name="sort">
|
||||
<Select onChange={handleSortChange} disabled={loading}>
|
||||
<Option value="new">最新</Option>
|
||||
<Option value="hot">热门</Option>
|
||||
<Option value="returns">收益率</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="重要性" name="importance">
|
||||
<Select onChange={handleImportanceChange} disabled={loading}>
|
||||
<Option value="all">全部</Option>
|
||||
<Option value="S">S级</Option>
|
||||
<Option value="A">A级</Option>
|
||||
<Option value="B">B级</Option>
|
||||
<Option value="C">C级</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 行业分类级联选择器 - 替换原来的 5 个独立 Select */}
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item label="行业" name="industry_cascade">
|
||||
<Cascader
|
||||
options={industryData || []}
|
||||
onChange={handleIndustryChange}
|
||||
onFocus={handleCascaderFocus}
|
||||
placeholder={industryLoading ? "加载中..." : "请选择行业（支持选择任意级别）"}
|
||||
changeOnSelect
|
||||
expandTrigger="hover"
|
||||
showSearch={{
|
||||
filter: (inputValue, path) =>
|
||||
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
||||
}}
|
||||
disabled={loading || industryLoading}
|
||||
loading={industryLoading}
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
displayRender={(labels) => labels.join(' / ')}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventFilters;
|
||||
Reference in New Issue
Block a user