智慧交通道-路缺陷检测系统 DjangoVue3 巡检维修管理平台RoadDefectNet 道路缺陷智能检测系统全套源码基于 YOLO 深度学习模型支持路面病害单图、批量、视频、摄像头实时检测自动识别统计缺陷类型与数量。采用 Django 后端 Vue3 前端前后端分离架构包含用户端 管理端双界面集成巡检路段管理、维修任务流转、AI 养护建议、知识问答、数据看板、CSV 导出全功能。配套 MySQL 数据库、一键启动脚本、部署教程、初始化 SQL 文件代码注释完整环境配置简单新手可直接运行使用。适用于计算机视觉学习、道路巡检实战、Python 全栈开发、课程参考支持二次开发修改功能完整可直接部署使用。道路缺陷检测路面病害识别YOLO 目标检测道路巡检系统维修任务管理Django 项目Vue3 项目前后端分离计算机视觉Python 深度学习视频检测摄像头检测数据看板AI 养护建议管理后台实战项目源码部署教程一键启动路面裂缝检测道路养护系统111RoadDefectNet系统采用了典型的前后端分离架构结合了计算机视觉YOLO与Web 业务逻辑Django Vue3。核心架构搭建指南以及最关键模块的详细代码实现帮助你快速从零构建这个系统。1. 系统架构设计前端Vue 3 Vite Element PlusUI 组件库 ECharts数据可视化。后端Django Django REST Framework (DRF)。AI 核心Ultralytics YOLOv8用于识别坑槽、裂缝等。数据库MySQL。2. 数据库设计 (MySQL)“个人中心”、“检测记录”、“数据看板”设计以下核心模型。文件路径backend/road_defect/models.pyfromdjango.dbimportmodelsfromdjango.contrib.auth.modelsimportAbstractUser# 1. 用户表 (扩展 Django 自带用户)classUser(AbstractUser):phonemodels.CharField(max_length11,blankTrue,nullTrue,verbose_name手机号)avatarmodels.ImageField(upload_toavatars/,defaultavatars/default.png,verbose_name头像)rolemodels.CharField(max_length10,choices[(admin,管理员),(user,普通用户)],defaultuser)# 2. 巡检路段表classRoadSection(models.Model):namemodels.CharField(max_length100,verbose_name路段名称)location_descmodels.CharField(max_length255,verbose_name位置描述)created_atmodels.DateTimeField(auto_now_addTrue)def__str__(self):returnself.name# 3. 检测记录表 (核心数据)classDetectionRecord(models.Model):usermodels.ForeignKey(User,on_deletemodels.CASCADE,verbose_name检测人)sectionmodels.ForeignKey(RoadSection,on_deletemodels.SET_NULL,nullTrue,blankTrue,verbose_name所属路段)imagemodels.ImageField(upload_todetections/%Y%m%d/,verbose_name原图)result_imagemodels.ImageField(upload_todetections/%Y%m%d/,verbose_name结果图,blankTrue,nullTrue)# 统计数据defect_countmodels.IntegerField(default0,verbose_name缺陷数量)defect_typesmodels.JSONField(defaultdict,verbose_name缺陷类型统计)# 如 {pothole: 2, crack: 1}confidencemodels.FloatField(default0.0,verbose_name平均置信度)health_scoremodels.IntegerField(default100,verbose_name道路健康评分)created_atmodels.DateTimeField(auto_now_addTrue,verbose_name检测时间)process_timemodels.FloatField(default0.0,verbose_name耗时(s))classMeta:ordering[-created_at]3. 后端核心逻辑 (Django YOLO)这是系统的“大脑”负责接收图片、调用 YOLO 模型进行检测并保存结果。文件路径backend/road_defect/views.pyimportosimporttimeimporttorchfromrest_framework.viewsimportAPIViewfromrest_framework.responseimportResponsefromrest_framework.parsersimportMultiPartParser,FormParserfrom.modelsimportDetectionRecord,RoadSectionfrom.serializersimportDetectionRecordSerializer# 加载 YOLO 模型 (建议在启动时加载一次不要每次请求都加载)# 假设你已经训练好了 best.ptMODEL_PATHos.path.join(os.getcwd(),models,best.pt)modeltorch.hub.load(ultralytics/yolov5,custom,pathMODEL_PATH)# 这里也可以用 yolov8classDetectView(APIView):parser_classes(MultiPartParser,FormParser)defpost(self,request,*args,**kwargs):start_timetime.time()# 1. 获取参数image_filerequest.data.get(image)section_idrequest.data.get(section_id)ifnotimage_file:returnResponse({error:请上传图片},status400)# 2. YOLO 推理resultsmodel(image_file)# 3. 解析结果# 获取标注后的图片路径result_img_pathresults.save()[0]# 统计缺陷detectionsresults.pandas().xyxy[0]# 获取 dataframedefect_countlen(detections)# 简单计算健康分 (假设每发现一个缺陷扣分)health_scoremax(0,100-(defect_count*10))# 统计各类别数量type_countsdetections[name].value_counts().to_dict()# 4. 保存到数据库sectionRoadSection.objects.get(idsection_id)ifsection_idelseNonerecordDetectionRecord.objects.create(userrequest.user,sectionsection,imageimage_file,result_imageresult_img_path,defect_countdefect_count,defect_typestype_counts,confidencefloat(detections[confidence].mean())ifdefect_count0else0,health_scorehealth_score,process_timetime.time()-start_time)# 5. 返回结果serializerDetectionRecordSerializer(record)returnResponse(serializer.data)# 数据看板接口classDashboardView(APIView):defget(self,request):# 这里编写 ECharts 需要的聚合数据统计逻辑# 例如SELECT count(*) FROM detection_record GROUP BY date...data{total_records:DetectionRecord.objects.count(),total_defects:DetectionRecord.objects.aggregate(models.Sum(defect_count))[defect_count__sum],# ... 其他统计}returnResponse(data)4. 前端核心实现 (Vue 3 ECharts)前端主要负责文件上传、展示检测结果和绘制看板图表。4.1 检测页面 (上传图片 结果展示)文件路径frontend/src/views/Detection.vuetemplate div classdetection-container !-- 左侧设置 -- div classsidebar el-select v-modelsectionId placeholder选择路段 el-option v-forsec in sections :keysec.id :labelsec.name :valuesec.id / /el-select el-upload classupload-box drag action/api/detect/ :data{ section_id: sectionId } :on-successhandleSuccess nameimage el-iconUploadFilled //el-icon div classel-upload__text点击或拖拽上传巡检图像/div /el-upload /div !-- 右侧结果 -- div classresult-area div v-ifresult classresult-card h3检测结果/h3 !-- 展示YOLO处理后的图片 -- img :srcresult.result_image alt检测结果 / div classstats div classstat-item span classlabel缺陷数量/span span classvalue{{ result.defect_count }}/span /div div classstat-item span classlabel健康评分/span span classvalue :classscoreClass{{ result.health_score }}/span /div /div /div /div /div /template script setup import { ref } from vue import { ElMessage } from element-plus const sectionId ref() const result ref(null) const sections ref([{id: 1, name: 校园主干道}, {id: 2, name: 北门桥梁段}]) // 模拟数据 const handleSuccess (res) { result.value res ElMessage.success(检测完成) } const scoreClass computed(() { if (!result.value) return if (result.value.health_score 60) return low return high }) /script style scoped /* 简单的样式布局 */ .detection-container { display: flex; } .sidebar { width: 300px; padding: 20px; } .result-area { flex: 1; padding: 20px; background: #f5f7fa; } .low { color: red; font-weight: bold; } /style4.2 数据看板 (ECharts 饼图/折线图)文件路径frontend/src/views/Dashboard.vuetemplate div classdashboard div refpieChart stylewidth: 600px; height: 400px;/div div reflineChart stylewidth: 600px; height: 400px;/div /div /template script setup import { onMounted, ref } from vue import * as echarts from echarts import axios from axios const pieChart ref(null) const lineChart ref(null) onMounted(async () { // 获取后端统计数据 const { data } await axios.get(/api/dashboard/) // 1. 渲染缺陷类别分布 (饼图) const pie echarts.init(pieChart.value) pie.setOption({ title: { text: 缺陷类别分布 }, tooltip: { trigger: item }, series: [ { name: 缺陷, type: pie, radius: 50%, data: Object.entries(data.defect_type_dist).map(([name, value]) ({ name, value })), emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } } ] }) // 2. 渲染近7天趋势 (折线图) const line echarts.init(lineChart.value) line.setOption({ title: { text: 近7天缺陷趋势 }, xAxis: { type: category, data: data.last_7_days.dates }, yAxis: { type: value }, series: [{ data: data.last_7_days.counts, type: line, smooth: true, areaStyle: {} }] }) }) /script5. 如何运行准备模型你需要使用 YOLOv8 训练好一个识别路面裂缝/坑槽的模型保存为best.pt并放入后端目录。后端启动cdbackend python manage.py runserver前端启动cdfrontendnpminstallnpmrun dev这套代码涵盖了从数据库设计到AI 推理再到前端展示的完整闭环需根据具体的业务需求如具体的缺陷类别、UI 细节进行微调即可。