添加网页

.hvigor/outputs/logs/details/details.json

@@ -18,23 +18,22 @@
     "IS_HVIGORFILE_TYPE_CHECK": false,
     "TASK_TIME": {
       "1043bfc77febe75fafec0c4309faccf1": {
-        "ConfigureCmake": 355750,
+        "ConfigureCmake": 138750,
-        "PreCheckSyscap": 214708,
+        "PreCheckSyscap": 130000,
-        "ProcessIntegratedHsp": 765750,
+        "ProcessIntegratedHsp": 627666,
-        "BuildNativeWithCmake": 174583,
+        "BuildNativeWithCmake": 132500,
-        "SyscapTransform": 1237833,
+        "SyscapTransform": 748042,
-        "BuildNativeWithNinja": 610541,
+        "BuildNativeWithNinja": 628625,
-        "CompileResource": 175070708,
+        "BuildJS": 3736250,
-        "BuildJS": 2112083,
+        "CompileArkTS": 1222589291,
-        "CompileArkTS": 1188633208,
+        "GeneratePkgModuleJson": 1167625,
-        "GeneratePkgModuleJson": 960291,
+        "PackageHap": 402789000,
-        "PackageHap": 374414708,
+        "SignHap": 555625,
-        "SignHap": 988750,
+        "CollectDebugSymbol": 1284834,
-        "CollectDebugSymbol": 1472583,
+        "assembleHap": 83208
-        "assembleHap": 118708
       }
     },
-    "TOTAL_TIME": 1949278125,
+    "TOTAL_TIME": 1815609000,
-    "BUILD_ID": "202504081711360890"
+    "BUILD_ID": "202504081715029750"
   }
 }

entry/src/main/ets/common/logtext.ets

@@ -159,7 +159,7 @@ export class LogManager {
       new VersionLogItem("1.2.0","2025-4-2",["添加课堂功能","修改上课页面逻辑"]),
       new VersionLogItem("1.2.0 beta1.0","2025-4-3",["测试消息发送","修复已知问题"]),
       new VersionLogItem("1.2.0 beta1.1","2025-4-4",["更新说明文档","添加日志输出"]),
-      new VersionLogItem("1.2.0 beta1.2","2025-4-8修改首页",["修改首页"]),
+      new VersionLogItem("1.2.0 beta1.2","2025-4-8修改首页",["修改首页","添加网页"]),
     ];
   }
   

entry/src/main/ets/pages/HomePage.ets

@@ -1,6 +1,13 @@
 import { router } from '@kit.ArkUI';
 import logManager, { LogCategory, LogEventType } from '../common/logtext';
 import settingsService, { SettingsModel, TextResources } from '../common/SettingsService';
+import web_webview from '@ohos.web.webview';
+
+// 摄像头接口定义
+interface CameraType {
+  name: string;
+  url: string;
+}
 
 @Entry
 @Component
@@ -21,6 +28,25 @@ struct HomePage {
     studentCount: 45
   };
   
+  // 摄像头URL
+  @State currentCameraUrl: string = 'https://www.skylinewebcams.com/webcam/maldives/lhaviyani-atoll/kuredu/kuredu-island-resort.html';
+  
+  // 摄像头列表
+  private cameras: Array<CameraType> = [
+    { 
+      name: '马尔代夫库雷都岛', 
+      url: 'https://www.skylinewebcams.com/webcam/maldives/lhaviyani-atoll/kuredu/kuredu-island-resort.html' 
+    },
+    { 
+      name: '意大利米兰大教堂', 
+      url: 'https://www.skylinewebcams.com/webcam/italia/lombardia/milano/duomo-milano.html' 
+    },
+    { 
+      name: '埃及吉萨金字塔', 
+      url: 'https://www.skylinewebcams.com/webcam/egypt/cairo/cairo/pyramids-giza.html' 
+    }
+  ];
+  
   // 从设置服务获取设置
   @State settings: SettingsModel = settingsService.getSettings();
   // 获取文本资源
