服务器管理平台(5)- 数据展示

数据展示

  1. Grafana导入MySQL数据源进行定制化数据展示,包括品牌分类饼图,详细数据列表等
  2. LayUI为开源前端框架,对系统概览、登录日志等信息,划分不同页面使用表格展示详细数据

1、Grafana

  • 对品牌、CPU型号、内存等数据使用饼图展示分类比例,详细数据使用table表格展示,支持字段筛选搜索

  • 系统概览显示简略信息,如需查看PCI设备、逻辑磁盘等详细信息,可以点击链接跳转界面查看

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

  • 欢迎关注,感谢支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/641162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索全球DNS体系 | 从根服务器到本地解析

DNS 发展 DNS(Domain Name System)的起源可以追溯到互联网早期。 早期的挑战: 早期互联网主要通过IP地址进行通信,用户需要记住复杂的数字串来访问网站。 需求的催生: 随着互联网的扩大,更简单、易记的…

【剑指offer】重建二叉树

👑专栏内容:力扣刷题⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停 目录 一、题目描述1、题目2、示例 二、题目分析1、递归2、栈 一、题目描述 1、题目 剑指offer:重建二叉树 给定节…

在CentOS 7中配置 RAID服务

实验过程 Xnode1克隆虚拟机raid ps: 阿里云盘Xnode1获取 xnode1 https://www.alipan.com/s/HgLXfoeBWG2 提取码: eb70 编辑虚拟机 添加2硬盘 CRT连接(root密码:000000) 创建raid 0 [rootdemo ~]# lsblk 安装mdadm [rootdemo…

go语言(十四)----反射

变量的结构 2 举个例子 package mainimport "fmt"type Reader interface {ReadBook() }type Writer interface {WriteBook() }//具体类型 type Book struct {}func (this *Book) ReadBook() {fmt.Println("Read a Book")}func (this *Book) WriteBook() {…

项目工时统计成本核算管理

技术架构: Java 1.8 MySQL 8 Vue 项目基于前后端分离架构,服务端主要技术:SpringBoot 前端主要是Vue。 项目介绍: 轻量级项目工时统计系统,是目前企业进行项工时管理统计的推荐选择。 通过项目工时管理系统,可通过…

Github2024-01-23 开源项目日报 Top9

