服务器管理平台(5)- 数据展示
发布时间:2024年01月22日
数据展示
- Grafana导入MySQL数据源进行定制化数据展示,包括品牌分类饼图,详细数据列表等
- LayUI为开源前端框架,对系统概览、登录日志等信息,划分不同页面使用表格展示详细数据
1、Grafana
1.1、导入MySQL数据源
- 添加MySQL数据源,填写数据库地址、用户名及密码等信息

- 填写完成后进行保存和测试

1.2、定制化
- 建立Panel进行定制化,选择图表形式,主题及SQL等,如下图为品牌分类饼状图


1.3、数据展示
-
系统概览图

-
PCI设备表

-
历史记录数据表

2、LayUI前端服务
-
对系统概览、PCI设备、登录日志等信息,划分不同页面使用表格展示详细数据
-
支持用户权限和密码修改,分为普通用户、系统管理员、超级管理员
-
支持业务IP筛选搜索、编辑、查询、删除、导出Excel、打印等功能
-
可参考LayUI框架官方文档进行操作
LayUI官网地址:https://layui.dev/
2.1、认证登录流程

2.2、前端处理流程

2.3、登录界面

2.4、业务信息界面
-
系统概览图

-
修改某条列表信息


End

文章来源:https://blog.csdn.net/qq_29893385/article/details/135755468
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:chenni525@qq.com进行投诉反馈,一经查实,立即删除!