fix:调整云存页面内容

lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_logic.dart

@@ -145,9 +145,9 @@ class EditVideoLogLogic extends BaseGetXController {
   }
 
   // 根据URL生成唯一的文件名（MD5哈希值）
-  String getFileNameFromUrl(String url, String extension) {
+  String getFileNameFromUrl(String url, String extension, int recordType) {
     final hash = md5.convert(utf8.encode(url)).toString(); // 使用 md5 生成哈希值
-    return '$hash.$extension';
+    return '$recordType' + '_' + '$hash.$extension';
   }
 
   Future<void> recordDownloadTime(String filePath) async {
@@ -169,7 +169,7 @@ class EditVideoLogLogic extends BaseGetXController {
   }
 
 // 下载文件方法（支持视频和图片）
-  Future<String?> downloadFile(String? url) async {
+  Future<String?> downloadFile(String? url, int recordType) async {
     if (url == null || url.isEmpty) {
       print('URL不能为空');
       return null;
@@ -183,7 +183,8 @@ class EditVideoLogLogic extends BaseGetXController {
 
         // 根据URL生成唯一文件名（自动识别扩展名）
         String extension = _getFileTypeFromUrl(url); // 自动检测文件类型
-        String fileName = getFileNameFromUrl(url, extension); // 根据URL生成唯一文件名
+        String fileName =
+            getFileNameFromUrl(url, extension, recordType); // 根据URL生成唯一文件名
         String savePath = '${appDocDir.path}/downloads/$fileName'; // 自定义保存路径
 
         // 确保目录存在

lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_page.dart

@@ -76,23 +76,31 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
       body: Column(
         children: <Widget>[
           Expanded(
-            child: Obx(() => ListView.builder(
+            child: Obx(
+              () => ListView.builder(
                 itemCount: state.videoLogList.length,
                 itemBuilder: (BuildContext c, int index) {
                   final CloudStorageData item = state.videoLogList[index];
-                  return Column(
+                  return ExpansionTile(
-                    children: <Widget>[
+                    shape: Border(),
-                      Container(
+                    collapsedShape: Border(),
-                          margin: EdgeInsets.only(
+                    expansionAnimationStyle: AnimationStyle(
-                              left: 20.w, top: 15.w, bottom: 15.w),
+                      curve: Curves.easeInOut,
-                          child: Row(children: <Widget>[
+                      duration: Duration(milliseconds: 400),
-                            Text(item.date ?? '',
+                    ),
-                                style: TextStyle(fontSize: 20.sp)),
+                    initiallyExpanded: true,
-                          ])),
+                    title: Text(
-                      mainListView(index, item)
+                      item.date ?? '',
-                    ],
+                      style: TextStyle(
+                        fontSize: 24.sp,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                    children: mainListView(index, item),
                   );
-                })),
+                },
+              ),
+            ),
           ),
           bottomBottomBtnWidget()
         ],
@@ -100,29 +108,35 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
     );
   }
 
+  Widget _buildNotData() {
+    return Expanded(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Image.asset(
+              'images/icon_noData.png',
+              width: 160.w,
+              height: 180.h,
+            ),
+            Text(
+              '暂无数据'.tr,
+              style: TextStyle(
+                  color: AppColors.darkGrayTextColor, fontSize: 22.sp),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
   double itemW = (1.sw - 15.w * 4) / 3;
   double itemH = (1.sw - 15.w * 4) / 3 + 40.h;
 
-  Widget mainListView(int index, CloudStorageData itemData) {
+  // 云存列表
-    return GridView.builder(
+  List<Widget> mainListView(int index, CloudStorageData itemData) {
-      padding: EdgeInsets.only(left: 15.w, right: 15.w),
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          //横轴元素个数
-          crossAxisCount: 3,
-          //纵轴间距
-          mainAxisSpacing: 10.w,
-          // 横轴间距
-          crossAxisSpacing: 15.w,
-          //子组件宽高长度比例
-          childAspectRatio: itemW / itemH),
-      itemBuilder: (BuildContext context, int index) {
-        final RecordListData recordData = itemData.recordList![index];
-        return videoItem(recordData);
-      },
-    );
   }
 
   // Widget videoItem(RecordListData recordData, int index) {
@@ -237,9 +251,9 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
     if (state.selectVideoLogList.value.isNotEmpty) {
       state.selectVideoLogList.value.forEach((element) {
         if (element.videoUrl != null && element.videoUrl != '') {
-          logic.downloadFile(element.videoUrl ?? '');
+          logic.downloadFile(element.videoUrl ?? '', element.recordType!);
         } else if (element.imagesUrl != null && element.imagesUrl != '') {
-          logic.downloadFile(element.imagesUrl ?? '');
+          logic.downloadFile(element.imagesUrl ?? '', element.recordType!);
         }
       });
       // double _progress = 0.0;
@@ -338,55 +352,6 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
 
   Widget videoItem(RecordListData recordData) {
     return GestureDetector(
-      onTap: () {
-        if (recordData.videoUrl != null && recordData.videoUrl!.isNotEmpty) {
-          Get.toNamed(Routers.videoLogDetailPage, arguments: <String, Object>{
-            'recordData': recordData,
-            'videoDataList': state.videoLogList.value
-          });
-        } else if (recordData.imagesUrl != null &&
-            recordData.imagesUrl!.isNotEmpty) {
-          Navigator.push(
-            context,
-            MaterialPageRoute(
-              builder: (context) => FullScreenImagePage(
-                imageUrl: recordData.imagesUrl!,
-              ),
-            ),
-          );
-        }
-      },
-      child: Stack(
-        children: [
-          SizedBox(
-            width: itemW,
-            height: itemH,
-            child: Column(
-              children: <Widget>[
-                Container(
-                  width: itemW,
-                  height: itemW,
-                  margin: const EdgeInsets.all(0),
-                  color: Colors.white,
-                  child: ClipRRect(
-                    borderRadius: BorderRadius.circular(10.w),
-                    child: _buildImageOrVideoItem(recordData),
-                  ),
-                ),
-                SizedBox(height: 5.h),
-                Text(
-                  DateTool()
-                      .dateToYMDHNString(recordData.operateDate.toString()),
-                  textAlign: TextAlign.center,
-                  style: TextStyle(fontSize: 18.sp),
-                )
-              ],
-            ),
-          ),
-          Positioned(
-            top: 0.w,
-            right: 0.w,
-            child: GestureDetector(
       onTap: () {
         recordData.isSelect = !recordData.isSelect!;
         if (recordData.isSelect! == true) {
@@ -396,20 +361,146 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
         }
         setState(() {});
       },
-              child: Image(
+      child: Container(
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
+        margin: EdgeInsets.only(
+          bottom: 20.h,
+          left: 18.w,
+          right: 18.w,
+        ),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(10.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 5,
+              offset: const Offset(0, 3), // changes position of shadow
+            ),
+          ],
+        ),
+        width: 1.sw,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: <Widget>[
+            Row(
+              children: [
+                Image(
                   width: 36.w,
                   height: 36.w,
                   image: state.selectVideoLogList.value.contains(recordData)
                       ? const AssetImage('images/icon_round_select.png')
                       : const AssetImage('images/icon_round_unSelect.png'),
                 ),
+                SizedBox(
+                  width: 14.w,
+                ),
+                Container(
+                  padding: EdgeInsets.all(10.w),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(58.w),
+                    color: AppColors.mainColor,
+                  ),
+                  child: Icon(
+                    _buildIconByType(recordData),
+                    size: 48.sp,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
+                Container(
+                  height: itemW,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _buildTitleByType(recordData),
+                        style: TextStyle(
+                          fontSize: 24.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      SizedBox(
+                        height: 8.h,
+                      ),
+                      Text(
+                        DateTool()
+                            .dateToHNString(recordData.operateDate.toString()),
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
                       ),
-          )
                     ],
                   ),
+                ),
+              ],
+            ),
+            Container(
+              width: 118.w,
+              height: 118.w,
+              margin: const EdgeInsets.all(0),
+              color: Colors.white,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(10.w),
+                child: _buildImageOrVideoItem(recordData),
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 
+  String _buildTitleByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return '防拆报警'.tr;
+      case 160:
+        return '人脸'.tr + '开锁'.tr;
+      case 220:
+        return '逗留警告'.tr;
+      default:
+        return '';
+    }
+  }
+
+  IconData _buildIconByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return Icons.fmd_bad_outlined;
+      case 160:
+        return Icons.tag_faces_outlined;
+      case 220:
+        return Icons.wifi_tethering_error_rounded_outlined;
+      default:
+        return Icons.priority_high_rounded;
+    }
+  }
+
+  Color _buildTextColorByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 120:
+      case 150:
+      case 130:
+      case 190:
+      case 200:
+      case 210:
+      case 220:
+        return Colors.red;
+      default:
+        return Colors.black;
+    }
+  }
+
   _buildImageOrVideoItem(RecordListData recordData) {
     if (recordData.videoUrl != null && recordData.videoUrl!.isNotEmpty) {
       return _buildVideoItem(recordData);

lib/main/lockDetail/videoLog/videoLog/videoLog_logic.dart

@@ -1,7 +1,7 @@
 import 'dart:convert';
 import 'dart:io';
-import 'dart:typed_data';
 
+import 'package:crypto/crypto.dart';
 import 'package:get/get.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:star_lock/appRouters.dart';
@@ -63,8 +63,17 @@ class VideoLogLogic extends BaseGetXController {
       final content = await File(logFilePath).readAsString();
       final logData = Map<String, int>.from(json.decode(content));
 
-      // 遍历所有记录
       logData.forEach((filePath, timestamp) {
+        String fileName = filePath
+            .split('/')
+            .last; // 得到: 220_f5e371111918ff70cb3532bec20e38c4.mp4
+        String withoutExt = fileName.replaceAll('.mp4', ''); // 或使用 substring 截取
+
+        String numberStr = withoutExt.split('_').first; // 得到: 220
+
+        int number = int.parse(numberStr);
+
+        print(number); // 输出: 220
         final downloadDateTime = DateTime.fromMillisecondsSinceEpoch(timestamp);
         final dateKey =
             '${downloadDateTime.year}-${downloadDateTime.month.toString().padLeft(2, '0')}-${downloadDateTime.day.toString().padLeft(2, '0')}';
@@ -77,11 +86,15 @@ class VideoLogLogic extends BaseGetXController {
         // 将文件记录添加到对应日期的列表中
         if (filePath.endsWith('.jpg')) {
           groupedDownloads[dateKey]?.add(
-            RecordListData(operateDate: timestamp, imagesUrl: filePath),
+            RecordListData(
+                operateDate: timestamp,
+                imagesUrl: filePath,
+                recordType: number),
           );
         } else if (filePath.endsWith('.mp4')) {
           groupedDownloads[dateKey]?.add(
-            RecordListData(operateDate: timestamp, videoUrl: filePath),
+            RecordListData(
+                operateDate: timestamp, videoUrl: filePath, recordType: number),
           );
         }
       });

lib/main/lockDetail/videoLog/videoLog/videoLog_page.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 import 'package:star_lock/appRouters.dart';
+import 'package:star_lock/app_settings/app_settings.dart';
 import 'package:star_lock/flavors.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_state.dart';
@@ -26,9 +27,7 @@ class VideoLogPage extends StatefulWidget {
 
 class _VideoLogPageState extends State<VideoLogPage> {
   final VideoLogLogic logic = Get.put(VideoLogLogic());
-  final VideoLogState state = Get
+  final VideoLogState state = Get.find<VideoLogLogic>().state;
-      .find<VideoLogLogic>()
-      .state;
 
   @override
   void initState() {
@@ -56,8 +55,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
           // title加编辑按钮
           editVideoTip(),
           Obx(
-                () =>
+            () => Visibility(
-                Visibility(
               visible: !state.isNavLocal.value,
               child: state.videoLogList.length > 0
                   ? Expanded(
@@ -66,17 +64,22 @@ class _VideoLogPageState extends State<VideoLogPage> {
                         itemBuilder: (BuildContext c, int index) {
                           final CloudStorageData item =
                               state.videoLogList[index];
-                        return Column(
+                          return ExpansionTile(
-                          children: <Widget>[
+                            shape: Border(),
-                            Container(
+                            collapsedShape: Border(),
-                                margin: EdgeInsets.only(
+                            expansionAnimationStyle: AnimationStyle(
-                                    left: 20.w, top: 15.w, bottom: 15.w),
+                              curve: Curves.easeInOut,
-                                child: Row(children: <Widget>[
+                              duration: Duration(milliseconds: 400),
-                                  Text(item.date ?? '',
+                            ),
-                                      style: TextStyle(fontSize: 20.sp)),
+                            initiallyExpanded: true,
-                                ])),
+                            title: Text(
-                            mainListView(index, item)
+                              item.date ?? '',
-                          ],
+                              style: TextStyle(
+                                fontSize: 24.sp,
+                                fontWeight: FontWeight.w600,
+                              ),
+                            ),
+                            children: mainListView(index, item),
                           );
                         },
                       ),
@@ -86,8 +89,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
           ),
           // 本地顶部
           Obx(
-                () =>
+            () => Visibility(
-                Visibility(
               visible: state.isNavLocal.value,
               child: state.lockVideoList.length > 0
                   ? Expanded(
@@ -96,20 +98,22 @@ class _VideoLogPageState extends State<VideoLogPage> {
                         itemBuilder: (BuildContext c, int index) {
                           final CloudStorageData item =
                               state.lockVideoList[index];
-                        return Column(
+                          return ExpansionTile(
-                          children: <Widget>[
+                            shape: Border(),
-                            Container(
+                            collapsedShape: Border(),
-                              margin: EdgeInsets.only(
+                            expansionAnimationStyle: AnimationStyle(
-                                  left: 20.w, top: 15.w, bottom: 15.w),
+                              curve: Curves.easeInOut,
-                              child: Row(
+                              duration: Duration(milliseconds: 400),
-                                children: <Widget>[
+                            ),
-                                  Text(item.date ?? '',
+                            initiallyExpanded: true,
-                                      style: TextStyle(fontSize: 20.sp)),
+                            title: Text(
-                                ],
+                              item.date ?? '',
+                              style: TextStyle(
+                                fontSize: 24.sp,
+                                fontWeight: FontWeight.w600,
                               ),
                             ),
-                            lockMainListView(index, item)
+                            children: mainListView(index, item),
-                          ],
                           );
                         },
                       ),
@@ -161,8 +165,9 @@ class _VideoLogPageState extends State<VideoLogPage> {
                 // logic.clearDownloads();
               });
             },
-              child: Obx(() =>
+            child: Obx(
-                  Text('云存'.tr,
+              () => Text(
+                '云存'.tr,
                 style: state.isNavLocal.value == true
                     ? TextStyle(
                         color: Colors.grey,
@@ -171,7 +176,10 @@ class _VideoLogPageState extends State<VideoLogPage> {
                     : TextStyle(
                         color: Colors.white,
                         fontSize: 28.sp,
-                          fontWeight: FontWeight.w600)))),
+                        fontWeight: FontWeight.w600),
+              ),
+            ),
+          ),
           TextButton(
             onPressed: () {
               setState(() {
@@ -180,8 +188,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
               });
             },
             child: Obx(
-                  () =>
+              () => Text(
-                  Text(
                 '已下载'.tr,
                 style: state.isNavLocal.value == true
                     ? TextStyle(
@@ -215,10 +222,12 @@ class _VideoLogPageState extends State<VideoLogPage> {
             EdgeInsets.only(left: 20.w, top: 20.w, bottom: 20.w, right: 10.w),
         decoration: BoxDecoration(
           color: const Color(0xFFF6F7F8),
-            borderRadius: BorderRadius.circular(20.h)),
+          borderRadius: BorderRadius.circular(
+            20.h,
+          ),
+        ),
         child: Obx(
-              () =>
+          () => Column(
-              Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Row(
@@ -227,15 +236,11 @@ class _VideoLogPageState extends State<VideoLogPage> {
                       child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
-                              Text('3天滚动储存'.tr,
+                      Text('3天滚动储存'.tr, style: TextStyle(fontSize: 24.sp)),
-                                  style: TextStyle(fontSize: 24.sp)),
                       SizedBox(height: 10.h),
-                              Text("${F
+                      Text("${F.navTitle}${"已为本设备免费提供3大滚动视频储存服务".tr}",
-                                  .navTitle}${"已为本设备免费提供3大滚动视频储存服务"
-                                  .tr}",
                           style:
-                                  TextStyle(fontSize: 22.sp, color: Colors
+                              TextStyle(fontSize: 22.sp, color: Colors.grey)),
-                                      .grey)),
                     ],
                   )),
                   SizedBox(width: 15.w),
@@ -243,8 +248,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
                   Image(
                       width: 40.w,
                       height: 24.w,
-                          image: const AssetImage(
+                      image: const AssetImage('images/icon_right_black.png'))
-                              'images/icon_right_black.png'))
                 ],
               ),
               SizedBox(
@@ -263,8 +267,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
                 visible: state.validityPeriodInfo.value != null &&
                     state.validityPeriodInfo.value?.status == 1,
                 child: Text(
-                      '过期时间：${state.validityPeriodInfo.value
+                  '过期时间：${state.validityPeriodInfo.value?.validityPeriodEnd}',
-                          ?.validityPeriodEnd}',
                   style: TextStyle(
                     fontSize: 24.sp,
                   ),
@@ -290,8 +293,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
                 visible: state.validityPeriodInfo.value != null &&
                     state.validityPeriodInfo.value?.status == 1,
                 child: Text(
-                      '剩余天数：${state.validityPeriodInfo.value
+                  '剩余天数：${state.validityPeriodInfo.value?.remainingDays} 天',
-                          ?.remainingDays} 天',
                   style: TextStyle(
                     fontSize: 24.sp,
                   ),
@@ -412,48 +414,12 @@ class _VideoLogPageState extends State<VideoLogPage> {
   double itemH = (1.sw - 15.w * 4) / 3 + 40.h;
 
   // 云存列表
-  Widget mainListView(int index, CloudStorageData itemData) {
+  List<Widget> mainListView(int index, CloudStorageData itemData) {
-    return GridView.builder(
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
-      padding: EdgeInsets.only(left: 15.w, right: 15.w),
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-        //横轴元素个数
-          crossAxisCount: 3,
-          //纵轴间距
-          mainAxisSpacing: 15.w,
-          // 横轴间距
-          crossAxisSpacing: 15.w,
-          //子组件宽高长度比例
-          childAspectRatio: itemW / itemH),
-      itemBuilder: (BuildContext context, int index) {
-        final RecordListData recordData = itemData.recordList![index];
-        return videoItem(recordData);
-      },
-    );
   }
 
-  Widget lockMainListView(int index, CloudStorageData itemData) {
+  List<Widget> lockMainListView(int index, CloudStorageData itemData) {
-    return GridView.builder(
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
-      padding: EdgeInsets.only(left: 15.w, right: 15.w),
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-        //横轴元素个数
-          crossAxisCount: 3,
-          //纵轴间距
-          mainAxisSpacing: 15.w,
-          // 横轴间距
-          crossAxisSpacing: 15.w,
-          //子组件宽高长度比例
-          childAspectRatio: itemW / itemH),
-      itemBuilder: (BuildContext context, int index) {
-        final RecordListData recordData = itemData.recordList![index];
-        return videoItem(recordData);
-      },
-    );
   }
 
   Widget videoItem(RecordListData recordData) {
@@ -469,22 +435,86 @@ class _VideoLogPageState extends State<VideoLogPage> {
           Navigator.push(
             context,
             MaterialPageRoute(
-              builder: (context) =>
+              builder: (context) => FullScreenImagePage(
-                  FullScreenImagePage(
                 imageUrl: recordData.imagesUrl!,
               ),
             ),
           );
         }
       },
-      child: SizedBox(
+      child: Container(
-        width: itemW,
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
-        height: itemH,
+        margin: EdgeInsets.only(
-        child: Column(
+          bottom: 20.h,
+          left: 18.w,
+          right: 18.w,
+        ),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(10.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 5,
+              offset: const Offset(0, 3), // changes position of shadow
+            ),
+          ],
+        ),
+        width: 1.sw,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
+            Row(
+              children: [
+                Container(
+                  padding: EdgeInsets.all(10.w),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(58.w),
+                    color: AppColors.mainColor,
+                  ),
+                  child: Icon(
+                    _buildIconByType(recordData),
+                    size: 48.sp,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
                 Container(
-              width: itemW,
                   height: itemW,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _buildTitleByType(recordData),
+                        style: TextStyle(
+                          fontSize: 24.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      SizedBox(
+                        height: 8.h,
+                      ),
+                      Text(
+                        DateTool()
+                            .dateToHNString(recordData.operateDate.toString()),
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            Container(
+              width: 118.w,
+              height: 118.w,
               margin: const EdgeInsets.all(0),
               color: Colors.white,
               child: ClipRRect(
@@ -492,12 +522,6 @@ class _VideoLogPageState extends State<VideoLogPage> {
                 child: _buildImageOrVideoItem(recordData),
               ),
             ),
-            SizedBox(height: 5.h),
-            Text(
-              DateTool().dateToYMDHNString(recordData.operateDate.toString()),
-              textAlign: TextAlign.center,
-              style: TextStyle(fontSize: 18.sp),
-            )
           ],
         ),
       ),
@@ -512,6 +536,50 @@ class _VideoLogPageState extends State<VideoLogPage> {
     }
   }
 
+  String _buildTitleByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return '防拆报警'.tr;
+      case 160:
+        return '人脸'.tr + '开锁'.tr;
+      case 220:
+        return '逗留警告'.tr;
+      default:
+        return '';
+    }
+  }
+
+  IconData _buildIconByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return Icons.fmd_bad_outlined;
+      case 160:
+        return Icons.tag_faces_outlined;
+      case 220:
+        return Icons.wifi_tethering_error_rounded_outlined;
+      default:
+        return Icons.priority_high_rounded;
+    }
+  }
+
+  Color _buildTextColorByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 120:
+      case 150:
+      case 130:
+      case 190:
+      case 200:
+      case 210:
+      case 220:
+        return Colors.red;
+      default:
+        return Colors.black;
+    }
+  }
+
   _buildVideoItem(RecordListData recordData) {
     return VideoThumbnailImage(videoUrl: recordData.videoUrl!);
   }

lib/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_page.dart

@@ -1,9 +1,13 @@
+import 'dart:io';
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
+import 'package:star_lock/appRouters.dart';
+import 'package:star_lock/app_settings/app_settings.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLogDetail/controlsOverlay_page.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_state.dart';
@@ -30,11 +34,11 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
   @override
   void initState() {
     super.initState();
+    AppLog.log(
+        'state.recordData.value.videoUrl!' + state.recordData.value.videoUrl!);
 
-    state.videoController = VideoPlayerController.networkUrl(
+    state.videoController =
-      Uri.parse(state.recordData.value.videoUrl!),
+        createVideoController(state.recordData.value.videoUrl!);
-      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
-    );
 
     state.videoController.addListener(() {
       setState(() {});
@@ -47,10 +51,8 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
     if (state.videoController != null) {
       await state.videoController.dispose(); // 释放旧资源
     }
-    state.videoController = VideoPlayerController.networkUrl(
+    state.videoController =
-      Uri.parse(videoUrl),
+        createVideoController(state.recordData.value.videoUrl!);
-      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
-    );
 
     // 初始化完成后通知框架重新构建界面
     await state.videoController.initialize();
@@ -60,6 +62,22 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
     setState(() {});
   }
 
+  VideoPlayerController createVideoController(String url) {
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      return VideoPlayerController.networkUrl(
+        Uri.parse(url),
+        videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
+      );
+    } else {
+      final file = File(
+          url.startsWith('file://') ? url.replaceFirst('file://', '') : url);
+      return VideoPlayerController.file(
+        file,
+        videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -104,6 +122,7 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
                     ],
                   ),
                 ),
+                // _buildTitleRow(),
                 _buildOther(),
               ],
             )
@@ -135,14 +154,79 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
           );
         }
       },
-      child: SizedBox(
+      child: Container(
-        width: itemW,
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
-        height: itemH,
+        margin: EdgeInsets.only(
-        child: Column(
+          bottom: 20.h,
+          left: 18.w,
+          right: 18.w,
+        ),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(10.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 5,
+              offset: const Offset(0, 3), // changes position of shadow
+            ),
+          ],
+        ),
+        width: 1.sw,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
+            Row(
+              children: [
+                Container(
+                  padding: EdgeInsets.all(10.w),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(58.w),
+                    color: AppColors.mainColor,
+                  ),
+                  child: Icon(
+                    _buildIconByType(recordData),
+                    size: 48.sp,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
                 Container(
-              width: itemW,
                   height: itemW,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _buildTitleByType(recordData),
+                        style: TextStyle(
+                          fontSize: 24.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      SizedBox(
+                        height: 8.h,
+                      ),
+                      Text(
+                        DateTool()
+                            .dateToHNString(recordData.operateDate.toString()),
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            Container(
+              width: 118.w,
+              height: 118.w,
               margin: const EdgeInsets.all(0),
               color: Colors.white,
               child: ClipRRect(
@@ -213,11 +297,13 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
                 margin: EdgeInsets.only(left: 20.w, top: 15.w, bottom: 15.w),
                 child: Row(
                   children: <Widget>[
-                    Text(item.date ?? '', style: TextStyle(fontSize: 20.sp)),
+                    Text(item.date ?? '',
+                        style: TextStyle(
+                            fontSize: 24.sp, fontWeight: FontWeight.w600)),
                   ],
                 ),
               ),
-              mainListView(index, item),
+              ...mainListView(index, item),
             ],
           );
         },
@@ -225,22 +311,60 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
     );
   }
 
-  Widget mainListView(int index, CloudStorageData itemData) {
+  // 云存列表
-    return GridView.builder(
+  List<Widget> mainListView(int index, CloudStorageData itemData) {
-      itemCount: itemData.recordList!.length,
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
-      shrinkWrap: true,
+  }
-      physics: const NeverScrollableScrollPhysics(),
+
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+  String _buildTitleByType(RecordListData item) {
-        //横轴元素个数
+    final recordType = item.recordType;
-        crossAxisCount: 3,
+    switch (recordType) {
-      ),
+      case 130:
-      itemBuilder: (BuildContext context, int index) {
+        return '防拆报警'.tr;
-        return _buildItem(itemData.recordList![index]);
+      case 160:
-      },
+        return '人脸'.tr + '开锁'.tr;
-    );
+      case 220:
+        return '逗留警告'.tr;
+      default:
+        return '';
+    }
+  }
+
+  IconData _buildIconByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return Icons.fmd_bad_outlined;
+      case 160:
+        return Icons.tag_faces_outlined;
+      case 220:
+        return Icons.wifi_tethering_error_rounded_outlined;
+      default:
+        return Icons.priority_high_rounded;
+    }
   }
 
   _buildItem(itemData) {
     return videoItem(itemData);
   }
+
+  _buildTitleRow() {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+      ),
+      padding: EdgeInsets.only(left: 15.w, top: 24.w, bottom: 24.w),
+      child: Row(
+        children: [
+          Text(
+            _buildTitleByType(state.recordData.value) ?? '',
+            style: TextStyle(
+              fontSize: 24.sp,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
 }

lib/main/lockDetail/videoLog/widget/video_thumbnail_image.dart

@@ -2,6 +2,7 @@ import 'dart:io';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:video_thumbnail/video_thumbnail.dart';
 
@@ -77,7 +78,7 @@ class _VideoThumbnailState extends State<VideoThumbnailImage> {
               ),
               Icon(
                 Icons.play_arrow_rounded,
-                size: 80,
+                size: 88.sp,
                 color: Colors.white.withOpacity(0.8),
               ),
             ],