本文介绍了如何基于Zabbix监控数据开发一个实用且直观的监控页面，包括通过Java后端、MySQL数据库、SpringBoot框架和前端技术实现数据展示和警告提示。项目涉及从Zabbix数据库和API获取数据，通过HTML、CSS、JS等实现页面交互，并通过Ajax实现异步更新。文章分享了在开发过程中遇到的问题和解决方案，如数据绑定、SQL查询优化和Ajax通信等。
基于zabbix数据开发一个监控页面
1、项目背景
由于zabbix监控信息量大、监控项多且杂乱、且警告信息展示不够直观醒目，在此条件下，我们决定以zabbix监控数据为基础，做一套重要系统的单独监控页，要展示全面且更加直观；因此，该项目初代的设计理念就是，尽量在一页中用表格展示出所有相关设备，在设备有警告时，表格背景颜色会变成红色；此外，如果有重要设备警告，页面中会有急促的红色呼吸灯提示，以实用性为主导。
2、使用技术
该项目在Windows环境下使用Java语言开发；数据库采用MySQL；该项目遵循MVC（模型-视图-控制器）设计模式，具体实现如下：
模型层（Model）：使用Mybatis作为数据持久层框架，实现与数据库的交互。
视图层（View）：采用HTML、CSS、JavaScript、jQuery、Ajax等前端技术来构建用户界面。
控制器层（Controller）：使用Spring Boot微服务框架来实现业务逻辑和控制层。
集成开发环境（IDE）使用IntelliJ IDEA。。
3、数据来源
该项目获取监控数据使用了两种方式，一种是通过zabbix的数据库；另一种是通过zabbix API。
4、业务实现
4.1、项目1——zabbix数据库
4.1.1、前端页面实现
第一版的监控页面以实用性为主导，也没有专业的UI设计师，因此并没有考虑太多关于美观的方面；而且，由于没有前车之鉴，只能通过自己实践、踩坑。因此，第一版监控页面上线时，设备名称等信息都是根据已有的文档把数据写死在前端代码里面，下面展示一些代码片段：
<tr>
<td class="bk" rowspan="2">
<input type="text" disabled="disabled" class="louyu" size="10" value=" 二号楼"/>
</td>
<td class="bk" id="i110" height="22px" width="157px">
<input type="text" disabled="disabled" class="jhj" size="16" value="交换机-28"/>
</td>
</tr>
这时候第一个难点问题就出现了；由于数据库中存的名称和页面上要展示的名称是有区别的，而且还要涉及到编码转换问题，因此，如何把前端页面展示的设备与数据库中存储的数据进行一对一绑定成了问题。起初我想到的是IP，因为设备的IP是固定的；但是html中的id选择器不支持IP的格式。后来我在看数据库的表结构时得到了启发，其中hosts表中的hostid和interface表中的interfaceid都是唯一值，就算id选择器不支持纯数字的格式，我只要在前面拼接一个字母，组成新的字符串，就能实现一对一匹配了。下面是代码片段：
//将后台传来的list存入数组
parr = [[${pcList}]];
var a;
//遍历数组拼接字符串
for(var i=0;i<parr.length;i++){
a = 'i'+parr[i];
//通过id绑定
var obj = document.getElementById(a);
if(obj==null){
continue;
}
//实现有警告的设备背景色变红
obj.style["background-color"] = "rgba(255,0,51,0.2)";
4.1.2、SQL语句实现
由于zabbix数据库相对复杂且了解甚少；因此略过了熟悉数据库的环节，直接百度。在了解到查询警告数据相关的表后，开始研究对表结构并进行简单查询；在此之后，开始尝试查询想要的数据，也是因为没有前车之鉴，只能通过不断尝试、踩坑（暂且按下不表，详见踩坑指南），最终查出了想要的数据；下面是SQL语句（优化过后的，ChatGPT是个好东西）：
SELECT i.interfaceid
FROM interface i
JOIN hosts h ON i.hostid = h.hostid
JOIN items m ON h.hostid = m.hostid
JOIN functions f ON m.itemid = f.itemid
JOIN triggers t ON f.triggerid = t.triggerid
JOIN events e1 ON t.triggerid = e1.objectid AND e1.value=1 AND e1.name LIKE '%ping%'
LEFT JOIN events e2 ON t.triggerid = e2.objectid AND e2.value=0 AND e2.name LIKE '%ping%'
AND e1.clock > IFNULL(e2.clock,0)
WHERE (i.ip LIKE '10.1.29%' OR i.ip LIKE '10.2.6%' OR i.ip LIKE '10.3.50%'
OR i.ip LIKE '10.3.51%' OR i.ip LIKE '10.3.100%' OR i.ip LIKE '10.3.54%'
OR i.ip LIKE '10.3.55%' OR i.ip LIKE '172.16.26%' OR i.ip LIKE '10.100.2%'
OR i.ip LIKE '10.13.11%' OR i.ip LIKE '10.3.2%' OR i.ip LIKE '10.3.53%'
OR i.ip LIKE '172.16.28%' OR i.ip LIKE '10.2.0%' OR i.ip LIKE '10.3.0%'
OR i.ip LIKE '10.3.1%')
GROUP BY i.interfaceid;
4.1.3、java代码实现
在前端页面和SQL语句基本确定后，解题思路也就确定了，剩下的java代码也就容易实现了。首先创建一个springboot项目实现简单的增删改查…（其实只有查）。建项目、实体类、mapper、service、controller；先测试跳转，再测试上传数据，OK，跑通了！
该文章主要讲思路以及踩过的坑，代码方面不做过多赘述。（还有ajax实现异步功能，踩坑指南会说。）
4.2、 项目2——zabbix API
4.2.1、设计目的
由于第一版监控页面只考虑了实用性，对于美观方面实在欠缺；又因为该页面不止为监控使用，还要大屏展示，因此请了专业的UI来设计样式，我这个毫无美感的人也退出了历史舞台…
4.2.2、实现逻辑
这次终于有了前车之鉴，回头望去，踩过的坑已是山路十八弯；实现方法大同小异，除了前端代码的变化之外，最大的不同就是数据获取方式了，通过脚本采集到zabbix API的数据后，经过格式调整，存储在txt文件中，我只需要读取txt文件并通过subString方法截取字符串，得到想要的部分传到前端，即可实现功能。
// 创建两个List对象，分别用于存储读取到的数据和去重后的结果
List<String> list = new ArrayList<>();
List<String> newList = new ArrayList<>();
try {
// 创建BufferedReader对象，读取指定文件的内容
reader = new BufferedReader(new FileReader(file));
String str = "";
char secondLastChar = 'a';
// 逐行读取文件内容
while((str=reader.readLine())!=null){
//这里判断警告的等级以及警告内容
if(str.trim().length()>2&&str.length()>64){
secondLastChar = str.charAt(str.length() - 2);
if (secondLastChar == '4' ||secondLastChar == '5' ||
str.substring(60,64).equals("ping")){
// 将该行的第18到23个字符子字符串添加到list中
list.add(str.substring(18,23));
}
}
}
// lambda表达式 使用Stream API对list进行去重操作
newList = list.stream().distinct().collect(Collectors.toList());
/************************文件中内容***************************
"hosts":"hostid":"12231" "description":"Unavailable by ICMP ping" "priority":"3"
"hosts":"hostid":"10482" "description":"Interface XGigabitEthernet2/2/0/14(): Link down" "priority":"3"
"hosts":"hostid":"13242" "description":"Interface GigabitEthernet0/0/3(): Ethernet has changed to lower speed than it was before" "priority":"1"
*/
5、踩坑指南
5.1、坑1——数据库
在使用数据库获取数据时，events表中有两个比较关键的字段，value 和 clock；value只有两个值，1代表有警告，0代表警告已消除；clock是时间戳；一开始我没考虑时间戳；当时的想法是，既然只有0和1两个值，那比较数量不就行了，1多则代表有警告，相等则代表无警告（这里指单个设备，就是根据某个IP所对应的id进行查询）；一开始运行没问题，数据获取也很准确。但好景不长，万万没想到tnnd数据库自动清理缓存了，数据清理导致0和1数量失调，整个项目一下子垮掉了…
后来我把时间戳这一字段考虑进去了，既然比较不了数量，那就比时间吧；最新时间value为1，那必然有警告，最新时间value为0，则设备正常；嗯，有品，可行。
5.2、坑2——ajax异步通信
最开始的时候，我设置了页面每分钟自动刷新，这样既方便又准确。但是大屏展示，不仅要美观，刷新偶尔闪白屏，严重影响了观感，也是没品。因此我尝试了用ajax实现异步传输数据；但是问题又来了，虽然能实现数据同步，但是网页是有缓存的，有时候警告消除了，但是样式没有变回来…在经历了多次测试以及查阅代码后，我发现了退而求其次的办法，既然无法清理缓存，那我干脆全部初始化，样式不是回不去吗，我直接一行代码给它重置初始样式，大概看一下吧：
var arr = flist;
setInterval(function() {
$.ajax({
url: "/data", // 后台Controller的请求路径
type: "GET", // 请求方式
dataType: "json", // 返回数据类型
success: function (data) { // 请求成功后的回调函数
// 解析返回的JSON数据
arr = data.js;
}
});
getwarning();
},10000)
//每次获取数据都初始化样式
$('.yic').css("visibility","hidden");
$('.jhj').css("background-color","#3982c5");
document.getElementById('abry').src = "img/ry.png";
document.getElementById('abqb').src = "img/qb.png";
document.getElementById('absk').src = "img/sk.png";
document.getElementById('cry').src = "img/ry.png";
document.getElementById('csk').src = "img/sk.png";
document.getElementById('cqb').src = "img/qb.png";
//初始化ul为空
document.getElementById('xxzs').innerHTML = "";
6、一些图
6.1、项目结构
这是第一版的，有数据库。
这是第二版，通过zabbix API获取数据
6.2 监控页
页面由云应用系统、地图以及终端设备三个模块组成，其中终端设备展示部分实现在框里自动无缝滚动，鼠标悬停可以停止自动滚动，有交换机警告项时，对应的框会变红，且地图红色呼吸灯闪烁，如果是云设备有警告，则图标变红，地图呼吸灯闪烁。
这里仅展示有UI设计的版本，因为我设计的，太没品了。
涉密项目，打码了，见谅
这是有警告的时候，红色图标，闪烁呼吸灯以及警告信息提示
7、总结
经过一路摸爬滚打、试错踩坑，回头看去，其实也不是多难的项目，但原创属实不易，如果有缘人能刷到这个帖子，我也想说一句：
有品！
扫一扫
3719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
