|
|
|
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"></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">ဆ</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();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}); |
...
|
...
|
|
