Hugging Face's logo

Spaces:
maomaobj
/
rencai1
Running

App Files Community
maomaobj commited on
Commit
dfa8495
·
verified ·
1 Parent(s): 63df1de

请为我设计一个“医学机构展示页面”，用于在临床试验知识平台中展示全国或区域内的医疗研究机构信息。页面需支持多维筛选、品牌展示、机构实力评分、研究方向标签化和合作推荐功能。整体风格专业清晰、蓝白配色，参考医疗科研信息系统，具备良好的展示性和交互性。 页面结构如下： 1️⃣ 页面顶部（概览 + 搜索） 页面主标题：“医学机构库” 子标题说明：“展示临床研究机构在科研能力、专业方向和试验经验方面的综合实力” 一个搜索框 + 快速筛选区域（可筛地区、专病方向） 2️⃣ 左侧垂直筛选栏（支持多选） 地区筛选：按省份/城市分层 机构类型：三级医院 / 医学院附属 / 疾控中心 / 民营机构 / 药物研发基地 专病方向：肿瘤 / 心血管 / 内分泌 / 精神神经 / 儿科 等 研究能力等级：I级 / II级 / III级（可依据内评标准） 数据中心接入能力：EDC / eSource / 远程稽查支持 3️⃣ 主内容区域：机构列表展示（卡片式） 每家机构以卡片形式展示，内容包括： 医院/研究中心名称（如：北京协和医院） LOGO 或代表性建筑图片 所在地区（城市 + 医疗区域标签） 机构等级：三级甲等 / 国家临床重点专科 核心专病方向标签（如：乳腺癌 / 胰腺癌 / 自身免疫疾病） 历史参与项目数（如：“累计完成62项I–III期试验”） 平均入组周期 / 伦理通过时间（如有） 合作评分（⭐️⭐️⭐️⭐️） 卡片下方可设置操作按钮：[查看详情] [推荐专家] [收藏] 4️⃣ 单个机构详情弹窗/页面（建议跳转） 点击某一机构后跳转详情页（可在提示词中表明页面联动），包含： 机构简介 研究平台/伦理信息/影像中心等基础能力 已完成的代表性项目 当前专家团队列表 项目管理联系人信息 智能匹配结果：适合哪些项目阶段 / 研究病种 5️⃣ 数据可视化推荐模块（可选） 放在页面右上角或顶部横幅： 地图模式切换按钮：“查看地图” → 全国医学机构热力图 数据图表： “热门研究方向机构数量分布” “入组效率前10机构柱状图” 6️⃣ 智能推荐区（页面底部） 模块名称：“智能推荐机构” 推荐理由自动生成，如： “推荐：华西医院（肺癌方向，PI经验丰富，伦理通过时间短）” “推荐：XX大学附属医院（心血管重点试验基地）” 💡 页面风格建议 蓝白灰主色调，卡片边角圆润、图标简洁 使用图标/标签辅助识别（如🏥代表医院，📍代表地区） 强调“机构实力”、“研究方向”、“合作便利度”可视化 - Follow Up Deployment

Browse files
Files changed (2) hide show
  1. index.html +688 -214
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,271 +3,745 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>人才库建设与分析服务体系</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
9
  <script>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
  colors: {
14
- primary: '#0c4a6e',
15
- secondary: '#0284c7',
16
- accent: '#0ea5e9',
17
- light: '#e0f2fe',
18
- dark: '#082f49'
19
  }
20
  }
21
  }
22
  }
23
  </script>
24
  <style>
25
- @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
26
-
27
- body {
28
- font-family: 'Noto Sans SC', sans-serif;
29
- background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
30
- min-height: 100vh;
31
  }
32
-
33
- .card {
34
- transition: all 0.3s ease;
35
- transform-style: preserve-3d;
36
- perspective: 1000px;
37
- border-radius: 16px;
38
- overflow: hidden;
39
- box-shadow: 0 10px 30px rgba(2, 132, 199, 0.1);
40
  }
41
-
42
- .card:hover {
43
- transform: translateY(-10px);
44
- box-shadow: 0 15px 35px rgba(2, 132, 199, 0.2);
45
  }
46
-
47
- .card-content {
48
- position: relative;
49
- z-index: 2;
50
  }
51
-
52
- .card-icon {
53
- font-size: 2.5rem;
54
- color: #0ea5e9;
55
- background: rgba(14, 165, 233, 0.1);
56
- border-radius: 50%;
57
- width: 80px;
58
- height: 80px;
59
- display: flex;
60
  align-items: center;
61
- justify-content: center;
62
- margin-bottom: 1.5rem;
63
- }
64
-
65
- .keyword-chip {
66
- display: inline-block;
67
- background: rgba(14, 165, 233, 0.15);
68
- color: #0c4a6e;
69
- border-radius: 20px;
70
- padding: 4px 12px;
71
- margin: 4px;
72
- font-size: 0.8rem;
73
- font-weight: 500;
74
- }
75
-
76
- .feature-list li {
77
- position: relative;
78
- padding-left: 1.5rem;
79
- margin-bottom: 0.5rem;
80
- }
81
-
82
- .feature-list li:before {
83
- content: "✓";
84
- position: absolute;
85
- left: 0;
86
- color: #0ea5e9;
87
- font-weight: bold;
88
- }
89
-
90
- .header-gradient {
91
- background: linear-gradient(90deg, #0c4a6e 0%, #0284c7 100%);
92
- }
93
-
94
- .tech-pattern {
95
- position: absolute;
96
- top: 0;
97
- left: 0;
98
- width: 100%;
99
- height: 100%;
100
- background-image:
101
- radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 20%),
102
- radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.05) 0%, transparent 20%);
103
- z-index: 1;
104
  }
105
-
106
- .pulse {
107
- animation: pulse 2s infinite;
108
- }
109
-
110
- @keyframes pulse {
111
- 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
112
- 70% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); }
113
- 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
114
  }
115
  </style>
116
  </head>
117
- <body class="py-8 px-4 sm:px-8">
118
- <!-- 头部标题 -->
119
- <header class="max-w-6xl mx-auto mb-12 text-center">
120
- <div class="header-gradient rounded-2xl p-8 relative overflow-hidden">
121
- <div class="tech-pattern"></div>
122
- <h1 class="text-3xl md:text-4xl font-bold text-white mb-4 relative z-10">人才库建设与分析服务体系</h1>
123
- <p class="text-light text-xl opacity-90 relative z-10">构建全景人才智能服务平台，赋能科技创新与人才发展</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </div>
125
  </header>
126
-
127
- <!-- 模块卡片区域 -->
128
- <main class="max-w-6xl mx-auto">
129
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
130
- <!-- 卡片1：人才库 -->
131
- <div class="card bg-white">
132
- <div class="card-content p-6 relative">
133
- <div class="card-icon">
134
- <i class="fas fa-database"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
- <h2 class="text-xl font-bold text-primary mb-3">人才库（全周期档案）</h2>
137
- <div class="mb-4">
138
- <span class="keyword-chip">简历</span>
139
- <span class="keyword-chip">科研成果</span>
140
- <span class="keyword-chip">项目</span>
141
- <span class="keyword-chip">奖励</span>
142
- <span class="keyword-chip">完整画像</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
  </div>
