当前位置：首页 > news >正文

基于深度学习的绝缘子缺陷识别检测系统|全新web界面|多模态|AI大模型智能分析|YOLOv8、YOLOv10、YOLOv11、YOLOv12

news 2026/3/27 4:19:41

摘要

随着高压输电线路规模的不断扩大，作为电网关键承重与绝缘部件的绝缘子，其运行状态的实时监测与缺陷精准识别对保障电力系统安全、稳定运行至关重要。传统的人工巡检方式存在效率低、危险性高、主观性强等弊端，无法满足现代智能电网的发展需求。

本项目旨在设计并实现一套集先进目标检测算法、现代化Web交互界面与智能分析于一体的“智能绝缘子缺陷检测与分析系统”。系统核心技术层采用当前YOLO系列最新模型（包括YOLOv8、YOLOv10、YOLOv11及YOLOv12），构建了一个高性能、可切换的视觉检测引擎，专门用于从复杂背景的航拍或地面巡检图像/视频中，准确识别并定位绝缘子的四种典型状态：‘绝缘子串’（正常）、‘完好单片’（无缺陷）、‘破损’以及‘闪络损伤’。基于一个包含3200张高质量标注图片（训练集2240张，验证集640张，测试集320张）的自建数据集，我们对模型进行了充分的训练与优化，确保其在真实场景下的鲁棒性。

系统应用层采用前后端分离的现代化架构。后端基于SpringBoot框架构建，负责核心业务逻辑、模型推理接口、用户认证与数据持久化。前端提供友好的交互式Web界面，支持用户进行便捷操作。数据层使用MySQL数据库，系统性地存储用户信息、模型配置、以及所有检测任务（图片、视频、实时摄像头）的历史记录与详细结果，为状态追踪与统计分析提供数据基础。

本系统的核心创新与功能亮点在于：

多模型动态切换：用户可根据实时需求或对不同场景的适应性，在四种前沿YOLO模型间灵活切换，实现检测精度与速度的平衡选择。
全模态检测支持：无缝支持图片上传检测、视频文件分析、以及摄像头实时流媒体检测，满足从离线分析到在线监控的不同应用场景。
深度智能分析集成：创新性地整合了DeepSeek大型语言模型的智能分析能力。在完成视觉检测后，系统可将识别结果自动生成结构化的检测报告，并可由DeepSeek进行深入解读、成因分析与维护建议的文本生成，极大提升了系统的决策支持水平。
全面的数据管理与可视化：提供完整的用户管理体系（管理员/普通用户）、个人中心、以及多维度的信息与数据可视化面板。所有检测操作均有迹可循，识别记录可进行查询、管理与统计，直观展示缺陷分布、检测频率等关键指标。
健壮的用户系统：实现了包含注册、登录、权限控制、个人信息管理（头像、密码修改）等功能的完整用户体系，保障了系统的安全性与个性化体验。

综上所述，本系统不仅是一个高效的绝缘子缺陷自动化检测工具，更是一个集模型管理、数据资产沉淀、智能诊断与协同管理于一体的综合运维平台。它有效解决了传统巡检模式的痛点，为电力设施的智能化、数字化巡检提供了切实可行的解决方案，具有重要的工程应用价值与推广前景。

详细功能展示视频

基于YOLO和DeepSeek的绝缘子损坏识别检测系统（千问大模型+web+YOLOv8/YOLOv10/YOLOv11/YOLOv12+python）_哔哩哔哩_bilibili

基于YOLO和DeepSeek的绝缘子损坏识别检测系统（千问大模型+web+YOLOv8/YOLOv10/YOLOv11/YOLOv12+python）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1RhfoBeEyy/?spm_id_from=333.999.0.0&vd_source=549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1RhfoBeEyy/

一、引言

1.1 研究背景与意义

