站点样式
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:getx_scaffold/getx_scaffold.dart';
|
||||
import 'package:ln_jq_app/common/login_util.dart';
|
||||
import 'package:ln_jq_app/common/styles/theme.dart';
|
||||
import 'package:ln_jq_app/pages/b_page/history/view.dart';
|
||||
import 'package:ln_jq_app/pages/c_page/message/view.dart';
|
||||
|
||||
import 'controller.dart';
|
||||
|
||||
@@ -15,199 +17,253 @@ class SitePage extends GetView<SiteController> {
|
||||
init: SiteController(),
|
||||
id: 'site',
|
||||
builder: (_) {
|
||||
return SingleChildScrollView(child: _buildView());
|
||||
return Scaffold(
|
||||
backgroundColor: Color(0xFFF5F7F9),
|
||||
body: SingleChildScrollView(child: _buildView(context)),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// 主视图
|
||||
Widget _buildView() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// 第一个卡片: 今日预约统计
|
||||
Card(
|
||||
elevation: 3,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
||||
child: Column(
|
||||
Widget _buildView(BuildContext context) {
|
||||
return Column(
|
||||
children: [
|
||||
// 第一个卡片: 今日预约统计
|
||||
_buildTopSection(context),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: 20.w, right: 20.w),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.only(top: 17.h, bottom: 10.h),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
"预约信息",
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(51, 51, 51, 1),
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14.sp,
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
Get.to(
|
||||
() => HistoryPage(),
|
||||
arguments: {'stationName': controller.name},
|
||||
);
|
||||
},
|
||||
child: Text(
|
||||
'历史记录',
|
||||
style: TextStyle(
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color.fromRGBO(156, 163, 175, 1),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 第二个卡片: 预约信息
|
||||
Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.calendar_today, color: Colors.blue, size: 32),
|
||||
const SizedBox(width: 12),
|
||||
const Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'今日预约统计',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
"Today's Reservation Statistics",
|
||||
style: TextStyle(fontSize: 12, color: Colors.grey),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blue.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: const Text(
|
||||
'实时',
|
||||
style: TextStyle(
|
||||
color: Colors.blue,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
const Divider(height: 1, indent: 16, endIndent: 16),
|
||||
const SizedBox(height: 12),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_buildStatItem(controller.leftHydrogen, '剩余余量'),
|
||||
_buildStatItem(controller.orderAmount, '预约车辆'),
|
||||
_buildStatItem(controller.completedAmount, '已完成'),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
_buildStatItem(controller.orderTotalAmount, '加氢总量'),
|
||||
_buildStatItem(controller.orderUnfinishedAmount, '未加氢总量'),
|
||||
],
|
||||
),
|
||||
),
|
||||
_buildSearchView(),
|
||||
controller.hasReservationData
|
||||
? _buildReservationListView()
|
||||
: _buildEmptyReservationView(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 第二个卡片: 预约信息
|
||||
Card(
|
||||
elevation: 3,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
|
||||
margin: EdgeInsets.only(bottom: 12),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
color: Colors.blue,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
controller.renderData();
|
||||
},
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
'今日预约信息',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 32,
|
||||
height: 32,
|
||||
child: const Icon(
|
||||
Icons.refresh,
|
||||
size: 18,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
//第三部分
|
||||
Container(
|
||||
padding: const EdgeInsets.all(15),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFF1F9F6), // 极浅绿色背景
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.info_outline,
|
||||
color: Color.fromRGBO(1, 113, 55, 1),
|
||||
size: 20,
|
||||
),
|
||||
SizedBox(width: 8.w),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"系统提醒",
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(1, 113, 55, 1),
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14.sp,
|
||||
),
|
||||
),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
Get.to(
|
||||
() => HistoryPage(),
|
||||
arguments: {
|
||||
'stationName': controller.name,
|
||||
},
|
||||
);
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.blue.shade700,
|
||||
foregroundColor: Colors.white,
|
||||
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
SizedBox(height: 6.h),
|
||||
Text(
|
||||
"数据每五分钟自动刷新,如需实时更新请下拉页面",
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(1, 113, 55, 0.8),
|
||||
fontSize: 12.sp,
|
||||
),
|
||||
elevation: 2,
|
||||
),
|
||||
child: const Text(
|
||||
'历史记录',
|
||||
style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
|
||||
SizedBox(height: 6.h),
|
||||
Text(
|
||||
"如有疑问请联系客服:400-021-1773",
|
||||
style: TextStyle(
|
||||
color: Color.fromRGBO(1, 113, 55, 0.8),
|
||||
fontSize: 12.sp,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTopSection(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
top: MediaQuery.of(context).padding.top + 10,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 25,
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 25,
|
||||
backgroundColor: Colors.white,
|
||||
child: LoginUtil.getAssImg('ic_user_logo@2x'),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
"今日预约统计",
|
||||
style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w400),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
"Today's Reservation Statistics",
|
||||
style: TextStyle(color: Colors.grey[500], fontSize: 13),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
Get.to(() => const MessagePage());
|
||||
},
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: Colors.grey[100],
|
||||
padding: const EdgeInsets.all(8),
|
||||
),
|
||||
icon: Badge(
|
||||
smallSize: 8,
|
||||
backgroundColor: controller.isNotice ? Colors.red : Colors.transparent,
|
||||
child: const Icon(
|
||||
Icons.notifications_outlined,
|
||||
color: Colors.black87,
|
||||
size: 30,
|
||||
),
|
||||
),
|
||||
_buildSearchView(),
|
||||
controller.hasReservationData
|
||||
? _buildReservationListView()
|
||||
: _buildEmptyReservationView(),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
//第三部分
|
||||
Card(
|
||||
elevation: 3,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildInfoItem(Icons.info_outline, '数据每5分钟自动刷新一次'),
|
||||
const SizedBox(height: 8),
|
||||
_buildInfoItem(Icons.headset_mic_outlined, '如有疑问请联系客服: 400-021-1773'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 25),
|
||||
Row(
|
||||
children: [
|
||||
_buildStatBox("剩余氢量", "remaining quantity", controller.leftHydrogen, "kg"),
|
||||
SizedBox(width: 4.w),
|
||||
_buildStatBox(
|
||||
"今日加氢量",
|
||||
"Have been added",
|
||||
controller.orderTotalAmount,
|
||||
"kg",
|
||||
),
|
||||
SizedBox(width: 4.w),
|
||||
_buildStatBox(
|
||||
"未加氢总量",
|
||||
"No quantity added",
|
||||
controller.orderUnfinishedAmount,
|
||||
"kg",
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatBox(String title, String enTitle, String value, String unit) {
|
||||
return Expanded(
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(left: 12.w, top: 4.h, bottom: 4.h),
|
||||
decoration: BoxDecoration(
|
||||
color: Color(0xFFF5F7F9),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
color: Color.fromRGBO(51, 51, 51, 0.8),
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
Text(enTitle, style: const TextStyle(fontSize: 9, color: Colors.grey)),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFF333333),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Text(unit, style: const TextStyle(fontSize: 11, color: Colors.grey)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
//搜索输入框,提示可以输入车牌或者手机
|
||||
Widget _buildSearchView() {
|
||||
return Padding(
|
||||
|
||||
Reference in New Issue
Block a user