feat: new layout with admin dashboard

industry-monitor-web/angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

industry-monitor-web/src/app/app-routing.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
+import { FactoryOverviewComponent } from './pages/factory-overview/factory-overview.component';
+import { DeviceMonitorComponent } from './pages/device-monitor/device-monitor.component';
+import { DeviceManagementComponent } from './pages/device-management/device-management.component';
+import { HistoricalDataComponent } from './pages/historical-data/historical-data.component';
+import { SystemSettingsComponent } from './pages/system-settings/system-settings.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MainLayoutComponent,
+    children: [
+      { path: '', redirectTo: 'overview', pathMatch: 'full' },
+      { path: 'overview', component: FactoryOverviewComponent },
+      { path: 'monitor', component: DeviceMonitorComponent },
+      { path: 'devices', component: DeviceManagementComponent },
+      { path: 'history', component: HistoricalDataComponent },
+      { path: 'settings', component: SystemSettingsComponent },
+    ]
+  },
+  { path: '**', redirectTo: 'overview' }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

industry-monitor-web/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

industry-monitor-web/src/app/app.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router'; // 添加这行
+
+@Component({
+  standalone: true,
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  imports: [RouterModule]
+})
+export class AppComponent {
+  title = '设备监控系统';
+}

industry-monitor-web/src/app/app.html

@@ -1,7 +1 @@
-<button [routerLink]="'/monitor/health/dashboard'">仪表盘</button>
-<button [routerLink]="'/monitor/health/monitor'">检测</button>
-<button [routerLink]="'/monitor/health/ai'">AI</button>
-<button [routerLink]="'/monitor/health/history'">history</button>
-<button [routerLink]="'/monitor/health/device'">device</button>
-<button [routerLink]="'/monitor/health/report'">report</button>
-<router-outlet />
+<router-outlet></router-outlet>

industry-monitor-web/src/app/app.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
+import { FactoryOverviewComponent } from './pages/factory-overview/factory-overview.component';
+import { DeviceMonitorComponent } from './pages/device-monitor/device-monitor.component';
+import { DeviceManagementComponent } from './pages/device-management/device-management.component';
+import { HistoricalDataComponent } from './pages/historical-data/historical-data.component';
+import { SystemSettingsComponent } from './pages/system-settings/system-settings.component';
+
+@NgModule({
+  declarations: [
+    
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    AppComponent,
+    MainLayoutComponent,
+    FactoryOverviewComponent,
+    DeviceMonitorComponent,
+    DeviceManagementComponent,
+    HistoricalDataComponent,
+    SystemSettingsComponent
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

industry-monitor-web/src/app/app.routes.ts

@@ -1,8 +1,31 @@
-import { Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
+import { FactoryOverviewComponent } from './pages/factory-overview/factory-overview.component';
+import { DeviceMonitorComponent } from './pages/device-monitor/device-monitor.component';
+import { DeviceManagementComponent } from './pages/device-management/device-management.component';
+import { HistoricalDataComponent } from './pages/historical-data/historical-data.component';
+import { SystemSettingsComponent } from './pages/system-settings/system-settings.component';
 
 export const routes: Routes = [
   {
-    path: "monitor/health",
-    loadChildren:()=>import("../modules/monitor/health/health.routes").then(m=>m.routes)
-  }
+    path: '',
+    component: MainLayoutComponent,
+    children: [
+      { path: '', redirectTo: 'overview', pathMatch: 'full' },
+      { path: 'overview', component: FactoryOverviewComponent },
+      { path: 'monitor', component: DeviceMonitorComponent },
+      { path: 'devices', component: DeviceManagementComponent },
+      { path: 'history', component: HistoricalDataComponent },
+      { path: 'settings', component: SystemSettingsComponent },
+    ]
+  },
+  { path: '**', redirectTo: 'overview' }
 ];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

industry-monitor-web/src/app/app.spec.ts

@@ -1,23 +1,23 @@
 import { TestBed } from '@angular/core/testing';
-import { App } from './app';
+import { AppComponent } from './app';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [App],
+      imports: [AppComponent],
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
+    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(App);
+    const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, industry-monitor');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, my-angular-app');
   });
 });

industry-monitor-web/src/app/app.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { RouterModule, RouterOutlet } from '@angular/router';
+import { RouterModule } from '@angular/router'; // 添加这行
 
 @Component({
+  standalone: true,
   selector: 'app-root',
-  imports: [RouterOutlet, RouterModule],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrls: ['./app.css'],
+  imports: [RouterModule]
 })
-export class App {
-  protected title = 'industry-monitor';
-}
+export class AppComponent {
+  title = '设备监控系统';
+}

industry-monitor-web/src/app/layout/main-layout/main-layout.component.html

@@ -0,0 +1,39 @@
+<div class="app-container">
+  <nav class="app-nav">
+    <div class="nav-header">
+      <h2>设备监控系统</h2>
+    </div>
+    
+    <ul class="nav-links">
+      <li>
+        <a routerLink="/overview" routerLinkActive="active">
+          <span>工厂总览看板</span>
+        </a>
+      </li>
+      <li>
+        <a routerLink="/monitor" routerLinkActive="active">
+          <span>单设备监测面板</span>
+        </a>
+      </li>
+      <li>
+        <a routerLink="/devices" routerLinkActive="active">
+          <span>设备管理页面</span>
+        </a>
+      </li>
+      <li>
+        <a routerLink="/history" routerLinkActive="active">
+          <span>历史数据分析</span>
+        </a>
+      </li>
+      <li>
+        <a routerLink="/settings" routerLinkActive="active">
+          <span>系统设置中心</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <main class="app-content">
+    <router-outlet></router-outlet>
+  </main>
+</div>

industry-monitor-web/src/app/layout/main-layout/main-layout.component.ts

@@ -0,0 +1,13 @@
+import { Component,  } from '@angular/core';
+
+import { RouterModule } from '@angular/router'; 
+
+@Component({
+  standalone: true,
+  selector: 'app-main-layout',
+  styleUrls: ['./main-layout.css'],
+  imports: [RouterModule],
+  templateUrl: './main-layout.component.html'
+  
+})
+export class MainLayoutComponent { }

industry-monitor-web/src/app/layout/main-layout/main-layout.css

