Authored by wangtao

Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w…

…eb into master-500-dev
Showing 38 changed files with 3811 additions and 677 deletions
... ... @@ -321,7 +321,8 @@ layui.define(['xmSelect', 'md5'], function (exports) {
resTypeSelect: function (targtetId, callback, ajaxParams) {
var options = "<option value=''>=资源类型=</option>";
admin.req(Object.assign({
url: this.domainName + '/api-web/home/restype/getAllResType'
url: this.domainName + '/api-web/home/restype/getAllResType',
async: false
}, ajaxParams)).done(function (res) {
var reslist = res.data;
$.each(reslist, function (i, v) {
... ... @@ -446,6 +447,7 @@ layui.define(['xmSelect', 'md5'], function (exports) {
var accessToken = sessions.getToken()['access_token'];
$.ajax({
url: obj.domainName + '/api-web/manage/protocol/page?page=1&limit=10000&access_token=' + accessToken,
async: false,
success: function (res) {
if (res && res.data) {
res.data.forEach(function (v) {
... ...
... ... @@ -336,6 +336,80 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
});
},
/**
* 渲染文本,指定列数展示,key、value展示的方式
* @param targetId html存放目标id
* @param resId 资源id
* @param kpiId 指标id,多个指标逗号隔开
* @param cols 指定列(一组key value为一列)
*/
anapshotRenderTextCols: function (targetId,data, cols, isBasic) {
var flags = "";
var kpiIdList = "";
if (data.length > 0) {
var dataArr = common.splieceGroup(data, cols);
var li = "";
//先遍历分组后的,在遍历组内的数组
$.each(dataArr, function (i, v) {
var span = '';
$.each(v, function (j, ar) {
var valueStr = '';
var titleStr = '';
//end lsq 2022-06-08
if (ar.kpiId == 'KPIE13DD9A3') {
valueStr = laytpl($("#linkStateDetailTpl").html()).render({linkStateList: ar.value});
} else if (ar.value != 'null') {
if (ar.value == 'Infinity%') {
valueStr = ''
} else {
valueStr = ar.kpiValue;
}
titleStr = valueStr;
}
if (ar.kpiId == 'KPIE13DD9A3' || ar.kpiId == 'KPI02786E8D') {
//获取flag
$.each(ar.value, function (i, v) {
flags += v.flag + ",";
});
if (flags != '') {
flags = flags.substring(0, flags.length - 1);
}
//获取kpi
kpiIdList += ar.kpiId + ",";
}
//start lsq 更改下探图标的属性值 2022-06-08
var tips = '<a class="detail_row_menu hide" data-id=' + ar.kpiId + ' data-flag=' + ar.flag +
' data-name=' + ar.kpiName + ' data-kpiname=' + ar.kpiName + ' data-iswarning=1 data-ident=1' +
' data-trend=0 data-unit="" data-hidem="hidem" data-nature="true" ' +
' data-restype=' + (ar.resType ? ar.resType : "") + '>\n' +
'<img style="width: 17px;height: 17px;" src="/src/style/img/icon_row_menu.png">\n' +
'</a>'
//end lsq 2022-06-08
var menuId = "";
if (ar.kpiId == 'KPIE13DD9A3' || ar.kpiId == 'KPI02786E8D' ) {
ar.kpiName = ar.kpiName + tips;
menuId = "id=\"" + targetId + "_detail_row_menu\" class='statusMenu'";
}
var $html = addIconByValue(valueStr);
var resStyle = obj.alarmEleMatchStyle(ar.flag, ar.kpiId);
span += ' <span ' + menuId + ' style="text-align:left;width:40%">' + ar.kpiName + '</span>' +
'<span title="' + titleStr + '" style="width:60%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' + resStyle + '">'
+ $html + valueStr + '</span>';
//补充空白区域
if (v.length < cols) {
var l = cols - v.length;
var appendSpan = '';
for (var n = 0; n < l; n++) {
appendSpan += "<span></span><span></span>";
}
span += appendSpan;
}
});
li += '<li>' + span + '</li>'
});
$("#" + targetId).html(li);
}
},
/**
*仪表盘数据格式
* @param targetId 仪表盘所在区域ID
* @param resId 资源ID
... ... @@ -596,6 +670,36 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
});
},
snapshotRenderResHealth: function (data){
var clas = 'res-state-pie--good';
if (data.icon == 'worst') {
clas = 'res-state-pie--bad';
}
if (data.icon == 'worse') {
clas = 'res-state-pie--middle';
}
var reslt = "优", yz = '0', yb = '0', zy = '0';
if (data.state) {
reslt = data.state;
}
if (data.yz) {
yz = data.yz == 'null' || '' ? 0 : data.yz;
}
if (data.zy) {
zy = data.zy == 'null' || '' ? 0 : data.zy;
}
if (data.yb) {
yb = data.yb == 'null' || '' ? 0 : data.yb;
}
var html = '<div class="res-state-pie ' + clas + '">' + reslt + '</div>' +
' <ul>' +
' <li>严重告警:' + yz + '</li>' +
' <li>重要告警:' + zy + '</li>' +
' <li>一般告警:' + yb + '</li>' +
' </ul>';
$("#hostminicomputerpartition_resstate").html(html);
},
/**
* 资源状态
... ... @@ -2172,6 +2276,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
});
},
/**
* 柱状图+折线图
* @params targetId 目标dom
... ... @@ -2620,20 +2726,20 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
'<input type="radio" name="noticeFlag" value="true" title="是">&nbsp;是' +
'<input type="radio" name="noticeFlag" value="false" title="否" checked="" style="margin-left: 20px;">&nbsp;否</div> ');
}
//start lsq 添加状态指标下探 2022-06-09
$("[lay-id='" + tableId + "']").find(".layui-table-cell").hover(function () {
var $that = $(this)
var $btn = $that.find(".detail_row_menu");
if ($btn.length > 0) {
$(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
$btn.removeClass("hide");
}
})
filterSuppressMonitor(resId);
//end lsq 2022-06-09
}
})
});
//start lsq 添加状态指标下探 2022-06-09
$("[lay-id='" + tableId + "']").find(".layui-table-cell").hover(function () {
var $that = $(this)
var $btn = $that.find(".detail_row_menu");
if ($btn.length > 0) {
$(".layui-card-body").find(".detail_row_menu:not(.hide)").addClass("hide")
$btn.removeClass("hide");
}
})
filterSuppressMonitor(resId);
//end lsq 2022-06-09
}
});
if ($('.layui-show').find(".detail-left-panel").length == 0) {
... ... @@ -2742,6 +2848,47 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
}
},
/**
* 活动告警
* @param tableId
* @param resId
*/
snapshotRenderActiveAlarms: function (title,tableId, data) {
//start lsq 状态信息的状态也增加下探 202-06-08
let statusF = false;//是否为状态信息
//end lsq 2022-06-08
$('#' + tableId).prev().text(title)
var alarmlist = table.render({
elem: '#' + tableId
, data: data
, cols: [[
{
field: 'LAY_INDEX', title: '序号', align: 'center', width: 100,
templet: function (d) {
return '<span>' + d.LAY_INDEX + '</span>';
}
}
, {
field: 'alarmLevel', title: '告警级别', align: 'center', width: 140, sort: true,
templet: function (d) {
if (d.alarmLevel == 3) {
return '<span class="layui-table-warn" style="width: 100%;">严重</span>';
} else if (d.alarmLevel == 2) {
return '<span class="layui-table-close" style="width: 100%;">重要</span>';
} else if (d.alarmLevel == 1) {
return '<span class="layui-table-normal" style="width: 100%;">一般</span>';
}
}
}
, {field: 'alarmContent', title: '告警内容', align: 'center'}
, {
field: 'kpiName', title: '指标名称', align: 'center', width: '20%',
}
, {field: 'updateTime', title: '告警时间', align: 'center', width: '15%'}
]],
});
},
/**
* 虚拟化虚拟机列表
* @param tableId
* @param resId
... ... @@ -3329,6 +3476,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`;
//lsq 2022-04-25 增加ping详情提交按钮
title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`;
title += `<a class="layui-icon res-view-history" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="快照历史记录" style="top: -3px;float: right;"> <img width="20" src="/src/style/img/snapshothistory.png" ></a>`;
title += `<a class="layui-icon res-view-addSnapshot" data-id=${resId} lay-tips="创建快照" style="top: -3px;float: right; margin-right: 10px"> <img width="20" src="/src/style/img/snapshotadd.png" ></a>`;
if (resCategory === 'share' && hardwareFlag.endsWith("Y")) {
/*
title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont">&#XE517;</i></a>`;
... ... @@ -3354,6 +3503,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`;
//lsq 2022-04-25 增加ping详情提交按钮
title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`;
title += `<a class="layui-icon res-view-history" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="快照历史记录" style="top: -3px;float: right;"> <img width="20" src="/src/style/img/snapshothistory.png" ></a>`;
title += `<a class="layui-icon res-view-addSnapshot" data-id=${resId} lay-tips="创建快照" style="top: -3px;float: right; margin-right: 10px"> <img width="20" src="/src/style/img/snapshotadd.png" ></a>`;
if (resCategory === 'share' && hardwareFlag.endsWith("Y")) {
/*
title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont">&#XE517;</i></a>`;
... ... @@ -3645,7 +3796,39 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
});
});
//end lsq 2022-04-24
$('a.res-view-addSnapshot').unbind('click').on('click', function () {
var resId = $(this).data('id');
layer.confirm('将创建该资源的所有快照信息,请确认', {
btn: ['确定', '取消'] //按钮
}, function () {
admin.req({
url: common.domainName + '/api-web/snapshot/his/add?access_token=' + layui.sessions.getToken().access_token +'&resId=' + resId
, type: 'get'
, done: function (res) {
if (res.success) {
layer.msg('操作成功!', {offset: '15px', icon: 1, time: 2000});
} else {
layer.msg(res.msg, {offset: '15px', icon: 7, time: 2000});
}
}
});
});
});
$('a.res-view-history').unbind('click').on('click', function () {
let name = $(this).data('resname')+' |'+$(this).data('restypename')+' |'+$(this).data('ip')+' |'+'历史快照数据';
let paramStr = '?resId=' + $(this).data('id');
layer.open({
title: [name, 'font-size:18px;'],
type: 2,
area: ['65%', '90%'],
shadeClose: true,//开启遮罩层
id: 'res-history',
content: ['/vue3/index.html#/vue3/snapshot/history' + paramStr, 'no'],
cancel: function () {
clearTimeout();
}
});
});
// 查看资产配置信息
$('a.res-view-assets-details').unbind('click').on('click', function () {
var $that = $(this);
... ...
/** 指标组新增 */
layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'laydate', 'element', 'admin', 'kpiIndex', 'resourcetype'], function (exports) {
var $ = layui.$;
var form = layui.form;
var table = layui.table;
var common = layui.common;
var admin = layui.admin;
var view = layui.view;
var element = layui.element;
// 对外暴露的接口
exports('kpiflagEdit', function (data) {
var flagId = data.id ? data.id : '';
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
// 表格数据
var kpiFlagTableData = [];
var resTypeTableData = [];
var appTableData = [];
var serverTableData = [];
// 加载遮罩
var loading;
// 如果是编辑,回显数据
var flag = {
id: '',
flag: '',
name: '',
remark: '',
bindResTypeCount: 0,
bindAppCount: 0,
bindServerCount: 0,
bindList: []
};
if (flagId) {
$.ajax({
url: common.domainName + '/api-web/manage/Kpiflag/getByFlagId?access_token=' + accessToken + '&flagId=' + flagId,
type: 'get',
success: function (res) {
flag = res.object;
form.val('form-flag-edit', res.object);
kpiFlagTableData = res.data;
reloadKpiFlagTable();
}
});
admin.req({
url: domainName + '/api-web/manage/restype/list',
data: {
flagId: flagId
}
}).done(function (response) {
resTypeTableData = response.data;
reloadResTypeTable();
});
admin.req({
url: domainName + '/api-web/manage/application/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
}).done(function (response) {
appTableData = response.data;
reloadAppTable();
});
admin.req({
url: domainName + '/api-web/manage/server/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
}).done(function (response) {
serverTableData = response.data;
reloadServerTable();
});
var $ = layui.$;
var form = layui.form;
var table = layui.table;
var common = layui.common;
var admin = layui.admin;
var view = layui.view;
var element = layui.element;
// 对外暴露的接口
exports('kpiflagEdit', function (data) {
var flagId = data.id ? data.id : '';
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
// 表格数据
var kpiFlagTableData = [];
var resTypeTableData = [];
var appTableData = [];
var serverTableData = [];
// 加载遮罩
var loading;
// 如果是编辑,回显数据
var flag = {
id: '',
flag: '',
name: '',
remark: '',
bindResTypeCount: 0,
bindAppCount: 0,
bindServerCount: 0,
bindList: []
};
if (flagId) {
$.ajax({
url: common.domainName + '/api-web/manage/Kpiflag/getByFlagId?access_token=' + accessToken + '&flagId=' + flagId,
type: 'get',
success: function (res) {
flag = res.object;
form.val('form-flag-edit', res.object);
kpiFlagTableData = res.data;
reloadKpiFlagTable();
}
});
admin.req({
url: domainName + '/api-web/manage/restype/list',
data: {
flagId: flagId
}
}).done(function (response) {
resTypeTableData = response.data;
reloadResTypeTable();
});
admin.req({
url: domainName + '/api-web/manage/application/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
element.render('collapse');
}).done(function (response) {
appTableData = response.data;
reloadAppTable();
});
admin.req({
url: domainName + '/api-web/manage/server/page',
data: {
page: -1,
limit: -1,
flagId: flagId
}
}).done(function (response) {
serverTableData = response.data;
reloadServerTable();
});
}
element.render('collapse');
form.render();
// 刷新指标表格
var kpiflagTable = table.render({
elem: '#kpiflag-edit-table'
, cellMinWidth: 80
, limit: 10
, even: true
, data: kpiFlagTableData
, cols: [[{
field: 'kpiName', title: '指标名称', align: 'center', templet: function (d) {
return d.kpi.kpiName
}
}, {
field: 'kpiIdent', title: '指标分类', align: 'center',
templet: function (d) {
switch (d.kpi.kpiIdent) {
case '0':
return '基本指标';
case '1':
return '性能指标';
case '2':
return '状态指标';
case '3':
return '告警指标';
default:
return '';
}
}
},
{
title: '唯一标志', align: 'center',
templet: function (d) {
var radioDom = $('<input type="checkbox" name="isUnique" data-index="' + (d.LAY_INDEX-1) + '" lay-skin="switch" lay-text="是|否" lay-filter="switchIsUnique">') ;
var isUnique = kpiFlagTableData[(d.LAY_INDEX-1)].isUnique;
if (isUnique === '1') { //当是1时,表示时唯一标志
radioDom.attr('checked', true);
}else{
radioDom.attr('checked', false);
}
return radioDom.prop('outerHTML');
}
},
{
title: '排序', align: 'center',
templet: function (d) {
var selectDom = $('<select class="defaultSortSel" class="layui-select" data-index="' + (d.LAY_INDEX-1) + '" lay-filter="select-kpiflag-table-isSort">' +
'<option>无</option>' +
'<option>正序</option>' +
'<option>倒序</option>' +
'</select>');
var defaultSort = kpiFlagTableData[(d.LAY_INDEX-1)].defaultSort;
if (defaultSort == 'asc') {
selectDom.find('option:contains("正序")').attr('selected', 'selected');
} else if (defaultSort == 'desc') {
selectDom.find('option:contains("倒序")').attr('selected', 'selected');
} else {
selectDom.find('option:contains("无")').attr('selected', 'selected');
}
return selectDom.prop('outerHTML');
}
}, {
field: 'sort', title: '列表顺序', align: 'center',
templet: function (d) {
var inputDom = $('<input id="txt-kpiflag-table-sort-' + (d.LAY_INDEX-1) + '" data-index="' + (d.LAY_INDEX-1) + '" type="number" autocomplete="off" class="layui-input txt-kpiflag-table-sort">');
var sort = kpiFlagTableData[(d.LAY_INDEX-1)].sort;
if (sort != null) {
inputDom.attr("value", sort);
}
return inputDom.prop('outerHTML');
}
},
{field: 'createUser', title: '创建人', align: 'center'},
{field: 'createTime', title: '创建时间', align: 'center'},
{
title: '操作',width: 100, align: 'center', templet: '<div><span data-index="{{(d.LAY_INDEX-1)}}" class="link link-kpiflag-delete">' +
'<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>'
}]],
done: function (res, curr, count) {
form.render();
// 刷新指标表格
var kpiflagTable = table.render({
elem: '#kpiflag-edit-table'
, cellMinWidth: 80
, limit: 10
, even: true
, data: kpiFlagTableData
, cols: [[{
field: 'kpiName', title: '指标名称', align: 'center', templet: function (d) {
return d.kpi.kpiName
}
}, {
field: 'kpiIdent', title: '指标分类', align: 'center',
templet: function (d) {
switch (d.kpi.kpiIdent) {
case '0':
return '基本指标';
case '1':
return '性能指标';
case '2':
return '状态指标';
case '3':
return '告警指标';
default:
return '';
}
}
}, {
title: '唯一标志', align: 'center',
templet: function (d) {
var radioDom = $('<form class="layui-form">' +
'<div class="layui-form-item layui-form-item-flex"><div class="layui-input-block input-flex-1"><input type="radio" data-index="' + d.LAY_TABLE_INDEX + '" name="isUnique" lay-filter="rdo-kpiflag-table-isUnique"></div></div>' +
'</form>');
if (d.isUnique === '1') {
radioDom.find('input[type="radio"]').attr('checked', true);
}
return radioDom.prop('outerHTML');
}
}, {
title: '是否排序指标', align: 'center',
templet: function (d) {
var selectDom = $('<select data-index="' + d.LAY_TABLE_INDEX + '" lay-filter="select-kpiflag-table-isSort">' +
'<option>是</option>' +
'<option>否</option>' +
'</select>')
if (d.sort != '' && d.sort != null) {
selectDom.find('option:contains("是")').attr('selected', 'selected');
} else {
selectDom.find('option:contains("否")').attr('selected', 'selected');
}
return selectDom.prop('outerHTML');
}
}, {
field: 'sort', title: '列表顺序', align: 'center',
templet: function (d) {
var inputDom = $('<input id="txt-kpiflag-table-sort-' + d.LAY_TABLE_INDEX + '" data-index="' + d.LAY_TABLE_INDEX + '" type="number" autocomplete="off" class="layui-input txt-kpiflag-table-sort">');
if (d.sort != '' && d.sort != null) {
inputDom.attr("value", d.sort);
} else {
inputDom.attr('disabled', true);
}
return inputDom.prop('outerHTML');
}
}, {
title: '操作',
align: 'center',
templet: '<div><span data-index="{{d.LAY_TABLE_INDEX}}" class="link link-kpiflag-delete">' +
'<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>'
}]],
done: function (res, curr, count) {
form.render();
// 是否排序下拉框改变事件
form.on('select(select-kpiflag-table-isSort)', function (data) {
var index = $(data.elem).data('index');
if (data.value === '是') {
$('#txt-kpiflag-table-sort-' + index).attr('disabled', false);
} else {
kpiFlagTableData[index].sort = '';
$('#txt-kpiflag-table-sort-' + index).val('');
$('#txt-kpiflag-table-sort-' + index).attr('disabled', true);
}
});
// radio选择事件
form.on('radio(rdo-kpiflag-table-isUnique)', function (data) {
for (var i = 0; i < kpiFlagTableData.length; i++) {
kpiFlagTableData[i].isUnique = '0';
}
kpiFlagTableData[$(data.elem).data('index')].isUnique = '1';
});
// 排序输入框输入事件
$('.txt-kpiflag-table-sort').change(function () {
kpiFlagTableData[$(this).data('index')].sort = $(this).val();
});
// 删除事件
$('.link-kpiflag-delete').click(function () {
kpiFlagTableData.splice($(this).data('index'), 1);
reloadKpiFlagTable();
});
}
$(".kpiflag-edit-table .layui-table-body,.kpiflag-edit-table .layui-table-box,.kpiflag-edit-table .layui-table-cell").css('overflow', 'visible');
// 排序下拉框改变事件
form.on('select(select-kpiflag-table-isSort)', function (data) {
var index = $(data.elem).data('index');
var defaultSort = 'none';
if (data.value === '正序') {
defaultSort = 'asc';
} else if (data.value === '倒序') {
defaultSort = 'desc';
}
kpiFlagTableData[index].defaultSort = defaultSort;
});
// 资源类型绑定表格
var resTypeBindTable = table.render({
elem: '#table-flag-bind-retype'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: resTypeTableData
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'resTypeName', title: '名称', align: 'center', sort: true, width: '280'
}, {
field: 'resTypeCode', title: '编码', align: 'center', sort: true, width: '390'
}, {
field: 'resTypeDesc', title: '类别', align: 'center', sort: true, width: '280'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '275'
}, {
title: '操作', align: 'center', fixed: 'right', width: '170',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-restype-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-restype-delete').click(function () {
resTypeTableData.splice($(this).data('index'), 1);
reloadResTypeTable();
});
}
//唯一标志开关事件
form.on('switch(switchIsUnique)', function(data){
if (this.checked){
kpiFlagTableData[$(data.elem).data('index')].isUnique = '1';
}else{
kpiFlagTableData[$(data.elem).data('index')].isUnique = '0';
}
});
// 应用绑定表格
var appBindTable = table.render({
elem: '#table-flag-bind-app'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'appCode', title: '应用编号', align: 'center', sort: true, width: '240'
}, {
field: 'appName', title: '应用名称', align: 'center', sort: true, width: '240'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '193',
templet: function (d) {
return d.busType.busTypeName;
}
}, {
field: 'appDesc', title: '应用描述', align: 'center', sort: true, width: '340'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '190'
}, {
title: '操作', align: 'center', fixed: 'right', width: '190',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-app-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-app-delete').click(function () {
appTableData.splice($(this).data('index'), 1);
reloadAppTable();
});
}
// 排序输入框输入事件
$('.txt-kpiflag-table-sort').change(function () {
kpiFlagTableData[$(this).data('index')].sort = $(this).val();
});
// 服务绑定表格
var serverBindTable = table.render({
elem: '#table-flag-bind-server'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'serverCode', title: '服务编号', align: 'center', sort: true, width: '190'
}, {
field: 'serverName', title: '服务名称', align: 'center', sort: true, width: '190'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.busType.busTypeName;
}
}, {
field: 'appName', title: '所属应用', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.appName;
}
}, {
field: 'serverDesc', title: '服务描述', align: 'center', sort: true, width: '300'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '160'
}, {
title: '操作', align: 'center', fixed: 'right', width: '173',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-server-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-server-delete').click(function () {
serverTableData.splice($(this).data('index'), 1);
reloadServerTable();
});
}
// 删除事件
$('.link-kpiflag-delete').click(function () {
kpiFlagTableData.splice($(this).data('index'), 1);
reloadKpiFlagTable();
});
// 绑定资源类型
$('#btn-kpi-flag-restype-bind').click(function () {
//先关闭已经打开的资源类型页签
$('[lay-id="/baseconfig/resourcetype/index"]').find('.layui-tab-close').trigger('click');
var resourcetype = layui.resourcetype();
common.openWin('/baseconfig/resourcetype/index', '选择资源类型', {}, ['选择', '取消'], function () {
var checks = resourcetype.getResTypeChecks();
$.each(checks, function (index, value) {
var flag = true;
$.each(resTypeTableData, function (i, v) {
if (value.resTypeId === v.resTypeId) {
flag = false;
return;
}
});
if (flag) {
resTypeTableData.push(value);
}
});
reloadResTypeTable();
return true;
}, null, ['90%', '90%'])
}
});
// 资源类型绑定表格
var resTypeBindTable = table.render({
elem: '#table-flag-bind-retype'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: resTypeTableData
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'resTypeName', title: '名称', align: 'center', sort: true
}, {
field: 'resTypeCode', title: '编码', align: 'center', sort: true
}, {
field: 'resTypeDesc', title: '类别', align: 'center', sort: true
},{field: 'createUser', title: '创建人', align: 'center'
}, {
field: 'createTime', title: '创建时间', align: 'center'
}, {
title: '操作', align: 'center', fixed: 'right', width: '170',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-restype-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-restype-delete').click(function () {
resTypeTableData.splice($(this).data('index'), 1);
reloadResTypeTable();
});
}
});
// 绑定应用
$('#btn-kpi-flag-app-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/application/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/application/index', '选择应用', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('application-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(appTableData, function (i, v) {
if (value.appId === v.appId) {
flag = false;
return;
}
});
if (flag) {
appTableData.push(value);
}
});
reloadAppTable();
return true;
}, null, ['1500px', '90%'])
// 应用绑定表格
var appBindTable = table.render({
elem: '#table-flag-bind-app'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'appCode', title: '应用编号', align: 'center', sort: true, width: '240'
}, {
field: 'appName', title: '应用名称', align: 'center', sort: true, width: '240'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '193',
templet: function (d) {
return d.busType.busTypeName;
}
}, {
field: 'appDesc', title: '应用描述', align: 'center', sort: true, width: '340'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '190'
}, {
title: '操作', align: 'center', fixed: 'right', width: '190',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-app-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-app-delete').click(function () {
appTableData.splice($(this).data('index'), 1);
reloadAppTable();
});
}
});
// 服务绑定表格
var serverBindTable = table.render({
elem: '#table-flag-bind-server'
, cellMinWidth: 80
, limit: 9999
, even: true
, data: []
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
}
, cols: [[{
field: 'serverCode', title: '服务编号', align: 'center', sort: true, width: '190'
}, {
field: 'serverName', title: '服务名称', align: 'center', sort: true, width: '190'
}, {
field: 'busTypeName', title: '所属业务', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.busType.busTypeName;
}
}, {
field: 'appName', title: '所属应用', align: 'center', sort: true, width: '190',
templet: function (d) {
return d.application.appName;
}
}, {
field: 'serverDesc', title: '服务描述', align: 'center', sort: true, width: '300'
}, {
field: 'createTime', title: '创建时间', align: 'center', sort: true, width: '160'
}, {
title: '操作', align: 'center', fixed: 'right', width: '173',
toolbar:
'<div>' +
' <span data-index="{{d.LAY_TABLE_INDEX}}" class="layui-btn layui-btn-xs layui-btn-normal btn-flag-bind-server-delete" title="取消绑定">' +
'<i class="layui-icon layui-icon-unlink"></i></span>' +
'</div>'
}]],
done: function (res, curr, count) {
$('.btn-flag-bind-server-delete').click(function () {
serverTableData.splice($(this).data('index'), 1);
reloadServerTable();
});
}
});
// 绑定服务
$('#btn-kpi-flag-server-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/server/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/server/index', '选择服务', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('server-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(serverTableData, function (i, v) {
if (value.serverId === v.serverId) {
flag = false;
return;
}
});
if (flag) {
serverTableData.push(value);
}
});
reloadServerTable();
return true;
}, null, ['1500px', '90%'])
// 绑定资源类型
$('#btn-kpi-flag-restype-bind').click(function () {
//先关闭已经打开的资源类型页签
$('[lay-id="/baseconfig/resourcetype/index"]').find('.layui-tab-close').trigger('click');
var resourcetype = layui.resourcetype();
common.openWin('/baseconfig/resourcetype/index', '选择资源类型', {}, ['选择', '取消'], function () {
var checks = resourcetype.getResTypeChecks();
$.each(checks, function (index, value) {
var flag = true;
$.each(resTypeTableData, function (i, v) {
if (value.resTypeId === v.resTypeId) {
flag = false;
return;
}
});
if (flag) {
// value.createUser = form.val('form-flag-edit').createUser;
// value.createTime = common.getToday('');
resTypeTableData.push(value);
}
});
reloadResTypeTable();
return true;
}, null, ['90%', '90%'])
});
// 绑定应用
$('#btn-kpi-flag-app-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/application/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/application/index', '选择应用', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('application-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(appTableData, function (i, v) {
if (value.appId === v.appId) {
flag = false;
return;
}
});
if (flag) {
appTableData.push(value);
}
});
reloadAppTable();
return true;
}, null, ['1500px', '90%'])
});
// 绑定服务
$('#btn-kpi-flag-server-bind').click(function () {
//先关闭已经打开的应用页签
$('[lay-id="/baseconfig/server/index"]').find('.layui-tab-close').trigger('click');
common.openWin('/baseconfig/server/index', '选择服务', {}, ['选择', '取消'], function () {
var checks = table.checkStatus('server-table').data;
$.each(checks, function (index, value) {
var flag = true;
$.each(serverTableData, function (i, v) {
if (value.serverId === v.serverId) {
flag = false;
return;
}
});
if (flag) {
serverTableData.push(value);
}
});
reloadServerTable();
return true;
}, null, ['1500px', '90%'])
});
// 刷新指标表格
function reloadKpiFlagTable() {
kpiflagTable.reload({
page: {curr: 1},
data: kpiFlagTableData
});
}
// 刷新指标表格
function reloadKpiFlagTable() {
kpiflagTable.reload({
page: {curr: 1},
data: kpiFlagTableData
});
}
// 刷新绑定资源类型表格
function reloadResTypeTable() {
$('#txt-flag-bind-resTypeCount').html(resTypeTableData.length);
resTypeBindTable.reload({
page: {curr: 1},
data: resTypeTableData
});
}
// 刷新绑定资源类型表格
function reloadResTypeTable() {
$('#txt-flag-bind-resTypeCount').html(resTypeTableData.length);
resTypeBindTable.reload({
page: {curr: 1},
data: resTypeTableData
});
}
// 刷新绑定应用表格
function reloadAppTable() {
$('#txt-flag-bind-appCount').html(appTableData.length);
appBindTable.reload({
page: {curr: 1},
data: appTableData
});
}
// 刷新绑定服务表格
function reloadServerTable() {
$('#txt-flag-bind-serverCount').html(serverTableData.length);
serverBindTable.reload({
page: {curr: 1},
data: serverTableData
});
}
// 刷新绑定应用表格
function reloadAppTable() {
$('#txt-flag-bind-appCount').html(appTableData.length);
appBindTable.reload({
page: {curr: 1},
data: appTableData
});
// 表单提交事件
form.on('submit(form-flag-edit)', function (data) {
loading = layer.load(2);
var flag = {
id: flagId,
flag: '',
name: '',
remark: '',
dimension: '',
kpiFlagList: kpiFlagTableData,
bindList: []
};
$.each(resTypeTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.resTypeId,
bindType: '1',
bindCode: v.resTypeCode
});
});
$.each(appTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.appId,
bindType: '2'
});
});
$.each(serverTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.serverId,
bindType: '3'
});
});
Object.assign(flag, form.val('form-flag-edit'));
admin.req({
url: common.domainName + '/api-web/manage/Kpiflag/saveFlag?access_token=' + accessToken,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(flag),
error: function () {
layer.close(loading);
}
// 刷新绑定服务表格
function reloadServerTable() {
$('#txt-flag-bind-serverCount').html(serverTableData.length);
serverBindTable.reload({
page: {curr: 1},
data: serverTableData
});
}).done(function (response) {
layer.close(loading);
if (response.success) {
layer.msg('保存成功', {icon: 1, timeout: 3000});
layer.closeAll('page');
table.reload('kpiflag_table', {
page: {
curr: 1
}
, where: {
access_token: accessToken,
keyWord: $("#kpiflag_keyword").val(),
dimension: $('select[name="dimension"]').val()
}
});
} else {
layer.msg('保存失败', {icon: 2, timeout: 3000});
}
});
return false;
});
// 表单提交事件
form.on('submit(form-flag-edit)', function (data) {
loading = layer.load(2);
var flag = {
id: flagId,
flag: '',
name: '',
remark: '',
kpiFlagList: kpiFlagTableData,
bindList: []
};
$.each(resTypeTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.resTypeId,
bindType: '1'
});
});
$.each(appTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.appId,
bindType: '2'
});
});
$.each(serverTableData, function (i, v) {
flag.bindList.push({
id: '',
flagId: '',
bindId: v.serverId,
bindType: '3'
});
});
Object.assign(flag, form.val('form-flag-edit'));
admin.req({
url: common.domainName + '/api-web/manage/Kpiflag/saveFlag?access_token=' + accessToken,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(flag),
error: function () {
layer.close(loading);
}
}).done(function (response) {
layer.close(loading);
if (response.success) {
layer.msg('保存成功', {icon: 1, timeout: 3000});
layer.closeAll('page');
table.reload('kpiflag_table', {
page: {
curr: 1
}
, where: {
access_token: accessToken,
keyWord: $("#kpiflag_keyword").val(),
}
});
} else {
layer.msg('保存失败', {icon: 2, timeout: 3000});
// 选择指标
$('#btn-kpiflag-kpi-bind').click(function () {
$('[lay-id="/baseconfig/kpi/index"]').find('.layui-tab-close').trigger('click');
layer.open({
title: '选择指标',
id: 'kpiIndexChooseHtml',
type: 1,
area: ['90%', '800px'],
btn: ['确定', '取消'],
scrollbar: true,
success: function () {
view(this.id).render('/baseconfig/kpi/index', {});
},
yes: function (index, layero) {
var kpiIndex = layui.kpiIndex({});
var data = kpiIndex.getData();
if (data.length > 0) {
$.each(data, function (i, e) {
var flag = true;
$.each(kpiFlagTableData, function (j, k) {
if (e.kpiId == k.kpiId) {
flag = false;
}
});
if (flag == true) {
kpiFlagTableData.push({
id: '',
flagId: flagId,
kpiId: e.kpiId,
defaultSort: e.defaultSort,
kpi: {
kpiId: e.kpiId,
kpiName: e.kpiName,
kpiIdent: e.kpiIdent
},
isUnique: '0',
sort: kpiFlagTableData.length+1,
createUser: form.val('form-flag-edit').createUser,
createTime: common.getToday('')
});
}
});
layer.close(index);
reloadKpiFlagTable();
} else {
layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000})
return false;
});
// 选择指标
$('#btn-kpiflag-kpi-bind').click(function () {
$('[lay-id="/baseconfig/kpi/index"]').find('.layui-tab-close').trigger('click');
layer.open({
title: '选择指标',
id: 'kpiIndexChooseHtml',
type: 1,
area: ['90%', '800px'],
btn: ['确定', '取消'],
scrollbar: true,
success: function () {
view(this.id).render('/baseconfig/kpi/index', {});
},
yes: function (index, layero) {
var kpiIndex = layui.kpiIndex({});
var data = kpiIndex.getData();
if (data.length > 0) {
$.each(data, function (i, e) {
var flag = true;
$.each(kpiFlagTableData, function (j, k) {
if (e.kpiId == k.kpiId) {
flag = false;
}
});
if (flag == true) {
kpiFlagTableData.push({
id: '',
flagId: flagId,
kpiId: e.kpiId,
kpi: {
kpiId: e.kpiId,
kpiName: e.kpiName,
kpiIdent: e.kpiIdent
},
isUnique: '0',
sort: ''
});
}
});
layer.close(index);
reloadKpiFlagTable();
} else {
layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000})
return false;
}
}
});
form.render();
});
}
}
});
form.render();
});
});
});
});
\ No newline at end of file
... ...
layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDetail"], function (exports) {
layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDetail", 'xmSelect'], function (exports) {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var admin = layui.admin;
var table = layui.table;
var xmSelect = layui.xmSelect;
var common = layui.common;
var domainName = common.domainName;
... ... @@ -13,12 +14,38 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
var accessToken = sessions.getToken()['access_token'];
var checkList = common.checkPermission(accessToken);
form.render();
//回车事件
$('#kpiflag_keyword').keydown(function (e) {
if (e.keyCode === 13) {
reloadTable();
}
});
//回车事件
$('#kpiflag_describe').keydown(function (e) {
if (e.keyCode === 13) {
reloadTable();
}
});
//回车事件
$('#kpiflag_kpis').keydown(function (e) {
if (e.keyCode === 13) {
reloadTable();
}
});
//回车事件
$('#kpiflag_restypes').keydown(function (e) {
if (e.keyCode === 13) {
reloadTable();
}
});
$("#kpiflagQueryBtn").unbind().on("click", function () {
reloadTable();
})
form.on('select(change)', function (data) {
reloadTable();
})
$("#addkpiflag").unbind().on("click", function () {
if ($.inArray('back:kpiflag:save', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
... ... @@ -44,29 +71,54 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
, where: {
access_token: accessToken,
keyWord: $("#kpiflag_keyword").val(),
describe: $("#kpiflag_describe").val(),
kpis: $("#kpiflag_kpis").val(),
restypes: $("#kpiflag_restypes").val(),
dimension: $('select[name="dimension"]').val()
}
, height: 'full-340'
, height: 'full-200'
, cellMinWidth: 80
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'
}
, limit: 10
, even: true
, cols: [[
{type: 'checkbox'}
, {field: 'index', title: '序号', align: 'center', type: 'numbers'}
, {
field: 'name', title: '名称', align: 'center', sort: true,
templet: '<div><span kpiflag-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span></div>'
field: 'name', title: '名称', align: 'center', sort: true,width: 200,
templet: '<div>' +
'<span kpiflag-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span>' +
'</div>'
}
, {field: 'flag', title: '标识', align: 'center', sort: true,width: 200}
, {field: 'describes', title: '指标组描述', align: 'left',width: 300}
, { field: 'dimension', title: '维度', align: 'center', width: 80, templet: `
<div>
{{#
if (d.dimension == '1D') {
}} <span>一维</span> {{#
}else{
}} <span>二维</span> {{#
}
}}
</div>
`
}
, {field: 'flag', title: '标识', align: 'center', sort: true}
, {field: 'remark', title: '备注', align: 'center'}
, {field: 'kpis', title: '绑定指标', align: 'left',width: 500}
, {field: 'restypes', title: '绑定资源类型', align: 'left',width: 300}
, {field: 'createUser', title: '创建人',width: 100, align: 'center'}
, {field: 'createTime', title: '创建时间', align: 'center',width: 180}
, {field: 'remark', title: '备注', align: 'left',width: 500}
, {
title: '操作',
align: 'center',
fixed: 'right',
width: 120,
templet: '<div><span kpiflag-data-delete="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">删除</span>'
width: 100,
templet: '<div>' +
'<button kpiflag-data-delete="{{d.id}}" data-flag="{{d.flag}}" class="layui-btn layui-btn-xs layui-btn-normal link-restypepage-delete" lay-tips="删除"><i class="layui-icon layui-icon-delete"></i></button>' +
'</div>'
}
]],
done: function (res, curr, count) {
... ... @@ -112,7 +164,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
return;
}
//确认提示框
layer.confirm('确认删除当前采集协议及协议参数吗?', {
layer.confirm('确认删除数据吗?', {
btn: ['确定', '取消'] //按钮
}, function () {
admin.req({
... ... @@ -142,9 +194,20 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
, where: {
access_token: accessToken,
keyWord: $("#kpiflag_keyword").val(),
describe: $("#kpiflag_describe").val(),
kpis: $("#kpiflag_kpis").val(),
restypes: $("#kpiflag_restypes").val(),
dimension: $('select[name="dimension"]').val()
}
});
}
//获取选中的数据
function getCheckData() {
return table.checkStatus('kpiflag_table').data;
}
return {getData: getCheckData};
});
});
\ No newline at end of file
... ...
... ... @@ -91,24 +91,27 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function
}
})
for (let nodeInfo of nodeInfoList) {
// lsq 详情页节电池样式修改 2022-08-08
htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}">
<div class="vs-title">
<p>${nodeInfo.nodeName}</p>
</div>
<div class="vs-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">
<div class="vs-icon"></div>
<div class="vs-flex">
<div class="vs-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">
<div class="vs-icon"></div>
</div>
<ul class="vs-info">
<li>
${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}
</li>
<li>
当前连接数: ${nodeInfo.currentConnections}
</li>
<li>
新增连接数: ${nodeInfo.newConnections}
</li>
</ul>
</div>
<ul class="vs-info">
<li>
${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}
</li>
<li>
当前连接数: ${nodeInfo.currentConnections}
</li>
<li>
新增连接数: ${nodeInfo.newConnections}
</li>
</ul>
</div>`
}
$vsDiv.html(htmlStr)
... ... @@ -168,27 +171,30 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function
}
})
for (let nodeInfo of nodeInfoList) {
// lsq 详情页节电池样式修改 2022-08-08
htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}">
<div class="vs-title">
<p>${nodeInfo.nodeName}</p>
</div>
<div class="node-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">
<div class="node-icon"></div>
<div class="vs-flex">
<div class="node-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">
<div class="node-icon"></div>
</div>
<ul class="vs-info">
<li>
${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}
</li>
<li>
当前连接数: ${nodeInfo.currentConnections}
</li>
<li>
新增连接数: ${nodeInfo.newConnections}
</li>
<li>
${nodeInfo.ipAddr}:${nodeInfo.port}
</li>
</ul>
</div>
<ul class="vs-info">
<li>
${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}
</li>
<li>
当前连接数: ${nodeInfo.currentConnections}
</li>
<li>
新增连接数: ${nodeInfo.newConnections}
</li>
<li>
${nodeInfo.ipAddr}:${nodeInfo.port}
</li>
</ul>
</div>`
}
$vsDiv.html(htmlStr)
... ...
... ... @@ -537,16 +537,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
resType: resType,
isSend: $('#notice_search_isSend').val()
};
var typeName = new Map();
typeName.set("10", "告警通知");
typeName.set("11", "告警消除");
//2021-10-15 添加合并通知 XuHaoJie
typeName.set("13", "合并通知");
typeName.set("20", "巡检报表通知");
typeName.set("30", "系统通知");
typeName.set("40", "工单通知");
typeName.set("99", "测试通知");
typeName.set("0", "测试通知");
//lsq 分类分组统计的x轴标签显示undefined修改 2022-08-08
$.ajax({
url: `${common.domainName}/api-web/notice/groupByType`,
method: 'GET',
... ... @@ -556,7 +547,8 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'xmSelect
var yData = [];
if (res && res.map) {
$.each(res.map.typeList, function (i, v) {
xData.push(typeName.get(v))
//lsq 分类分组统计的x轴标签显示undefined修改 2022-08-08
xData.push(v)
})
yData = res.map.countList;
}
... ...
... ... @@ -325,7 +325,20 @@ layui.define(['admin', 'form', 'table', 'element', 'sessions', 'common', 'echart
color: '#333',
show: true,
interval: 0,
rotate: 15
rotate: 15,
formatter: val => {
// 一行字数
const max = 6
// 标签长度
const valLength = val.length
// 换行数
const rowNum = valLength / 6
if (valLength > 6) {
return val.slice(0,5) + '...';
} else {
return val
}
}
},
axisLine: {
lineStyle: {
... ...
/** 指标组新增 */
layui.define(['table', 'form', 'laydate', 'common', 'sessions', 'laydate', 'element', 'admin', 'kpiIndex', 'resourcetype','kpiflagIndex'], function (exports) {
var $ = layui.$;
var form = layui.form;
var table = layui.table;
var common = layui.common;
var admin = layui.admin;
var view = layui.view;
var element = layui.element;
// 对外暴露的接口
exports('restypepageEdit', function (data) {
var id = data.id ? data.id : '';
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
// 表格数据
var restypepageFlagTableData = [];
// 指标自定义类型数据组装option
var restypekpitype;
//指标表格
var restypepageFlagTable;
// 加载遮罩
var loading;
// 如果是编辑,回显数据
var restypePageData = {
id: '',
resType: '',
os: '',
provider: '',
model: '',
protocol: ''
};
//初始化下拉框数据
initSelect();
//进入页面后第一次加载指标表格数据
loadRestypepageKpiFlagTable();
//获取指标自定义类型字典数据
getRestypePageKpiTypes();
/**
* 初始化下拉框数据
*
* */
function initSelect() {
common.resTypeSelect("restypepagekpi_select_resType", function () {
form.render("select");
});
common.renderCollProtocolSelect('restypepagekpiCollProtocol', function () {
form.render("select");
});
common.renderCollProtocolSelect('restypepagekpiCollProtocol');
//绑定厂商下拉选择
common.providerSelect("restypepagekpiProvider", function () {
form.render("select");
});
common.renderDdicSelect('restypepagekpiOs', 'os', function () {
form.render("select");
}, "=操作系统=");
// 根据id查询资源类型页面配置信息,在下拉框加载完成后,防止因未加载完成,造成回填异常
getrestypePageInfo(id);
}
/**
* 获取指标自定义类型字典数据
*
* */
function getRestypePageKpiTypes() {
var options = '';
admin.req({
url: common.domainName + '/api-web/manage/ddic/findSucDdics/restypepage_kpi_type',
type: 'POST',
async: false,
}).done(function (res) {
var list = res.data;
options += '<option value="">=请选择=</option>';
$.each(list, function (i, v) {
options += '<option value="' + v.ddicCode + '">' + v.ddicName + '</option>';
});
restypekpitype = options;
}).error(function (error) {
console.error(error);
});
}
/**
* 根据id查询资源类型页面配置信息
*
* */
function getrestypePageInfo(id) {
if (id){
$.ajax({
url: common.domainName + '/api-web/manage/restypePage/getById?access_token=' + accessToken + '&id=' + id,
type: 'get',
success: function (res) {
restypePageData = res.object;
form.val('form-restypepage-edit', res.object);
restypepageFlagTableData = res.object.restypePageFlags;
reloadRestypepageKpiFlagTable();
}
});
}
}
element.render('collapse');
form.render();
/**
* 加载指标表格数据
*
* */
function loadRestypepageKpiFlagTable(){
restypepageFlagTable = table.render({
elem: '#restypepage-edit-table'
, cellMinWidth: 80
, limit: 10
, even: true
, data: restypepageFlagTableData
, cols: [[
{field: 'index', title: '序号', align: 'center', type: 'numbers'},
{field: 'flagName', title: '指标组名称', align: 'center'},
{field: 'flagDesc', title: '指标组描述', align: 'center'},
{
title: '类型', align: 'center',
templet: function (d) {
var selectDom = $('<select class="typeSel" lay-search="" class="layui-select" data-index="' + (d.LAY_INDEX-1) + '" lay-filter="select-restypepagekpi-table-type">' +
restypekpitype +
'</select>');
var index = (d.LAY_INDEX-1);
var type = restypepageFlagTableData[index].type;
selectDom.find('option[value="'+type+'"]').attr('selected', 'selected');
return selectDom.prop('outerHTML');
}
},
{field: 'createUser', title: '创建人', align: 'center'},
{field: 'createTime', title: '创建时间', align: 'center'},
{
field: 'sort', title: '排序', align: 'center',
templet: function (d) {
var inputDom = $('<input id="txt-restypepagekpi-table-sort-' + (d.LAY_INDEX-1) + '" data-index="' + (d.LAY_INDEX-1) + '" type="number" autocomplete="off" class="layui-input txt-restypepagekpi-table-sort">');
if (d.sort != null) {
inputDom.attr("value", restypepageFlagTableData[(d.LAY_INDEX-1)].sort);
}
return inputDom.prop('outerHTML');
}
}, {
title: '操作',
width: 100,
align: 'center',
templet: '<div><span data-index="{{(d.LAY_INDEX-1)}}" class="link link-restypepagekpi-delete">' +
'<a class="layui-btn layui-btn-xs layui-btn-normal" title="删除"><i class="layui-icon"></i></a></span>'
}]],
done: function (res, curr, count) {
form.render();
$(".restypepage-edit-table .layui-table-body,.restypepage-edit-table .layui-table-box,.restypepage-edit-table .layui-table-cell").css('overflow', 'visible');
// 排序下拉框改变事件
form.on('select(select-restypepagekpi-table-type)', function (data) {
var index = $(data.elem).data('index');
restypepageFlagTableData[index].type = data.value;
});
// 排序输入框输入事件
$('.txt-restypepagekpi-table-sort').change(function () {
restypepageFlagTableData[$(this).data('index')].sort = $(this).val();
});
// 删除事件
$('.link-restypepagekpi-delete').click(function () {
restypepageFlagTableData.splice($(this).data('index'), 1);
reloadRestypepageKpiFlagTable();
});
}
});
}
// 刷新指标表格
function reloadRestypepageKpiFlagTable() {
restypepageFlagTable.reload({
page: {curr: 1},
data: restypepageFlagTableData
});
}
// 表单提交事件
form.on('submit(form-restypepage-edit)', function (data) {
loading = layer.load(2);
var restypePage = {
id: id,
resType: '',
os: '',
provider: '',
model: '',
protocol: '',
remark: '',
restypePageFlags: restypepageFlagTableData
};
Object.assign(restypePage, form.val('form-restypepage-edit'));
admin.req({
url: common.domainName + '/api-web/manage/restypePage/saveRestypePage?access_token=' + accessToken,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(restypePage),
error: function () {
layer.close(loading);
}
}).done(function (response) {
layer.close(loading);
if (response.success) {
layer.msg('保存成功', {icon: 1, timeout: 3000});
layer.closeAll('page');
table.reload('table-restypepage-list', {
page: {
curr: 1
}
, where: {
access_token: accessToken,
keyword: $("#restypepageQueryForm").find("input[name='keyword']").val(),
resType: $("#restypepageQueryForm").find("select[name='restypepageresType']").val(),
os: $("#restypepageQueryForm").find("select[name='restypepageos']").val(),
protocol: $("#restypepageQueryForm").find("select[name='restypepagecollProtocol']").val(),
provider: $("#restypepageQueryForm").find("select[name='restypepageprovider']").val(),
}
});
} else {
layer.msg('保存失败', {icon: 2, timeout: 3000});
}
});
return false;
});
// 选择指标
$('#btn-restypepage-kpi-bind').click(function () {
$('[lay-id="/baseconfig/kpiflag/index"]').find('.layui-tab-close').trigger('click');
layer.open({
title: '选择指标',
id: 'restypepageFlagIndexChooseHtml',
type: 1,
area: ['90%', '800px'],
btn: ['确定', '取消'],
scrollbar: true,
success: function () {
view(this.id).render('/baseconfig/kpiflag/index', {});
},
yes: function (index, layero) {
var kpiflagIndex = layui.kpiflagIndex({});
var data = kpiflagIndex.getData();
if (data.length > 0) {
$.each(data, function (i, e) {
console.log(JSON.stringify(e));
var flag = true;
$.each(restypepageFlagTableData, function (j, k) {
if (e.id == k.flagId) {
flag = false;
}
});
if (flag == true) {
restypepageFlagTableData.push({
flagName: e.name,
flagDesc: e.describes,
id: '',
pageId: id,
resType: restypePageData.resType,
flagDimension: e.dimension,
flagId: e.id,
type: 'base',
sort: restypepageFlagTableData.length+1,
createUser: form.val('form-restypepage-edit').createUser,
createTime: common.getToday('')
});
}
});
layer.close(index);
reloadRestypepageKpiFlagTable();
} else {
layer.msg("无选中的数据", {offset: '15px', icon: 7, time: 2000})
return false;
}
}
});
form.render();
});
});
});
\ No newline at end of file
... ...
layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTable', 'xmSelect'], function (exports) {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var admin = layui.admin;
var table = layui.table;
var common = layui.common;
var treeTable = layui.treeTable;
var xmSelect = layui.xmSelect;
exports('restypepageIndex', function () {
var sessions = layui.sessions;
var accessToken = sessions.getToken()['access_token'];
var domainName = common.domainName;
var restypepageTable;
//加载权限列表
var checkList = common.checkPermission(accessToken);
//初始化下拉框
initSelect();
//初始化事件
initEvent()
//初次加载表格
loadTable();
/**
* 初初始化事件
*
* */
function initEvent() {
// 回车搜索
$('form[lay-filter="form-restypepage-condition"] input').keydown(function (e) {
if (e.keyCode === 13) {
reloadTable();
}
});
//查询按钮点击事件
$("#restypepageQueryBtn").unbind().on("click", function () {
reloadTable();
})
//搜索下拉框change事件监听
form.on('select(change)', function (data) {
reloadTable();
})
// 添加资源类型页面配置信息
$('#btn-restypepage-add').click(function () {
if ($.inArray('back:restypepage:add', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
openEditHtml();
});
// 删除事件
$('#btn-restypepage-delete').click(function () {
var checks = table.checkStatus('table-restypepage-list').data;
var ids = $.map(checks, function (item) {
return item.id;
});
deleteByIds(ids);
});
}
/**
* 初始化下拉框数据
*
* */
function initSelect() {
common.renderCollProtocolSelect('restypepageCollProtocol', function () {
form.render("select");
});
// common.renderCollProtocolSelect('restypepageCollProtocol');
//绑定厂商下拉选择
common.providerSelect("restypepageProvider", function () {
form.render("select");
});
common.renderDdicSelect('restypepageOs', 'os', function () {
form.render("select");
}, "=操作系统=");
//资源类型下拉框
common.resTypeSelect("restypepage_select_resType",function () {
form.render("select");
});
}
/**
* 将查询条件作为方法
*
* */
function whereSearch() {
form.render();
var $from = $("#restypepageQueryForm")
var search = {
access_token: accessToken,
keyword: $from.find("input[name='keywords']").val(),
resType: $from.find("select[name='restypepageresType']").val(),
os: $from.find("select[name='restypepageos']").val(),
protocol: $from.find("select[name='restypepagecollProtocol']").val(),
provider: $from.find("select[name='restypepageprovider']").val(),
}
return search;
}
// 加载表格
function loadTable() {
restypepageTable = table.render({
elem: '#table-restypepage-list',
url: domainName + '/api-web/manage/restypePage/page',
where: whereSearch(),
height: 'full-200',
limit: common.limit,
limits: common.limits,
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
},
cols: [[
{ type: 'checkbox' }
, {field: 'index', title: '序号', align: 'center', type: 'numbers',width: 50}
, {
field: 'name', title: '页面名称', align: 'center', sort: true,width: 400,
templet: '<div>' +
'<span restypepage-data-edit="{{d.id}}" data-flag="{{d.flag}}" class="layui-table-link">{{d.name}}</span>' +
'</div>'
}
, { field: 'resTypeName', title: '资源类型', align: 'center',width: 250}
, { field: 'osName', title: '操作系统', align: 'center',width: 100}
, { field: 'provderName', title: '厂商', align: 'center',width: 100}
, { field: 'protocolName', title: '采集协议', align: 'center',width: 200}
, { field: 'model', title: '型号', align: 'center',width: 200}
, { field: 'keyword', title: '辅助关键字', align: 'center',width: 200}
, { field: 'flags', title: '配置指标组', align: 'left',width: 300}
, { field: 'kpis', title: '配置指标', align: 'left',width: 300}
, { field: 'remark', title: '备注', align: 'left',width: 300}
, {
title: '操作', align: 'center',fixed: 'right', width: 100,
templet:
'<div>' +
'<button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-restypepage-edit" lay-tips="编辑"><i class="layui-icon layui-icon-edit"></i></button>'+
'<button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-restypepage-delete" lay-tips="删除"><i class="layui-icon layui-icon-delete"></i></button>' +
'</div>'
}]],
done: function (res) {
//点击协议名称 进行编辑
$('[restypepage-data-edit]').on('click', function () {
if ($.inArray('back:restypepage:add', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
openEditHtml($(this).attr("restypepage-data-edit"));
});
// 点击编辑事件
$('.link-restypepage-edit').click(function () {
if ($.inArray('back:restypepage:add', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
openEditHtml($(this).data('id'));
});
// 点击删除事件
$('.link-restypepage-delete').click(function () {
deleteByIds([$(this).data('id')]);
});
}
});
}
//刷新表格
function reloadTable() {
restypepageTable.reload({
page: {
curr: 1
}
, where: whereSearch()
});
}
// 新增或编辑资源类型页面配置信息
function openEditHtml(id) {
common.openWin('/baseconfig/restypepage/add', `<a class="layui-icon layui-icon-edit win_title_icon"></a>` + id ? '编辑' : '新增',
{id: id}, ['保存', '取消'], function () {
$('#btn-restypepage-submit').click();
}, null, ['80%', '90%'], null, {resize: false});
form.render();
}
// 根据id删除字典信息
function deleteByIds(ids) {
if ($.inArray('back:restypepage:delete', checkList) == -1) {
layer.msg('暂无权限!', {icon: 7, time: 3000});
return;
}
if (ids.length == 0) {
layer.msg('请至少选择一条数据', {icon: 0, time: 3000});
return;
}
layer.confirm('确认要删除数据吗?', {icon: 3}, function () {
layer.load(2);
admin.req({
url: domainName + '/api-web/manage/restypePage/deleteByIds',
data: {
ids: ids
}
}).done(function (response) {
layer.closeAll('loading');
if (response.success) {
layer.msg('删除成功!', {icon: 1, time: 3000});
reloadTable();
} else {
layer.msg('删除失败!', {icon: 2, time: 3000});
}
}).error(function () {
layer.closeAll('loading');
});
});
}
});
});
... ...
layui.define(['commonDetail', 'common', 'sessions'], function (exports) {
var commonDetail = layui.commonDetail;
var $ = layui.$
, laytpl = layui.laytpl
//对外暴露的接口
exports('snapshot_detail', function (data) {
var common = layui.common;
var sessions = layui.sessions;
var table = layui.table;
var view = layui.view;
var laytpl = layui.laytpl;
var resId = '';
var batchNo = '';
var showFlag = common.getUrlParam("show");
if (showFlag && showFlag == '0') {
resId = common.getUrlParam("resId");
batchNo = common.getUrlParam("batchNo");
} else {
resId = data.resId;
batchNo = data.batchNo;
}
findAllSnapshot();
commonDetail.bindTips();
function findAllSnapshot() {
// 删除所有的子元素
$('#table_arr_body').empty();
let url = common.domainName + '/api-web/snapshot/info?resId='+ resId + '&batchNo='+batchNo +'&access_token='+sessions.getToken().access_token;
$.ajax({
url: url,
type: 'get',
async: false,
success: function (res) {
if (res.success){
if (res.object.snapshotResState){
commonDetail.snapshotRenderResHealth(res.object.snapshotResState);
}
commonDetail.anapshotRenderTextCols('hostminicomputerpartition_jbxx',res.object.snapshotBaseInformationList,2);
if (res.object.importantInformationList != null && res.object.importantInformationList.length > 0){
commonDetail.anapshotRenderTextCols('hostminicomputerpartition_sysfile',res.object.importantInformationList,2);
}else {
$("#hostminicomputerpartition_sysfile").html('<div style="text-align:center;"><span style="line-height: 150px; padding:20px;font-style:normal;">暂无数据</span></div>')
}
commonDetail.snapshotRenderActiveAlarms("告警列表","snapshow_active_alram", res.object.snapshotAlamList);
console.log(res.object.snapshotRecordList);
let tableArr = res.object.snapshotRecordList;
let domTableArr='';
// 渲染生成节点
tableArr.forEach((item,index)=>{
domTableArr+=`
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">${item.name}
<span class="layui-table-link" id="snapshot_wkinfoDownload_${index}"
style="margin-left: 10px;">下载</span>
<span class="layui-table-link" id="snapshot_wkinfoMore_${index}">更多</span>
</h5>
<div id="snapshot_wkinfo_${index}"></div>
</div>
</div>
`
})
// console.log(domTableArr);
$('#table_arr_body').append(domTableArr)
// 渲染节点表格数据
tableArr.forEach((item,index)=>{
let cols = [];
let datas = [];
item.header.map((headerItem,headerIndex)=>{
if (headerItem.unit){
cols.push({
field:headerItem.id,title:headerItem.name+'('+headerItem.unit+')',sort:true,align:"center",
})
}else {
cols.push({
field:headerItem.id,title:headerItem.name,sort:true,align:"center",
})
}
})
item.content.map((contItem,contIndex)=>{
let obj = {};
contItem.map((v,i)=>{
obj[v.kpiId] = v.kpiValue
})
datas.push(obj)
})
/*console.log('cols--------------',cols);
console.log('datas--------------',datas);*/
// 创建渲染实例
table.render({
elem: `#snapshot_wkinfo_${index}`
,page: false
,data: datas
,cols: [cols]
,done(response, curr, count){
delete response.data[0].LAY_TABLE_INDEX //
let keys = response.data[0]
let params = {
kpiId:Object.keys(keys).join(','),
resId:resId,
batchNo:batchNo,
tableName:item.name,
flagPrefix:item.flagPrefix
}
// 点击下载的方法
$(`#snapshot_wkinfoDownload_${index}`).unbind('click').on('click',()=>{
let url = `${common.domainName}/api-web/snapshot/info/download?kpiId=${params.kpiId}&resId=${params.resId}&batchNo=${params.batchNo}&tableName=${params.tableName}&flagPrefix=${params.flagPrefix}&access_token=${sessions.getToken().access_token}`
window.open(url)
})
// 点击更多的方法
$(`#snapshot_wkinfoMore_${index}`).unbind('click').on('click',()=>{
view('commonViewModel').render("template/detail/snapshot_detail_more").then(function (res) {
layer.open({
title: ["更多", 'font-size:18px;'],
type: 1,
shadeClose: true,//开启遮罩层
area: ['90%', '690px'],
content: laytpl(res.body).render(JSON.stringify(params))
});
});
})
}
,error(){
}
})
})
}else {
layer.msg(res.msg, {
icon: 7, time: 2000
});
}
}
})
}
//定时任务
// var timer = setInterval(function () {
// findAllSnapshot()
// }, commonDetail.timerTime);
// commonDetail.detailTimer.push(timer);
});
});
... ...
//更多列表
layui.define(['table', 'admin', 'layer', 'common', 'commonDetail'], function (exports) {
var $ = layui.$;
var admin = layui.admin;
var table = layui.table;
var common = layui.common;
var sessions = layui.sessions;
var commonDetail = layui.commonDetail;
//对外暴露的接口
exports('snapshot_detail_more', function (data) {
// console.log(data);
var commonDetail = layui.commonDetail;
var resId = data.resId;
var kpiId = data.kpiId;
var batchNo = data.batchNo;
var flagPrefix = data.flagPrefix;
var page = '1';
var limit = "10";
let cols = [];
let url = `${common.domainName}/api-web/snapshot/info/page?access_token=${sessions.getToken().access_token}`;
$.ajax({
url: url,
data:{
resId,
kpiId,
batchNo,
flagPrefix,
page,
limit,
},
type: 'get',
async: false,
success:(res)=>{
console.log(res.object.header);
cols = res.object.header.map(item=>{
if (item.unit){
return {
field:item.id,title:item.name+'('+item.unit+')',sort:true,align:"center",
}
}else {
return {
field:item.id,title:item.name,sort:true,align:"center",
}
}
})
// let tableArr = res.object;
// let datas = [];
// let cols = [];
// tableArr.header.map((headerItem,headerIndex)=>{
// cols.push({
// field:headerItem.id,title:headerItem.name,sort:true,align:"center",
// })
// })
// tableArr.content.map((contItem,contIndex)=>{
// let obj = {};
// contItem.map((v,i)=>{
// obj[v.kpiId] = v.kpiValue
// })
// datas.push(obj)
// })
},
error:(err)=>{
}
})
table.render({
elem: '#detail_more_snapshot'
,url:url
, cols: [cols]
, where:{
resId,
kpiId,
batchNo,
flagPrefix,
}
, id: 'detail_more_snapshot'
, page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, theme: '#1E9FFF'
}
, height: 'full-300'
, limit: common.limit
, limits: common.limits
, done(){
}
,error(){
}
})
})
});
... ...
... ... @@ -7992,12 +7992,13 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
/*通知页面中间统计图布局样式*/
.detail-loadbalancing-vs {
width: calc(12.5% - 22px);
/*lsq 详情页节电池样式修改 2022-08-08*/
width: calc(14% - 0px);
height: 115px;
margin: 5px;
float: left;
border: 1px solid #dcdcdc;
padding: 10px 20px;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
... ... @@ -8006,15 +8007,20 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
font-size: 15px;
font-weight: bold;
height: 30px;
word-wrap: break-word;
}
.detail-loadbalancing-vs .vs-title {
margin-bottom: 10px;
}
/*lsq 详情页节点池样式修改 2022-08-08*/
.detail-loadbalancing-vs .vs-flex{
display: flex;
align-items: center;
}
.detail-loadbalancing-vs div.vs-icon-div {
width: 55px;
height: 55px;
width: 45px;
height: 45px;
padding: 4px;
float: left;
border-radius: 10px;
... ... @@ -8030,8 +8036,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
}
.detail-loadbalancing-vs div.vs-icon {
width: 50px;
height: 50px;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
background-image: url(/src/style/img/icon-db.png);
... ... @@ -8062,6 +8068,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
width: 61%;
float: left;
padding-left: 10px;
/*lsq 详情页节点池样式修改 2022-08-08*/
flex:1;
}
.detail-loadbalancing-vs .vs-info li {
... ... @@ -8375,7 +8383,7 @@ form.layui-card-header.layuiadmin-card-header-auto {
.info-table .div-link-state-list {
height: 30px;
width: calc(100% - 12px);
width: calc(100%);
float: left;
}
... ... @@ -8551,4 +8559,7 @@ form.layui-card-header.layuiadmin-card-header-auto {
}
.res .layui-card-body{
background: #ffffff;
}
\ No newline at end of file
}
.layui-layer-tips{
word-break: break-all;
}
... ...
<article>
<form action="" class="layui-form layui-form-pane" lay-filter="form-flag-edit">
<fieldset class="layui-elem-field layui-field-title">
<legend>基本信息</legend>
</fieldset>
<div class="layui-form-item">
<div class="inline-half layui-inline ">
<label class="layui-form-label">编码</label>
<div class="layui-input-inline">
<input class="layui-input" lay-verify="required" name="flag" placeholder="请输入编码" type="text">
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input class="layui-input" lay-verify="required" name="name" placeholder="请输入名称" required
type="text">
</div>
</div>
<form class="layui-form layui-form-pane" action="" lay-filter="form-flag-edit">
<fieldset class="layui-elem-field layui-field-title">
<legend>基本信息</legend>
</fieldset>
<div class="layui-form-item">
<div class="inline-half layui-inline ">
<label class="layui-form-label">编码<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="flag" lay-verify="required" placeholder="请输入编码" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label">说明</label>
<div class="layui-input-block">
<textarea class="layui-textarea" name="remark" placeholder="请输入说明"></textarea>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">维度<span style="color: red">*</span></label>
<div class="layui-input-inline">
<select name="dimension" lay-verify="required" class="layui-select">
<option value="">=选择维度=</option>
<option value="1D">一维</option>
<option value="2D">二维</option>
</select>
</div>
<button class="hide" id="btn-kpiflag-submit" lay-filter="kpi-flag-submit" lay-submit>提交</button>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定指标&nbsp;&nbsp;
<button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-kpiflag-kpi-bind"><i
class="layui-icon">&#xe624;</i></button>
</legend>
</fieldset>
<div class="layui-form-item layui-form-item-flex">
<table class="input-flex-1" id="kpiflag-edit-table"></table>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">名称<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="name" required lay-verify="required" placeholder="请输入名称" class="layui-input">
</div>
<div class="layui-form-item layui-form-item-flex hide">
<div class="layui-input-block input-flex-1">
<input name="chartType" title="列表" type="radio" value="">
<input name="chartType" title="折线图" type="radio" value="">
<input name="chartType" title="柱状图" type="radio" value="">
<input name="chartType" title="饼图" type="radio" value="">
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">描述<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="describes" required lay-verify="required" placeholder="请输入名称" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-restype-bind"><i
class="layui-icon">&#xe654;</i>绑定到资源类型
</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-app-bind"><i
class="layui-icon">&#xe654;</i>绑定到应用
</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-server-bind"><i
class="layui-icon">&#xe654;</i>绑定到服务
</button>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">创建人<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="createUser" required lay-verify="required" placeholder="请输入创建人" class="layui-input">
</div>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定信息</legend>
</fieldset>
<div class="layui-collapse" id="div-flag-bind">
<div class="layui-colla-item flex-1">
<h2 class="layui-colla-title">绑定的资源类型&nbsp;&nbsp;数量:<span id="txt-flag-bind-resTypeCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-retype"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的应用&nbsp;&nbsp;数量:<span id="txt-flag-bind-appCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-app"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的服务&nbsp;&nbsp;数量:<span id="txt-flag-bind-serverCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-server"></table>
</div>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">创建时间</label>
<div class="layui-input-inline">
<input type="text" name="createTime" disabled class="layui-input">
</div>
</form>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label">说明</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入说明" class="layui-textarea"></textarea>
</div>
</div>
<button id="btn-kpiflag-submit" class="hide" lay-submit lay-filter="kpi-flag-submit">提交</button>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定指标&nbsp;&nbsp;
<button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-kpiflag-kpi-bind"><i class="layui-icon">&#xe624;</i></button>
</legend>
</fieldset>
<div class="layui-form-item layui-form-item-flex kpiflag-edit-table">
<table id="kpiflag-edit-table" class="input-flex-1"></table>
</div>
<div class="layui-form-item layui-form-item-flex hide">
<div class="layui-input-block input-flex-1">
<input type="radio" name="chartType" value="" title="列表">
<input type="radio" name="chartType" value="" title="折线图">
<input type="radio" name="chartType" value="" title="柱状图">
<input type="radio" name="chartType" value="" title="饼图">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-restype-bind"><i class="layui-icon">&#xe654;</i>绑定到资源类型</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-app-bind"><i class="layui-icon">&#xe654;</i>绑定到应用</button>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-kpi-flag-server-bind"><i class="layui-icon">&#xe654;</i>绑定到服务</button>
</div>
</div>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>绑定信息</legend>
</fieldset>
<div class="layui-collapse" id="div-flag-bind">
<div class="layui-colla-item flex-1">
<h2 class="layui-colla-title">绑定的资源类型&nbsp;&nbsp;数量:<span id="txt-flag-bind-resTypeCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-retype"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的应用&nbsp;&nbsp;数量:<span id="txt-flag-bind-appCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-app"></table>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">绑定的服务&nbsp;&nbsp;数量:<span id="txt-flag-bind-serverCount">0</span></h2>
<div class="layui-colla-content">
<table id="table-flag-bind-server"></table>
</div>
</div>
</div>
</form>
</article>
<script>
layui.use('kpiflagEdit', function (fn) {
fn({{ d }});
});
</script>
layui.use('kpiflagEdit', function (fn) {
fn({{d}});
});
</script>
\ No newline at end of file
... ...
... ... @@ -5,30 +5,58 @@
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-status">
<form class="layui-form layui-card-header layuiadmin-card-header-auto"
lay-filter="kpiflag-form">
<form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="kpiflag-form">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input autocomplete="off" class="layui-input" id="kpiflag_keyword"
lay-tips="关键字检索包含: </br>指标组名称" name="kpiflag_keyword"
placeholder="输入关键字,回车搜索"
type="text">
<input style="display: none" type="text">
<input type="text" id="kpiflag_keyword" name="kpiflag_keyword" placeholder="输入关键字,回车搜索" autocomplete="off"
lay-tips="关键字检索包含: </br>指标组名称</br>flag</br>备注</br>绑定资源类型</br>绑定指标</br>指标组描述</br>创建人"
class="layui-input">
<input type="text" style="display: none">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input type="text" id="kpiflag_describe" name="kpiflag_describe" placeholder="输入指标组描述,回车搜索" autocomplete="off"
class="layui-input">
<input type="text" style="display: none">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input type="text" id="kpiflag_kpis" name="kpiflag_kpis" placeholder="输入指标名称,回车搜索" autocomplete="off"
class="layui-input">
<input type="text" style="display: none">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input type="text" id="kpiflag_restypes" name="kpiflag_restypes" placeholder="输入资源类型,回车搜索" autocomplete="off"
class="layui-input">
<input type="text" style="display: none">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<select name="dimension" class="layui-select" lay-filter="change">
<option value="">=选择维度=</option>
<option value="1D">一维</option>
<option value="2D">二维</option>
</select>
</div>
</div>
<button class="layui-btn layui-btn-normal" id="kpiflagQueryBtn" type="button">
<!--lsq 查询按钮取消掉图标 2022-06-30-->
查询
</button>
</div>
</form>
</div>
</div>
<div class="layui-card-body">
<div class="warn-btns">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="addkpiflag" type="button"><i
class="layui-icon">&#xe654;</i>新增
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="delkpiflag" type="button"><i
class="layui-icon">&#xe640;</i>删除
</button>
<button id="addkpiflag" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe654;</i>新增</button>
<button id="delkpiflag" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon">&#xe640;</i>删除</button>
</div>
<table id="kpiflag_table"></table>
</div>
... ... @@ -42,3 +70,8 @@
fn();
});
</script>
<style>
.layui-status .layui-input-inline--long {
width: 190px !important;
}
</style>
\ No newline at end of file
... ...
<article>
<form class="layui-form layui-form-pane" action="" lay-filter="form-restypepage-edit">
<fieldset class="layui-elem-field layui-field-title">
<legend>基本信息</legend>
</fieldset>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">页面名称<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="name" lay-verify="required" placeholder="请输入页面名称" class="layui-input">
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">资源类型<span style="color: red">*</span></label>
<div class="layui-input-inline">
<select name="resType" lay-verify="required" lay-search="" id="restypepagekpi_select_resType" class="layui-select">
<option value="">=资源类型=</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">操作系统</label>
<div class="layui-input-inline">
<select name="os" id="restypepagekpiOs" lay-search="" class="layui-select">
<option value="">=操作系统=</option>
</select>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">厂商</label>
<div class="layui-input-inline">
<select name="provider" id="restypepagekpiProvider" lay-search="" class="layui-select">
<option value="">=厂商=</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">采集协议</label>
<div class="layui-input-inline">
<select name="protocol" id="restypepagekpiCollProtocol" lay-search="" class="layui-select">
<option value="">=采集协议=</option>
</select>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">型号</label>
<div class="layui-input-inline">
<input type="text" name="model" placeholder="请输入型号" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">排序<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input class="layui-input" lay-verify="required" name="sort" value="1" placeholder="请输入排序" type="number">
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">辅助关键字</label>
<div class="layui-input-inline">
<input type="text" name="keyword" placeholder="请输入辅助关键字" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<label class="layui-form-label">创建人<span style="color: red">*</span></label>
<div class="layui-input-inline">
<input type="text" name="createUser" required lay-verify="required" placeholder="请输入创建人" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label textarea-label">备注</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
</div>
</div>
<button id="btn-restypepage-submit" class="hide" lay-submit lay-filter="kpi-flag-submit">提交</button>
</form>
<form class="layui-form layui-form-pane" onsubmit="return false">
<fieldset class="layui-elem-field layui-field-title">
<legend>选择指标组&nbsp;&nbsp;
<button class="layui-btn layui-btn-xs layui-btn-normal fieldset-btn" id="btn-restypepage-kpi-bind"><i class="layui-icon">&#xe624;</i></button>
</legend>
</fieldset>
<div class="layui-form-item layui-form-item-flex restypepage-edit-table">
<table id="restypepage-edit-table" class="input-flex-1"></table>
</div>
</form>
</article>
<script>
layui.use('restypepageEdit', function (fn) {
fn({{d}});
});
</script>
<style>
[lay-id="restypepage-edit-table"] .layui-table-cell {
height: auto !important;
}
</style>
\ No newline at end of file
... ...
<title>资源类型页面配置</title>
<article class="page-container">
<div class="page-panel">
<div class="main commonDiv">
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-status">
<form class="layui-card-header layuiadmin-card-header-auto layui-form"
lay-filter="form-restypepage-condition" id="restypepageQueryForm">
<div class="layui-form-item">
<div class="layui-inline">
<div class="layui-input-inline layui-input-inline--long">
<input autocomplete="off" class="layui-input" name="keywords" placeholder="输入关键字,回车搜索" lay-tips="关键字检索包含:</br>页面名称</br>型号</br>关键字</br>备注</br>指标组名称</br>指标名称"
type="text">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select name="restypepageresType" id="restypepage_select_resType" lay-search="" lay-filter="change">
<option value="">=资源类型=</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select id="restypepageCollProtocol" lay-search="" name="restypepagecollProtocol" lay-filter="change">
<option value="">=采集协议=</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select id="restypepageOs" lay-search="" name="restypepageos" lay-filter="change">
<option value="">=操作系统=</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<select id="restypepageProvider" lay-search="" name="restypepageprovider" lay-filter="change">
<option value="">=厂商=</option>
</select>
</div>
</div>
<button class="layui-btn layui-btn-normal" id="restypepageQueryBtn" type="button">
<!--lsq 查询按钮取消掉图标 2022-06-30-->
查询
</button>
</div>
</form>
</div>
</div>
<div class="layui-card-body">
<div class="warn-btns">
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-restypepage-add">
<i class="layui-icon layui-icon-add-1"></i>新增
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-restypepage-delete">
<i class="layui-icon layui-icon-delete"></i>删除
</button>
</div>
<table id="table-restypepage-list" lay-filter="table-restypepage-list"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('restypepageIndex', function (fn) {
fn();
});
</script>
... ...
<title>快照管理</title>
<iframe src="/vue3/index.html#/vue3/snapshot" frameborder="0" class="layadmin-iframe" style="height: 99.5%!important;"/>
\ No newline at end of file
... ...
<title>快照概览</title>
<iframe src="/vue3/index.html#/vue3/snapshotOverview" frameborder="0" class="layadmin-iframe" style="height: 99.5%!important;"/>
\ No newline at end of file
... ...
<!--快照详细页面-->
<article class="page-container template">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-body">
<div class="lay-row">
<div class="lay-row-item" style="max-width: 200px">
<h5 class="lay-row-title">资源状态</h5>
<div class="res-state" id="hostminicomputerpartition_resstate">
<div class="res-state-pie res-state-pie--good"></div>
<ul>
<li>严重告警:0</li>
<li>重要告警:0</li>
<li>一般告警:0</li>
</ul>
</div>
</div>
<div class="lay-row-item lay-row-item--half" style="width: calc(100% - 200px)">
<h5 class="lay-row-title">基本信息<i class="iconfont detail_base_info"
data-id="hostminicomputerpartition_jbxx">&#xe61e;</i></h5>
<ul class="info-table" id="hostminicomputerpartition_jbxx">
</ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item lay-row-item--half" style="width: calc(100% - 10px)">
<h5 class="lay-row-title">性能信息<i class="iconfont detail_base_info"
data-id="hostminicomputerpartition_sysfile">&#xe61e;</i></h5>
<ul class="info-table" id="hostminicomputerpartition_sysfile"></ul>
</div>
</div>
<div id="table_arr_body">
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">告警列表</h5>
<div id="snapshow_active_alram"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<textarea id="snapshot_detail_param_id" style="display: none;">{{d}}</textarea>
<script>
layui.use('snapshot_detail', function (fn) {
var $ = layui.$;
var parm = $("#snapshot_detail_param_id").val();
if (parm.indexOf('{{d') != -1) {
fn();
} else {
fn(JSON.parse(parm));
}
});
</script>
... ...
<title>快照更多展示</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-body">
<table id="detail_more_snapshot" lay-filter="detail_more_snapshot"></table>
</div>
</div>
</div>
</div>
</article>
<script>
layui.use('snapshot_detail_more', function (fn) {
fn({{ d }});
});
</script>
\ No newline at end of file
... ...
<div>
<el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter"
:size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="所属系统"
:size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="所属业务"
style="min-width: 120px;" v-model="modelValueLabel">
<el-option :value="modelValue" style="height: auto;padding: 0;">
<el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll"
... ...
... ... @@ -64,7 +64,7 @@ export default {
},
selectFilterMethod(val) {
// 下拉框调用tree树筛选
this.$refs.kpiTree.filter(val)
this.$refs.bizTree.filter(val)
},
selectChangeMethod(e) {
var arrNew = []
... ... @@ -78,7 +78,7 @@ export default {
}
}
// 设置勾选的值
this.$refs.kpiTree.setCheckedNodes(arrNew)
this.$refs.bizTree.setCheckedNodes(arrNew)
},
filterNode(value, data) {
if (!value) return true
... ...
<div>
<el-select :size="$global.elementConfig.size.input" :collapse-tags="true" :filter-method="selectFilterMethod" :filterable="isFilter"
:size="size" @change="selectChangeMethod" @visible-change="selectClose" clearable placeholder="选择用户"
style="min-width: 120px;" v-model="modelValueLabel">
<el-option :value="modelValue" style="height: auto;padding: 0;">
<el-tree :check-on-click-node="true" :check-strictly="false" :data="list" :default-expand-all="isDefaultAll"
:empty-text="emptyText" :expand-on-click-node="true" :filter-node-method="filterNode"
:props="defaultProps" :show-checkbox="isMultiple" :show-checkbox="checkbox" @check-change="handleCheckChange"
node-key="id" node-key="id" ref="userTree">
</el-tree>
</el-option>
</el-select>
</div>
... ...
export default {
template: '',
name: 'user-tree-input',
props: {
// echoObj 可以用于回显,它的值为需要回显的对象,多个时可以使用数组
echoObj: {},
// 是否开启搜索
isFilter: {
default: true
},
// 尺寸
size: {
default: ''
},
placeholderText: {
default: '选择用户'
},
isTag: {
default: true
},
isDefaultAll: {
default: true
},
// 点击节点是否展开
expandClickNode: {
default: false
},
// 字段key,用于取出数据中的名字
fieldName: {
default: 'title'
},
emptyText: {
default: '无匹配项'
},
// 字段key, 数据中的id
fieldId: {
default: ''
},
// 配置是否可多选
isMultiple: {
type: Boolean,
default: true
},
},
data() {
return {
defaultProps: {
children: 'children',
label: 'nickname'
},
list: [],
// 实际选中值
modelValue: [],
// 下拉框绑定值(选中值名字)
modelValueLabel: []
}
},
methods: {
selectClose(bool) {
if (bool) {
this.selectFilterMethod('')
}
},
selectFilterMethod(val) {
// 下拉框调用tree树筛选
this.$refs.userTree.filter(val)
},
selectChangeMethod(e) {
var arrNew = []
var dataLength = this.modelValue.length
var eLength = e.length
for (var i = 0; i < dataLength; i++) {
for (var j = 0; j < eLength; j++) {
if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
arrNew.push(this.modelValue[i])
}
}
}
// 设置勾选的值
this.$refs.userTree.setCheckedNodes(arrNew)
},
filterNode(value, data) {
if (!value) return true
return data[this.fieldName].indexOf(value) !== -1
},
handleCheckChange(data, checked, indeterminate) {
let that = this;
var selectArr = [];
selectArr.push(data);
// data[that.defaultProps.children].forEach(function (v) {
// selectArr.push(data);
// });
if (checked) {
// 已选中
that.modelValue = that.modelValue.concat(selectArr)
} else {
that.modelValue.forEach(function (v, i) {
selectArr.forEach(function (v1) {
if (v.busId == v1.busId) {
that.modelValue.splice(i, 1);
}
})
})
}
that.modelValueLabel = that.modelValue.map(function (v) {
return v[that.defaultProps.label];
});
that.$emit('callback', this.modelValue)
}
},
watch: {},
mounted() {
let that = this;
//加载资源列表
const {proxy} = Vue.getCurrentInstance()
// 加载列表
proxy.$http.get("/api-user/users/getAll", {}, function (res) {
if (res) {
that.list = res;
}
})
},
created() {
}
}
... ...
... ... @@ -40,16 +40,16 @@ Promise.all([
.component('cm-document', Vue.defineAsyncComponent(() => myImport('components/common/document/index')))
//指标类型数
.component('cm-kpi-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputkpitree/index')))
//所属系统
//所属业务
.component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index')))
//时间范围组件
.component('cm-date-range-influx', Vue.defineAsyncComponent(() => myImport('components/common/dateRange/indexInflux')))
//富文本框组件
.component('cm-wang-editor', Vue.defineAsyncComponent(() => myImport('components/common/wangEditorComponent/index')))
//告警通知统计信息
.component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index')));
.component('cm-notice-statistics', Vue.defineAsyncComponent(() => myImport('components/common/noticeStatistics/index')))
//告警通知统计信息
.component('cm-user-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputusertree/index')));
// // 自定义指令
// app.directive('permissions', {
// // 当被绑定的元素插入到 DOM 中时……
... ...
... ... @@ -149,6 +149,24 @@ const routes = [{
name: 'busyConfig',
component: () => myImport('views/busyConfig/index')
},
//快照管理
{
path: '/vue3/snapshot',
name: 'snapshot',
component: () => myImport('views/snapshot/index')
},
//快照历史
{
path: '/vue3/snapshot/history',
name: 'snapshotHistory',
component: () => myImport('views/snapshot/history/index')
},
//快照概览
{
path: '/vue3/snapshotOverview',
name: 'snapshotOverview',
component: () => myImport('views/snapshotOverview/index')
},
];
// hash模式: createWebHashHistory
... ...
... ... @@ -295,7 +295,11 @@ global.openDetail = (resId, resType, proxy) => {
});
}
//跳转详情页
global.openNewWin = (url, name, params, editFlag, fn, cancelfn, type, sign) => {
let lyaui = global.layui;
lyaui.commonDetail.openNewWin(url, name, params, editFlag, fn, cancelfn, type, sign)
}
/**
* @description 打开选择layUI弹窗
* @author XuHaoJie
... ...
<div :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}"
class="container">
<div :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"
class="cm-card">
<div class="search">
<div class="condition ping">
<el-form-item>
<el-date-picker
:size="$global.elementConfig.size.input"
end-placeholder="开始时间"
placeholder="开始时间"
type="datetime"
v-model="search.startTime"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-date-picker
:size="$global.elementConfig.size.input"
end-placeholder="结束时间"
placeholder="结束时间"
type="datetime"
v-model="search.endTime"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button :size="$global.elementConfig.size.button" type="primary" @click="getDataList">查询</el-button>
</el-form-item>
<el-form-item>
<el-button :size="$global.elementConfig.size.button" @click="deleteHistory">删除</el-button>
</el-form-item>
</div>
</div>
<div class="search-table">
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" :height="(height - 110)"
:loading="false" :pageSize="search.pageSize" :showBorder="true"
:showIndex="true" :showPage="true" :showSelection="true"
:showTools="true" :total="tableData.count" @loaddata="loaddata" @selectionChange="selectionChange">
<template #default="{row,prop,column}">
<div v-if="prop == 'state'">
<div v-if="row.state == 0">
<el-tag>创建中</el-tag>
</div>
<div v-if="row.state == 1">
<el-tag type="success">已创建</el-tag>
</div>
<div v-if="row.state == 2">
<el-tag type="danger">创建失败</el-tag>
</div>
</div>
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg">
<i @click="handleDetail(scope.row)" class="el-icon-document" title="查看详情"></i>
</span>
<span class="icon-bg">
<i @click="handleDelete(scope.row)" class="el-icon-delete" title="删除"></i>
</span>
</div>
</template>
</cm-table-page>
</div>
</div>
</div>
... ...
export default {
name: 'snapshotHistory',
template: '',
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let resId = Vue.ref('');
//选择的数据
let selectionData = Vue.ref([]);
let search = Vue.ref({
pageNum: 1,
pageSize: 20,
startTime: '',
endTime: '',
keyWord: ''
});
let selectionChange = (val) => {
selectionData.value = val;
}
//表格字段
let tableData = Vue.ref({
count: 0,
dataList: [],
columns: [
{
prop: 'createUser',
label: '快照创建人',
sortable: true,
align: 'center',
width: '250'
},
{
prop: 'createTime',
label: '快照创建时间',
sortable: true,
align: 'center',
width: '300'
},
{
prop: 'state',
label: '同步状态',
sortable: true,
align: 'center',
width: '170'
},
{
prop: 'batchNo',
label: '批次号',
sortable: true,
align: 'center',
}
]
})
// 获取列表
let getDataList = () => {
let params = {
resId: resId.value,
startTime: search.value.startTime,
endTime: search.value.endTime,
keyWord: search.value.keyword,
pageNum:search.value.pageNum,
pageSize: search.value.pageSize
}
proxy.$http.get(`/api-web/snapshot/his/getList`, params, function (res) {
if (res.success) {
tableData.value.dataList = res.data;
tableData.value.count = res.count;
} else {
tableData.value.dataList = [];
tableData.value.count = 0;
}
});
}
//删除快照历史数据
let handleDelete = (row) =>{
let params = {
resId: resId.value,
batchNo: row.batchNo
}
deleteSnapshot(params);
}
//多选删除
let deleteHistory = () =>{
if (selectionData.value.length > 0) {
let id = [];
let batchNo = [];
selectionData.value.map(item => {
id.push(item.resId);
batchNo.push(item.batchNo);
})
let params = {
resId: id.toString(),
batchNo: batchNo.toString()
}
deleteSnapshot(params);
}else {
proxy.$global.showMsg("请选择需要删除的历史快照数据","warning");
}
}
//删除
let deleteSnapshot = (param) =>{
proxy.$global.confirm('确认删除吗?', function () {
proxy.$http.get(`/api-web/snapshot/his/delete`, param, function (res) {
if (res.success) {
proxy.$global.showMsg("删除成功","success");
getDataList();
} else {
proxy.$global.showMsg("删除失败","error");
}
});
});
}
//获取resId
let getResId = () => {
resId.value = proxy.$route.query.resId;
}
let loaddata = ({page, limit}) => {
search.value.pageNum = page;
search.value.pageSize = limit;
getDataList();
}
//快照详情
let handleDetail = (row)=>{
proxy.$global.openNewWin('template/detail/snapshot_detail', row.createUser+'在'+row.createTime+'创建的'+row.resName+'的快照', {resId:row.resId,'batchNo':row.batchNo},false);
}
//查看资源详情
let goResDetail = (row) => {
proxy.$global.openDetail(row.resId, row.resType, proxy);
}
// 挂载完
Vue.onMounted(() => {
getResId();
getDataList();
})
return {
height,
resId,
getDataList,
tableData,
search,
loaddata,
goResDetail,
handleDelete,
handleDetail,
selectionChange,
deleteHistory,
deleteSnapshot
}
}
}
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
<div class="search">
<div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
<el-form :inline="true">
<el-form-item>
<el-tooltip placement="bottom-start">
<template #content> 资源名称 <br /> 资源ip <br /> 业务名称</template>
<el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" />
</el-tooltip>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
</el-form-item>
</el-form>
<el-button-group>
<el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button>
<el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button>
<el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button>
<el-popover
v-model:visible="visiblePopover"
:width="420"
placement="bottom-end">
<template #reference>
<el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button>
</template>
<el-date-picker
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
@change="handleChangeDatetime"
v-model="datetimerange"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-popover>
</el-button-group>
</div>
</div>
<el-row :gutter="20" style="padding: 3px 10px;">
<el-col :span="8">
<h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3>
<div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
<el-col :span="8">
<h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3>
<div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
<el-col :span="8">
<h3 style="text-align: left;color:#2b9eef;">快照量</h3>
<div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
</el-row>
<div class="search-table">
<h3 style="text-align: left;color:#2b9eef;">快照信息</h3>
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:height="height - 550"
:loading="false"
:pageSize="queryParams.pageSize"
:showBorder="true"
:showIndex="true"
:showPage="true"
:showSelection="false"
:showTools="true"
:total="queryParams.count"
@loaddata="loaddata">
<template #default="{row,prop,column}">
<div v-if="prop == 'resName'">
<!-- 资源名称点击事件 -->
<el-tooltip placement="top">
<el-button @click.prevent="goResDetail(row)" size="small" type="text">
<span class="">{{row.resName}}</span>
</el-button>
<template #content>{{row.resName}}</template>
</el-tooltip>
</div>
<div v-if="prop == 'busTypeName'">
<div v-if="(row.busTypeName || '').split(',').length <= '3'">
<div v-if="row.busTypeName != null && row.busTypeName.indexOf(',') != -1" v-for="item in row.busTypeName.split(',')">
<el-tooltip placement="top">
<template #content>{{item}}</template>
<el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag>
</el-tooltip>
</div>
<div v-else-if="row.busTypeName != null && row.busTypeName.indexOf(',') == -1 ">
<el-tooltip placement="top">
<template #content>{{row.busTypeName}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.busTypeName}}</el-tag>
</el-tooltip>
</div>
</div>
<div v-else>
<el-button @click="goBus(row)" size="small" type="text">
<span>共计:{{row.nickname.split(',').length}}个业务</span>
</el-button>
</div>
</div>
<div v-if="prop == 'nickname'">
<div v-if="(row.nickname || '').split(',').length <= '3'">
<div v-if="row.nickname != null && row.nickname.indexOf(',') != -1" v-for="item in row.nickname.split(',')">
<el-tooltip placement="top">
<template #content>{{item}}</template>
<el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag>
</el-tooltip>
</div>
<div v-else-if="row.nickname != null && row.nickname.indexOf(',') == -1 ">
<el-tooltip placement="top">
<template #content>{{row.nickname}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.nickname}}</el-tag>
</el-tooltip>
</div>
</div>
<div v-else>
<el-button @click="goBus(row)" size="small" type="text">
<span>共计:{{row.nickname.split(',').length}}个业务负责人</span>
</el-button>
</div>
</div>
<div v-if="prop == 'admin'">
<div v-if="row.admin != null">
<el-tooltip placement="top">
<template #content>{{row.admin}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.admin}}</el-tag>
</el-tooltip>
</div>
</div>
<div v-if="prop == 'createUser'">
<div v-if="row.createUser != null">
<el-tooltip placement="top">
<template #content>{{row.createUser}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.createUser}}</el-tag>
</el-tooltip>
</div>
</div>
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg" @click="handleDetail(scope.row)">
<i class="el-icon-document" title="详情"></i>
</span>
<span class="icon-bg"@click="handleDel(scope.row)">
<i class="el-icon-delete"></i>
</span>
</div>
</template>
</cm-table-page>
</div>
</div>
</div>
<cm-dialog :showDialogVisible="showBus" :showFooter="false" :title="title" @hidedialog="cancelBtn"
width="700px">
<template v-slot>
<div class="dialog">
<div v-model="busType" v-for="item in busType" style="display: inline-block">
<el-tag type="info" class="mx-1" effect="light">{{item}}</el-tag>
</div>
</div>
</template>
</cm-dialog>
... ...
export default {
name:"snapshot",
template:"",
setup(props, {attrs, slots, emit}){
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let formSize = Vue.ref('default');
let datetimerange = Vue.ref([]);
let visiblePopover = Vue.ref(false);
let queryParams = Vue.ref({
keyWord:'',
resType:'',
busId:'',
time:"today",
pageNum: 1,
pageSize: 10,
count:0,
})
let btnGroupType = Vue.ref(0);
//表格字段
let tableData = Vue.ref({
count: 0,
dataList: [],
columns: [
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
width: '200',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center'
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
width: '130'
}, {
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
width: '130'
}, {
prop: 'busTypeName',
label: '所属业务系统',
sortable: true,
align: 'center',
width: '270'
},
{
prop: 'nickname',
label: '业务系统负责人',
sortable: true,
align: 'center',
width: '150'
},
{
prop: 'createUser',
label: '快照创建人',
sortable: true,
align: 'center',
width: '130'
},
{
prop: 'createTime',
label: '快照创建时间',
sortable: true,
align: 'center',
width: '170'
},
]
})
let loaddata = ({page, limit}) => {
queryParams.value.pageNum = page;
queryParams.value.pageSize = limit;
getDataList();
getEchartsData();
}
let getResType = (arr) => {
let types = arr.map(function (v) {
return v.id;
});
queryParams.value.resType = types.join(',');
}
let getBizType = (arr) => {
let types = arr.map(function (v) {
return v.busId;
});
queryParams.value.busId = types.join(',');
}
// 获取列表
let getDataList = () => {
// console.log(queryParams.value);
proxy.$http.get(`/api-web/snapshot/manage/getList`,queryParams.value,(res)=>{
// console.log(res.data);
tableData.value.dataList = res.data;
queryParams.value.count = res.count;
},(err)=>{
console.log(err);
})
};
// 查询事件
let handleQuery = ()=> {
queryParams.value.pageSize=10;
queryParams.value.pageNum=1;
getDataList();
getEchartsData();
}
// 按钮组点击事件
let handleBtnGroup = (val)=>{
queryParams.value.time = val;
if (val == 4){
visiblePopover.value = !visiblePopover.value;
}else{
visiblePopover.value = false;
getDataList();
getEchartsData();
}
};
// echarts
let bizChartsRefs = Vue.ref(null);
let devChartsRefs = Vue.ref(null);
let snapshotChartsRefs = Vue.ref(null);
let bizCharts = Vue.ref('')
let devCharts = Vue.ref('')
let snapshotCharts = Vue.ref('')
let showBus = Vue.ref(false);
let title = Vue.ref('');
let busType = Vue.ref();
let getEcharts = ()=>{
bizCharts = echarts.init(bizChartsRefs.value);
let bizOption = {
grid:{
top:"8%",
bottom:"8%",
left:"4%",
containLabel:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
color:"#60a0f7",
xAxis: {
type: 'category',
data: [],
axisTick:false,
axisLabel: {
interval: 0,
formatter: val => {
// 一行字数
const max = 6
// 标签长度
const valLength = val.length
// 换行数
const rowNum = valLength / 6
if (valLength > 6) {
return val.slice(0,5) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
axisLine:{
show:true,
},
//分隔线样式
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [
{
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
borderRadius:[20,20,0,0]
}
}
]
}
bizCharts.setOption(bizOption);
devCharts = echarts.init(devChartsRefs.value);
let devOption = {
grid:{
top:"8%",
bottom:"8%",
left:"4%",
containLabel:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
color:"#60a0f7",
xAxis: {
type: 'category',
data: [],
axisTick:false,
axisLabel: {
interval: 0,
formatter: val => {
// 一行字数
const max = 6
// 标签长度
const valLength = val.length
// 换行数
const rowNum = valLength / 6
if (valLength > 6) {
return val.slice(0,5) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
axisLine:{
show:true,
},
//分隔线样式
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [
{
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
borderRadius:[20,20,0,0]
}
}
]
}
devCharts.setOption(devOption);
snapshotCharts = echarts.init(snapshotChartsRefs.value);
let shapshotOption = {
grid:{
top:"8%",
bottom:"8%",
left:"4%",
containLabel:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
color:"#60a0f7",
xAxis: {
type: 'category',
data: [],
axisTick:false,
},
yAxis: {
type: 'value',
axisLine:{
show:true,
},
//分隔线样式
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [
{
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
borderRadius:[20,20,0,0]
}
}
]
}
snapshotCharts.setOption(shapshotOption);
}
let getEchartsData = ()=>{
let resTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/manage/resTypeTop`,queryParams.value,(res)=>{
// console.log(res.object);
res.object.forEach(item=>{
resTypeData.xaxis.push(item.xaxis);
resTypeData.yaxis.push(item.yaxis)
})
bizCharts.setOption({
xAxis:{
data:resTypeData.xaxis,
},
series:[
{
data:resTypeData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
let busTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/manage/busTop`,queryParams.value,(res)=>{
// console.log(res.object);
res.object.forEach(item=>{
busTypeData.xaxis.push(item.xaxis);
busTypeData.yaxis.push(item.yaxis)
})
devCharts.setOption({
xAxis:{
data:busTypeData.xaxis,
},
series:[
{
data:busTypeData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
let snapshotNumData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/manage/snapshotNum`,queryParams.value,(res)=>{
// console.log(res.object);
res.object.forEach(item=>{
snapshotNumData.xaxis.push(item.xaxis);
snapshotNumData.yaxis.push(item.yaxis)
})
snapshotCharts.setOption({
xAxis:{
data:snapshotNumData.xaxis,
},
series:[
{
data:snapshotNumData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
}
// 时间范围快捷键 修改事件
let handleChangeDatetime = (value)=>{
visiblePopover.value = false;
queryParams.value.time = value.join(',');
getDataList();
getEchartsData();
}
// 表格删除事件
let handleDel = (row)=>{
// console.log(row);
proxy.$global.confirm("确认删除吗?", function () {
deleteItems([row.resId],[row.batchNo]);
})
}
//删除
let deleteItems = (ids,nos) => {
let params = {
resId: ids.toString(),
batchNo:nos.toString(),
}
proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
handleQuery()
}
})
}
//快照详情
let handleDetail = (row)=>{
// console.log(row);
// proxy.$global.openNewWin('template/detail/snapshot_detail_v1', "快照详情", {resId:row.resId,'batchNo':row.batchNo},false);
proxy.$global.openNewWin('template/detail/snapshot_detail', row.createUser+'在'+row.createTime+'创建的'+row.resName+'的快照', {resId:row.resId,'batchNo':row.batchNo},false);
}
//查看资源详情
let goResDetail = (row) => {
proxy.$global.openDetail(row.resId, row.resType, proxy);
}
//查看业务系统
let goBus = (row) => {
title.value = row.resName+'所属业务系统信息';
let busTypeAdmin = [];
for (let i = 0; i < row.busTypeName.split(',').length; i++) {
for (let j = 0; j < row.nickname.split(',').length; j++) {
if (i==j){
busTypeAdmin.push(row.busTypeName.split(',')[i]+'('+row.nickname.split(',')[i]+')')
}
}
}
busType.value = busTypeAdmin;
showBus.value = true;
}
//关闭弹框
let cancelBtn = () => {
showBus.value = false;
}
Vue.onMounted(()=>{
getEcharts();
getDataList();
getEchartsData();
})
return{
height,
formSize,
queryParams,
tableData,
btnGroupType,
bizChartsRefs,
devChartsRefs,
snapshotChartsRefs,
handleBtnGroup,
datetimerange,
visiblePopover,
handleChangeDatetime,
getResType,
getBizType,
handleQuery,
loaddata,
handleDel,
handleDetail,
goResDetail,
goBus,
showBus,
cancelBtn,
title,
busType
}
}
}
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
<div class="search">
<div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
<el-form :inline="true">
<el-form-item>
<el-tooltip placement="bottom-start">
<template #content> 资源名称 <br /> 资源ip <br /> 业务名称</template>
<el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" />
</el-tooltip>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-dropdown>
<cm-user-type-tree-input @callback="getUser" clearable collapseTags multiple/>
</el-dropdown>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
</el-form-item>
</el-form>
<el-button-group>
<el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近7天</el-button>
<el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button>
<el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button>
<el-popover
v-model:visible="visiblePopover"
:width="420"
placement="bottom-end">
<template #reference>
<el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button>
</template>
<el-date-picker
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
@change="handleChangeDatetime"
v-model="datetimerange"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-popover>
</el-button-group>
</div>
</div>
<el-row :gutter="20" style="padding: 3px 10px;">
<el-col :span="12">
<h3 style="text-align: left;color:#2b9eef;">资源类型快照量TOP5</h3>
<div ref="bizChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
<el-col :span="12">
<h3 style="text-align: left;color:#2b9eef;">业务系统快照量TOP5</h3>
<div ref="devChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
<el-col :span="12">
<h3 style="text-align: left;color:#2b9eef;">人员快照量</h3>
<div ref="peopleSSChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
<el-col :span="12">
<h3 style="text-align: left;color:#2b9eef;">快照量</h3>
<div ref="snapshotChartsRefs" style="width: 100%;height: 320px;border: 1px solid #e4e4e4;"></div>
</el-col>
</el-row>
<div class="search-table">
<h3 style="text-align: left;color:#2b9eef;">快照信息</h3>
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:height="height - 423"
:loading="false"
:pageSize="queryParams.pageSize"
:showBorder="true"
:showIndex="true"
:showPage="true"
:showSelection="false"
:showTools="true"
:total="queryParams.count"
@loaddata="loaddata">
<template #default="{row,prop,column}">
<div v-if="prop == 'resName'">
<!-- 资源名称点击事件 -->
<el-tooltip placement="top">
<el-button @click.prevent="goResDetail(row)" size="small" type="text">
<span class="">{{row.resName}}</span>
</el-button>
<template #content>{{row.resName}}</template>
</el-tooltip>
</div>
<div v-if="prop == 'busTypeName'">
<div v-if="(row.busTypeName || '').split(',').length <= '3'">
<div v-if="row.busTypeName != null && row.busTypeName.indexOf(',') != -1" v-for="item in row.busTypeName.split(',')">
<el-tooltip placement="top">
<template #content>{{item}}</template>
<el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag>
</el-tooltip>
</div>
<div v-else-if="row.busTypeName != null && row.busTypeName.indexOf(',') == -1 ">
<el-tooltip placement="top">
<template #content>{{row.busTypeName}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.busTypeName}}</el-tag>
</el-tooltip>
</div>
</div>
<div v-else>
<el-button @click="goBus(row)" size="small" type="text">
<span>共计:{{row.nickname.split(',').length}}个业务</span>
</el-button>
</div>
</div>
<div v-if="prop == 'nickname'">
<div v-if="(row.nickname || '').split(',').length <= '3'">
<div v-if="row.nickname != null && row.nickname.indexOf(',') != -1" v-for="item in row.nickname.split(',')">
<el-tooltip placement="top">
<template #content>{{item}}</template>
<el-tag style="margin: 2px;" type="info" class="mx-1" effect="light">{{item}}</el-tag>
</el-tooltip>
</div>
<div v-else-if="row.nickname != null && row.nickname.indexOf(',') == -1 ">
<el-tooltip placement="top">
<template #content>{{row.nickname}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.nickname}}</el-tag>
</el-tooltip>
</div>
</div>
<div v-else>
<el-button @click="goBus(row)" size="small" type="text">
<span>共计:{{row.nickname.split(',').length}}个业务负责人</span>
</el-button>
</div>
</div>
<div v-if="prop == 'admin'">
<div v-if="row.admin != null">
<el-tooltip placement="top">
<template #content>{{row.admin}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.admin}}</el-tag>
</el-tooltip>
</div>
</div>
<div v-if="prop == 'createUser'">
<div v-if="row.createUser != null">
<el-tooltip placement="top">
<template #content>{{row.createUser}}</template>
<el-tag type="info" class="mx-1" effect="light">{{row.createUser}}</el-tag>
</el-tooltip>
</div>
</div>
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg" @click="handleDetail(scope.row)">
<i class="el-icon-document" title="详情"></i>
</span>
</div>
</template>
</cm-table-page>
</div>
</div>
</div>
<cm-dialog :showDialogVisible="showBus" :showFooter="false" :title="title" @hidedialog="cancelBtn"
width="700px">
<template v-slot>
<div class="dialog">
<div v-model="busType" v-for="item in busType" style="display: inline-block">
<el-tag type="info" class="mx-1" effect="light">{{item}}</el-tag>
</div>
</div>
</template>
</cm-dialog>
... ...
export default {
name:"snapshotOverview",
template:"",
setup(props,{attrs,slots,emit}){
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let btnGroupType = Vue.ref(0);
let datetimerange = Vue.ref([]);
let visiblePopover = Vue.ref(false);
let queryParams = Vue.ref({
keyWord:'',
resType:'',
busId:'',
userName:'',
time:"today",
pageNum: 1,
pageSize: 10,
count:0,
})
//表格字段
let tableData = Vue.ref({
dataList: [],
columns: [
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
width: '200',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center'
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
width: '130'
}, {
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
width: '130'
}, {
prop: 'busTypeName',
label: '所属业务系统',
sortable: true,
align: 'center',
width: '270'
},
{
prop: 'nickname',
label: '业务系统负责人',
sortable: true,
align: 'center',
width: '150'
},
{
prop: 'createUser',
label: '快照创建人',
sortable: true,
align: 'center',
width: '130'
},
{
prop: 'createTime',
label: '快照创建时间',
sortable: true,
align: 'center',
width: '170'
},
]
})
let loaddata = ({page, limit}) => {
queryParams.value.pageNum = page;
queryParams.value.pageSize = limit;
getDataList();
}
// 获取列表
let getDataList = () => {
proxy.$http.get(`/api-web/snapshot/overview/getList`,queryParams.value,(res)=>{
tableData.value.dataList = res.data;
queryParams.value.count = res.count;
},(err)=>{
console.log(err);
})
};
let getEchartsData = ()=>{
let resTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/overview/resTypeTop`,queryParams.value,(res)=>{
res.object.forEach(item=>{
resTypeData.xaxis.push(item.xaxis);
resTypeData.yaxis.push(item.yaxis)
})
bizCharts.setOption({
xAxis:{
data:resTypeData.xaxis,
},
series:[
{
data:resTypeData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
let busTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/overview/busTop`,queryParams.value,(res)=>{
res.object.forEach(item=>{
busTypeData.xaxis.push(item.xaxis);
busTypeData.yaxis.push(item.yaxis)
})
devCharts.setOption({
xAxis:{
data:busTypeData.xaxis,
},
series:[
{
data:busTypeData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
let snapshotNumData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/overview/snapshotNum`,queryParams.value,(res)=>{
res.object.forEach(item=>{
snapshotNumData.xaxis.push(item.xaxis);
snapshotNumData.yaxis.push(item.yaxis)
})
snapshotCharts.setOption({
yAxis:{
data:snapshotNumData.xaxis,
},
series:[
{
data:snapshotNumData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
var peopleSSChartsData = [];
proxy.$http.get(`/api-web/snapshot/overview/snapshotNumByUser`,queryParams.value,(res)=>{
res.object.forEach(item=>{
let list = {};
list.name = item.xaxis + '('+item.yaxis+ ')';
list.value = item.yaxis;
peopleSSChartsData.push(list);
})
console.log(peopleSSChartsData);
peopleSSCharts.setOption({
series:[
{
data:peopleSSChartsData
}
]
});
},(err)=>{
console.log(err);
})
}
// 查询事件
let handleQuery = ()=> {
queryParams.value.pageSize=10;
queryParams.value.pageNum=1;
getDataList();
getEchartsData();
}
let getResType = (arr) => {
let types = arr.map(function (v) {
return v.id;
});
queryParams.value.resType = types.join(',');
}
let getBizType = (arr) => {
let types = arr.map(function (v) {
return v.busId;
});
queryParams.value.busId = types.join(',');
}
let getUser = (arr) => {
let types = arr.map(function (v) {
return v.username;
});
queryParams.value.userName = types.join(',');
}
// 按钮组点击事件
let handleBtnGroup = (val)=>{
queryParams.value.time = val;
if (val == 4){
visiblePopover.value = !visiblePopover.value;
}else{
visiblePopover.value = false;
getDataList();
getEchartsData();
}
};
// echarts
let bizChartsRefs = Vue.ref(null);
let devChartsRefs = Vue.ref(null);
let snapshotChartsRefs = Vue.ref(null);
let peopleSSChartsRefs = Vue.ref(null);
let bizCharts = Vue.ref('');
let devCharts = Vue.ref('');
let snapshotCharts = Vue.ref('');
let peopleSSCharts = Vue.ref('');
let showBus = Vue.ref(false);
let title = Vue.ref('');
let busType = Vue.ref();
let getEcharts = ()=>{
bizCharts = echarts.init(bizChartsRefs.value);
let bizOption = {
grid:{
top:"8%",
bottom:"4%",
left:"2%",
containLabel:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
color:"#60a0f7",
xAxis: {
type: 'category',
data: [],
axisTick:false,
axisLabel: {
interval: 0,
formatter: val => {
// 标签长度
const valLength = val.length
if (valLength > 8) {
return val.slice(0,7) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
axisLine:{
show:true,
},
//分隔线样式
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [
{
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
borderRadius:[20,20,0,0]
}
}
]
}
bizCharts.setOption(bizOption);
devCharts = echarts.init(devChartsRefs.value);
let devOption = {
grid:{
top:"8%",
bottom:"4%",
left:"2%",
containLabel:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
color:"#60a0f7",
xAxis: {
type: 'category',
data: [],
axisTick:false,
axisLabel: {
interval: 0,
formatter: val => {
// 标签长度
const valLength = val.length
if (valLength > 8) {
return val.slice(0,7) + '...';
} else {
return val
}
}
}
},
yAxis: {
type: 'value',
axisLine:{
show:true,
},
//分隔线样式
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [
{
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
borderRadius:[20,20,0,0]
}
}
]
}
devCharts.setOption(devOption);
snapshotCharts = echarts.init(snapshotChartsRefs.value);
let shapshotOption = {
grid:{
top:"8%",
bottom:"8%",
left:"2%",
containLabel:true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
color:"#EF8166",
xAxis: {
type: 'value',
axisLine:{
show:true,
},
//分隔线样式
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
yAxis: {
type: 'category',
data: [],
axisTick:false,
},
series: [
{
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
borderRadius:[0,20,20,0]
}
}
]
}
snapshotCharts.setOption(shapshotOption);
peopleSSCharts = echarts.init(peopleSSChartsRefs.value);
let peopleOption = {
grid:{
top:"14%",
bottom:"8%"
},
//color:"#60a0f7",
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top:"middle",
right:"10%",
itemWidth:35,
icon:"rect",
},
series: [
{
data: [],
center: ['40%', '50%'],
type: 'pie',
//高亮状态的扇区和标签样式。
emphasis: {
label: {
show: true
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
show: false
},
}
]
}
peopleSSCharts.setOption(peopleOption);
}
// 表格删除事件
let handleDel = (row)=>{
// console.log(row);
proxy.$global.confirm("确认删除吗?", function () {
deleteItems([row.resId],[row.batchNo]);
})
}
//删除
let deleteItems = (ids,nos) => {
let params = {
resId: ids.toString(),
batchNo:nos.toString(),
}
proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
handleQuery();
}
})
}
//快照详情
let handleDetail = (row)=>{
proxy.$global.openNewWin('template/detail/snapshot_detail', row.createUser+'在'+row.createTime+'创建的'+row.resName+'的快照', {resId:row.resId,'batchNo':row.batchNo},false);
}
//查看业务系统
let goBus = (row) => {
title.value = row.resName+'所属业务系统信息';
let busTypeAdmin = [];
for (let i = 0; i < row.busTypeName.split(',').length; i++) {
for (let j = 0; j < row.nickname.split(',').length; j++) {
if (i==j){
busTypeAdmin.push(row.busTypeName.split(',')[i]+'('+row.nickname.split(',')[i]+')')
}
}
}
busType.value = busTypeAdmin;
showBus.value = true;
}
//关闭弹框
let cancelBtn = () => {
showBus.value = false;
}
//查看资源详情
let goResDetail = (row) => {
proxy.$global.openDetail(row.resId, row.resType, proxy);
}
// 时间范围快捷键 修改事件
let handleChangeDatetime = (value)=>{
visiblePopover.value = false;
queryParams.value.time = value.join(',');
getDataList();
getEchartsData();
}
Vue.onMounted(()=>{
getEcharts();
getEchartsData();
getDataList();
})
return {
height,
tableData,
queryParams,
btnGroupType,
loaddata,
handleBtnGroup,
bizChartsRefs,
devChartsRefs,
snapshotChartsRefs,
peopleSSChartsRefs,
datetimerange,
visiblePopover,
handleChangeDatetime,
handleDel,
goResDetail,
handleDetail,
goBus,
showBus,
cancelBtn,
title,
busType,
getResType,
getBizType,
handleQuery,
getUser
}
}
}
... ...
... ... @@ -1135,6 +1135,8 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
});
//告警级别
form.on('select(alarmLevelSearch)', function (data) {
//lsq 切换告警级别时,获取统计告警量接口的参数更改 2022-08-08
alarmLevel = $("#alarmLevelSearchBox").val()
reloadTable();
});
// 告警确认
... ...
... ... @@ -921,6 +921,8 @@
class="layui-btn layui-btn-danger layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click">
失败
</button>`;
/*lsq 连接失败时tips显示连接失败 2022-08-08*/
linkStateTips='连接失败';
}
}
}}
... ...
... ... @@ -244,6 +244,24 @@ const routes = [{
name: 'busyConfig',
component: () => myImport('views/busyConfig/index')
},
//快照管理
{
path: '/vue3/snapshot',
name: 'snapshot',
component: () => myImport('views/snapshot/index')
},
//快照历史
{
path: '/vue3/snapshot/history',
name: 'snapshotHistory',
component: () => myImport('views/snapshot/history/index')
},
//快照概览
{
path: '/vue3/snapshotOverview',
name: 'snapshotOverview',
component: () => myImport('views/snapshotOverview/index')
},
];
// hash模式: createWebHashHistory
... ...