Commit e12f65bf authored by 张宏's avatar 张宏

.

parent aba1fd46
......@@ -75,18 +75,18 @@ class _AbnormalDetailViewState extends State<AbnormalDetailView> {
children: [
Container(
width: double.infinity,
height: 70.h,
height: 88.h,
decoration: BoxDecoration(
color: Color.fromRGBO(59, 130, 246, 1),
borderRadius: BorderRadius.circular(20.r),
color: Color.fromRGBO(73, 149, 234, 1),
borderRadius: BorderRadius.circular(16.r),
),
child: TextButton(
onPressed: _controller.handleConfirm,
child: Text(
'确认处理',
style: TextStyle(
fontSize: 22.sp,
color: Colors.white,
fontSize: 28.sp,
color: Color.fromRGBO(237, 245, 255, 1),
),
),
),
......@@ -94,10 +94,10 @@ class _AbnormalDetailViewState extends State<AbnormalDetailView> {
SizedBox(height: 20.h),
Container(
width: double.infinity,
height: 70.h,
height: 88.h,
decoration: BoxDecoration(
color: Color.fromRGBO(209, 213, 219, 1),
borderRadius: BorderRadius.circular(20.r),
color: Color.fromRGBO(100, 116, 139, 0.2),
borderRadius: BorderRadius.circular(16.r),
),
child: TextButton(
onPressed: _controller.handleViewDevice,
......@@ -107,12 +107,12 @@ class _AbnormalDetailViewState extends State<AbnormalDetailView> {
Text(
'查看关联设备',
style: TextStyle(
fontSize: 22.sp,
color: Color.fromRGBO(75, 85, 99, 1),
fontSize: 28.sp,
color: Color.fromRGBO(100, 116, 139, 1),
),
),
SizedBox(width: 8.w),
Icon(Icons.launch, color: Color.fromRGBO(75, 85, 99, 1)),
Image.asset("lib/assets/icon/right.png", width: 24.w, height: 21.h,),
],
),
),
......
......@@ -24,7 +24,7 @@ class AlarmInfoBlock extends StatelessWidget {
'电压波动告警',
style: TextStyle(
fontSize: 28.sp,
color: Color.fromRGBO(17, 24, 39, 1),
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
......@@ -34,7 +34,7 @@ class AlarmInfoBlock extends StatelessWidget {
_buildInfoRow(
'告警级别',
'${alarmInfo.alarmLevel}(Level 3)',
valueColor: Color.fromRGBO(239, 68, 68, 1),
valueColor: Color.fromRGBO(255, 100, 101, 1),
),
SizedBox(height: 25.h),
_buildInfoRow('闭值设置', alarmInfo.threshold),
......@@ -44,13 +44,13 @@ class AlarmInfoBlock extends StatelessWidget {
_buildInfoRow(
'峰值记录',
alarmInfo.peak,
valueColor: Color.fromRGBO(251, 191, 36, 1),
valueColor: Color.fromRGBO(250, 204, 21, 1),
),
SizedBox(height: 25.h),
_buildInfoRow(
'关联联动',
alarmInfo.linkAction,
valueColor: Color.fromRGBO(59, 130, 246, 1),
valueColor: Color.fromRGBO(73, 149, 234, 1),
),
],
),
......@@ -64,15 +64,15 @@ class AlarmInfoBlock extends StatelessWidget {
Text(
label,
style: TextStyle(
fontSize: 20.sp,
color: Color.fromRGBO(107, 114, 128, 1),
fontSize: 24.sp,
color: Color.fromRGBO(100, 116, 139, 1),
),
),
Text(
value,
style: TextStyle(
fontSize: 20.sp,
color: valueColor ?? Color.fromRGBO(107, 114, 128, 1),
fontSize: 24.sp,
color: valueColor ?? Color.fromRGBO(100, 116, 139, 1),
),
),
],
......
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/views/home/device/controller.dart';
class DeviceParmsBlock extends StatefulWidget {
const DeviceParmsBlock({super.key});
class DeviceParmsBlock extends StatelessWidget {
final DeviceInfo deviceInfo;
@override
State<DeviceParmsBlock> createState() => _DeviceParmsBlockState();
}
const DeviceParmsBlock({super.key, required this.deviceInfo});
class _DeviceParmsBlockState extends State<DeviceParmsBlock> {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.only(top: 10.h, left: 20.w, right: 20.w),
padding: EdgeInsets.all(20.w),
margin: EdgeInsets.only(top: 10.h),
padding: EdgeInsets.all(25.w),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.r),
color: Color.fromRGBO(30, 41, 59, 1),
color: Colors.white,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
......@@ -25,32 +23,32 @@ class _DeviceParmsBlockState extends State<DeviceParmsBlock> {
Text(
'实时参数',
style: TextStyle(
fontSize: 18.sp,
color: Colors.white,
fontSize: 28.sp,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 15.h),
SizedBox(height: 20.h),
Row(
children: [
Expanded(
child: _buildParamCard('220V', '电压'),
child: _buildParamCard(deviceInfo.voltage, '电压'),
),
SizedBox(width: 12.w),
SizedBox(width: 15.w),
Expanded(
child: _buildParamCard('2.36A', '电流'),
child: _buildParamCard(deviceInfo.current, '电流'),
),
],
),
SizedBox(height: 12.h),
SizedBox(height: 15.h),
Row(
children: [
Expanded(
child: _buildParamCard('520W', '有功功率', isGreen: true),
child: _buildParamCard(deviceInfo.power, '有功功率', isGreen: true),
),
SizedBox(width: 12.w),
SizedBox(width: 15.w),
Expanded(
child: _buildParamCard('38°C', '设备温度'),
child: _buildParamCard(deviceInfo.temperature, '设备温度'),
),
],
),
......@@ -61,10 +59,10 @@ class _DeviceParmsBlockState extends State<DeviceParmsBlock> {
Widget _buildParamCard(String value, String label, {bool isGreen = false}) {
return Container(
padding: EdgeInsets.all(20.w),
padding: EdgeInsets.all(25.w),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.r),
color: Color.fromRGBO(45, 55, 72, 1),
borderRadius: BorderRadius.circular(25.r),
color: Color.fromRGBO(229, 241, 255, 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
......@@ -72,8 +70,8 @@ class _DeviceParmsBlockState extends State<DeviceParmsBlock> {
Text(
value,
style: TextStyle(
fontSize: 28.sp,
color: isGreen ? Color.fromRGBO(34, 197, 94, 1) : Colors.white,
fontSize: 40.sp,
color: isGreen ? Color.fromRGBO(20, 184, 166, 1) : Color.fromRGBO(73, 149, 234, 1),
fontWeight: FontWeight.bold,
),
),
......@@ -81,8 +79,8 @@ class _DeviceParmsBlockState extends State<DeviceParmsBlock> {
Text(
label,
style: TextStyle(
fontSize: 15.sp,
color: Colors.grey,
fontSize: 24.sp,
color: Color.fromRGBO(100, 116, 139, 1),
),
),
],
......
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:smart_hotel_app/views/home/device/controller.dart';
class PowerCharBlock extends StatefulWidget {
const PowerCharBlock({super.key});
final DeviceInfo deviceInfo;
const PowerCharBlock({super.key, required this.deviceInfo});
@override
State<PowerCharBlock> createState() => _PowerCharBlockState();
......@@ -16,11 +19,11 @@ class _PowerCharBlockState extends State<PowerCharBlock> {
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.only(top: 10.h, left: 20.w, right: 20.w),
padding: EdgeInsets.all(20.w),
margin: EdgeInsets.only(top: 10.h),
padding: EdgeInsets.all(25.w),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.r),
color: Color.fromRGBO(30, 41, 59, 1),
color: Colors.white,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
......@@ -29,17 +32,20 @@ class _PowerCharBlockState extends State<PowerCharBlock> {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'24h 功率趋势',
'24小时功率趋势',
style: TextStyle(
fontSize: 16.sp,
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.sp,
color: Color.fromRGBO(100, 116, 139, 1),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.r),
color: Color.fromRGBO(45, 55, 72, 1),
borderRadius: BorderRadius.circular(12.r),
color: Colors.transparent,
border: Border.all(
color: Color.fromRGBO(73, 149, 234, 0.5),
width: 1.5.w,
),
),
child: Row(
children: [
......@@ -52,20 +58,63 @@ class _PowerCharBlockState extends State<PowerCharBlock> {
),
SizedBox(height: 20.h),
Container(
height: 200.h,
height: 250.h,
child: BarChart(
BarChartData(
alignment: BarChartAlignment.spaceAround,
alignment: BarChartAlignment.spaceBetween,
maxY: 100,
minY: 0,
groupsSpace: 8,
groupsSpace: 10,
barTouchData: BarTouchData(enabled: false),
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
drawVerticalLine: false,
horizontalInterval: 20,
getDrawingHorizontalLine: (value) {
return FlLine(
color: Color.fromRGBO(209, 213, 219, 1),
strokeWidth: 1.5,
dashArray: [5, 5],
);
},
),
titlesData: FlTitlesData(
show: true,
rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 20,
getTitlesWidget: (value, meta) {
return Text(
'${value.toInt()}',
style: TextStyle(
color: Color.fromRGBO(156, 163, 175, 1),
fontSize: 14.sp,
),
);
},
reservedSize: 40,
),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 3,
getTitlesWidget: (value, meta) {
return Text(
'11:04',
style: TextStyle(
color: Color.fromRGBO(156, 163, 175, 1),
fontSize: 14.sp,
),
);
},
reservedSize: 40,
),
),
),
borderData: FlBorderData(show: false),
barGroups: _buildBarGroups(_selectedIndex),
......@@ -88,14 +137,14 @@ class _PowerCharBlockState extends State<PowerCharBlock> {
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.r),
color: isSelected ? Color.fromRGBO(59, 130, 246, 1) : Colors.transparent,
borderRadius: BorderRadius.circular(8.r),
color: isSelected ? Color.fromRGBO(219, 234, 254, 1) : Colors.transparent,
),
child: Text(
title,
style: TextStyle(
fontSize: 14.sp,
color: isSelected ? Colors.white : Colors.grey,
fontSize: 24.sp,
color: isSelected ? Color.fromRGBO(73, 149, 234, 1) : Color.fromRGBO(100, 116, 139, 1),
),
),
),
......@@ -103,29 +152,27 @@ class _PowerCharBlockState extends State<PowerCharBlock> {
}
List<BarChartGroupData> _buildBarGroups(int index) {
final powerData = [30, 45, 55, 65, 75, 80, 70, 60, 45, 30, 25];
final tempData = [25, 28, 30, 32, 35, 38, 36, 34, 32, 29, 26];
final data = index == 0 ? powerData : tempData;
final data = index == 0 ? widget.deviceInfo.powerData : widget.deviceInfo.tempData;
final Color mainColor = index == 0
? Color.fromRGBO(59, 130, 246, 1)
: Color.fromRGBO(246, 158, 11, 1.0);
final Color highlightColor = index == 0
? Color.fromRGBO(34, 197, 94, 1)
: Color.fromRGBO(239, 68, 68, 1);
: Color.fromRGBO(251, 191, 36, 1);
return List.generate(
data.length,
(i) => BarChartGroupData(
(i) {
if (data[i] == 0) return BarChartGroupData(x: i);
return BarChartGroupData(
x: i,
barRods: [
BarChartRodData(
toY: data[i].toDouble(),
color: i == 5 ? highlightColor : mainColor,
width: 20.w,
borderRadius: BorderRadius.vertical(top: Radius.circular(4.r)),
color: mainColor,
width: 22.w,
borderRadius: BorderRadius.vertical(top: Radius.circular(8.r)),
),
],
),
);
},
).where((group) => group.barRods.isNotEmpty).toList();
}
}
\ No newline at end of file
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/views/home/device/controller.dart';
class StateInfoBlock extends StatelessWidget {
const StateInfoBlock({super.key});
final DeviceInfo deviceInfo;
const StateInfoBlock({super.key, required this.deviceInfo});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.only(top: 10.h, left: 20.w, right: 20.w),
padding: EdgeInsets.all(20.w),
margin: EdgeInsets.only(top: 10.h),
padding: EdgeInsets.all(25.w),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.r),
color: Color.fromRGBO(30, 41, 59, 1),
color: Colors.white,
),
child: Row(
children: [
......@@ -20,8 +23,8 @@ class StateInfoBlock extends StatelessWidget {
width: 70.w,
height: 70.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.r),
color: Color.fromRGBO(51, 65, 85, 1),
borderRadius: BorderRadius.circular(15.r),
color: Color.fromRGBO(219, 234, 254, 1),
),
child: Icon(
Icons.power,
......@@ -29,35 +32,35 @@ class StateInfoBlock extends StatelessWidget {
size: 32.sp,
),
),
SizedBox(width: 20.w),
SizedBox(width: 15.w),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'客房 305 智能空开',
deviceInfo.deviceName,
style: TextStyle(
fontSize: 18.sp,
color: Colors.white,
fontSize: 28.sp,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.h),
Text(
'A-305 · 位置:3楼客房区',
'${deviceInfo.deviceId}·位置: ${deviceInfo.location}',
style: TextStyle(
fontSize: 15.sp,
color: Colors.grey,
fontSize: 24.sp,
color: Color.fromRGBO(100, 116, 139, 1),
),
),
],
),
),
Text(
'在线',
deviceInfo.status,
style: TextStyle(
fontSize: 16.sp,
color: Color.fromRGBO(34, 197, 94, 1),
fontSize: 24.sp,
color: Color.fromRGBO(20, 184, 166, 1),
fontWeight: FontWeight.bold,
),
),
......
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
class DeviceInfo {
final String deviceName;
final String deviceId;
final String location;
final String status;
final String voltage;
final String current;
final String power;
final String temperature;
final List<int> powerData;
final List<int> tempData;
DeviceInfo({
required this.deviceName,
required this.deviceId,
required this.location,
required this.status,
required this.voltage,
required this.current,
required this.power,
required this.temperature,
required this.powerData,
required this.tempData,
});
}
class HomeDeviceController {
final BuildContext context;
......@@ -12,4 +39,19 @@ class HomeDeviceController {
void remotePowerOff() {
// 远程断电
}
DeviceInfo getDeviceInfo() {
return DeviceInfo(
deviceName: '客房305 智能空开',
deviceId: 'A-305',
location: '3楼客房区',
status: '在线',
voltage: '220V',
current: '2.36A',
power: '520W',
temperature: '38°C',
powerData: [40, 60, 85, 98, 85, 72, 60, 48, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
tempData: [28, 30, 32, 35, 33, 31, 30, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
);
}
}
\ No newline at end of file
......@@ -16,22 +16,24 @@ class DeviceDetailView extends StatefulWidget {
class _DeviceDetailViewState extends State<DeviceDetailView> {
late final HomeDeviceController _controller;
late final DeviceInfo _deviceInfo;
@override
void initState() {
super.initState();
_controller = HomeDeviceController(context);
_deviceInfo = _controller.getDeviceInfo();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(15, 23, 42, 1),
backgroundColor: Color.fromRGBO(242, 243, 245, 1),
appBar: AppBar(
backgroundColor: Color.fromRGBO(15, 23, 42, 1),
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
icon: Icon(Icons.arrow_back_ios, color: Color.fromRGBO(100, 116, 139, 1),),
onPressed: () {
context.popRoute();
},
......@@ -39,83 +41,73 @@ class _DeviceDetailViewState extends State<DeviceDetailView> {
title: Text(
'设备详情',
style: TextStyle(
color: Colors.white,
fontSize: 18.sp,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(10, 13, 20, 1),
fontSize: 32.sp,
fontWeight: FontWeight.w200,
),
),
centerTitle: true,
),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 28.w),
child: Column(
children: [
StateInfoBlock(),
StateInfoBlock(deviceInfo: _deviceInfo),
SizedBox(height: 10.h),
DeviceParmsBlock(),
DeviceParmsBlock(deviceInfo: _deviceInfo),
SizedBox(height: 10.h),
PowerCharBlock(),
SizedBox(height: 120.h),
PowerCharBlock(deviceInfo: _deviceInfo),
SizedBox(height: 10.h),
_buildBottomButtons(),
SizedBox(height: 30.h),
],
),
),
bottomNavigationBar: _buildBottomButtons(),
);
}
Widget _buildBottomButtons() {
return Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 15.h),
decoration: BoxDecoration(
color: Color.fromRGBO(15, 23, 42, 1),
border: Border(
top: BorderSide(
color: Color.fromRGBO(30, 41, 59, 1),
width: 1.w,
),
),
),
child: Column(
padding: EdgeInsets.symmetric(vertical: 15.h),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Expanded(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromRGBO(34, 197, 94, 1),
minimumSize: Size(double.infinity, 55.h),
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.r),
),
Container(
width: 300.w,
height: 88.h,
decoration: BoxDecoration(
color: Color.fromRGBO(73, 149, 234, 1),
borderRadius: BorderRadius.circular(16.r),
),
child: TextButton(
onPressed: _controller.remotePowerOn,
child: Text(
"远程送电",
style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.bold),
style: TextStyle(fontSize: 28.sp, color: Color.fromRGBO(237, 245, 255, 1)),
),
),
),
SizedBox(width: 12.w),
Expanded(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromRGBO(239, 68, 68, 1),
minimumSize: Size(double.infinity, 55.h),
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.r),
SizedBox(width: 30.w,),
Container(
width: 300.w,
height: 88.h,
decoration: BoxDecoration(
color: Color.fromRGBO(229, 241, 255, 1.0),
border: Border.all(
color: Color.fromRGBO(73, 149, 234, 1),
width: 1.w,
),
borderRadius: BorderRadius.circular(16.r),
),
child: TextButton(
onPressed: _controller.remotePowerOff,
child: Text(
"远程断电",
style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.bold),
),
style: TextStyle(fontSize: 28.sp, color: Color.fromRGBO(100, 116, 139, 1)),
),
),
],
),
],
),
......
......@@ -74,6 +74,7 @@ flutter:
- lib/assets/
- lib/assets/login/
- lib/assets/tab/
- lib/assets/icon/
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment