农场统计图表增加土地等级数量多行数字卡片

创建时间: 2025年06月22日 18:13
任务类型: 功能增强
关联模块: 农场模块
完成状态: ✅ 已完成

📋 任务概述

为农场统计图表页面增加土地等级数量的多行数字卡片显示，使用UCore框架的NumberS组件实现专业的多行数字统计展示。

🎯 需求分析

用户要求在农场统计页面中添加：

土地各个等级的数量统计
使用多行数字格式显示
每行显示一个土地类型和对应数量
数字要突出显示，便于快速查看

🔧 实现方案

1. 技术选型

组件选择: UCore\DcatAdmin\Metrics\Examples\NumberS

专门用于多行数字显示的卡片组件
纵向排列，每行一个键值对
自动格式化数字显示
与UCore框架风格一致

2. 架构设计

2.1 创建专门的统计卡片类

文件: app/Module/Farm/AdminControllers/Metrics/FarmLandLevelStatsCard.php

设计特点:

继承自NumberS基类
专门处理土地等级统计逻辑
自动过滤零数量的土地类型
包含总计统计

2.2 集成到主控制器

文件: app/Module/Farm/AdminControllers/FarmMetricsController.php

布局优化:

左侧6列：土地等级数量多行数字卡片
右侧6列：土地类型横向统计卡片
形成互补的数据展示方式

💻 核心实现

1. 土地等级统计卡片

class FarmLandLevelStatsCard extends NumberS
{
    protected $title = '土地等级数量统计';
    
    protected function init()
    {
        parent::init();
        // 移除下拉选项，土地统计不需要时间范围
        $this->dropdown([]);
    }
    
    public function handle(Request $request)
    {
        $stats = $this->getLandLevelStats();
        
        // 转换为NumberS需要的键值对格式
        $dataList = [];
        foreach ($stats as $stat) {
            $dataList[$stat['name']] = $stat['count'];
        }
        
        $this->withContent($dataList);
    }
}

2. 数据处理逻辑

数据来源: FarmDailyStats 模型的最新统计数据

处理流程:

获取最新的每日统计记录
遍历6种土地类型（普通、红土、黑土、金色、蓝色、紫色）
过滤掉数量为0的土地类型
计算总计数量
转换为NumberS组件需要的数据格式

土地类型映射:

$landTypeNames = [
    1 => '普通土地',
    2 => '红土地', 
    3 => '黑土地',
    4 => '金色特殊土地',
    5 => '蓝色特殊土地',
    6 => '紫色特殊土地',
];

3. 页面布局集成

->row(function ($row) {
    $row->column(6, new FarmLandLevelStatsCard());  // 多行数字
    $row->column(6, $this->getLandStatsCards());    // 横向卡片
})

✅ 功能验证

1. 页面显示测试

✅ 土地等级数量统计卡片正确显示
✅ 多行数字格式：普通土地(9)、红土地(6)、总计(15)
✅ 数字以大号字体突出显示
✅ 自动过滤零数量的土地类型（黑土地等）

2. 数据准确性验证

✅ 数据来源：最新的farm_daily_stats记录
✅ 统计准确：普通土地9块，红土地6块
✅ 总计正确：15块土地
✅ 与右侧横向卡片数据一致

3. 组件集成测试

✅ NumberS组件正确初始化
✅ withContent方法正常工作
✅ 无下拉选项，符合业务需求
✅ 与页面其他组件布局协调

4. 响应式布局测试

✅ 左右6:6列布局合理
✅ 移动端自适应正常
✅ 卡片高度与右侧卡片匹配

📊 当前数据展示

根据测试结果，当前系统中的土地分布：

普通土地: 9块
红土地: 6块
总计: 15块

其他土地类型（黑土地、金色特殊土地、蓝色特殊土地、紫色特殊土地）当前数量为0，已自动隐藏。

🎨 显示效果

多行数字卡片特点

标题: "土地等级数量统计"
格式: 每行显示"土地类型名称" + "大号数字"
样式: 数字使用H1标签，突出显示
布局: 纵向排列，清晰易读
交互: 包含刷新按钮

与横向卡片的对比

左侧多行数字: 突出数量，便于快速对比
右侧横向卡片: 包含图标和颜色，视觉丰富
互补展示: 满足不同的数据查看需求

📁 文件清单

新增文件

app/Module/Farm/AdminControllers/Metrics/FarmLandLevelStatsCard.php - 土地等级数量统计卡片

修改文件

app/Module/Farm/AdminControllers/FarmMetricsController.php - 主控制器布局更新

代码统计

新增代码：85行
修改代码：10行
总计：95行代码

🚀 技术亮点

1. 组件化设计

使用UCore标准组件，保持框架一致性
独立的卡片类，便于维护和复用
清晰的职责分离

2. 数据处理优化

自动过滤零数量项，减少视觉干扰
智能计算总计，提供汇总信息
数据格式转换，适配组件要求

3. 用户体验

多行数字突出显示，便于快速查看
与横向卡片形成互补，满足不同需求
响应式布局，适配各种屏幕尺寸

4. 可维护性

遵循项目架构规范
代码结构清晰，注释完整
易于扩展和修改

🔗 相关文档

💡 后续优化建议

1. 功能扩展

可考虑添加土地状态统计（空闲、种植中、灾害等）
支持历史数据对比显示
增加土地利用率计算

2. 交互优化

可添加点击跳转到详细统计页面
支持数据导出功能
增加数据刷新时间显示

3. 性能优化

考虑添加缓存机制
优化数据库查询性能
支持异步数据加载

221813-农场统计图表增加土地等级数量多行数字卡片.md 5.9 KB Permalink History Raw