144
- <p class="text-gray-700 mb-4">构建全方位人才数字档案，实现人才全生命周期管理，为精准识别与人才发展提供数据基础。</p>
145
- <h3 class="font-semibold text-secondary mb-2">用户功能：</h3>
146
- <ul class="feature-list text-gray-600">
147
- <li>智能搜索与筛选</li>
148
- <li>简历下载与管理</li>
149
- <li>人才关注与追踪</li>
150
- <li>数据补全与更新</li>
151
- </ul>
152
  </div>
153
  </div>
154
-
155
- <!-- 卡片2：机构库模型 -->
156
- <div class="card bg-white">
157
- <div class="card-content p-6 relative">
158
- <div class="card-icon">
159
- <i class="fas fa-sitemap"></i>
 
 
 
 
 
 
 
 
 
 
 
 
160
  </div>
161
- <h2 class="text-xl font-bold text-primary mb-3">机构库模型</h2>
162
- <div class="mb-4">
163
- <span class="keyword-chip">高校</span>
164
- <span class="keyword-chip">研究所</span>
165
- <span class="keyword-chip">企业</span>
166
- <span class="keyword-chip">科研能力谱系</span>
167
- <span class="keyword-chip">合作关系图</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
- <p class="text-gray-700 mb-4">构建科研机构知识图谱，可视化展示机构间的合作网络与科研能力分布，助力科研生态分析。</p>
170
- <h3 class="font-semibold text-secondary mb-2">用户功能：</h3>
171
- <ul class="feature-list text-gray-600">
172
- <li>机构地图可视化</li>
173
- <li>合作网络图谱分析</li>
174
- <li>科研产出对比</li>
175
- <li>机构能力评估</li>
176
- </ul>
177
  </div>
178
  </div>
179
-
180
- <!-- 卡片3：人才地图 -->
181
- <div class="card bg-white">
182
- <div class="card-content p-6 relative">
183
- <div class="card-icon">
184
- <i class="fas fa-map-marked-alt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  </div>
186
- <h2 class="text-xl font-bold text-primary mb-3">人才地图</h2>
187
- <div class="mb-4">
188
- <span class="keyword-chip">地理+领域分布</span>
189
- <span class="keyword-chip">级别标签</span>
190
- <span class="keyword-chip">集中度分析</span>
191
- <span class="keyword-chip">人才流动</span>
 
 
192
  </div>
193
- <p class="text-gray-700 mb-4">多维展示人才地理与领域分布，分析人才流动趋势与区域集中度，为人才布局提供决策依据。</p>
194
- <h3 class="font-semibold text-secondary mb-2">用户功能：</h3>
195
- <ul class="feature-list text-gray-600">
196
- <li>区域热力图分析</li>
197
- <li>人才迁移路径追踪</li>
198
- <li>分布趋势可视化</li>
199
- <li>人才密度分析</li>
200
- </ul>
201
  </div>
202
  </div>
203
-
204
- <!-- 卡片4：项目匹配 -->
205
- <div class="card bg-white">
206
- <div class="card-content p-6 relative">
207
- <div class="card-icon">
208
- <i class="fas fa-project-diagram"></i>
 
 
 
 
 
 
 
 
 
 
209
  </div>
210
- <h2 class="text-xl font-bold text-primary mb-3">项目匹配</h2>
211
- <div class="mb-4">
212
- <span class="keyword-chip">任务识别</span>
213
- <span class="keyword-chip">关键词提取</span>
214
- <span class="keyword-chip">语义向量</span>
215
- <span class="keyword-chip">推荐引擎</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
- <p class="text-gray-700 mb-4">基于AI的智能匹配引擎，精准连接项目需求与人才专长，大幅提升人才-项目对接效率。</p>
218
- <h3 class="font-semibold text-secondary mb-2">用户功能：</h3>
219
- <ul class="feature-list text-gray-600">
220
- <li>一键上传任务书</li>
221
- <li>智能匹配推荐人才</li>
222
- <li>导出匹配名单</li>
223
- <li>匹配度分析报告</li>
224
- </ul>
225
  </div>
226
  </div>
227
-
228
- <!-- 卡片5：智能分析决策 -->
229
- <div class="card bg-white">
230
- <div class="card-content p-6 relative">
231
- <div class="card-icon">
232
- <i class="fas fa-brain"></i>
 
 
 
 
 
 
 
 
233
  </div>
234
- <h2 class="text-xl font-bold text-primary mb-3">智能分析决策</h2>
235
- <div class="mb-4">
236
- <span class="keyword-chip">人才结构报告</span>
237
- <span class="keyword-chip">趋势预测</span>
238
- <span class="keyword-chip">政策推荐</span>
239
- <span class="keyword-chip">人力布局优化</span>
 
 
 
240
  </div>
241
- <p class="text-gray-700 mb-4">基于大数据分析的智能决策支持系统，提供人才发展预测与政策建议，赋能科学决策。</p>
242
- <h3 class="font-semibold text-secondary mb-2">用户功能：</h3>
243
- <ul class="feature-list text-gray-600">
244
- <li>自动生成分析报告</li>
245
- <li>人才发展规划建议</li>
246
- <li>招才引智方案设计</li>
247
- <li>政策效果模拟</li>
248
- </ul>
249
  </div>
250
  </div>
251
-
252
- <!-- 总结卡片 -->
253
- <div class="card bg-gradient-to-br from-primary to-secondary text-white col-span-1 md:col-span-2 lg:col-span-3">
254
- <div class="card-content p-8 text-center flex flex-col items-center justify-center h-full">
255
- <div class="card-icon bg-white bg-opacity-20 mb-6">
256
- <i class="fas fa-lightbulb"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
257
  </div>
258
- <h2 class="text-2xl font-bold mb-4">人才是科技创新第一资源</h2>
259
- <p class="text-xl mb-6 max-w-2xl">我们为您构建全景人才智能服务平台，实现人才数据的深度挖掘与智能应用，赋能科技创新与区域发展</p>
260
- <div class="pulse bg-white text-primary font-bold py-3 px-8 rounded-full inline-block">
261
- 开启人才智能服务新时代
 
 
 
 
 
 
262
  </div>
263
  </div>
264
  </div>
265
  </div>
266
  </main>
267
-
268
  <!-- 底部信息 -->
269
- <footer class="max-w-6xl mx-auto mt-12 text-center text-gray-600">
270
- <p>人才库建设与分析服务体系 © 2023 版权所有 | 政府/园区/科研单位人才服务解决方案</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=maomaobj/rencai1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
273
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>医学机构库 - 临床试验知识平台</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
10
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
  <script>
13
  tailwind.config = {
14
  theme: {
15
  extend: {
16
  colors: {
17
+ medblue: '#0d7ea0',
18
+ lightblue: '#e6f3f8',
19
+ darkblue: '#085b75',
20
+ accent: '#4cb7c8'
 
21
  }
22
  }
23
  }
24
  }
25
  </script>
26
  <style>
27
+ .map-container { height: 300px; }
28
+ .institution-card {
29
+ transition: transform 0.3s, box-shadow 0.3s;
30
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
 
 
31
  }
32
+ .institution-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
35
  }
36
+ .filter-section {
37
+ transition: all 0.3s ease;
 
 
38
  }
