monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 张凯
Commit 22150e388005ab01661297321d244bb30cf933aa 2 parents 8e04379f 91bc3688

Merge branch 'master-mj' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-mj-joke

Inline Side-by-side
Showing 4 changed files with 361 additions and 4 deletions
layui.define(['tree', 'laypage', 'laytpl', 'admin', 'form', 'table', 'sessions',"commonDetail",], function (exports) {
var $ = layui.$;
var laytpl = layui.laytpl;
var tree = layui.tree;
var form = layui.form;
var view = layui.view;
var table = layui.table;
var admin = layui.admin;
var common = layui.common;
var commonDetail = layui.commonDetail;
// var mxClient = layui.mxClient;
var busId = '';//当前业务Id
var appId = '';
var curTreeNode = '';
var curDhResType = '';//当前动环所在的资源类型
var currRoomId = '';
var sortKey = '';
function autoHeight(el) {
// var height = el.parents('.layui-card').height();
// el.css('min-height', height - 75);
}
// 隐藏左侧菜单
$('#LAY_app_flexible').click();
//对外暴露的接口
exports('dhSxInfo', function () {
var accessToken = localStorage.getItem("accessToken");
var router = layui.router();
// 资源视图父级表格
var dhParentList;
// 资源视图父级表格
var loading = layer.load(2);
// 树收缩事件
$('#dhInfo-leftree-shrink').on('click', function () {
$(".dhInfoLeft").animate({width:0,minWidth:0,marginLeft:0},300,function () {
$("#dhInfo-leftree_btn").show();
$("#dhInfo-leftree-shrink").hide();
});
});
//树展开事件
$("#dhInfo-leftree_btn").on("click",function () {
$("#dhInfo-leftree_btn").hide();
$("#dhInfo-leftree-shrink").show();
$(".dhInfoLeft").animate({minWidth:250,marginLeft:10},300);
});
//加载动环树
loadDhTree();
//根据roomId查询默认jtopo信息
function getJtopoIdByRoom(roomId) {
$('#dhInfoContent').hide();
$('#dhviewGraphContainer').show();
admin.req({
url: common.domainName + '/api-web/mxgraph/findByTypeAndTargetId?type=4&targetId='+roomId
,type: 'GET'
}).done(function (res) {
if (res && res.success && res.object){
var jtopo = res.object;
var jtopoId = jtopo.jtopoId;
if (jtopoId){ //当查询到jtopoId后，则查询机房拓扑
renderMxgraphView(jtopoId);
}
}else{
$(".mxgraph-view").html("<div style='text-align: center;width: 100%;font-size:18px;'>暂未绑定默认拓扑</div>");
}
}).error(function (error) {
console.log(error);
});
}
//加载树节点
function loadDhTree() {
//获取树节点数据
$("#dhInfotree").empty();
admin.req({
url: common.domainName + '/api-web/dhInfoSx/getDhTree',
sync: true,
done: function (res) {
layer.close(loading);
$('.layui-form layui-card-header')
if (res.success) {
var data = res.data;
if (data.length > 0){
if (data[0].children && data[0].children.length > 0){
childrenFirst = data[0].children[0];
if (childrenFirst.children && childrenFirst.children.length > 0){
sonFirst = childrenFirst.children[0];
if (sonFirst && sonFirst.children.length > 0){
// getResMap(sonFirst.children[0].id);
loadResInfo(sonFirst.children[0].id);
}
}
}
// var roomId = data[0].id;
// currRoomId = data[0].id;
// getJtopoIdByRoom(roomId);
}
tree.render({
elem: '#dhInfotree',
showLine: false,
data: data,
click: function (node) {
if (node.data.children && node.data.children.length == 1) {
$('[data-id="'+ node.data.children[0].id +'"]').find('.layui-tree-iconClick:first').click()
}
curTreeNode = node;
curDhResType = node.data.id;
if (node.data.code) {
busId = JSON.parse(node.data.code)["busId"];
appId = JSON.parse(node.data.code)["appId"];
}
var el = null;
if (node.data.children) {
el = $(node.elem[0]).find('>.layui-tree-entry .layui-tree-txt');
} else {
el = $(node.elem[0]).find('.layui-tree-txt');
}
var action = 'removeClass';
if (!el.hasClass('tree-node-select') && node.state === 'open') {
action = 'addClass';
el.parents('.layui-tree').find('.tree-node-select').removeClass('tree-node-select');
}
el[action]('tree-node-select');
// 决定显示那个视图
if (node.data.type === 'resType') { //资源类型只做展开或折叠操作
// options = JSON.parse(node.data.options);
// var callback = options.bizCallBack;
// var fun = eval(callback);
// // 获取回调方法
// if ($.isFunction(fun)) {
// fun.call(this, data, node.data, options);
// }
} else if (node.data.type === 'res') { //动环资源点击,则显示资源信息及告警信息
loadResInfo(node.data.id);
} else { //机房点击时间
//根据机房id查询拓扑信息
currRoomId = node.data.id;
// getJtopoIdByRoom(node.data.id);
}
}
});
treeTableTips();
//树表格添加new提示
function treeTableTips() {
$.each($('#dhInfotree .layui-tree').find('.layui-tree-set'), function (i, v) {
var $node = $(this);
//不是父节点
if (!$node.find('.layui-tree-set').length) {
$.each(data,function (i,v) {
$.each(v.children,function (x,y) {
$.each(y.children,function (n,m) {
if(m.id==$node.attr('data-id') && m.isNew=="1"){
$node.find('.layui-tree-main').append(' <i class="shake iconfont" style="color: red;font-size: 28px;">&#xe68b;</i>');
}
})
})
})
}
});
}
}
}
}).error(function () {
layer.close(loading);
var data = new Array();
tree.render({
elem: '#dhInfotree',
showLine: false,
data: data
});
});
// renderDefaultIndex();
}
function loadResInfo(resId) {
$('#dhInfoContent').show();
$('#dhviewGraphContainer').hide();
getResMap(resId);
commonDetail.renderActiveAlarms("dh_alarms",resId,'hide');
}
function getResMap(resId) {
$('#dh_baseinfo').html('')
admin.req({
url: common.domainName + '/api-web/dhInfoSx/getCollResultByResId?resId='+resId
,type: 'GET'
}).done(function (res) {
$('.lastCollTime').html(res.str);
var propertys = res.data;
var dataArr = common.splieceGroup(propertys, 3);
var li = "";
//先遍历分组后的，在遍历组内的数组
$.each(dataArr, function (i, v) {
var span = '';
$.each(v, function (j, ar) {
var valueStr = '';
var valueColor;
if (ar.value != 'null'){
valueStr = ar.kpiValue;
if (ar.kpiValue != 'true' && ar.kpiValue != 'false'){
if (ar.kpiValue != 'max'){
if (parseFloat(ar.kpiValue) > parseFloat(ar.max)){
valueColor = 'red';
}
}
if (ar.kpiValue != 'min'){
if (parseFloat(ar.kpiValue) < parseFloat(ar.min)){
valueColor = 'red';
}
}
}
}
span += ' <span style="font-weight: bold;text-align: right;padding-right: 20px">' + ar.kpiName + '</span>' +
'<span title="' + valueStr + '" style="overflow: hidden;text-overflow: ellipsis;padding-left:20px;text-align:left;white-space: nowrap;color: '+valueColor+'">'
+ valueStr +' ' + ar.unit +'</span>';
});
//补充空白区域
var lastLength = v.length
if (lastLength == 1){
span += '<span style="padding-right: 20px;"></span><span style="padding-left:20px;"></span><span style="padding-right: 20px;"></span><span style="padding-left:20px;"></span>'
}else if (lastLength == 2 ){
span += '<span style="padding-right: 20px;"></span><span style="padding-left:20px;"></span>'
}
li += '<li>' + span + '</li>'
$('#dh_baseinfo').html(li);
});
}).error(function (error) {
console.log(error);
});
}
//资源视图父级列表
function openParentResourceView(parentNode, data, node, options) {
// renderParentList(node.parentId, node.id);
}
//渲染拓扑
// function renderMxgraphView(topoId) {
// if (!mxClient.isBrowserSupported()) {
// mxUtils.error('浏览器不支持：Browser is not supported!', 200, false);
// }else{
// if (topoId) {
// var height = window.screen.height -200 ;
// $('.mxgraph-view').html(`<iframe style="border: none;width: 100%;height: calc(100vh - 120px)" src="${common.graphEditorOrigin}/jgraph/grapheditor/viewer.html?access_token=${accessToken}&id=${topoId}"></iframe>`);
// } else {
// $(".mxgraph-view").html("<div style='text-align: center;width: 100%;font-size:18px;'>暂未绑定默认拓扑</div>");
// }
// }
//
// if(topoId){
// //编辑拓扑
// $("#gotoedittopo").unbind("click").on("click",function (){
// //旧版本
// // $(this).attr("lay-href","/mxgraph/setting/id="+topoId);
// //新版本
// var url = common.graphEditorOrigin+"/jgraph/grapheditor/index.html?access_token=" + accessToken +'&id='+topoId;
// window.open(url);
// });
// }
// }
//
// var obj = {
// viewMxGraphNodeResInfo: function (resId) {
// admin.req({
// url: common.domainName + "/api-web/home/resource/findById?resId=" + resId
// , type: "get"
// , done: function (res) {
// var data = res.object;
// if (res.object.type != 'machineroom') {
// return;
// }
// var resType = res.object.resType;
// //模拟点击资源事件
// $('[data-id="'+ currRoomId +'"]').find('.layui-tree-iconClick:first').click();
// $('[data-id="'+ currRoomId +'"]').find('[data-id="'+ resType +'"]').find('.layui-tree-iconClick:first').click();
// $('[data-id="'+ resId +'"]').find('.layui-tree-iconClick:first').click();
// $('[data-id="'+ resId +'"]').find('.layui-tree-txt').addClass('tree-node-select');
// loadResInfo(resId);
// }
// });
// },
// layJump: function (layHref) {
// var resId = layHref.split('=')[1];
// obj.viewMxGraphNodeResInfo(resId)
// },
// };
// window.onmessage = function (messageEvent) {
// console.log(JSON.stringify(messageEvent.data.evalParam));
// if (messageEvent.data.type === 'dhinfo') {
// // 如果是执行方法
// // if(!messageEvent.data.evalParam.startsWith('obj.viewMxGraphNodeResInfo')) {
// // messageEvent.data.evalParam = messageEvent.data.evalParam.replace(/obj\./, 'common.');
// // }
// var result = eval(messageEvent.data.evalParam);
// }
// }
});
});
\ No newline at end of file
... ...
... ... @@ -10,8 +10,7 @@ layui.define(['table', 'form', 'sessions', 'common', 'admin'], function (exports
// 对外暴露的接口
exports('resdescribe', function (data) {
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var accessToken = localStorage.getItem("accessToken");
var resDescribeTable = {}
form.render();
... ...
... ... @@ -10,8 +10,7 @@ layui.define(['table', 'form', 'sessions', 'common', 'admin'], function (exports
// 对外暴露的接口
exports('resdescribeAdd', function (data) {
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var accessToken = localStorage.getItem("accessToken");
form.render();
... ...
<title>动环视图</title>
<article class="page-container">
<div class="page-panel">
<div class="main dhInfoMain">
<div class="layui-card template_detail_content" id="dhInfoContent" style="display: none">
<div class="layui-card-body">
<div class="lay-row">
<div class="lay-row-item lay-row-item--auto-width">
<h5 class="lay-row-title"><span style="color: #666">最近采集时间：<span style="color: #666" class="lastCollTime"></span></span></h5>
<h5 class="lay-row-title">信息展示</h5>
<ul class="info-table" id="dh_baseinfo"></ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">实时告警动态</h5>
<div id="dh_alarms"></div>
</div>
</div>
</div>
</div>
<div class="layui-card template_detail_content" id="dhviewGraphContainer" style="border: none">
<!--画布主区域-->
<div class="layui-card-body mxgraph-view" style="border: none"></div>
</div>
</div>
<!-- <div class="tree-expend-control" id="dhInfo-leftree_btn" title="展开">-->
<!-- <i class="layui-icon layui-icon-next"></i>-->
<!-- </div>-->
<div class="left dhInfoLeft">
<div class="layui-card">
<div class="layui-card-body">
<div id="dhInfotree"></div>
</div>
</div>
</div>
<!-- <div class="tree-expend-control-shrink" id="dhInfo-leftree-shrink" title="收缩">-->
<!-- <i class="layui-icon layui-icon-prev"></i>-->
<!-- </div>-->
</div>
</article>
<script>
layui.use('dhSxInfo', function (fn) {
fn();
});
</script>
\ No newline at end of file
... ...