绝缘子是输电线路中用于电气绝缘和机械固定的关键部件，其长期暴露在自然环境中，承受着电气、机械和环境的综合应力，极易产生诸如瓷瓶破损、伞裙裂纹、闪络灼伤等多种缺陷。这些缺陷如未能被及时发现和处理，轻则引起局部放电、电能损耗，重则可能导致绝缘击穿、线路跳闸，甚至引发大规模的停电事故，造成巨大的经济损失与社会影响。因此，对绝缘子状态的定期、高效检测是电力系统预防性维护的核心环节。

目前，我国电力巡检正逐步从“人工为主”向“自动化、智能化”模式过渡。无人机（UAV）巡检和固定监控摄像头的大规模应用，产生了海量的图像与视频数据。如何从这些非结构化的视觉数据中，快速、准确地自动识别出缺陷目标，成为制约巡检效率提升的技术瓶颈。近年来，以卷积神经网络（CNN）为代表的深度学习技术，特别是以YOLO（You Only Look Once）系列为代表的一阶段目标检测算法，因其卓越的检测速度和不断精进的精度，已成为工业视觉检测领域的研究热点。

然而，将前沿的AI算法转化为稳定、易用、可管理的实际业务系统仍面临挑战：模型迭代迅速（如从v8到v12），如何兼容与评估？单点检测功能如何扩展为支持多用户、多任务、有记忆的平台？检测结果如何从“边界框”升级为“决策建议”？这些问题要求我们构建一个软硬一体、算法与应用并重的完整系统。

1.2 国内外研究现状

在学术研究层面，基于深度学习的绝缘子缺陷检测已取得丰硕成果。早期研究多采用Faster R-CNN等两阶段算法，精度较高但速度较慢。近年来，YOLO系列因其优异的实时性，成为该领域的主流选择。学者们通过在YOLOv5、YOLOv7等框架上引入注意力机制、优化损失函数、改进特征融合网络等方式，针对小目标、复杂背景等特定难点进行改进，显著提升了绝缘子缺陷的检测性能。随着YOLOv8（无锚框设计）、YOLOv10（效率-精度分离）、YOLOv11/YOLOv12等最新版本的陆续推出，算法性能边界不断被刷新，为工程应用提供了更强大的基础模型。

在系统应用层面，现有解决方案多为离线的脚本工具或嵌入式的单机软件，普遍存在以下不足：

功能单一：往往仅提供图片检测，缺乏对视频流和实时摄像头的支持，难以覆盖全场景。
缺乏管理：没有用户体系、没有检测历史管理、数据零散，无法形成可追溯的知识库。
交互性差：通常为命令行或简单的本地界面，不易于非技术人员操作，且不支持远程访问与协同。
“只检不析”：输出仅为带标注框的图片，缺乏对检测结果的聚合、统计和进一步的智能分析，未能充分挖掘数据价值。
模型固化：系统通常绑定单一模型，无法灵活利用最新算法成果或针对不同场景选择最优模型。

1.3 本项目主要工作与贡献

针对上述研究空白与实际需求，本项目的核心工作是设计并实现一个功能完备、架构先进、体验友好的智能绝缘子缺陷检测与分析系统。具体贡献如下：

