ZabbixAPI+django+nginx简单的二次开发实例（番外）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ZabbixAPI+django+nginx简单的二次开发实例（番外）相关的知识，希望对你有一定的参考价值。
页面改造篇
上一篇中制作的页面太单调，以下代码实现了下列功能。
1：未监视的显示N/A，并以灰色背景显示
2：Ping为0的背景显示为红色
3：磁盘容量超过80%的显示背景为橙色，超过90%的显示背景为橙色
<!DOCTYPE html> {% load staticfiles %} <html> <head> <link rel="stylesheet" type="text/css" href="{% static ‘css/bootstrap.css‘ %}" /> <script src="{% static ‘/scripts/jquery.min.js‘ %]"></script> <!--引入jquery模块 --> <script src="{% static ‘/bootstrap/js/bootstrap.min.js‘ %]"></script> <!--引入bootstrap的js模块 --> <title>首页</title> </head> <body onload="onload()"> <!--页面加载完成时调用function --> <p class="text-center"> <span class="label label-default">NotMoniterd</span> <!--图例 --> <span class="label label-warning">Warning</span> <span class="label label-danger">Criticl</span> </p> <table id="t1" border="1" class="table table-striped"> <tr> <th>SERVERNAME</th> <th>IPADDRESS</th> <th>PING</th> <th>C:Usage</th> <th>D:Usage</th> </tr> {% for i in pos %} <tr> <td><a href="/draw/?uid={{ i.uid }}" target="_blank">{{ i.name }}</a></td> <!--给链接带上post，接下来做图表时会用到 --> <td>{{ i.ip }}</td> <td>{{ i.ping }}</td> <td>{{ i.diskc }}%</td> <td>{{ i.diskd }}%</td> </tr> {% endfor %} </table> <script type="text/javascript"> function onload(){ var NG = "0"; <!--PING的NG值，这个值是str --> var NM = 0 <!--磁盘未监视的值 --> var WAR = 80 <!--磁盘警告的值 --> var CRI = 90 <!--磁盘严重的值 --> var table = document.getElementById("t1") for (var s = 0; s < table.rows.length; s ++){ <!--历遍表格 --> rowObj = table.rows[s]; var t2 = rowObj.cells[2].innerHTML; var t3 = rowObj.cells[3].innerHTML.slice(0,-2); <!--slice用来去掉百分号 --> var t4 = rowObj.cells[4].innerHTML.slice(0,-2); if(t2 == NG){ rowObj.cells[2].style.backgroundColor="red";; <!--PINGNG时显示红色 --> } if(t3 == NM ){ rowObj.cells[3].style.backgroundColor="grey";; <!--磁盘未监视时显示灰色，并修改文字为N/A --> rowObj.cells[3].innerHTML="N/A";; } else if(t3 >= WAR && t3 < CRI){ rowObj.cells[3].style.backgroundColor="orange";; <!--磁盘80%-90%时显示橙色 --> } else if(t3 >= CRI){ rowObj.cells[3].style.backgroundColor="red";; <!--磁盘大于90%时显示红色 --> } if(t4 == NM ){ rowObj.cells[4].style.backgroundColor="grey";; rowObj.cells[4].innerHTML="N/A";; } else if(t4 >= WAR && t4 < CRI){ rowObj.cells[4].style.backgroundColor="orange";; } else if(t4 >= CRI){ rowObj.cells[4].style.backgroundColor="red";; } } } </script> </body> </html>
JS这几行代码写的比较乱，应该还可以精简。
以上是关于ZabbixAPI+django+nginx简单的二次开发实例（番外）的主要内容，如果未能解决你的问题，请参考以下文章
ZabbixAPI+django+nginx简单的二次开发实例（番外）