注意：本系统为演示版本，部分功能为模拟数据，实际部署需与后端服务集成。
像风之翼公路局巡检服务平台
项目概述
像风之翼公路局巡检服务平台是一个现代化的无人机巡检管理与监控系统，专为公路局巡检作业设计。平台通过直观的3D可视化界面、实时飞行监控和智能任务管理，实现了无人机巡检作业的集中化、智能化管理。
功能特点
🎯 核心功能
实时飞行监控：3D可视化地图展示无人机实时位置与航线
任务管理：支持多任务并行执行与进度跟踪
设备状态监控：实时显示无人机和机场在线状态
智能告警：电量、风速等多维度预警系统
数据统计分析：巡检任务统计与病害数据分析
🎨 界面特色
玻璃拟态设计：现代化UI设计，采用玻璃拟态风格
3D城市地图：动态生成的3D建筑群模拟真实环境
动态进度指示：SVG动画进度条，实时任务状态展示
响应式布局：适配不同屏幕尺寸
交互动效：丰富的悬停、点击反馈效果
📊 数据可视化
实时航线动画展示
无人机状态弧线进度图
统计卡片与趋势分析
任务进度环形图
技术栈
前端技术
HTML5 + CSS3 + JavaScript
Tailwind CSS - 实用型CSS框架
Font Awesome 6 - 图标库
Google Fonts - 中文字体（Noto Sans SC）
交互效果
纯CSS 3D变换与动画
SVG路径动画与进度指示
JavaScript动态内容生成
实时数据模拟更新
项目结构
project/ ├── index.html # 主页面 ├── README.md # 项目说明文件 └── 依赖资源（CDN）： ├── Tailwind CSS # 样式框架 ├── Font Awesome # 图标库 └── Google Fonts # 字体核心组件说明
1. 侧边栏导航
模块化菜单分类（基础、操作、数据、管理）
用户状态显示
当前页面高亮指示
2. 统计仪表板
在线无人机/机场数量统计
今日任务/病害数据
趋势对比分析
3. 任务管理
快捷操作按钮
任务进度可视化
多任务并行状态显示
4. 3D飞行监控
动态生成的3D城市模型
多航线动画模拟
无人机实时位置追踪
交互式地图控件
5. 实时通知
分级告警系统（红/橙/蓝/绿）
时间戳显示
消息聚合展示
安装与使用
快速启动
克隆或下载项目文件
直接在浏览器中打开
index.html无需额外构建步骤，所有依赖通过CDN加载
开发环境
# 项目为纯前端静态页面，无需特殊环境配置 # 可在任意HTTP服务器中运行 python -m http.server 8000 # 或 npx serve .自定义配置
样式定制
修改CSS变量调整主题色
编辑
<style>标签内的颜色渐变定义调整玻璃拟态效果的透明度与模糊度
数据模拟
在
<script>标签中修改模拟数据：
无人机数量与状态
任务进度百分比
3D建筑生成参数
航线动画路径
图标替换
更新Font Awesome图标类名
调整DiceBear头像生成URL参数
自定义SVG图形
浏览器兼容性
✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
支持现代浏览器，需启用JavaScript。
性能优化
使用CSS硬件加速
SVG替代图片资源
按需加载动画
最小化重绘与重排
扩展功能建议
短期计划
集成真实地图API（如高德、百度地图）
添加WebSocket实时数据通信
实现任务历史记录查询
增加多用户权限管理
长期规划
后端服务集成
移动端适配
离线模式支持
多语言国际化
数据导出与报表生成
html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>像风之翼公路局巡检服务平台</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); body { font-family: 'Noto Sans SC', sans-serif; background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #dbeafe 100%); overflow: hidden; } /* 玻璃拟态卡片 */ .glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08), 0 1px 3px rgba(0,0,0,0.05); } .sidebar-item { transition: all 0.3s ease; } .sidebar-item:hover, .sidebar-item.active { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .sidebar-item.active i { color: white; } /* 圆形进度条 */ .circle-progress { transform: rotate(-90deg); } .circle-progress-bg { fill: none; stroke: #e2e8f0; stroke-width: 6; } .circle-progress-bar { fill: none; stroke: url(#gradientBlue); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } /* 弧形进度条（底部无人机卡片） */ .arc-progress { transform: rotate(180deg); } .arc-bg { fill: none; stroke: #e2e8f0; stroke-width: 8; stroke-linecap: round; } .arc-bar { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } /* 3D 城市地图模拟 */ .map-container { perspective: 1000px; overflow: hidden; position: relative; } .city-3d { width: 120%; height: 120%; position: absolute; top: -10%; left: -10%; transform: rotateX(45deg) rotateZ(-15deg) scale(0.9); transform-style: preserve-3d; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } .building { position: absolute; background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%); box-shadow: -4px -4px 10px rgba(0,0,0,0.1); transform-style: preserve-3d; } .building::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, transparent 50%); } .building-roof { position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: #e2e8f0; transform: skewX(-45deg); transform-origin: bottom; } /* 航线动画 */ .flight-path { stroke-dasharray: 10, 8; animation: dash 20s linear infinite; } @keyframes dash { to { stroke-dashoffset: -200; } } .drone-icon { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); animation: hover 3s ease-in-out infinite; } @keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* 滚动条美化 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .notification-item { transition: all 0.3s; border-left: 3px solid transparent; } .notification-item:hover { background: rgba(59, 130, 246, 0.05); border-left-color: #3b82f6; } .stat-card-icon { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 2px solid rgba(59, 130, 246, 0.1); } .pulse-dot { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } </style> <base target="_blank"> </head> <body class="h-screen w-screen flex text-slate-700"> <!-- SVG 渐变定义 --> <svg width="0" height="0" style="position:absolute;"> <defs> <linearGradient id="gradientBlue" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" /> <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" /> </linearGradient> <linearGradient id="gradientOrange" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" /> <stop offset="100%" style="stop-color:#f97316;stop-opacity:1" /> </linearGradient> <linearGradient id="gradientGreen" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" /> <stop offset="100%" style="stop-color:#34d399;stop-opacity:1" /> </linearGradient> </defs> </svg> <!-- 左侧边栏 --> <aside class="w-64 glass-card flex flex-col z-20 h-full"> <!-- Logo区域 --> <div class="p-6 flex items-center gap-3 border-b border-slate-100"> <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white shadow-lg shadow-blue-200"> <i class="fa-solid fa-paper-plane"></i> </div> <div> <h1 class="font-bold text-slate-800 text-sm leading-tight">像风之翼</h1> <p class="text-xs text-slate-400">公路局巡检服务平台</p> </div> </div> <!-- 用户信息 --> <div class="px-6 py-4 flex items-center gap-3 border-b border-slate-100"> <div class="relative"> <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=pilot1" alt="avatar" class="w-10 h-10 rounded-full border-2 border-blue-100"> <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white"></div> </div> <div> <p class="font-medium text-sm text-slate-800">像风之翼</p> <p class="text-xs text-slate-400">高级飞手</p> </div> </div> <!-- 菜单 --> <nav class="flex-1 overflow-y-auto py-4 px-3 space-y-6"> <!-- 基础 --> <div> <p class="px-3 text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wider">基础</p> <ul class="space-y-1"> <li class="sidebar-item active flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm font-medium"> <i class="fa-solid fa-gauge-high w-5 text-center"></i> <span>工作台</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-server w-5 text-center text-slate-400"></i> <span>设备管理</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-route w-5 text-center text-slate-400"></i> <span>航线管理</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-clipboard-list w-5 text-center text-slate-400"></i> <span>任务管理</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-microchip w-5 text-center text-slate-400"></i> <span>算法管理</span> </li> </ul> </div> <!-- 操作 --> <div> <p class="px-3 text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wider">操作</p> <ul class="space-y-1"> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-gamepad w-5 text-center text-slate-400"></i> <span>飞行控制</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-video w-5 text-center text-slate-400"></i> <span>实时监控</span> </li> </ul> </div> <!-- 数据 --> <div> <p class="px-3 text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wider">数据</p> <ul class="space-y-1"> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-brain w-5 text-center text-slate-400"></i> <span>AI识别分析</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-chart-pie w-5 text-center text-slate-400"></i> <span>报告统计</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-flag-checkered w-5 text-center text-slate-400"></i> <span>巡检里程碑</span> </li> </ul> </div> <!-- 管理 --> <div> <p class="px-3 text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wider">管理</p> <ul class="space-y-1"> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-bell w-5 text-center text-slate-400"></i> <span>消息中心</span> </li> <li class="sidebar-item flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer text-sm text-slate-600 hover:text-white"> <i class="fa-solid fa-gear w-5 text-center text-slate-400"></i> <span>设备系统设置</span> </li> </ul> </div> </nav> </aside> <!-- 主内容区 --> <main class="flex-1 flex flex-col h-full overflow-hidden relative"> <!-- 顶部导航 --> <header class="h-16 glass-card flex items-center justify-between px-6 z-10 shrink-0"> <div class="flex items-center gap-2 text-sm text-slate-500"> <i class="fa-solid fa-house text-blue-500"></i> <span class="text-slate-300">/</span> <span class="font-medium text-slate-700">首页/仪表盘</span> </div> <div class="flex items-center gap-6"> <button class="relative text-slate-500 hover:text-blue-500 transition"> <i class="fa-regular fa-bell text-lg"></i> <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-[10px] text-white flex items-center justify-center">3</span> </button> <div class="flex items-center gap-2 cursor-pointer hover:bg-white/50 px-3 py-1.5 rounded-lg transition"> <i class="fa-regular fa-user text-slate-500"></i> <span class="text-sm text-slate-600">个人中心</span> </div> <button class="flex items-center gap-2 text-sm text-slate-500 hover:text-red-500 transition"> <i class="fa-solid fa-arrow-right-from-bracket"></i> <span>退出系统</span> </button> </div> </header> <!-- 滚动内容 --> <div class="flex-1 overflow-auto p-5"> <div class="max-w-[1600px] mx-auto space-y-5"> <!-- 第一行：统计卡片 --> <div class="grid grid-cols-4 gap-5"> <div class="glass-card rounded-2xl p-5 flex items-center justify-between hover:shadow-lg transition-shadow"> <div> <p class="text-sm text-slate-500 mb-1">在线无人机</p> <p class="text-3xl font-bold text-slate-800">6</p> <p class="text-xs text-green-500 mt-1 font-medium"><i class="fa-solid fa-arrow-trend-up mr-1"></i>较昨日+2</p> </div> <div class="stat-card-icon w-14 h-14 rounded-2xl flex items-center justify-center text-blue-500 text-2xl"> <i class="fa-solid fa-plane-up"></i> </div> </div> <div class="glass-card rounded-2xl p-5 flex items-center justify-between hover:shadow-lg transition-shadow"> <div> <p class="text-sm text-slate-500 mb-1">在线机场</p> <p class="text-3xl font-bold text-slate-800">12</p> <p class="text-xs text-green-500 mt-1 font-medium"><i class="fa-solid fa-arrow-trend-up mr-1"></i>较昨日+2</p> </div> <div class="stat-card-icon w-14 h-14 rounded-2xl flex items-center justify-center text-blue-500 text-2xl"> <i class="fa-solid fa-building"></i> </div> </div> <div class="glass-card rounded-2xl p-5 flex items-center justify-between hover:shadow-lg transition-shadow"> <div> <p class="text-sm text-slate-500 mb-1">今日任务</p> <p class="text-3xl font-bold text-slate-800">36</p> <p class="text-xs text-green-500 mt-1 font-medium"><i class="fa-solid fa-arrow-trend-up mr-1"></i>较昨日+2</p> </div> <div class="stat-card-icon w-14 h-14 rounded-2xl flex items-center justify-center text-blue-500 text-2xl"> <i class="fa-solid fa-clipboard-check"></i> </div> </div> <div class="glass-card rounded-2xl p-5 flex items-center justify-between hover:shadow-lg transition-shadow"> <div> <p class="text-sm text-slate-500 mb-1">今日病害</p> <p class="text-3xl font-bold text-slate-800">98</p> <p class="text-xs text-red-500 mt-1 font-medium"><i class="fa-solid fa-arrow-trend-up mr-1"></i>较昨日+2</p> </div> <div class="stat-card-icon w-14 h-14 rounded-2xl flex items-center justify-center text-blue-500 text-2xl"> <i class="fa-solid fa-triangle-exclamation"></i> </div> </div> </div> <!-- 第二行：任务进度 --> <div class="grid grid-cols-12 gap-5"> <!-- 左侧快捷操作 --> <div class="col-span-3 glass-card rounded-2xl p-5"> <h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2"> <i class="fa-solid fa-bars-progress text-blue-500"></i> 今日任务进度 </h3> <div class="grid grid-cols-2 gap-3"> <button class="flex flex-col items-center gap-2 p-4 rounded-xl bg-blue-50 hover:bg-blue-100 transition text-blue-600 group"> <div class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition"> <i class="fa-solid fa-gamepad"></i> </div> <span class="text-xs font-medium">飞行控制</span> </button> <button class="flex flex-col items-center gap-2 p-4 rounded-xl bg-orange-50 hover:bg-orange-100 transition text-orange-600 group"> <div class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition"> <i class="fa-solid fa-server"></i> </div> <span class="text-xs font-medium">设备状态</span> </button> <button class="flex flex-col items-center gap-2 p-4 rounded-xl bg-purple-50 hover:bg-purple-100 transition text-purple-600 group"> <div class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition"> <i class="fa-solid fa-file-lines"></i> </div> <span class="text-xs font-medium">生成报告</span> </button> <button class="flex flex-col items-center gap-2 p-4 rounded-xl bg-cyan-50 hover:bg-cyan-100 transition text-cyan-600 group"> <div class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition"> <i class="fa-solid fa-plus"></i> </div> <span class="text-xs font-medium">新建任务</span> </button> </div> </div> <!-- 右侧任务卡片 --> <div class="col-span-9 glass-card rounded-2xl p-5"> <h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2"> <i class="fa-solid fa-list-check text-blue-500"></i> 今日任务进度 </h3> <div class="grid grid-cols-3 gap-4"> <!-- 任务1 --> <div class="bg-gradient-to-br from-blue-50 to-white rounded-xl p-4 border border-blue-100 hover:shadow-md transition"> <div class="flex items-center justify-between mb-3"> <span class="text-xs font-bold text-blue-600 bg-blue-100 px-2 py-1 rounded">80%</span> <div class="w-12 h-12 relative"> <svg class="w-12 h-12 circle-progress" viewBox="0 0 44 44"> <circle class="circle-progress-bg" cx="22" cy="22" r="18"/> <circle class="circle-progress-bar" cx="22" cy="22" r="18" stroke-dasharray="113.1" stroke-dashoffset="22.6"/> </svg> <div class="absolute inset-0 flex items-center justify-center"> <i class="fa-solid fa-plane text-blue-500 text-xs"></i> </div> </div> </div> <h4 class="font-bold text-sm text-slate-800 mb-1">G15沈海高速日常巡检</h4> <p class="text-xs text-slate-500">UAV-001 · 已飞行45分钟 · 剩余12分钟</p> </div> <!-- 任务2 --> <div class="bg-gradient-to-br from-orange-50 to-white rounded-xl p-4 border border-orange-100 hover:shadow-md transition"> <div class="flex items-center justify-between mb-3"> <span class="text-xs font-bold text-orange-600 bg-orange-100 px-2 py-1 rounded">80%</span> <div class="w-12 h-12 relative"> <svg class="w-12 h-12 circle-progress" viewBox="0 0 44 44"> <circle class="circle-progress-bg" cx="22" cy="22" r="18"/> <circle class="circle-progress-bar" cx="22" cy="22" r="18" stroke="url(#gradientOrange)" stroke-dasharray="113.1" stroke-dashoffset="22.6"/> </svg> <div class="absolute inset-0 flex items-center justify-center"> <i class="fa-solid fa-bridge text-orange-500 text-xs"></i> </div> </div> </div> <h4 class="font-bold text-sm text-slate-800 mb-1">S26诸永高速桥梁检测</h4> <p class="text-xs text-slate-500">UAV-003 · 已飞行32分钟 · 剩余48分钟</p> </div> <!-- 任务3 --> <div class="bg-gradient-to-br from-cyan-50 to-white rounded-xl p-4 border border-cyan-100 hover:shadow-md transition"> <div class="flex items-center justify-between mb-3"> <span class="text-xs font-bold text-cyan-600 bg-cyan-100 px-2 py-1 rounded">80%</span> <div class="w-12 h-12 relative"> <svg class="w-12 h-12 circle-progress" viewBox="0 0 44 44"> <circle class="circle-progress-bg" cx="22" cy="22" r="18"/> <circle class="circle-progress-bar" cx="22" cy="22" r="18" stroke="url(#gradientGreen)" stroke-dasharray="113.1" stroke-dashoffset="22.6"/> </svg> <div class="absolute inset-0 flex items-center justify-center"> <i class="fa-solid fa-temperature-half text-cyan-500 text-xs"></i> </div> </div> </div> <h4 class="font-bold text-sm text-slate-800 mb-1">G60沪昆高速夜间热成像巡检</h4> <p class="text-xs text-slate-500">UAV-007 · 已飞行95分钟 · 即将完成</p> </div> </div> </div> </div> <!-- 第三行：地图 + 通知 --> <div class="grid grid-cols-12 gap-5"> <!-- 地图区域 --> <div class="col-span-9 glass-card rounded-2xl p-5 flex flex-col"> <div class="flex items-center justify-between mb-3"> <div class="flex items-center gap-2"> <i class="fa-solid fa-map-location-dot text-blue-500"></i> <h3 class="font-bold text-slate-800">实时飞行监控</h3> <span class="text-xs text-slate-400">（注：当前执行任务的无人机实时位置及所飞行航线）</span> </div> <button class="px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg text-xs font-medium hover:bg-blue-100 transition"> <i class="fa-solid fa-expand mr-1"></i>全屏显示 </button> </div> <!-- 3D 地图模拟 --> <div class="relative h-[420px] rounded-xl overflow-hidden bg-gradient-to-b from-slate-100 to-slate-200 border border-slate-200"> <!-- 模拟城市背景 --> <div class="absolute inset-0" style="background-image: linear-gradient(rgba(148,163,184,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.1) 1px, transparent 1px); background-size: 40px 40px;"> </div> <!-- 3D 建筑物模拟 --> <div class="absolute inset-0 overflow-hidden" id="cityMap"> <!-- 建筑物由 JS 生成 --> </div> <!-- SVG 航线层 --> <svg class="absolute inset-0 w-full h-full pointer-events-none" style="z-index: 10;"> <!-- 黄色航线 --> <path d="M 150 350 Q 400 200 700 280 T 900 100" fill="none" stroke="#fbbf24" stroke-width="3" class="flight-path" opacity="0.8"/> <!-- 绿色航线 --> <path d="M 100 300 Q 300 350 500 250 T 850 200" fill="none" stroke="#34d399" stroke-width="3" class="flight-path" opacity="0.8" style="animation-delay: -5s;"/> <!-- 蓝色航线 --> <path d="M 200 400 Q 450 300 650 320 T 800 150" fill="none" stroke="#60a5fa" stroke-width="3" class="flight-path" opacity="0.8" style="animation-delay: -10s;"/> <!-- 无人机图标 --> <g class="drone-icon" style="offset-path: path('M 150 350 Q 400 200 700 280 T 900 100'); offset-distance: 30%;"> <circle cx="0" cy="0" r="12" fill="white" stroke="#3b82f6" stroke-width="2"/> <text x="0" y="4" text-anchor="middle" font-size="10" fill="#3b82f6"><i class="fa-solid fa-plane"></i></text> </g> </svg> <!-- 无人机标签 --> <div class="absolute top-[30%] left-[45%] z-20"> <div class="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-lg border border-blue-200 flex items-center gap-2"> <i class="fa-solid fa-plane text-blue-500 text-xs"></i> <span class="text-xs font-bold text-slate-700">UAV-001</span> </div> </div> <div class="absolute top-[50%] left-[60%] z-20"> <div class="bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg shadow-lg border border-orange-200 flex items-center gap-2"> <i class="fa-solid fa-plane text-orange-500 text-xs"></i> <span class="text-xs font-bold text-slate-700">UAV-003</span> </div> </div> <!-- 地图控件 --> <div class="absolute bottom-4 right-4 flex flex-col gap-2 z-20"> <button class="w-8 h-8 bg-white rounded-lg shadow flex items-center justify-center text-slate-600 hover:text-blue-500"><i class="fa-solid fa-plus"></i></button> <button class="w-8 h-8 bg-white rounded-lg shadow flex items-center justify-center text-slate-600 hover:text-blue-500"><i class="fa-solid fa-minus"></i></button> <button class="w-8 h-8 bg-white rounded-lg shadow flex items-center justify-center text-slate-600 hover:text-blue-500"><i class="fa-solid fa-location-crosshairs"></i></button> </div> </div> <!-- 底部无人机状态栏 --> <div class="grid grid-cols-3 gap-4 mt-4"> <!-- UAV-001 --> <div class="bg-white rounded-xl p-3 border border-slate-100 flex items-center gap-3 shadow-sm"> <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center"> <i class="fa-solid fa-plane-up text-slate-600"></i> </div> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <span class="font-bold text-sm text-slate-800">UAV-001</span> <span class="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-600 rounded font-medium">执行中</span> </div> <p class="text-[10px] text-slate-400 mb-1">G15沈海高速</p> </div> <div class="relative w-14 h-8"> <svg class="w-14 h-8 arc-progress" viewBox="0 0 60 30"> <path class="arc-bg" d="M 5 28 A 25 25 0 0 1 55 28"/> <path class="arc-bar" stroke="url(#gradientGreen)" d="M 5 28 A 25 25 0 0 1 55 28" stroke-dasharray="78.5" stroke-dashoffset="17.3"/> </svg> <span class="absolute bottom-0 left-1/2 -translate-x-1/2 text-[10px] font-bold text-slate-700">78%</span> </div> </div> <!-- UAV-003 --> <div class="bg-white rounded-xl p-3 border border-slate-100 flex items-center gap-3 shadow-sm"> <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center"> <i class="fa-solid fa-plane-up text-slate-600"></i> </div> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <span class="font-bold text-sm text-slate-800">UAV-003</span> <span class="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-600 rounded font-medium">执行中</span> </div> <p class="text-[10px] text-slate-400 mb-1">G15沈海高速</p> </div> <div class="relative w-14 h-8"> <svg class="w-14 h-8 arc-progress" viewBox="0 0 60 30"> <path class="arc-bg" d="M 5 28 A 25 25 0 0 1 55 28"/> <path class="arc-bar" stroke="url(#gradientOrange)" d="M 5 28 A 25 25 0 0 1 55 28" stroke-dasharray="78.5" stroke-dashoffset="63.6"/> </svg> <span class="absolute bottom-0 left-1/2 -translate-x-1/2 text-[10px] font-bold text-slate-700">19%</span> </div> </div> <!-- UAV-001 again --> <div class="bg-white rounded-xl p-3 border border-slate-100 flex items-center gap-3 shadow-sm"> <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center"> <i class="fa-solid fa-plane-up text-slate-600"></i> </div> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <span class="font-bold text-sm text-slate-800">UAV-001</span> <span class="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-600 rounded font-medium">执行中</span> </div> <p class="text-[10px] text-slate-400 mb-1">G15沈海高速</p> </div> <div class="relative w-14 h-8"> <svg class="w-14 h-8 arc-progress" viewBox="0 0 60 30"> <path class="arc-bg" d="M 5 28 A 25 25 0 0 1 55 28"/> <path class="arc-bar" stroke="url(#gradientGreen)" d="M 5 28 A 25 25 0 0 1 55 28" stroke-dasharray="78.5" stroke-dashoffset="17.3"/> </svg> <span class="absolute bottom-0 left-1/2 -translate-x-1/2 text-[10px] font-bold text-slate-700">78%</span> </div> </div> </div> </div> <!-- 右侧通知 --> <div class="col-span-3 glass-card rounded-2xl p-5 flex flex-col h-full"> <div class="flex items-center justify-between mb-4"> <h3 class="font-bold text-slate-800 flex items-center gap-2"> <i class="fa-regular fa-bell text-blue-500"></i> 消息通知 </h3> <button class="text-xs text-blue-500 hover:text-blue-600 font-medium">查看更多</button> </div> <div class="flex-1 overflow-y-auto space-y-2 pr-1"> <!-- 通知1 --> <div class="notification-item bg-white rounded-xl p-3 cursor-pointer"> <div class="flex items-start gap-2"> <div class="w-2 h-2 rounded-full bg-red-500 mt-1.5 shrink-0 pulse-dot"></div> <div> <p class="text-sm font-medium text-slate-800">UAV-005 电量不足</p> <p class="text-xs text-slate-500 mt-0.5">当前电量 23%，已触发自动返航</p> <p class="text-[10px] text-slate-400 mt-1">2分钟前</p> </div> </div> </div> <!-- 通知2 --> <div class="notification-item bg-white rounded-xl p-3 cursor-pointer"> <div class="flex items-start gap-2"> <div class="w-2 h-2 rounded-full bg-orange-400 mt-1.5 shrink-0"></div> <div> <p class="text-sm font-medium text-slate-800">UAV-003 风速警告</p> <p class="text-xs text-slate-500 mt-0.5">当前区域风速 12m/s，建议降低高度</p> <p class="text-[10px] text-slate-400 mt-1">5分钟前</p> </div> </div> </div> <!-- 通知3 --> <div class="notification-item bg-white rounded-xl p-3 cursor-pointer"> <div class="flex items-start gap-2"> <div class="w-2 h-2 rounded-full bg-blue-400 mt-1.5 shrink-0"></div> <div> <p class="text-sm font-medium text-slate-800">任务完成</p> <p class="text-xs text-slate-500 mt-0.5">G15沈海高速日常巡检已完成</p> <p class="text-[10px] text-slate-400 mt-1">15分钟前</p> </div> </div> </div> <!-- 通知4 --> <div class="notification-item bg-white rounded-xl p-3 cursor-pointer"> <div class="flex items-start gap-2"> <div class="w-2 h-2 rounded-full bg-green-400 mt-1.5 shrink-0"></div> <div> <p class="text-sm font-medium text-slate-800">系统更新</p> <p class="text-xs text-slate-500 mt-0.5">巡检平台 V2.3 已更新</p> <p class="text-[10px] text-slate-400 mt-1">1小时前</p> </div> </div> </div> <!-- 通知5 --> <div class="notification-item bg-white rounded-xl p-3 cursor-pointer"> <div class="flex items-start gap-2"> <div class="w-2 h-2 rounded-full bg-red-500 mt-1.5 shrink-0"></div> <div> <p class="text-sm font-medium text-slate-800">UAV-005 电量不足</p> <p class="text-xs text-slate-500 mt-0.5">当前电量 23%，已触发自动返航</p> <p class="text-[10px] text-slate-400 mt-1">2分钟前</p> </div> </div> </div> </div> </div> </div> </div> </div> </main> <script> // 生成 3D 城市建筑 const cityMap = document.getElementById('cityMap'); const buildingCount = 40; for (let i = 0; i < buildingCount; i++) { const building = document.createElement('div'); const width = 30 + Math.random() * 50; const height = 40 + Math.random() * 120; const left = Math.random() * 100; const top = Math.random() * 100; const hue = 210 + Math.random() * 20; // 蓝灰色系 building.className = 'building'; building.style.cssText = ` width: ${width}px; height: ${height}px; left: ${left}%; top: ${top}%; background: linear-gradient(180deg, hsl(${hue}, 20%, ${85 + Math.random() * 10}%) 0%, hsl(${hue}, 15%, ${70 + Math.random() * 10}%) 100%); opacity: 0.6; z-index: 1; `; const roof = document.createElement('div'); roof.className = 'building-roof'; roof.style.background = `hsl(${hue}, 20%, 90%)`; building.appendChild(roof); cityMap.appendChild(building); } // 动态时间更新 function updateTime() { const now = new Date(); const timeStr = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }); // 可以在这里更新时间显示 } setInterval(updateTime, 1000); // 模拟无人机位置微调 setInterval(() => { const drones = document.querySelectorAll('.drone-icon'); drones.forEach(drone => { const randomX = (Math.random() - 0.5) * 4; const randomY = (Math.random() - 0.5) * 4; drone.style.transform = `translate(${randomX}px, ${randomY}px)`; }); }, 2000); </script> </body> </html>