构建高性能、可演进的检测核心：集成YOLOv8至YOLOv12四种最新模型，在一个统一的框架下进行训练与性能对比。用户可根据任务需求（如偏向速度或精度）灵活切换模型，实现了检测核心的动态升级与择优选择。
设计并实现全栈式Web应用系统：采用“前后端分离”的现代化Web架构。SpringBoot后端提供稳健的RESTful API服务，负责模型加载、推理调度、用户认证授权（基于MySQL）及所有业务逻辑。响应式前端界面提供直观的操作流程，使得复杂的AI检测能力能够通过浏览器被轻松访问和使用。
实现多模态输入与数据持久化：系统完整支持图片、视频、摄像头实时流三种输入模式的缺陷检测。所有检测请求、结果图片、统计信息（如缺陷类别、数量、置信度、处理时间）均结构化存入MySQL数据库，实现了检测任务的全程可追溯与数据资产化。
创新性集成LLM智能分析：突破传统检测系统的局限，在检测流程后端接入DeepSeek大型语言模型。系统能自动将视觉检测结果转换为文本描述，并调用DeepSeek生成包含缺陷概况总结、潜在风险分析、初步维护建议在内的综合性分析报告，将“视觉感知”提升至“认知理解”层面。
开发完善的管理与可视化功能：系统内置完整的用户角色管理体系（普通用户与管理員），提供个人中心。管理员拥有用户管理、全局数据查看权限。系统配备丰富的图表可视化组件，对用户行为、检测任务统计、缺陷类别分布等进行多维展示，辅助管理者进行决策。
提供友好的用户体验与安全保证：从用户注册登录、个人信息修改（头像上传、密码更新）、到简洁的检测任务提交与结果展示界面，每一个环节都注重交互细节。严格的用户认证与权限控制确保了系统数据的安全。

二、系统核心特性概述

功能模块

✅ 用户登录注册：支持密码检测，保存到MySQL数据库。

✅ 支持四种YOLO模型切换，YOLOv8、YOLOv10、YOLOv11、YOLOv12。

✅ 信息可视化，数据可视化。

✅ 图片检测支持AI分析功能，deepseek

✅ 支持图像检测、视频检测和摄像头实时检测，检测结果保存到MySQL数据库。

✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。

✅ 用户管理模块，管理员可以对用户进行增删改查。

✅ 个人中心，可以修改自己的信息，密码姓名头像等等。

登录注册模块

可视化模块

图像检测模块

YOLO模型集成(v8/v10/v11/v12)
DeepSeek多模态分析
支持格式：JPG/PNG/MP4/RTSP

视频检测模块

实时检测模块

图片识别记录管理

视频识别记录管理

摄像头识别记录管理

用户管理模块

数据管理模块（MySQL表设计）

users- 用户信息表

imgrecords- 图片检测记录表

videorecords- 视频检测记录表

camerarecords- 摄像头检测记录表

模型训练结果

#coding:utf-8 #根据实际情况更换模型 # yolon.yaml (nano)：轻量化模型，适合嵌入式设备，速度快但精度略低。 # yolos.yaml (small)：小模型，适合实时任务。 # yolom.yaml (medium)：中等大小模型，兼顾速度和精度。 # yolob.yaml (base)：基本版模型，适合大部分应用场景。 # yolol.yaml (large)：大型模型，适合对精度要求高的任务。 from ultralytics import YOLO model_path = 'pt/yolo12s.pt' data_path = 'data.yaml' if __name__ == '__main__': model = YOLO(model_path) results = model.train(data=data_path, epochs=500, batch=64, device='0', workers=0, project='runs', name='exp', )

YOLO概述

YOLOv8

YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布，在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步，YOLOv8 引入了新功能和优化，使其成为各种应用中目标检测任务的理想选择。

YOLOv8 的主要特性

高级骨干和颈部架构：YOLOv8 采用最先进的骨干和颈部架构，从而改进了特征提取和目标检测性能。
无锚点分离式 Ultralytics Head：YOLOv8 采用无锚点分离式 Ultralytics head，与基于锚点的方法相比，这有助于提高准确性并提高检测效率。
优化的准确性-速度权衡：YOLOv8 专注于在准确性和速度之间保持最佳平衡，适用于各种应用领域中的实时对象检测任务。
丰富的预训练模型:YOLOv8提供了一系列预训练模型，以满足各种任务和性能要求，使您更容易为特定用例找到合适的模型。

YOLOv10

YOLOv10 由清华大学研究人员基于 Ultralytics Python构建，引入了一种新的实时目标检测方法，解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件，YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明，它在多个模型尺度上都具有卓越的精度-延迟权衡。

概述

实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而，对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。

架构

YOLOv10 的架构建立在之前 YOLO 模型优势的基础上，同时引入了几项关键创新。该模型架构由以下组件组成：

