终于可以搭建应用了
前面几篇介绍了准备工作，现在开始搭建应用界面。
先梳理一下步骤，确保功能完整。
应用功能清单
我们需要实现这些功能：
1.页面上可以添加监控数据 监控数据需要填写影刀id
2.应该有个tab页来区分多个影刀用户 比如我添加了3个影刀用户，需要分别查看不同的数据
3.页面应该能展示数据表格 表格可以展示近7天数据，字段展示用户名/当前成就值/运行时长/应用行数等核心信息
4.能展示成就值/应用个数/应用行数的折线图
5.能展示社区贡献的饼图
功能流程图
添加监控 → 切换tab → 查看表格 → 查看图表
功能梳理好后就开始实现吧，一步步来。
搭建应用步骤比较多，只展示一些关键步骤。我把整个的应用导出为json放到了群了，可以直接导入试试。
步骤只做为参考，大家可以参考这自行实现。有问题可以群内联系。
步骤1：添加监控数据
通过按钮绑定一个自定义查询，把影刀id和登陆用户直接存放到ac_user表中。
这里还有优化的空间，比如插入前判断影刀id是否重复。
想扩展的话可以通过自定义工作流实现。
步骤2：添加tab页区
新建了一个get_yd_user的查询，将他绑定到tab的数据来源中。
SQL语句如下：
select distinct(ac.personal_id) from ac_user ac where ac.user_type = '普通'
这里就能发现个问题，影刀id是数字，展示到页面上并不好看。
后面优化可以添加一个备注作为展示。
同时为了获取当前选择的影刀id，还要设置tab页的点击事件。
步骤3：添加表格
表格使用了服务端分页，所以需要添加两个查询函数，一个是获取分页，一个获取总数。
获取总数查询（get_his_total）：
select count(*) as total
from ac_his_data ad
where ad.personal_id = {{ select_yd_id.value }}
获取分页数据查询（get_his_page）：
select *
from ac_his_data ad
where ad.personal_id = {{ select_yd_id.value }}
order by ad.created_at desc
LIMIT {{ table1.pageSize }}
OFFSET {{ table1.pageOffset }}
变量说明
- select_yd_id：是上一步创建的自定义变量，用于存储当前选择的影刀id
- table1.pageSize/pageOffset：是表格组件自动提供的，详情请自行查看文档
为了让tabs点击后自动刷新表格数据，需要对tabs添加一个事件，触发一下表格的refresh方法，这样就能实现动态刷新了。
字段的设置在右侧属性区，默认展示英文，点击翻译按钮填入中文名就行。
步骤4：添加图表
先创建第一个数据走势图，展示应用数/代码行数/时长/成就值的折线图。
核心用到了一个查询，SQL查询如下：
SELECT
DATE_FORMAT(a.created_at, '%Y-%m') AS month,
a.current_achievement,
a.app_count,
a.app_runtime_hours,
a.developed_lines
FROM ac_his_data a
JOIN (
SELECT
DATE_FORMAT(created_at, '%Y-%m') AS month_str,
MAX(created_at) AS max_created_at
FROM ac_his_data
WHERE personal_id = {{ select_yd_id.value }}
AND created_at >= DATE_FORMAT(
DATE_SUB(CURDATE(), INTERVAL 5 MONTH),
'%Y-%m-01'
)
GROUP BY DATE_FORMAT(created_at, '%Y-%m')
) t
ON DATE_FORMAT(a.created_at, '%Y-%m') = t.month_str
AND a.created_at = t.max_created_at
WHERE a.personal_id = {{ select_yd_id.value }}
ORDER BY month;
右侧属性选择数据来源于查询即可。
下面可以配置Y轴的数据源和颜色。
添加饼状图
饼状图用来展示社区内的回复/采纳数据，对应的SQL可以这样写：
SELECT '回答问题数' AS industry, answered_questions AS value
FROM (
SELECT answered_questions, adopted_replies, published_articles
FROM ac_his_data
WHERE personal_id = {{ select_yd_id.value }}
ORDER BY created_at DESC
LIMIT 1
) AS t
UNION ALL
SELECT '回复被采纳数' AS industry, adopted_replies AS value
FROM (
SELECT answered_questions, adopted_replies, published_articles
FROM ac_his_data
WHERE personal_id = {{ select_yd_id.value }}
ORDER BY created_at DESC
LIMIT 1
) AS t
UNION ALL
SELECT '发表文章数' AS industry, published_articles AS value
FROM (
SELECT answered_questions, adopted_replies, published_articles
FROM ac_his_data
WHERE personal_id = {{ select_yd_id.value }}
ORDER BY created_at DESC
LIMIT 1
) AS t;
步骤5：小优化
为了添加一个影刀账号后立刻刷新数据，可以添加一个按钮去手动调用工作流，这样就可以及时查看数据了。
把加载状态和工作流执行进行绑定，当工作流执行完成后，按钮才能点击，否则按钮就是转圈的状态了。
组件流程图
添加监控数据 → 存入ac_user表
↓
Tab页切换 → 更新select_yd_id变量
↓
查询数据 → 刷新表格/图表
↓
手动刷新 → 调用工作流获取最新数据
下一步
应用界面已经搭建完成，可以查看历史数据和图表了。
还有没有可以优化的地方？下一篇会介绍一些细节优化。
