1. 立项原因
在职业教育与高等教育领域，“产教融合”（产业与教育的深度结合）是核心痛点。
痛点： 传统的学校专业建设往往与市场需求脱节。学校不知道企业的具体岗位需要什么技能，导致培养出的学生就业困难，或者企业招不到合适的人才。
解决方案： 本项目旨在解决**“人才培养供给”与“产业需求”不匹配**的问题。通过数据化手段，将学校的“专业/课程/培养目标”与企业的“行业/岗位/职业能力”进行数字化映射。
核心价值： 量化分析专业对产业的支撑度，帮助院校科学地调整课程设置，实现精准的人才培养定位。
2. 行业场景与业务场景
应用领域： 职业院校专业建设、教育行政部门评估、产教融合实训基地规划。
业务流程：
数据构建： 教师或管理者录入学校的专业建设数据（如课程体系、培养目标）。
标准对标： 引入行业龙头企业或国家职业技能标准数据（如岗位任务、技能要求）。
关联映射： 系统自动或人工辅助建立“课程知识点”与“岗位技能”的关联。
智能分析： 系统计算出支撑度百分比，通过可视化图谱展示哪些课程强支撑岗位，哪些是薄弱环节。
报告管理中心,向导式报告创建流,可视化分析图谱
多维度数据融合： 能够处理复杂的层级数据，左侧为教育端（专业群->专业->课程->能力），右侧为产业端（产业->岗位群->任务->职业能力），实现双向数据流转。
智能匹配算法： 在“岗位数据”环节，系统支持根据标签或关键词自动匹配后台数据，减少人工录入成本（如截图4所示“系统自动匹配后台数据”）。
动态可视化图谱：
层级穿透： 用户可以点击图谱中的节点（如“专业群”），展开查看下级节点（“具体专业”），连线动态高亮，清晰展示逻辑链路。
虚实结合分析： 区分理论支撑与实践支撑，通过图谱线条的粗细或颜色直观反馈支撑力度。
1. 职责范围
我负责全部前端开发工作： 从项目的基础架构搭建、公共组件封装，到复杂的业务逻辑处理及最终的数据可视化实现，均由我独立/主导完成。
2. 技术栈与核心实现
核心框架：Vue 3 + TypeScript
使用 Vue 3 的 Composition API 进行逻辑复用，特别是在处理复杂的四步表单向导（Wizard）时，有效管理了跨组件的状态（Data Store）。
利用 TypeScript 对复杂的业务数据结构（专业树、产业树、映射关系）进行严格的类型定义，减少了数据流转中的错误。
可视化核心：D3.js
选型理由： 项目中的“知识图谱”部分具有高度定制化的交互需求（贝塞尔曲线连接、节点拖拽、层级展开/收起、自定义节点形状），常规的 ECharts 无法满足。
具体实现：
力导向图/层级树布局： 使用 D3 的 layout 算法计算节点坐标，实现左（专业）右（产业）对称布局。
动态连线： 绘制复杂的贝塞尔曲线连接不同层级的节点，实现 hover 时的高亮链路效果，直观展示“课程->能力->岗位”的传导路径。
交互动画： 实现了节点的展开/折叠动画，以及Canvas/SVG层面的性能优化，确保在节点数量较多时依然流畅。
UI/UX 实现：
高度还原设计稿的卡片式布局、渐变色背景及科技感边框。
封装了通用的“穿梭框”、“步骤条”和“配置连线器”组件。
评论