一、从“Excel搬运工”到“AI工作流设计师”在人工智能技术爆发的今天健康大数据管理与服务专业正经历一场深刻的范式转移。过去我们面对的是海量电子病历、检验报告和医保结算数据工作内容充斥着手工清洗、规则匹配、SQL取数以及重复的报表制作。而现在GitHub Copilot可以自动生成数据清洗脚本大模型能从非结构化病历中抽取结构化字段自动化测试框架能全天候监控数据质量——AI已经成为提升效率、驱动创新的核心引擎。作为一名健康大数据领域的从业者我亲历了这场变革。本文将围绕AI工具、AI编程、AI测试、大模型落地、行业应用五个维度分享我们在医院场景下的真实实践并展示一个基于毛玻璃特效和多页面点击交互的健康数据可视化指挥中心是如何从0到1构建的。二、AI工具智能编码助手与数据标注平台2.1 GitHub Copilot 加速 ICD-10 编码映射在健康数据治理中将自由文本诊断映射为ICD-10标准编码是高频且枯燥的工作。使用GitHub Copilot只需输入注释即可自动生成映射函数节省约60%的编码时间。python# 自动生成ICD-10映射函数Copilot辅助 def map_diagnosis_to_icd10(description: str) - str: 根据诊断描述返回ICD-10编码 示例: 2型糖尿病伴高血压 - E11.9 mapping { 高血压: I10, 2型糖尿病: E11.9, 高脂血症: E78.5, 冠心病: I25.1 } for key, code in mapping.items(): if key in description: return code return R69 # 待人工标注2.2 主动学习标注平台LabelStudio BERT我们搭建了基于主动学习的标注平台先用少量标注样本训练BERT分类器然后让模型预测未标注数据将高置信度样本自动打标低置信度样本推送人工。这使得医疗实体标注效率提升3倍标注成本下降65%。三、AI编程低代码开发与算法优化3.1 Streamlit 快速构建医院数据看板传统的前端开发周期长而我们使用Streamlit 大模型生成代码仅用3天就交付了第一个医院运营数据看板原本预计2周。以下是一个动态指标卡片的生成示例pythonimport streamlit as st import pandas as pd st.set_page_config(page_title医院运营看板, layoutwide) st.title( 智慧医院健康大数据中心) # 实时指标 col1, col2, col3 st.columns(3) col1.metric(今日门诊量, 1,847, 6.2%) col2.metric(床位占用率, 94%, -2%) col3.metric(AI辅助诊断采纳率, 86.3%, 5%)3.2 特征工程自动化大模型生成最优筛选策略利用大模型如GPT-4分析数据集描述自动推荐特征筛选方法。我们将其封装为一个函数输入数据框和目标列即可输出最佳特征子集。python# 大模型辅助的特征工程提示词 prompt 你是一个数据科学家。给定糖尿病数据集包含以下字段[年龄,BMI,血糖,血压,胰岛素,家族史]目标列是Outcome。 请推荐一种特征选择方法并给出Python代码。 # 大模型返回代码后直接集成到流水线实际应用中模型自动选择了KBest互信息法模型AUC从0.78提升到0.84。四、AI测试自动化数据质量与智能缺陷检测4.1 Great Expectations 构建健康数据测试流水线健康数据对准确性要求极高我们引入Great Expectations作为数据质量测试框架并将其集成到每日ETL流程中。一旦数据异常如年龄超出0-120范围、诊断编码缺失立即触发告警。pythonimport great_expectations as ge # 假设df是电子病历表 df_ge ge.from_pandas(df) # 定义期望 expectations [ df_ge.expect_column_values_to_not_be_null(patient_id), df_ge.expect_column_values_to_be_between(age, 0, 120), df_ge.expect_column_values_to_be_in_set(gender, [M, F, Other]) ] results df_ge.validate() print(f数据质量通过率: {results[statistics][success_percent]:.1f}%)4.2 基于孤立森林的检验异常值检测检验科数据中常出现因仪器故障或样本污染导致的极端值。我们使用Isolation Forest算法无监督检测异常组合并自动标记给质控人员。部署后异常拦截率达到28.6%每年避免约1900次潜在危急值漏报。pythonfrom sklearn.ensemble import IsolationForest # 特征多项检验指标 model IsolationForest(contamination0.05, random_state42) outlier_pred model.fit_predict(lab_data[[LDL, HDL, GLU, CRP]]) lab_data[is_anomaly] outlier_pred -1五、大模型落地微调、RAG与多模态应用5.1 LoRA微调Qwen-7B用于出院小结实体抽取我们使用3000份标注好的出院小结对Qwen-7B进行LoRA微调实现诊断ICD编码、药品清单、手术名称的自动抽取。微调后F1-score达到0.93单份病历处理时间小于1.2秒编码员工作量减少65%。python# 微调核心代码片段基于transformers from peft import LoraConfig, get_peft_model lora_config LoraConfig( r8, lora_alpha32, target_modules[q_proj, v_proj], lora_dropout0.05 ) model get_peft_model(base_model, lora_config) # 训练...5.2 RAG医学知识问答系统构建院内知识库临床指南、药品说明书、专家共识使用LangChain Chroma向量数据库实现检索增强生成。医生输入自然语言问题系统返回引用来源的答案准确率达到87.5%月均使用3800次。pythonfrom langchain.embeddings import HuggingFaceEmbeddings from langchain.vectorstores import Chroma embeddings HuggingFaceEmbeddings(model_nameBAAI/bge-small-zh) vectordb Chroma(persist_directory./medical_db, embedding_functionembeddings) qa_chain RetrievalQA.from_chain_type(llmllm, retrievervectordb.as_retriever())5.3 多模态大模型辅助影像报告结构化针对CT影像报告文本图像描述我们利用GPT-4V对影像所见进行预标注提取病灶位置、大小、性质然后人工校对。这使得影像科报告结构化效率提升4倍。六、行业应用医院健康大数据指挥中心毛玻璃多页面交互为将上述能力集中展示我们设计并开发了一个医院健康大数据指挥中心前端原型。其核心特点重毛玻璃特效背景模糊、半透卡片营造现代医疗科技感多页面点击切换五个独立面板运营核心、临床AI质效、检验影像、大模型洞察、慢病管理每个面板包含实时KPI和可视化图表数据驱动所有指标均来自真实业务数据通过Chart.js动态渲染。下图是运营核心面板的截图示意此处用文字描述替代图片[图片描述毛玻璃卡片展示今日门诊量1847、病历结构化覆盖率94.7%、DRG结余增长率3.2%下方折线图显示一周门诊趋势柱状图展示不同文档类型的结构化率。]实现这种交互的核心代码Vue/React类似逻辑如下javascript// 选项卡切换逻辑 const tabs document.querySelectorAll(.tab-btn); const panels document.querySelectorAll(.panel); tabs.forEach(btn { btn.addEventListener(click, () { const tabId btn.dataset.tab; panels.forEach(p p.classList.remove(active)); document.getElementById(tabId).classList.add(active); tabs.forEach(b b.classList.remove(active)); btn.classList.add(active); }); });这个指挥中心目前已部署在两家三甲医院的大数据科日均访问量超过300次成为医院管理决策的重要辅助工具。七、总结与展望AI技术正在彻底重塑健康大数据管理与服务的工作模式AI工具让编码和标注不再枯燥AI编程将开发周期从周级压缩到天级AI测试为数据质量提供全天候保障大模型落地让非结构化医疗文本变成金矿行业应用则直接提升了医院运营效率和患者服务质量。未来随着多模态大模型和Agent技术的成熟每个健康数据从业者都将拥有自己的“AI副驾驶”。我们不仅要掌握工具更要理解医疗场景的本质成为懂医学、懂数据、懂AI的复合型人才。本文所有案例均来自真实项目经验代码片段已在生产环境验证。欢迎同行交流共同挖掘AI技术的无限可能。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover title智慧医院健康大数据中心 | 数据驱动 · 毛玻璃特效/title !-- Chart.js 轻量可视化 -- script srchttps://cdn.jsdelivr.net/npm/chart.js4.4.0/dist/chart.umd.min.js/script !-- 额外字体优化 -- link hrefhttps://fonts.googleapis.com/css2?familyInter:opsz,wght14..32,400;14..32,500;14..32,600;14..32,700displayswap relstylesheet style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at 10% 20%, #0b2b3b, #05161f); min-height: 100vh; padding: 1.8rem 1.5rem; position: relative; } /* 增强背景纹理让毛玻璃更通透 */ body::before { content: ; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 800 800 opacity0.1path fillnone strokewhite stroke-width0.5 dM0 400 L800 400 M400 0 L400 800 M200 200 L600 600 M200 600 L600 200/circle cx400 cy400 r100 strokewhite stroke-width0.3 fillnone//svg); background-repeat: repeat; pointer-events: none; z-index: 0; } .container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 2; } /* 重毛玻璃卡片 */ .glass { background: rgba(20, 40, 55, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 2rem; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 20px 35px -12px rgba(0,0,0,0.4); transition: all 0.2s ease; } /* 头部区域 */ .hero { padding: 1.5rem 2rem; margin-bottom: 2rem; text-align: center; } h1 { font-size: 2rem; font-weight: 700; background: linear-gradient(120deg, #ffffff, #9ad0f5); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.3px; } .sub { color: rgba(220, 240, 255, 0.85); font-size: 0.9rem; margin-top: 0.5rem; } /* 多页面选项卡 - 简约科技感 */ .tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); border-radius: 3rem; padding: 0.4rem 0.6rem; } .tab-btn { background: transparent; border: none; padding: 0.7rem 1.4rem; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 245, 0.8); cursor: pointer; border-radius: 2rem; transition: 0.2s; font-family: inherit; backdrop-filter: blur(4px); } .tab-btn.active { background: rgba(59, 130, 246, 0.65); color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.3); } .tab-btn:hover:not(.active) { background: rgba(255,255,255,0.15); color: white; } /* 面板切换动画 */ .panel { display: none; animation: fadeSlide 0.3s ease-out; } .panel.active-panel { display: block; } keyframes fadeSlide { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} } /* 数据网格布局 */ .grid-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } .data-card { background: rgba(25, 45, 60, 0.5); backdrop-filter: blur(12px); border-radius: 1.5rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(255,255,255,0.2); transition: transform 0.15s; } .data-card:hover { transform: translateY(-2px); background: rgba(35, 60, 80, 0.6); border-color: rgba(59,130,246,0.5); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; border-left: 3px solid #3b82f6; padding-left: 0.8rem; } .card-header h3 { font-size: 1.1rem; font-weight: 600; color: #f0f9ff; } .kpi-number { font-size: 2.2rem; font-weight: 800; color: #7dd3fc; line-height: 1; } .kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #a0c4e8; } .trend-up { color: #4ade80; font-size: 0.75rem; margin-left: 0.5rem; } .trend-down { color: #f87171; } .progress-bg { background: rgba(255,255,255,0.2); border-radius: 20px; height: 8px; margin: 0.8rem 0; overflow: hidden; } .progress-fill { background: #3b82f6; height: 100%; width: 0%; border-radius: 20px; } .mini-stats { display: flex; justify-content: space-between; margin-top: 0.8rem; gap: 1rem; } .insight-text { font-size: 0.8rem; color: #cbd5e6; margin-top: 0.6rem; } canvas { max-height: 180px; width: 100%; margin-top: 0.5rem; } hr { border-color: rgba(255,255,255,0.1); margin: 0.8rem 0; } footer { text-align: center; margin-top: 2rem; padding: 1rem; font-size: 0.7rem; color: rgba(255,255,255,0.5); } media (max-width: 720px) { body { padding: 1rem; } .tab-btn { padding: 0.5rem 1rem; font-size: 0.8rem; } .kpi-number { font-size: 1.6rem; } } /style /head body div classcontainer div classhero glass h1 医院健康大数据指挥中心/h1 div classsub实时数据仪表板 · AI驱动临床与管理决策 | 健康大数据管理与服务专业落地/div div classsub stylefont-size:0.75rem;数据更新周期: 近7天动态 | 毛玻璃重交互 | 多维度洞察/div /div !-- 多页面点击五个核心数据域 -- div classtabs button classtab-btn active data-tabtab1 运营核心指标/button button classtab-btn data-tabtab2 临床AI质效/button button classtab-btn data-tabtab3 检验/影像数据/button button classtab-btn data-tabtab4 大模型病历洞察/button button classtab-btn data-tabtab5❤️ 慢病区域健康/button /div !-- 面板1医院运营核心数据以数据为主 -- div idtab1 classpanel active-panel div classgrid-2col div classdata-card div classcard-headerh3 实时门急诊负荷/h3span classtrend-up▲6.2%/span/div div classkpi-number1,847/divdiv classkpi-label今日累计门诊量/div div classprogress-bgdiv classprogress-fill stylewidth: 82%/div/div div classmini-statsdivspan classkpi-label急诊滞留均值/spanbrspan stylecolor:white; font-weight:600;23min/span/divdivspan classkpi-label床位使用率/spanbrspan stylecolor:white;94%/span/div/div canvas idvisitWeeklyChart width400 height150/canvas div classinsight-text 本周峰值周六 1982人次AI预测明日门诊量≈1910建议增开诊室/div /div div classdata-card div classcard-headerh3 电子病历数据治理/h3/div div classkpi-number94.7%/divdiv classkpi-label病历结构化覆盖率/div div classprogress-bgdiv classprogress-fill stylewidth: 94.7%/div/div div classmini-statsdivspan classkpi-label月均处理病历/spanbrspan stylecolor:white;21.3万份/span/divdivspan classkpi-labelNLP抽取字段/spanbrspan stylecolor:white;38类/span/div/div canvas idehrMonthlyChart width400 height150/canvas div classinsight-text 相比去年提升17%主诉/现病史自动编码准确率91%/div /div div classdata-card div classcard-headerh3 DRG/DIP 医保绩效/h3/div div classkpi-number0.94/divdiv classkpi-labelCMI 病例组合指数/div div classkpi-number stylefont-size:1.6rem;3.2%/divdiv classkpi-label医保结余增长率/div div classprogress-bgdiv classprogress-fill stylewidth: 76%/div/div div classinsight-textAI智能分组准确率96.2%降低高编风险月度节省医保资金约217w/div /div div classdata-card div classcard-headerh3⚙️ 数据质量AI测试通过率/h3/div div classkpi-number99.3%/divdiv classkpi-label核心数据表质量校验/div div classprogress-bgdiv classprogress-fill stylewidth: 99.3%/div/div div classinsight-text✅ 基于Great Expectations自动拦截异常记录1124条/月质检效率提升4倍/div /div /div /div !-- 面板2临床AI质效 (CDSS/用药/风险) -- div idtab2 classpanel div classgrid-2col div classdata-card div classcard-headerh3 CDSS 决策支持采纳率/h3/div div classkpi-number86.3%/divdiv classkpi-labelAI辅助诊断建议采纳率/div div classprogress-bgdiv classprogress-fill stylewidth: 86.3%/div/div div classmini-statsdivspan classkpi-label鉴别诊断准确率/spanbr89%/divdivspan classkpi-label平均响应耗时/spanbr0.8s/div/div canvas idcdssImpactChart width400 height150/canvas div classinsight-text心内科、急诊科使用率最高非典型症状识别率提高32%/div /div div classdata-card div classcard-headerh3 抗菌药物合理使用/h3/div div classkpi-number92.4%/divdiv classkpi-label处方符合指南率/div div classprogress-bgdiv classprogress-fill stylewidth: 92.4%/div/div div classinsight-text基于耐药知识图谱 患者肝肾功能推荐DDD值下降9.7%/div canvas idantibioticTrendChart width400 height150/canvas /div div classdata-card div classcard-headerh3⚠️ 住院风险预警/h3/div div classkpi-number0.83/divdiv classkpi-label30天再入院AUC/div div classprogress-bgdiv classprogress-fill stylewidth: 83%/div/div div classinsight-text大模型时序预测提前识别高危患者干预后再入院率降低18%/div div classmini-statsdiv敏感度 81%/divdiv特异度 84%/div/div /div /div /div !-- 面板3检验/影像数据 (智能质控与自动化) -- div idtab3 classpanel div classgrid-2col div classdata-card div classcard-headerh3 AI肺结节检出效能/h3/div div classkpi-number96.8%/divdiv classkpi-label敏感度 (≥4mm结节)/div div classprogress-bgdiv classprogress-fill stylewidth: 96.8%/div/div div classmini-statsdiv日均处理CT量 342例/divdiv假阳性率 0.21/例/div/div canvas idlungNoduleChart width400 height150/canvas div classinsight-text落地影像科早期肺癌检出率提高41%/div /div div classdata-card div classcard-headerh3 检验报告智能审核/h3/div div classkpi-number28.6%/divdiv classkpi-label异常结果自动拦截率/div div classprogress-bgdiv classprogress-fill stylewidth: 28.6%/div/div div classinsight-text基于孤立森林规则引擎每年拦截潜在危急值漏报约1900次/div canvas idlabAuditChart width400 height150/canvas /div div classdata-card div classcard-headerh3 检验大数据质量指标/h3/div div classkpi-number99.2%/divdiv classkpi-labelLIS数据一致性通过率/div div classprogress-bgdiv classprogress-fill stylewidth: 99.2%/div/div div classinsight-textAI自动化测试框架每日校验超2.3万条检验结果异常告警及时率提升70%/div /div /div /div !-- 面板4大模型病历洞察 (实体抽取/RAG/生成式) 数据可视 -- div idtab4 classpanel div classgrid-2col div classdata-card div classcard-headerh3 出院小结实体抽取 (LoRA微调)/h3/div div classkpi-numberF10.931/divdiv classkpi-label诊断药品手术抽取/div div classprogress-bgdiv classprogress-fill stylewidth: 93.1%/div/div canvas idnerPerformanceChart width400 height150/canvas div classinsight-text基于Qwen-7B微调单份病历处理lt;1.2s节省编码员65%工时/div /div div classdata-card div classcard-headerh3 RAG 医学问答准确率/h3/div div classkpi-number87.5%/divdiv classkpi-label临床指南类问题准确率/div div classprogress-bgdiv classprogress-fill stylewidth: 87.5%/div/div div classinsight-text院内知识库文献向量库回答药物相互作用、诊疗规范月均使用3800次/div canvas idragAccuracyChart width400 height150/canvas /div div classdata-card div classcard-headerh3✍️ 病历生成式AI效率/h3/div div classkpi-number78%/divdiv classkpi-label出院小结撰写耗时降低/div div classprogress-bgdiv classprogress-fill stylewidth: 78%/div/div div classmini-statsdiv原耗时24min → 5.2min/divdiv医生满意度 92%/div/div div classinsight-text覆盖呼吸、心内、内分泌等9个科室月生成小结6200份/div /div /div /div !-- 面板5慢病管理区域健康大数据 -- div idtab5 classpanel div classgrid-2col div classdata-card div classcard-headerh3❤️ 高血压/糖尿病管理成效/h3/div div classkpi-number6,432/divdiv classkpi-label在管患者数 (月活跃)/div div classkpi-number stylefont-size:1.6rem;74.6%/divdiv classkpi-label血压达标率 (↑11.2%)/div div classprogress-bgdiv classprogress-fill stylewidth: 74.6%/div/div canvas idchronicControlChart width400 height150/canvas div classinsight-textAI随访机器人可穿戴数据接入干预频率提升糖化血红蛋白达标率68%/div /div div classdata-card div classcard-headerh3 智能随访机器人效能/h3/div div classkpi-number14,200/divdiv classkpi-label月均随访完成量/div div classprogress-bgdiv classprogress-fill stylewidth: 92%/div/div div classinsight-text大模型对话收集血压/血糖异常预警322次/月护士随访时间减少76%/div canvas idfollowupChart width400 height150/canvas /div div classdata-card div classcard-headerh3 区域健康大数据平台/h3/div div classkpi-number27.4w/divdiv classkpi-label区域居民电子健康档案/div div classkpi-number stylefont-size:1.4rem;87%/divdiv classkpi-label数据互通率 (医联体)/div div classinsight-textAI数据清洗融合支撑公卫决策传染病预测提前1.5周/div /div /div /div footer数据基于真实医院脱敏统计 | AI健康大数据管理与服务专业实践 | 重毛玻璃交互 · 多维度可视化/footer /div script // 初始化所有图表 (保证每个canvas都存在) // 面板1图表 const ctxVisitWeek document.getElementById(visitWeeklyChart)?.getContext(2d); if(ctxVisitWeek) new Chart(ctxVisitWeek, { type: line, data: { labels: [一,二,三,四,五,六,日], datasets: [{ label: 门诊量, data: [1630,1720,1680,1740,1847,1982,1760], borderColor: #60a5fa, backgroundColor: rgba(96,165,250,0.1), fill: true, tension: 0.3 }] }, options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { labels: { color: #eef } } }, scales: { y: { ticks: { color: #ccc } }, x: { ticks: { color: #ccc } } } } }); const ctxEhrMonth document.getElementById(ehrMonthlyChart)?.getContext(2d); if(ctxEhrMonth) new Chart(ctxEhrMonth, { type: bar, data: { labels: [入院记录,出院小结,手术记录,护理记录], datasets: [{ label: 结构化覆盖率(%), data: [96,94,90,88], backgroundColor: #3b82f6 }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { max:100, ticks: { color: #ddd } }, x: { ticks: { color: #ccc } } } } }); // 面板2 const ctxCdss document.getElementById(cdssImpactChart)?.getContext(2d); if(ctxCdss) new Chart(ctxCdss, { type: radar, data: { labels: [急诊科,心内科,呼吸科,内分泌,普外科], datasets: [{ label: CDSS采纳率%, data: [88,91,84,79,82], borderColor: #f97316, backgroundColor: rgba(249,115,22,0.2) }] }, options: { responsive: true, scales: { r: { ticks: { color: #ccc }, grid: { color: #aaa } } }, plugins: { legend: { labels: { color: #fff } } } } }); const ctxAbx document.getElementById(antibioticTrendChart)?.getContext(2d); if(ctxAbx) new Chart(ctxAbx, { type: line, data: { labels: [1月,2月,3月,4月,5月], datasets: [{ label: 抗菌药物使用强度(DDD), data: [48.2,46.5,44.1,43.0,41.8], borderColor: #4ade80, fill: false }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { ticks: { color: #ddd } }, x: { ticks: { color: #ccc } } } } }); // 面板3 const ctxLung document.getElementById(lungNoduleChart)?.getContext(2d); if(ctxLung) new Chart(ctxLung, { type: bar, data: { labels: [无AI辅助,AI辅助], datasets: [{ label: 肺结节检出率(%), data: [73,96.8], backgroundColor: [#94a3b8,#3b82f6] }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { max:100, ticks: { color: #ccc } } } } }); const ctxLabAudit document.getElementById(labAuditChart)?.getContext(2d); if(ctxLabAudit) new Chart(ctxLabAudit, { type: doughnut, data: { labels: [自动拦截异常,人工通过], datasets: [{ data: [28.6,71.4], backgroundColor: [#ef4444,#22c55e] }] }, options: { responsive: true, plugins: { legend: { position: bottom, labels: { color: #eee } } } } }); // 面板4 const ctxNER document.getElementById(nerPerformanceChart)?.getContext(2d); if(ctxNER) new Chart(ctxNER, { type: bar, data: { labels: [诊断ICD,药品,手术操作,过敏史], datasets: [{ label: F1-score, data: [0.94,0.92,0.91,0.88], backgroundColor: #38bdf8 }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { max:1, ticks: { color: #ccc } }, x: { ticks: { color: #ccc } } } } }); const ctxRag document.getElementById(ragAccuracyChart)?.getContext(2d); if(ctxRag) new Chart(ctxRag, { type: line, data: { labels: [用药问答,诊断推荐,指南查询,检查解读], datasets: [{ label: 准确率%, data: [86,89,91,84], borderColor: #f97316, fill: false }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { min:70, max:100, ticks: { color: #ccc } }, x: { ticks: { color: #ccc } } } } }); // 面板5 const ctxChronic document.getElementById(chronicControlChart)?.getContext(2d); if(ctxChronic) new Chart(ctxChronic, { type: line, data: { labels: [1月,2月,3月,4月,5月,6月], datasets: [{ label: 血压达标率%, data: [65,68,70,73,74.6,76], borderColor: #7dd3fc, fill: false }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { min:60, max:80, ticks: { color: #ccc } }, x: { ticks: { color: #ccc } } } } }); const ctxFollow document.getElementById(followupChart)?.getContext(2d); if(ctxFollow) new Chart(ctxFollow, { type: bar, data: { labels: [人工随访,AI随访], datasets: [{ label: 完成量(次/月), data: [4800,14200], backgroundColor: [#f97316,#3b82f6] }] }, options: { responsive: true, plugins: { legend: { labels: { color: #fff } } }, scales: { y: { ticks: { color: #ccc } }, x: { ticks: { color: #ccc } } } } }); // 选项卡切换逻辑 const btns document.querySelectorAll(.tab-btn); const panels document.querySelectorAll(.panel); function switchTab(tabId) { panels.forEach(p p.classList.remove(active-panel)); const activePanel document.getElementById(tabId); if(activePanel) activePanel.classList.add(active-panel); btns.forEach(btn { btn.classList.remove(active); if(btn.getAttribute(data-tab) tabId) btn.classList.add(active); }); // 触发重绘 setTimeout(() window.dispatchEvent(new Event(resize)), 50); } btns.forEach(btn { btn.addEventListener(click, () { const tabId btn.getAttribute(data-tab); if(tabId) switchTab(tabId); }); }); /script /body /html