@@ -0,0 +1,66 @@
+/* 基础布局样式 */
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+/* 导航栏样式 */
+.app-nav {
+  width: 240px;
+  background-color: #2c3e50;
+  color: white;
+  padding: 20px 0;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.nav-header {
+  padding: 0 20px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+/* 导航链接样式 */
+.nav-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-links li {
+  margin: 5px 0;
+}
+
+.nav-links a {
+  display: block;
+  color: #ecf0f1;
+  text-decoration: none;
+  padding: 12px 20px;
+  transition: all 0.3s ease;
+}
+
+.nav-links a:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.nav-links a.active {
+  background-color: #3498db;
+  color: white;
+}
+
+.nav-links a span {
+  display: inline-block;
+}
+
+/* 主内容区样式 */
+.app-content {
+  flex: 1;
+  padding: 20px;
+  background-color: white;
+  overflow-y: auto;
+}

industry-monitor-web/src/modules/monitor/health/page-dashboard/page-dashboard.spec.ts → industry-monitor-web/src/app/layout/main-layout/main-layout.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageDashboard } from './page-dashboard';
+import { MainLayoutComponent } from './main-layout.component';
 
-describe('PageDashboard', () => {
-  let component: PageDashboard;
-  let fixture: ComponentFixture<PageDashboard>;
+describe('MainLayout', () => {
+  let component: MainLayoutComponent;
+  let fixture: ComponentFixture<MainLayoutComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageDashboard]
+      imports: [MainLayoutComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PageDashboard);
+    fixture = TestBed.createComponent(MainLayoutComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

industry-monitor-web/src/app/pages/device-management/device-management.component.html

@@ -0,0 +1,136 @@
+
+<!-- device-management.component.html -->
+<div class="management-container">
+  <div class="management-header">
+    <h2><i class="fa fa-toolbox"></i> 设备管理</h2>
+    <div class="controls">
+      <button class="btn primary"><i class="fa fa-plus"></i> 添加设备</button>
+    </div>
+  </div>
+
+  <div class="filter-card">
+    <h3><i class="fa fa-filter"></i> 设备筛选</h3>
+    <div class="filter-controls">
+      <div class="filter-group">
+        <label>设备类型：</label>
+        <select>
+          <option>全部</option>
+          <option>CNC加工中心</option>
+          <option>注塑机</option>
+          <option>装配机器人</option>
+          <option>检测设备</option>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label>设备状态：</label>
+        <select>
+          <option>全部</option>
+          <option>运行中</option>
+          <option>待机</option>
+          <option>维护中</option>
+          <option>已停止</option>
+        </select>
+      </div>
+      <div class="filter-group">
+        <label>所在位置：</label>
+        <select>
+          <option>全部车间</option>
+          <option>车间A</option>
+          <option>车间B</option>
+          <option>车间C</option>
+        </select>
+      </div>
+      <button class="btn"><i class="fa fa-search"></i> 搜索</button>
+    </div>
+  </div>
+
+  <div class="device-table-card">
+    <h3><i class="fa fa-list"></i> 设备列表</h3>
+    <table class="device-table">
+      <thead>
+        <tr>
+          <th>设备ID</th>
+          <th>设备名称</th>
+          <th>类型</th>
+          <th>位置</th>
+          <th>状态</th>
+          <th>健康指数</th>
+          <th>最后维护</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>DEV-2023-001</td>
+          <td>CNC 铣床 #01</td>
+          <td>CNC加工中心</td>
+          <td>车间A/产线3</td>
+          <td><span class="status-badge running">运行中</span></td>
+          <td><div class="health-meter"><div class="health-fill" style="width: 89%;"></div><span>89%</span></div></td>
+          <td>2023-07-15</td>
+          <td>
+            <button class="icon-btn"><i class="fa fa-eye"></i></button>
+            <button class="icon-btn"><i class="fa fa-edit"></i></button>
+            <button class="icon-btn danger"><i class="fa fa-trash"></i></button>
+          </td>
+        </tr>
+        <tr>
+          <td>DEV-2023-002</td>
+          <td>注塑机 #05</td>
+          <td>注塑机</td>
+          <td>车间B/产线1</td>
+          <td><span class="status-badge idle">待机</span></td>
+          <td><div class="health-meter"><div class="health-fill" style="width: 76%;"></div><span>76%</span></div></td>
+          <td>2023-07-10</td>
+          <td>
+            <button class="icon-btn"><i class="fa fa-eye"></i></button>
+            <button class="icon-btn"><i class="fa fa-edit"></i></button>
+            <button class="icon-btn danger"><i class="fa fa-trash"></i></button>
+          </td>
+        </tr>
+        <tr>
+          <td>DEV-2023-003</td>
+          <td>装配机器人 #03</td>
+          <td>装配机器人</td>
+          <td>车间C/产线2</td>
+          <td><span class="status-badge maintenance">维护中</span></td>
+          <td><div class="health-meter"><div class="health-fill" style="width: 65%;"></div><span>65%</span></div></td>
+          <td>2023-07-12</td>
+          <td>
+            <button class="icon-btn"><i class="fa fa-eye"></i></button>
+            <button class="icon-btn"><i class="fa fa-edit"></i></button>
+            <button class="icon-btn danger"><i class="fa fa-trash"></i></button>
+          </td>
+        </tr>
+        <tr>
+          <td>DEV-2023-004</td>
+          <td>质检仪 #02</td>
+          <td>检测设备</td>
+          <td>车间A/产线1</td>
+          <td><span class="status-badge running">运行中</span></td>
+          <td><div class="health-meter"><div class="health-fill" style="width: 92%;"></div><span>92%</span></div></td>
+          <td>2023-07-14</td>
+          <td>
+            <button class="icon-btn"><i class="fa fa-eye"></i></button>
+            <button class="icon-btn"><i class="fa fa-edit"></i></button>
+            <button class="icon-btn danger"><i class="fa fa-trash"></i></button>
+          </td>
+        </tr>
+        <tr>
+          <td>DEV-2023-005</td>
+          <td>包装机 #07</td>
+          <td>包装设备</td>
+          <td>车间C/产线3</td>
+          <td><span class="status-badge stopped">已停止</span></td>
+          <td><div class="health-meter"><div class="health-fill" style="width: 58%;"></div><span>58%</span></div></td>
+          <td>2023-07-05</td>
+          <td>
+            <button class="icon-btn"><i class="fa fa-eye"></i></button>
+            <button class="icon-btn"><i class="fa fa-edit"></i></button>
+            <button class="icon-btn danger"><i class="fa fa-trash"></i></button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

industry-monitor-web/src/app/pages/device-management/device-management.component.ts

@@ -0,0 +1,21 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  standalone: true,
+  selector: 'app-device-management',
+  styleUrls: ['./device-management.css'],
+  imports: [DatePipe],
+  templateUrl: './device-management.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class DeviceManagementComponent {
+currentTime: Date = new Date();
+   ngOnInit(): void {
+    // 更新时间，每秒更新一次
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 1000);
+
+   }
+}

industry-monitor-web/src/app/pages/device-management/device-management.css

@@ -0,0 +1,182 @@
+/* device-management.component.css */
+:host {
+  display: block;
+  width: 100%;
+  padding: 15px;
+}
+
+.management-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.management-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.management-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 24px;
+  color: #2c3e50;
+}
+
+.filter-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  margin-bottom: 20px;
+}
+
+.filter-controls {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.filter-group {
+  flex: 1;
+  min-width: 200px;
+}
+
+.filter-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  color: #2c3e50;
+}
+
+.filter-group select {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+.device-table-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.device-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 15px;
+}
+
+.device-table th,
+.device-table td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+.device-table th {
+  background: #f8fafc;
+  color: #2c3e50;
+  font-weight: 600;
+}
+
+.device-table tbody tr:hover {
+  background: #f5f9ff;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.status-badge.running {
+  background: #e8f6f0;
+  color: #27ae60;
+  border: 1px solid #27ae60;
+}
+
+.status-badge.idle {
+  background: #fef5e7;
+  color: #f39c12;
+  border: 1px solid #f39c12;
+}
+
+.status-badge.maintenance {
+  background: #ebf5fb;
+  color: #3498db;
+  border: 1px solid #3498db;
+}
+
+.status-badge.stopped {
+  background: #f5f7fa;
+  color: #7f8c8d;
+  border: 1px solid #bdc3c7;
+}
+
+.health-meter {
+  width: 100%;
+  height: 24px;
+  background: #ecf0f1;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.health-fill {
+  height: 100%;
+  background: #27ae60;
+  border-radius: 12px;
+}
+
+.health-meter span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  line-height: 24px;
+  font-size: 12px;
+  color: white;
+  font-weight: 500;
+}
+
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: #f8fafc;
+  color: #7f8c8d;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin: 0 2px;
+}
+
+.icon-btn:hover {
+  background: #3498db;
+  color: white;
+}
+
+.icon-btn.danger:hover {
+  background: #e74c3c;
+  color: white;
+}