骨干网络：负责特征提取，YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)，以改善梯度流并减少计算冗余。
Neck：Neck 的设计目的是聚合来自不同尺度的特征，并将它们传递到 Head。它包括 PAN（路径聚合网络）层，用于有效的多尺度特征融合。
One-to-Many Head：在训练期间为每个对象生成多个预测，以提供丰富的监督信号并提高学习准确性。
一对一头部：在推理时为每个对象生成一个最佳预测，以消除对NMS的需求，从而降低延迟并提高效率。

主要功能

免NMS训练：利用一致的双重分配来消除对NMS的需求，从而降低推理延迟。
整体模型设计：从效率和准确性的角度对各种组件进行全面优化，包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。
增强的模型功能: 结合了大内核卷积和部分自注意力模块，以提高性能，而无需显着的计算成本。

YOLOv11

YOLO11 是 Ultralytics YOLO 系列实时目标检测器的最新迭代版本，它以前沿的精度、速度和效率重新定义了可能性。YOLO11 在之前 YOLO 版本的显著进步基础上，在架构和训练方法上进行了重大改进，使其成为各种计算机视觉任务的多功能选择。

主要功能

增强的特征提取:YOLO11 采用改进的 backbone 和 neck 架构，从而增强了特征提取能力，以实现更精确的目标检测和复杂的任务性能。
优化效率和速度：YOLO11 引入了改进的架构设计和优化的训练流程，从而提供更快的处理速度，并在精度和性能之间保持最佳平衡。
更高精度，更少参数：随着模型设计的进步，YOLO11m 在 COCO 数据集上实现了更高的平均精度均值(mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
跨环境的适应性：YOLO11 可以无缝部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统，从而确保最大的灵活性。
广泛支持的任务范围：无论是目标检测、实例分割、图像分类、姿势估计还是旋转框检测 (OBB)，YOLO11 都旨在满足各种计算机视觉挑战。

Ultralytics YOLO11 在其前代产品的基础上进行了多项重大改进。主要改进包括：

增强的特征提取：YOLO11 采用了改进的骨干网络和颈部架构，增强了特征提取能力，从而实现更精确的目标检测。
优化的效率和速度：改进的架构设计和优化的训练流程提供了更快的处理速度，同时保持了准确性和性能之间的平衡。
更高精度，更少参数：YOLO11m 在 COCO 数据集上实现了更高的平均精度均值 (mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
跨环境的适应性：YOLO11 可以部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统。
广泛支持的任务范围：YOLO11 支持各种计算机视觉任务，例如目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。

YOLOv12

YOLO12引入了一种以注意力为中心的架构，它不同于之前YOLO模型中使用的传统基于CNN的方法，但仍保持了许多应用所需的实时推理速度。该模型通过在注意力机制和整体网络架构方面的新颖方法创新，实现了最先进的目标检测精度，同时保持了实时性能。尽管有这些优势，YOLO12仍然是一个社区驱动的版本，由于其沉重的注意力模块，可能表现出训练不稳定、内存消耗增加和CPU吞吐量较慢的问题，因此Ultralytics仍然建议将YOLO11用于大多数生产工作负载。

主要功能

区域注意力机制: 一种新的自注意力方法，可以有效地处理大型感受野。它将特征图分成l个大小相等的区域（默认为 4 个），水平或垂直，避免复杂的运算并保持较大的有效感受野。与标准自注意力相比，这大大降低了计算成本。
残差高效层聚合网络（R-ELAN）：一种基于 ELAN 的改进的特征聚合模块，旨在解决优化挑战，尤其是在更大规模的以注意力为中心的模型中。R-ELAN 引入：
- 具有缩放的块级残差连接（类似于层缩放）。
- 一种重新设计的特征聚合方法，创建了一个类似瓶颈的结构。
优化的注意力机制架构：YOLO12 精简了标准注意力机制，以提高效率并与 YOLO 框架兼容。这包括：
- 使用 FlashAttention 来最大限度地减少内存访问开销。
- 移除位置编码，以获得更简洁、更快速的模型。
- 调整 MLP 比率（从典型的 4 调整到 1.2 或 2），以更好地平衡注意力和前馈层之间的计算。
- 减少堆叠块的深度以改进优化。
- 利用卷积运算（在适当的情况下）以提高其计算效率。
- 在注意力机制中添加一个7x7可分离卷积（“位置感知器”），以隐式地编码位置信息。
全面的任务支持: YOLO12 支持一系列核心计算机视觉任务：目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
增强的效率: 与许多先前的模型相比，以更少的参数实现了更高的准确率，从而证明了速度和准确率之间更好的平衡。
灵活部署: 专为跨各种平台部署而设计，从边缘设备到云基础设施。

主要改进

增强的特征提取:
- 区域注意力: 有效处理大型感受野，降低计算成本。
- 优化平衡：改进了注意力和前馈网络计算之间的平衡。
- R-ELAN：使用 R-ELAN 架构增强特征聚合。
优化创新：
- 残差连接：引入具有缩放的残差连接以稳定训练，尤其是在较大的模型中。
- 改进的特征集成：在 R-ELAN 中实现了一种改进的特征集成方法。
- FlashAttention: 整合 FlashAttention 以减少内存访问开销。
架构效率:
- 减少参数：与之前的许多模型相比，在保持或提高准确性的同时，实现了更低的参数计数。
- 简化的注意力机制：使用简化的注意力实现，避免了位置编码。
- 优化的 MLP 比率：调整 MLP 比率以更有效地分配计算资源。

前端代码展示

登录界面一小部分代码：

<template> <div class="login-container"> <!-- 工业检测背景 --> <div class="inspection-background"> <!-- 电路板网格 --> <div class="pcb-grid"> <div class="grid-line horizontal" v-for="n in 15" :key="`h-${n}`" :style="getGridLineStyle('h', n)"></div> <div class="grid-line vertical" v-for="n in 20" :key="`v-${n}`" :style="getGridLineStyle('v', n)"></div> <div class="grid-node" v-for="n in 40" :key="`node-${n}`" :style="getGridNodeStyle(n)"></div> </div> <!-- 检测扫描线 --> <div class="scan-lines"> <div class="scan-line" v-for="n in 5" :key="`scan-${n}`" :style="getScanLineStyle(n)"> <div class="scan-glow"></div> </div> </div> <!-- 绝缘子轮廓 --> <div class="insulator-outlines"> <div class="insulator" v-for="n in 8" :key="`insulator-${n}`" :style="getInsulatorStyle(n)"> <div class="insulator-disc" v-for="disc in 5" :key="`disc-${n}-${disc}`"></div> <div class="defect-marker" v-if="Math.random() > 0.7"></div> </div> </div> <!-- 数据流 --> <div class="data-stream"> <div class="stream-line" v-for="n in 12" :key="`stream-${n}`" :style="getStreamStyle(n)"> <span v-for="i in 20" :key="`data-${n}-${i}`"> {{ Math.random() > 0.5 ? '1' : '0' }} </span> </div> </div> <!-- 检测热点 --> <div class="detection-hotspots"> <div class="hotspot" v-for="n in 15" :key="`hotspot-${n}`" :style="getHotspotStyle(n)"> <div class="hotspot-pulse"></div> </div> </div> </div> <!-- 登录主容器 --> <div class="login-main"> <!-- 检测系统容器 --> <div class="system-container"> <div class="system-border"> <div class="corner corner-tl"></div> <div class="corner corner-tr"></div> <div class="corner corner-bl"></div> <div class="corner corner-br"></div> </div> <div class="system-glow"></div> <!-- 系统标志 --> <div class="system-brand"> <div class="brand-icon"> <div class="insulator-icon"> <div class="icon-discs"> <div class="disc" v-for="i in 4" :key="`disc-${i}`"></div> </div> <div class="icon-rod"></div> <div class="ai-core"> <div class="core-pulse"></div> </div> </div> <div class="icon-ring"></div> </div> <div class="brand-text"> <h1 class="system-title"> <span class="yolo-text">YOLO+DeepSeek</span> <span class="system-name">绝缘子缺陷检测系统</span> </h1> <p class="system-subtitle">工业视觉 · 智能巡检 · 实时监控</p> <p class="system-version">v5.2 · 深度神经网络版本</p> </div> </div> <!-- 登录面板 --> <div class="login-panel"> <div class="panel-border"> <div class="border-line top"></div> <div class="border-line bottom"></div> </div> <div class="panel-header"> <div class="header-indicator"> <div class="indicator-dot active"></div> <div class="indicator-dot"></div> <div class="indicator-dot"></div> </div> <h2>系统登录认证</h2> <div class="header-status"> <span class="status-text">在线</span> <div class="status-light"></div> </div> </div> <div class="panel-content"> <el-form :model="ruleForm" :rules="registerRules" ref="ruleFormRef"> <!-- 用户名输入 --> <el-form-item prop="username"> <div class="input-field"> <div class="field-label"> <div class="label-icon"> <div class="icon-pulse"></div> </div> <span>操作员ID</span> </div> <el-input v-model="ruleForm.username" placeholder="请输入操作员识别码" class="tech-input" size="large" @focus="onInputFocus" @blur="onInputBlur" /> <div class="field-underline"></div> </div> </el-form-item> <!-- 密码输入 --> <el-form-item prop="password"> <div class="input-field"> <div class="field-label"> <div class="label-icon"> <div class="icon-lock"></div> </div> <span>访问密钥</span> </div> <el-input v-model="ruleForm.password" type="password" placeholder="请输入安全访问密钥" show-password class="tech-input" size="large" @focus="onInputFocus" @blur="onInputBlur" /> <div class="field-underline"></div> </div> </el-form-item> <!-- 登录按钮 --> <el-form-item> <div class="login-action"> <el-button type="primary" class="detect-btn" @click="submitForm(ruleFormRef)" @mouseenter="onBtnHover" @mouseleave="onBtnLeave" > <div class="btn-content"> <div class="btn-icon"> <div class="scan-animation"></div> </div> <div class="btn-text"> <span class="text-main">启动检测系统</span> <span class="text-sub">INITIALIZING DETECTION</span> </div> </div> <div class="btn-glow"></div> <div class="btn-pulse"></div> </el-button> <div class="system-stats"> <div class="stat-item"> <span class="stat-label">检测精度</span> <span class="stat-value">99.4%</span> </div> <div class="stat-divider"></div> <div class="stat-item"> <span class="stat-label">响应时间</span> <span class="stat-value">24ms</span> </div> </div> </div> </el-form-item> </el-form> <!-- 系统选项 --> <div class="system-options"> <div class="option-group"> <router-link to="/register" class="option-item"> <div class="option-icon"> <div class="icon-add"></div> </div> <span>注册新账户</span> <div class="option-trail"></div> </router-link> </div> <div class="system-status"> <div class="status-item"> <div class="status-light active"></div> <span>检测服务正常</span> </div> <div class="status-item"> <div class="status-light"></div> <span>数据同步中...</span> </div> </div> </div> </div> </div> <!-- 检测信息 --> <div class="detection-info"> <div class="info-header"> <div class="header-line"></div> <h3>实时检测状态</h3> <div class="header-line"></div> </div> <div class="info-grid"> <div class="info-item"> <div class="info-icon"> <div class="icon-camera"></div> </div> </div> <div class="info-item"> <div class="info-icon"> <div class="icon-detection"></div> </div> <div class="info-content"> </div> </div> <div class="info-item"> <div class="info-icon"> <div class="icon-alert"></div> </div> </div> </div> </div> </div> </div> <!-- 浮动元素 --> <div class="floating-elements"> <!-- 检测坐标 --> <div class="detection-coordinates"> <div class="coordinate" v-for="n in 6" :key="`coord-${n}`" :style="getCoordStyle(n)"> {{ `X:${Math.floor(Math.random()*1000)} Y:${Math.floor(Math.random()*1000)}` }} </div> </div> <!-- 参数标签 --> <div class="parameter-labels"> <div class="parameter" v-for="n in 10" :key="`param-${n}`" :style="getParamStyle(n)"> {{ ['置信度','IoU','FPS','分辨率','阈值','延迟','精度','召回','F1','AP'][n-1] }}: {{ (Math.random()*100).toFixed(1) }} </div> </div> </div> </div> </template> <script lang="ts" setup> import { reactive, ref, computed, onMounted } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import { ElMessage } from 'element-plus'; import { useI18n } from 'vue-i18n'; import Cookies from 'js-cookie'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; import { initFrontEndControlRoutes } from '/@/router/frontEnd'; import { initBackEndControlRoutes } from '/@/router/backEnd'; import { Session } from '/@/utils/storage'; import { formatAxis } from '/@/utils/formatTime'; import { NextLoading } from '/@/utils/loading'; import type { FormInstance, FormRules } from 'element-plus'; import request from '/@/utils/request'; // 定义变量内容 const { t } = useI18n(); const storesThemeConfig = useThemeConfig(); const { themeConfig } = storeToRefs(storesThemeConfig); const route = useRoute(); const router = useRouter(); const formSize = ref('default'); const ruleFormRef = ref<FormInstance>(); // 定义表单数据 const ruleForm = reactive({ username: '', password: '', }); // 校验规则 const registerRules = reactive<FormRules>({ username: [ { required: true, message: '请输入操作员识别码', trigger: 'blur' }, { min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入访问密钥', trigger: 'blur' }, { min: 3, max: 30, message: '长度在6-30个字符', trigger: 'blur' }, ], }); // 背景样式生成函数 const getGridLineStyle = (type: 'h' | 'v', index: number) => { if (type === 'h') { return { top: `${(index / 15) * 100}%`, width: '100%', animationDelay: `${index * 0.1}s` }; } else { return { left: `${(index / 20) * 100}%`, height: '100%', animationDelay: `${index * 0.05}s` }; } }; const getGridNodeStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 2 + Math.random() * 4; const duration = 2 + Math.random() * 3; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${Math.random() * 2}s` }; }; const getScanLineStyle = (index: number) => { const left = Math.random() * 100; const duration = 3 + Math.random() * 2; const delay = index * 0.5; return { left: `${left}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; const getInsulatorStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const scale = 0.3 + Math.random() * 0.5; const rotation = Math.random() * 360; return { left: `${left}%`, top: `${top}%`, transform: `scale(${scale}) rotate(${rotation}deg)` }; }; const getStreamStyle = (index: number) => { const left = Math.random() * 100; const duration = 8 + Math.random() * 12; const delay = Math.random() * 5; const speed = 0.5 + Math.random() * 1.5; return { left: `${left}%`, animationDuration: `${duration / speed}s`, animationDelay: `${delay}s`, animationTimingFunction: `steps(${Math.floor(10 + Math.random() * 20)}, end)` }; }; const getHotspotStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 4 + Math.random() * 8; const duration = 1.5 + Math.random() * 2; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${Math.random() * 3}s` }; }; const getCoordStyle = (index: number) => { const left = Math.random() * 100; const duration = 15 + Math.random() * 20; const delay = Math.random() * 5; return { left: `${left}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s`, fontSize: `${10 + Math.random() * 6}px` }; }; const getParamStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const duration = 20 + Math.random() * 25; const delay = Math.random() * 8; return { left: `${left}%`, top: `${top}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s`, opacity: 0.05 + Math.random() * 0.15 }; };