1. 引言
随着“智能制造2025”战略的推进，工业装备的自动化与智能化发展对人才的系统思维与动态过程掌控能力提出了更高要求[1]。《自动控制原理》作为工科核心课程，是连接理论与工程实践的关键纽带[2]。然而，该课程理论抽象、数学推导繁琐，传统的“黑板 + PPT”静态授课难以直观呈现复杂系统的动态逻辑，导致学生难以建立深刻的工程直觉。
面对这一困境，利用现代信息技术重构教学模式成为必然选择。虚拟仿真技术作为连接理论与实践的桥梁，虽然已在工程教育中得到一定应用，但长期以来主要依赖MATLAB/Simulink、LabVIEW等专业桌面软件[3] [4]。此类软件凭借强大的数值计算能力，在一定程度上缓解了实验设备不足的问题。然而，在实际教学推广中，传统仿真工具逐渐暴露由于“重、贵、难”带来的局限性：软件安装包体积庞大(往往超过10 GB)、环境配置繁琐、商业授权昂贵，且往往受限于特定的实验室机房环境，难以支持学生随时随地地泛在学习。此外，学生需花费大量精力学习软件特定的编程语法，造成了“工具喧宾夺主”的额外认知负荷，反而冲淡了对控制理论核心逻辑的思考。相比之下，Web端可视化技术凭借“轻量级、零安装、跨平台”的优势，成为解决上述痛点的最优解[5]。作为一种综合容器，Web技术能够将静态文本、交互界面与3D动态仿真无缝融合，构建“图、文、算、动”一体化的沉浸式教学环境。这种“所见即所得”的交互模式，不仅打破了传统资源的静态桎梏，更将抽象符号实时映射为物理实体，支持学生利用移动终端随时随地进行探究式学习，极大地延伸了教学的时空维度。
此外，随着ChatGPT、DeepSeek等大语言模型的突破，代码开发门槛大幅降低，使得非编程专业的教师也能借助AIGC低成本、高效率地构建定制化Web教学资源。基于此，本文旨在探索AIGC辅助下的Web可视化技术在《自动控制原理》教学中的应用，以期促进学生认知深化与能力建构。
2. 课程教学中存在的问题
《自动控制原理》作为工科自动化类专业的核心基础课，长期以来沿用经典的教学大纲与模式。尽管在理论传授上构建了完整的知识体系，但面对新工科建设对创新实践能力的高要求，现存教学模式在主体交互、知识呈现、技术融合及工程实践四个维度上逐渐显露出明显的滞后性，具体表现如下问题。
2.1. 教学主体偏重教师，课堂互动的“闭环”缺失
目前的教学普遍采用“讲授、板书和演算”的传统线性模式。在讲授如“时间响应”、“劳斯判据”等计算繁琐的内容时，课堂主导权高度集中在教师手中，教学过程往往沦为单向的信息输出。学生在课堂上主要扮演“记录者”和“听众”的角色，缺乏主动思考与探究的空间。例如，在推导系统稳态误差系数时，学生往往机械地跟随教师的板书步骤进行记录，鲜有学生能主动提出关于“误差物理来源”的质疑。这种缺乏有效师生互动与学生参与机制的课堂，导致教学反馈链路断裂，学生处于被动接受状态，难以形成提出问题，分析问题和解决问题的主动学习闭环。
2.2. 理论讲授与直观呈现脱节，抽象概念难以“落地”
大量内容(如系统响应特性、传递函数极点与系统性能的关系、频域特性变化等)具有高度抽象性，传统教学中多依赖文字、公式和静态图示，缺乏动态演示和交互式学习手段。学生很难将静态的理论与动态的系统行为建立清晰联系，跨越“数学模型”与“物理行为”之间的鸿沟，从而产生“理解难、记不牢、不会用”的问题。例如，时域分析方面：在讲解二阶系统阻尼比对系统动态性能的影响时，教材上的静态曲线图无法直观展示阻尼比
从0到大于1变化过程中，系统从等幅振荡逐渐过渡到过阻尼状态的动态演变过程。学生只能死记硬背“
会振荡”的结论，而无法建立深刻的物理直觉。频域分析方面：奈奎斯特(Nyquist)判据涉及复平面上的矢量映射与包围圈数统计，仅凭黑板上的静态绘图，学生极难理解“矢量扫过”的动态过程。这种静态化的教学导致学生很难将抽象的极点分布、频域指标与动态的系统行为建立清晰联系，普遍产生“概念理解难、公式记不牢、物理意义不明”的畏难情绪。
2.3. 现代教育技术融合不足，多模态教学环境尚未构建
尽管Web可视化、虚拟仿真及大语言模型辅助等现代教育技术已趋于成熟，但目前众多高校的自控课堂仍主要停留在“PPT电子讲稿”阶段，未能真正实现技术的深度融合。课堂教学缺乏多模态的内容展示手段，无法提供文本、图形、仿真与动画相融合的沉浸式体验。例如，在讲解“运动工作台运动性能控制”时，缺乏虚实结合的交互式环境，学生无法通过拖动参数滑块来实时观察控制效果，也无法利用AI助手即时生成代码验证算法。单一的教学手段导致信息传递维度低，难以激发学生的认知兴趣和学习动力，课堂沉闷低效。
2.4. 理论与实践缺乏联动，工程设计能力的“断层”
《自动控制原理》是一门强工程背景的课程，但现有的教学与考核重心过于偏向数学解题，忽视了系统设计与参数整定等关键工程能力的训练。具体而言，参数调节缺失。学生虽能熟练计算超前/滞后校正装置的传递函数，但面对实际系统(如直流电机调速)，却不知道如何通过调节电阻电容参数来改善系统的相角裕度。这种理论与实践的割裂，导致学生虽掌握了基本的公式和定理，但在面对复杂的实际工程问题时往往无从下手，理论知识停留在试卷上，无法有效转化为解决复杂工程问题的实践能力。
3. 基于Web可视化的教学模式方案
针对上述课程教学痛点，构建基于Web可视化技术的智慧教学体系(如图1所示)。该体系坚持“能力导向”理念，旨在全方位提升学生的认知理解和工程应用能力。通过深度融合Web可视化技术与AIGC，重构《自动控制原理》的知识呈现形式、教学组织形态及学生学习方式，搭建一个“智能化辅学、个性化推荐、知识结构化呈现及评价客观量化”的综合教学平台。这一体系的实施，有利于推动课程模式由“教师中心”向“学生中心”的转型，实现教学目标从单纯“知识传授”向高阶“能力建构”的跨越。
Figure 1. Web-based visualized teaching system diagram
图1. 基于Web可视化的教学体系图
该教学模式从教学内容与知识呈现方式、教学方式两方面入手，旨在促进学生认知深化与能力建构。通过创新教学内容的呈现方式和优化教学方法，提升学生的学习兴趣，增强其动手实践能力。最终教学目标是实现知识的有效迁移与应用。
3.1. 教学内容与知识呈现方式探索
针对《自动控制原理》课程理论抽象度高、工程映射困难及知识点逻辑复杂的教学痛点，充分挖掘现代Web与AIGC技术优势，对教学内容与知识呈现方式进行全方位的数字化重构。分别从知识体系的分层递进设计、高保真可视化资源开发以及多模态资源的生态化集成三个维度搭建连接“抽象数学符号”与“直观物理体验”的认知桥梁(如图2所示)。
知识模块优化与分层递进设计。按照自动控制理论的知识体系，结合学生认知发展特点，将课程内容划分为基础认知层(基本概念、基本公式)、机制理解层(系统建模与动态分析)、能力应用层(系统设计与性能优化)，实现层层递进、循序渐进的教学布局。在网页上引入知识图谱导航模块，以交互式可视化方式呈现课程内容之间的逻辑关系，使得教学内容更加结构化和可视化。
Figure 2. Main contents of the reform of teaching content and knowledge presentation methods
图2. 教学内容与知识呈现方式的改革主要内容
可视化教学资源开发。主要包括动态仿真模块、数学推导可交互模块和工程案例可视化模块等。动态仿真模块基于HTML5、Canvas以及Three.js等技术开发控制系统响应动态演示。数学推导交互模块支持学生自定义参数，实时观察传递函数变化、根轨迹迁移、波特图变化等。工程案例可视化模块收集教学科研团队利用自动控制原理知识解决的工程示例(如多自由度机械臂的轨迹跟踪与残余振动抑制、四旋翼无人机的姿态悬停、倒立摆的平衡控制等)，利用Web 3D渲染技术(如Three.js、WebGL)对这些实际物理系统进行高保真建模与动态重构，将枯燥的微分方程或传递函数映射为逼真的物理运动，让学生在学习一堂课后，能够学有所用，潜移默化地培养学生解决复杂工程问题的系统思维与设计能力。一些典型的Web可视化展示内容示例如表1所示。
Table 1. Some typical examples of Web-based visualization content
表1. 一些典型的Web可视化展示内容示例
知识模块 |
可视化展示内容 |
交互方式与功能 |
教学目的 |
时域分析 |
二阶系统单位阶跃响应动态曲线 |
参数拖拽：拖动阻尼比与自然频率滑块，实时改变响应 |
直观建立系统参数与性能指标(超调量、调节时间)的映射关系。 |
根轨迹法 |
闭环极点在S平面随增益变化的移动轨迹 |
动态演示：拖动增益进度条，观察极点移动方向、分离点及虚轴穿越点 |
理解开环增益对闭环系统稳定性的影响机理及临界状态。 |
频域分析 |
波特图与时域响应的联动视图 |
多图联动：波特图上调节相位裕度，时域波形同步变化 |
打通频域指标与时域性能的壁垒，理解“频域校正”的工程意义。 |
系统校正 |
PID参数整定(磁悬浮小球为例) |
调节PID参数旋钮，控制3D小球稳定在指定高度 |
在试错中掌握PID各参数的物理含义，培养工程调试手感。 |
状态空间 |
机械臂运动轨迹与状态变量演化 |
3D仿真：显示机械臂动作，同步绘制状态空间状态向量 |
现代控制理论中抽象的矩阵运算转化为几何空间中的状态流形。 |
多模态数字化教学资源集成。依托Web技术的容器特性，平台实现了文本、矢量公式(MathJax渲染)、交互动画及高清视频等异构资源的无缝融合。基于认知负荷理论[6]，开发了如图3所示的多模态统一资源模板，对界面进行结构化分区布局：静态推导区负责理论溯源，动态交互区负责参数仿真，工程视频区负责应用展示。这种“图、文、声、像、算”一体化的沉浸式设计，有效搭建了连接“抽象数学符号”与“直观物理体验”的认知桥梁，促进学生从被动接收向深度参与转变。打破传统资源建设的单向度，构建了涵盖教材经典、工程科研前沿及AI生成的多元化资源库。特别是大语言模型的引入，重塑了资源生产机制。平台鼓励学生利用AI辅助工具设计创新案例，经仿真验证后的优秀成果将被反哺至Web教学系统。这一机制实现了由“教师单向供给”向“师生共建共享”的转型，使学生从知识的“消费者”进阶为课程资源的“贡献者”，在极大丰富案例库的同时，显著提升了学生的成就感与工程创新能力。
Figure 3. Schematic diagram of a Web-based multimodal unified resource template
图3. Web多模态统一资源模板示意图
3.2. 教学方式的探索
主要借助Web可视化技术，依据 BOPPPS 教学模型的核心理念[7] [8]，构建“引导，演示，互动和反馈”的教学流程(如图4所示)，着重提升学生的自我学习能力和知识的应用能力。
在引导环节，旨在帮助学生跨越从“生活经验”到“理论模型”的认知鸿沟。在课堂伊始，教师利用Web可视化展示一个“高层建筑调谐质量阻尼器”的3D动态案例，并通过“阻尼器介入后为何能平息晃动？”及“质量参数边界条件(过轻/过重)的影响”进行启发式提问。这种具有视觉冲击力的工程案例作为“教学钩子”，有效激发学生对“阻尼”物理概念的兴趣，从而顺势导入本节课的核心目标，深入解析阻尼比
对二阶系统的稳定性与快速性的决定作用。
在演示环节，教师依托Web可视化平台构建“数形结合”的动态演示环境。例如，针对抽象的二阶系统性能分析，教师利用多视图联动技术，演示S平面极点移动对时域响应的实时影响。当极点被拖拽向虚轴移动时，右侧曲线即刻呈现出由平稳到震荡的剧烈变化，学生得以直观地“看见”阻尼比
的物理意义。教师辅以“极点越近虚轴，系统‘脾气’越暴躁”的启发式讲解，有效降低了认知负荷。此外，教学中穿插引入了工程与科研案例的实录视频，将枯燥的控制原理还原为鲜活的工程场景，使学生明确知识的应用边界与工程价值，有效激发了其解决复杂工程问题的内生动力。
Figure 4. Schematic diagram of the teaching process based on “guide, demo, interact, and feedback”
图4. 基于“引导、演示、互动和反馈”的教学流程示意图
在互动环节，依托Web可视化技术的移动端适配能力，课堂互动形式由“师生问答”升级为“全员实操”。教师发布“系统性能优化”的在线挑战，引导学生利用手机或平板电脑接入实验环境。在调节阻尼比
的过程中，学生不再依赖抽象的公式推导，而是基于实时波形反馈进行“参数博弈”：既要避免欠阻尼带来的超标超调，又要克服过阻尼导致的响应迟缓。在不断的权衡与试错中，学生不仅找到了满足设计指标的最佳参数区间，更在动手中内化了“时域指标间的矛盾与统一”这一核心工程思想，实现了理论知识向工程调试能力的有效转化。
在反馈环节，不同于传统教学仅关注作业结果正确与否或期末一纸试卷的结果性评价，本环节依托Web可视化平台的全周期数据埋点技术，构建涵盖“课内实验交互”与“课下自主学习”的双维过程性考核体系，实现从“结果评价”向“能力与态度综合评价”的转变。当学生在课堂上操作Web实验时，后台数据库实时记录其每一次的“参数修改轨迹”、“仿真尝试次数”及“收敛趋势”。系统能够自动识别学生是“深思熟虑型”(步步逼近目标)还是“盲目试错型”(参数无序跳变)，并据此给出探究过程分(占过程考核的30%)，重点评价学生的工程逻辑与调试能力。对于经过多次尝试最终找到规律的学生，即便耗时较长，系统也会给予较高的过程分，以鼓励其探索精神。为延伸教学时空，考核体系将触角拓展至课外，对学生在非课堂时间的Web访问行为进行多维量化，包括资源访问深度、学习持续性和交互活跃度。最终确立“结果准确度(40%)” + “实验探究过程(30%)” + “课下自主学习(30%)”的综合评价模型。同时，教师通过可视化的“学生学习画像”，不仅能发现课堂上跟不上的学生，还能及时识别出“课下从未登录”的“学习惰性群体”，并进行针对性的预警与辅导，真正落实以学生发展为中心，培养其自主学习和探索的习惯与能力。
基于Web可视化技术构建的“引导、演示、互动和反馈”闭环教学流程，利用Web可视化技术打破了传统课堂的沉默与单调，丰富《自动控制原理》的教学生态，有利于驱动教学范式从传统的“教师为中心”向“以学生为中心”的转变。Web可视化平台将抽象理论具象化，增强课堂的互动深度与探索广度。同时，依托全周期数据支撑的反馈机制，从单一结果考核转向对“探究能力与学习态度”的综合过程评价，不仅关注解决问题的结果，更通过课内探究轨迹与课下自主学习行为量化学生的探索精神。该种教学方式有效支撑了新工科背景下创新型人才的能力构建与素质达成。
3.3. 丰富的信息化技术的融入
Web前端技术不仅是构建用户交互界面的工具，更凭借其天然的开放性、标准化的通信协议以及庞大的开源生态社区，成为了承载各类前沿信息化技术的通用容器[9]。利用Web技术的高扩展性，通过微服务架构与API接口集成，将生成式人工智能、知识图谱与大数据统计分析深度融入《自动控制原理》教学平台。典型的可融入Web网页的信息化技术包括：
(1) 大模型接入。依托Web的RESTful API及Server-Sent Events (SSE)流式传输协议的成熟支持，无缝集成DeepSeek等大模型，通过预置“控制专家”提示词赋予平台“智能大脑”。在教学赋能上，提供个性化答疑和辅助代码生成。例如，AI能结合实时仿真参数(如系统震荡不收敛)提供针对性的物理机理解析，实现7 × 24小时的个性化伴随辅导。支持“自然语言交互”，学生只需输入指令(如“生成超前校正网络”)，系统即自动生成并运行仿真脚本。这种低门槛模式将学生从繁琐的语法细节中解放出来，使其精力聚焦于控制策略的顶层设计。
(2) 知识图谱嵌入。利用D3.js以及ECharts Graph等Web图形库将碎片化知识转化为动态网络拓扑图，将非结构化知识转化为动态可视的网络拓扑图，解决传统线性教学中知识碎片化的问题。基于Web的DOM操作与Canvas渲染能力，绘制知识点节点及其关联边，实现缩放、拖拽与点击交互。在教学赋能上，实现结构化知识重组并提供学习路线推荐。例如，将“拉普拉斯变换”、“传递函数”、“根轨迹”、“稳定性判据”等离散知识点构建为可视化的网状结构。基于拓扑排序与深度知识追踪(DKT)算法实时分析学生当前进度，智能推荐最优学习路径。这种导航机制能有效规避因前置知识缺失导致的认知障碍，实现个性化精准导学。
(3) 大数据统计与分析。Web技术具有天然的事件监听与数据捕获能力，能够以极低的成本实现对学生学习行为的全周期埋点。利用JavaScript监听并采集学生在Web端的鼠标轨迹、点击热区、参数调节序列及页面停留时长等细粒度数据，通过异步请求实时回传至服务器数据库。采集交互行为数据，构建“过程画像”与“预警机制”，解决评价滞后与主观化问题。例如，通过分析“PID调参实验”中的参数收敛曲线，区分“逻辑推演型”与“盲目试错型”学习者，为过程性考核提供客观量化依据。通过可视化仪表盘实时展示全班的学习状态热力图。教师可直观发现被大多数学生反复访问的“难点页面”或长期未登录的“惰性学生”，从而实施精准的教学干预与辅导。
充分利用Web技术的开放生态，通过API集成实现了信息化技术的多维赋能：在交互层面，引入大模型构建智能助教，实现从被动查询到主动生成的转变；在认知层面，利用知识图谱实现知识的结构化重组，完成从离散点状学习到系统网状认知的升级；在评价层面，依托大数据统计建立全过程行为画像，推动考核方式从主观经验判断向客观数据驱动的跨越。三者协同作用，共同构建了一个高感知、强交互、可量化的智慧教学环境。
4. 结论
本文聚焦于新工科背景下《自动控制原理》课程的教学改革，构建了基于Web可视化与AIGC赋能的智慧教学新模式。研究通过重构教学内容、创新教学流程与升级评价体系，得出以下结论：第一，利用Web技术的轻量化与高交互特性，配合大模型的智能辅助与知识图谱导航，能够有效破解传统教学中“理论抽象难懂”与“知识碎片化”的难题，实现知识的多模态呈现与结构化重组。第二，通过实施基于BOPPPS理念的“引导、演示、互动、反馈”四步教学法，将课堂从单向灌输转变为双向博弈，实现了从静态知识传授向动态能力建构的跨越，极大增强了学生的参与度与获得感。第三，依托大数据统计的全过程行为画像，推动了考核方式从主观经验判断向客观数据驱动的转变，实现了对学生探究能力与学习态度的精准评价。综上所述，该教学模式为培养具备扎实理论基础与创新工程实践能力的自动化人才提供了有效路径，也为理工科专业课程的数字化与智能化转型提供了可借鉴的范式。
基金项目
本文受到2024年度广东省省级质量工程项目(项目号：PX-112024019)和广东省广东海洋大学校级教改项目(项目号：PX-972024008)的共同资助。
NOTES
*通讯作者。