...
|
...
|
@@ -33,16 +33,6 @@ const lineDetail = (props) => { |
|
|
|
|
|
res.data.forEach(function (v){
|
|
|
let time = v.collTime;
|
|
|
// if(time && time.indexOf(' ') != -1){
|
|
|
// let timeArr = time.split(" ")
|
|
|
// if(timeArr && timeArr.length > 1 && timeArr[1].indexOf(':')){
|
|
|
// let ttArr = timeArr[1].split(':')
|
|
|
// if(ttArr && ttArr.length > 1){
|
|
|
// delete ttArr[0];
|
|
|
// time = ttArr.join(':');
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
let val = v.kpiValue;
|
|
|
arr.push([time,val ]);
|
|
|
})
|
...
|
...
|
@@ -155,8 +145,54 @@ const alarmDialog = () => { |
|
|
*/
|
|
|
const colTypes = (props, list,openLine,openAlarmDialog) => {
|
|
|
|
|
|
// 指标
|
|
|
let lineKpiIds = ['point_succ', 'count', 'response_rate', 'success_rate']
|
|
|
// 展示折线图指标
|
|
|
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 && 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 && val != 100){
|
|
|
css += "color: red;";
|
|
|
} else {
|
|
|
css += "color: blue;";
|
|
|
}
|
|
|
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 && val != 100){
|
|
|
css += "color: red;";
|
|
|
} else {
|
|
|
css += "color: blue;";
|
|
|
}
|
|
|
return `<span style="${css}">${val}</span>`;
|
|
|
}
|
|
|
|
|
|
|
|
|
let getItem = (v) => {
|
|
|
let item = {};
|
...
|
...
|
@@ -191,19 +227,33 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { |
|
|
item[v.kpiId] = v.kpiValue;
|
|
|
item.kpiName = v.kpiName;
|
|
|
if (index == 0) {
|
|
|
let prop = v.kpiId;
|
|
|
let colInfo = {
|
|
|
prop: v.kpiId,
|
|
|
prop: prop,
|
|
|
label: v.kpiName,
|
|
|
width: 50
|
|
|
};
|
|
|
|
|
|
if (lineKpiIds.indexOf(v.kpiId) != -1) {
|
|
|
if (lineKpiIds.indexOf(prop) != -1) {
|
|
|
colInfo['click'] = function (row) {
|
|
|
row.kpiId = prop;
|
|
|
row.flag = v.flag;
|
|
|
debugger
|
|
|
openLine(row);
|
|
|
}
|
|
|
|
|
|
colInfo['render'] = function (row) {
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row[v.kpiId]}</span>`
|
|
|
try {
|
|
|
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)
|
...
|
...
|
@@ -226,20 +276,32 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { |
|
|
let dataTypeByFlag = (data) => {
|
|
|
let flags = [{
|
|
|
prop: "count",
|
|
|
width:80,
|
|
|
label: "检测项目数",
|
|
|
}, {
|
|
|
prop: "normal",
|
|
|
width:80,
|
|
|
label: "正常数"
|
|
|
}, {
|
|
|
prop: "abnormal",
|
|
|
width:80,
|
|
|
label: "异常出",
|
|
|
}, {
|
|
|
prop: "alarm",
|
|
|
width:80,
|
|
|
label: "告警",
|
|
|
click: function (row) {
|
|
|
openAlarmDialog(row);
|
|
|
},
|
|
|
render: function (row) {
|
|
|
try {
|
|
|
let html = eval(prop + '(' + row[prop] + ')');
|
|
|
if(html){
|
|
|
return html;
|
|
|
}
|
|
|
}catch (e){
|
|
|
|
|
|
}
|
|
|
return `<span style="text-decoration: underline;color: blue;">${row.alarm}</span>`
|
|
|
}
|
|
|
}];
|
...
|
...
|
@@ -248,7 +310,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { |
|
|
let col = [{
|
|
|
prop: 'kpiName',
|
|
|
label: props.itemName,
|
|
|
width: 100
|
|
|
width: 150
|
|
|
}];
|
|
|
|
|
|
flags.forEach(function (item) {
|
...
|
...
|
@@ -272,7 +334,7 @@ const colTypes = (props, list,openLine,openAlarmDialog) => { |
|
|
return {dataTypeByKpi, dataTypeByFlag}
|
|
|
}
|
|
|
|
|
|
const resDetail = (props) => {
|
|
|
const resDetail = (props,openLine) => {
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
let resListDialog = Vue.ref(false);
|
|
|
let resList = Vue.ref({
|
...
|
...
|
@@ -288,6 +350,9 @@ const resDetail = (props) => { |
|
|
}, {
|
|
|
prop: "kpiValue",
|
|
|
label: "指标值",
|
|
|
click:function (row){
|
|
|
openLine(row);
|
|
|
}
|
|
|
}, {
|
|
|
prop: "collTime",
|
|
|
label: "采集时间",
|
...
|
...
|
@@ -404,7 +469,7 @@ export default { |
|
|
getResListPage,
|
|
|
loadPage,
|
|
|
handleClick
|
|
|
} = resDetail(props);
|
|
|
} = resDetail(props,openLine);
|
|
|
|
|
|
const {
|
|
|
showAlarmDialog,
|
...
|
...
|
|