横向百分比展示
2019-10-11 本文已影响0人
liuvz
因为程序性质的原因, 程序报错不是直接修复, 而是需要先大概判断是否需要修复
之前的错误信息展示太过于简陋, 只有 程序名, 错误数, 总的错误占比
对于预判一点帮助都没有, 所以需要写一个新的日志收集展示程序
新的展示我希望它可以选择时段, 错误代码占比, 跳转到具体的错误程序编号
时段的选择由后台提供的数据区分, 前端只需要提供选项即可
数据收集方面很简单, 每十五分钟小时收集一次近十五分钟(根据程序结束时间)的程序状态日志存储即可
数据展示方面比较麻烦, 之前尝试了使用ECharts, 不太好实现, 想要弄成我想要的效果需要调整的地方太多了, 所以决定使用原生HTML,JS,CSS实现
关于Echarts需要说的是官方文档新手不太容易按需查阅, 可以看pyecharts的文档, 好很多
展示部分的代码如下:
<html>
<header>
<meta charset="utf-8" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function re_build_table(){
table = document.getElementById("show_info_table");
old_text = table.innerHTML;
table.innerHTML = "";
for(i in info_array){
inner_html = '<tr> <td class="key">name: ' + i
+'</td><td class="value">';
for(nj in info_array[i].status_code_percent){
j = info_array[i].status_code_percent[nj]
var detail_href = "http://127.0.0.1:5000/status_detail/"+ j[0]
var new_inner_html ='<a class="left_float '+ j[0]
+ '" href="' + detail_href
+ '"style="width:'
+ info_array[i].status_code_percent[nj][1]
+ '%"></a>';
inner_html+=new_inner_html;
}
console.log(inner_html+"</td></tr>");
inner_html+="</td></tr>"
$("#show_info_table").append(inner_html)
}
}
window.onload = function(){
info_array = [
{
"name": "area1",
"status_code_percent":[
["S1001", 20],
["S1002", 30],
["S1003", 10],
["S1004", 20],
["S1005", 20]
]
},
{
"name": "area2",
"status_code_percent":[
["S1001", 15],
["S1002", 5],
["S1003", 20],
["S1004", 30],
["S1005", 30]
]
}
];
re_build_table();
re_table_ = setInterval("re_build_table()", 1000*60*15);
}
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<table id="show_info_table">
</table>
</body>
</html>
style.css 内容
table { width: 90%; margin: 0 auto; text-align: center; }
.left_float{ float: left; height: 100%; }
.S1001 { background-color: gray; }
.S1002 { background-color: red; }
.S1003 { background-color: black; }
.S1004 { background-color: blue; }
.S1005 { background-color: green; }
.key { width: 20%; height: 100%; }
.value { width: 70%; height: 100%; }
前端不做排序等工作, 由后台数据决定顺序问题
日志细节由后端提供, 不做预览等操作
最终的结果如下:
show.png
这样可以直观的看到需要修复的错误, 可能需要修复的错误, 其他未分类的问题等, 在时间段内大概的占比, 这样可以确定是否需要人工介入
