<a-table
:rowKey="(record) => (Math.random() * 10000).toFixed(0)"
:columns="arrAppTop10Col"
:data-source="ress"
>
<template slot="name" slot-scope="text, record, index">
<div :style="{ width: 100 - (index + 1) * 5 + '%' }">
<em
v-for="(item, index) in record.unitval"
:style="{
width: item.width * 100 + '%',
height: '15px',
'background-color': item.color,
display: 'inline-block',
}"
:key="index"
:title="item.name + ':' + item.oval"
></em>
</div>
</template>
</a-table>
let res =[
{
"dstaddr": "1.1.1.1",
"ratio": "20.21%",
"dOctets": "8.6GB",
"totalMap": {
"NFS": "8.6GB",
"SNMP": "206.4KB"
}
},
{
"dstaddr": "1.1.1.2",
"ratio": "16.57%",
"dOctets": "7.05GB",
"totalMap": {
"SMB": "7.05GB",
"OTHER": "333.33KB",
"NETBIOS": "35.21KB"
}
},
{
"dstaddr": "1.1.1.3",
"ratio": "12.01%",
"dOctets": "5.11GB",
"totalMap": {
"POP3": "5.11GB"
}
},
{
"dstaddr": "1.1.1.4",
"ratio": "11.52%",
"dOctets": "4.9GB",
"totalMap": {
"MSsql": "4.9GB"
}
},
{
"dstaddr": "172.16.3.50",
"ratio": "9.42%",
"dOctets": "4.01GB",
"totalMap": {
"OTHER": "4.01GB",
"NETBIOS": "14.91KB"
}
},
{
"dstaddr": "1.1.1.5",
"ratio": "8.49%",
"dOctets": "3.61GB",
"totalMap": {
"HTTP": "2.92GB",
"OTHER": "704.53MB",
"CLC-BUILD-DAEMON": "989.16KB",
"ZABBIX-AGENT": "296.07KB",
"NRPE": "135.15KB"
}
}
]
let ress = this.processingCapacity(res);
getFlowVal(val) {
var alph = val.charat(val.length - 2);
console.log(alph);
var unit =
alph != "K" && alph != "M" && alph != "G" && alph != "T"
? val.substring(val.length - 1)
: val.substring(val.length - 2);
switch (unit) {
case "B":
return parseFloat(val.substring(0, val.length - 1) / 1024).toFixed(4);
break;
case "KB":
return parseFloat(val.substring(0, val.length - 2)).toFixed(4);
break;
case "MB":
return parseFloat(val.substring(0, val.length - 2) * 1024).toFixed(4);
break;
case "GB":
return parseFloat(
val.substring(0, val.length - 2) * 1024 * 1024
).toFixed(4);
break;
case "TB":
return parseFloat(
val.substring(0, val.length - 2) * 1024 * 1024 * 1024
).toFixed(4);
break;
}
},
processingCapacity(obj) {
let _this = this;
let color = [
"#61D3D4",
"#90EE90",
"#B2E577",
"#04AEE6",
"#7763EB",
"#F2B884",
"#7FFFD4",
"#5ACE39",
"#6399EB",
"#EBB763",
"#8E8E8E",
];
let retNewObj = JSON.parse(JSON.stringify(obj));
$.each(retNewObj, function (i, obj) {
if (!obj.dOctets) {
return;
}
var mapValue = obj.totalMap;
var total = _this.getFlowVal(obj.dOctets);
var unitval = new Array();
for (var items in mapValue) {
var newObj = new Object();
var val = mapValue[items];
newObj.oval = val;
newObj.name = items;
var alph = val.charat(val.length - 2);
var unit =
alph != "K" && alph != "M" && alph != "G" && alph != "T"
? val.substring(val.length - 1)
: val.substring(val.length - 2);
switch (unit) {
case "B":
val = parseFloat(val.substring(0, val.length - 1) / 1024).toFixed(
4
);
newObj.nVal = val;
newObj.color = color[parseInt(Math.random() * color.length)];
let emWidth = Number((val / total).toFixed(2));
if (emWidth < 0.01) {
emWidth = 0.01;
};
newObj.width = emWidth;
unitval.push(newObj);
break;
case "KB":
val = parseFloat(val.substring(0, val.length - 2)).toFixed(4);
newObj.nVal = val;
let emWidth1 = Number((val / total).toFixed(2));
if (emWidth1 < 0.01) {
emWidth1 = 0.01;
};
newObj.width = emWidth1;
newObj.color = color[parseInt(Math.random() * color.length)];
unitval.push(newObj);
break;
case "MB":
val = parseFloat(val.substring(0, val.length - 2) * 1024).toFixed(
4
);
newObj.nVal = val;
let emWidth2 = Number((val / total).toFixed(2));
if (emWidth2 < 0.01) {
emWidth2 = 0.01;
}
newObj.color = color[parseInt(Math.random() * color.length)];
newObj.width = emWidth2;
unitval.push(newObj);
break;
case "GB":
val = parseFloat(
val.substring(0, val.length - 2) * 1024 * 1024
).toFixed(4);
newObj.nVal = val;
newObj.color = color[parseInt(Math.random() * color.length)];
let emWidth3 = Number((val / total).toFixed(2));
if (emWidth3 < 0.01) {
emWidth3 = 0.01;
}
if (
(emWidth3 + Object.keys(mapValue).length / 10).toFixed(2) > 1
) {
emWidth3 =
emWidth3 - (Object.keys(mapValue).length / 100).toFixed(2);
}
newObj.width = emWidth3;
unitval.push(newObj);
break;
case "TB":
val = parseFloat(
val.substring(0, val.length - 2) * 1024 * 1024 * 1024
).toFixed(4);
newObj.nVal = val;
newObj.color = color[parseInt(Math.random() * color.length)];
let emWidth4 = Number((val / total).toFixed(2));
if (emWidth4 < 0.01) {
emWidth4 = 0.01;
}
newObj.width = emWidth4;
unitval.push(newObj);
break;
}
}
retNewObj[i].unitval = [];
retNewObj[i].unitval = [...unitval];
});
return retNewObj;
},