@@ -51,6 +77,38 @@ struct HomePage {
     
     // 初始化文本
     this.message = this.texts.title;
+
+    // 注册摄像头选择事件
+    this.registerCameraSelectorEvent();
+  }
+
+  // 注册摄像头选择事件
+  private registerCameraSelectorEvent() {
+    getContext(this).eventHub.on('showCameraSelector', () => {
+      this.showCameraSelector();
+    });
+  }
+
+  // 显示摄像头选择对话框
+  private showCameraSelector() {
+    // 创建一个CustomDialogController
+    let dialogController = new CustomDialogController({
+      builder: CameraDialogBuilder({
+        cameras: this.cameras,
+        onSelect: (url: string, name: string) => {
+          this.currentCameraUrl = url;
+          console.info(`选择了摄像头: ${name}`);
+        }
+      }),
+      cancel: () => {
+        console.info('取消选择摄像头');
+      },
+      autoCancel: true,
+      alignment: DialogAlignment.Center
+    });
+    
+    // 显示对话框
+    dialogController.open();
   }
 
   build() {
@@ -96,7 +154,8 @@ struct HomePage {
           Card({ 
             title: this.texts.classroomMonitor, 
             data: this.classroomMonitorData,
-            themeColor: this.settings.themeColor
+            themeColor: this.settings.themeColor,
+            cameraUrl: this.currentCameraUrl
           })
           .margin({ top: 16, bottom: 16 })
 
@@ -105,7 +164,8 @@ struct HomePage {
           Card({ 
             title: this.texts.comprehensiveData, 
             data: this.comprehensiveClassData,
-            themeColor: this.settings.themeColor
+            themeColor: this.settings.themeColor,
+            cameraUrl: this.currentCameraUrl
           })
         }
         .width('100%')
@@ -191,6 +251,9 @@ struct Card {
   data: MonitorDataType | ClassDataType = {} as MonitorDataType;
   themeColor: string = '#409eff';
   
+  // 接收摄像头URL
+  @Link cameraUrl: string;
+  
   build() {
     Column() {
       // 卡片标题
@@ -229,6 +292,26 @@ struct Card {
   @Builder
   MonitorDataChart() {
     Column() {
+      // 监控摄像头视频
+      Column() {
+        Web({ src: this.cameraUrl, controller: new web_webview.WebviewController() })
+          .width('100%')
+          .height(200)
+          .zoomAccess(false)  // 禁用缩放
+          .onPageBegin(() => {
+            console.info('网页开始加载');
+          })
+          .onPageEnd(() => {
+            console.info('网页加载完成');
+          })
+          .onErrorReceive((event) => {
+            console.error('网页加载失败', event);
+          })
+      }
+      .width('100%')
+      .margin({ bottom: 10 })
+
+      // 传感器数据展示
       Row() {
         // 温度展示
         Column() {
@@ -237,11 +320,11 @@ struct Card {
             .fontColor('#666')
           Row() {
             Text((this.data as MonitorDataType).temperature.toString())
-              .fontSize(26)
+              .fontSize(20)
               .fontWeight(FontWeight.Bold)
               .fontColor(this.themeColor)
             Text('°C')
-              .fontSize(16)
+              .fontSize(14)
               .fontColor('#666')
               .margin({ left: 4 })
           }
@@ -256,49 +339,61 @@ struct Card {
             .fontColor('#666')
           Row() {
             Text((this.data as MonitorDataType).humidity.toString())
-              .fontSize(26)
+              .fontSize(20)
               .fontWeight(FontWeight.Bold)
               .fontColor(this.themeColor)
             Text('%')
-              .fontSize(16)
+              .fontSize(14)
               .fontColor('#666')
               .margin({ left: 4 })
           }
         }
         .layoutWeight(1)
         .alignItems(HorizontalAlign.Center)
-      }
-      .width('100%')
-      .margin({ bottom: 20 })
 
-      Row() {
         // 人数展示
         Column() {
           Text('人数')
             .fontSize(14)
             .fontColor('#666')
           Text((this.data as MonitorDataType).occupancy.toString())
-            .fontSize(26)
+            .fontSize(20)
             .fontWeight(FontWeight.Bold)
             .fontColor(this.themeColor)
         }
         .layoutWeight(1)
         .alignItems(HorizontalAlign.Center)
+      }
+      .width('100%')
+      .margin({ bottom: 8 })
 
+      // 状态和操作按钮
+      Row() {
         // 状态展示
         Column() {
           Text('状态')
             .fontSize(14)
             .fontColor('#666')
           Text((this.data as MonitorDataType).status || '正常')
-            .fontSize(18)
+            .fontSize(16)
             .fontWeight(FontWeight.Medium)
             .fontColor(this.getStatusColor((this.data as MonitorDataType).status))
         }
         .layoutWeight(1)
-        .alignItems(HorizontalAlign.Center)
+        .alignItems(HorizontalAlign.Start)
+
+        // 切换摄像头按钮
+        Button('切换摄像头', { type: ButtonType.Capsule })
+          .fontSize(14)
+          .height(32)
+          .backgroundColor(this.themeColor)
+          .onClick(() => {
+            // 显示摄像头选择对话框
+            this.showCameraSelector();
+          })
       }
       .width('100%')
+      .justifyContent(FlexAlign.SpaceBetween)
     }
     .backgroundColor('#f5f5f5')
     .borderRadius(8)
@@ -306,6 +401,14 @@ struct Card {
     .padding(16)
   }
   
+  // 显示摄像头选择器
+  private showCameraSelector() {
+    if (getContext(this) && getContext(this).eventHub) {
+      // 触发自定义事件，在HomePage中处理
+      getContext(this).eventHub.emit('showCameraSelector', {});
+    }
+  }
+
   // 综合上课数据图表
   @Builder
   ClassDataChart() {
@@ -496,3 +599,63 @@ struct BottomNavigation {
     .border({ color: '#eeeeee', width: 1, style: BorderStyle.Solid })
   }
 }
+
+// 自定义摄像头选择对话框
+@CustomDialog
+struct CameraDialogBuilder {
+  controller: CustomDialogController;
+  @Prop cameras: Array<CameraType> = [];
+  @Prop onSelect: (url: string, name: string) => void = () => {};
+  
+  build() {
+    Column() {
+      Text('选择监控摄像头')
+        .fontSize(20)
+        .fontWeight(FontWeight.Bold)
+        .margin({ top: 20, bottom: 16 })
+      
+      List() {
+        ForEach(this.cameras, (camera: CameraType) => {
+          ListItem() {
+            Row() {
+              Text(camera.name)
+                .fontSize(16)
+                .fontColor('#333')
+              
+              Blank()
+              
+              Button('选择')
+                .fontSize(14)
+                .height(32)
+                .backgroundColor('#409eff')
+                .onClick(() => {
+                  this.onSelect(camera.url, camera.name);
+                  this.controller.close();
+                })
+            }
+            .width('100%')
+            .padding(12)
+            .justifyContent(FlexAlign.SpaceBetween)
+          }
+          .backgroundColor('#f5f5f5')
+          .borderRadius(8)
+          .margin({ bottom: 8 })
+        })
+      }
+      .width('100%')
+      .layoutWeight(1)
+      
+      Button('取消')
+        .fontSize(16)
+        .width('40%')
+        .margin({ top: 16, bottom: 20 })
+        .onClick(() => {
+          this.controller.close();
+        })
+    }
+    .width('80%')
+    .backgroundColor(Color.White)
+    .borderRadius(16)
+    .padding(16)
+  }
+}