|
|
|
/**
|
|
|
|
* 折线图
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 19:59
|
|
|
|
*/
|
|
|
|
const lineDetail = (props) => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let showLineDialog = Vue.ref(false);
|
|
|
|
let dataSet = Vue.ref([]);
|
|
|
|
let closeLineDialog = (flg) => {
|
|
|
|
showLineDialog.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let openLine = (row) => {
|
|
|
|
closeLineDialog(true);
|
|
|
|
getLineData(row);
|
|
|
|
}
|
|
|
|
|
|
|
|
let getLineData = (row) =>{
|
|
|
|
let params = {
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targetType: props.targetType,
|
|
|
|
resId: row.resId,
|
|
|
|
kpiId: row.kpiId,
|
|
|
|
flag: row.flag
|
|
|
|
}
|
|
|
|
proxy.$http.get('/api-web/fault/result/findLineData', params, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if (res.data) {
|
|
|
|
let arr = [];
|
|
|
|
arr.push(['product',res.data[0].resName ]);
|
|
|
|
|
|
|
|
res.data.forEach(function (v){
|
|
|
|
let time = v.collTime;
|
|
|
|
let val = v.kpiValue;
|
|
|
|
arr.push([time,val ]);
|
|
|
|
})
|
|
|
|
dataSet.value = arr;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg, "warning");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog,
|
|
|
|
openLine,
|
|
|
|
dataSet
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 告警列表
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 19:59
|
|
|
|
*/
|
|
|
|
const alarmDialog = (props) => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let alarmFlg = Vue.ref(false);
|
|
|
|
|
|
|
|
let alarmList = Vue.ref({
|
|
|
|
columns: [{
|
|
|
|
prop: "resId",
|
|
|
|
label: "资源ID",
|
|
|
|
width:120
|
|
|
|
}, {
|
|
|
|
prop: "kpiId",
|
|
|
|
label: "指标ID",
|
|
|
|
width:120
|
|
|
|
}, {
|
|
|
|
prop: "flag",
|
|
|
|
label: "指标标识",
|
|
|
|
width:120
|
|
|
|
}, {
|
|
|
|
prop: "alarmId",
|
|
|
|
label: "告警ID",
|
|
|
|
width:120
|
|
|
|
},{
|
|
|
|
prop: "alarmContent",
|
|
|
|
label: "告警内容",
|
|
|
|
width:250
|
|
|
|
}, {
|
|
|
|
prop: "firstAlarmTime",
|
|
|
|
label: "首次告警时间",
|
|
|
|
width:120
|
|
|
|
}, {
|
|
|
|
prop: "recentAlarmTime",
|
|
|
|
label: "最近告警时间",
|
|
|
|
width:120
|
|
|
|
}, {
|
|
|
|
prop: "alarmRepeatCnt",
|
|
|
|
label: "告警次数",
|
|
|
|
width:80
|
|
|
|
}, {
|
|
|
|
prop: "noticeContent",
|
|
|
|
label: "通知内容",
|
|
|
|
width:300
|
|
|
|
}, {
|
|
|
|
prop: "alarmLevel",
|
|
|
|
label: "告警级别",
|
|
|
|
width:80,
|
|
|
|
render: function (row) {
|
|
|
|
let obj = proxy.$global.getAlarmLevel(row.alarmLevel);
|
|
|
|
if (obj) {
|
|
|
|
return `<span style="color: ${obj.color}">${obj.name}</span>`
|
|
|
|
}
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
}/*, {
|
|
|
|
prop: "firstAlarmTime",
|
|
|
|
label: "时间戳",
|
|
|
|
}*/],
|
|
|
|
dataList: [],
|
|
|
|
total: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
let showAlarmDialog = (flg) => {
|
|
|
|
alarmFlg.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let openAlarmDialog = (row) => {
|
|
|
|
showAlarmDialog(true);
|
|
|
|
// 获取告警列表
|
|
|
|
let params ={
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targetType: props.targetType,
|
|
|
|
resId: row.resId,
|
|
|
|
kpiId: row.kpiId,
|
|
|
|
flag: row.flg
|
|
|
|
}
|
|
|
|
proxy.$http.get(`/api-web/fault/result/findAlarmList`, params, 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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 数据转换
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 18:08
|
|
|
|
*/
|
|
|
|
const colTypes = (props, list,openLine,openAlarmDialog) => {
|
|
|
|
|
|
|
|
let widths ={
|
|
|
|
errcode:150
|
|
|
|
}
|
|
|
|
|
|
|
|
// 展示折线图指标
|
|
|
|
let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate'];
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 拨测
|
|
|
|
* @param row
|
|
|
|
* @returns {`<span style="${string}">${string}</span>`}
|
|
|
|
*/
|
|
|
|
let point_succ = (val) =>{
|
|
|
|
let css = "text-decoration: underline;";
|
|
|
|
if(val != undefined && val === 0){
|
|
|
|
css += "color: red;";
|
|
|
|
} else {
|
|
|
|
css += "color: blue;";
|
|
|
|
}
|
|
|
|
return `<span style="${css}">${val}</span>`;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* NPM 成功率
|
|
|
|
* @param row
|
|
|
|
* @returns {`<span style="${string}">${string}</span>`}
|
|
|
|
*/
|
|
|
|
let success_rate = (val) =>{
|
|
|
|
let css = "text-decoration: underline;";
|
|
|
|
if(val != undefined && val === 100){
|
|
|
|
css += "color: blue;";
|
|
|
|
} else {
|
|
|
|
css += "color: red;";
|
|
|
|
}
|
|
|
|
return `<span style="${css}">${val}</span>`;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* NPM 响应率
|
|
|
|
* @param row
|
|
|
|
* @returns {`<span style="${string}">${string}</span>`}
|
|
|
|
*/
|
|
|
|
let response_rate = (val) =>{
|
|
|
|
let css = "text-decoration: underline;";
|
|
|
|
if(val != undefined && val === 100){
|
|
|
|
css += "color: blue;";
|
|
|
|
} else {
|
|
|
|
css += "color: red;";
|
|
|
|
}
|
|
|
|
return `<span style="${css}">${val}</span>`;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 16:12
|
|
|
|
*/
|
|
|
|
let dataTypeByKpi = (data) => {
|
|
|
|
let dataList = [];
|
|
|
|
let col = [{
|
|
|
|
prop: 'resName',
|
|
|
|
label: props.itemName,
|
|
|
|
width: 150
|
|
|
|
}];
|
|
|
|
|
|
|
|
let index = 0;
|
|
|
|
for (let resId in data) {
|
|
|
|
let list = data[resId];
|
|
|
|
let item = getItem(list[0]);
|
|
|
|
list.forEach(function (v) {
|
|
|
|
item[v.kpiId] = v.kpiValue;
|
|
|
|
item.kpiName = v.kpiName;
|
|
|
|
if (index == 0) {
|
|
|
|
let prop = v.kpiId;
|
|
|
|
let colInfo = {
|
|
|
|
prop: prop,
|
|
|
|
label: v.kpiName,
|
|
|
|
width: widths[prop] == undefined ? 50 : 100
|
|
|
|
};
|
|
|
|
|
|
|
|
if (lineKpiIds.indexOf(prop) != -1) {
|
|
|
|
colInfo['click'] = function (row) {
|
|
|
|
row.kpiId = prop;
|
|
|
|
row.flag = v.flag;
|
|
|
|
openLine(row);
|
|
|
|
}
|
|
|
|
|
|
|
|
colInfo['render'] = function (row) {
|
|
|
|
try {
|
|
|
|
|
|
|
|
if(row && Object.keys(row).length > 0 && prop){
|
|
|
|
let html = eval(prop + '(' + row[prop] + ')');
|
|
|
|
if(html){
|
|
|
|
return html;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}catch (e){
|
|
|
|
|
|
|
|
}
|
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>`;;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
col.push(colInfo)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
dataList.push(item);
|
|
|
|
index++;
|
|
|
|
}
|
|
|
|
// 设置数据
|
|
|
|
list.value.dataList = dataList;
|
|
|
|
list.value.columns = col;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* KPI数据处理方式
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 16:12
|
|
|
|
*/
|
|
|
|
let dataTypeByFlag = (data) => {
|
|
|
|
let flags = [{
|
|
|
|
prop: "count",
|
|
|
|
width:80,
|
|
|
|
label: "检测项目数",
|
|
|
|
}, {
|
|
|
|
prop: "normal",
|
|
|
|
width:80,
|
|
|
|
label: "正常数",
|
|
|
|
render: function (row) {
|
|
|
|
return `<span >${row.normal == undefined ? 0 : row.normal }</span>`
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
prop: "abnormal",
|
|
|
|
width:80,
|
|
|
|
label: "异常出",
|
|
|
|
render: function (row) {
|
|
|
|
return `<span >${row.abnormal == undefined ? 0 : row.abnormal }</span>`
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
prop: "alarm",
|
|
|
|
width:80,
|
|
|
|
label: "告警",
|
|
|
|
click: function (row) {
|
|
|
|
openAlarmDialog(row);
|
|
|
|
},
|
|
|
|
render: function (row) {
|
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row.alarm == undefined ? 0 : row.alarm }</span>`
|
|
|
|
}
|
|
|
|
}];
|
|
|
|
|
|
|
|
let dataList = [];
|
|
|
|
let col = [{
|
|
|
|
prop: 'kpiName',
|
|
|
|
label: props.itemName,
|
|
|
|
width: 150
|
|
|
|
}];
|
|
|
|
|
|
|
|
flags.forEach(function (item) {
|
|
|
|
col.push(item)
|
|
|
|
})
|
|
|
|
let index = 0;
|
|
|
|
for (let resId in data) {
|
|
|
|
let list = data[resId];
|
|
|
|
let item = getItem(list[0]);
|
|
|
|
list.forEach(function (v) {
|
|
|
|
item[v.flag] = v.kpiValue;
|
|
|
|
});
|
|
|
|
dataList.push(item);
|
|
|
|
index++;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 设置数据
|
|
|
|
list.value.dataList = dataList;
|
|
|
|
list.value.columns = col;
|
|
|
|
}
|
|
|
|
|
|
|
|
return {dataTypeByKpi, dataTypeByFlag}
|
|
|
|
}
|
|
|
|
|
|
|
|
const resDetail = (props,openLine) => {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let resListDialog = Vue.ref(false);
|
|
|
|
let resList = Vue.ref({
|
|
|
|
columns: [{
|
|
|
|
prop: "resType",
|
|
|
|
label: "资源类型",
|
|
|
|
}, {
|
|
|
|
prop: "resName",
|
|
|
|
label: "资源名称",
|
|
|
|
}, {
|
|
|
|
prop: "kpiName",
|
|
|
|
label: "指标名称",
|
|
|
|
}, {
|
|
|
|
prop: "kpiValue",
|
|
|
|
label: "指标值",
|
|
|
|
click:function (row){
|
|
|
|
openLine(row);
|
|
|
|
},
|
|
|
|
render:function (row){
|
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row.kpiValue}</span>`
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
prop: "collTime",
|
|
|
|
label: "采集时间",
|
|
|
|
}],
|
|
|
|
dataList: [],
|
|
|
|
total: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
let showResListDialog = (flg) => {
|
|
|
|
resListDialog.value = flg;
|
|
|
|
}
|
|
|
|
|
|
|
|
let handleClick = (row, index) => {
|
|
|
|
|
|
|
|
showResListDialog(true);
|
|
|
|
getResListPage(row);
|
|
|
|
}
|
|
|
|
|
|
|
|
let getResListPage = (row) => {
|
|
|
|
let params = {
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targetType: props.targetType,
|
|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
import store from '/vue3/src/store/index.js';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'resultItemIndex',
|
|
|
|
name: 'faultDialTest',
|
|
|
|
template: '',
|
|
|
|
components: {
|
|
|
|
'echarts-line': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('components/common/echarts/line/index')
|
|
|
|
)
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {}
|
|
|
|
'res-item': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('components/page/faultDiagnosis/result/item/resItem/index')
|
|
|
|
),
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
targetType: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
faultNo: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
itemName: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
// 展示详情页
|
|
|
|
showDetail: {
|
|
|
|
type: String,
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
// 数据转行方式
|
|
|
|
colType: {
|
|
|
|
type: String,
|
|
|
|
default: 'kpi'
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {}
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
let width = Vue.ref(window.innerWidth * 0.8 - 220);
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
let list = Vue.ref({
|
|
|
|
columns: [],
|
|
|
|
dataList: [],
|
|
|
|
total: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
let detailInfo = Vue.ref({
|
|
|
|
rate: 0,
|
|
|
|
info: ''
|
|
|
|
});
|
|
|
|
|
|
|
|
const {
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog,
|
|
|
|
openLine,
|
|
|
|
dataSet
|
|
|
|
} = lineDetail(props);
|
|
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
resList,
|
|
|
|
resListDialog,
|
|
|
|
showResListDialog,
|
|
|
|
getResListPage,
|
|
|
|
loadPage,
|
|
|
|
handleClick
|
|
|
|
} = resDetail(props,openLine);
|
|
|
|
|
|
|
|
const {
|
|
|
|
showAlarmDialog,
|
|
|
|
openAlarmDialog,
|
|
|
|
alarmList,
|
|
|
|
alarmFlg
|
|
|
|
} = alarmDialog(props);
|
|
|
|
|
|
|
|
// 数据统计方式
|
|
|
|
const {dataTypeByKpi, dataTypeByFlag} = colTypes(props, list,openLine,openAlarmDialog);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 获取表格数据
|
|
|
|
* <p>
|
|
|
|
* 作者： Wang
|
|
|
|
* 时间：2021/12/15 17:26
|
|
|
|
*/
|
|
|
|
let getPage = () => {
|
|
|
|
let params = {
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targetType: props.targetType
|
|
|
|
}
|
|
|
|
proxy.$http.get('/api-web/fault/result/findResult', params, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if (res.map) {
|
|
|
|
callback(res.map);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg, "warning");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 设置数据
|
|
|
|
let callback = (data) => {
|
|
|
|
|
|
|
|
switch (props.colType) {
|
|
|
|
case 'kpi':
|
|
|
|
dataTypeByKpi(data);
|
|
|
|
break;
|
|
|
|
case 'flag':
|
|
|
|
dataTypeByFlag(data);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let dialTest = Vue.ref();
|
|
|
|
let card = Vue.ref({})
|
|
|
|
let cardOpen = Vue.ref(false);
|
|
|
|
let allCard = () => {
|
|
|
|
cardOpen.value = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 获取统计信息
|
|
|
|
*/
|
|
|
|
let findCountInfo = () => {
|
|
|
|
let closeCard = () => {
|
|
|
|
cardOpen.value = false;
|
|
|
|
}
|
|
|
|
let getDialtestList = () => {
|
|
|
|
let params = {
|
|
|
|
faultNo: props.faultNo,
|
|
|
|
targetType: props.targetType
|
|
|
|
targetType: "dialtest"
|
|
|
|
}
|
|
|
|
proxy.$http.get('/api-web/fault/result/findCountInfo', params, function (res) {
|
|
|
|
if (res && res.success) {
|
|
|
|
if (res.map) {
|
|
|
|
detailInfo.value = res.map;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
proxy.$global.showMsg(res.msg, "warning");
|
|
|
|
|
|
|
|
store.dispatch('getFaultList', params).then((res) => {
|
|
|
|
if (res.data && res.success) {
|
|
|
|
dialTest.value = res.data[0];
|
|
|
|
card.value = dialTest.value.faultFixInfoList[0];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}).catch(e => {
|
|
|
|
console.log(e);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// 监听编辑状态
|
|
|
|
Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
|
|
|
|
getPage();
|
|
|
|
});
|
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
getPage();
|
|
|
|
findCountInfo();
|
|
|
|
getDialtestList();
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
|
|
width,
|
|
|
|
list,
|
|
|
|
detailInfo,
|
|
|
|
|
|
|
|
// 折线图
|
|
|
|
showLineDialog,
|
|
|
|
closeLineDialog,
|
|
|
|
openLine,
|
|
|
|
dataSet,
|
|
|
|
|
|
|
|
|
|
|
|
// 资源详情
|
|
|
|
resList,
|
|
|
|
resListDialog,
|
|
|
|
showResListDialog,
|
|
|
|
getResListPage,
|
|
|
|
loadPage,
|
|
|
|
handleClick,
|
|
|
|
|
|
|
|
// 告警弹框
|
|
|
|
showAlarmDialog,
|
|
|
|
openAlarmDialog,
|
|
|
|
alarmList,
|
|
|
|
alarmFlg
|
|
|
|
card,
|
|
|
|
allCard,
|
|
|
|
closeCard,
|
|
|
|
cardOpen,
|
|
|
|
dialTest
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