industry-monitor-web/src/app/pages/device-management/device-management.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceManagementComponent } from './device-management.component';
+
+describe('DeviceManagement', () => {
+  let component: DeviceManagementComponent;
+  let fixture: ComponentFixture<DeviceManagementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeviceManagementComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeviceManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

industry-monitor-web/src/app/pages/device-monitor/device-monitor.component.html

@@ -0,0 +1,122 @@
+
+<!-- device-monitor.component.html -->
+<div class="monitor-container">
+  <div class="monitor-header">
+    <h2><i class="fa fa-microchip"></i> 单设备监测面板</h2>
+    <div class="device-info">
+      <div><strong>设备名称：</strong> CNC 铣床 #01</div>
+      <div><strong>设备编号：</strong> DEV-2023-001</div>
+      <div><strong>位置：</strong> 车间A - 产线3</div>
+      <div><strong>设备类型：</strong> CNC加工中心</div>
+    </div>
+  </div>
+
+  <div class="monitor-row">
+    <div class="waveform-card">
+      <h3><i class="fa fa-wave-square"></i> 振动波形图 (40秒周期)</h3>
+      <div class="waveform-container">
+        <div class="waveform-grid">
+          <div class="grid-line"></div>
+          <div class="grid-line"></div>
+          <div class="grid-line"></div>
+          <div class="waveform-line"></div>
+          <div class="threshold upper"></div>
+          <div class="threshold lower"></div>
+        </div>
+      </div>
+      <div class="waveform-controls">
+        <div class="threshold-control">
+          <label>阈值上限: <span id="upperValue">0.8</span> mm/s</label>
+          <input type="range" min="0" max="1.5" step="0.1" value="0.8" id="upperThreshold">
+        </div>
+        <div class="threshold-control">
+          <label>阈值下限: <span id="lowerValue">0.2</span> mm/s</label>
+          <input type="range" min="0" max="1.5" step="0.1" value="0.2" id="lowerThreshold">
+        </div>
+      </div>
+    </div>
+
+    <div class="status-panel">
+      <h3><i class="fa fa-heartbeat"></i> 实时状态</h3>
+      <div class="status-grid">
+        <div class="status-card">
+          <div class="status-icon blue">
+            <i class="fa fa-wave-square"></i>
+          </div>
+          <div class="status-data">
+            <div class="status-label">当前振幅</div>
+            <div class="status-value">0.58 mm/s</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon green">
+            <i class="fa fa-heartbeat"></i>
+          </div>
+          <div class="status-data">
+            <div class="status-label">健康指数</div>
+            <div class="status-value">89%</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon orange">
+            <i class="fa fa-thermometer-half"></i>
+          </div>
+          <div class="status-data">
+            <div class="status-label">温度</div>
+            <div class="status-value">68°C</div>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon purple">
+            <i class="fa fa-tachometer-alt"></i>
+          </div>
+          <div class="status-data">
+            <div class="status-label">转速</div>
+            <div class="status-value">1420 RPM</div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="progress-container">
+        <h4>工序进度</h4>
+        <div class="progress-steps">
+          <div class="step active">1</div>
+          <div class="step active">2</div>
+          <div class="step active">3</div>
+          <div class="step current">4</div>
+          <div class="step">5</div>
+          <div class="step">6</div>
+          <div class="step">7</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="history-panel">
+    <div class="history-header">
+      <h3><i class="fa fa-history"></i> 警报历史</h3>
+      <div class="controls">
+        <button class="btn"><i class="fa fa-power-off"></i> 紧急停机</button>
+        <button class="btn"><i class="fa fa-download"></i> 数据导出</button>
+      </div>
+    </div>
+    
+    <div class="alert-history">
+      <div class="history-item">
+        <div class="alert-time">14:30:22</div>
+        <div class="alert-desc">振动超标 (0.92 mm/s)</div>
+        <div class="alert-level warning">警告</div>
+      </div>
+      <div class="history-item">
+        <div class="alert-time">11:45:10</div>
+        <div class="alert-desc">温度异常 (78°C)</div>
+        <div class="alert-level critical">严重</div>
+      </div>
+      <div class="history-item">
+        <div class="alert-time">09:15:33</div>
+        <div class="alert-desc">转速波动超出范围</div>
+        <div class="alert-level info">注意</div>
+      </div>
+    </div>
+  </div>
+</div>

industry-monitor-web/src/app/pages/device-monitor/device-monitor.component.ts

@@ -0,0 +1,21 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  standalone: true,
+  selector: 'app-device-monitor',
+  styleUrls: ['./device-monitor.css'],
+  imports: [DatePipe],
+  templateUrl: './device-monitor.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class DeviceMonitorComponent {
+currentTime: Date = new Date();
+   ngOnInit(): void {
+    // 更新时间，每秒更新一次
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 1000);
+
+   }
+}

industry-monitor-web/src/app/pages/device-monitor/device-monitor.css

