服务器管理平台(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,一经查实,立即删除!

相关文章

【0248】Background Writing实现机制分析

文章目录 1. 前言2. 有了checkpoint,为何还需要background writing?2.1 checkpoint和background writing有何差异? 如何协同工作?2.2 background writing如何工作? 职责是什么?1. 前言 本文是Background Writing进程理论篇,源码剖析实战篇会在后面给出。本文的主要内容…

单例模式分享

Java的单例模式详解与案例解析 单例模式是一种常见的设计模式,它确保一个类只有一个实例,并提供一个全局访问点。在Java中,实现单例模式有多种方式,我们将深入讨论其中的几种,并通过丰富的案例演示它们的用法。 1. 饿…

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

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

【剑指offer】重建二叉树

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

笨蛋学设计模式行为型模式-责任链模式【18】

行为型模式-责任链模式 8.5责任链模式:arrow_up::arrow_up::arrow_up:8.5.1概念8.5.2场景8.5.3优势 / 劣势8.5.4责任链模式可分为8.5.5责任链模式8.5.6实战8.5.6.1题目描述8.5.6.2输入描述8.5.6.3输出描述8.5.6.4代码 8.5.7总结 8.5责任链模式⬆️⬆️⬆️ 8.5.1概念 ​ 责任…

在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。 项目介绍: 轻量级项目工时统计系统,是目前企业进行项工时管理统计的推荐选择。 通过项目工时管理系统,可通过…

ffmpeg 实用命令 -- 缩放与裁切

缩放 缩放是一个常见的需求,这需要使用到 FFmpeg 提供的视频过滤器(或称视频滤镜,video filter),也即 -vf 参数。由于过滤器的使用过于复杂,在此也不会详细介绍;这里只是针对过滤器中的缩放器&…

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…

【Cloudflare】怎样重定向www二级域名到根域名?

官方文档&#xff1a;Redirecting www to domain apex 按照上述文档操作就可以&#xff0c;步骤比较繁琐。 另外&#xff0c;在网站页面有菜单&#xff1a;Rules -> Redirect Rules&#xff0c;在这里做重定向配置比上述方式简单&#xff0c;但我没看到官方文档的介绍&…

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

让每一个人都有自己的地图&#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;也是上面作者推…

javascript的 with语句

with 语句是 JavaScript 中的一个关键字&#xff0c;用于简化访问对象属性和方法的代码&#xff0c;但它在现代的 JavaScript 开发中已经不推荐使用。以下是 with 语句的一些用途和注意事项&#xff1a; 简化对象属性的访问&#xff1a;使用 with 语句可以省略重复的对象名称来…