0235699
/
industry-monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786
							<!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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0A2463',
            warning: '#FF7D00',
            danger: '#F53F3F',
            success: '#00B42A',
            dark: {
              100: '#1D2129',
              200: '#141414',
              300: '#0A0A0A',
              400: '#050505'
            },
            'neutral-light': '#86909C'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 0 8px rgba(22, 93, 255, 0.5);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(22, 93, 255, 0.5);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .bg-grid {
        background-image: 
          linear-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
        background-size: 20px 20px;
      }
    }
  </style>
</head>

<body class="bg-dark-200 text-gray-100 font-inter min-h-screen flex flex-col bg-grid">
  <div class="flex flex-1 overflow-hidden">
    <!-- 侧边导航 -->
    <aside id="sidebar" class="w-64 bg-dark-100 border-r border-dark-300 flex-shrink-0 transition-all duration-300 z-30">
      <div class="p-4 border-b border-dark-300">
        <h1 class="text-2xl font-bold text-primary flex items-center">
          <i class="fa fa-industry mr-3"></i>
          <span>振动检测系统</span>
        </h1>
      </div>
      
      <nav class="p-4">
        <ul class="space-y-1">
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg bg-primary/20 text-primary border-l-4 border-primary">
              <i class="fa fa-dashboard w-6 text-center"></i>
              <span>总览看板</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-dark-300 transition-colors">
              <i class="fa fa-microphone w-6 text-center"></i>
              <span>设备监控</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-dark-300 transition-colors">
              <i class="fa fa-bell w-6 text-center"></i>
              <span>预警管理</span>
              <span class="ml-auto bg-danger text-white text-xs px-2 py-1 rounded-full">3</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-dark-300 transition-colors">
              <i class="fa fa-line-chart w-6 text-center"></i>
              <span>数据分析</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-dark-300 transition-colors">
              <i class="fa fa-cog w-6 text-center"></i>
              <span>系统设置</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <div class="absolute bottom-0 w-full p-4 border-t border-dark-300">
        <div class="flex items-center">
          <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-primary">
          <div class="ml-3">
            <p class="text-sm font-medium">管理员</p>
            <p class="text-xs text-neutral-light">在线</p>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-dark-100 border-b border-dark-300 px-6 py-4 flex items-center justify-between">
        <div class="flex items-center">
          <button id="sidebarToggle" class="mr-4 lg:hidden text-gray-300 hover:text-white">
            <i class="fa fa-bars text-xl"></i>
          </button>
          
          <div class="relative mr-6">
            <select class="bg-dark-300 border border-dark-400 text-sm rounded-lg px-4 py-2 pr-10 appearance-none focus:outline-none focus:border-primary">
              <option>主工厂</option>
              <option>分工厂A</option>
              <option>分工厂B</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-light"></i>
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <div id="currentTime" class="text-sm text-neutral-light"></div>
          <button class="relative p-2 text-gray-300 hover:text-white">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          <button class="p-2 text-gray-300 hover:text-white">
            <i class="fa fa-cog text-xl"></i>
          </button>
        </div>
      </header>

      <!-- 内容滚动区 -->
      <main class="flex-1 overflow-y-auto p-6 scrollbar-hide">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white">工厂振动检测总览</h2>
            <p class="text-neutral-light mt-1">实时监控全厂设备振动状态与关键指标</p>
          </div>
          
          <!-- 核心指标卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-light text-sm">运行设备</p>
                  <h3 class="text-3xl font-bold mt-1">186 <span class="text-sm font-normal text-success ml-2"><i class="fa fa-arrow-up"></i> 5%</span></h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                  <i class="fa fa-machine text-xl"></i>
                </div>
              </div>
              <div class="mt-4 text-xs text-neutral-light">
                总设备数: 200台
              </div>
            </div>
            
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-light text-sm">今日预警</p>
                  <h3 class="text-3xl font-bold mt-1">12 <span class="text-sm font-normal text-danger ml-2"><i class="fa fa-arrow-up"></i> 2</span></h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-warning/20 flex items-center justify-center text-warning">
                  <i class="fa fa-exclamation-triangle text-xl"></i>
                </div>
              </div>
              <div class="mt-4 text-xs text-neutral-light">
                高风险: 2, 中风险: 5, 低风险: 5
              </div>
            </div>
            
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-light text-sm">设备健康指数</p>
                  <h3 class="text-3xl font-bold mt-1">78 <span class="text-sm font-normal text-success ml-2"><i class="fa fa-arrow-up"></i> 3%</span></h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-success/20 flex items-center justify-center text-success">
                  <i class="fa fa-heartbeat text-xl"></i>
                </div>
              </div>
              <div class="mt-4">
                <div class="w-full bg-dark-300 rounded-full h-2">
                  <div class="bg-gradient-to-r from-success to-primary h-2 rounded-full" style="width: 78%"></div>
                </div>
              </div>
            </div>
            
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300">
              <div class="flex justify-between items-start">
                <div>
                  <p class="text-neutral-light text-sm">平均振动值</p>
                  <h3 class="text-3xl font-bold mt-1">18.5 <span class="text-sm font-normal text-danger ml-2"><i class="fa fa-arrow-up"></i> 1.2</span> mm/s</h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-danger/20 flex items-center justify-center text-danger">
                  <i class="fa fa-tachometer text-xl"></i>
                </div>
              </div>
              <div class="mt-4 text-xs text-neutral-light">
                阈值: 25 mm/s
              </div>
            </div>
          </div>
          
          <!-- 图表区域 -->
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 设备状态分布饼图 -->
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300 lg:col-span-1">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-semibold text-lg">设备状态分布</h3>
                <div class="text-xs text-neutral-light">更新于: <span id="updateTime">10:24:36</span></div>
              </div>
              <div class="h-64">
                <div id="statusPieChart" class="w-full h-full"></div>
              </div>
              <div class="mt-6 grid grid-cols-2 gap-4">
                <div class="flex items-center">
                  <span class="w-3 h-3 rounded-full bg-success mr-2"></span>
                  <span class="text-sm">正常: 168台</span>
                </div>
                <div class="flex items-center">
                  <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
                  <span class="text-sm">警告: 28台</span>
                </div>
                <div class="flex items-center">
                  <span class="w-3 h-3 rounded-full bg-danger mr-2"></span>
                  <span class="text-sm">危险: 4台</span>
                </div>
                <div class="flex items-center">
                  <span class="w-3 h-3 rounded-full bg-neutral-light/50 mr-2"></span>
                  <span class="text-sm">停机: 0台</span>
                </div>
              </div>
            </div>
            
            <!-- 健康指数柱状图 -->
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300 lg:col-span-2">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-semibold text-lg">车间健康指数</h3>
                <div class="flex space-x-2">
                  <button class="px-3 py-1 text-xs bg-primary/20 text-primary rounded-lg">今日</button>
                  <button class="px-3 py-1 text-xs bg-dark-300 text-neutral-light rounded-lg hover:bg-dark-400">本周</button>
                  <button class="px-3 py-1 text-xs bg-dark-300 text-neutral-light rounded-lg hover:bg-dark-400">本月</button>
                </div>
              </div>
              <div class="h-64">
                <div id="healthBarChart" class="w-full h-full"></div>
              </div>
            </div>
          </div>
          
          <!-- 设备地图与预警列表 -->
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 设备地图视图 -->
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300 lg:col-span-2">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-semibold text-lg">设备位置热力图</h3>
                <div class="text-xs text-neutral-light">刷新: <button class="text-primary hover:underline">手动</button></div>
              </div>
              <div class="h-80 relative bg-dark-300 rounded-lg overflow-hidden">
                <!-- 工厂地图背景 -->
                <img src="https://picsum.photos/id/1029/800/400" alt="工厂地图" class="w-full h-full object-cover opacity-20">
                
                <!-- 设备位置标记 - 动态生成 -->
                <div class="absolute top-1/4 left-1/3" data-vibration="12">
                  <div class="w-4 h-4 rounded-full bg-success animate-pulse-slow border-2 border-success/50 cursor-pointer" title="设备A-01: 正常 (12.5 mm/s)"></div>
                </div>
                <div class="absolute top-1/3 right-1/4" data-vibration="22">
                  <div class="w-4 h-4 rounded-full bg-warning animate-pulse-slow border-2 border-warning/50 cursor-pointer" title="设备B-05: 警告 (22.3 mm/s)"></div>
                </div>
                <div class="absolute bottom-1/3 left-1/5" data-vibration="35">
                  <div class="w-4 h-4 rounded-full bg-danger animate-pulse-slow border-2 border-danger/50 cursor-pointer" title="设备C-02: 危险 (35.1 mm/s)"></div>
                </div>
                <div class="absolute top-2/3 right-1/3" data-vibration="18">
                  <div class="w-4 h-4 rounded-full bg-success animate-pulse-slow border-2 border-success/50 cursor-pointer" title="设备D-10: 正常 (18.2 mm/s)"></div>
                </div>
                
                <!-- 图例 -->
                <div class="absolute bottom-4 right-4 bg-dark-100/80 backdrop-blur-sm p-3 rounded-lg border border-dark-300">
                  <div class="flex items-center mb-2">
                    <span class="w-3 h-3 rounded-full bg-success mr-2"></span>
                    <span class="text-xs">正常 &lt;20</span>
                  </div>
                  <div class="flex items-center mb-2">
                    <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
                    <span class="text-xs">警告 20-25</span>
                  </div>
                  <div class="flex items-center">
                    <span class="w-3 h-3 rounded-full bg-danger mr-2"></span>
                    <span class="text-xs">危险 &gt;25</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 实时警报列表 -->
            <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300">
              <div class="flex justify-between items-center mb-6">
                <h3 class="font-semibold text-lg">实时警报</h3>
                <span class="text-xs bg-danger/20 text-danger px-2 py-1 rounded-full">紧急</span>
              </div>
              <div class="space-y-4 max-h-80 overflow-y-auto pr-2 scrollbar-hide">
                <!-- 警报项1 - 危险 -->
                <div class="bg-dark-300/50 border-l-4 border-danger p-4 rounded-lg">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-sm">设备C-02振动异常</h4>
                      <p class="text-xs text-neutral-light mt-1">振动值: 35.1 mm/s (阈值: 25 mm/s)</p>
                    </div>
                    <span class="text-xs text-danger">10:22</span>
                  </div>
                  <div class="mt-3 flex justify-between items-center">
                    <span class="text-xs bg-danger/20 text-danger px-2 py-1 rounded-full">高风险</span>
                    <button class="text-xs text-primary hover:underline">处理</button>
                  </div>
                </div>
                
                <!-- 警报项2 - 警告 -->
                <div class="bg-dark-300/50 border-l-4 border-warning p-4 rounded-lg">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-sm">设备B-05振动升高</h4>
                      <p class="text-xs text-neutral-light mt-1">振动值: 22.3 mm/s (阈值: 25 mm/s)</p>
                    </div>
                    <span class="text-xs text-warning">10:15</span>
                  </div>
                  <div class="mt-3 flex justify-between items-center">
                    <span class="text-xs bg-warning/20 text-warning px-2 py-1 rounded-full">中风险</span>
                    <button class="text-xs text-primary hover:underline">确认</button>
                  </div>
                </div>
                
                <!-- 警报项3 - 警告 -->
                <div class="bg-dark-300/50 border-l-4 border-warning p-4 rounded-lg">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-sm">设备E-08轴承振动异常</h4>
                      <p class="text-xs text-neutral-light mt-1">振动值: 21.8 mm/s (阈值: 25 mm/s)</p>
                    </div>
                    <span class="text-xs text-warning">10:08</span>
                  </div>
                  <div class="mt-3 flex justify-between items-center">
                    <span class="text-xs bg-warning/20 text-warning px-2 py-1 rounded-full">中风险</span>
                    <button class="text-xs text-primary hover:underline">确认</button>
                  </div>
                </div>
                
                <!-- 警报项4 - 正常 -->
                <div class="bg-dark-300/50 border-l-4 border-success p-4 rounded-lg">
                  <div class="flex justify-between items-start">
                    <div>
                      <h4 class="font-medium text-sm">设备A-01恢复正常</h4>
                      <p class="text-xs text-neutral-light mt-1">振动值: 12.5 mm/s (阈值: 25 mm/s)</p>
                    </div>
                    <span class="text-xs text-success">09:55</span>
                  </div>
                  <div class="mt-3 flex justify-between items-center">
                    <span class="text-xs bg-success/20 text-success px-2 py-1 rounded-full">已恢复</span>
                    <button class="text-xs text-primary hover:underline">已处理</button>
                  </div>
                </div>
              </div>
              <button class="w-full mt-4 text-sm text-primary hover:underline flex items-center justify-center">
                查看全部警报 <i class="fa fa-angle-right ml-2"></i>
              </button>
            </div>
          </div>
          
          <!-- 健康指数趋势图 -->
          <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300 mb-8">
            <div class="flex justify-between items-center mb-6">
              <h3 class="font-semibold text-lg">健康指数趋势</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1 text-xs bg-primary/20 text-primary rounded-lg">24小时</button>
                <button class="px-3 py-1 text-xs bg-dark-300 text-neutral-light rounded-lg hover:bg-dark-400">7天</button>
                <button class="px-3 py-1 text-xs bg-dark-300 text-neutral-light rounded-lg hover:bg-dark-400">30天</button>
              </div>
            </div>
            <div class="h-64">
              <div id="trendLineChart" class="w-full h-full"></div>
            </div>
          </div>
          
          <!-- 关键设备监控 -->
          <div class="bg-dark-100 rounded-xl p-6 card-hover border border-dark-300">
            <div class="flex justify-between items-center mb-6">
              <h3 class="font-semibold text-lg">关键设备监控</h3>
              <div class="relative">
                <select class="bg-dark-300 border border-dark-400 text-sm rounded-lg px-4 py-2 pr-10 appearance-none focus:outline-none focus:border-primary">
                  <option>全部车间</option>
                  <option>装配车间</option>
                  <option>加工车间</option>
                  <option>涂装车间</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-light"></i>
              </div>
            </div>
            
            <div class="overflow-x-auto">
              <table class="min-w-full">
                <thead>
                  <tr class="border-b border-dark-300">
                    <th class="text-left py-3 px-4 text-xs font-medium text-neutral-light">设备编号</th>
                    <th class="text-left py-3 px-4 text-xs font-medium text-neutral-light">设备名称</th>
                    <th class="text-left py-3 px-4 text-xs font-medium text-neutral-light">车间</th>
                    <th class="text-left py-3 px-4 text-xs font-medium text-neutral-light">振动值 (mm/s)</th>
                    <th class="text-left py-3 px-4 text-xs font-medium text-neutral-light">健康状态</th>
                    <th class="text-left py-3 px-4 text-xs font-medium text-neutral-light">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 设备行1 - 危险 -->
                  <tr class="border-b border-dark-300 hover:bg-dark-300/50 transition-colors">
                    <td class="py-3 px-4 text-sm">C-02</td>
                    <td class="py-3 px-4 text-sm">主轴电机</td>
                    <td class="py-3 px-4 text-sm">加工车间</td>
                    <td class="py-3 px-4 text-sm">35.1 <span class="text-danger ml-1"><i class="fa fa-arrow-up"></i></span></td>
                    <td class="py-3 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-danger/20 text-danger">危险</span>
                    </td>
                    <td class="py-3 px-4">
                      <button class="text-primary hover:underline text-sm">详情</button>
                    </td>
                  </tr>
                  
                  <!-- 设备行2 - 警告 -->
                  <tr class="border-b border-dark-300 hover:bg-dark-300/50 transition-colors">
                    <td class="py-3 px-4 text-sm">B-05</td>
                    <td class="py-3 px-4 text-sm">传送带电机</td>
                    <td class="py-3 px-4 text-sm">装配车间</td>
                    <td class="py-3 px-4 text-sm">22.3 <span class="text-warning ml-1"><i class="fa fa-arrow-up"></i></span></td>
                    <td class="py-3 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-warning/20 text-warning">警告</span>
                    </td>
                    <td class="py-3 px-4">
                      <button class="text-primary hover:underline text-sm">详情</button>
                    </td>
                  </tr>
                  
                  <!-- 设备行3 - 正常 -->
                  <tr class="border-b border-dark-300 hover:bg-dark-300/50 transition-colors">
                    <td class="py-3 px-4 text-sm">A-01</td>
                    <td class="py-3 px-4 text-sm">冲压机</td>
                    <td class="py-3 px-4 text-sm">加工车间</td>
                    <td class="py-3 px-4 text-sm">12.5 <span class="text-success ml-1"><i class="fa fa-arrow-down"></i></span></td>
                    <td class="py-3 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-success/20 text-success">正常</span>
                    </td>
                    <td class="py-3 px-4">
                      <button class="text-primary hover:underline text-sm">详情</button>
                    </td>
                  </tr>
                  
                  <!-- 设备行4 - 正常 -->
                  <tr class="border-b border-dark-300 hover:bg-dark-300/50 transition-colors">
                    <td class="py-3 px-4 text-sm">D-10</td>
                    <td class="py-3 px-4 text-sm">烘干机</td>
                    <td class="py-3 px-4 text-sm">涂装车间</td>
                    <td class="py-3 px-4 text-sm">18.2 <span class="text-neutral-light ml-1"><i class="fa fa-minus"></i></span></td>
                    <td class="py-3 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-success/20 text-success">正常</span>
                    </td>
                    <td class="py-3 px-4">
                      <button class="text-primary hover:underline text-sm">详情</button>
                    </td>
                  </tr>
                  
                  <!-- 设备行5 - 正常 -->
                  <tr class="hover:bg-dark-300/50 transition-colors">
                    <td class="py-3 px-4 text-sm">E-08</td>
                    <td class="py-3 px-4 text-sm">风机</td>
                    <td class="py-3 px-4 text-sm">装配车间</td>
                    <td class="py-3 px-4 text-sm">21.8 <span class="text-warning ml-1"><i class="fa fa-arrow-up"></i></span></td>
                    <td class="py-3 px-4">
                      <span class="px-2 py-1 text-xs rounded-full bg-warning/20 text-warning">警告</span>
                    </td>
                    <td class="py-3 px-4">
                      <button class="text-primary hover:underline text-sm">详情</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <button class="mt-6 w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 transition-colors">
              加载更多设备
            </button>
          </div>
        </div>
      </main>
    </div>
  </div>

  <script>
    // 更新当前时间
    function updateTime() {
      const now = new Date();
      const timeString = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
      document.getElementById('currentTime').textContent = timeString;
      document.getElementById('updateTime').textContent = timeString;
    }
    
    setInterval(updateTime, 1000);
    updateTime(); // 初始调用
    
    // 侧边栏切换
    document.getElementById('sidebarToggle').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      sidebar.classList.toggle('translate-x-0');
      sidebar.classList.toggle('-translate-x-full');
    });
    
    // ECharts 图表初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 设备状态分布饼图
      const statusPieChart = echarts.init(document.getElementById('statusPieChart'));
      const statusPieOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#1D2129',
              borderWidth: 1
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 168, name: '正常', itemStyle: {color: '#00B42A'}},
              {value: 28, name: '警告', itemStyle: {color: '#FF7D00'}},
              {value: 4, name: '危险', itemStyle: {color: '#F53F3F'}},
              {value: 0, name: '停机', itemStyle: {color: '#86909C'}}
            ]
          }
        ]
      };
      statusPieChart.setOption(statusPieOption);
      
      // 车间健康指数柱状图
      const healthBarChart = echarts.init(document.getElementById('healthBarChart'));
      const healthBarOption = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['装配车间', '加工车间', '涂装车间', '仓储车间', '动力车间'],
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          splitLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '健康指数',
            type: 'bar',
            barWidth: '60%',
            data: [85, 68, 92, 76, 88],
            itemStyle: {
              color: function(params) {
                const colorList = ['#165DFF', '#165DFF', '#165DFF', '#165DFF', '#165DFF'];
                if (params.data < 70) colorList[params.dataIndex] = '#F53F3F';
                else if (params.data < 80) colorList[params.dataIndex] = '#FF7D00';
                return colorList[params.dataIndex];
              },
              borderRadius: 4
            }
          }
        ]
      };
      healthBarChart.setOption(healthBarOption);
      
      // 健康指数趋势图
      const trendLineChart = echarts.init(document.getElementById('trendLineChart'));
      const trendLineOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Array(24).fill('').map((_, i) => i + '时'),
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '健康指数',
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              lineStyle: {
                color: '#165DFF'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#333'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#165DFF'
              }
            }
          },
          {
            type: 'value',
            name: '振动值 (mm/s)',
            min: 0,
            max: 40,
            interval: 10,
            axisLine: {
              lineStyle: {
                color: '#F53F3F'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#F53F3F'
              }
            }
          }
        ],
        series: [
          {
            name: '健康指数',
            type: 'line',
            yAxisIndex: 0,
            data: [75, 76, 77, 78, 76, 75, 74, 73, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 81, 80, 79, 78, 77],
            symbolSize: 6,
            itemStyle: {
              color: '#165DFF'
            },
            lineStyle: {
              color: '#165DFF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(22, 93, 255, 0.5)'
                }, {
                  offset: 1,
                  color: 'rgba(22, 93, 255, 0.05)'
                }]
              }
            }
          },
          {
            name: '振动值',
            type: 'line',
            yAxisIndex: 1,
            data: [18, 17, 16, 15, 17, 19, 21, 22, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 15, 16, 17, 18, 19, 20],
            symbolSize: 6,
            itemStyle: {
              color: '#F53F3F'
            },
            lineStyle: {
              color: '#F53F3F'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(245, 63, 63, 0.5)'
                }, {
                  offset: 1,
                  color: 'rgba(245, 63, 63, 0.05)'
                }]
              }
            }
          }
        ]
      };
      trendLineChart.setOption(trendLineOption);
      
      // 窗口大小改变时重新渲染图表
      window.addEventListener('resize', function() {
        statusPieChart.resize();
        healthBarChart.resize();
        trendLineChart.resize();
      });
    });
    
    // 设备地图标记交互效果
    document.querySelectorAll('[data-vibration]').forEach(marker => {
      marker.addEventListener('mouseenter', function() {
        this.querySelector('div').classList.add('scale-150');
      });
      marker.addEventListener('mouseleave', function() {
        this.querySelector('div').classList.remove('scale-150');
      });
    });
  </script>
</body>
</html>