@@ -0,0 +1,282 @@
+/* device-monitor.component.css */
+:host {
+  display: block;
+  width: 100%;
+  padding: 15px;
+}
+
+.monitor-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.monitor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.monitor-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 24px;
+  color: #2c3e50;
+}
+
+.device-info {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px 20px;
+  font-size: 14px;
+  background: #f8fafc;
+  padding: 15px;
+  border-radius: 6px;
+}
+
+.monitor-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.waveform-card {
+  flex: 2;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.status-panel {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.waveform-container {
+  height: 250px;
+  background: #f1f8ff;
+  border-radius: 6px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.waveform-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.grid-line {
+  position: absolute;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.05);
+  left: 0;
+  right: 0;
+}
+
+.grid-line:nth-child(1) { top: 25%; }
+.grid-line:nth-child(2) { top: 50%; }
+.grid-line:nth-child(3) { top: 75%; }
+
+.waveform-line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #3498db;
+  animation: waveform 8s infinite linear;
+}
+
+@keyframes waveform {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+.threshold {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #e74c3c;
+}
+
+.threshold.upper { top: 25%; }
+.threshold.lower { top: 75%; }
+
+.waveform-controls {
+  display: flex;
+  gap: 20px;
+}
+
+.threshold-control {
+  flex: 1;
+}
+
+.threshold-control label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.threshold-control input {
+  width: 100%;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  margin: 20px 0;
+}
+
+.status-card {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 15px;
+  background: #f8fafc;
+  border-radius: 6px;
+  border-left: 3px solid #3498db;
+}
+
+.status-icon {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
+}
+
+.status-icon.blue { background: #3498db; }
+.status-icon.green { background: #27ae60; }
+.status-icon.orange { background: #f39c12; }
+.status-icon.purple { background: #9b59b6; }
+
+.status-data {
+  flex: 1;
+}
+
+.status-label {
+  font-size: 14px;
+  color: #95a5a6;
+  margin-bottom: 3px;
+}
+
+.status-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
+.progress-steps {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+}
+
+.step {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #ecf0f1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: #95a5a6;
+}
+
+.step.active {
+  background: #3498db;
+  color: white;
+}
+
+.step.current {
+  background: #27ae60;
+  color: white;
+  transform: scale(1.2);
+}
+
+.history-panel {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.alert-history {
+  border: 1px solid #eee;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.history-item:last-child {
+  border-bottom: none;
+}
+
+.alert-time {
+  width: 90px;
+  font-weight: 500;
+  color: #2c3e50;
+}
+
+.alert-desc {
+  flex: 1;
+}
+
+.alert-level {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.alert-level.warning {
+  background: #fef5e7;
+  color: #f39c12;
+  border: 1px solid #f39c12;
+}
+
+.alert-level.critical {
+  background: #fdecea;
+  color: #e74c3c;
+  border: 1px solid #e74c3c;
+}
+
+.alert-level.info {
+  background: #ebf5fb;
+  color: #3498db;
+  border: 1px solid #3498db;
+}

industry-monitor-web/src/modules/monitor/health/page-device/page-device.spec.ts → industry-monitor-web/src/app/pages/device-monitor/device-monitor.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageDevice } from './page-device';
+import { DeviceMonitorComponent } from './device-monitor.component';
 
-describe('PageDevice', () => {
-  let component: PageDevice;
-  let fixture: ComponentFixture<PageDevice>;
+describe('DeviceMonitor', () => {
+  let component: DeviceMonitorComponent;
+  let fixture: ComponentFixture<DeviceMonitorComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageDevice]
+      imports: [DeviceMonitorComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PageDevice);
+    fixture = TestBed.createComponent(DeviceMonitorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

industry-monitor-web/src/app/pages/factory-overview/factory-overview.component.html

@@ -0,0 +1,114 @@
+
+<div class="dashboard">
+  <div class="dashboard-header">
+    <h2><i class="fa fa-industry"></i> 工厂总览看板</h2>
+    <div class="time-display">
+      <i class="fa fa-clock"></i> {{ currentTime | date:'yyyy-MM-dd HH:mm:ss' }}
+    </div>
+  </div>
+
+  <div class="metric-grid">
+    <div class="metric-card">
+      <div class="metric-icon blue">
+        <i class="fa fa-cogs"></i>
+      </div>
+      <div class="metric-data">
+        <h3>设备运行状态</h3>
+        <p class="metric-value">45/50</p>
+        <p class="metric-label">运行设备数/总设备数</p>
+      </div>
+    </div>
+    
+    <div class="metric-card">
+      <div class="metric-icon orange">
+        <i class="fa fa-exclamation-triangle"></i>
+      </div>
+      <div class="metric-data">
+        <h3>今日预警</h3>
+        <p class="metric-value">12</p>
+        <p class="metric-label">预警总数</p>
+      </div>
+    </div>
+    
+    <div class="metric-card">
+      <div class="metric-icon green">
+        <i class="fa fa-heartbeat"></i>
+      </div>
+      <div class="metric-data">
+        <h3>设备健康指数</h3>
+        <p class="metric-value">92%</p>
+        <p class="metric-label">整体设备健康</p>
+      </div>
+    </div>
+    
+    <div class="metric-card">
+      <div class="metric-icon purple">
+        <i class="fa fa-tachometer-alt"></i>
+      </div>
+      <div class="metric-data">
+        <h3>运行参数</h3>
+        <p class="metric-value">65°C / 1450 RPM</p>
+        <p class="metric-label">平均温度/转速</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="dashboard-row">
+    <div class="chart-card">
+      <h3><i class="fa fa-chart-pie"></i> 设备状态分布</h3>
+      <div class="pie-chart">
+        <div class="chart-container">
+          <div class="chart-slice normal" style="--value: 80;"></div>
+          <div class="chart-slice warning" style="--value: 15;"></div>
+          <div class="chart-slice danger" style="--value: 5;"></div>
+          <div class="chart-center"></div>
+        </div>
+        <div class="chart-legend">
+          <div><span class="dot normal"></span> 正常 80%</div>
+          <div><span class="dot warning"></span> 警告 15%</div>
+          <div><span class="dot danger"></span> 危险 5%</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="alert-card">
+      <h3><i class="fa fa-bell"></i> 实时警报</h3>
+      <div class="alert-list">
+        <div class="alert-item critical">
+          <i class="fa fa-exclamation-circle"></i>
+          <div class="alert-content">
+            <strong>设备 #A23 温度过高</strong>
+            <span>车间B - 产线2 | 15:23:45</span>
+          </div>
+        </div>
+        <div class="alert-item warning">
+          <i class="fa fa-exclamation-triangle"></i>
+          <div class="alert-content">
+            <strong>设备 #B07 振动异常</strong>
+            <span>车间A - 产线4 | 15:20:12</span>
+          </div>
+        </div>
+        <div class="alert-item info">
+          <i class="fa fa-info-circle"></i>
+            <div class="alert-content">
+            <strong>设备 #C15 转速过低</strong>
+            <span>车间C - 产线1 | 14:58:33</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div class="trend-card">
+    <h3><i class="fa fa-chart-line"></i> 健康指数趋势 (24小时)</h3>
+    <div class="trend-graph">
+      <div class="graph-bar" style="--height: 60;"></div>
+      <div class="graph-bar" style="--height: 65;"></div>
+      <div class="graph-bar" style="--height: 70;"></div>
+      <div class="graph-bar" style="--height: 82;"></div>
+      <div class="graph-bar" style="--height: 88;"></div>
+      <div class="graph-bar" style="--height: 92;"></div>
+      <div class="graph-bar" style="--height: 90;"></div>
+    </div>
+  </div>
+</div>

industry-monitor-web/src/app/pages/factory-overview/factory-overview.component.ts

@@ -0,0 +1,22 @@
+
+import { DatePipe } from '@angular/common';
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-factory-overview',
+  styleUrls: ['./factory-overview.css'],
+  templateUrl: './factory-overview.component.html',
+  encapsulation: ViewEncapsulation.None,
+  imports: [DatePipe]
+  
+})
+export class FactoryOverviewComponent {
+  currentTime: Date = new Date();
+   ngOnInit(): void {
+    // 更新时间，每秒更新一次
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 1000);
+
+   }}

industry-monitor-web/src/app/pages/factory-overview/factory-overview.css

@@ -0,0 +1,242 @@
+/* 组件容器样式 */
+:host {
+  display: block;
+  width: 100%;
+  padding: 15px;
+}
+
+.dashboard {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+/* 头部样式 */
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.dashboard-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 24px;
+  color: #2c3e50;
+}
+
+.time-display {
+  background: #2c3e50;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 指标网格样式 */
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.metric-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.metric-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: white;
+}
+
+.metric-icon.blue { background: #3498db; }
+.metric-icon.green { background: #27ae60; }
+.metric-icon.orange { background: #f39c12; }
+.metric-icon.purple { background: #9b59b6; }
+
+.metric-data h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  color: #2c3e50;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
+.metric-label {
+  font-size: 14px;
+  color: #95a5a6;
+}
+
+/* 饼图样式 */
+.pie-chart {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  padding: 20px 0;
+}
+
+.chart-container {
+  width: 180px;
+  height: 180px;
+  position: relative;
+  border-radius: 50%;
+  background: conic-gradient(
+    #27ae60 0% 80%,
+    #f39c12 80% 95%,
+    #e74c3c 95% 100%
+  );
+}
+
+.chart-center {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: white;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.chart-legend div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+  font-size: 16px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dot.normal { background: #27ae60; }
+.dot.warning { background: #f39c12; }
+.dot.danger { background: #e74c3c; }
+
+/* 警报样式 */
+.alert-list {
+  margin-top: 15px;
+}
+
+.alert-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  background: #f9f9f9;
+  border-left: 4px solid;
+}
+
+.alert-item.critical {
+  border-left-color: #e74c3c;
+  background: #fdecea;
+}
+
+.alert-item.warning {
+  border-left-color: #f39c12;
+  background: #fef5e7;
+}
+
+.alert-item.info {
+  border-left-color: #3498db;
+  background: #ebf5fb;
+}
+
+.alert-item i {
+  font-size: 20px;
+}
+
+.alert-item.critical i { color: #e74c3c; }
+.alert-item.warning i { color: #f39c12; }
+.alert-item.info i { color: #3498db; }
+
+.alert-content {
+  flex: 1;
+}
+
+.alert-content strong {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+
+.alert-content span {
+  font-size: 13px;
+  color: #95a5a6;
+}
+
+/* 趋势图样式 */
+.trend-graph {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  height: 200px;
+  padding: 20px;
+  background: #f8fafc;
+  border-radius: 6px;
+  margin-top: 15px;
+}
+
+.graph-bar {
+  flex: 1;
+  background: #3498db;
+  height: calc(var(--height) * 2px);
+  border-radius: 4px 4px 0 0;
+  position: relative;
+}
+
+/* 仪表板行布局 */
+.dashboard-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.chart-card, .alert-card {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.trend-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}

industry-monitor-web/src/app/pages/factory-overview/factory-overview.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FactoryOverviewComponent } from './factory-overview.component';
+
+describe('FactoryOverview', () => {
+  let component: FactoryOverviewComponent;
+  let fixture: ComponentFixture<FactoryOverviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FactoryOverviewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FactoryOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

industry-monitor-web/src/app/pages/historical-data/historical-data.component.html

@@ -0,0 +1,143 @@
+
+<!-- historical-data.component.html -->
+<div class="history-container">
+  <div class="history-header">
+    <h2><i class="fa fa-chart-bar"></i> 历史数据分析</h2>
+  </div>
+
+  <div class="filter-row">
+    <div class="filter-card">
+      <h3><i class="fa fa-calendar-alt"></i> 时间范围</h3>
+      <div class="date-controls">
+        <div class="date-input">
+          <label>开始日期：</label>
+          <input type="date" value="2023-07-01">
+        </div>
+        <div class="date-input">
+          <label>结束日期：</label>
+          <input type="date" value="2023-07-15">
+        </div>
+        <button class="btn"><i class="fa fa-sync"></i> 应用</button>
+      </div>
+    </div>
+
+    <div class="device-selector">
+      <h3><i class="fa fa-microchip"></i> 设备选择</h3>
+      <div class="device-controls">
+        <select>
+          <option>CNC 铣床 #01</option>
+          <option>注塑机 #05</option>
+          <option>装配机器人 #03</option>
+        </select>
+        <label class="checkbox-container">多设备对比
+          <input type="checkbox">
+          <span class="checkmark"></span>
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <div class="chart-container">
+    <div class="chart-card">
+      <div class="chart-header">
+        <h3><i class="fa fa-wave-square"></i> 振动数据趋势 (2023-07-01 - 2023-07-15)</h3>
+        <div class="chart-legend">
+          <div><span class="color-dot primary"></span> CNC 铣床 #01</div>
+          <div><span class="color-dot secondary"></span> 注塑机 #05</div>
+        </div>
+      </div>
+      <div class="chart-content">
+        <div class="trend-chart">
+          <div class="grid-lines">
+            <div class="grid-line"></div>
+            <div class="grid-line"></div>
+            <div class="grid-line"></div>
+            <div class="grid-line"></div>
+            <div class="grid-line"></div>
+          </div>
+          <div class="data-line primary"></div>
+          <div class="data-line secondary"></div>
+          <div class="x-axis">
+            <span>1</span><span>3</span><span>5</span><span>7</span><span>9</span><span>11</span><span>13</span><span>15</span>
+          </div>
+          <div class="y-axis">
+            <span>1.5</span><span>1.0</span><span>0.5</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="data-table-card">
+    <h3><i class="fa fa-table"></i> 详细数据记录</h3>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>日期</th>
+          <th>设备名称</th>
+          <th>振幅(mm/s)</th>
+          <th>温度(°C)</th>
+          <th>转速(RPM)</th>
+          <th>健康指数</th>
+          <th>状态</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>2023-07-15</td>
+          <td>CNC 铣床 #01</td>
+          <td>0.58</td>
+          <td>68</td>
+          <td>1420</td>
+          <td>89%</td>
+          <td><span class="status-badge normal">正常</span></td>
+        </tr>
+        <tr>
+          <td>2023-07-15</td>
+          <td>注塑机 #05</td>
+          <td>0.72</td>
+          <td>71</td>
+          <td>920</td>
+          <td>76%</td>
+          <td><span class="status-badge warning">警告</span></td>
+        </tr>
+        <tr>
+          <td>2023-07-14</td>
+          <td>CNC 铣床 #01</td>
+          <td>0.62</td>
+          <td>70</td>
+          <td>1405</td>
+          <td>85%</td>
+          <td><span class="status-badge normal">正常</span></td>
+        </tr>
+        <tr>
+          <td>2023-07-14</td>
+          <td>装配机器人 #03</td>
+          <td>0.48</td>
+          <td>65</td>
+          <td>1850</td>
+          <td>65%</td>
+          <td><span class="status-badge critical">严重</span></td>
+        </tr>
+        <tr>
+          <td>2023-07-13</td>
+          <td>CNC 铣床 #01</td>
+          <td>0.92</td>
+          <td>75</td>
+          <td>1380</td>
+          <td>82%</td>
+          <td><span class="status-badge warning">警告</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="report-section">
+    <h3><i class="fa fa-file-alt"></i> 报表生成</h3>
+    <div class="report-options">
+      <button class="btn"><i class="fa fa-file-csv"></i> 导出CSV</button>
+      <button class="btn"><i class="fa fa-file-pdf"></i> 导出PDF</button>
+      <button class="btn primary"><i class="fa fa-stethoscope"></i> 生成健康诊断报告</button>
+    </div>
+  </div>
+</div>

industry-monitor-web/src/app/pages/historical-data/historical-data.component.ts

@@ -0,0 +1,22 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+
+@Component({
+  standalone: true,
+  selector: 'app-historical-data',
+  styleUrls: ['./historical-data.css'],
+  imports: [DatePipe],
+  templateUrl: './historical-data.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class HistoricalDataComponent {
+currentTime: Date = new Date();
+   ngOnInit(): void {
+    // 更新时间，每秒更新一次
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 1000);
+
+   }
+}

industry-monitor-web/src/app/pages/historical-data/historical-data.css

@@ -0,0 +1,221 @@
+/* historical-data.component.css */
+:host {
+  display: block;
+  width: 100%;
+  padding: 15px;
+}
+
+.history-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.history-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.history-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 24px;
+  color: #2c3e50;
+}
+
+.filter-row {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.filter-card,
+.device-selector {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.date-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 15px;
+  align-items: flex-end;
+}
+
+.date-input label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  color: #2c3e50;
+}
+
+.date-input input {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+.device-controls {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.device-controls select {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  user-select: none;
+}
+
+.checkbox-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.checkmark {
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 4px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-container input:checked ~ .checkmark {
+  background-color: #3498db;
+}
+
+.checkmark:after {
+  content: "";
+  display: none;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox-container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.chart-container {
+  margin-bottom: 20px;
+}
+
+.chart-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.chart-legend {
+  display: flex;
+  gap: 20px;
+  font-size: 14px;
+}
+
+.color-dot {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.color-dot.primary { background: #3498db; }
+.color-dot.secondary { background: #9b59b6; }
+
+.chart-content {
+  height: 400px;
+  background: #f8fafc;
+  border-radius: 6px;
+  position: relative;
+  padding: 30px 40px;
+}
+
+.trend-chart {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.grid-line {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.grid-line:nth-child(1) { top: 0%; }
+.grid-line:nth-child(2) { top: 25%; }
+.grid-line:nth-child(3) { top: 50%; }
+.grid-line:nth-child(4) { top: 75%; }
+.grid-line:nth-child(5) { top: 100%; }
+
+.data-line {
+  position: absolute;
+  height: 3px;
+  border-radius: 3px;
+  bottom: 0;
+}
+
+.data-line.primary {
+  background: #3498db;
+  width: 70%;
+}
+
+.data-line.secondary {
+  background: #9b59b6;
+  width: 60%;
+}
+
+.x-axis {
+  position: absolute;
+  bottom: -30px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: white；
+}

industry-monitor-web/src/modules/monitor/health/page-ai/page-ai.spec.ts → industry-monitor-web/src/app/pages/historical-data/historical-data.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PageAi } from './page-ai';
+import { HistoricalDataComponent } from './historical-data.component';
 
-describe('PageAi', () => {
-  let component: PageAi;
-  let fixture: ComponentFixture<PageAi>;
+describe('HistoricalData', () => {
+  let component: HistoricalDataComponent;
+  let fixture: ComponentFixture<HistoricalDataComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageAi]
+      imports: [HistoricalDataComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PageAi);
+    fixture = TestBed.createComponent(HistoricalDataComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

industry-monitor-web/src/app/pages/system-settings/system-settings.component.html

@@ -0,0 +1,473 @@
+<div class="settings-container">
+    <!-- 顶部标题栏 -->
+    <div class="settings-header">
+        <h1>
+            <i class="fas fa-cog"></i>
+            系统设置中心
+        </h1>
+        <div class="setting-actions">
+            <button class="btn btn-outline">
+                <i class="fas fa-sync-alt"></i> 刷新
+            </button>
+            <button class="btn btn-primary">
+                <i class="fas fa-save"></i> 保存设置
+            </button>
+        </div>
+    </div>
+    
+    <!-- 主体内容区域 -->
+    <div class="settings-body">
+        <!-- 左侧导航菜单 -->
+        <div class="settings-sidebar">
+            <div class="settings-tab active" data-tab="users">
+                <i class="fas fa-users"></i> 用户管理
+            </div>
+            <div class="settings-tab" data-tab="alerts">
+                <i class="fas fa-bell"></i> 警报设置
+            </div>
+            <div class="settings-tab" data-tab="templates">
+                <i class="fas fa-cubes"></i> 设备模板
+            </div>
+            <div class="settings-tab" data-tab="system">
+                <i class="fas fa-server"></i> 系统参数
+            </div>
+            <div class="settings-tab" data-tab="roles">
+                <i class="fas fa-key"></i> 权限管理
+            </div>
+            <div class="settings-tab" data-tab="logs">
+                <i class="fas fa-clipboard-list"></i> 系统日志
+            </div>
+            <div class="settings-tab" data-tab="license">
+                <i class="fas fa-id-card"></i> 许可证信息
+            </div>
+            <div class="settings-tab" data-tab="backup">
+                <i class="fas fa-cloud-download-alt"></i> 备份与恢复
+            </div>
+        </div>
+        
+        <!-- 右侧设置内容 -->
+        <div class="settings-content">
+            <!-- 用户管理 -->
+            <div id="users" class="tab-content active">
+                <div class="users-header">
+                    <h2><i class="fas fa-users"></i> 用户账户管理</h2>
+                    <button class="btn btn-primary">
+                        <i class="fas fa-user-plus"></i> 添加新用户
+                    </button>
+                </div>
+                
+                <div class="users-grid">
+                    <!-- 管理员用户 -->
+                    <div class="user-card">
+                        <div class="user-header">
+                            <div class="user-avatar">A</div>
+                            <div class="user-info">
+                                <h3>张明</h3>
+                                <p>系统管理员</p>
+                            </div>
+                        </div>
+                        <div class="user-body">
+                            <div class="user-detail">
+                                <strong>用户名：</strong> admin&#64;factory.com
+                            </div>
+                            <div class="user-detail">
+                                <strong>角色：</strong> 
+                                <span class="role-badge badge-admin">管理员</span>
+                            </div>
+                            <div class="user-detail">
+                                <strong>最后登录：</strong> 2023-07-15 14:32
+                            </div>
+                            <div class="user-detail">
+                                <strong>状态：</strong> <span style="color: var(--success);">激活</span>
+                            </div>
+                            <div class="user-actions">
+                                <button class="btn btn-sm btn-edit">
+                                    <i class="fas fa-edit"></i> 编辑
+                                </button>
+                                <button class="btn btn-sm btn-delete">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 工程师用户 -->
+                    <div class="user-card">
+                        <div class="user-header">
+                            <div class="user-avatar">L</div>
+                            <div class="user-info">
+                                <h3>李强</h3>
+                                <p>设备工程师</p>
+                            </div>
+                        </div>
+                        <div class="user-body">
+                            <div class="user-detail">
+                                <strong>用户名：</strong> liqiang&#64;factory.com
+                            </div>
+                            <div class="user-detail">
+                                <strong>角色：</strong> 
+                                <span class="role-badge badge-engineer">工程师</span>
+                            </div>
+                            <div class="user-detail">
+                                <strong>最后登录：</strong> 2023-07-15 09:18
+                            </div>
+                            <div class="user-detail">
+                                <strong>状态：</strong> <span style="color: var(--success);">激活</span>
+                            </div>
+                            <div class="user-actions">
+                                <button class="btn btn-sm btn-edit">
+                                    <i class="fas fa-edit"></i> 编辑
+                                </button>
+                                <button class="btn btn-sm btn-delete">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 操作员用户 -->
+                    <div class="user-card">
+                        <div class="user-header">
+                            <div class="user-avatar">W</div>
+                            <div class="user-info">
+                                <h3>王芳</h3>
+                                <p>生产线操作员</p>
+                            </div>
+                        </div>
+                        <div class="user-body">
+                            <div class="user-detail">
+                                <strong>用户名：</strong> wangfang&#64;factory.com
+                            </div>
+                            <div class="user-detail">
+                                <strong>角色：</strong> 
+                                <span class="role-badge badge-operator">操作员</span>
+                            </div>
+                            <div class="user-detail">
+                                <strong>最后登录：</strong> 2023-07-15 07:45
+                            </div>
+                            <div class="user-detail">
+                                <strong>状态：</strong> <span style="color: var(--success);">激活</span>
+                            </div>
+                            <div class="user-actions">
+                                <button class="btn btn-sm btn-edit">
+                                    <i class="fas fa-edit"></i> 编辑
+                                </button>
+                                <button class="btn btn-sm btn-delete">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 只读用户 -->
+                    <div class="user-card">
+                        <div class="user-header">
+                            <div class="user-avatar">Z</div>
+                            <div class="user-info">
+                                <h3>赵宇</h3>
+                                <p>车间主管</p>
+                            </div>
+                        </div>
+                        <div class="user-body">
+                            <div class="user-detail">
+                                <strong>用户名：</strong> zhaoyu&#64;factory.com
+                            </div>
+                            <div class="user-detail">
+                                <strong>角色：</strong> 
+                                <span class="role-badge badge-viewer">主管</span>
+                            </div>
+                            <div class="user-detail">
+                                <strong>最后登录：</strong> 2023-07-14 16:20
+                            </div>
+                            <div class="user-detail">
+                                <strong>状态：</strong> <span style="color: var(--warning);">未激活</span>
+                            </div>
+                            <div class="user-actions">
+                                <button class="btn btn-sm btn-edit">
+                                    <i class="fas fa-edit"></i> 编辑
+                                </button>
+                                <button class="btn btn-sm btn-delete">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 警报设置 -->
+            <div id="alerts" class="tab-content">
+                <div class="section-header">
+                    <h2><i class="fas fa-bell"></i> 警报设置</h2>
+                    <p>自定义系统警报阈值和通知方式</p>
+                </div>
+                
+                <div class="settings-card">
+                    <div class="form-group">
+                        <label>振动警报阈值 (mm/s)</label>
+                        <div class="slider-container">
+                            <input type="range" min="0" max="2" step="0.1" value="0.8" class="form-control">
+                            <div class="slider-value">0.8 mm/s</div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label>温度警报阈值 (°C)</label>
+                        <div class="slider-container">
+                            <input type="range" min="50" max="100" step="5" value="75" class="form-control">
+                            <div class="slider-value">75°C</div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label>转速偏差阈值 (%)</label>
+                        <div class="slider-container">
+                            <input type="range" min="0" max="30" step="5" value="15" class="form-control">
+                            <div class="slider-value">15%</div>
+                        </div>
+                    </div>
+                    
+                    <h3 class="section-subheader">
+                        <i class="fas fa-envelope"></i> 通知设置
+                    </h3>
+                    
+                    <div class="notification-item">
+                        <div class="notification-icon">
+                            <i class="fas fa-envelope"></i>
+                        </div>
+                        <div class="notification-info">
+                            <h4>电子邮件警报</h4>
+                            <p>当系统检测到异常时发送电子邮件通知</p>
+                        </div>
+                        <label class="notification-switch">
+                            <input type="checkbox" checked>
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                    
+                    <div class="notification-item">
+                        <div class="notification-icon">
+                            <i class="fas fa-mobile-alt"></i>
+                        </div>
+                        <div class="notification-info">
+                            <h4>短信通知</h4>
+                            <p>发送短信到注册手机号进行警报通知</p>
+                        </div>
+                        <label class="notification-switch">
+                            <input type="checkbox">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                    
+                    <div class="notification-item">
+                        <div class="notification-icon">
+                            <i class="fas fa-bell"></i>
+                        </div>
+                        <div class="notification-info">
+                            <h4>系统内通知</h4>
+                            <p>在系统界面显示警报通知</p>
+                        </div>
+                        <label class="notification-switch">
+                            <input type="checkbox" checked>
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                    
+                    <div class="form-footer">
+                        <button class="btn btn-outline">取消</button>
+                        <button class="btn btn-primary">保存设置</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 系统参数 -->
+            <div id="system" class="tab-content">
+                <div class="section-header">
+                    <h2><i class="fas fa-server"></i> 系统参数配置</h2>
+                    <p>调整系统核心参数和配置选项</p>
+                </div>
+                
+                <div class="system-status">
+                    <div class="status-card">
+                        <div class="status-icon system">
+                            <i class="fas fa-server"></i>
+                        </div>
+                        <div class="status-info">
+                            <h3>系统状态</h3>
+                            <p>正常运行时间</p>
+                            <div class="status-value">98.7%</div>
+                        </div>
+                    </div>
+                    
+                    <div class="status-card">
+                        <div class="status-icon database">
+                            <i class="fas fa-database"></i>
+                        </div>
+                        <div class="status-info">
+                            <h3>数据库状态</h3>
+                            <p>存储空间使用</p>
+                            <div class="status-value">64%</div>
+                        </div>
+                    </div>
+                    
+                    <div class="status-card">
+                        <div class="status-icon security">
+                            <i class="fas fa-shield-alt"></i>
+                        </div>
+                        <div class="status-info">
+                            <h3>安全状态</h3>
+                            <p>安全威胁检测</p>
+                            <div class="status-value">无威胁</div>
+                        </div>
+                    </div>
+                    
+                    <div class="status-card">
+                        <div class="status-icon analytics">
+                            <i class="fas fa-chart-line"></i>
+                        </div>
+                        <div class="status-info">
+                            <h3>数据统计</h3>
+                            <p>今日处理数据</p>
+                            <div class="status-value">24.5K</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="settings-card">
+                    <h3 class="section-subheader">
+                        <i class="fas fa-cogs"></i> 高级配置
+                    </h3>
+                    
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label>数据采集频率</label>
+                            <select class="form-control">
+                                <option>每5秒</option>
+                                <option selected>每10秒</option>
+                                <option>每30秒</option>
+                                <option>每分钟</option>
+                            </select>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>数据保留策略</label>
+                            <select class="form-control">
+                                <option>30天</option>
+                                <option selected>90天</option>
+                                <option>180天</option>
+                                <option>1年</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label>系统API密钥</label>
+                        <div class="api-key-container">
+                            <input type="text" class="form-control" value="sk_live_51HvT8SGh27aV7zTd..." readonly>
+                            <button class="btn btn-outline btn-sm">
+                                <i class="fas fa-copy"></i> 复制
+                            </button>
+                            <button class="btn btn-outline btn-sm">
+                                <i class="fas fa-redo"></i> 重置
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label>系统维护模式</label>
+                        <div class="toggle-container">
+                            <label class="toggle-switch">
+                                <input type="checkbox">
+                                <span class="slider"></span>
+                            </label>
+                            <div class="toggle-info">
+                                <p>启用维护模式将限制普通用户访问系统</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-footer">
+                        <button class="btn btn-outline">取消</button>
+                        <button class="btn btn-primary">保存配置</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 备份与恢复 -->
+            <div id="backup" class="tab-content">
+                <div class="section-header">
+                    <h2><i class="fas fa-cloud-download-alt"></i> 备份与恢复</h2>
+                    <p>管理您的系统备份和数据恢复</p>
+                </div>
+                
+                <div class="settings-card">
+                    <h3 class="section-subheader">
+                        <i class="fas fa-history"></i> 最近备份
+                    </h3>
+                    
+                    <div class="backup-list">
+                        <div class="backup-item">
+                            <div class="backup-icon">
+                                <i class="fas fa-database"></i>
+                            </div>
+                            <div class="backup-info">
+                                <h4>完整系统备份</h4>
+                                <p>2023-07-15 02:30 AM · 4.2 GB</p>
+                            </div>
+                            <div class="backup-actions">
+                                <button class="btn btn-sm btn-outline">
+                                    <i class="fas fa-download"></i> 下载
+                                </button>
+                                <button class="btn btn-sm btn-danger">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="backup-item">
+                            <div class="backup-icon">
+                                <i class="fas fa-file-alt"></i>
+                            </div>
+                            <div class="backup-info">
+                                <h4>配置备份</h4>
+                                <p>2023-07-14 02:30 AM · 24.5 MB</p>
+                            </div>
+                            <div class="backup-actions">
+                                <button class="btn btn-sm btn-outline">
+                                    <i class="fas fa-download"></i> 下载
+                                </button>
+                                <button class="btn btn-sm btn-danger">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="backup-item">
+                            <div class="backup-icon">
+                                <i class="fas fa-users"></i>
+                            </div>
+                            <div class="backup-info">
+                                <h4>用户数据备份</h4>
+                                <p>2023-07-13 02:30 AM · 128.7 MB</p>
+                            </div>
+                            <div class="backup-actions">
+                                <button class="btn btn-sm btn-outline">
+                                    <i class="fas fa-download"></i> 下载
+                                </button>
+                                <button class="btn btn-sm btn-danger">
+                                    <i class="fas fa-trash"></i> 删除
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="form-footer">
+                        <button class="btn btn-primary">
+                            <i class="fas fa-plus"></i> 创建新备份
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

industry-monitor-web/src/app/pages/system-settings/system-settings.component.ts

@@ -0,0 +1,21 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+@Component({
+  standalone: true,
+  selector: 'app-system-settings',
+  styleUrls: ['./system-settings.css'],
+  imports: [DatePipe],
+  templateUrl: './system-settings.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class SystemSettingsComponent {
+currentTime: Date = new Date();
+   ngOnInit(): void {
+    // 更新时间，每秒更新一次
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 1000);
+
+   }
+}

industry-monitor-web/src/app/pages/system-settings/system-settings.css

@@ -0,0 +1,609 @@
+/* 系统设置中心页面CSS样式 */
+
+/* 基础变量 - 与整体应用保持一致 */
+:root {
+  --primary: #3498db;
+  --primary-dark: #2980b9;
+  --secondary: #2c3e50;
+  --success: #27ae60;
+  --warning: #f39c12;
+  --danger: #e74c3c;
+  --light: #f9f9f9;
+  --dark: #2c3e50;
+  --gray: #95a5a6;
+  --light-gray: #ecf0f1;
+  --medium-gray: #bdc3c7;
+  --border-radius: 8px;
+  --shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
+  --transition: all 0.3s ease;
+}
+
+/* 系统设置容器 */
+.settings-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+/* 顶部标题栏 */
+.settings-header {
+  padding: 18px 28px;
+  border-bottom: 1px solid var(--light-gray);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  color: var(--dark);
+}
+
+.settings-header h1 {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.settings-header h1 i {
+  background: rgba(52, 152, 219, 0.1);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: var(--primary);
+}
+
+.setting-actions {
+  display: flex;
+  gap: 10px;
+}
+
+/* 按钮样式 */
+.btn {
+  padding: 8px 18px;
+  border-radius: 30px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: var(--transition);
+  font-size: 14px;
+}
+
+.btn-sm {
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+}
+
+.btn-outline:hover {
+  background: rgba(52, 152, 219, 0.1);
+}
+
+.btn-danger {
+  background: rgba(231, 76, 60, 0.1);
+  color: var(--danger);
+  border: 1px solid rgba(231, 76, 60, 0.3);
+}
+
+.btn-danger:hover {
+  background: rgba(231, 76, 60, 0.2);
+}
+
+.btn-edit {
+  background: rgba(243, 156, 18, 0.1);
+  color: var(--warning);
+  border: 1px solid rgba(243, 156, 18, 0.3);
+}
+
+.btn-delete {
+  background: rgba(231, 76, 60, 0.1);
+  color: var(--danger);
+  border: 1px solid rgba(231, 76, 60, 0.3);
+}
+
+/* 主体内容区域 */
+.settings-body {
+  display: flex;
+  min-height: 600px;
+}
+
+/* 左侧导航菜单 */
+.settings-sidebar {
+  width: 240px;
+  background: white;
+  border-right: 1px solid var(--light-gray);
+  padding: 20px 0;
+}
+
+.settings-tab {
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: var(--transition);
+  border-left: 4px solid transparent;
+  font-weight: 500;
+  color: var(--dark);
+  font-size: 15px;
+}
+
+.settings-tab.active {
+  background: rgba(52, 152, 219, 0.1);
+  border-left: 4px solid var(--primary);
+  color: var(--primary);
+}
+
+.settings-tab:hover:not(.active) {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.settings-tab i {
+  width: 24px;
+  text-align: center;
+  font-size: 18px;
+}
+
+/* 右侧设置内容 */
+.settings-content {
+  flex: 1;
+  padding: 24px;
+  background: #f9fbfd;
+  min-height: 600px;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+  animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 公共部分样式 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.section-header h2 {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* 用户网格 */
+.users-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.user-card {
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  transition: var(--transition);
+}
+
+.user-card:hover {
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-4px);
+}
+
+.user-header {
+  display: flex;
+  padding: 20px;
+  gap: 16px;
+  border-bottom: 1px solid var(--light-gray);
+}
+
+.user-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.badge-admin .user-avatar { background: #e74c3c; }
+.badge-engineer .user-avatar { background: #3498db; }
+.badge-operator .user-avatar { background: #27ae60; }
+.badge-viewer .user-avatar { background: #f39c12; }
+
+.user-info h3 {
+  font-size: 18px;
+  margin-bottom: 4px;
+}
+
+.user-info p {
+  color: var(--gray);
+  font-size: 14px;
+}
+
+.user-body {
+  padding: 20px;
+}
+
+.user-detail {
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.user-detail strong {
+  color: var(--dark);
+}
+
+.role-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.badge-admin { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }
+.badge-engineer { background: rgba(52, 152, 219, 0.1); color: #3498db; }
+.badge-operator { background: rgba(39, 174, 96, 0.1); color: #27ae60; }
+.badge-viewer { background: rgba(243, 156, 18, 0.1); color: #f39c12; }
+
+.user-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+/* 警报设置 */
+.settings-card {
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: var(--dark);
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.slider-container input[type="range"] {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--light-gray);
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.slider-container input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+}
+
+.slider-value {
+  min-width: 80px;
+  text-align: right;
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.section-subheader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 24px 0 16px;
+  font-size: 18px;
+  color: var(--secondary);
+}
+
+.notification-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: var(--border-radius);
+  background: var(--light);
+  margin-bottom: 12px;
+}
+
+.notification-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(52, 152, 219, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary);
+  font-size: 18px;
+}
+
+.notification-info {
+  flex: 1;
+  padding: 0 16px;
+}
+
+.notification-info h4 {
+  margin-bottom: 4px;
+}
+
+.notification-info p {
+  color: var(--gray);
+  font-size: 14px;
+}
+
+.notification-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.notification-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.notification-switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--light-gray);
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.notification-switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+.notification-switch input:checked + .slider {
+  background-color: var(--success);
+}
+
+.notification-switch input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+.form-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--light-gray);
+}
+
+/* 系统状态 */
+.system-status {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.status-card {
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  padding: 20px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.status-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.system .status-icon { background: rgba(52, 152, 219, 0.1); color: var(--primary); }
+.database .status-icon { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }
+.security .status-icon { background: rgba(243, 156, 18, 0.1); color: var(--warning); }
+.analytics .status-icon { background: rgba(155, 89, 182, 0.1); color: #9b59b6; }
+
+.status-info h3 {
+  font-size: 17px;
+  margin-bottom: 4px;
+}
+
+.status-info p {
+  color: var(--gray);
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.status-value {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+/* 备份列表 */
+.backup-list {
+  margin: 16px 0;
+}
+
+.backup-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: var(--border-radius);
+  background: var(--light);
+  margin-bottom: 12px;
+}
+
+.backup-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(52, 152, 219, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary);
+  font-size: 18px;
+}
+
+.backup-info {
+  flex: 1;
+  padding: 0 16px;
+}
+
+.backup-info h4 {
+  margin-bottom: 4px;
+}
+
+.backup-info p {
+  color: var(--gray);
+  font-size: 14px;
+}
+
+.backup-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 992px) {
+  .settings-sidebar {
+    width: 200px;
+  }
+  
+  .users-grid {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .settings-body {
+    flex-direction: column;
+  }
+  
+  .settings-sidebar {
+    width: 100%;
+    display: flex;
+    overflow-x: auto;
+    padding: 10px 0;
+    border-right: none;
+    border-bottom: 1px solid var(--light-gray);
+  }
+  
+  .settings-tab {
+    padding: 10px 16px;
+    white-space: nowrap;
+  }
+  
+  .users-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .system-status {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .system-status {
+    grid-template-columns: 1fr;
+  }
+  
+  .settings-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+  
+  .setting-actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+  
+  .form-footer {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+}

industry-monitor-web/src/modules/monitor/health/nav-pc-health-tabs/nav-pc-health-tabs.spec.ts → industry-monitor-web/src/app/pages/system-settings/system-settings.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NavPcHealthTabs } from './nav-pc-health-tabs';
+import { SystemSettingsComponent } from './system-settings.component';
 
-describe('NavPcHealthTabs', () => {
-  let component: NavPcHealthTabs;
-  let fixture: ComponentFixture<NavPcHealthTabs>;
+describe('SystemSettings', () => {
+  let component: SystemSettingsComponent;
+  let fixture: ComponentFixture<SystemSettingsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NavPcHealthTabs]
+      imports: [SystemSettingsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(NavPcHealthTabs);
+    fixture = TestBed.createComponent(SystemSettingsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

industry-monitor-web/src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
   <app-root></app-root>

industry-monitor-web/src/main.ts

@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import { AppComponent } from './app/app';
 
-bootstrapApplication(App, appConfig)
+bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));

industry-monitor-web/src/modules/monitor/health/health.routes.ts

@@ -1,28 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [
-  {
-    path: "dashboard",
-    loadComponent:()=>import("./page-dashboard/page-dashboard").then(m=>m.PageDashboard)
-  },
-  {
-    path: "monitor",
-    loadComponent:()=>import("./page-monitor/page-monitor").then(m=>m.PageMonitor)
-  },
-  {
-    path: "ai",
-    loadComponent:()=>import("./page-ai/page-ai").then(m=>m.PageAi)
-  },
-  {
-    path: "device",
-    loadComponent:()=>import("./page-device/page-device").then(m=>m.PageDevice)
-  },
-  {
-    path: "history",
-    loadComponent:()=>import("./page-history/page-history").then(m=>m.PageHistory)
-  },
-  {
-    path: "report",
-    loadComponent:()=>import("./page-report/page-report").then(m=>m.PageReport)
-  },
-];

industry-monitor-web/src/modules/monitor/health/nav-pc-health-tabs/nav-pc-health-tabs.html

@@ -1 +0,0 @@
-<p>nav-pc-health-tabs works!</p>

industry-monitor-web/src/modules/monitor/health/nav-pc-health-tabs/nav-pc-health-tabs.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-@Component({
-  selector: 'app-nav-pc-health-tabs',
-  standalone: true,
-  imports: [RouterModule],
-  templateUrl: './nav-pc-health-tabs.html',
-  styleUrl: './nav-pc-health-tabs.scss'
-})
-export class NavPcHealthTabs {
-}

industry-monitor-web/src/modules/monitor/health/page-ai/page-ai.html

@@ -1 +0,0 @@
-<p>page-ai works!</p>

industry-monitor-web/src/modules/monitor/health/page-ai/page-ai.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-ai',
-  standalone:true,
-  imports: [],
-  templateUrl: './page-ai.html',
-  styleUrl: './page-ai.scss'
-})
-export class PageAi {
-
-}

industry-monitor-web/src/modules/monitor/health/page-dashboard/page-dashboard.html

@@ -1 +0,0 @@
-<p>page-dashboard works!</p>

industry-monitor-web/src/modules/monitor/health/page-dashboard/page-dashboard.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-dashboard',
-  imports: [],
-  standalone:true,
-  templateUrl: './page-dashboard.html',
-  styleUrl: './page-dashboard.scss'
-})
-export class PageDashboard {
-
-}

industry-monitor-web/src/modules/monitor/health/page-device/page-device.html

@@ -1 +0,0 @@
-<p>page-device works!</p>

industry-monitor-web/src/modules/monitor/health/page-device/page-device.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-device',
-  standalone:true,
-  imports: [],
-  templateUrl: './page-device.html',
-  styleUrl: './page-device.scss'
-})
-export class PageDevice {
-
-}

industry-monitor-web/src/modules/monitor/health/page-history/page-history.html

@@ -1 +0,0 @@
-<p>page-history works!</p>

industry-monitor-web/src/modules/monitor/health/page-history/page-history.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageHistory } from './page-history';
-
-describe('PageHistory', () => {
-  let component: PageHistory;
-  let fixture: ComponentFixture<PageHistory>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PageHistory]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PageHistory);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

industry-monitor-web/src/modules/monitor/health/page-history/page-history.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-history',
-  standalone:true,
-  imports: [],
-  templateUrl: './page-history.html',
-  styleUrl: './page-history.scss'
-})
-export class PageHistory {
-
-}

industry-monitor-web/src/modules/monitor/health/page-monitor/page-monitor.html

@@ -1 +0,0 @@
-<p>page-monitor works!</p>

industry-monitor-web/src/modules/monitor/health/page-monitor/page-monitor.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageMonitor } from './page-monitor';
-
-describe('PageMonitor', () => {
-  let component: PageMonitor;
-  let fixture: ComponentFixture<PageMonitor>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PageMonitor]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PageMonitor);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

industry-monitor-web/src/modules/monitor/health/page-monitor/page-monitor.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-monitor',
-  imports: [],
-  standalone:true,
-  templateUrl: './page-monitor.html',
-  styleUrl: './page-monitor.scss'
-})
-export class PageMonitor {
-
-}

industry-monitor-web/src/modules/monitor/health/page-report/page-report.html

@@ -1 +0,0 @@
-<p>page-report works!</p>

industry-monitor-web/src/modules/monitor/health/page-report/page-report.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageReport } from './page-report';
-
-describe('PageReport', () => {
-  let component: PageReport;
-  let fixture: ComponentFixture<PageReport>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PageReport]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PageReport);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

industry-monitor-web/src/modules/monitor/health/page-report/page-report.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-report',
-  standalone:true,
-  imports: [],
-  templateUrl: './page-report.html',
-  styleUrl: './page-report.scss'
-})
-export class PageReport {
-
-}