monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit e86e7088ef1adf6fd4a0636126db6dcf85cb5697 2 parents aecd1ce3 e13ec054

Merge branch 'master-mj-joke' into 'master-mj' 

chore:迁移业务轮播功能，禅道#2325

chore:迁移业务轮播功能，禅道#2325

See merge request !1105
Inline Side-by-side
Showing 2 changed files with 1475 additions and 0 deletions
layui.define(['common', 'swiper', 'admin', 'commonDetail', 'mxClient', 'msgTips', 'laytpl', 'form', 'sessions', 'table', 'sockjs', 'stomp'], function (exports) {
var $ = layui.$;
var admin = layui.admin;
var mxClient = layui.mxClient;
var currentBizId = '';//当前业务ID
var mxcellNodeDatas = {};//缓存拓扑节点业务数据
var nodesTipsDatas = {};//暂存拓扑的悬浮提示信息
var mxcellNodesAlarms = [];//缓存拓扑节点的告警信息
var mxcellNodesAlarmFlag = {};//节点是否有告警标识
var tabsPage = admin.mainTabsPage;
var alarmTimerStep = 60 * 1000;
var mxcellNodeRessType = {};//拓扑节点绑定资源的资源类型
var nodeAlarmTipsDom = {};//拓扑节点的告警提示信息
var msgTips = layui.msgTips;
var view = layui.view;
var table = layui.table;
//对外暴露的接口
exports('main-biz-turn', function () {
var common = layui.common;
var commonDetail = layui.commonDetail;
var form = layui.form;
var laytpl = layui.laytpl;
var sessions = layui.sessions;
var accessToken = common.getMjToken();
var access_token = sessions.getToken().access_token;
var isNewPwd = sessionStorage.getItem("isNewPwd");
//joke add 20210506
//判定是否第一次登录
if (localStorage.getItem("lgn") != 'admin') {
// checkFirstLogin();
// getPwdLevel();
}
//joke add 20210506 获取密码级别
function getPwdLevel() {
admin.req({
url: common.domainName + '/api-web/sysConf/getConfByCode?code=pwd_level'
, type: "get"
, async: false
, done: function (data) {
if (data && data.object && data.success === true && data.object.ddicDesc) {
checkPassword(data.object.ddicDesc.split(' ')[0], data.str);
}
}
});
}
function checkPassword(pattern, oldPwd) {
var msg = "密码安全等级过低，请修改密码";
var password = localStorage.getItem("password");
//新建用户或重置密码后，会给用户isNewPwd赋值为1，用此字段判定是否要修改密码
if (isNewPwd === '1') {
msg = "初始密码安全等级过低，请修改密码";
}
var flag = new RegExp(pattern).test(password);
if (!flag || isNewPwd === '1') { //如果不满足，则提示密码弱，需要修改密码
localStorage.setItem("showChangePwd", "Y");
layer.msg(msg, {
offset: '15px'
, icon: 7
, time: 2000
}, function () {
view('data-setting-pwd').render('/template/user/password').then(function (res) {
layer.open({
title: ['修改密码', 'font-size:18px;'],
type: 1,
area: ['450px', '300px'],
content: res.body,
closeBtn: 0,
success: function (data) {
},
});
});
// localStorage.removeItem("password");
});
}
}
//加载业务信息
loadBizInfo();
//加载右下角弹窗
// loadRightBottomTips();
//业务健康悬浮提示
var subtips;
$("#indexTopHealth").hover(function () {
openMsg();
}, function () {
layer.close(subtips);
});
function openMsg() {
subtips = layer.tips("<span style='color:#585858;'>所有业务的整体健康情况</br>" +
"所有业务为正常状态则整体情况为正常，否则为异常</span>",
'#indexTopHealth', {tips: [2, '#F0F0F0']});
}
//轮播
function banner() {
var timer = null;
var STEP = 1000 * 10; // 10s,每十秒轮播一次
var indexBannerBtn = $('#indexBannerBtn');
function run(slide, index) {
var item = null;
if (index === -1) {
item = slide.find('.index-banner-item').first().addClass('active');
} else {
item = slide.find('.index-banner-item').eq(index).addClass('active');
}
currentBizId = item.data("id");
// 内部 banner 切换调用
render(item.data('topoid'));
getAlarmCount(currentBizId);
getAlarmList(currentBizId);
function fn() {
var target = slide.find('.index-banner-item.active').removeClass('active');
if (target.next().length === 0) {
target = slide.find('.index-banner-item').first().addClass('active');
} else {
target = target.next().addClass('active');
}
currentBizId = target.data("id");
// 内部 banner 切换调用
render(target.data('topoid'), function () {
timer = setTimeout(fn, STEP);
});
getAlarmCount(currentBizId);
getAlarmList(currentBizId);
}
timer = setTimeout(fn, STEP);
}
var indexBanner = new Swiper('#indexBanner', {
autoplay: false,
loop: true,
speed: 1000,
threshold: 100,
// 如果需要前进后退按钮
prevButton: '#indexBannerLeft',
nextButton: '#indexBannerRight',
onSlideChangeStart: function (swiper) {
var slide = $(swiper.slides[swiper.activeIndex]);
slide.parents('.swiper-wrapper').find('.index-banner-item.active').removeClass('active');
},
onSlideChangeEnd: function (swiper) {
if (indexBannerBtn.hasClass('pause')) {
clearTimeout(timer);
var slide = $(swiper.slides[swiper.activeIndex]);
run(slide, -1);
}
}
});
indexBannerBtn.click(function () {
var target = $(indexBanner.slides[indexBanner.activeIndex]);
if ($(this).hasClass('pause')) {
$(this).removeClass('pause');
clearTimeout(timer);
} else {
run(target, target.parents('.swiper-wrapper').find('.index-banner-item.active').index());
$(this).addClass('pause');
}
});
//业务卡片点击事件
$('[data-index-banner-item]').click(function (e) {
indexBannerBtn.removeClass('pause');
clearTimeout(timer);
var target = $(indexBanner.slides[indexBanner.activeIndex]);
target.parents('.swiper-wrapper').find('.index-banner-item.active').removeClass('active');
$(e.currentTarget).addClass('active');
currentBizId = $(e.currentTarget).data('id');
var topoId = $(e.currentTarget).data('topoid');
// 内部 banner 切换调用
render(topoId);
getAlarmCount(currentBizId);
getAlarmList(currentBizId);
});
admin.on('hash(*)', function (router) {
if (router.href === '/') {
if (tabsPage.type === 'tab') {
var target = $(indexBanner.slides[indexBanner.activeIndex]);
run($(indexBanner.slides[indexBanner.activeIndex]), target.parents('.swiper-wrapper').find('.index-banner-item.active').index());
}
} else {
clearTimeout(timer);
clearTimeout(common.alarmTimer);
}
});
// 默认点击启动自动轮播
setTimeout(function () {
indexBannerBtn.trigger('click');
}, 100);
}
var layerRes = {};
function loadRightBottomTips() {
var initTips = sessionStorage.getItem("initTips");
if (!initTips) {
admin.req({
url: common.domainName + "/api-web/home/messageRemind",
done: function (res) {
sessionStorage.setItem("initTips", "1");
var alarm = 0, work = 0, notRead = 0, doubleCheck = 0, toTimeOut = 0;
var map = res.map;
if (map) {
alarm = map['totalCountByUser'], work = map['dayNotReport'] + map['weekNotReport'] + map['monthNotReport'], notRead = map['notReadCountByUser'], doubleCheck = map['doubleCheckRes'], toTimeOut = map['toTimeOut'];
if (alarm && alarm > 0) {
var alarmMsg = new msgTips({
dom: ".right-bottom-tips",
title: "告警消息",
message: `<p style="line-height: 20px">您有【${alarm}】条告警未处理,请及时关注</p>`,
duration: 15000,
space: 10,
firstSpace: 8,
limit: 4,
margin: 15,
direction: 'right bottom',
timingFun: 'ease',
width: '300px',
toastType: 'error',
type: 'click',
action: function () {
location.hash = "/alarm/activewarning";
},
})
}
if (work && work > 0) {
var date = common.getPreMonth(common.getToday("day"))
var content = `<p >自${date}起，您有【${work}】条日志</p><p>未上报,其中</p><p >月报未上报数量为【${map['monthNotReport']}】</p><p >周报未上报数量为【${map['weekNotReport']}】</p><p >日报未上报数量为【${map['dayNotReport']}】</p><p >请及时填报</p>`
setTimeout(function () {
var workMsg = new msgTips({
dom: ".right-bottom-tips",
title: "工作日志消息",
duration: 15000,
message: content,
width: '300px',
space: -33,
toastType: 'warning',
type: 'click',
action: function () {
location.hash = "/iframe/insp/workreport"
},
})
}, 800)
}
if (notRead > 0) {
setTimeout(function () {
var notReadMsg = new msgTips({
dom: ".right-bottom-tips",
title: "工作日志未读消息",
duration: 15000,
message: `<p style="line-height: 20px">您有【${notRead}】条工作汇报未读,请及时关注</p>`,
toastType: 'warning',
space: 10,
type: 'click',
width: '300px',
action: function () {
location.hash = "/iframe/insp/workview/read=0/type=1"
},
})
}, 500)
}
// if(doubleCheck && doubleCheck > 0){
// setTimeout(function () {
// var doubleCheckMsg = new msgTips({
// dom:".right-bottom-tips",
// title: "重复监控资源提示消息",
// duration:15000,
// message:`<p style="line-height: 20px">共有【${doubleCheck}】个资源重复监控,请及时处理</p>`,
// toastType:'warning',
// space:10,
// type:'click',
// width:'300px',
// action: function () {
// },
// })
// },500)
// }
if (toTimeOut && toTimeOut > 0) {
var toTimeOutDay = map['toTimeOutDay'] ? map['toTimeOutDay'] : 5;
setTimeout(function () {
var toTimeOutMsg = new msgTips({
dom: ".right-bottom-tips",
title: "监控资源即将过期提示消息",
duration: 15000,
message: `<p style="line-height: 20px">共有【${toTimeOut}】个资源的监控账号将在${toTimeOutDay}天内过期</p>`,
toastType: 'warning',
space: 10,
type: 'click',
width: '300px',
action: function () {
layerRes = layer.open({
title: '监控账号即将过期资源',
id: 'ToTimeOutRes',
type: 1,
area: ['80%', '90%'],
success: function () {
view(this.id).render('/baseconfig/resmanage/toTimeOutResList');
},
yes: function (index, layero) {
},
})
},
})
}, 500)
}
}
}
});
}
}
//定时获取节点告警信息
function refresNodeAlarms(topoId, indexGraph) {
if (!topoId) {
return false;
}
admin.req({
url: common.domainName + "/api-web/mxgraph/findAlarmInfo",
data: {jtopoId: topoId},
done: function (res) {
if (res.data && res.data.length > 0) {
mxcellNodesAlarms = res.data;
}
//刷新拓扑节点的提示信息
refreshTopoNodeTipsInfo(indexGraph);
}
});
}
//加载业务信息
function loadBizInfo() {
var loadIdx = layer.load(2); //加载层
admin.req({
url: common.domainName + '/api-web/home/business/getBusHealthResult'
, type: "get"
, done: function (data) {
layer.close(loadIdx);
if (data.code === 0) {
var bizMap = data.map;
if (bizMap != null && bizMap.health != '3') {//不等于优
$(".index-top-health").find("i").removeClass("icon-health-good").addClass("icon-health");
}
var bizlist = []
if (bizMap != null && bizMap.busList.length > 0) {
bizlist = bizMap.busList;
//将数组分为长度为6的数组段
var newGroup = common.splieceGroup(bizlist, 6);
layui.use('laytpl', function () {
var laytpl = layui.laytpl;
var getTpl = document.getElementById("indexbizhealthTpl").innerHTML;
laytpl(getTpl).render(newGroup, function (html) {
$('#indexbizhealth').html(html);
banner();
//点击弹出提示框
$(".index-banner-item").on("click", function () {
var _this = this;
var bizId = $(this).data("id");
var dialResult = '';
var dialResultStart = '<table class="layui-table"> <thead> <tr> <th>拨测场景</th> <th>拨测结果</th> </tr> </thead> <tbody>';
var dialResultEnd = '</tbody> </table>';
admin.req({
url: common.domainName + '/api-web/home/dialtest/indexInfo?busId=' + bizId
, type: "get"
, done: function (res) {
if (res.data && res.data.length > 0) {
var dialResultConent = '';
$.each(res.data, function (i, v) {
var dialtestResult = "正常";
if (v.dialtestResult != '200') {
dialtestResult = "异常"
}
dialResultConent += '<tr> <td>' + v.dialtestName + '</td> <td>' + dialtestResult + '</td> </tr> ';
});
if (dialResultConent && dialResultConent != '') {
dialResult = dialResultStart + dialResultConent + dialResultEnd;
// bizDialTestInfo = layer.tips(dialResult,_this,{tips:[2,'#F5F5F5'],time:0,area: ['auto', 'auto']});
layer.open({
type: 1,
area: ['50%', '40%'],
content: dialResult
})
}
}
}
});
});
});
});
} else {
$("#indexActiveAlarmList").html('<li style="width:390px;"><p>无告警</p></li>');
}
} else {
console.log(data.msg);
}
}
}).error(function () {
layer.close(loadIdx);
$("#indexActiveAlarmList").html('<li style="width:390px;"><p>无告警</p></li>');
});
}
var viewGraphcontainer = document.getElementById('viewGraphContainer');
var viewGraph = new mxGraph(viewGraphcontainer);
//加载拓扑图
function render(topoId, fn) {
if (!mxClient.isBrowserSupported()) {
mxUtils.error('浏览器不支持：Browser is not supported!', 200, false);
} else {
//切换时先清除定时器
clearTimeout(common.alarmTimer);
if (topoId) {
admin.req({
url: common.domainName + '/api-web/mxgraph/findByJtopoId',
data: {flag: false, jtopoId: topoId}
}).done(function (res) {
if (res.object && res.object.xmlInfo && (new Date(res.object.createTime) < new Date('2021-03-23 17:28'))) {
// 旧版拓扑
$('#newViewGraphContainer').addClass('hide');
$('#viewGraphContainer').removeClass('hide');
var xml = res.object.xmlInfo;
// 拓扑背景及样式
viewGraphcontainer.style.position = 'absolute';
viewGraphcontainer.style.overflow = 'hidden';
viewGraphcontainer.style.background = 'url("/src/lib/mxgraph/editors/images/grid.gif")';
// 开启方块上的文字编辑功能，解决分组块不能收缩问题
viewGraph.setCellsEditable(false);
viewGraph.setCellsSelectable(false);
viewGraph.setConnectable(false);
viewGraph.setCellsMovable(false);
viewGraph.setAllowDanglingEdges(false); // 禁止连接线晃动
// 左键拖动
viewGraph.panningHandler.useLeftButtonForPanning = true;
viewGraph.panningHandler.ignoreCell = true;
viewGraph.container.style.cursor = 'move';
viewGraph.setPanning(true);
//预览时鼠标悬浮到节点时，改变鼠标样式
viewGraph.getCursorForCell = function (cell) {
return 'pointer';
}
//开启标签支持html
viewGraph.setHtmlLabels(true);
//悬浮提示
viewGraph.setTooltips(true);
viewGraph.getTooltipForCell = function (cell) {
var topoTipsData = mxCellTipsDatas[cell.cellId];
var alarmTipsInfo = mxCellAlarmTipsDom[cell.cellId];
var tipshtml = '';
if (topoTipsData && topoTipsData.length > 0) {
tipshtml += createMxCellTipsDom(topoTipsData, cell.cellId);
}
if (alarmTipsInfo) {
if (tipshtml !== '') {
tipshtml += "<br>" + alarmTipsInfo
} else {
tipshtml += alarmTipsInfo
}
}
return tipshtml;
}
// viewGraph.setEnabled(false);//禁止拖动,禁止后无法收缩
// 恢复createControl，预览状态下删除按钮状态销毁
mxCellRenderer.prototype.createControl = function (state) {
var graph = state.view.graph;
var image = graph.getFoldingImage(state);
if (graph.foldingEnabled && image != null) {
if (state.control == null) {
var b = new mxRectangle(0, 0, image.width, image.height);
state.control = new mxImageShape(b, image.src);
state.control.preserveImageAspect = false;
state.control.dialect = graph.dialect;
this.initControl(state, state.control, true, this.createControlClickHandler(state));
}
} else if (state.control != null) {
state.control.destroy();
state.control = null;
}
};
viewGraph.getModel().beginUpdate();
try {
//回显
var viewdoc = mxUtils.parseXml(xml);
var viewcodec = new mxCodec(viewdoc);
viewcodec.decode(viewdoc.documentElement, viewGraph.getModel());
//节点点击事件
viewGraph.addListener(mxEvent.CLICK, function (source, evt) {
if (evt.properties.event.button == 0) {//左键菜单
var cell = evt.getProperty('cell');
if (cell && cell != null && cell.edge != 1 && cell.childTopoId) {
$("#topo_view_childtop").attr("lay-href", "/mxgraph/view/from=v/id=" + cell.childTopoId);
$("#topo_view_childtop").trigger("click");
}
}
//渲染线条
renderCellEdgeStyle();
});
//禁止浏览器自带右键菜单
mxEvent.disableContextMenu(viewGraphcontainer);
//增加右键及右键菜单事件
viewGraph.popupMenuHandler.factoryMethod = function (menu, cell, evt) {
var cellId = cell.cellId;
var resIds = [];
if (nodeInfo[cellId] != null) {
$.each(nodeInfo[cellId], function (i, n) {
if (n.resId && $.inArray(n.resId, resIds) == -1) {
resIds.push(n.resId);//将节点绑定的资源ID放入集合
menu.addItem(n.name, null, function () {
common.viewMxGraphNodeResInfo(n.resId);
});
}
});
}
menu.addSeparator();//分割线
menu.addItem('查看告警信息', null, function () {
if (topoNodesAlarmFlag[cell.cellId]) {
$("#topo_view_alarm_info").attr("lay-href", "/alarm/activewarning/resId=" + resIds.toString());
$("#topo_view_alarm_info").trigger('click');
} else {
layer.msg('非常健康，暂无告警信息！', {offset: '15px', icon: 1, time: 3000});
}
});
}
// 滚轮缩放事件
mxEvent.addMouseWheelListener(function (evt, scrollUp) {
if (scrollUp) {
// 如果是向上滚滚轮，放大
viewGraph.zoomIn();
} else {
// 反之，缩小
viewGraph.zoomOut();
}
// 取消滚轮默认行为
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
//渲染线条
renderCellEdgeStyle();
}, viewGraphcontainer);
} finally {
viewGraph.getModel().endUpdate();
viewGraph.fit();//自适应
viewGraph.center(true, true, 0.5, 0.5);//将画布放到容器中间
var sc = viewGraph.getView().getScale();//获取当前的缩放比例
var scale = Math.round(sc / 2);
if (scale) {
viewGraph.zoomTo(scale);//在缩放一半，否则是满屏状态，不好看
}
//渲染线条
renderCellEdgeStyle();
//渲染动画效果,延迟三秒执行
setTimeout(function () {
getMxCellAlarms();
}, 2000)
//实时更新提示信息
realtimeRefreshTopsData(topoId);
}
} else if (res.object && res.object.xmlInfo && (new Date(res.object.createTime) > new Date('2021-03-23 17:28'))) {
// 新版拓扑
$('#viewGraphContainer').addClass('hide');
$('#newViewGraphContainer').removeClass('hide');
$('#newViewGraphContainer iframe').attr('src', `/grapheditor-web/jgraph/grapheditor/viewer.html?access_token=${accessToken}&id=${topoId}`);
} else {
$('#newViewGraphContainer').addClass('hide');
$('#viewGraphContainer').removeClass('hide');
$("#viewGraphContainer").html("<div style='text-align: center;width: 100%;font-size:18px;'>暂无拓扑</div>");
}
});
} else {
$('#newViewGraphContainer').addClass('hide');
$('#viewGraphContainer').removeClass('hide');
$("#viewGraphContainer").html("<div style='text-align: center;width: 100%;font-size:18px;'>暂无拓扑</div>");
}
fn && fn();
}
}
//渲染线条的样式，虚线效果
function renderCellEdgeStyle() {
$.each(viewGraph.getModel().cells, function (idx, cell) {
var state = viewGraph.view.getState(cell);
if (cell.edge === 1) {//如果是线条效果
if (cell.lineAnimate === 'lineAnimate') {
createLineAnimation(state, "#6684BA");
}
if (nodeInfo[cell.cellId] && nodeInfo[cell.cellId].length > 0) {
var nodelist = nodeInfo[cell.cellId];
for (var i = 0; i < nodelist.length; i++) {
var mxcellNode = nodelist[i];
if (mxcellNode.flag) {
if (mxcellNode.flag.indexOf("net-") === 0 || mxcellNode.flag.indexOf("port-") === 0) {
createLineAnimation(state, "#6684BA");
}
}
}
}
}
})
getMxCellAlarms();
}
//获取线条或者节点的告警信息，并渲染动态效果
function getMxCellAlarms() {
topoNodesAlarmFlag = {};
if (mxcelltopoNodesAlarms && mxcelltopoNodesAlarms.length > 0) {
$.each(mxcelltopoNodesAlarms, function (idx, n) {
$.each(viewGraph.getModel().cells, function (i, cell) {
var state = viewGraph.view.getState(cell);
//如果有告警信息
if (n.nodeId == cell.cellId) {//匹配上，则表示有告警
topoNodesAlarmFlag[cell.cellId] = true;
if (cell.edge === 1) {//如果是线条效果
createLineAnimation(state, "#ff0000");
} else {
//给节点增加告警
switch (cell.alarmAnimate) {
case "alarm" :
viewGraph.setCellWarning(cell, '有告警');
break;
case "fade" :
state.shape.node.setAttribute('class', 'fade');
break;
case "heart" :
state.shape.node.setAttribute('class', 'beating');
break;
case "flash" :
state.shape.node.setAttribute('class', 'breathe');
break;
default:
state.shape.node.setAttribute('class', 'fade');//默认渐隐渐显
}
}
}
})
});
}
}
//生成节点提示dom
function createMxCellTipsDom(data) {
var tipDom = '';
if (data && data.length > 0) {
var tips = `<h6>节点信息: ${data[0].ip}</h6>`;
var spanDom = '';
var kpiDoms = "";
$.each(data, function (i, v) {
var tipsTitle = '<span class="tilte">' + v.resName + '</span>';
if (v.kpi) {
$.each(v.kpi, function (idx, kpi) {
spanDom += '<span>' + kpi.kpiOtherName + '：' + kpi.kpiValue + kpi.kpiUnit + '</span>';
});
kpiDoms += tipsTitle + spanDom;
}
});
tipDom += tips + kpiDoms;
}
return tipDom;
}
//渲染线条的样式，虚线效果
function renderEdgeStyle(indexGraph) {
$.each(indexGraph.getModel().cells, function (idx, cell) {
var state = indexGraph.view.getState(cell);
if (cell.edge === 1) {//如果是线条效果
if (cell.lineAnimate === 'lineAnimate') {
createEdgeAnimation(state, "#6684BA");
}
if (mxcellNodeDatas[cell.cellId] && mxcellNodeDatas[cell.cellId].length > 0) {
var nodelist = mxcellNodeDatas[cell.cellId]
for (var i = 0; i < nodelist.length; i++) {
var mxcellNode = nodelist[i];
if (mxcellNode.flag) {
if (mxcellNode.flag.indexOf("net") === 0 || mxcellNode.flag.indexOf("port") === 0) {
createEdgeAnimation(state, "#6684BA");
}
}
}
}
}
})
getMxCellAlarms(indexGraph);
}
//获取线条或者节点的g告警信息，并渲染动态效果
function getMxCellAlarms(indexGraph) {
mxcellNodesAlarmFlag = {};
if (mxcellNodesAlarms && mxcellNodesAlarms.length > 0) {
$.each(mxcellNodesAlarms, function (idx, n) {
$.each(indexGraph.getModel().cells, function (i, cell) {
var state = indexGraph.view.getState(cell);
//如果有告警信息
if (n.nodeId == cell.cellId) {//匹配上，则表示有告警
mxcellNodesAlarmFlag[cell.cellId] = true;
if (cell.edge === 1) {//如果是线条效果
createEdgeAnimation(state, "#ff0000");
} else {
//给节点增加告警
switch (cell.alarmAnimate) {
case "alarm" :
indexGraph.setCellWarning(cell, '有告警');
break;
case "fade" :
state.shape.node.setAttribute('class', 'fade');
break;
case "heart" :
state.shape.node.setAttribute('class', 'beating');
break;
case "flash" :
state.shape.node.setAttribute('class', 'breathe');
break;
default:
state.shape.node.setAttribute('class', 'fade');//默认渐隐渐显
}
}
}
})
});
}
}
//创建连线动画
function createEdgeAnimation(state, color) {
state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
state.shape.node.getElementsByTagName('path')[1].setAttribute('stroke', color);
state.shape.node.getElementsByTagName('path')[1].setAttribute('stroke-width', '2');
state.shape.node.getElementsByTagName('path')[1].setAttribute('stroke', color);
state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'mxgraphflow');
state.shape.node.getElementsByTagName('path')[2].setAttribute('fill', color);
state.shape.node.getElementsByTagName('path')[2].setAttribute('stroke', color);
}
/**
* @desc 查看资源详细
* @author wangfeng
* @date 2020/9/1 15:42
**/
function viewIndexMxGraphNodeResInfo(resId) {
admin.req({
url: common.domainName + "/api-web/home/resource/findById?resId=" + resId
, type: "get"
, done: function (res) {
var data = res.object;
if (data) {
var resTypeName = data.resTypeName ? data.resTypeName + " | " : "";
var resName = data.resName ? data.resName + " | " : "";
var resIp = data.ip ? data.ip + " | " : "";
var resPositon = data.resPositon ? data.resPositon + " | " : "";
var resLabel = data.resLabel ? data.resLabel + " | " : "";
var admin = data.admin ? data.admin : "";
var title = resTypeName + resName + resIp + resPositon + resLabel + admin;
if (data.pingEnable == '2') { //如果pingEnable为2，则进入ping状态详情页面
commonDetail.openNewWin('template/detail/pingIndex', title, {'resId': data.resId}, false);
} else { //否则进入监控详情页面
commonDetail.openDetail(data.resId, data.resType, data.resName);
}
} else {
layer.msg("获取资源详细信息失败，请稍后再试！", {offset: '15px', icon: 7, time: 2000});
}
}
});
}
//生成节点提示dom
function createIndexMxCellTipsDom(data) {
var tipDom = '';
if (data && data.length > 0) {
var tips = '<h6>节点信息</h6>';
var spanDom = '';
var tipsTitle = "";
$.each(data, function (i, v) {
if (i === 0) {
tipsTitle = '<span class="tilte">' + v.resName + '</span>';
}
spanDom += '<span>' + v.kpiOtherName + '：' + v.kpiValue + v.kpiUnit + '</span>';
});
tipDom = tips + tipsTitle + spanDom;
}
return tipDom;
}
//生成节点的告警信息
function createIndexMxcelAlarmTipsDom(nodeId) {
var alramTipDom = '';
if (mxcellNodesAlarms && mxcellNodesAlarms.length > 0) {
var resIds = [];
$.each(mxcellNodesAlarms, function (i, n) {
if (nodeId == n.nodeId) {
if (n.resId && n.resId != null && $.inArray(n.resId, resIds) == -1) {
resIds.push(n.resId);
}
}
});
if (resIds.length > 0) {
admin.req({
url: common.domainName + '/api-web/bAlarm/list',
data: {resId: resIds.toString()}
, done: function (res) {
if (res.data && res.data.length > 0) {
var tips = '<h6>告警信息</h6>';
var spanDom = '';
$.each(res.data, function (idx, item) {
spanDom += '<span>' + item.alarmContent + '</span>';
});
alramTipDom = tips + spanDom;
nodeAlarmTipsDom[nodeId] = alramTipDom;
}
}
});
}
}
}
//实时刷新接口
function realtimeRefreshData(topoId, indexGraph) {
//实时刷新业务状态
refreshBizHealth();
//获取拓扑节点告警数量
refresNodeAlarms(topoId, indexGraph);
//刷新告警统计
getAlarmCount();
//刷新实时告警动态
getAlarmList();
/*common.alarmTimer = setTimeout(function () {
realtimeRefreshData(topoId,indexGraph);
}, alarmTimerStep);*/
}
//获取告警统计信息
function getAlarmCount(bizId) {
if (!bizId) {
bizId = currentBizId;
}
admin.req({
url: common.domainName + "/api-web/home/alarm/countByAlarmLevel"
, type: "get",
data: {
busId: bizId
, flag: true
}
, done: function (data) {
var alarms = data.data;
//默认都给0
$("#alarm_serious").text(0);
$("#alarm_important").text(0);
$("#alarm_commonly").text(0);
if (data.code == 0) {
var alarmTotal = 0;
if (alarms.length > 0) {
$.each(alarms, function (i, v) {
if (v.alarmLevel < 4) {
alarmTotal += v.alarmNum;
}
if (v.alarmLevel == 3) {//严重告警
$("#alarm_serious").text(v.alarmNum);
}
if (v.alarmLevel == 2) {//重要告警
$("#alarm_important").text(v.alarmNum);
}
if (v.alarmLevel == 1) {//一般告警
$("#alarm_commonly").text(v.alarmNum);
}
if (v.alarmLevel == 4) {//升级告警
$("#alarm_upgrade").text(v.alarmNum);
}
});
}
var emptyZero = ["000", "00", "0", ""];
var alarmTotalStr = emptyZero[alarmTotal.toString().length - 1] + alarmTotal;
var li = "<li>" + alarmTotalStr.substring(0, 1) + "</li>" +
"<li>" + alarmTotalStr.substring(1, 2) + "</li>" +
"<li>" + alarmTotalStr.substring(2, 3) + "</li>" +
"<li>" + alarmTotalStr.substring(3, 4) + "</li>";
$("#alarm_total").html(alarmTotal);
//绑定点击事件
$(".gj-detail-info .alarm_levels").on("click", function () {
var level = $(this).data("level");
toAlarm(bizId,level);
});
//告警总量点击
$("#indexRightGjSum").on("click", function () {
toAlarm(bizId);
});
} else {
console.log(data.msg);
}
}
});
}
//活动告警列表
function getAlarmList(bizId) {
if (!bizId) {
bizId = currentBizId;
}
admin.req({
url: common.domainName + '/api-web/home/alarm/alarmListPage'
, type: "get"
, data: {
busId: bizId
, page: 1
, limit: 5
}
, done: function (data) {
if (data.code === 0) {
if (data.data != null && data.data.length > 0) {
layui.use('laytpl', function () {
var laytpl = layui.laytpl;
var getTpl = document.getElementById("indexActiveAlarmListTpl").innerHTML;
laytpl(getTpl).render(data.data, function (html) {
$('#indexActiveAlarmList').html(html);
});
});
} else {
$("#indexActiveAlarmList").html('<li style="width:390px;"><p>无告警</p></li>');
}
//给更多绑定事件
$("#more_active_alarms").on("click", function () {
toAlarm(bizId);
});
} else {
console.log(data.msg);
}
}
}).error(function () {
$("#indexActiveAlarmList").html('<li style="width:390px;"><p>无告警</p></li>');
});
}
/**
* 跳转到告警管理
* bizId 业务id
* alarmLevel 告警级别
* */
function toAlarm(bizId,alarmLevel) {
let win = window.parent;
if (win) {
window.parent.postMessage({
type: 'custom-jump-menu-event',
message: {
'path':'',
'type':"JumpToAlarmManagement",
params:{
bizId:bizId,
alarmLevel:alarmLevel
}
}
}, '*')
}
}
//定时更新缓存中的悬浮提示数据
function refreshTopoNodeTipsInfo() {
if (mxcellNodeDatas) {
$.each(mxcellNodeDatas, function (i, v) {
var nodeId = v[0].nodeId;
var resId = v[0].resId;
var configKpiIds = [];//配置的所有指标集合
var configKpiFlags = [];
$.each(v, function (idx, kpi) {
if (kpi.kpiId && kpi.kpiId != null) {
configKpiIds.push(kpi.kpiId);
configKpiFlags.push(kpi.flag);
}
})
//指标信息,如果配置了指标信息，则提示指标信息
if (configKpiIds && configKpiIds.length > 0) {
admin.req({
url: common.domainName + "/api-web/bResultRealtimeCollector/getval?resId=" + resId +
"&kpiId=" + configKpiIds.toString() + "&flag=" + configKpiFlags.toString()
}).done(function (resdata) {
var kpiDatas = resdata.data;
var newKpiDatas = [];
if (kpiDatas && kpiDatas.length > 0) {
$.each(kpiDatas, function (i, kpiitems) {
var kpiOtherName = "";
$.each(v, function (_idx, _items) {
if (_items.kpiId && _items.kpiId != null && _items.kpiId === kpiitems.kpiId
&& _items.flag === kpiitems.flag) {
kpiOtherName = _items.kpiOtherName
}
});
kpiitems.kpiOtherName = kpiOtherName
newKpiDatas.push(kpiitems);
})
nodesTipsDatas[nodeId] = newKpiDatas;
mxcellNodeRessType[nodeId] = resdata.data[0].resType;
}
});
} else {
admin.req({
url: common.domainName + "/api-web/home/resource/findById?resId=" + resId
, type: "get"
, sync: true
, done: function (res) {
var data = res.object;
if (data) {
var kpiIds = "";
if (data.resType.indexOf("HOST_MINICOMPUTER_P") != -1) {
kpiIds = common.nodeTipsKpiArr['HOST_MINICOMPUTER_PARTITION'];
} else {
kpiIds = common.nodeTipsKpiArr[data.resType];
}
admin.req({
url: common.domainName + "/api-web/bResultRealtimeCollector/getval?resId=" + resId + "&kpiId=" + kpiIds + "&flag=" + configKpiFlags.toString()
}).done(function (resdata) {
var kpiDatas = resdata.data;
var newKpiDatas = [];
if (kpiDatas && kpiDatas.length > 0) {
$.each(kpiDatas, function (i, kpiitems) {
var kpiOtherName = "";
$.each(v, function (_idx, _items) {
if (_items.kpiId && _items.kpiId != null && _items.kpiId === kpiitems.kpiId
&& _items.flag === kpiitems.flag) {
kpiOtherName = _items.kpiOtherName
}
});
kpiitems.kpiOtherName = kpiOtherName
newKpiDatas.push(kpiitems);
})
}
nodesTipsDatas[nodeId] = newKpiDatas;
mxcellNodeRessType[nodeId] = data.resType;
});
}
}
});
}
createIndexMxcelAlarmTipsDom(nodeId);
})
}
}
//刷新业务健康状态
function refreshBizHealth() {
admin.req({
url: common.domainName + '/api-web/home/business/getBusHealthResult'
, type: "get"
, done: function (data) {
if (data.code === 0) {
var bizMap = data.map;
if (bizMap.health != '3') {//不等于优
$(".index-top-health").find("i").removeClass("icon-health-good").addClass("icon-health");
} else {
$(".index-top-health").find("i").removeClass("icon-health").addClass("icon-health-good");
}
if (bizMap != null && data.map.busList.length > 0) {
var bizlist = data.map.busList;
$.each(bizlist, function (i, v) {
var bizClas = 'icon-banner-zc';
var healthDesc = `告警量：${v.alarmNum}`;
;
if (v.health == 1) {
bizClas = 'icon-banner-bad';
healthDesc = `告警量：${v.alarmNum}`;
}
if (v.health == 2) {
bizClas = 'icon-banner-warning';
healthDesc = `告警量：${v.alarmNum}`;
;
}
//先移除原来的
$("#" + v.busId).find("i").removeClass("icon-banner-zc").removeClass("icon-banner-bad").removeClass("icon-banner-warning");
$("#" + v.busId).find("i").addClass(bizClas);
$("#" + v.busId).find("span").text(healthDesc);
});
}
} else {
console.log(data.msg);
}
}
});
}
//刚登录查询值班消息
dutyRightBottomTips();
var connectFlg = false;
//右下角值班弹窗长连接监控
var dutyLongLink = function () {
setTimeout(function () {
if (!connectFlg) {
dutyRightBottomTips();
}
}, 3 * 60 * 1000);
}
dutyLongLink();
//值班弹窗
function dutyRightBottomTips() {
var sign = 0;
var ids = [];
admin.req({
url: common.domainName + '/api-web/manage/duty/dutyMessage'
, async: false
, success: function (res) {
var dutyMessage = res;
if (dutyMessage.data && dutyMessage.success) {
//弹窗声音
var url = '../src/style/mp3/咳咳.mp3';
var audio = common.audioPlayer(url);
audio.playclip();
//弹窗
var duty = new msgTips({
dom: ".right-bottom-tips",
title: "值班调换消息",
message: `<p style="line-height: 20px">您有【${dutyMessage.count}】条调换值班信息未处理,请及时关注</p>`,
duration: 3 * 60 * 1000,
space: 10,
firstSpace: 8,
limit: 4,
margin: 15,
direction: 'right bottom',
timingFun: 'ease',
width: '300px',
toastType: 'info',
type: 'click',
action: function () {
var html = '<div class="page-panel" style="min-height: 0;height: auto">\n' +
' <div class="main">\n' +
' <div class="layui-card">\n' +
' <div class="layui-card-header">\n' +
' </div>\n' +
' <div class="layui-card-body">\n' +
' <table id="table-duty-list-message" lay-filter="table-duty-list-message"></table>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
//显示弹窗 页面不关闭
layer.open({
type: 1,
title: '调换信息',
offset: 'rb',
btn: ['取消'],
scrollbar: false,
area: ['960px', '300px'],
content: html,
success: function (layero, index) {
table.render({
elem: '#table-duty-list-message',
data: dutyMessage.data,
page: false,
height: 'auto',
even: true,
cols: [[{
field: 'dutyTime', title: '内容', align: 'left', width: '65%',
templet: function (d) {
//拼接内容
if (d.dutyChangeType == '2') {
//xx请求2021-09-29 18:00-8:00 与您的值班时间2021-09-25 16:00-8:00进行换班，请确认
return d.userName + '请求' + d.dutyTime + ' ' + d.dutyDuration + '与您的值班时间'
+ d.changeDutyTime.split(" ")[0] + ' ' + d.changeDutyDuration.split(" ")[0] + '进行换班，请确认';
} else {
//xx请求与您值班时间2021-09-26 18:00-8:00进行替班，请确认!
return d.userName + '请求与您值班时间' + d.dutyTime + ' ' + d.dutyDuration + '进行替班，请确认!';
}
}
}, {
field: 'phone', title: '联系电话', align: 'center', width: '15%',
}, {
field: 'dutyChangeType', title: '类型', align: 'center', width: '8%',
templet: function (d) {
if (d.dutyChangeType == '2') {
return '换班';
} else {
return '替班';
}
}
}, {
title: '操作', align: 'center', fixed: 'right', width: '12%',
toolbar:
'<div>' +
'<button data-dutyTime="{{d.dutyTime}}" data-dutyChangeId="{{d.dutyChangeId}}" data-changeId="{{d.changeId}}" data-dutyChangeType="{{d.dutyChangeType}}" data-id="{{d.id}}" data-userid="{{d.userId}}" data-account="{{d.userAccount}}" data-username="{{d.userName}}" lay-tips="确定" type="button" class="layui-btn layui-btn-xs layui-btn-normal link-duty-confirm"><i class="layui-icon">&#xe605;</i></button>' +
'<button data-dutyTime="{{d.dutyTime}}" data-dutyChangeId="{{d.dutyChangeId}}" data-changeId="{{d.changeId}}" data-dutyChangeType="{{d.dutyChangeType}}" data-id="{{d.id}}" data-userid="{{d.userId}}" data-account="{{d.userAccount}}" data-username="{{d.userName}}" lay-tips="取消" type="button" class="layui-btn layui-btn-xs layui-btn-normal link-duty-cancel"><i class="layui-icon">&#x1006;</i></button>' +
'</div>'
}]],
done: function (res) {
//三条数据或三条数据以下没有滚动条
// if(dutyMessage.data.length<=3){
// $('.layui-layer-content').css("overflow-y","hidden");
// }else{
// $('.layui-layer-content').css("overflow-y","visible");
// }
//不能重复点击
if (sign != 0) {//只让当前的button不能使用
$.each($('.link-duty-confirm'), function (i, v) {
if (ids.indexOf($(this).attr("data-id")) > -1) {
$(this).addClass("disabled");
}
});
$.each($('.link-duty-cancel'), function (i, v) {
if (ids.indexOf($(this).attr("data-id")) > -1) {
$(this).addClass("disabled");
}
});
}
// 点击调换
$('.link-duty-confirm').on('click', function () {
var $that = $(this);
var duty = {
id: $(this).data("id"),
userId: $(this).data("userid"),
userName: $(this).data("username"),
dutyChangeType: $(this).data("dutychangetype"),
changeId: $(this).data("changeid"),
dutyChangeId: $(this).data("dutychangeid"),
username: $(this).data("account"),
dutyTime: $(this).data("dutytime")
}
admin.req({
url: common.domainName + '/api-web/manage/duty/agreeExchange?access_token=' + access_token,
async: false,
data: duty,
done: function (res) {
if (res.success) {
layer.closeAll();
layer.msg('调换成功!', {icon: 1, time: 3000});
sign = 1;
$that.addClass("disabled");
ids.push($that.data("id"));
//关闭弹窗
closeDuty();
} else {
layer.closeAll();
layer.msg('调换失败!', {icon: 7, time: 3000});
}
}
});
});
//取消调换
$('.link-duty-cancel').on('click', function () {
var $that = $(this);
var duty = {
id: $(this).data("id"),
dutyChangeType: $(this).data("dutychangetype"),
changeId: $(this).data("changeid"),
username: $(this).data("account"),
userName: $(this).data("username"),
dutyTime: $(this).data("dutytime")
}
admin.req({
url: common.domainName + '/api-web/manage/duty/disagreeExchange?access_token=' + access_token,
async: false,
data: duty,
done: function (res) {
if (res.success) {
layer.closeAll();
layer.msg('拒绝调换成功!', {icon: 1, time: 3000});
sign = 1;
$that.addClass("disabled");
ids.push($that.data("id"));
//关闭弹窗
closeDuty();
} else {
layer.closeAll();
layer.msg('拒绝调换失败!', {icon: 7, time: 3000});
}
}
});
});
}
});
},
cancel: function (index, layero) {//取消回调函数
layer.closeAll();
}
});
},
});
function closeDuty() {
//如果全部处理则关闭所有弹窗 除以2是因为layUI加载两次
if (ids.length == $('.link-duty-confirm').length / 2) {
//关闭弹窗
layer.closeAll();
//关闭提示
$.each($('.title.clearfix'), function (i, v) {
var title = $(this).text();
if (title == '值班调换消息') {
$(this).find('.tips_icon_r.close').click();
}
});
}
}
}
}
});
}
});
});
... ...
<!--带业务轮播的-->
<article class="page-container topo topo-index--view">
<div class="layui-card">
<div class="index-top">
<div class="index-top-health" id="indexTopHealth">
<i class="icon-health-good"></i>
<p>业务系统健康情况</p>
</div>
<div class="index-banner">
<div class="index-banner-left" id="indexBannerLeft"></div>
<div class="index-banner-right" id="indexBannerRight"></div>
<div class="swiper-container" id="indexBanner">
<div class="swiper-wrapper" id="indexbizhealth"></div>
</div>
</div>
<div class="icon-banner-btn" id="indexBannerBtn"></div>
</div>
</div>
<div class="topo-panel">
<div class="main">
<div class="layui-card">
<div class="hide"><a id="index_topoview_alarm_info">查看告警</a></div>
<div class="hide"><a id="index_topo_view_childtop">下探子拓扑</a></div>
<div class="topo-menu">
<!--悬浮提示-->
<div class="modeRight2 touch-none" id="mxgraph_index_node_tipsInfo"></div>
</div>
<!--画布主区域-->
<div class="layui-card-body mxgraph-view hide" id="viewGraphContainer"></div>
<!--新拓扑画布-->
<div class="layui-card-body mxgraph-view-new hide" id="newViewGraphContainer">
<iframe src=""></iframe>
</div>
</div>
</div>
<div class="right">
<div class="content">
<div class="layui-card">
<div class="layui-card-body">
<div class="gj-detail">
<div class="gj-detail-sum" id="indexRightGjSum">
<span>告警总量 ：</span>
<!--<ul id="alarm_total">
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>-->
<span id="alarm_total" style="font-weight: bold;font-size: 25px;">0</span>
</div>
<ul class="gj-detail-info">
<li class="alarm_levels" data-level="3">
<b id="alarm_serious">0</b>
<p>严重告警</p>
</li>
<li class="alarm_levels" data-level="2">
<b id="alarm_important">0</b>
<p>重要告警</p>
</li>
<li class="alarm_levels" data-level="1">
<b id="alarm_commonly">0</b>
<p>一般告警</p>
</li>
<li>
<b id="alarm_upgrade">0</b>
<p>升级告警</p>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-card">
<!--活动告警-->
<div class="layui-card">
<div class="layui-card-header layui-table-link">实时告警动态
<a class="layui-table-link" id="more_active_alarms">更多</a></div>
<div class="layui-card-body">
<ul class="gj-list" id="indexActiveAlarmList"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<!--活动告警-->
<script id="indexActiveAlarmListTpl" type="text/html">
{{# layui.each(d, function(index, item){ }}
{{# var alarmLevelClas = 'warn-normal'}}
{{# if(item.alarmLevel == 3){ alarmLevelClas = 'warn-worst' } }}
{{# if(item.alarmLevel == 2){ alarmLevelClas = 'warn-worse' } }}
<li data-id="{{item.id}}" title="{{item.alarmContent}}">
<i class="icon-level {{alarmLevelClas}}">{{index+1}}</i>
<span>{{item.updateTime}}</span>
<p>{{item.alarmContent}}</p>
</li>
{{# }); }}
</script>
<!--业务健康情况-->
<script id="indexbizhealthTpl" type="text/html">
{{# layui.each(d, function(index_, item_){ }}
<div class="swiper-slide">
<div class="index-banner-main">
{{# layui.each(d[index_], function(index, item){ }}
{{# var bizClas = 'icon-banner-zc',healthDesc ="状态正常"}}
{{# if(item.health == 1){ bizClas = 'icon-banner-bad';healthDesc ="严重问题"} }}
{{# if(item.health == 2){ bizClas = 'icon-banner-warning';healthDesc ="一般问题" } }}
<div class="index-banner-item" id="{{item.busId}}" data-id="{{item.busId}}" data-topoid="{{item.jtopoId}}"
data-index-banner-item="type">
<i class="{{bizClas}}"></i>
<div>
<span>告警量：{{item.alarmNum}}</span>
<p>{{item.busTypeName}}</p>
</div>
</div>
{{# }); }}
</div>
</div>
{{# }); }}
</script>
<script>
layui.use('main-biz-turn', function (fn) {
fn();
});
</script>
... ...