Authored by 张凯

1、指标组管理页面优化

2、页面指标管理页面开发
... ... @@ -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) {
... ...
... ... @@ -22,6 +22,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
reloadTable();
}
});
$("#kpiflagQueryBtn").unbind().on("click", function () {
reloadTable();
})
form.on('select(change)', function (data) {
reloadTable();
})
... ... @@ -64,7 +67,9 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
, {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>'
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}
, { field: 'dimension', title: '维度', align: 'center', width: 80, templet: `
... ... @@ -88,8 +93,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
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) {
... ... @@ -135,7 +142,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', "commonDe
return;
}
//确认提示框
layer.confirm('确认删除当前采集协议及协议参数吗?', {
layer.confirm('确认删除数据吗?', {
btn: ['确定', '取消'] //按钮
}, function () {
admin.req({
... ...
/** 指标组新增 */
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('restypepageEdit', function (data) {
var id = data.id ? data.id : '';
var sessions = layui.sessions;
var accessToken = sessions.getToken().access_token;
var domainName = common.domainName;
// 表格数据
var restypepageKpiTableData = [];
// 指标自定义类型数据组装option
var restypekpitype;
//指标表格
var restypepageKpiTable;
// 加载遮罩
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;
$.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);
restypepageKpiTableData = res.object.restypePageKpis;
reloadRestypepageKpiFlagTable();
}
});
}
}
element.render('collapse');
form.render();
/**
* 加载指标表格数据
*
* */
function loadRestypepageKpiFlagTable(){
restypepageKpiTable = table.render({
elem: '#restypepage-edit-table'
, cellMinWidth: 80
, limit: 10
, even: true
, data: restypepageKpiTableData
, cols: [[
{field: 'kpiName', title: '指标名称', align: 'center'},
{
field: 'kpiIdent', title: '指标分类', align: 'center',
templet: function (d) {
switch (d.kpiIdent) {
case '0':
return '基本指标';
case '1':
return '性能指标';
case '2':
return '状态指标';
case '3':
return '告警指标';
default:
return '';
}
}
},
{
title: '类型', align: 'center',
templet: function (d) {
var selectDom = $('<select class="type" lay-search="" class="layui-select" data-index="' + d.LAY_TABLE_INDEX + '" lay-filter="select-restypepagekpi-table-type">' +
restypekpitype +
'</select>');
selectDom.find('option:contains("' + d.type + '")').attr('selected', 'selected');
return selectDom.prop('outerHTML');
}
}, {
field: 'id', title: 'id', align: 'center', hide: true , templet: function (d) {
var inputDom = $('<input id="txt-restypepagekpi-table-id-' + d.LAY_TABLE_INDEX + '" data-index="' + d.LAY_TABLE_INDEX + '" autocomplete="off" class="layui-input txt-restypepagekpi-table-id">');
if (d.id != '' && d.id != null) {
inputDom.attr("value", d.id);
}
return inputDom.prop('outerHTML');
}
}
, {
field: 'sort', title: '排序', align: 'center',
templet: function (d) {
var inputDom = $('<input id="txt-restypepagekpi-table-sort-' + d.LAY_TABLE_INDEX + '" data-index="' + d.LAY_TABLE_INDEX + '" type="number" autocomplete="off" class="layui-input txt-restypepagekpi-table-sort">');
if (d.sort != null) {
inputDom.attr("value", d.sort);
}
return inputDom.prop('outerHTML');
}
}, {
title: '操作',
width: 100,
align: 'center',
templet: '<div><span data-index="{{d.LAY_TABLE_INDEX}}" 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');
restypepageKpiTableData[index].type = data.value;
});
// 排序输入框输入事件
$('.txt-restypepagekpi-table-sort').change(function () {
restypepageKpiTableData[$(this).data('index')].sort = $(this).val();
});
// 删除事件
$('.link-restypepagekpi-delete').click(function () {
restypepageKpiTableData.splice($(this).data('index'), 1);
reloadRestypepageKpiFlagTable();
});
}
});
}
// 刷新指标表格
function reloadRestypepageKpiFlagTable() {
restypepageKpiTable.reload({
page: {curr: 1},
data: restypepageKpiTableData
});
}
// 表单提交事件
form.on('submit(form-restypepage-edit)', function (data) {
loading = layer.load(2);
var restypePage = {
id: id,
resType: '',
os: '',
provider: '',
model: '',
protocol: '',
remark: '',
restypePageKpis: restypepageKpiTableData
};
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/kpi/index"]').find('.layui-tab-close').trigger('click');
layer.open({
title: '选择指标',
id: 'restypepageKpiIndexChooseHtml',
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(restypepageKpiTableData, function (j, k) {
if (e.kpiId == k.kpiId) {
flag = false;
}
});
if (flag == true) {
restypepageKpiTableData.push({
id: '',
pageId: id,
resType: restypePageData.resType,
kpiId: e.kpiId,
kpiName: e.kpiName,
kpiIdent: e.kpiIdent,
type: 'base',
sort: '1'
});
}
});
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='keyword']").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'}
, { field: 'resTypeName', title: '资源类型', align: 'center'}
, { field: 'osName', title: '操作系统', align: 'center'}
, { field: 'provderName', title: '厂商', align: 'center'}
, { field: 'protocolName', title: '采集协议', align: 'center'}
, { field: 'model', title: '型号', align: 'center'}
, { field: 'keyword', title: '辅助关键字', align: 'center'}
, { field: 'kpis', title: '配置指标', align: 'left',width: 300}
, { field: 'remark', title: '备注', align: 'left',width: 300}
, {
title: '操作', align: 'center', 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) {
// 点击编辑事件
$('.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');
});
});
}
});
});
... ...
... ... @@ -17,6 +17,10 @@
<input style="display: none" type="text">
</div>
</div>
<button class="layui-btn layui-btn-normal" id="kpiflagQueryBtn" type="button">
<!--lsq 查询按钮取消掉图标 2022-06-30-->
查询
</button>
</div>
</form>
</div>
... ...
<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">
<select name="resType" lay-verify="required" lay-search="" id="restypepagekpi_select_resType" 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="os" id="restypepagekpiOs" 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="provider" id="restypepagekpiProvider" 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="protocol" id="restypepagekpiCollProtocol" 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">
<input type="text" name="model" 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">
<input class="layui-input" lay-verify="required" name="sort" value="1" placeholder="请输入排序" type="number">
</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">
<input type="text" name="keyword" 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="keyword" placeholder="输入关键字,回车搜索" lay-tips="关键字检索包含:</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>
... ...