367 lines
12 KiB
Dart
367 lines
12 KiB
Dart
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/widgets.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:starwork_flutter/common/constant/app_colors.dart';
|
|
import 'package:starwork_flutter/common/constant/app_support_device_type.dart';
|
|
import 'package:starwork_flutter/common/constant/app_view_parameter_keys.dart';
|
|
import 'package:starwork_flutter/common/widgets/custome_app_bar_wdiget.dart';
|
|
import 'package:starwork_flutter/extension/function_extension.dart';
|
|
import 'package:starwork_flutter/routes/app_routes.dart';
|
|
import 'package:starwork_flutter/views/device/deviceManage/device_manage_controller.dart';
|
|
|
|
class DeviceManageView extends GetView<DeviceManageController> {
|
|
const DeviceManageView({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
FocusScope.of(context).requestFocus(FocusNode());
|
|
},
|
|
child: Scaffold(
|
|
backgroundColor: AppColors.scaffoldBackgroundColor,
|
|
appBar: CustomAppBarWidget(
|
|
title: '设备管理'.tr,
|
|
showBackButton: false,
|
|
),
|
|
body: SafeArea(
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 10.h,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 10.w,
|
|
vertical: 10.h,
|
|
),
|
|
decoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
_buildSearchBar(),
|
|
SizedBox(
|
|
height: 10.h,
|
|
),
|
|
_buildLabelRow(),
|
|
],
|
|
),
|
|
),
|
|
// 主区域：左侧菜单 + 右侧设备列表（占满剩余空间）
|
|
Expanded(
|
|
// ✅ 关键：让主内容区域占满剩余高度
|
|
child: _buildMainArea(),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () {
|
|
Get.toNamed(AppRoutes.searchDevice);
|
|
},
|
|
child: Text(
|
|
'添加设备',
|
|
style: TextStyle(
|
|
color: Colors.blue,
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 16.sp,
|
|
),
|
|
),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
Get.toNamed(
|
|
AppRoutes.deviceRemoveDevice,
|
|
arguments: {
|
|
AppViewParameterKeys.deviceList: controller.deviceList,
|
|
},
|
|
);
|
|
},
|
|
child: Text(
|
|
'删除设备',
|
|
style: TextStyle(
|
|
color: Colors.blue,
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 16.sp,
|
|
),
|
|
),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
controller.showFunctionNotOpen();
|
|
},
|
|
child: Text(
|
|
'更多管理',
|
|
style: TextStyle(
|
|
color: Colors.blue,
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 16.sp,
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
_buildSearchBar() {
|
|
return TextField(
|
|
controller: controller.searchInputController,
|
|
textInputAction: TextInputAction.search,
|
|
decoration: InputDecoration(
|
|
hintText: '请输入设备名称'.tr,
|
|
hintStyle: TextStyle(
|
|
fontSize: 14.sp,
|
|
color: const Color(0xFF999999),
|
|
),
|
|
prefixIcon: const Icon(
|
|
Icons.search,
|
|
color: Color(0xFF999999),
|
|
),
|
|
filled: true,
|
|
// 启用背景填充
|
|
fillColor: const Color(0xFFf0f0f0),
|
|
// 灰色背景（可调整色值）
|
|
border: InputBorder.none,
|
|
// 设置内边距
|
|
contentPadding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: Colors.blue,
|
|
width: 1.5,
|
|
),
|
|
borderRadius: BorderRadius.circular(8.0.r),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(color: Colors.transparent),
|
|
borderRadius: BorderRadius.circular(8.0.r),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
_buildLabelRow() {
|
|
return Obx(
|
|
() => Row(
|
|
children: [
|
|
GestureDetector(
|
|
onTap: () {
|
|
controller.changeStatusFilter(0);
|
|
},
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
|
|
decoration: BoxDecoration(
|
|
color: controller.selectedStatusIndex == 0 ? Colors.black : Colors.grey[300],
|
|
borderRadius: BorderRadius.circular(4.r),
|
|
),
|
|
child: Text(
|
|
'全部状态'.tr,
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: controller.selectedStatusIndex == 0 ? Colors.white : Colors.grey[500],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 10.w,
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
controller.changeStatusFilter(1);
|
|
},
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
|
|
decoration: BoxDecoration(
|
|
color: controller.selectedStatusIndex == 1 ? Colors.black : Colors.grey[300],
|
|
borderRadius: BorderRadius.circular(4.r),
|
|
),
|
|
child: Text(
|
|
'在线(${controller.onlineDeviceCount.value})'.tr,
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: controller.selectedStatusIndex == 1 ? Colors.white : Colors.grey[500],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 10.w,
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
controller.changeStatusFilter(2);
|
|
},
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
|
|
decoration: BoxDecoration(
|
|
color: controller.selectedStatusIndex == 2 ? Colors.black : Colors.grey[300],
|
|
borderRadius: BorderRadius.circular(4.r),
|
|
),
|
|
child: Text(
|
|
'离线(${controller.offlineDeviceCount.value})'.tr,
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: controller.selectedStatusIndex == 2 ? Colors.white : Colors.grey[500],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_buildMainArea() {
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 1,
|
|
child: _buildLeftOptionsList(), // 左侧列表
|
|
),
|
|
Expanded(
|
|
flex: 4,
|
|
child: _buildRightDeviceList(), // 右侧设备
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
_buildLeftOptionsList() {
|
|
return Container(
|
|
decoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
),
|
|
child: ListView.builder(
|
|
itemCount: AppSupportDeviceType.allTypes.length,
|
|
itemBuilder: (context, index) {
|
|
var deviceType = AppSupportDeviceType.allTypes[index];
|
|
return Obx(
|
|
() => GestureDetector(
|
|
onTap: () {
|
|
controller.selectedDeviceType.value = deviceType;
|
|
},
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(vertical: 10.h),
|
|
decoration: BoxDecoration(
|
|
color: controller.selectedDeviceType.value == deviceType
|
|
? AppColors.scaffoldBackgroundColor
|
|
: Colors.white,
|
|
),
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
'${deviceType.label}(${controller.deviceList.length})',
|
|
style: TextStyle(
|
|
fontSize: 10.sp,
|
|
color: Colors.black,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
_buildRightDeviceList() {
|
|
return Obx(
|
|
() => Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
|
|
child: GridView.builder(
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2, // 每行两列
|
|
crossAxisSpacing: 6.w, // 列间距
|
|
mainAxisSpacing: 6.h, // 行间距
|
|
childAspectRatio: 1.6, // 宽高比，可根据需要调整
|
|
),
|
|
itemCount: controller.filteredDeviceList.length,
|
|
itemBuilder: (context, index) {
|
|
final lock = controller.filteredDeviceList[index];
|
|
return GestureDetector(
|
|
onTap: () {
|
|
Get.toNamed(AppRoutes.deviceSetting, arguments: {
|
|
AppViewParameterKeys.lockInfo: lock.toJson(),
|
|
});
|
|
},
|
|
child: Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.all(Radius.circular(8.r)),
|
|
),
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 10.w,
|
|
),
|
|
alignment: Alignment.centerLeft,
|
|
child: Obx(
|
|
() => Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
if (controller.selectedDeviceType.value.iconImagePath != null)
|
|
Image(
|
|
image: AssetImage(controller.selectedDeviceType.value.iconImagePath!),
|
|
width: 26.w,
|
|
height: 26.w,
|
|
fit: BoxFit.contain,
|
|
gaplessPlayback: true,
|
|
// 防止闪烁
|
|
filterQuality: FilterQuality.medium,
|
|
// 优化过滤质量
|
|
errorBuilder: (context, error, stackTrace) {
|
|
return Icon(
|
|
Icons.image_not_supported,
|
|
size: 26.sp,
|
|
color: Colors.grey,
|
|
);
|
|
},
|
|
),
|
|
SizedBox(
|
|
height: 6.h,
|
|
),
|
|
Text(
|
|
lock.lockName,
|
|
style: TextStyle(
|
|
fontSize: 11.sp,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
SizedBox(
|
|
height: 4.h,
|
|
),
|
|
Text(
|
|
lock.network?.isOnline == 1 ? '在线' : '离线',
|
|
style: TextStyle(
|
|
color: lock.network?.isOnline == 1 ? Colors.green : Colors.grey,
|
|
fontSize: 10.sp,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|