39
+ .filter-section.collapsed .filter-content {
40
+ max-height: 0;
41
+ overflow: hidden;
 
42
  }
43
+ .tag {
44
+ display: inline-flex;
 
 
 
 
 
 
 
45
  align-items: center;
46
+ padding: 3px 8px;
47
+ border-radius: 12px;
48
+ font-size: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
+ .card-divider {
51
+ height: 1px;
52
+ background: linear-gradient(to right, transparent, rgba(13, 126, 160, 0.3), transparent);
 
 
 
 
 
 
53
  }
54
  </style>
55
  </head>
56
+ <body class="bg-gray-50 text-gray-700">
57
+ <!-- 头部区域 -->
58
+ <header class="bg-white shadow-sm">
59
+ <div class="container mx-auto px-4 py-6">
60
+ <div class="flex flex-col md:flex-row justify-between items-center gap-6">
61
+ <div>
62
+ <h1 class="text-3xl font-bold text-medblue">医学机构库</h1>
63
+ <p class="text-gray-600 mt-2">展示临床研究机构在科研能力、专业方向和试验经验方面的综合实力</p>
64
+ </div>
65
+ <div class="flex items-center">
66
+ <div id="visualization-toggle" class="mr-4 hidden md:block">
67
+ <button class="bg-medblue hover:bg-darkblue text-white px-4 py-2 rounded-lg flex items-center">
68
+ <i class="fas fa-map-marked-alt mr-2"></i>查看地图
69
+ </button>
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- 搜索和快速筛选 -->
75
+ <div class="mt-6">
76
+ <div class="relative">
77
+ <input type="text" placeholder="搜索机构名称、城市或专病方向..."
78
+ class="w-full p-4 pr-12 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-medblue focus:border-transparent">
79
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-medblue text-white p-2 rounded-lg hover:bg-darkblue">
80
+ <i class="fas fa-search"></i>
81
+ </button>
82
+ </div>
83
+
84
+ <div class="mt-4 flex flex-wrap gap-2">
85
+ <div class="text-gray-600 flex items-center mr-2">
86
+ <i class="fas fa-filter mr-1"></i>快速筛选：
87
+ </div>
88
+ <button class="bg-lightblue text-medblue px-3 py-1 rounded-lg text-sm flex items-center">
89
+ <i class="fas fa-map-marker-alt mr-1"></i>北京
90
+ </button>
91
+ <button class="bg-lightblue text-medblue px-3 py-1 rounded-lg text-sm flex items-center">
92
+ <i class="fas fa-stethoscope mr-1"></i>肿瘤
93
+ </button>
94
+ <button class="bg-lightblue text-medblue px-3 py-1 rounded-lg text-sm flex items-center">
95
+ <i class="fas fa-star mr-1"></i>Ⅲ级机构
96
+ </button>
97
+ </div>
98
+ </div>
99
  </div>
100
  </header>
101
+
102
+ <!-- 主体内容区域 -->
103
+ <main class="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
104
+ <!-- 左侧筛选栏 -->
105
+ <aside class="w-full lg:w-1/4 bg-white rounded-xl shadow-sm p-4 h-fit sticky top-4">
106
+ <h2 class="text-xl font-semibold text-medblue mb-4">筛选条件</h2>
107
+
108
+ <!-- 地区筛选 -->
109
+ <div class="filter-section mb-4">
110
+ <div class="flex justify-between items-center cursor-pointer filter-header">
111
+ <h3 class="font-medium text-gray-700"><i class="fas fa-map-marker-alt mr-2 text-medblue"></i>地区</h3>
112
+ <i class="fas fa-chevron-down text-gray-400"></i>
113
+ </div>
114
+ <div class="filter-content mt-3 ml-1">
115
+ <div class="space-y-2">
116
+ <div>
117
+ <button class="flex items-center justify-between w-full text-left py-1 px-2 rounded hover:bg-lightblue">
118
+ <span>北京市</span>
119
+ <span class="text-xs text-gray-500 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center">38</span>
120
+ </button>
121
+ </div>
122
+ <div>
123
+ <button class="flex items-center justify-between w-full text-left py-1 px-2 rounded hover:bg-lightblue">
124
+ <span>上海市</span>
125
+ <span class="text-xs text-gray-500 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center">32</span>
126
+ </button>
127
+ </div>
128
+ <div>
129
+ <button class="flex items-center justify-between w-full text-left py-1 px-2 rounded hover:bg-lightblue">
130
+ <span>广东省</span>
131
+ <span class="text-xs text-gray-500 bg-gray-100 rounded-full w-6 h-6 flex items-center justify-center">28</span>
132
+ </button>
133
+ </div>
134
+ <button class="text-medblue text-sm mt-2 flex items-center">
135
+ <i class="fas fa-plus-circle mr-1"></i> 全部省份
136
+ </button>
137
  </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- 机构类型 -->
142
+ <div class="filter-section mb-4">
143
+ <div class="flex justify-between items-center cursor-pointer filter-header">
144
+ <h3 class="font-medium text-gray-700"><i class="fas fa-hospital mr-2 text-medblue"></i>机构类型</h3>
145
+ <i class="fas fa-chevron-down text-gray-400"></i>
146
+ </div>
147
+ <div class="filter-content mt-3 ml-1">
148
+ <div class="space-y-2">
149
+ <label class="flex items-center">
150
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
151
+ <span class="ml-2">三级医院</span>
152
+ </label>
153
+ <label class="flex items-center">
154
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
155
+ <span class="ml-2">医学院附属</span>
156
+ </label>
157
+ <label class="flex items-center">
158
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
159
+ <span class="ml-2">疾控中心</span>
160
+ </label>
161
+ <label class="flex items-center">
162
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
163
+ <span class="ml-2">民营机构</span>
164
+ </label>
165
+ <label class="flex items-center">
166
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
167
+ <span class="ml-2">药物研发基地</span>
168
+ </label>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- 专病方向 -->
174
+ <div class="filter-section mb-4">
175
+ <div class="flex justify-between items-center cursor-pointer filter-header">
176
+ <h3 class="font-medium text-gray-700"><i class="fas fa-disease mr-2 text-medblue"></i>专病方向</h3>
177
+ <i class="fas fa-chevron-down text-gray-400"></i>
178
+ </div>
179
+ <div class="filter-content mt-3 ml-1">
180
+ <div class="flex flex-wrap gap-2">
181
+ <button class="tag bg-blue-100 text-blue-800">肿瘤</button>
182
+ <button class="tag bg-red-100 text-red-800">心血管</button>
183
+ <button class="tag bg-green-100 text-green-800">内分泌</button>
184
+ <button class="tag bg-purple-100 text-purple-800">精神神经</button>
185
+ <button class="tag bg-yellow-100 text-yellow-800">儿科</button>
186
+ <button class="tag bg-teal-100 text-teal-800">呼吸</button>
187
+ <button class="tag bg-pink-100 text-pink-800">消化</button>
188
+ <button class="tag bg-indigo-100 text-indigo-800">免疫疾病</button>
189
  </div>
 
 
 
 
 
 
 
 
190
  </div>
191
  </div>
192
+
193
+ <!-- 研究能力等级 -->
194
+ <div class="filter-section mb-4">
195
+ <div class="flex justify-between items-center cursor-pointer filter-header">
196
+ <h3 class="font-medium text-gray-700"><i class="fas fa-chart-line mr-2 text-medblue"></i>研究能力等级</h3>
197
+ <i class="fas fa-chevron-down text-gray-400"></i>
198
+ </div>
199
+ <div class="filter-content mt-3 ml-1">
200
+ <div class="flex flex-wrap gap-2">
201
+ <button class="tag bg-gray-100 text-gray-800 flex items-center">
202
+ <span class="w-3 h-3 bg-gray-400 rounded-full mr-1"></span>Ⅰ级
203
+ </button>
204
+ <button class="tag bg-blue-100 text-blue-800 flex items-center">
205
+ <span class="w-3 h-3 bg-medblue rounded-full mr-1"></span>Ⅱ级
206
+ </button>
207
+ <button class="tag bg-medblue text-white flex items-center">
208
+ <span class="w-3 h-3 bg-white rounded-full mr-1"></span>Ⅲ级
209
+ </button>
210
  </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- 数据中心接入能力 -->
215
+ <div class="filter-section">
216
+ <div class="flex justify-between items-center cursor-pointer filter-header">
217
+ <h3 class="font-medium text-gray-700"><i class="fas fa-database mr-2 text-medblue"></i>数据中心接入能力</h3>
218
+ <i class="fas fa-chevron-down text-gray-400"></i>
219
+ </div>
220
+ <div class="filter-content mt-3 ml-1">
221
+ <div class="space-y-2">
222
+ <label class="flex items-center">
223
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
224
+ <span class="ml-2">EDC接入</span>
225
+ </label>
226
+ <label class="flex items-center">
227
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
228
+ <span class="ml-2">eSource支持</span>
229
+ </label>
230
+ <label class="flex items-center">
231
+ <input type="checkbox" class="rounded text-medblue focus:ring-medblue">
232
+ <span class="ml-2">远程稽查支持</span>
233
+ </label>
234
  </div>
 
 
 
 
 
 
 
 
235
  </div>
236
  </div>
237
+
238
+ <button class="w-full mt-6 bg-medblue text-white py-2 rounded-lg hover:bg-darkblue transition">
239
+ <i class="fas fa-filter mr-2"></i>应用筛选条件
240
+ </button>
241
+ </aside>
242
+
243
+ <!-- 主内容区域 -->
244
+ <div class="w-full lg:w-3/4">
245
+ <!-- 地图热力图容器（默认隐藏） -->
246
+ <div id="map-view" class="hidden bg-white rounded-xl shadow-sm p-4 mb-6">
247
+ <div class="flex justify-between items-center mb-4">
248
+ <h2 class="text-xl font-semibold text-medblue">全国医学机构分布热力图</h2>
249
+ <button id="close-map" class="text-gray-500 hover:text-medblue">
250
+ <i class="fas fa-times"></i> 关闭地图
251
+ </button>
252
+ </div>
253
+ <div id="map" class="map-container rounded-lg"></div>
254
+ </div>
255
+
256
+ <!-- 结果统计和排序 -->
257
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
258
+ <div class="flex flex-col md:flex-row justify-between items-center">
259
+ <div>
260
+ <span class="text-gray-600">找到</span>
261
+ <span class="font-bold text-medblue text-lg">58</span>
262
+ <span class="text-gray-600">家医学机构</span>
263
  </div>
264
+ <div class="flex items-center mt-2 md:mt-0">
265
+ <span class="text-gray-600 mr-2">排序：</span>
266
+ <select class="border rounded-lg p-2 focus:ring-medblue focus:border-medblue">
267
+ <option>合作评分最高</option>
268
+ <option>科研能力最强</option>
269
+ <option>入组效率最高</option>
270
+ <option>临床试验最多</option>
271
+ </select>
272
  </div>
 
 
 
 
 
 
 
 
273
  </div>
274
  </div>
275
+
276
+ <!-- 机构卡片列表 -->
277
+ <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8">
278
+ <!-- 机构卡片示例 1 -->
279
+ <div class="institution-card bg-white rounded-xl overflow-hidden">
280
+ <div class="relative">
281
+ <div class="h-36 bg-gradient-to-r from-medblue to-cyan-500 flex items-center justify-center">
282
+ <div class="bg-white rounded-full p-3 w-20 h-20 flex items-center justify-center">
283
+ <i class="fas fa-hospital text-medblue text-4xl"></i>
284
+ </div>
285
+ </div>
286
+ <div class="absolute top-3 right-3">
287
+ <span class="bg-white text-medblue font-semibold px-3 py-1 rounded-full text-sm flex items-center">
288
+ <span class="w-2 h-2 bg-medblue rounded-full mr-1"></span>Ⅲ级机构
289
+ </span>
290
+ </div>
291
  </div>
292
+
293
+ <div class="p-4">
294
+ <div class="flex justify-between items-start">
295
+ <h3 class="text-lg font-bold text-medblue">北京协和医院</h3>
296
+ <div class="flex text-yellow-400">
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star"></i>
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star-half-alt"></i>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="flex items-center text-gray-600 mt-1">
306
+ <i class="fas fa-map-marker-alt mr-2"></i>
307
+ <span>北京市 | 三级甲等 | 国家临床重点专科</span>
308
+ </div>
309
+
310
+ <div class="mt-4">
311
+ <div class="font-medium text-sm">核心专病方向：</div>
312
+ <div class="flex flex-wrap gap-1 mt-2">
313
+ <span class="tag bg-rose-100 text-rose-800">乳腺癌</span>
314
+ <span class="tag bg-rose-100 text-rose-800">胰腺癌</span>
315
+ <span class="tag bg-emerald-100 text-emerald-800">自身免疫疾病</span>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="card-divider my-4"></div>
320
+
321
+ <div class="grid grid-cols-2 gap-3 text-sm">
322
+ <div class="flex flex-col">
323
+ <span class="text-gray-500">完成试验</span>
324
+ <span class="font-semibold text-medblue">62项</span>
325
+ </div>
326
+ <div class="flex flex-col">
327
+ <span class="text-gray-500">平均入组</span>
328
+ <span class="font-semibold text-medblue">21周</span>
329
+ </div>
330
+ <div class="flex flex-col">
331
+ <span class="text-gray-500">伦理通过</span>
332
+ <span class="font-semibold text-medblue">平均4.5周</span>
333
+ </div>
334
+ <div class="flex flex-col">
335
+ <span class="text-gray-500">支持远程</span>
336
+ <span class="font-semibold text-medblue">已开通</span>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="flex justify-between mt-5">
341
+ <button class="text-medblue hover:text-darkblue text-sm font-medium">
342
+ <i class="far fa-bookmark mr-1"></i>收藏
343
+ </button>
344
+ <button class="bg-medblue text-white px-4 py-1 rounded-lg text-sm hover:bg-darkblue">
345
+ 查看详情 <i class="fas fa-arrow-right ml-1"></i>
346
+ </button>
347
+ <button class="text-medblue hover:text-darkblue text-sm font-medium">
348
+ 推荐专家 <i class="fas fa-user-md ml-1"></i>
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- 机构卡片示例 2 -->
355
+ <div class="institution-card bg-white rounded-xl overflow-hidden">
356
+ <div class="relative">
357
+ <div class="h-36 bg-gradient-to-r from-accent to-cyan-400 flex items-center justify-center">
358
+ <div class="bg-white rounded-full p-3 w-20 h-20 flex items-center justify-center">
359
+ <i class="fas fa-hospital text-accent text-4xl"></i>
360
+ </div>
361
+ </div>
362
+ <div class="absolute top-3 right-3">
363
+ <span class="bg-white text-accent font-semibold px-3 py-1 rounded-full text-sm flex items-center">
364
+ <span class="w-2 h-2 bg-accent rounded-full mr-1"></span>Ⅱ级机构
365
+ </span>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="p-4">
370
+ <div class="flex justify-between items-start">
371
+ <h3 class="text-lg font-bold text-medblue">中山大学附属肿瘤医院</h3>
372
+ <div class="flex text-yellow-400">
373
+ <i class="fas fa-star"></i>
374
+ <i class="fas fa-star"></i>
375
+ <i class="fas fa-star"></i>
376
+ <i class="fas fa-star"></i>
377
+ <i class="far fa-star"></i>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="flex items-center text-gray-600 mt-1">
382
+ <i class="fas fa-map-marker-alt mr-2"></i>
383
+ <span>广州市 | 三级甲等 | 肿瘤专科</span>
384
+ </div>
385
+
386
+ <div class="mt-4">
387
+ <div class="font-medium text-sm">核心专病方向：</div>
388
+ <div class="flex flex-wrap gap-1 mt-2">
389
+ <span class="tag bg-rose-100 text-rose-800">肺癌</span>
390
+ <span class="tag bg-rose-100 text-rose-800">肝癌</span>
391
+ <span class="tag bg-rose-100 text-rose-800">结直肠癌</span>
392
+ <span class="tag bg-rose-100 text-rose-800">鼻咽癌</span>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="card-divider my-4"></div>
397
+
398
+ <div class="grid grid-cols-2 gap-3 text-sm">
399
+ <div class="flex flex-col">
400
+ <span class="text-gray-500">完成试验</span>
401
+ <span class="font-semibold text-medblue">48项</span>
402
+ </div>
403
+ <div class="flex flex-col">
404
+ <span class="text-gray-500">平均入组</span>
405
+ <span class="font-semibold text-medblue">17周</span>
406
+ </div>
407
+ <div class="flex flex-col">
408
+ <span class="text-gray-500">伦理通过</span>
409
+ <span class="font-semibold text-medblue">平均3.8周</span>
410
+ </div>
411
+ <div class="flex flex-col">
412
+ <span class="text-gray-500">支持远程</span>
413
+ <span class="font-semibold text-medblue">已开通</span>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="flex justify-between mt-5">
418
+ <button class="text-medblue hover:text-darkblue text-sm font-medium">
419
+ <i class="far fa-bookmark mr-1"></i>收藏
420
+ </button>
421
+ <button class="bg-medblue text-white px-4 py-1 rounded-lg text-sm hover:bg-darkblue">
422
+ 查看详情 <i class="fas fa-arrow-right ml-1"></i>
423
+ </button>
424
+ <button class="text-medblue hover:text-darkblue text-sm font-medium">
425
+ 推荐专家 <i class="fas fa-user-md ml-1"></i>
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- 机构卡片示例 3 -->
432
+ <div class="institution-card bg-white rounded-xl overflow-hidden">
433
+ <div class="relative">
434
+ <div class="h-36 bg-gradient-to-r from-cyan-600 to-cyan-400 flex items-center justify-center">
435
+ <div class="bg-white rounded-full p-3 w-20 h-20 flex items-center justify-center">
436
+ <i class="fas fa-heartbeat text-cyan-600 text-4xl"></i>
437
+ </div>
438
+ </div>
439
+ <div class="absolute top-3 right-3">
440
+ <span class="bg-white text-cyan-600 font-semibold px-3 py-1 rounded-full text-sm flex items-center">
441
+ <span class="w-2 h-2 bg-cyan-600 rounded-full mr-1"></span>Ⅲ级机构
442
+ </span>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="p-4">
447
+ <div class="flex justify-between items-start">
448
+ <h3 class="text-lg font-bold text-medblue">上海瑞金医院</h3>
449
+ <div class="flex text-yellow-400">
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ <i class="fas fa-star"></i>
453
+ <i class="fas fa-star"></i>
454
+ <i class="fas fa-star"></i>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="flex items-center text-gray-600 mt-1">
459
+ <i class="fas fa-map-marker-alt mr-2"></i>
460
+ <span>上海市 | 三级甲等 | 国家代谢病重点中心</span>
461
+ </div>
462
+
463
+ <div class="mt-4">
464
+ <div class="font-medium text-sm">核心专病方向：</div>
465
+ <div class="flex flex-wrap gap-1 mt-2">
466
+ <span class="tag bg-emerald-100 text-emerald-800">内分泌</span>
467
+ <span class="tag bg-rose-100 text-rose-800">血液肿瘤</span>
468
+ <span class="tag bg-red-100 text-red-800">心血管</span>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="card-divider my-4"></div>
473
+
474
+ <div class="grid grid-cols-2 gap-3 text-sm">
475
+ <div class="flex flex-col">
476
+ <span class="text-gray-500">完成试验</span>
477
+ <span class="font-semibold text-medblue">77项</span>
478
+ </div>
479
+ <div class="flex flex-col">
480
+ <span class="text-gray-500">平均入组</span>
481
+ <span class="font-semibold text-medblue">19周</span>
482
+ </div>
483
+ <div class="flex flex-col">
484
+ <span class="text-gray-500">伦理通过</span>
485
+ <span class="font-semibold text-medblue">平均4.2周</span>
486
+ </div>
487
+ <div class="flex flex-col">
488
+ <span class="text-gray-500">支持远程</span>
489
+ <span class="font-semibold text-medblue">部分支持</span>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="flex justify-between mt-5">
494
+ <button class="text-medblue hover:text-darkblue text-sm font-medium">
495
+ <i class="far fa-bookmark mr-1"></i>收藏
496
+ </button>
497
+ <button class="bg-medblue text-white px-4 py-1 rounded-lg text-sm hover:bg-darkblue">
498
+ 查看详情 <i class="fas fa-arrow-right ml-1"></i>
499
+ </button>
500
+ <button class="text-medblue hover:text-darkblue text-sm font-medium">
501
+ 推荐专家 <i class="fas fa-user-md ml-1"></i>
502
+ </button>
503
+ </div>
504
  </div>
 
 
 
 
 
 
 
 
505
  </div>
506
  </div>
507
+
508
+ <!-- 数据可视化模块 -->
509
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
510
+ <h2 class="text-xl font-semibold text-medblue mb-6">研究机构数据分析</h2>
511
+
512
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
513
+ <!-- 热门研究方向分布 -->
514
+ <div>
515
+ <h3 class="font-medium text-gray-800 flex items-center">
516
+ <i class="fas fa-chart-pie mr-2 text-medblue"></i>热门研究方向机构分布
517
+ </h3>
518
+ <div class="mt-4">
519
+ <canvas id="diseaseChart" height="250"></canvas>
520
+ </div>
521
  </div>
522
+
523
+ <!-- 入组效率Top10 -->
524
+ <div>
525
+ <h3 class="font-medium text-gray-800 flex items-center">
526
+ <i class="fas fa-chart-bar mr-2 text-medblue"></i>入组效率Top10机构
527
+ </h3>
528
+ <div class="mt-4">
529
+ <canvas id="efficiencyChart" height="250"></canvas>
530
+ </div>
531
  </div>
 
 
 
 
 
 
 
 
532
  </div>
533
  </div>
534
+
535
+ <!-- 智能推荐区域 -->
536
+ <div class="bg-white rounded-xl shadow-sm p-6">
537
+ <h2 class="text-xl font-semibold text-medblue mb-4 flex items-center">
538
+ <i class="fas fa-lightbulb mr-2 text-yellow-400"></i>智能推荐机构
539
+ </h2>
540
+
541
+ <div class="space-y-4">
542
+ <!-- 推荐1 -->
543
+ <div class="flex items-start p-4 border border-lightblue rounded-lg">
544
+ <div class="bg-medblue w-8 h-8 rounded-full flex items-center justify-center text-white mr-4">
545
+ <i class="fas fa-star"></i>
546
+ </div>
547
+ <div>
548
+ <h3 class="font-bold text-lg">华西医院</h3>
549
+ <p class="text-gray-700 mt-1">推荐理由：肺癌方向临床试验领先，PI经验丰富（张教授从业20年），伦理委员会通过时间短（平均3周）</p>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- 推荐2 -->
554
+ <div class="flex items-start p-4 border border-lightblue rounded-lg">
555
+ <div class="bg-medblue w-8 h-8 rounded-full flex items-center justify-center text-white mr-4">
556
+ <i class="fas fa-heartbeat"></i>
557
+ </div>
558
+ <div>
559
+ <h3 class="font-bold text-lg">北京大学第三医院</h3>
560
+ <p class="text-gray-700 mt-1">推荐理由：心血管重点试验基地（参与50+心血管临床试验），拥有国家心血管生物样本库，入组效率行业前10%</p>
561
+ </div>
562
  </div>
563
+
564
+ <!-- 推荐3 -->
565
+ <div class="flex items-start p-4 border border-lightblue rounded-lg">
566
+ <div class="bg-medblue w-8 h-8 rounded-full flex items-center justify-center text-white mr-4">
567
+ <i class="fas fa-brain"></i>
568
+ </div>
569
+ <div>
570
+ <h3 class="font-bold text-lg">湘雅医院</h3>
571
+ <p class="text-gray-700 mt-1">推荐理由：精神神经科临床研究中心全国Top5，II/III期试验项目经验丰富，提供远程稽查支持服务</p>
572
+ </div>
573
  </div>
574
  </div>
575
  </div>
576
  </div>
577
  </main>
578
+
579
  <!-- 底部信息 -->
580
+ <footer class="bg-medblue text-white mt-12 py-8">
581
+ <div class="container mx-auto px-4">
582
+ <div class="flex flex-col md:flex-row justify-between">
583
+ <div class="mb-6 md:mb-0">
584
+ <h3 class="text-xl font-bold mb-4">医学机构库</h3>
585
+ <p class="max-w-md">提供全国医疗研究机构综合信息服务，助力临床研究合作伙伴高效匹配</p>
586
+ </div>
587
+
588
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
589
+ <div>
590
+ <h4 class="font-bold mb-3">快速链接</h4>
591
+ <ul class="space-y-2">
592
+ <li><a href="#" class="hover:text-cyan-200">机构数据概览</a></li>
593
+ <li><a href="#" class="hover:text-cyan-200">伦理委员会系统</a></li>
594
+ <li><a href="#" class="hover:text-cyan-200">专家库查询</a></li>
595
+ </ul>
596
+ </div>
597
+
598
+ <div>
599
+ <h4 class="font-bold mb-3">联系我们</h4>
600
+ <ul class="space-y-2">
601
+ <li class="flex items-center">
602
+ <i class="fas fa-phone mr-2"></i>400-888-1234
603
+ </li>
604
+ <li class="flex items-center">
605
+ <i class="fas fa-envelope mr-2"></i>contact@clinical-research.cn
606
+ </li>
607
+ </ul>
608
+ </div>
609
+ </div>
610
+ </div>
611
+
612
+ <div class="border-t border-cyan-200 mt-8 pt-6 text-center text-cyan-100">
613
+ <p>© 2023 临床试验知识平台 | 提供专业医疗研究信息服务</p>
614
+ </div>
615
+ </div>
616
  </footer>
617
+
618
+ <script>
619
+ // 初始化筛选折叠功能
620
+ document.querySelectorAll('.filter-header').forEach(header => {
621
+ header.addEventListener('click', () => {
622
+ const section = header.closest('.filter-section');
623
+ section.classList.toggle('collapsed');
624
+ const icon = header.querySelector('.fa-chevron-down');
625
+ icon.classList.toggle('fa-chevron-up');
626
+ });
627
+ });
628
+
629
+ // 地图显示/隐藏功能
630
+ const mapBtn = document.getElementById('visualization-toggle');
631
+ const mapView = document.getElementById('map-view');
632
+ const closeMap = document.getElementById('close-map');
633
+
634
+ if(mapBtn) {
635
+ mapBtn.addEventListener('click', () => {
636
+ mapView.classList.remove('hidden');
637
+
638
+ // 初始化地图
639
+ const map = L.map('map').setView([35.8617, 104.1954], 4);
640
+
641
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
642
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
643
+ }).addTo(map);
644
+
645
+ // 模拟的机构位置
646
+ const locations = [
647
+ { name: "北京协和医院", lat: 39.9042, lng: 116.4074, count: 15 },
648
+ { name: "华西医院", lat: 30.5728, lng: 104.0668, count: 12 },
649
+ { name: "瑞金医院", lat: 31.2304, lng: 121.4737, count: 14 },
650
+ { name: "中山肿瘤医院", lat: 23.1291, lng: 113.2644, count: 9 },
651
+ { name: "湘雅医院", lat: 28.2135, lng: 112.9838, count: 7 }
652
+ ];
653
+
654
+ // 添加标记点
655
+ locations.forEach(loc => {
656
+ const marker = L.marker([loc.lat, loc.lng]).addTo(map)
657
+ .bindPopup(`<b>${loc.name}</b><br>${loc.count}家研究机构`);
658
+
659
+ // 模拟热力点
660
+ for(let i = 0; i < loc.count; i++) {
661
+ const offset = 0.05 * Math.random();
662
+ L.circleMarker([
663
+ loc.lat + offset * (Math.random() - 0.5),
664
+ loc.lng + offset * (Math.random() - 0.5)
665
+ ], {
666
+ radius: 5,
667
+ color: '#0d7ea0',
668
+ fillColor: '#0d7ea0',
669
+ opacity: 0.7,
670
+ fillOpacity: 0.5
671
+ }).addTo(map);
672
+ }
673
+ });
674
+ });
675
+ }
676
+
677
+ if(closeMap) {
678
+ closeMap.addEventListener('click', () => {
679
+ mapView.classList.add('hidden');
680
+ });
681
+ }
682
+
683
+ // 初始化图表
684
+ window.onload = function() {
685
+ // 研究方向分布饼图
686
+ const diseaseCtx = document.getElementById('diseaseChart').getContext('2d');
687
+ const diseaseChart = new Chart(diseaseCtx, {
688
+ type: 'pie',
689
+ data: {
690
+ labels: ['肿瘤研究', '心血管病', '内分泌病', '精神神经', '儿科疾病', '其他'],
691
+ datasets: [{
692
+ data: [32, 18, 15, 12, 10, 13],
693
+ backgroundColor: [
694
+ '#e53e3e', '#3182ce', '#38a169', '#6b46c1', '#dd6b20', '#4a5568'
695
+ ],
696
+ borderWidth: 0
697
+ }]
698
+ },
699
+ options: {
700
+ responsive: true,
701
+ plugins: {
702
+ legend: {
703
+ position: 'bottom',
704
+ },
705
+ tooltip: {
706
+ callbacks: {
707
+ label: function(context) {
708
+ return `${context.label}: ${context.parsed}%`;
709
+ }
710
+ }
711
+ }
712
+ }
713
+ }
714
+ });
715
+
716
+ // 入组效率柱状图
717
+ const efficiencyCtx = document.getElementById('efficiencyChart').getContext('2d');
718
+ const efficiencyChart = new Chart(efficiencyCtx, {
719
+ type: 'bar',
720
+ data: {
721
+ labels: ['华西医院', '瑞金医院', '湘雅医院', '协和医院', '中山医院', '仁济医院', '华山医院', '华西医院', '瑞金医院', '协和医院'],
722
+ datasets: [{
723
+ label: '平均入组时间(周)',
724
+ data: [14, 15, 15, 16, 17, 17, 18, 18, 19, 20],
725
+ backgroundColor: '#0d7ea0',
726
+ borderColor: '#0d7ea0',
727
+ borderWidth: 0
728
+ }]
729
+ },
730
+ options: {
731
+ indexAxis: 'y',
732
+ responsive: true,
733
+ scales: {
734
+ x: {
735
+ beginAtZero: true,
736
+ title: {
737
+ display: true,
738
+ text: '平均入组时间(周)'
739
+ }
740
+ }
741
+ }
742
+ }
743
+ });
744
+ };
745
+ </script>
746
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=maomaobj/rencai1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
747
  </html>
