mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-11-26 19:34:54 +00:00
power_clamp
This commit is contained in:
124
lib/pages/device_managment/power_clamp/view/phase_widget.dart
Normal file
124
lib/pages/device_managment/power_clamp/view/phase_widget.dart
Normal file
@ -0,0 +1,124 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_info_card.dart';
|
||||
import 'package:syncrow_web/utils/constants/assets.dart';
|
||||
|
||||
class PhaseWidget extends StatefulWidget {
|
||||
final List<Map<String, dynamic>> phaseData;
|
||||
|
||||
PhaseWidget({
|
||||
required this.phaseData,
|
||||
});
|
||||
@override
|
||||
_PhaseWidgetState createState() => _PhaseWidgetState();
|
||||
}
|
||||
|
||||
class _PhaseWidgetState extends State<PhaseWidget> {
|
||||
int _selectedPhaseIndex = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(height: 10),
|
||||
Row(
|
||||
children: List.generate(widget.phaseData.length, (index) {
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_selectedPhaseIndex = index;
|
||||
});
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 10, right: 10),
|
||||
child: Text(
|
||||
widget.phaseData[index]['name'],
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: _selectedPhaseIndex == index
|
||||
? Colors.black
|
||||
: Colors.grey,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
SizedBox(height: 10),
|
||||
_selectedPhaseIndex == 0
|
||||
? phase(
|
||||
totalActive: widget.phaseData[0]['activePower'] ?? '0',
|
||||
totalCurrent: widget.phaseData[0]['current'] ?? '0',
|
||||
totalFactor: widget.phaseData[0]['powerFactor'] ?? '0',
|
||||
totalVoltage: widget.phaseData[0]['voltage'] ?? '0',
|
||||
)
|
||||
: _selectedPhaseIndex == 1
|
||||
? phase(
|
||||
totalActive: widget.phaseData[1]['activePower'] ?? '0',
|
||||
totalCurrent: widget.phaseData[1]['current'] ?? '0',
|
||||
totalFactor: widget.phaseData[1]['powerFactor'] ?? '0',
|
||||
totalVoltage: widget.phaseData[1]['voltage'] ?? '0',
|
||||
)
|
||||
: phase(
|
||||
totalActive: widget.phaseData[2]['activePower'] ?? '0',
|
||||
totalCurrent: widget.phaseData[2]['current'] ?? '0',
|
||||
totalFactor: widget.phaseData[2]['powerFactor'] ?? '0',
|
||||
totalVoltage: widget.phaseData[2]['voltage'] ?? '0',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class phase extends StatelessWidget {
|
||||
const phase({
|
||||
super.key,
|
||||
required this.totalVoltage,
|
||||
required this.totalCurrent,
|
||||
required this.totalActive,
|
||||
required this.totalFactor,
|
||||
});
|
||||
|
||||
final String totalVoltage;
|
||||
final String totalCurrent;
|
||||
final String totalActive;
|
||||
final String totalFactor;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.voltageIcon,
|
||||
title: 'Voltage',
|
||||
value: totalVoltage,
|
||||
unit: '',
|
||||
),
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.voltMeterIcon,
|
||||
title: 'Current',
|
||||
value: totalCurrent,
|
||||
unit: '',
|
||||
),
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.powerActiveIcon,
|
||||
title: 'Active Power',
|
||||
value: totalActive,
|
||||
unit: '',
|
||||
),
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.speedoMeter,
|
||||
title: 'Power Factor',
|
||||
value: totalFactor,
|
||||
unit: '',
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -28,9 +28,62 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
return Container(
|
||||
color: ColorsManager.whiteColors,
|
||||
child: Column(
|
||||
children: [
|
||||
const Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Total Consumption',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 20,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'8623.20 kWh',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 20,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Row(
|
||||
children: [
|
||||
Text(
|
||||
'Energy consumption',
|
||||
style: TextStyle(
|
||||
color: ColorsManager.grayColor,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'01/08/2024 - 31/08/2024',
|
||||
style: TextStyle(
|
||||
color: ColorsManager.grayColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 8,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'1000.00 kWh',
|
||||
style: TextStyle(
|
||||
color: ColorsManager.grayColor,
|
||||
fontWeight: FontWeight.w400,
|
||||
fontSize: 8,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 15),
|
||||
@ -78,7 +131,7 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
|
||||
),
|
||||
topTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
showTitles: false,
|
||||
reservedSize: 70,
|
||||
getTitlesWidget: (value, meta) {
|
||||
int index = value.toInt();
|
||||
|
||||
@ -24,56 +24,50 @@ class PowerClampInfoCard extends StatelessWidget {
|
||||
padding: const EdgeInsets.all(5.0),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
color: ColorsManager.graysColor,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
height: 55,
|
||||
color: ColorsManager.graysColor,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
Expanded(
|
||||
child: SvgPicture.asset(
|
||||
iconPath,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
SvgPicture.asset(
|
||||
iconPath,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
Text(
|
||||
unit,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
Text(
|
||||
unit,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
|
||||
@ -1,66 +1,234 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_bloc.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_event.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_state.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_chart.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_info_card.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/power_clamp/view/phase_widget.dart';
|
||||
import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.dart';
|
||||
import 'package:syncrow_web/utils/color_manager.dart';
|
||||
import 'package:syncrow_web/utils/constants/assets.dart';
|
||||
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
|
||||
|
||||
//Smart Power Clamp
|
||||
class SmartPowerDeviceControl extends StatelessWidget
|
||||
class SmartPowerDeviceControl extends StatefulWidget
|
||||
with HelperResponsiveLayout {
|
||||
final String deviceId;
|
||||
|
||||
const SmartPowerDeviceControl({super.key, required this.deviceId});
|
||||
|
||||
@override
|
||||
State<SmartPowerDeviceControl> createState() =>
|
||||
_SmartPowerDeviceControlState();
|
||||
}
|
||||
|
||||
class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return _buildStatusControls(
|
||||
context,
|
||||
return BlocProvider(
|
||||
create: (context) => SmartPowerBloc(deviceId: widget.deviceId)
|
||||
..add(SmartPowerFetchDeviceEvent(widget.deviceId)),
|
||||
child: BlocBuilder<SmartPowerBloc, SmartPowerState>(
|
||||
builder: (context, state) {
|
||||
final _blocProvider = BlocProvider.of<SmartPowerBloc>(context);
|
||||
|
||||
if (state is SmartPowerLoading) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
} else if (state is SmartPowerStatusLoaded) {
|
||||
return _buildStatusControls(
|
||||
context: context,
|
||||
blocProvider: _blocProvider,
|
||||
);
|
||||
}
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
// }
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
// BlocProvider(
|
||||
// create: (context) => SmartPowerBloc(deviceId: deviceId)
|
||||
// ..add(SmartPowerFetchDeviceEvent(deviceId)),
|
||||
// child: BlocBuilder<SmartPowerBloc, SmartPowerState>(
|
||||
// builder: (context, state) {
|
||||
// if (state is SmartPowerLoading) {
|
||||
// return const Center(child: CircularProgressIndicator());
|
||||
// } else if (state is SmartPowerStatusLoaded) {
|
||||
// return _buildStatusControls(context, state.status);
|
||||
// }
|
||||
|
||||
// // else if (state is WallLightSwitchError ||
|
||||
// // state is WallLightSwitchControlError) {
|
||||
// // return const Center(child: Text('Error fetching status'));
|
||||
// // } else {
|
||||
// return const Center(child: CircularProgressIndicator());
|
||||
// // }
|
||||
// },
|
||||
// ),
|
||||
// );
|
||||
}
|
||||
|
||||
Widget _buildStatusControls(
|
||||
BuildContext context,
|
||||
) {
|
||||
final isExtraLarge = isExtraLargeScreenSize(context);
|
||||
final isLarge = isLargeScreenSize(context);
|
||||
final isMedium = isMediumScreenSize(context);
|
||||
Widget _buildStatusControls({
|
||||
required BuildContext context,
|
||||
required SmartPowerBloc blocProvider,
|
||||
}) {
|
||||
PageController _pageController = PageController();
|
||||
int _currentPage = 0;
|
||||
|
||||
void _onArrowPressed(int direction) {
|
||||
setState(() {
|
||||
_currentPage = (_currentPage + direction) % 3;
|
||||
if (_currentPage < 0) {
|
||||
_currentPage = 2;
|
||||
}
|
||||
_pageController.animateToPage(
|
||||
_currentPage,
|
||||
duration: Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return Container(
|
||||
height: 150,
|
||||
child: EnergyConsumptionPage(
|
||||
chartData: [
|
||||
EnergyData('12:00 AM', 4.0),
|
||||
EnergyData('01:00 AM', 3.5),
|
||||
EnergyData('02:00 AM', 3.8),
|
||||
EnergyData('03:00 AM', 3.2),
|
||||
EnergyData('04:00 AM', 4.0),
|
||||
EnergyData('05:00 AM', 3.4),
|
||||
EnergyData('06:00 AM', 3.2),
|
||||
EnergyData('07:00 AM', 3.5),
|
||||
EnergyData('08:00 AM', 3.8),
|
||||
EnergyData('09:00 AM', 3.6),
|
||||
EnergyData('10:00 AM', 3.9),
|
||||
EnergyData('11:00 AM', 4.0),
|
||||
],
|
||||
totalConsumption: 10000,
|
||||
date: '10/08/2024',
|
||||
child: DeviceControlsContainer(
|
||||
child: Column(
|
||||
children: [
|
||||
const Row(
|
||||
children: [
|
||||
Text(
|
||||
'Live',
|
||||
style: TextStyle(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorsManager.grayColor),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.powerActiveIcon,
|
||||
title: 'Active',
|
||||
value: blocProvider
|
||||
.deviceStatus.status.general.dataPoints[0].value
|
||||
.toString(),
|
||||
unit: '',
|
||||
),
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.voltMeterIcon,
|
||||
title: 'Current',
|
||||
value: blocProvider
|
||||
.deviceStatus.status.general.dataPoints[1].value
|
||||
.toString(),
|
||||
unit: ' A',
|
||||
),
|
||||
PowerClampInfoCard(
|
||||
iconPath: Assets.frequencyIcon,
|
||||
title: 'Frequency',
|
||||
value: blocProvider
|
||||
.deviceStatus.status.general.dataPoints[2].value
|
||||
.toString(),
|
||||
unit: ' Hz',
|
||||
),
|
||||
],
|
||||
),
|
||||
PhaseWidget(
|
||||
phaseData: blocProvider.phaseData,
|
||||
),
|
||||
Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: ColorsManager.whiteColors,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
height: 250,
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: ColorsManager.graysColor,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
height: 60,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(Icons.arrow_left),
|
||||
onPressed: () => _onArrowPressed(-1),
|
||||
),
|
||||
Text(
|
||||
_currentPage == 0
|
||||
? 'Total'
|
||||
: _currentPage == 0
|
||||
? 'Phase A'
|
||||
: _currentPage == 0
|
||||
? 'Phase B'
|
||||
: 'Phase C',
|
||||
style: TextStyle(fontSize: 18),
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(Icons.arrow_right),
|
||||
onPressed: () => _onArrowPressed(1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: PageView(
|
||||
controller: _pageController,
|
||||
onPageChanged: (int page) {
|
||||
setState(() {
|
||||
_currentPage = page;
|
||||
});
|
||||
},
|
||||
children: [
|
||||
EnergyConsumptionPage(
|
||||
chartData: [
|
||||
EnergyData('12:00 AM', 4.0),
|
||||
EnergyData('01:00 AM', 3.5),
|
||||
EnergyData('02:00 AM', 3.8),
|
||||
EnergyData('03:00 AM', 3.2),
|
||||
EnergyData('04:00 AM', 4.0),
|
||||
EnergyData('05:00 AM', 3.4),
|
||||
EnergyData('06:00 AM', 3.2),
|
||||
EnergyData('07:00 AM', 3.5),
|
||||
EnergyData('08:00 AM', 3.8),
|
||||
EnergyData('09:00 AM', 3.6),
|
||||
EnergyData('10:00 AM', 3.9),
|
||||
EnergyData('10:00 AM', 3.9),
|
||||
EnergyData('11:00 AM', 4.0),
|
||||
],
|
||||
totalConsumption: 10000,
|
||||
date: '10/08/2024',
|
||||
),
|
||||
EnergyConsumptionPage(
|
||||
chartData: [
|
||||
EnergyData('12:00 AM', 4.0),
|
||||
EnergyData('01:00 AM', 3.5),
|
||||
EnergyData('02:00 AM', 3.8),
|
||||
EnergyData('03:00 AM', 3.2),
|
||||
EnergyData('04:00 AM', 4.0),
|
||||
EnergyData('05:00 AM', 3.4),
|
||||
EnergyData('06:00 AM', 3.2),
|
||||
EnergyData('07:00 AM', 3.5),
|
||||
EnergyData('08:00 AM', 3.8),
|
||||
EnergyData('09:00 AM', 3.6),
|
||||
EnergyData('10:00 AM', 3.9),
|
||||
EnergyData('10:00 AM', 3.9),
|
||||
EnergyData('11:00 AM', 4.0),
|
||||
],
|
||||
totalConsumption: 10000,
|
||||
date: '10/08/2024',
|
||||
),
|
||||
EnergyConsumptionPage(
|
||||
chartData: [
|
||||
EnergyData('12:00 AM', 4.0),
|
||||
EnergyData('01:00 AM', 6.5),
|
||||
EnergyData('02:00 AM', 3.8),
|
||||
EnergyData('03:00 AM', 3.2),
|
||||
EnergyData('04:00 AM', 6.0),
|
||||
EnergyData('05:00 AM', 3.4),
|
||||
EnergyData('06:00 AM', 5.2),
|
||||
EnergyData('07:00 AM', 3.5),
|
||||
EnergyData('08:00 AM', 3.8),
|
||||
EnergyData('09:00 AM', 5.6),
|
||||
EnergyData('10:00 AM', 6.9),
|
||||
EnergyData('10:00 AM', 3.9),
|
||||
EnergyData('11:00 AM', 6.0),
|
||||
],
|
||||
totalConsumption: 10000,
|
||||
date: '10/08/2024',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user