monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 张凯
Commit ff5077c9cde2e9aeab6c0e216bc414c86c0931a4 2 parents f1dfccbc 42f3d5c5

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into joke

Inline Side-by-side
Showing 32 changed files with 1559 additions and 262 deletions
... ... @@ -24,6 +24,8 @@ layui.define(['commonDetail','common'], function (exports) {
var xnxxKpi = "KPIE2174352,KPIC0A94965";
//运行状态信息
var yxztxx = "KPIE4B51D5C,KPI7F91F142";
//配置信息
var pzxx = "";
reload()
... ... @@ -36,7 +38,9 @@ layui.define(['commonDetail','common'], function (exports) {
// 屏蔽KPI3B6A0393（连接数使用率），增加KPIC0A94965（已打开会话数）
commonDetail.renderText("ali_cloud_rds_xnxxinfo",resId,xnxxKpi);
//运行状态信息
commonDetail.renderText("ali_cloud_rds_yxztinfo",resId,yxztxx);
commonDetail.renderText("ali_cloud_rds_linkinfo",resId,yxztxx);
//配置信息
commonDetail.renderText("ali_cloud_rds_setinfo",resId,pzxx);
// CPU使用率
commonDetail.renderGauge("ali_cloud_rds_cpu_rate",resId,"KPI7054BC34");
// 内存使用率
... ...
... ... @@ -366,37 +366,37 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
"HUAWEI_CLOUD_PHYSICSHOST": [
//{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
{
field: 'resName', title: '资源名称', minWidth: 250, sort: true,
field: 'resName', title: '资源名称', minWidth: x_250, sort: true,
templet: '#resindex_resName'
},
{field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
{field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
{field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
{field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
{field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
{field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
{field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
{field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
{field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', minWidth: x_120, align: 'center', sort: true},
{field: 'state', title: '资源状态', minWidth: x_120, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', minWidth: x_120, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true},
// 2021-11-22 徐毫杰 连接状态无数据改成展示主机状态
{field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true}
],
"HUAWEI_CLOUD_VIRTUALHOST": [
//{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
{
field: 'resName', title: '资源名称', minWidth: 250, sort: true,
field: 'resName', title: '资源名称', minWidth: x_250, sort: true,
templet: '#resindex_resName'
},
{field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
{field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
{field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_130, templet: '#cpuRateTpl', sort: true},
{field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_130, templet: '#memoryRateTpl', sort: true},
{field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
{field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
{field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
{field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
{field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
{field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
{field: 'state', title: '资源状态', minWidth: x_120, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', minWidth: x_120, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true},
{field: 'linkState', title: '连接状态', align: 'center', minWidth: x_120, templet: '#linkStateTpl', sort: true}
],
"HUAWEI_CLOUD_STORAGE": [
//{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
... ...
... ... @@ -33,7 +33,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
var exchangeSelect;
//时间段下拉框
var dataTimeSelect;
//判断调班还是换班状态
//判断替班还是换班状态
var exchangeSign=1;
//初始化时间
... ... @@ -388,12 +388,12 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
var changeUserName = '';
var changeUserAccount = '';
//调班
//替班
if (exchangeSign == 1) {
//如果已经选择了调班对象，不能再选择其他对象
//如果已经选择了替班对象，不能再选择其他对象
var judge = iSExchange(id);
if (!judge) {
layer.msg('调班过程中不能再次调班!', {icon: 7, time: 3000});
layer.msg('替班过程中不能再次替班!', {icon: 7, time: 3000});
return;
}
var changeUserId = exchangeSelect.getValue('value') ? exchangeSelect.getValue('value') : '';
... ... @@ -482,7 +482,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
});
}
//是否已调班
//是否已替班
function iSExchange(id){
var value=false;
admin.req({
... ...
... ... @@ -1653,8 +1653,8 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
return d.userName+'请求'+d.dutyTime+' '+d.dutyDuration+'与您的值班时间'
+d.changeDutyTime.split(" ")[0]+' '+d.changeDutyDuration.split(" ")[0]+'进行换班，请确认';
}else{
//xx请求与您值班时间2021-09-26 18:00-8:00进行调班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行调班，请确认!';
//xx请求与您值班时间2021-09-26 18:00-8:00进行替班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行替班，请确认!';
}
}
},{
... ... @@ -1665,7 +1665,7 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
if (d.dutyChangeType == '2') {
return '换班';
} else {
return '调班';
return '替班';
}
}
... ...
... ... @@ -1673,8 +1673,8 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
return d.userName+'请求'+d.dutyTime+' '+d.dutyDuration+'与您的值班时间'
+d.changeDutyTime.split(" ")[0]+' '+d.changeDutyDuration.split(" ")[0]+'进行换班，请确认';
}else{
//xx请求与您值班时间2021-09-26 18:00-8:00进行调班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行调班，请确认!';
//xx请求与您值班时间2021-09-26 18:00-8:00进行替班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行替班，请确认!';
}
}
},{
... ... @@ -1685,7 +1685,7 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','sessions','
if (d.dutyChangeType == '2') {
return '换班';
} else {
return '调班';
return '替班';
}
}
... ...
... ... @@ -304,8 +304,8 @@ layui.define(['common', 'swiper', 'admin', 'commonDetail', 'mxClient', 'sessions
return d.userName+'请求'+d.dutyTime+' '+d.dutyDuration+'与您的值班时间'
+d.changeDutyTime.split(" ")[0]+' '+d.changeDutyDuration.split(" ")[0]+'进行换班，请确认';
}else{
//xx请求与您值班时间2021-09-26 18:00-8:00进行调班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行调班，请确认!';
//xx请求与您值班时间2021-09-26 18:00-8:00进行替班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行替班，请确认!';
}
}
},{
... ... @@ -316,7 +316,7 @@ layui.define(['common', 'swiper', 'admin', 'commonDetail', 'mxClient', 'sessions
if (d.dutyChangeType == '2') {
return '换班';
} else {
return '调班';
return '替班';
}
}
... ...
... ... @@ -905,8 +905,8 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','msgTips','l
return d.userName+'请求'+d.dutyTime+' '+d.dutyDuration+'与您的值班时间'
+d.changeDutyTime.split(" ")[0]+' '+d.changeDutyDuration.split(" ")[0]+'进行换班，请确认';
}else{
//xx请求与您值班时间2021-09-26 18:00-8:00进行调班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行调班，请确认!';
//xx请求与您值班时间2021-09-26 18:00-8:00进行替班，请确认!
return d.userName+'请求与您值班时间'+d.dutyTime+' '+d.dutyDuration+'进行替班，请确认!';
}
}
},{
... ... @@ -917,7 +917,7 @@ layui.define(['common', 'swiper', 'admin','commonDetail','mxClient','msgTips','l
if (d.dutyChangeType == '2') {
return '换班';
} else {
return '调班';
return '替班';
}
}
... ...
... ... @@ -102,10 +102,10 @@
</div>
<div class="duty-td-div-line">
{{# if(item.list.length != 1){ }}
<div class="table-duty-td-name-left" lay-filter="duty-name" data-id="{{ item.list[0].id }}" data-dutytime="{{ item.list[0].dutyTime }}" data-dutyduration="{{ item.list[0].dutyDuration }}" data-dutycena="{{ item.list[0].dutyCena }}" data-remark="{{ item.list[0].remark }}" data-userid="{{ item.list[0].userId }}" data-username="{{ item.list[0].userName }}" data-useraccount="{{ item.list[0].userAccount }}">
<div class="table-duty-td-name-right" lay-filter="duty-name" data-id="{{ item.list[0].id }}" data-dutytime="{{ item.list[0].dutyTime }}" data-dutyduration="{{ item.list[0].dutyDuration }}" data-dutycena="{{ item.list[0].dutyCena }}" data-remark="{{ item.list[0].remark }}" data-userid="{{ item.list[0].userId }}" data-username="{{ item.list[0].userName }}" data-useraccount="{{ item.list[0].userAccount }}">
<sapn>{{ item.list[0].userName }}</sapn>
</div>
<div class="table-duty-td-name-right" lay-filter="duty-name" data-id="{{ item.list[1].id }}"
<div class="table-duty-td-name-left" lay-filter="duty-name" data-id="{{ item.list[1].id }}"
data-dutytime="{{ item.list[1].dutyTime }}"
data-dutyduration="{{ item.list[1].dutyDuration }}"
data-dutycena="{{ item.list[1].dutyCena }}" data-remark="{{ item.list[1].remark }}"
... ... @@ -178,7 +178,7 @@
<div class="layui-form-item">
<label class="layui-form-label" style="width: 150px">调换类型：</label>
<div class="layui-input-block" style="margin-left: 150px">
<input type="radio" name="dutyType" lay-filter="radio-duty-type-exchange" value="0" title="调班" checked>
<input type="radio" name="dutyType" lay-filter="radio-duty-type-exchange" value="0" title="替班" checked>
<input type="radio" name="dutyType" lay-filter="radio-duty-type-exchange" value="1" title="换班">
</div>
</div>
... ...
... ... @@ -104,16 +104,17 @@
<cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
:showBorder="false" :showSelection="false" :showTools="isEditName"
:showPage="false" :height="height - 54">
:showPage="false" :height="height - 84">
<template #default="{row,prop,column}">
<div class="fileName-div" style="display: flex; align-items: center;" v-if="isEditName && prop == 'fileName'" @click="getFile(row)">
<!--<div class="fileName-div" style="display: flex; align-items: center;" v-if="isEditName && prop == 'fileName'" @click="getFile(row)">
<i :class="['iconfont', iconclass[row.type] == undefined ? 'icon-wenjian' : iconclass[row.type]]" style="font-size: 22px;margin-right: 10px;"></i>
<div>
<span @click.stop="editFileName(row,index)" v-if="isInput!=row.id">{{row.fileName}}</span>
</div>
<el-input @click.stop="" @blur="reNameFile(row,true)" v-if="isInput==row.id" type="text" v-model="row.fileName"></el-input>
</div>
</div>-->
</template>
<template #tools="{scope}" >
... ... @@ -134,9 +135,7 @@
</el-button>
</li>
</ul>
</div>
</div>
</template>
</cm-table-page>
... ...
... ... @@ -181,9 +181,7 @@ export default {
},
render: function (row) {
let cls = iconclass[row.type] == undefined ? 'icon-wenjian' : iconclass[row.type];
// let inputFileName=row.fileName;
// return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><input value="${inputFileName}"></input>`
return `<i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span>`
return `<div style="cursor: pointer"><i class="iconfont ${cls}" style="font-size: 22px;margin-right: 10px;"></i><span>${row.fileName}</span></div>`
}
},
{
... ...
... ... @@ -135,7 +135,7 @@ global.openBlankWindow = (url, width, height) => {
let lyaui = global.layui;
lyaui.layer.open({
type: 2,
title:'',
title: '',
area: [width, height],
content: url //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
... ... @@ -151,7 +151,18 @@ global.viewer = (path, proxy) => {
if (res && res.success) {
global.openBlankWindow("/src/lib/extend/pdfjs/web/viewer.html?test=" + encodeURIComponent(res.str));
} else {
global.showMsg((res.msg == undefined || res.msg == '' || res.msg == null) ? "该文档不支持预览！" : res.msg, "error")
var access_token = 'access_token=' + proxy.$http.getToken();
let viewUrl =`/api-web/openoffice/downloadByPath?path=${encodeURIComponent(path)}&${access_token}`;
let mimeType = res.object;
// TODO 浏览器不能播放视频
// 图片视频
// if (mimeType.indexOf("image") != -1 || mimeType.indexOf("video") != -1) {
// global.openBlankWindow( sessionStorage.getItem('domainName') + viewUrl);
// return;
// }
global.confirm("文档不支持预览，是否下载！", function () {
proxy.$http.downloadFile(viewUrl, {});
});
}
})
}
... ... @@ -161,13 +172,7 @@ global.viewer = (path, proxy) => {
* @param path
*/
global.viewResTopo = (resId) => {
// let url = `${sessionStorage.getItem('graphEditorOrigin')}/jgraph/grapheditor/index.html?access_token=${localStorage.getItem('access_token')}&id=${topoId}`;
// let height = window.innerHeight;
// let width = window.innerWidth;
// global.openBlankWindow(url, width, height);
let lyaui = global.layui;
lyaui.common.viewResTopo(resId)
}
... ... @@ -202,18 +207,18 @@ global.openCmdbAssets = (resTypeId, resId, proxy) => {
}
global.openDetail = (resId, resType, proxy) => {
let lyaui = global.layui;
let lyaui = global.layui;
let editFlag = false;
let provider = '';
let name= '';
let name = '';
let ip = '';
let resTypeName = '';
let adminName = '';
let manageIp = '';
let collProtocol = '';
// 获取资源详情
// 获取资源详情
proxy.$http.get(`/api-web/v32/res/detail/${resId}`, {}, function (res) {
if (res && res.map) {
let data = res.map;
... ... @@ -226,14 +231,11 @@ global.openDetail = (resId, resType, proxy) => {
collProtocol = data.collProtocol;
name = data.resName;
lyaui.commonCols.detailPage(resId, resType,editFlag,provider,name,ip,resTypeName,adminName,manageIp,collProtocol);
lyaui.commonCols.detailPage(resId, resType, editFlag, provider, name, ip, resTypeName, adminName, manageIp, collProtocol);
}
});
}
/**
... ...
<title>故障管理</title>
<!--<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>-->
<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>
<!--<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>-->
... ...
... ... @@ -58,7 +58,7 @@
<li class="layui-nav-item" >
<div id="toYTHView_div" >
<dd layadmin-event="toYTHViewScreen" title="一体化控制台"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px"></a></dd>
<dd layadmin-event="toYTHViewScreen" title="一体化监控台"><a><img src="/src/style/img/icon-yitihuadaping.png" style="width: 16px;height: 16px"></a></dd>
</div>
</li>
... ... @@ -724,7 +724,7 @@
{{#
var linkStateHtml = '';
var linkStateTips = '无连接信息';
if(d.linkStateList && d.linkStateList.length) {
if(d.linkStateList && d.linkStateList.length >=0 ) {
linkStateTips = '';
if(d.linkStateList.length == 1) {
var linkState = d.linkStateList[0];
... ... @@ -737,22 +737,43 @@
data-message="${d.message}"
data-state="${d.state}"
data-id="${d.resId}_bizdanger"
class="layui-btn showTip layui-btn-danger layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click">
class="layui-btn layui-btn-danger layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click">
失败
</button>`;
}
} else {
linkStateTips += `<ul class='ul-link-state-tips'>`;
layui.each(d.linkStateList, function(index, value) {
if(value.state.indexOf('成功') !== -1) {
linkStateTips += `<li class='li-link-state-tips-green'>${value.protocol}: ${value.state}</li>`;
linkStateHtml += '<span class="layui-badge-dot layui-bg-green"></span>';
} else {
linkStateTips += `<li class='li-link-state-tips-red'>${value.protocol}: ${value.state}</li>`;
linkStateHtml += '<span class="layui-badge-dot layui-bg-red"></span>';
if(d.linkStateList.length == 0){
if(d.hostState == 'active' || d.hostState == 'connected' || d.hostState == '正常' ){
linkStateHtml = '<button type="button" class="layui-btn layui-btn-radius layui-bg-green layui-btn-xs p-0-15 cant-click">成功</button>';
linkStateTips += `<li class='li-link-state-tips-red'>自动发现: 连接成功</li>`;
}else{
linkStateHtml = `<button type="button"
id="${d.resId}_bizdanger"
data-message="${d.message}"
data-state="${d.state}"
data-id="${d.resId}_bizdanger"
class="layui-btn layui-btn-danger layui-bg-red layui-btn-radius layui-btn-xs p-0-15 cant-click">
失败
</button>`;
if(d.hostState!=''){
linkStateTips += `<li class='li-link-state-tips-red'>自动发现: 连接失败</li>`;
}else{
linkStateTips += `<li class='li-link-state-tips-red'>ssh: 连接失败</li>`;
}
}
});
linkStateTips += '</ul>';
}else{
linkStateTips += `<ul class='ul-link-state-tips'>`;
layui.each(d.linkStateList, function(index, value) {
if(value.state.indexOf('成功') !== -1) {
linkStateTips += `<li class='li-link-state-tips-green'>${value.protocol}: ${value.state}</li>`;
linkStateHtml += '<span class="layui-badge-dot layui-bg-green"></span>';
} else {
linkStateTips += `<li class='li-link-state-tips-red'>${value.protocol}: ${value.state}</li>`;
linkStateHtml += '<span class="layui-badge-dot layui-bg-red"></span>';
}
});
linkStateTips += '</ul>';
}
}
}
}}
... ...
<title>资源视图</title>
<title>资产视图</title>
<iframe src="/vue3/index.html#/res/list" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -49,6 +49,8 @@ const assets = (props, {attrs, slots, emit}) => {
});
}
/**
* 新增资产
* <p>
... ... @@ -89,6 +91,19 @@ const assets = (props, {attrs, slots, emit}) => {
showDialog(true);
}
let checkAssets = () =>{
let data = btnType.value.data;
let size = 0;
data.forEach(function (v){
if( !v.value || v.value == '' || v.value == null){
size ++;
}
})
return size == data.length;
}
/**
* 新增资产
* <p>
... ... @@ -100,6 +115,11 @@ const assets = (props, {attrs, slots, emit}) => {
data.map(function (v){
v.extend = JSON.stringify(v.extend);
})
if(checkAssets()){
proxy.$global.showMsg(`请填写资产信息，不能全部为空！`,'warning');
return;
}
proxy.$http.post(`/api-web/person/assets/add/${props.parentNode.id}`,data , function (res) {
if (res && res.success) {
proxy.$global.showMsg("添加成功");
... ... @@ -121,6 +141,11 @@ const assets = (props, {attrs, slots, emit}) => {
data.map(function (v){
v.extend = JSON.stringify(v.extend);
})
if(checkAssets()){
proxy.$global.showMsg(`请填写资产信息，不能全部为空！`,'warning');
return;
}
proxy.$http.post(`/api-web/person/assets/edit/${props.parentNode.id}`, data, function (res) {
if (res && res.success) {
proxy.$global.showMsg("编辑成功");
... ... @@ -452,4 +477,4 @@ export default {
rules,
}
}
}
\ No newline at end of file
}
... ...
... ... @@ -132,7 +132,8 @@ export default {
if (this.$route.query.msgKey){
document.getElementById("goDP").style.display="block"
}
};
document.title = '电子税务局大屏';
},
unmounted () {
window.removeEventListener('resize', this.screenAdapter)
... ...
<el-dialog v-model="APMVisible" :title="titleName" width="60%" @close="closeDialog">
<el-row>
<el-col :span="24">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>-->
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<el-button @click="saveList" type="primary">保存</el-button>
</div>
</el-dialog>
... ...
export default {
name: 'APM',
template: '',
components: {},
data () {
return {
titleName:'添加内容',
tableVisible:false,//添加配置列表是否显示
APMVisible: true,
columns:[
{
prop: 'busTypeName',
label: '业务系统',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'ip地址',
sortable: true,
align: 'center',
},
{
prop: 'kpiName',
label: '指标名称',
sortable: true,
align: 'center',
},
{
prop: 'flag',
label: '指标标识',
sortable: true,
align: 'center',
}
],
// tabSecondList:[],//节点配置列表数据
}
},
computed: {},
setup(){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
return {
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
init,
onReset,
onBtnSearch
}
},
methods: {
//取消节点列表配置
cancleList(){
this.APMVisible=false;
},
//保存节点添加配置
saveList(){
this.APMVisible=false;
},
//重新加载表格数据
loadTableDataList(){
this.getNodeList()
},
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackAPM', 'log');
}
},
mounted () {
this.init();
this.getNodeList();
},
unmounted () {}
}
\ No newline at end of file
... ...
<el-dialog v-model="applicationMonitorVisible" :title="titleName" width="60%" @close="closeDialog">
<el-row>
<el-col :span="24">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>-->
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<el-button @click="saveList" type="primary">保存</el-button>
</div>
</el-dialog>
... ...
export default {
name: 'applicationMoni',
template: '',
components: {},
data () {
return {
titleName:'添加内容',
applicationMonitorVisible: true,
columns:[
{
prop: 'busTypeName',
label: '业务系统',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '链路id',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '链路名称',
sortable: true,
align: 'center',
}
],
}
},
computed: {},
setup(){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
return {
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
init,
onReset,
onBtnSearch
}
},
methods: {
//取消节点列表配置
cancleList(){
this.applicationMonitorVisible=false;
},
//保存节点添加配置
saveList(){
this.applicationMonitorVisible=false;
},
//重新加载表格数据
loadTableDataList(){
this.getNodeList()
},
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackApp', '1应用');
}
},
mounted () {
this.init();
this.getNodeList();
},
unmounted () {}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24">
<div class="set-add-div margin-30">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="从业务选择">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<!--
<el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>-->
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="从资源选择">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>
<!--<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
</div>-->
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="false" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="false" :height="(height - 500)">
<template #default="{row,prop,column}">
<div v-if="prop == 'kpiName'" class="list-data">
<span class="list-data-text">指标: {{row.kpiName }}</span>
<img :id="row.index" @click="deleteItem(row.id, row)" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" class="img-delete cursorClass">
</div>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<!--<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<el-button @click="saveList" type="primary">保存</el-button>
</div>-->
... ...
export default {
name: 'basicEnvironment',
template: '',
components: {},
data () {
return {
columns:[
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'kpiName',
label: '指标名称',
sortable: true,
align: 'center',
}
],
environmentTableData: [
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
],//基础环境表格数据
}
},
computed: {},
setup(){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
return {
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
init,
onReset,
onBtnSearch
}
},
methods: {
//取消节点列表配置
cancleList(){
this.APMVisible=false;
},
//保存节点添加配置
saveList(){
this.APMVisible=false;
},
//重新加载表格数据
loadTableDataList(){
this.getNodeList()
},
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackLog', 'log');
},
//删除表格指标
deleteItem(id, list){
let params={
id:id,
list:list
}
this.$emit('callbackDelete',params)
}
},
mounted () {
this.init();
this.getNodeList();
},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -6,7 +6,7 @@
<div class="grid-content bg-purple">
<span class="fault-book-input-text">所属业务</span>
<!-- <el-input v-model="input" placeholder="Please input 1" class="fault-book-input"/>-->
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-select class="margin-right-10" v-model="busTypeArr" filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
... ... @@ -197,7 +197,7 @@
</div>
</div>
<div class=" flex-div">
<el-button class="multiple-choice-button color-999" @click="addNetworkMonitorItem()">添加应用检测</el-button>
<el-button class="multiple-choice-button color-999" @click="addApplicationMonitor()">添加应用检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
... ... @@ -224,34 +224,41 @@
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="context-select flex-div-start margin-30">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" placeholder="从资源选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<el-row>
<BasicEnvironment @callbackDelete="deleteEnvironment"></BasicEnvironment>
<!-- <el-row>
<el-col :span="24">
<div class="context-select flex-div-start margin-30">
<span class="fault-book-input-text context-select-text">选择类型</span>
<el-select v-model="value" placeholder="从业务选择" class="margin-right-10">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" placeholder="从资源选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-col>
</el-row>-->
<!--<el-row>
<el-col :span="24">
<div class="environment-table margin-top flex-div-start margin-30">
<div class="environment-table margin-top flex-div-start margin-30">-->
<!-- <cm-table-page :columns="columnsEnvironment" :dataList="environmentTableData" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="false" :height="(height - 500)">
</cm-table-page>
<el-table :data="environmentTableData" border height="250" style="width: 100%">
<el-table-column align="center" prop="name" label="资源类型" width="180" />
<el-table-column prop="address" label="指标" class="margin-30" >
... ... @@ -265,11 +272,11 @@
</template>
</el-table-column>
</el-table>
</div>
</div>-->
</el-col>
<!-- </el-col>
</el-row>
</el-row>-->
... ... @@ -304,7 +311,7 @@
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加 APM</el-button>
<el-button class="multiple-choice-button" @click="addAPM()">添加 APM</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
... ... @@ -343,7 +350,7 @@
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加日志检测</el-button>
<el-button class="multiple-choice-button" @click="addLogMonitor()">添加日志检测</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
... ... @@ -371,7 +378,7 @@
</div>
</div>
<div>
<el-button class="multiple-choice-button" @click="addNetworkMonitorItem()">添加订阅人员</el-button>
<el-button class="multiple-choice-button" @click="addSubscriptionReport()">添加订阅人员</el-button>
<img src="./src/assets/images/faultDiagnosis/icon-item-add.png" class="multiple-choice-add-icon">
</div>
</div>
... ... @@ -386,36 +393,19 @@
</div>
<!--网络检测弹窗-->
<div class="network-monitor-popup popup-bg">
<DiagnosisNet v-if="networkMonitorVisible" @callback="getNetworkMonitorList" ></DiagnosisNet>
<!-- <div class="network-monitor-popup-left">-->
<!-- <span>-->
<!-- <div class="context-head">-->
<!-- 已配置链路-->
<!-- </div>-->
<!-- </span>-->
<!-- <span v-for="(item, index) in networkMonitorList" :key="index">-->
<!-- <span>-->
<!-- <div class="multiple-choice-button">{{item.title}}</div>-->
<!-- &lt;!&ndash;img&ndash;&gt;-->
<!-- </span>-->
<!-- </span>-->
<!-- <span>-->
<!-- <div class="multiple-choice-button">-->
<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-add.png">-->
<!-- </div>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="network-monitor-popup-right">-->
<!-- <div class="context-head">-->
<!-- <span>电子税务局网络链路配置</span>-->
<!-- <span>-->
<!-- <img src="./src/assets/images/faultDiagnosis/icon-popup-right-delete.png">-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
<!--网络检测弹窗-->
<DiagnosisNet v-if="networkMonitorVisible" :propsData="propsData" @callback="getNetworkMonitorList" ></DiagnosisNet>
<!--应用监测弹框-->
<ApplicationMoni v-if="applicationMonitorVisible" @callbackApp="getApplicationMoniList"></ApplicationMoni>
<!--APM弹框-->
<APM v-if="APMVisible" @callbackAPM="getAPMList"></APM>
<!--日志监测弹框-->
<LogMonition v-if="logMonitionVisible" @callbackLog="getLogMonitionList"></LogMonition>
<!--订阅人员弹框-->
<SubscriptionReport v-if="subscriptionReportVisible" @callbackSub="getSubscriptionReportList"></SubscriptionReport>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'faultDiagnosis',
name: 'diagnosis',
template: '',
components: {
'DiagnosisNet': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/diagnosisNet/index')
),//网络监测组件
'ApplicationMoni': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/applicationMoni/index')
),//应用监测组件
'APM': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/APM/index')
),//APM组件
'LogMonition': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/logMonition/index')
),//日志监测组件
'SubscriptionReport': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/subscriptionReport/index')
),//日志监测组件
'BasicEnvironment': Vue.defineAsyncComponent(
() => myImport('views/faultDiagnosis/components/basicEnvironment/index')
),//基础环境表格组件
},
props:['detailData'],
data () {
... ... @@ -26,37 +41,23 @@ export default {
faultAPMRadio:'1',//APM
faultLogRadio:'1',//日志
// isClickNet:0,//配置链接选择
environmentTableData: [
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
columnsEnvironment:[
//基础环境表格字段
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
name: '服务器',
address: 'CPU使用率，内存使用率，文件系统使用率',
},
prop: 'flag',
label: '指标标识',
sortable: true,
align: 'center',
}
],
],//基础环境表格数据
//网络检测选中项集合
networkMonitorList: [
{
... ... @@ -129,12 +130,28 @@ export default {
// nodeData:[{name:'',img:''}]
//所属业务列表数据
busTypeList:'',
applicationMonitorVisible:false,//应用检测弹框
APMVisible:false,//APM弹框
logMonitionVisible:false,//日志监测弹框
subscriptionReportVisible:false,//订阅人员弹框
}
},
setup(props){
let busTypeArr = props.detailData?[props.detailData.bizId]:Vue.ref();
//所属业务id
let busTypeArr = props.detailData?props.detailData.bizId:Vue.ref();
//诊断文档id
let docId= props.detailData?props.detailData.id:Vue.ref();
//模块id--网络监测，应用监测...
let targetId=Vue.ref();
let propsData=Vue.ref();//向子组件传值所属业务id
//配置详情数据
let configData=Vue.ref();
return{
busTypeArr
busTypeArr,
propsData,
docId,
targetId,
configData
}
},
computed: {},
... ... @@ -243,64 +260,101 @@ export default {
}
},
//点击添加网络检测item
addNetworkMonitorItem(){
},
//点击添加网络监测
//点击添加网络监测,type==npm
addNetNode(){
this.networkMonitorVisible = true;
let that=this;
if(this.busTypeArr){
this.networkMonitorVisible = true;
console.log("this.busTypeArr",this.busTypeArr,this.configData)
if(this.configData){
this.configData.map((item,index)=>{
if(item.type=='npm'){
that.targetId=item.targetId;
}
})
}
this.propsData={
bizId:this.busTypeArr,
docId:this.docId,
targetId:this.targetId
}
}else{
this.$global.showMsg('请选择所属业务','warning')
}
},
//关闭网络测试添加配置节点弹框
getNetworkMonitorList(itemData){
console.log("itemdata",itemData)
this.networkMonitorVisible=false;
// this.networkMonitorList=itemData;
}
/* //点击已配置链路
clickList(item,index){
this.isClickNet=index;
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
this.nodeData.push({name:'',img:''})
},
//点击添加应用检测
addApplicationMonitor(){
this.applicationMonitorVisible=true;
//新增配置链路节点
addSet(){
this.nodeData=[{name:'',img:''}]
},
//删除配置节点
deletNode(item){
//关闭应用监测添加弹框
getApplicationMoniList(itemData){
this.applicationMonitorVisible=false;
// this.applicationMonitorList=itemData;
},
//获取配置链接节点数据
getNodeData(){
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
this.nodeData.push({name:'',img:''})
}*/
//点击添加APM弹框
addAPM(){
this.APMVisible=true;
},
//关闭APM弹框
getAPMList(itemData){
this.APMVisible=false;
// this.apmMonitorList=itemData;
},
//点击添加日志监测弹框
addLogMonitor(){
this.logMonitionVisible=true;
},
//关闭日志监测弹框
getLogMonitionList(itemData){
this.logMonitionVisible=false;
// this.logDetectionList=itemData;
},
//点击添加订阅人员报告弹框
addSubscriptionReport(){
this.subscriptionReportVisible=true;
},
//关闭订阅人员报告弹框
getSubscriptionReportList(itemData){
this.subscriptionReportVisible=false;
// this.subscriptionReportList=itemData;
},
//基础环境指标删除回调函数
deleteEnvironment(obj){
this.deleteItem(obj.id,obj.list)
},
//根据诊断文档id获取配置详情
getDetailByid(){
let that=this;
if(this.docId){
let params={}
this.$http.get('/api-web/fault/conf/detail/'+this.docId,params,function (res){
if(res){
that.configData=res.data;
// that.targetId=
}
})
}
}
},
mounted () {
this.init()
this.getDetailByid();
},
unmounted () {}
... ...
... ... @@ -9,7 +9,7 @@
</div>
<div @click="clickList(item,index)" :class="['list-net',{'isActive':index==isClickNet}]" v-for="(item, index) in networkMonitorList" :key="index">
<div class="flex-div-center ">
<div class="multiple-choice-button">{{item.title}}</div>
<div class="multiple-choice-button">{{item.linkName}}</div>
<img v-show="index==isClickNet" class="img-delete" src="./src/assets/images/faultDiagnosis/icon-item-delete.png" alt="">
</div>
</div>
... ... @@ -39,7 +39,8 @@
<i v-if="item.name" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
<i class="icon-step"></i>
</div>
<span :class="['list-line',{'isActive':item.name && index<nodeData.length}]"></span>
<!-- <span :class="['list-line',{'isActive':item.name && index<nodeData.length}]"></span>-->
<span :class="['list-line',{'isActive':index<nodeData.length}]"></span>
</div>
<div v-show="item.name" class="list-step-name">
{{item.name}}
... ... @@ -71,24 +72,29 @@
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<!--<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>-->
<el-select class="margin-right-10" v-model="resTypeArr" @change="changeRes" filterable clearable collapse-tags placeholder="请选择资源">
<el-option
v-for="item in resTypeList"
:label="item.resName" :value="item.resId"></el-option>
</el-select>
<el-dropdown class="margin-right-10">
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
</el-dropdown>-->
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-select class="margin-right-10" v-model="kpiTypeArr" filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<!-- <el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />-->
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
... ... @@ -97,6 +103,10 @@
</div>
</el-col>
</el-row>
<el-row class="flex-div-start" style="margin-bottom: 10px;margin-top: 10px;padding-top:10px;border-top:1px solid #ebeef5" >
<span>配置链路名称</span>
<el-input style="flex:1;margin-left:10px;" class="margin-right-10" v-model="linkName" placeholder="输入链路名称" />
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
... ...
export default {
name: 'faultDiagnosis',
name: 'diagnosisNet',
template: '',
components: {},
// props:['networkMonitorList'],
props:['propsData'],
data () {
return {
titleName:'故障新增内容',
apiUrl1:'/api-web/fault/conf/netLink/saveLinkAndNodeInfo',//保存网络链路信息一节链路节点
apiUrl2:'/api-web/fault/conf/netLink/getNetLinkList',//根据targetId获取链路信息列表
tableVisible:false,//添加配置列表是否显示
networkMonitorVisible: true,
isClickNet:-1,//配置链接选择
... ... @@ -36,12 +38,7 @@ export default {
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '资源名称',
... ... @@ -49,12 +46,6 @@ export default {
align: 'center',
},
{
prop: 'ip',
label: 'ip地址',
sortable: true,
align: 'center',
},
{
prop: 'kpiName',
label: '指标名称',
sortable: true,
... ... @@ -65,53 +56,157 @@ export default {
label: '指标标识',
sortable: true,
align: 'center',
}
},
{
prop: 'name',
label: '标识名称',
sortable: true,
align: 'center',
},
],
// tabSecondList:[],//节点配置列表数据
addSetLIstVisible:true,//无节点配置列表是的添加配置
}
},
computed: {},
setup(){
setup(props){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let resTypeArr = Vue.ref();
let kpiTypeArr = Vue.ref([]);
// let busTypeArr = Vue.ref([]);
let targetId=Vue.ref();//所属模块id
let bizId=Vue.ref();//所属业务id
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
//配置链路名称
let linkName=Vue.ref();
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
//根据业务id获取资源列表
let paramsRes={
busId:proxy.bizId
}
proxy.$http.get("/api-web/fault/conf/resource/getResourceByBusId", paramsRes, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
proxy.resTypeList = res.data;
}
})
proxy.getResData();
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let getResData=()=>{
//根据业务id获取指标列表
let paramsKpi={
resId:proxy.resTypeArr
}
proxy.$http.get("/api-web/fault/conf/kpi/getKpiByResId", paramsKpi, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
}
let changeRes=(val)=>{
proxy.getResData();
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.resTypeArr = '';
proxy.kpiTypeArr = '';
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
//获取链路信息列表
let getNetLinkList=()=>{
console.log("333",proxy.targetId)
let params={
targetId:proxy.targetId
}
proxy.$http.get(proxy.apiUrl2,params,function (res){
if(res){
proxy.networkMonitorList=res.data;
proxy.getNodeData();
}
})
}
//保存网络链路信息及链路节点
let saveLinkAndNodeInfo=(row)=>{
let params={
bNetLink:{
linkName:proxy.linkName,
bizId:proxy.bizId,
targetId:proxy.targetId,
},
bNetNodeList:[
row
]
}
proxy.$http.post(proxy.apiUrl1,params,function (res){
if(res){
proxy.$global.showMsg("添加成功", "success")
proxy.tableVisible=false;
proxy.targetId=res.object.targetId
proxy.getNetLinkList();
}
})
}
//添加节点
let addRes=(row,index)=>{
console.log("row",!proxy.linkName)
if(!proxy.linkName){
console.log("1*1")
proxy.$global.showMsg('请填写配置链路名称','warning')
}else{
console.log("2*2")
proxy.saveLinkAndNodeInfo(row);
}
}
let setBizId=()=>{
if(props.propsData){
proxy.bizId=props.propsData.bizId;
proxy.targetId=props.propsData.targetId;
proxy.busTypeArr=[props.propsData.bizId];
}
console.log("*",props.propsData,proxy.bizId,proxy.busTypeArr)
}
return {
addRes,
setBizId,
saveLinkAndNodeInfo,
getNetLinkList,
bizId,
targetId,
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
... ... @@ -119,7 +214,10 @@ export default {
resTypeList,
init,
onReset,
onBtnSearch
onBtnSearch,
getResData,
changeRes,
linkName
}
},
... ... @@ -165,16 +263,20 @@ export default {
},
//获取配置链接节点数据
getNodeData(){
this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]
if(this.networkMonitorList.length==0){
this.addSetLIstVisible=true;
/*this.nodeData=[
{
name:'节点1',
img:'123'
},
{
name:'节点2',
img:'123'
}
]*/
}
if(this.nodeData.length>1){
this.addSetLIstVisible=false;
this.isClickNet=0;
... ... @@ -198,6 +300,7 @@ export default {
saveList(){
this.tableVisible=false;
this.titleName='故障新增内容';
},
//重新加载表格数据
loadTableDataList(){
... ... @@ -206,8 +309,10 @@ export default {
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
// this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
this.$http.get(`/api-web/fault/conf/netLink/queryLinkDataByBusId`, this.getParams(), function (res) {
if (res && res.data) {
that.count = res.count;
that.tableDataList = res.data;
}
... ... @@ -216,24 +321,25 @@ export default {
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
resId: this.resTypeArr,
kpiId: this.kpiTypeArr,
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
pageSize: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callback', '111');
}
},
},
mounted () {
this.getNodeData();
this.setBizId();
this.getNetLinkList();
// this.getNodeData();
},
unmounted () {}
... ...
<el-dialog v-model="logMonitionVisible" :title="titleName" width="60%" @close="closeDialog">
<el-row>
<el-col :span="24">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>-->
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<el-button @click="saveList" type="primary">保存</el-button>
</div>
</el-dialog>
... ...
export default {
name: 'logMonition',
template: '',
components: {},
data () {
return {
titleName:'添加内容',
tableVisible:false,//添加配置列表是否显示
logMonitionVisible: true,
columns:[
{
prop: 'busTypeName',
label: '业务系统',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'ip地址',
sortable: true,
align: 'center',
},
{
prop: 'kpiName',
label: '指标名称',
sortable: true,
align: 'center',
},
{
prop: 'flag',
label: '指标标识',
sortable: true,
align: 'center',
}
],
// tabSecondList:[],//节点配置列表数据
}
},
computed: {},
setup(){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
return {
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
init,
onReset,
onBtnSearch
}
},
methods: {
//取消节点列表配置
cancleList(){
this.logMonitionVisible=false;
},
//保存节点添加配置
saveList(){
this.logMonitionVisible=false;
},
//重新加载表格数据
loadTableDataList(){
this.getNodeList()
},
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackAPM', 'APM');
}
},
mounted () {
this.init();
this.getNodeList();
},
unmounted () {}
}
\ No newline at end of file
... ...
<el-dialog v-model="subscriptionReportVisible" :title="titleName" width="60%" @close="closeDialog">
<el-row>
<el-col :span="24">
<div class="set-add-div">
<el-row>
<el-col :span="24">
<div class="flex-div-start margin-top-bottom-10">
<el-select class="margin-right-10" v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择业务">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<!-- <el-dropdown class="margin-right-10">
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<el-select class="margin-right-10" v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>-->
<el-input style="width:160px;" class="margin-right-10" v-model="keyWords" placeholder="输入关键字" />
<div class="flex-div-start">
<el-button type="primary" @click="onReset()">重置</el-button>
<el-button type="primary" @click="onBtnSearch()" style="margin-left: 10px">查询</el-button>
</div>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50">
<el-col :span="24">
<cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList"
:showIndex="true" :total="count"
:showBorder="true" :loading="false"
:showPage="true" :showTools="true" :height="(height - 500)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="addRes(scope.row,scope.$index)">
<i class="el-icon-plus"/> 添加
</el-button>
</template>
</cm-table-page>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div class="margin-top flex-center position-bottom">
<el-button @click="cancleList">取消</el-button>
<el-button @click="saveList" type="primary">保存</el-button>
</div>
</el-dialog>
... ...
export default {
name: 'subscriptionReport',
template: '',
components: {},
data () {
return {
titleName:'添加内容',
tableVisible:false,//添加配置列表是否显示
subscriptionReportVisible: true,
columns:[
{
prop: 'busTypeName',
label: '业务系统',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'ip地址',
sortable: true,
align: 'center',
},
{
prop: 'kpiName',
label: '指标名称',
sortable: true,
align: 'center',
},
{
prop: 'flag',
label: '指标标识',
sortable: true,
align: 'center',
}
],
// tabSecondList:[],//节点配置列表数据
}
},
computed: {},
setup(){
const {proxy} = Vue.getCurrentInstance();
let id = proxy.$global.getQueryVariable('configId') ;
let config = Vue.ref(id == false ? null : id);
let count=Vue.ref(0);
let tableDataList = Vue.ref([]);
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords= Vue.ref('');
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
proxy.kpiList = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
proxy.busTypeList = res.data;
}
})
}
let onReset = () => {
proxy.keyWords = '';
proxy.resTypeArr = [];
proxy.kpiTypeArr = [];
proxy.busTypeArr = [];
}
// 点击按钮搜索
let onBtnSearch = () => {
proxy.loadTableDataList();
}
return {
config,
count,
tableDataList,
kpiList,
busTypeList,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
resTypeList,
init,
onReset,
onBtnSearch
}
},
methods: {
//取消节点列表配置
cancleList(){
this.subscriptionReportVisible=false;
},
//保存节点添加配置
saveList(){
this.subscriptionReportVisible=false;
},
//重新加载表格数据
loadTableDataList(){
this.getNodeList()
},
//获取配置节点列表数据
getNodeList(){
let that=this;
this.$http.get(`/api-web/ContrastAnalysis/notAdded`, this.getParams(), function (res) {
if (res && res.success) {
that.count = res.count;
that.tableDataList = res.data;
}
});
},
//配置参数
getParams(){
return {
keyWords: this.keyWords,
resType: this.resTypeArr.join(','),
kpiId: this.kpiTypeArr.join(','),
busId: this.busTypeArr.join(','),
configId: this.config,
page: 1,
limit: 5
}
},
//关闭弹框
closeDialog(){
this.$emit('callbackSub', 'sub');
}
},
mounted () {
this.init();
this.getNodeList();
},
unmounted () {}
}
\ No newline at end of file
... ...
... ... @@ -16,7 +16,7 @@ export default {
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -10);
let height = Vue.ref(window.innerHeight -20);
const treeData = Vue.ref([]);
const tableData = Vue.ref([]);
... ...
... ... @@ -59,6 +59,7 @@ export default {
setInterval(function(){
getDateTime();
},1000);
document.title = '监控一体化视图'
})
let getDateTime=()=>{
... ...