prompts.txt CHANGED
@@ -1,3 +1,5 @@
1
  { "页面标题": "人才库建设思路与流程", "段落": [ { "标题": "建设逻辑总览", "内容": "以AI为核心，构建从‘数据-智能-应用-反馈’闭环的科技人才情报体系。" }, { "标题": "1. 数据采集与融合", "内容": [ "整合论文、项目、社交平台、机构官网等多源数据", "构建统一人才标识体系，形成五元关联模型" ] }, { "标题": "2. 知识建模与智能分析", "内容": [ "基于大模型和知识图谱构建人才语义画像", "预测人才潜力与流动趋势，识别关键节点" ] }, { "标题": "3. 应用开发与部署", "内容": [ "构建人才地图、对标系统、推荐引擎等核心能力", "服务国家战略、揭榜挂帅、专家协同等场景" ] }, { "标题": "4. 更新与反馈机制", "内容": [ "周期更新与专家反馈双机制", "使用行为与结果反哺算法优化" ] } ], "图示建议": "建议使用四阶段流程图，从左到右展示‘数据源→AI建模→场景应用→反馈优化’的闭环路径" }
2
  { "页面标题": "人才库建设目标与价值（竞争情报视角）", "段落": [ { "标题": "总体目标", "内容": "构建‘人-事-机构’三位一体的人才情报库，支撑国家科技战略与对抗能力，强化人才情报主动作战。" }, { "标题": "建设任务", "内容": [ "1. 构建结构化、多维度、可比对的人才画像图谱", "2. 搭建动态感知与预警系统，监测高敏感人才动向", "3. 服务国家科技对抗任务，支撑重大任务人才推送", "4. 赋能企业技术战略布局与合作/竞争分析" ] }, { "标题": "竞争价值", "内容": [ "主动掌握人才流向与风险", "洞察全球科技力量格局", "提升资源调度与战略响应速度", "实现从人力配置到智能人才调控" ] } ], "图示建议": "建议采用人才情报作战流程图：从感知→建模→匹配→预警，配合全球科技人才分布态势图" }
