|
|
|
/**
|
|
|
|
* 折线图
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 19:59
|
|
|
|
*/
|
|
|
|
const lineDetail = () => {
|
|
|
|
let showLineDialog = Vue.ref(false);
|
|
|
|
|
|
|
|
let closeLineDialog = (flg) => {
|
|
|
|
showLineDialog.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let openLine = (row) => {
|
|
|
|
debugger
|
|
|
|
closeLineDialog(true);
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog
|
|
|
|
closeLineDialog,
|
|
|
|
openLine
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 告警列表
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 19:59
|
|
|
|
*/
|
|
|
|
const alarmDialog = () => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let alarmFlg = Vue.ref(false);
|
|
|
|
|
|
|
|
let alarmList = Vue.ref({
|
|
|
|
columns: [/*{
|
|
|
|
prop: "resId",
|
|
|
|
label: "资源ID",
|
|
|
|
},*/ {
|
|
|
|
prop: "kpiId",
|
|
|
|
label: "指标ID",
|
|
|
|
}, {
|
|
|
|
prop: "flag",
|
|
|
|
label: "FLAG",
|
|
|
|
}, /*{
|
|
|
|
prop: "id",
|
|
|
|
label: "告警ID",
|
|
|
|
},*/ {
|
|
|
|
prop: "alarmTime",
|
|
|
|
label: "首次告警时间",
|
|
|
|
}, {
|
|
|
|
prop: "alarmContent",
|
|
|
|
label: "告警内容",
|
|
|
|
}, {
|
|
|
|
prop: "noticeTime",
|
|
|
|
label: "通知时间",
|
|
|
|
}, {
|
|
|
|
prop: "alarmRepeatCnt",
|
|
|
|
label: "告警次数",
|
|
|
|
},/* {
|
|
|
|
prop: "alarmContent",
|
|
|
|
label: "通知内容",
|
|
|
|
},*/ {
|
|
|
|
prop: "alarmLevel",
|
|
|
|
label: "告警级别",
|
|
|
|
render: function (row) {
|
|
|
|
|
|
|
|
let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
|
|
|
|
if (obj) {
|
|
|
|
return `<span style="color: ${obj.color}">${obj.name}</span>`
|
|
|
|
}
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
prop: "durationStr",
|
|
|
|
label: "持续时长",
|
|
|
|
}],
|
|
|
|
dataList: [],
|
|
|
|
total: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
let showAlarmDialog = (flg) => {
|
|
|
|
alarmFlg.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let openAlarmDialog = (row) => {
|
|
|
|
showAlarmDialog(true);
|
|
|
|
// 获取告警列表
|
|
|
|
proxy.$http.get(`/api-web/home/alarm/alarmListPage?page=1&limit=10000&resId=${row.resId}`, {}, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if (res.data) {
|
|
|
|
alarmList.value.dataList = res.data;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg ? res.msg : '暂无告警数据！', "warning");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
showAlarmDialog,
|
|
|
|
openAlarmDialog,
|
|
|
|
alarmList,
|
|
|
|
alarmFlg
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const colTypes = (props,list) => {
|
|
|
|
/**
|
|
|
|
* 数据转换
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 18:08
|
|
|
|
*/
|
|
|
|
const colTypes = (props, list,openLine,openAlarmDialog) => {
|
|
|
|
|
|
|
|
// 指标
|
|
|
|
let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate']
|
|
|
|
|
|
|
|
let getItem = (v) => {
|
|
|
|
let item = {};
|
|
|
|
item.resId = v.resId;
|
|
|
|
item.resName = v.resName;
|
|
|
|
item.kpiName = v.kpiName;
|
|
|
|
item.bizId = v.bizId;
|
|
|
|
item.bizName = v.bizName;
|
|
|
|
item.kpiId = v.kpiId;
|
|
|
|
item.flag = v.flag;
|
|
|
|
return item;
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* KPI数据处理方式
|
|
|
|
* <p>
|
|
...
|
...
|
@@ -20,33 +137,35 @@ const colTypes = (props,list) => { |
|
|
|
let dataTypeByKpi = (data) => {
|
|
|
|
let dataList = [];
|
|
|
|
let col = [{
|
|
|
|
prop: 'kpiName',
|
|
|
|
prop: 'resName',
|
|
|
|
label: props.itemName,
|
|
|
|
width: 120,
|
|
|
|
click: function (row) {
|
|
|
|
closeLineDialog(true);
|
|
|
|
}
|
|
|
|
width: 100
|
|
|
|
}];
|
|
|
|
|
|
|
|
let index = 0;
|
|
|
|
for (let resId in data) {
|
|
|
|
let list = data[resId];
|
|
|
|
|
|
|
|
let item = {};
|
|
|
|
item.resId = list[0].resId;
|
|
|
|
item.resName = list[0].resName;
|
|
|
|
item.bizId = list[0].bizId;
|
|
|
|
item.bizName = list[0].bizName;
|
|
|
|
|
|
|
|
let item = getItem(list[0]);
|
|
|
|
list.forEach(function (v) {
|
|
|
|
item[v.kpiId] = v.kpiValue;
|
|
|
|
item.kpiName = v.kpiName;
|
|
|
|
if (index == 0) {
|
|
|
|
col.push({
|
|
|
|
let colInfo = {
|
|
|
|
prop: v.kpiId,
|
|
|
|
label: v.kpiName,
|
|
|
|
width: 80
|
|
|
|
})
|
|
|
|
};
|
|
|
|
|
|
|
|
if (lineKpiIds.indexOf(v.kpiId) != -1) {
|
|
|
|
colInfo['click'] = function (row) {
|
|
|
|
openLine(row);
|
|
|
|
}
|
|
|
|
colInfo['render'] = function (row) {
|
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
col.push(colInfo)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
dataList.push(item);
|
|
...
|
...
|
@@ -76,41 +195,31 @@ const colTypes = (props,list) => { |
|
|
|
}, {
|
|
|
|
prop: "alarm",
|
|
|
|
label: "告警",
|
|
|
|
click: function (row) {
|
|
|
|
openAlarmDialog(row);
|
|
|
|
},
|
|
|
|
render: function (row) {
|
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row.alarm}</span>`
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
|
|
|
|
let dataList = [];
|
|
|
|
let col = [{
|
|
|
|
prop: 'kpiName',
|
|
|
|
label: props.itemName,
|
|
|
|
width: 100,
|
|
|
|
click: function (row) {
|
|
|
|
closeLineDialog(true);
|
|
|
|
}
|
|
|
|
width: 100
|
|
|
|
}];
|
|
|
|
|
|
|
|
flags.forEach(function ({prop, label}) {
|
|
|
|
col.push({
|
|
|
|
prop: prop,
|
|
|
|
label: label,
|
|
|
|
width: 80
|
|
|
|
})
|
|
|
|
flags.forEach(function (item) {
|
|
|
|
col.push(item)
|
|
|
|
})
|
|
|
|
|
|
|
|
let index = 0;
|
|
|
|
for (let resId in data) {
|
|
|
|
let list = data[resId];
|
|
|
|
|
|
|
|
let item = {};
|
|
|
|
item.resId = list[0].resId;
|
|
|
|
item.resName = list[0].resName;
|
|
|
|
item.bizId = list[0].bizId;
|
|
|
|
item.bizName = list[0].bizName;
|
|
|
|
item.kpiName = list[0].kpiName;
|
|
|
|
|
|
|
|
let item = getItem(list[0]);
|
|
|
|
list.forEach(function (v) {
|
|
|
|
item[v.flag] = v.kpiValue;
|
|
|
|
});
|
|
|
|
|
|
|
|
dataList.push(item);
|
|
|
|
index++;
|
|
|
|
}
|
|
...
|
...
|
@@ -121,6 +230,78 @@ const colTypes = (props,list) => { |
|
|
|
|
|
|
|
return {dataTypeByKpi, dataTypeByFlag}
|
|
|
|
}
|
|
|
|
|
|
|
|
const resDetail = (props) => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let resListDialog = Vue.ref(false);
|
|
|
|
let resList = Vue.ref({
|
|
|
|
columns: [{
|
|
|
|
prop: "resName",
|
|
|
|
label: "资源名称",
|
|
|
|
}, {
|
|
|
|
prop: "bizName",
|
|
|
|
label: "业务名称",
|
|
|
|
}, {
|
|
|
|
prop: "kpiId",
|
|
|
|
label: "指标",
|
|
|
|
}, {
|
|
|
|
prop: "kpiName",
|
|
|
|
label: "指标名称",
|
|
|
|
}, {
|
|
|
|
prop: "kpiValue",
|
|
|
|
label: "指标值",
|
|
|
|
}, {
|
|
|
|
prop: "targetType",
|
|
|
|
label: "分类",
|
|
|
|
}],
|
|
|
|
dataList: [],
|
|
|
|
total: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
let showResListDialog = (flg) => {
|
|
|
|
resListDialog.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let handleClick = (row, index) => {
|
|
|
|
debugger
|
|
|
|
showResListDialog(true);
|
|
|
|
getResListPage(row);
|
|
|
|
}
|
|
|
|
|
|
|
|
let getResListPage = (row) => {
|
|
|
|
let params = {
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targeType: props.targeType,
|
|
|
|
resId: row.resId,
|
|
|
|
kpiId: row.kpiId,
|
|
|
|
flag: row.flag
|
|
|
|
}
|
|
|
|
proxy.$http.get('/api-web/fault/result/findResList', params, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if (res.data) {
|
|
|
|
resList.value.dataList = res.data;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg, "warning");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
let loadPage = () => {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
resList,
|
|
|
|
resListDialog,
|
|
|
|
showResListDialog,
|
|
|
|
getResListPage,
|
|
|
|
loadPage,
|
|
|
|
handleClick
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'resultItemIndex',
|
|
|
|
template: '',
|
|
...
|
...
|
@@ -157,7 +338,7 @@ export default { |
|
|
|
},
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
let width = Vue.ref(window.innerWidth * 0.8 - 190);
|
|
|
|
let width = Vue.ref(window.innerWidth * 0.8 - 220);
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let list = Vue.ref({
|
|
|
|
columns: [],
|
|
...
|
...
|
@@ -166,12 +347,35 @@ export default { |
|
|
|
});
|
|
|
|
|
|
|
|
let detailInfo = Vue.ref({
|
|
|
|
rate:0,
|
|
|
|
info:''
|
|
|
|
rate: 0,
|
|
|
|
info: ''
|
|
|
|
});
|
|
|
|
|
|
|
|
const {
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog,
|
|
|
|
openLine
|
|
|
|
} = lineDetail();
|
|
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
resList,
|
|
|
|
resListDialog,
|
|
|
|
showResListDialog,
|
|
|
|
getResListPage,
|
|
|
|
loadPage,
|
|
|
|
handleClick
|
|
|
|
} = resDetail(props);
|
|
|
|
|
|
|
|
const {
|
|
|
|
showAlarmDialog,
|
|
|
|
openAlarmDialog,
|
|
|
|
alarmList,
|
|
|
|
alarmFlg
|
|
|
|
} = alarmDialog();
|
|
|
|
|
|
|
|
// 数据统计方式
|
|
|
|
const {dataTypeByKpi, dataTypeByFlag} = colTypes(props,list);
|
|
|
|
const {dataTypeByKpi, dataTypeByFlag} = colTypes(props, list,openLine,openAlarmDialog);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 获取表格数据
|
|
...
|
...
|
@@ -186,11 +390,11 @@ export default { |
|
|
|
}
|
|
|
|
proxy.$http.get('/api-web/fault/result/findResult', params, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if(res.map){
|
|
|
|
if (res.map) {
|
|
|
|
callback(res.map);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg,"warning");
|
|
|
|
proxy.$global.showMsg(res.msg, "warning");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
...
|
...
|
@@ -211,27 +415,22 @@ export default { |
|
|
|
/**
|
|
|
|
* 获取统计信息
|
|
|
|
*/
|
|
|
|
let findCountInfo = () =>{
|
|
|
|
let findCountInfo = () => {
|
|
|
|
let params = {
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targeType: props.targeType
|
|
|
|
}
|
|
|
|
proxy.$http.get('/api-web/fault/result/findCountInfo', params, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if( res.map){
|
|
|
|
if (res.map) {
|
|
|
|
detailInfo.value = res.map;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg,"warning");
|
|
|
|
proxy.$global.showMsg(res.msg, "warning");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const {
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog
|
|
|
|
} = lineDetail();
|
|
|
|
|
|
|
|
// 监听编辑状态
|
|
|
|
Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
|
|
|
|
getPage();
|
|
...
|
...
|
@@ -248,8 +447,25 @@ export default { |
|
|
|
list,
|
|
|
|
detailInfo,
|
|
|
|
|
|
|
|
// 折线图
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog
|
|
|
|
closeLineDialog,
|
|
|
|
openLine,
|
|
|
|
|
|
|
|
|
|
|
|
// 资源详情
|
|
|
|
resList,
|
|
|
|
resListDialog,
|
|
|
|
showResListDialog,
|
|
|
|
getResListPage,
|
|
|
|
loadPage,
|
|
|
|
handleClick,
|
|
|
|
|
|
|
|
// 告警弹框
|
|
|
|
showAlarmDialog,
|
|
|
|
openAlarmDialog,
|
|
|
|
alarmList,
|
|
|
|
alarmFlg
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
