383 lines
13 KiB
Dart
383 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:intl/intl.dart';
|
|
import './channel_sales_api.dart';
|
|
import './channel_sales_model.dart';
|
|
|
|
class ChannelSalesManager extends StatefulWidget {
|
|
const ChannelSalesManager({super.key});
|
|
|
|
@override
|
|
State<ChannelSalesManager> createState() => _ChannelSalesManagerState();
|
|
}
|
|
|
|
class _ChannelSalesManagerState extends State<ChannelSalesManager> {
|
|
final SalesStatisticsService _service = SalesStatisticsService();
|
|
final NumberFormat _currencyFormat = NumberFormat("#,##0", "en_US");
|
|
final TextEditingController _channelController = TextEditingController();
|
|
|
|
// 狀態變數：月份區間與資料儲存
|
|
String _startYYMM = "${DateTime.now().year}01";
|
|
String _endYYMM = DateFormat('yyyyMM').format(DateTime.now());
|
|
|
|
// 儲存一般查詢的 Future
|
|
late Future<List<SalesStats>> _statsFuture;
|
|
|
|
// 儲存進階分析 (SP) 的原始 Model 數據與表格數據
|
|
List<SalesStats> _chartData = [];
|
|
List<Map<String, dynamic>> _dynamicTableData = [];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_doSearch(); // 初始載入一般數據
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_channelController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
// 動作 1：標準搜尋 (ORM API)
|
|
void _doSearch() {
|
|
setState(() {
|
|
_chartData = []; // 清空 SP 數據以顯示一般圖表
|
|
_dynamicTableData = [];
|
|
_statsFuture = _service.getChannelStats(
|
|
startYYMM: _startYYMM,
|
|
endYYMM: _endYYMM,
|
|
channelId: _channelController.text,
|
|
);
|
|
});
|
|
}
|
|
|
|
// 動作 2：進階分析 (Stored Procedure)
|
|
Future<void> _runAdvancedSP() async {
|
|
try {
|
|
final List<SalesStats> result = await _service.executeSP(
|
|
endpoint: "sp_get_channel_sales_stats",
|
|
p_01: _channelController.text.isEmpty ? "*" : _channelController.text,
|
|
p_02: _startYYMM,
|
|
p_03: _endYYMM,
|
|
);
|
|
|
|
setState(() {
|
|
_chartData = result; // 更新圖表數據
|
|
_dynamicTableData = result.map((item) => item.toJson()).toList(); // 更新表格
|
|
});
|
|
} catch (e) {
|
|
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('進階分析執行失敗: $e')));
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(title: const Text('通路銷售分析')),
|
|
body: Column(
|
|
children: [
|
|
_buildSearchPanel(), // 包含月份選擇與搜尋
|
|
Expanded(
|
|
child: RefreshIndicator(
|
|
onRefresh: () async => _doSearch(),
|
|
child: _buildMainContent(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 根據是否有進階分析數據切換視圖
|
|
Widget _buildMainContent() {
|
|
if (_chartData.isNotEmpty) {
|
|
// 如果有進階分析結果，顯示圖表與表格
|
|
return SingleChildScrollView(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
children: [
|
|
_buildSummaryCards(_chartData),
|
|
const SizedBox(height: 20),
|
|
_buildTrendChart(_chartData),
|
|
const SizedBox(height: 20),
|
|
_buildRegionPieChart(_chartData),
|
|
const SizedBox(height: 20),
|
|
_buildDynamicDataTable(), // 底部顯示資料明細
|
|
],
|
|
),
|
|
);
|
|
} else {
|
|
// 顯示一般搜尋的 FutureBuilder
|
|
return _buildDashboardCharts();
|
|
}
|
|
}
|
|
|
|
// 搜尋面板：整合月份選擇與按鈕
|
|
Widget _buildSearchPanel() {
|
|
return Card(
|
|
margin: const EdgeInsets.all(8),
|
|
elevation: 2,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
_buildDateButton("開始: $_startYYMM", true),
|
|
const SizedBox(width: 8),
|
|
_buildDateButton("結束: $_endYYMM", false),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
controller: _channelController,
|
|
decoration: const InputDecoration(
|
|
hintText: '輸入通路 ID (留空則搜尋全部)',
|
|
prefixIcon: Icon(Icons.store),
|
|
border: OutlineInputBorder(),
|
|
isDense: true,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
IconButton.filled(icon: const Icon(Icons.search), onPressed: _doSearch),
|
|
IconButton.filled(
|
|
icon: const Icon(Icons.insights),
|
|
onPressed: _runAdvancedSP,
|
|
style: IconButton.styleFrom(backgroundColor: Colors.purple),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildDateButton(String text, bool isStart) {
|
|
return Expanded(
|
|
child: OutlinedButton.icon(
|
|
icon: const Icon(Icons.calendar_month, size: 18),
|
|
label: Text(text),
|
|
onPressed: () async {
|
|
String? picked = await _showMonthPicker(context, isStart ? _startYYMM : _endYYMM);
|
|
if (picked != null) {
|
|
setState(() {
|
|
if (isStart) _startYYMM = picked; else _endYYMM = picked;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
// 圖表組件：銷售趨勢 (LineChart)
|
|
Widget _buildTrendChart(List<SalesStats> data) {
|
|
if (data.isEmpty) return const SizedBox();
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(" 銷售金額分析", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
|
|
const SizedBox(height: 10),
|
|
SizedBox(
|
|
height: 250,
|
|
child: LineChart(
|
|
LineChartData(
|
|
gridData: const FlGridData(show: true),
|
|
titlesData: FlTitlesData(
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
getTitlesWidget: (value, meta) {
|
|
int idx = value.toInt();
|
|
if (idx >= 0 && idx < data.length) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 8.0),
|
|
child: Text(data[idx].channelId, style: const TextStyle(fontSize: 10)),
|
|
);
|
|
}
|
|
return const SizedBox();
|
|
},
|
|
),
|
|
),
|
|
leftTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
),
|
|
borderData: FlBorderData(show: true),
|
|
lineBarsData: [
|
|
LineChartBarData(
|
|
spots: data.asMap().entries.map((e) => FlSpot(e.key.toDouble(), e.value.sAmts)).toList(),
|
|
isCurved: true,
|
|
color: Colors.blue,
|
|
barWidth: 4,
|
|
dotData: const FlDotData(show: true),
|
|
belowBarData: BarAreaData(show: true, color: Colors.blue.withOpacity(0.2)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// 圖表組件：佔比 (PieChart)
|
|
Widget _buildRegionPieChart(List<SalesStats> data) {
|
|
if (data.isEmpty) return const SizedBox();
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(" 銷售分配", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
|
|
const SizedBox(height: 10),
|
|
SizedBox(
|
|
height: 200,
|
|
child: PieChart(
|
|
PieChartData(
|
|
sections: data.asMap().entries.map((e) {
|
|
return PieChartSectionData(
|
|
value: e.value.sAmts,
|
|
title: e.value.channelName,
|
|
radius: 50,
|
|
color: Colors.primaries[e.key % Colors.primaries.length],
|
|
titleStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold, color: Colors.white),
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// 顯示 SP 結果表格
|
|
Widget _buildDynamicDataTable() {
|
|
if (_dynamicTableData.isEmpty) return const SizedBox();
|
|
List<String> columns = _dynamicTableData.first.keys.toList();
|
|
|
|
return Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
const Text(" 資料明細", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
|
|
TextButton(onPressed: () => setState(() => _chartData = []), child: const Text("關閉分析")),
|
|
],
|
|
),
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: DataTable(
|
|
columns: columns.map((col) => DataColumn(label: Text(col.toUpperCase()))).toList(),
|
|
rows: _dynamicTableData.map((row) {
|
|
return DataRow(cells: columns.map((col) => DataCell(Text(row[col]?.toString() ?? ''))).toList());
|
|
}).toList(),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// 原有的 Dashboard 內容
|
|
Widget _buildDashboardCharts() {
|
|
return FutureBuilder<List<SalesStats>>(
|
|
future: _statsFuture,
|
|
builder: (context, snapshot) {
|
|
if (snapshot.connectionState == ConnectionState.waiting) return const Center(child: CircularProgressIndicator());
|
|
if (snapshot.hasError) return Center(child: Text("載入失敗: ${snapshot.error}"));
|
|
final data = snapshot.data ?? [];
|
|
if (data.isEmpty) return const Center(child: Text("此區間無資料"));
|
|
|
|
return SingleChildScrollView(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
children: [
|
|
_buildSummaryCards(data),
|
|
const SizedBox(height: 20),
|
|
_buildTrendChart(data),
|
|
const SizedBox(height: 20),
|
|
_buildRegionPieChart(data),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildSummaryCards(List<SalesStats> data) {
|
|
double totalSales = data.fold(0, (sum, item) => sum + item.sAmts);
|
|
double totalProfit = data.fold(0, (sum, item) => sum + item.sProfits);
|
|
return Row(
|
|
children: [
|
|
_kpiItem("總銷售額", totalSales, Colors.blue),
|
|
const SizedBox(width: 12),
|
|
_kpiItem("總利潤", totalProfit, Colors.green),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _kpiItem(String title, double value, Color color) {
|
|
return Expanded(
|
|
child: Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: color.withOpacity(0.3)),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(title, style: TextStyle(color: color, fontWeight: FontWeight.bold, fontSize: 12)),
|
|
const SizedBox(height: 4),
|
|
Text('\$${_currencyFormat.format(value)}', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 年月選擇彈窗邏輯
|
|
// ---------------------------------------------------------------------------
|
|
Future<String?> _showMonthPicker(BuildContext context, String currentYYMM) async {
|
|
int selectedYear = int.parse(currentYYMM.substring(0, 4));
|
|
int selectedMonth = int.parse(currentYYMM.substring(4, 6));
|
|
|
|
return showDialog<String>(
|
|
context: context,
|
|
builder: (context) {
|
|
return StatefulBuilder(builder: (context, setDialogState) {
|
|
return AlertDialog(
|
|
title: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
IconButton(icon: const Icon(Icons.chevron_left), onPressed: () => setDialogState(() => selectedYear--)),
|
|
Text('$selectedYear 年'),
|
|
IconButton(icon: const Icon(Icons.chevron_right), onPressed: () => setDialogState(() => selectedYear++)),
|
|
],
|
|
),
|
|
content: SizedBox(
|
|
width: 300,
|
|
height: 200,
|
|
child: GridView.builder(
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 2),
|
|
itemCount: 12,
|
|
itemBuilder: (context, index) {
|
|
int month = index + 1;
|
|
return InkWell(
|
|
onTap: () => Navigator.pop(context, '$selectedYear${month.toString().padLeft(2, '0')}'),
|
|
child: Center(child: Text('$month月', style: TextStyle(color: month == selectedMonth ? Colors.blue : Colors.black))),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
});
|
|
},
|
|
);
|
|
}
|
|
} |