3
- 请生成一页PPT图文页面，页面标题为：“人才库建设与分析服务体系”，内容面向客户展示，重点体现五个模块的功能价值与应用场景，页面结构为五个功能卡片组成的模块化结构，图文结合，科技感风格，适合政府/园区/科研单位展示使用。 --- 📌 页面标题：人才库建设与分析服务体系 --- 📦 模块1：人才库（全周期档案） - 关键词：简历、科研成果、项目、奖励、完整画像 - 用户功能：搜索、下载、关注、数据补全 📦 模块2：机构库模型 - 关键词：高校、研究所、企业、科研能力谱系、合作关系图 - 用户功能：机构地图、合作网络图谱、科研产出对比 📦 模块3：人才地图 - 关键词：地理+领域分布、级别标签、集中度分析 - 用户功能：区域热力图、人才迁移路径、趋势可视化 📦 模块4：项目匹配 - 关键词：任务识别、关键词提取、语义向量、推荐引擎 - 用户功能：一键上传任务书、获取匹配人才、导出名单 📦 模块5：智能分析决策 - 关键词：人才结构报告、趋势预测、政策推荐、人力布局优化 - 用户功能：自动生成分析报告、规划建议、支持招才引智方案设计 --- 📈 页面视觉建议： - 采用五卡片式结构排列，图标+简要描述+用户可获得的直接价值 - 每个模块颜色统一但区块分明，页面配色蓝白灰 - 可在页面底部加一句话总结：“人才是科技创新第一资源，我们为您构建全景人才智能服务平台”
 
 
 
