|
|
|
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;"></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 |
...
|
...
|
|
