901 lines
37 KiB
TypeScript
901 lines
37 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useTheme } from '../contexts/ThemeContext';
|
|
import {
|
|
Scale,
|
|
Search,
|
|
Plus,
|
|
Edit,
|
|
Trash2,
|
|
Download,
|
|
Filter,
|
|
Folder,
|
|
FolderOpen,
|
|
ChevronRight,
|
|
TrendingUp,
|
|
TrendingDown,
|
|
Minus,
|
|
Target,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Clock,
|
|
Star,
|
|
BarChart3,
|
|
PieChart,
|
|
Activity,
|
|
Settings,
|
|
Copy,
|
|
Link2,
|
|
FileText,
|
|
User,
|
|
Calendar,
|
|
} from 'lucide-react';
|
|
import { PageType } from '../components/Sidebar';
|
|
|
|
interface EvaluationIndex {
|
|
id: string;
|
|
name: string;
|
|
category: string;
|
|
type: 'quantitative' | 'qualitative' | 'composite';
|
|
weight: number;
|
|
description: string;
|
|
calculationMethod?: string;
|
|
dataSource?: string;
|
|
updateFrequency: 'realtime' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'quarterly';
|
|
status: 'active' | 'draft' | 'deprecated';
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
author: string;
|
|
tags: string[];
|
|
baseline?: number;
|
|
target?: number;
|
|
currentValue?: number;
|
|
trend: 'up' | 'down' | 'stable';
|
|
relatedIndices: string[];
|
|
}
|
|
|
|
interface EvaluationSystem {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
category: string;
|
|
indices: string[];
|
|
status: 'active' | 'draft' | 'archived';
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
author: string;
|
|
}
|
|
|
|
interface EvaluationIndexResourceManagementProps {
|
|
onNavigate: (page: PageType) => void;
|
|
}
|
|
|
|
const mockIndices: EvaluationIndex[] = [
|
|
{
|
|
id: 'idx-001',
|
|
name: '网络影响力指数',
|
|
category: '影响力评估',
|
|
type: 'composite',
|
|
weight: 0.25,
|
|
description: '综合评估目标在网络空间的影响力水平',
|
|
calculationMethod: '加权平均法',
|
|
dataSource: '社交媒体数据、新闻报道量',
|
|
updateFrequency: 'daily',
|
|
status: 'active',
|
|
createdAt: '2023-06-15',
|
|
updatedAt: '2024-03-10',
|
|
author: '评估组A',
|
|
tags: ['影响力', '网络', '综合'],
|
|
baseline: 50,
|
|
target: 80,
|
|
currentValue: 72,
|
|
trend: 'up',
|
|
relatedIndices: ['idx-002', 'idx-003'],
|
|
},
|
|
{
|
|
id: 'idx-002',
|
|
name: '传播范围指数',
|
|
category: '传播效果',
|
|
type: 'quantitative',
|
|
weight: 0.20,
|
|
description: '衡量信息在网络中的传播覆盖范围',
|
|
calculationMethod: '触达人数 × 地域覆盖率',
|
|
dataSource: '平台API数据',
|
|
updateFrequency: 'realtime',
|
|
status: 'active',
|
|
createdAt: '2023-07-20',
|
|
updatedAt: '2024-03-12',
|
|
author: '评估组B',
|
|
tags: ['传播', '覆盖', '定量'],
|
|
baseline: 10000,
|
|
target: 50000,
|
|
currentValue: 42500,
|
|
trend: 'up',
|
|
relatedIndices: ['idx-001'],
|
|
},
|
|
{
|
|
id: 'idx-003',
|
|
name: '舆论倾向指数',
|
|
category: '舆情分析',
|
|
type: 'qualitative',
|
|
weight: 0.30,
|
|
description: '评估网络舆论对目标的整体态度倾向',
|
|
calculationMethod: '情感分析模型',
|
|
dataSource: '社交媒体评论、新闻评论区',
|
|
updateFrequency: 'hourly',
|
|
status: 'active',
|
|
createdAt: '2023-08-10',
|
|
updatedAt: '2024-03-11',
|
|
author: '评估组A',
|
|
tags: ['舆情', '情感', '定性'],
|
|
baseline: 0,
|
|
target: 75,
|
|
currentValue: 68,
|
|
trend: 'stable',
|
|
relatedIndices: ['idx-001', 'idx-004'],
|
|
},
|
|
{
|
|
id: 'idx-004',
|
|
name: '响应时效指数',
|
|
category: '效能评估',
|
|
type: 'quantitative',
|
|
weight: 0.15,
|
|
description: '评估对网络事件的响应速度',
|
|
calculationMethod: '平均响应时间 (小时)',
|
|
dataSource: '事件追踪系统',
|
|
updateFrequency: 'weekly',
|
|
status: 'active',
|
|
createdAt: '2023-09-05',
|
|
updatedAt: '2024-03-08',
|
|
author: '评估组C',
|
|
tags: ['时效', '效能', '定量'],
|
|
baseline: 24,
|
|
target: 4,
|
|
currentValue: 6,
|
|
trend: 'down',
|
|
relatedIndices: ['idx-005'],
|
|
},
|
|
{
|
|
id: 'idx-005',
|
|
name: '协调联动指数',
|
|
category: '协作效能',
|
|
type: 'composite',
|
|
weight: 0.10,
|
|
description: '评估多部门协作的顺畅程度',
|
|
calculationMethod: '任务完成率 × 沟通效率',
|
|
dataSource: '协同办公系统',
|
|
updateFrequency: 'monthly',
|
|
status: 'draft',
|
|
createdAt: '2024-01-15',
|
|
updatedAt: '2024-03-05',
|
|
author: '评估组D',
|
|
tags: ['协作', '联动', '综合'],
|
|
trend: 'stable',
|
|
relatedIndices: ['idx-004'],
|
|
},
|
|
{
|
|
id: 'idx-006',
|
|
name: '风险预警准确率',
|
|
category: '预警效能',
|
|
type: 'quantitative',
|
|
weight: 0.25,
|
|
description: '风险预警的准确程度',
|
|
calculationMethod: '准确预警数 / 总预警数',
|
|
dataSource: '预警系统日志',
|
|
updateFrequency: 'monthly',
|
|
status: 'active',
|
|
createdAt: '2023-10-20',
|
|
updatedAt: '2024-02-28',
|
|
author: '评估组A',
|
|
tags: ['预警', '准确率', '定量'],
|
|
baseline: 60,
|
|
target: 90,
|
|
currentValue: 82,
|
|
trend: 'up',
|
|
relatedIndices: [],
|
|
},
|
|
{
|
|
id: 'idx-007',
|
|
name: '策略有效性指数',
|
|
category: '策略评估',
|
|
type: 'composite',
|
|
weight: 0.30,
|
|
description: '评估所采取措施的有效性',
|
|
calculationMethod: '多维度加权评估',
|
|
dataSource: '策略执行数据、效果追踪',
|
|
updateFrequency: 'quarterly',
|
|
status: 'active',
|
|
createdAt: '2023-11-10',
|
|
updatedAt: '2024-03-01',
|
|
author: '评估组B',
|
|
tags: ['策略', '效果', '综合'],
|
|
baseline: 50,
|
|
target: 85,
|
|
currentValue: 78,
|
|
trend: 'up',
|
|
relatedIndices: ['idx-001', 'idx-003'],
|
|
},
|
|
{
|
|
id: 'idx-008',
|
|
name: '信息完整度',
|
|
category: '数据质量',
|
|
type: 'quantitative',
|
|
weight: 0.10,
|
|
description: '目标画像信息的完整程度',
|
|
calculationMethod: '已填写字段数 / 总字段数',
|
|
dataSource: '画像数据库',
|
|
updateFrequency: 'weekly',
|
|
status: 'deprecated',
|
|
createdAt: '2023-05-01',
|
|
updatedAt: '2024-01-15',
|
|
author: '评估组C',
|
|
tags: ['数据', '完整度', '定量'],
|
|
trend: 'stable',
|
|
relatedIndices: [],
|
|
},
|
|
];
|
|
|
|
const mockSystems: EvaluationSystem[] = [
|
|
{
|
|
id: 'sys-001',
|
|
name: '网络态势综合评估体系',
|
|
description: '用于评估网络空间整体态势的综合指标体系',
|
|
category: '态势评估',
|
|
indices: ['idx-001', 'idx-002', 'idx-003'],
|
|
status: 'active',
|
|
createdAt: '2023-06-01',
|
|
updatedAt: '2024-03-10',
|
|
author: '评估部',
|
|
},
|
|
{
|
|
id: 'sys-002',
|
|
name: '响应效能评估体系',
|
|
description: '评估应急响应和处置效能的指标体系',
|
|
category: '效能评估',
|
|
indices: ['idx-004', 'idx-005'],
|
|
status: 'active',
|
|
createdAt: '2023-09-01',
|
|
updatedAt: '2024-03-08',
|
|
author: '效能组',
|
|
},
|
|
];
|
|
|
|
const typeLabels: Record<EvaluationIndex['type'], string> = {
|
|
quantitative: '定量',
|
|
qualitative: '定性',
|
|
composite: '综合',
|
|
};
|
|
|
|
const typeColors: Record<EvaluationIndex['type'], string> = {
|
|
quantitative: 'bg-blue-500/20 text-blue-400',
|
|
qualitative: 'bg-purple-500/20 text-purple-400',
|
|
composite: 'bg-orange-500/20 text-orange-400',
|
|
};
|
|
|
|
const statusColors: Record<EvaluationIndex['status'], { bg: string; text: string; label: string }> = {
|
|
active: { bg: 'bg-green-500/20', text: 'text-green-400', label: '使用中' },
|
|
draft: { bg: 'bg-yellow-500/20', text: 'text-yellow-400', label: '草稿' },
|
|
deprecated: { bg: 'bg-gray-500/20', text: 'text-gray-400', label: '已废弃' },
|
|
};
|
|
|
|
const frequencyLabels: Record<EvaluationIndex['updateFrequency'], string> = {
|
|
realtime: '实时',
|
|
hourly: '每小时',
|
|
daily: '每日',
|
|
weekly: '每周',
|
|
monthly: '每月',
|
|
quarterly: '每季度',
|
|
};
|
|
|
|
const trendIcons: Record<EvaluationIndex['trend'], React.ReactNode> = {
|
|
up: <TrendingUp className="w-4 h-4 text-green-400" />,
|
|
down: <TrendingDown className="w-4 h-4 text-red-400" />,
|
|
stable: <Minus className="w-4 h-4 text-gray-400" />,
|
|
};
|
|
|
|
const categories = ['全部', '影响力评估', '传播效果', '舆情分析', '效能评估', '协作效能', '预警效能', '策略评估', '数据质量'];
|
|
|
|
const EvaluationIndexResourceManagement: React.FC<EvaluationIndexResourceManagementProps> = ({ onNavigate }) => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
|
|
const [viewMode, setViewMode] = useState<'index' | 'system'>('index');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedCategory, setSelectedCategory] = useState('全部');
|
|
const [selectedType, setSelectedType] = useState<string>('all');
|
|
const [selectedStatus, setSelectedStatus] = useState<string>('all');
|
|
const [selectedIndex, setSelectedIndex] = useState<EvaluationIndex | null>(null);
|
|
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['影响力评估', '传播效果', '舆情分析']));
|
|
|
|
const filteredIndices = mockIndices.filter(index => {
|
|
const matchesSearch = index.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
index.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
index.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
|
|
const matchesCategory = selectedCategory === '全部' || index.category === selectedCategory;
|
|
const matchesType = selectedType === 'all' || index.type === selectedType;
|
|
const matchesStatus = selectedStatus === 'all' || index.status === selectedStatus;
|
|
return matchesSearch && matchesCategory && matchesType && matchesStatus;
|
|
});
|
|
|
|
const stats = {
|
|
total: mockIndices.length,
|
|
active: mockIndices.filter(i => i.status === 'active').length,
|
|
draft: mockIndices.filter(i => i.status === 'draft').length,
|
|
deprecated: mockIndices.filter(i => i.status === 'deprecated').length,
|
|
};
|
|
|
|
const groupedIndices = filteredIndices.reduce((acc, index) => {
|
|
if (!acc[index.category]) {
|
|
acc[index.category] = [];
|
|
}
|
|
acc[index.category].push(index);
|
|
return acc;
|
|
}, {} as Record<string, EvaluationIndex[]>);
|
|
|
|
const toggleCategory = (category: string) => {
|
|
setExpandedCategories(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(category)) {
|
|
next.delete(category);
|
|
} else {
|
|
next.add(category);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const calculateProgress = (index: EvaluationIndex) => {
|
|
if (!index.baseline || !index.target || !index.currentValue) return null;
|
|
const progress = ((index.currentValue - index.baseline) / (index.target - index.baseline)) * 100;
|
|
return Math.min(Math.max(progress, 0), 100);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* 页面标题 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-100'}`}>
|
|
<Scale className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-600'}`} />
|
|
</div>
|
|
<div>
|
|
<h1 className={`text-2xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
评估指标体系资源管理
|
|
</h1>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
管理和维护评估指标库与指标体系
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
|
|
isDark
|
|
? 'bg-slate-700 hover:bg-slate-600 text-white'
|
|
: 'bg-gray-100 hover:bg-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
导出
|
|
</button>
|
|
<button
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
|
|
isDark
|
|
? 'bg-amber-600 hover:bg-amber-500 text-white'
|
|
: 'bg-amber-500 hover:bg-amber-600 text-white'
|
|
}`}
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
添加指标
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 统计卡片 */}
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>指标总数</p>
|
|
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.total}</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-50'}`}>
|
|
<Scale className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>使用中</p>
|
|
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.active}</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg bg-green-500/20`}>
|
|
<CheckCircle className="w-6 h-6 text-green-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-yellow-800/30' : 'border-yellow-100'}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>草稿</p>
|
|
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.draft}</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg bg-yellow-500/20`}>
|
|
<Edit className="w-6 h-6 text-yellow-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已废弃</p>
|
|
<p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.deprecated}</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg bg-gray-500/20`}>
|
|
<AlertCircle className="w-6 h-6 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 视图切换和筛选栏 */}
|
|
<div className="space-y-4">
|
|
{/* 视图切换 */}
|
|
<div className={`flex items-center rounded-lg p-1 w-fit ${isDark ? 'bg-slate-800/50' : 'bg-gray-100'}`}>
|
|
<button
|
|
onClick={() => setViewMode('index')}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
|
viewMode === 'index'
|
|
? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-white text-amber-600 shadow-sm'
|
|
: isDark ? 'text-slate-400' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
<Scale className="w-4 h-4 inline mr-2" />
|
|
指标管理
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('system')}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
|
viewMode === 'system'
|
|
? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-white text-amber-600 shadow-sm'
|
|
: isDark ? 'text-slate-400' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
<BarChart3 className="w-4 h-4 inline mr-2" />
|
|
体系管理
|
|
</button>
|
|
</div>
|
|
|
|
{/* 筛选栏 */}
|
|
<div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}>
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
{/* 搜索框 */}
|
|
<div className="flex-1 min-w-[200px] relative">
|
|
<Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
|
<input
|
|
type="text"
|
|
placeholder="搜索指标名称、描述或标签..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-all ${
|
|
isDark
|
|
? 'bg-slate-900/50 border-slate-700 text-white placeholder-slate-500 focus:border-amber-500'
|
|
: 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-amber-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 分类筛选 */}
|
|
<div className="flex items-center gap-2">
|
|
<Filter className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
|
<select
|
|
value={selectedCategory}
|
|
onChange={(e) => setSelectedCategory(e.target.value)}
|
|
className={`px-3 py-2 rounded-lg border transition-all ${
|
|
isDark
|
|
? 'bg-slate-900/50 border-slate-700 text-white'
|
|
: 'bg-gray-50 border-gray-200 text-gray-900'
|
|
}`}
|
|
>
|
|
{categories.map(cat => (
|
|
<option key={cat} value={cat}>{cat}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* 类型筛选 */}
|
|
<select
|
|
value={selectedType}
|
|
onChange={(e) => setSelectedType(e.target.value)}
|
|
className={`px-3 py-2 rounded-lg border transition-all ${
|
|
isDark
|
|
? 'bg-slate-900/50 border-slate-700 text-white'
|
|
: 'bg-gray-50 border-gray-200 text-gray-900'
|
|
}`}
|
|
>
|
|
<option value="all">全部类型</option>
|
|
<option value="quantitative">定量</option>
|
|
<option value="qualitative">定性</option>
|
|
<option value="composite">综合</option>
|
|
</select>
|
|
|
|
{/* 状态筛选 */}
|
|
<select
|
|
value={selectedStatus}
|
|
onChange={(e) => setSelectedStatus(e.target.value)}
|
|
className={`px-3 py-2 rounded-lg border transition-all ${
|
|
isDark
|
|
? 'bg-slate-900/50 border-slate-700 text-white'
|
|
: 'bg-gray-50 border-gray-200 text-gray-900'
|
|
}`}
|
|
>
|
|
<option value="all">全部状态</option>
|
|
<option value="active">使用中</option>
|
|
<option value="draft">草稿</option>
|
|
<option value="deprecated">已废弃</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 指标列表 */}
|
|
{viewMode === 'index' ? (
|
|
<div className={`rounded-xl overflow-hidden border ${isDark ? 'bg-slate-800/50 border-amber-800/30' : 'bg-white border-amber-100'}`}>
|
|
{Object.entries(groupedIndices).map(([category, indices]) => (
|
|
<div key={category} className="border-b border-gray-200 dark:border-slate-700 last:border-b-0">
|
|
{/* 分类标题 */}
|
|
<button
|
|
onClick={() => toggleCategory(category)}
|
|
className={`w-full px-4 py-3 flex items-center justify-between ${
|
|
isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'
|
|
} transition-colors`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{expandedCategories.has(category) ? (
|
|
<FolderOpen className={`w-5 h-5 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
|
|
) : (
|
|
<Folder className={`w-5 h-5 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
|
|
)}
|
|
<span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{category}
|
|
</span>
|
|
<span className={`px-2 py-0.5 rounded-full text-xs ${
|
|
isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{indices.length}个指标
|
|
</span>
|
|
</div>
|
|
<ChevronRight className={`w-4 h-4 transition-transform ${expandedCategories.has(category) ? 'rotate-90' : ''} ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
|
</button>
|
|
|
|
{/* 指标列表 */}
|
|
{expandedCategories.has(category) && (
|
|
<div className={`${isDark ? 'bg-slate-900/30' : 'bg-gray-50/50'}`}>
|
|
{indices.map((index, idx) => (
|
|
<div
|
|
key={index.id}
|
|
className={`px-4 py-4 cursor-pointer transition-colors ${
|
|
isDark ? 'hover:bg-slate-700/50' : 'hover:bg-white'
|
|
} ${idx !== indices.length - 1 ? 'border-b border-gray-200 dark:border-slate-700/50' : ''}`}
|
|
onClick={() => setSelectedIndex(index)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<div className={`p-2 rounded-lg ${typeColors[index.type]}`}>
|
|
{index.type === 'quantitative' ? <BarChart3 className="w-4 h-4" /> :
|
|
index.type === 'qualitative' ? <PieChart className="w-4 h-4" /> :
|
|
<Activity className="w-4 h-4" />}
|
|
</div>
|
|
<div>
|
|
<h3 className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{index.name}
|
|
</h3>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{index.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 进度条 */}
|
|
{index.currentValue !== undefined && index.baseline !== undefined && index.target !== undefined && (
|
|
<div className="mt-3">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
当前值: {index.currentValue}
|
|
</span>
|
|
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
目标: {index.target}
|
|
</span>
|
|
</div>
|
|
<div className="h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all ${
|
|
calculateProgress(index)! >= 100 ? 'bg-green-500' :
|
|
calculateProgress(index)! >= 50 ? 'bg-amber-500' : 'bg-red-500'
|
|
}`}
|
|
style={{ width: `${calculateProgress(index)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 ml-4">
|
|
<div className="text-right">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`px-2 py-1 rounded text-xs ${typeColors[index.type]}`}>
|
|
{typeLabels[index.type]}
|
|
</span>
|
|
<span className={`px-2 py-1 rounded text-xs ${statusColors[index.status].bg} ${statusColors[index.status].text}`}>
|
|
{statusColors[index.status].label}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-1 justify-end">
|
|
{index.trend && trendIcons[index.trend]}
|
|
<span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{index.updateFrequency === 'realtime' ? '实时' :
|
|
index.updateFrequency === 'daily' ? '每日' :
|
|
index.updateFrequency === 'weekly' ? '每周' :
|
|
index.updateFrequency === 'monthly' ? '每月' : '每季度'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 mt-3 pt-3 border-t border-gray-200 dark:border-slate-700/50">
|
|
<div className="flex items-center gap-1 text-sm">
|
|
<Star className={`w-4 h-4 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
|
|
<span className={isDark ? 'text-slate-400' : 'text-gray-500'}>权重: {index.weight * 100}%</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{index.tags.slice(0, 3).map(tag => (
|
|
<span
|
|
key={tag}
|
|
className={`px-2 py-0.5 rounded text-xs ${
|
|
isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
|
|
}`}
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
/* 体系管理视图 */
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{mockSystems.map(system => (
|
|
<div
|
|
key={system.id}
|
|
className={`p-5 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-3 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-50'}`}>
|
|
<BarChart3 className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
|
|
</div>
|
|
<div>
|
|
<h3 className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{system.name}
|
|
</h3>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{system.category}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
|
system.status === 'active' ? 'bg-green-500/20 text-green-400' :
|
|
system.status === 'draft' ? 'bg-yellow-500/20 text-yellow-400' :
|
|
'bg-gray-500/20 text-gray-400'
|
|
}`}>
|
|
{system.status === 'active' ? '使用中' : system.status === 'draft' ? '草稿' : '已归档'}
|
|
</span>
|
|
</div>
|
|
<p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{system.description}
|
|
</p>
|
|
<div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-slate-700">
|
|
<span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
包含 {system.indices.length} 个指标
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<button className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
|
<Edit className="w-4 h-4" />
|
|
</button>
|
|
<button className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
|
|
<Copy className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 指标详情弹窗 */}
|
|
{selectedIndex && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setSelectedIndex(null)}>
|
|
<div
|
|
className={`w-full max-w-3xl rounded-2xl ${isDark ? 'bg-slate-800' : 'bg-white'} shadow-xl max-h-[90vh] overflow-y-auto`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="sticky top-0 p-6 border-b ${isDark ? 'border-slate-700 bg-slate-800' : 'border-gray-200 bg-white'}">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-3 rounded-lg ${typeColors[selectedIndex.type]}`}>
|
|
{selectedIndex.type === 'quantitative' ? <BarChart3 className="w-5 h-5" /> :
|
|
selectedIndex.type === 'qualitative' ? <PieChart className="w-5 h-5" /> :
|
|
<Activity className="w-5 h-5" />}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{selectedIndex.name}
|
|
</h2>
|
|
<span className={`px-2 py-0.5 rounded text-xs ${typeColors[selectedIndex.type]}`}>
|
|
{typeLabels[selectedIndex.type]}
|
|
</span>
|
|
</div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{selectedIndex.category}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setSelectedIndex(null)}
|
|
className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}
|
|
>
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>指标描述</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.description}</p>
|
|
</div>
|
|
|
|
{selectedIndex.calculationMethod && (
|
|
<div className={`p-4 rounded-lg ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>计算方法</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-700'}>{selectedIndex.calculationMethod}</p>
|
|
</div>
|
|
)}
|
|
|
|
{selectedIndex.dataSource && (
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>数据来源</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.dataSource}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>权重</p>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{selectedIndex.weight * 100}%
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新频率</p>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
{frequencyLabels[selectedIndex.updateFrequency]}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>状态</p>
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[selectedIndex.status].bg} ${statusColors[selectedIndex.status].text}`}>
|
|
{statusColors[selectedIndex.status].label}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>趋势</p>
|
|
<div className="flex items-center gap-2">
|
|
{trendIcons[selectedIndex.trend]}
|
|
<span className={isDark ? 'text-white' : 'text-gray-900'}>
|
|
{selectedIndex.trend === 'up' ? '上升' : selectedIndex.trend === 'down' ? '下降' : '稳定'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{selectedIndex.baseline !== undefined && (
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>基线值</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.baseline}</p>
|
|
</div>
|
|
)}
|
|
{selectedIndex.target !== undefined && (
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>目标值</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.target}</p>
|
|
</div>
|
|
)}
|
|
{selectedIndex.currentValue !== undefined && (
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>当前值</p>
|
|
<p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{selectedIndex.currentValue}</p>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>作者</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.author}</p>
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新时间</p>
|
|
<p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.updatedAt}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>标签</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedIndex.tags.map(tag => (
|
|
<span
|
|
key={tag}
|
|
className={`px-3 py-1 rounded-full text-sm ${
|
|
isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
|
|
}`}
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{selectedIndex.relatedIndices.length > 0 && (
|
|
<div>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>关联指标</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedIndex.relatedIndices.map(relatedId => {
|
|
const related = mockIndices.find(i => i.id === relatedId);
|
|
return related ? (
|
|
<span
|
|
key={relatedId}
|
|
className={`px-3 py-1 rounded-full text-sm cursor-pointer ${
|
|
isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-50 text-amber-600'
|
|
}`}
|
|
>
|
|
{related.name}
|
|
</span>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className={`p-6 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'} flex justify-end gap-3`}>
|
|
<button
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
<Download className="w-4 h-4 inline mr-2" />
|
|
导出
|
|
</button>
|
|
<button
|
|
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
|
|
isDark ? 'bg-amber-600 hover:bg-amber-500 text-white' : 'bg-amber-500 hover:bg-amber-600 text-white'
|
|
}`}
|
|
>
|
|
<Edit className="w-4 h-4 inline mr-2" />
|
|
编辑
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EvaluationIndexResourceManagement;
|