1
  { "页面标题": "人才库建设思路与流程", "段落": [ { "标题": "建设逻辑总览", "内容": "以AI为核心，构建从‘数据-智能-应用-反馈’闭环的科技人才情报体系。" }, { "标题": "1. 数据采集与融合", "内容": [ "整合论文、项目、社交平台、机构官网等多源数据", "构建统一人才标识体系，形成五元关联模型" ] }, { "标题": "2. 知识建模与智能分析", "内容": [ "基于大模型和知识图谱构建人才语义画像", "预测人才潜力与流动趋势，识别关键节点" ] }, { "标题": "3. 应用开发与部署", "内容": [ "构建人才地图、对标系统、推荐引擎等核心能力", "服务国家战略、揭榜挂帅、专家协同等场景" ] }, { "标题": "4. 更新与反馈机制", "内容": [ "周期更新与专家反馈双机制", "使用行为与结果反哺算法优化" ] } ], "图示建议": "建议使用四阶段流程图，从左到右展示‘数据源→AI建模→场景应用→反馈优化’的闭环路径" }
2
  { "页面标题": "人才库建设目标与价值（竞争情报视角）", "段落": [ { "标题": "总体目标", "内容": "构建‘人-事-机构’三位一体的人才情报库，支撑国家科技战略与对抗能力，强化人才情报主动作战。" }, { "标题": "建设任务", "内容": [ "1. 构建结构化、多维度、可比对的人才画像图谱", "2. 搭建动态感知与预警系统，监测高敏感人才动向", "3. 服务国家科技对抗任务，支撑重大任务人才推送", "4. 赋能企业技术战略布局与合作/竞争分析" ] }, { "标题": "竞争价值", "内容": [ "主动掌握人才流向与风险", "洞察全球科技力量格局", "提升资源调度与战略响应速度", "实现从人力配置到智能人才调控" ] } ], "图示建议": "建议采用人才情报作战流程图：从感知→建模→匹配→预警，配合全球科技人才分布态势图" }