根据Github Trendings的统计,今日(2024-01-23统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目3Go项目2TypeScript项目2Dart项目1Jupyter Notebook项目1 gpt4free 语言模型集合改进计划 创建周期…

vConsole 与 Vue中未定义变量而引发的Maximum call stack size exceeded异常问题

一、问题描述 前段时间有个前端小伙伴反馈在打包发布正式环境后调用VantUI的<van-popup>组件显示时&#xff0c;显示空白&#xff0c;并且在控制台看到一个Maximum call stacksize exceeded&#xff08;超出最大调用堆栈大小&#xff09;,而本地开发环境正常&#xff1a…

工业相机+镜头选型及靶面、焦距计算等相关详解

工业相机镜头选型及靶面、焦距计算等相关详解 着重讲述相机的各个参数及使用意义总结相机镜头选型主要参数的推理计算 0. 工业相机相关概念简介 相机与镜头一览 工业相机与镜头实物图如下图所示&#xff1a; 常见的相机有两种供电方式&#xff1a;一种是电源线供电&#xff0…

接口自动化测试框架开发(pytest+allure+aiohttp+ 用例自动生成)

近期准备优先做接口测试的覆盖&#xff0c;为此需要开发一个测试框架&#xff0c;经过思考&#xff0c;这次依然想做点儿不一样的东西。 接口测试是比较讲究效率的&#xff0c;测试人员会希望很快能得到结果反馈&#xff0c;然而接口的数量一般都很多&#xff0c;而且会越来越…

设置Linux用户的最大进程数和最大打开文件描述符数

【命令】 cat <<EOF>> /etc/security/limits.conf root - nproc 512000 * - nproc 512000 root - nofile 512000 * - nofile 512000 EOF 【解读】 这个命令是在执行一个Shell脚本&#xff0c;通过sh -c来传递一个字符串作为命令参数。这个字符串包含了对/e…

如何制作自己的实景中国视频地图?

让每一个人都有自己的地图&#xff01; 我们在《水经微图Web版1.5.0发布》一文中&#xff0c;提到了水经微图&#xff08;简称“微图”&#xff09;Web版新增了视频气泡的功能。 现在&#xff0c;我们为你分享一下如何基于此功能&#xff0c;制作一个属于自己的实景中国视频地…

PG14.2异构迁移_数据目录拷贝方式

本文源库和目标库都是采用二进制tar包进行的安装&#xff0c;非rpm和源码编译方式安装。 采用的办法是编译安装数据库软件 拷贝数据目录的方式 迁移要求 由于Centos即将停止维护&#xff0c;客户强烈要求操作系统更改成Ubuntu18.04&#xff0c;需将Centos的PG14迁移至Ubuntu…

leetcode2171 拿出最少数目的魔法豆

题目 给定一个 正整数 数组 beans &#xff0c;其中每个整数表示一个袋子里装的魔法豆的数目。 请你从每个袋子中 拿出 一些豆子&#xff08;也可以 不拿出&#xff09;&#xff0c;使得剩下的 非空 袋子中&#xff08;即 至少还有一颗 魔法豆的袋子&#xff09;魔法豆的数目…

yolov5 opencv dnn部署 github代码

yolov5 opencv dnn部署 github代码 源码地址实现推理源码中作者的yolov5s.onnx推理条件python部署(因为python比较简单就直接介绍了)c部署 参考链接 源码地址 yolov5官网还提供的dnn、tensorrt推理链接本人使用的opencv c github代码,代码作者非本人&#xff0c;也是上面作者推…

防御第一次作业-ensp的华为防火墙USG6000V1(1)

目录 1.用ensp搭建防火墙 2.添加管理员 3.组网 接口 安全区域 1.用ensp搭建防火墙 1.只能用6000那个防火墙 2.初始用户名密码&#xff1a;admin/ADMIN123 3.开启所有服务 4.与电脑联通&#xff1a;添加个云&#xff0c;然后增加1个udp并绑定创建的环回网卡 4.5.让云可…

数据结构与算法教程,数据结构C语言版教程!(第五部分、数组和广义表详解)五

第五部分、数组和广义表详解 数组和广义表&#xff0c;都用于存储逻辑关系为“一对一”的数据。 数组存储结构&#xff0c;99% 的编程语言都包含的存储结构&#xff0c;用于存储不可再分的单一数据&#xff1b;而广义表不同&#xff0c;它还可以存储子广义表。 本章重点从矩阵…

代码随想录算法训练DAY27|回溯3

算法训练DAY27|回溯3 39. 组合总和 力扣题目链接 给定一个无重复元素的数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字可以无限制重复被选取。 说明&#xff1a; 所有数字&#xff08;包括 …

二、arcgis 点shp数据处理

在工作中&#xff0c;很多时候客户会提供点坐标&#xff0c;那么要想把点坐标生成shp文件&#xff0c;有两种方法&#xff08;坐标系CGCS2000&#xff09;&#xff1a; 1.当只有个位数的点坐标时&#xff0c;可以直接在arcgisMap中添加&#xff0c;具体步骤如下&#xff1a; …

【人工智能大脑】仿生学与人工智能交汇:基于MP神经网络的精准农业实践

MP神经网络&#xff0c;即McCulloch-Pitts模型&#xff08;MCP Model&#xff09;&#xff0c;是神经网络的早期形式之一&#xff0c;由Warren McCulloch和Walter Pitts在1943年提出。这个模型为现代人工神经网络的发展奠定了理论基础&#xff0c;并首次尝试模拟了生物神经元的…

最长子字符串的长度(二) - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 给你一个字符串 s&#xff0c;字符串s首尾相连成一个环形 &#xff0c;请你在环中找出’l’、‘o’、‘x’ 字符都恰好出现了偶数次最长子字符串的长度。 输入描…