AI/main.html at main · lunamisa/AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 场景评估系统</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background-color: #06090f; color: #e6edf3; min-height: 100vh; }
        .tech-card {
            background: rgba(22, 27, 34, 0.8);
            border: 1px solid #30363d;
            border-top: 2px solid #00f2ff;
            backdrop-filter: blur(4px);
        }
        .glitch-text { text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }
    </style>
</head>
<body class="p-8">
    <header class="flex justify-between items-center mb-10 border-b border-gray-800 pb-6">
        <div>
            <h1 class="text-3xl font-bold glitch-text text-cyan-400">AI SCENARIO EVALUATION</h1>
            <p class="text-gray-400 text-sm mt-1">AI 场景创新评估实验室</p>
        </div>
    </header>

    <div class="mb-10 p-6 rounded-xl border-2 border-dashed border-gray-700">
        <h3 class="text-cyan-400 mb-4 font-bold text-sm">📡 数据更新终端 (CSV格式)</h3>
        <textarea id="csvInput" class="w-full bg-black/50 border border-gray-700 rounded p-3 text-xs font-mono text-cyan-200 focus:outline-none focus:border-cyan-500" rows="3"></textarea>
        <button onclick="processData()" class="mt-4 bg-cyan-600 hover:bg-cyan-500 text-white px-6 py-2 rounded-full text-sm font-bold transition-all">
            立即生成/更新分析图
        </button>
    </div>

    <div id="dashboard" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>

    <script>
        // 初始数据
        let initialData = `AI场景,战略锚定,价值评估,组织适配,可行指数
幻觉训练系统,5.00,4.00,3.00,4.00
销售AI自动报价助手,3.00,5.00,5.00,5.00
密码自助查询系统,4.00,5.00,4.00,4.00`;

        document.getElementById('csvInput').value = initialData;

        function processData() {
            const text = document.getElementById('csvInput').value;
            const lines = text.trim().split('\n');
            const dashboard = document.getElementById('dashboard');
            dashboard.innerHTML = '';

            for (let i = 1; i < lines.length; i++) {
                const row = lines[i].split(',');
                if (row.length >= 5) {
                    createCard(row[0], [row[1], row[2], row[3], row[4]], i);
                }
            }
        }

        function createCard(name, scores, index) {
            const cardId = `chart-${index}`;
            const dashboard = document.getElementById('dashboard');

            const cardHtml = `
                <div class="tech-card p-6 rounded-2xl">
                    <h2 class="text-xl font-bold text-white mb-2">${name}</h2>
                    <div id="${cardId}" style="width: 100%; height: 320px;"></div>
                </div>
            `;
            dashboard.insertAdjacentHTML('beforeend', cardHtml);

            const chart = echarts.init(document.getElementById(cardId));
            const option = {
                radar: {
                    // 【关键修改1】缩小半径从 75% 降到 55%，防止文字遮挡
                    radius: '55%',
                    // 【关键修改2】中心点微调，给顶部留出更多空间
                    center: ['50%', '55%'],
                    indicator: [
                        { name: '战略锚定', max: 5 },
                        { name: '价值评估', max: 5 },
                        { name: '组织适配', max: 5 },
                        { name: '可行指数', max: 5 }
                    ],
                    axisName: {
                        color: '#8b949e',
                        fontSize: 12,
                        // 【关键修改3】使用 formatter 在名称后面显示分数
                        formatter: (name, indicator) => {
                            const val = scores[['战略锚定','价值评估','组织适配','可行指数'].indexOf(name)];
                            return `${name}\n{score|${val}}`;
                        },
                        rich: {
                            score: {
                                color: '#00f2ff',
                                fontSize: 16,
                                fontWeight: 'bold',
                                padding: [4, 0]
                            }
                        }
                    },
                    splitLine: { lineStyle: { color: 'rgba(48, 54, 61, 0.8)' } },
                    splitArea: { show: false },
                    axisLine: { lineStyle: { color: 'rgba(48, 54, 61, 0.8)' } }
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: scores,
                        name: '维度评分',
                        itemStyle: { color: '#00f2ff' },
                        lineStyle: { width: 2 },
                        areaStyle: { color: 'rgba(0, 242, 255, 0.2)' },
                        symbol: 'circle',
                        symbolSize: 6
                    }]
                }]
            };
            chart.setOption(option);
        }

        processData();
        window.onresize = function() {
            const allCharts = document.querySelectorAll('[id^="chart-"]');
            allCharts.forEach(c => echarts.getInstanceByDom(c).resize());
        };
    </script>
</body>
</html>