3
+ 请生成一页PPT图文页面，页面标题为：“人才库建设与分析服务体系”，内容面向客户展示，重点体现五个模块的功能价值与应用场景，页面结构为五个功能卡片组成的模块化结构，图文结合，科技感风格，适合政府/园区/科研单位展示使用。 --- 📌 页面标题：人才库建设与分析服务体系 --- 📦 模块1：人才库（全周期档案） - 关键词：简历、科研成果、项目、奖励、完整画像 - 用户功能：搜索、下载、关注、数据补全 📦 模块2：机构库模型 - 关键词：高校、研究所、企业、科研能力谱系、合作关系图 - 用户功能：机构地图、合作网络图谱、科研产出对比 📦 模块3：人才地图 - 关键词：地理+领域分布、级别标签、集中度分析 - 用户功能：区域热力图、人才迁移路径、趋势可视化 📦 模块4：项目匹配 - 关键词：任务识别、关键词提取、语义向量、推荐引擎 - 用户功能：一键上传任务书、获取匹配人才、导出名单 📦 模块5：智能分析决策 - 关键词：人���结构报告、趋势预测、政策推荐、人力布局优化 - 用户功能：自动生成分析报告、规划建议、支持招才引智方案设计 --- 📈 页面视觉建议： - 采用五卡片式结构排列，图标+简要描述+用户可获得的直接价值 - 每个模块颜色统一但区块分明，页面配色蓝白灰 - 可在页面底部加一句话总结：“人才是科技创新第一资源，我们为您构建全景人才智能服务平台”
4
+ 请生成一页图文型PPT页面，标题为“生成人才画像技术方案”。页面内容用于项目汇报或产品方案介绍，结构为上下或左右布局均可，风格为科技感蓝白灰，图文结合，重点表达系统的逻辑清晰、模块完备、功能成熟。 --- 📌 页面标题： 生成人才画像技术方案 --- 📦 第一部分（页面上方或左侧）：方案目标说明 - 内容简述：构建结构化、动态化、多维度的人才画像体系，支持平台识人、评人、用人，为智能服务与战略分析提供基础支撑。 --- 📦 第二部分：人才画像核心要素（建议配图标或分组列表） - 基本身份信息（姓名、性别、职称、地区等） - 学术成果（论文、专利、标准、引用、H指数等） - 项目与基金（主持/参与、经费、方向） - 奖励与称号（杰青、长江、各类学术奖） - 合作与网络（合作单位、合作者、团队归属） - 时间演化特征（成果时间线、研究方向演化） --- 📦 第三部分：技术处理流程图（建议用流程箭头图示） 1. 多源数据采集（论文、专利、专家库、项目库） 2. 实体识别与融合（姓名歧义消解、机构归一） 3. 数据建模与指标计算（构建关联图谱与多维指标） 4. 自动画像生成（结构化字段+关键词+图谱可视化） --- 📦 第四部分：系统功能模块（用简洁卡片形式展示） - 🔍 人才检索引擎：多条件组合筛选 - 🧠 画像生成引擎：标准卡片生成 - 📊 动态更新模块：新成果自动入库 - 🕸️ 合作关系图谱：合作机构/团队可视化 - 📄 PDF导出：支持标准档案导出 --- 📦 第五部分：输出形式展示（建议图示或清单） - Web端人才卡片页（结构化信息 + 时间线 + 图谱） - PDF档案（成果汇总 + 指标图表 + 关键词云） - 系统接口调用（供问答引擎或推荐引擎使用） --- 📈 页面视觉说明建议： - 使用图标+文字组合展示每一模块（如人物头像、图谱、搜索框、时间线图） - 页面配色为蓝白灰主色，整洁、科技感强 - 支持图文左右分布或上下五区块排列，突出逻辑清晰性与可视化强度
5
+ 请为我设计一个“医学机构展示页面”，用于在临床试验知识平台中展示全国或区域内的医疗研究机构信息。页面需支持多维筛选、品牌展示、机构实力评分、研究方向标签化和合作推荐功能。整体风格专业清晰、蓝白配色，参考医疗科研信息系统，具备良好的展示性和交互性。 页面结构如下： 1️⃣ 页面顶部（概览 + 搜索） 页面主标题：“医学机构库” 子标题说明：“展示临床研究机构在科研能力、专业方向和试验经验方面的综合实力” 一个搜索框 + 快速筛选区域（可筛地区、专病方向） 2️⃣ 左侧垂直筛选栏（支持多选） 地区筛选：按省份/城市分层 机构类型：三级医院 / 医学院附属 / 疾控中心 / 民营机构 / 药物研发基地 专病方向：肿瘤 / 心血管 / 内分泌 / 精神神经 / 儿科 等 研究能力等级：I级 / II级 / III级（可依据内评标准） 数据中心接入能力：EDC / eSource / 远程稽查支持 3️⃣ 主内容区域：机构列表展示（卡片式） 每家机构以卡片形式展示，内容包括： 医院/研究中心名称（如：北京协和医院） LOGO 或代表性建筑图片 所在地区（城市 + 医疗区域标签） 机构等级：三级甲等 / 国家临床重点专科 核心专病方向标签（如：乳腺癌 / 胰腺癌 / 自身免疫疾病） 历史参与项目数（如：“累计完成62项I–III期试验”） 平均入组周期 / 伦理通过时间（如有） 合作评分（⭐️⭐️⭐️⭐️） 卡片下方可设置操作按钮：[查看详情] [推荐专家] [收藏] 4️⃣ 单个机构详情弹窗/页面（建议跳转） 点击某一机构后跳转详情页（可在提示词中表明页面联动），包含： 机构简介 研究平台/伦理信息/影像中心等基础能力 已完成的代表性项目 当前专家团队列表 项目管理联系人信息 智能匹配结果：适合哪些项目阶段 / 研究病种 5️⃣ 数据可视化推荐模块（可选） 放在页面右上角或顶部横幅： 地图模式切换按钮：“查看地图” → 全国医学机构热力图 数据图表： “热门研究方向机构数量分布” “入组效率前10机构柱状图” 6️⃣ 智能推荐区（页面底部） 模块名称：“智能推荐机构” 推荐理由自动生成，如： “推荐：华西医院（肺癌方向，PI经验丰富，伦理通过时间短）” “推荐：XX大学附属医院（心血管重点试验基地）” 💡 页面风格建议 蓝白灰主色调，卡片边角圆润、图标简洁 使用图标/标签辅助识别（如🏥代表医院，📍代表地区） 强调“机构实力”、“研究方向”、“合作便利度”可视化