1050 lines
53 KiB
Vue
1050 lines
53 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="自动发现项" name="second">
|
|
<template v-if="activeName === 'second'">
|
|
<SecondAutoFind v-if="loading" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
|
|
</template>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="监控项" name="first">
|
|
<template v-if="activeName === 'first'">
|
|
<FirstMonitor v-if="loading" :formData="formData" :chartList="firstChartList" @chartFnEvent="chartFnEvent"></FirstMonitor>
|
|
</template>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<div style="float: right;margin-top: 20px;">
|
|
<el-button type="primary" @click="goBack">返回</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FirstMonitor from "./firstMonitor";
|
|
import SecondAutoFind from "./secondAutoFind";
|
|
import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent,
|
|
memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate, postInterFaceName,
|
|
netDetails, trafficEcharts, trafficIPv4Echarts, trafficIPv6Echarts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
|
|
dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts} from "@/api/disRevenue/resource"
|
|
export default {
|
|
name: "serverMonitorChart",
|
|
components: {FirstMonitor, SecondAutoFind},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
currTimeList: {},
|
|
defaultTimes: [],
|
|
firstTabTime: {},
|
|
firstTabTimeArr: [],
|
|
activeName: 'second',
|
|
paramsData: {},
|
|
// 第一栏
|
|
firstChartTrans: {},
|
|
formFirst: {
|
|
memorySizeTotalCollect: '总内存(GB)', systemCpuNum: 'CPU数量', systemSwOsCollect: '操作系统', systemSwArchCollect: '操作系统架构', kernelMaxprocCollect: '最大进程数', systemDiskSizeTotalCollect: '硬盘-总可用空间(GB)',
|
|
systemBoottimeCollect: '系统启动时间', systemUptimeCollect: '系统正确运行时间', systemLocaltimeCollect: '系统本地时间', systemUnameCollect: '系统描述'
|
|
},
|
|
formData: {},
|
|
firstChartList: [],
|
|
resultData: [
|
|
{
|
|
title: 'CPU负载(%)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: 'CPU的1分钟负载', data: []},
|
|
{name: 'CPU的5分钟负载', data: []},
|
|
{name: 'CPU的15分钟负载', data: []},
|
|
{name: 'CPU使用率', data: []},
|
|
]
|
|
}
|
|
},{
|
|
title: 'CPU时间(s)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '22%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: 'CPU正常运行时间', data: []},
|
|
{name: 'CPU空闲时间', data: []},
|
|
{name: 'CPU等待响应时间', data: []},
|
|
{name: 'CPU系统时间', data: []},
|
|
{name: 'CPU软件无响应时间', data: []},
|
|
{name: 'CPU运行用户进程所花费的时间', data: []},
|
|
]
|
|
}
|
|
},{
|
|
title: '正在运行的进程数(个)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '正在运行的进程数', data: []},
|
|
// {name: '进程数', data: []}
|
|
]
|
|
}
|
|
},{
|
|
title: '登录用户数(个)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '登录用户数', data: []}
|
|
]
|
|
}
|
|
},{
|
|
title: '交换卷/文件的可用空间(字节)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '交换卷/文件的可用空间', data: []}
|
|
]
|
|
}
|
|
},{
|
|
title: '内存利用率(%)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '内存利用率', data: []}
|
|
]
|
|
}
|
|
},{
|
|
title: '可用交换空间百分比(%)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '可用交换空间百分比', data: []}
|
|
]
|
|
}
|
|
},{
|
|
title: '可用内存(G)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '可用内存', data: []}
|
|
]
|
|
}
|
|
},{
|
|
title: '可用内存百分比(%)',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: [],
|
|
dataList: [
|
|
{name: '可用内存百分比', data: []}
|
|
]
|
|
}
|
|
}
|
|
],
|
|
// 第二栏
|
|
activeNames: [],
|
|
matchNum: {num: ''},
|
|
secondChartList: {},
|
|
eventDataMap: {},
|
|
echartData: {
|
|
title: 'GE1/0/1的丢包数',
|
|
dateShowType: 'datetimerange',
|
|
dateDataTrans: {transList: true, MarUltabsTop: '30px'},
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
yAxisName: ' ',
|
|
gridTop: '40%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '入站丢包',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
},{
|
|
name: '出站丢包',
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
|
}]
|
|
}
|
|
},
|
|
linuxSystem: {
|
|
mount: {
|
|
title: '挂载文件系统',
|
|
type: 'mount',
|
|
formList: {vfsType: '文件系统类型'},
|
|
formModel: {},
|
|
echartFors: [
|
|
{title: '的空间(G)', oneName: '可用空间', twoName: '总空间'},
|
|
{title: '的空间利用率(%)', oneName: '空间利用率'},
|
|
],
|
|
echartList: []
|
|
},
|
|
net: {
|
|
title: '网络接口interface eth0',
|
|
type: 'net',
|
|
formList: {type: '接口类型', status: '运行状态', speed: '速度', mac: '网卡MAC信息'},
|
|
formModel: {},
|
|
echartFors: [
|
|
{title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
|
|
{title: '的IPv4流量', oneName: 'IPv4出站流量', twoName: 'IPv4入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
|
|
{title: '的IPv6流量', oneName: 'IPv6出站流量', twoName: 'IPv6入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
|
|
{title: '的丢包数(个)', oneName: '出站丢包', twoName: '入站丢包'},
|
|
],
|
|
echartList: []
|
|
},
|
|
disk: {
|
|
title: '硬盘',
|
|
type: 'disk',
|
|
formList: {total: '磁盘大小(G)', writeTimesStr: '写入次数', readTimesStr: '读取次数', writeBytesStr: '写入字节', readBytesStr: '读取字节'},
|
|
formModel: {},
|
|
echartFors: [
|
|
{title: '的读写速率(KB/s)', oneName: '磁盘写入速率', twoName: '磁盘读取速率'},
|
|
// {title: '的读写次数(次)', oneName: '磁盘写入次数', twoName: '磁盘读取次数'},
|
|
// {title: '的读写字节(Bytes/s)', oneName: '磁盘写入字节', twoName: '磁盘读取字节'},
|
|
],
|
|
echartList: []
|
|
},
|
|
dock: {
|
|
title: '容器',
|
|
type: 'dock',
|
|
formList: {id: '容器ID', name: '容器名称'},
|
|
formModel: {},
|
|
echartFors: [
|
|
{title: '的CPU利用率(%)', oneName: 'CPU利用率'},
|
|
{title: '的内存利用率(%)', oneName: '内存利用率'},
|
|
{title: '的网络速率(Kbps)', oneName: '网络接收速率', twoName: '网络发送速率'},
|
|
],
|
|
echartList: []
|
|
},
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
const now = new Date();
|
|
// 获取当前时间
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
// 正确计算前一天（处理跨月情况）
|
|
const prevDate = new Date(now);
|
|
prevDate.setDate(now.getDate() - 1);
|
|
const prevYear = prevDate.getFullYear();
|
|
const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0');
|
|
const prevDay = String(prevDate.getDate()).padStart(2, '0');
|
|
// 构建时间字符串
|
|
const timeString = `${hours}:${minutes}:${seconds}`;
|
|
const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`;
|
|
const endData = `${year}-${month}-${day} ${timeString}`;
|
|
|
|
this.firstTabTime = {startTime: startData, endTime: endData};
|
|
this.firstTabTimeArr = [startData, endData];
|
|
this.currTimeList = {startTime: startData, endTime: endData};
|
|
this.defaultTimes = [startData, endData];
|
|
this.paramsData = this.$route && this.$route.query;
|
|
this.handleClick();
|
|
},
|
|
methods: {
|
|
async handleClick(tab, event) {
|
|
this.loading = false;
|
|
if (this.activeName === 'first') {
|
|
await Promise.all([
|
|
this.getMonitorData(),
|
|
this.getCpuLoadData(this.firstTabTime),
|
|
this.getCpuTimeData(this.firstTabTime),
|
|
this.getProcNumData(this.firstTabTime),
|
|
this.getUserNumData(this.firstTabTime),
|
|
this.getSwapSizeFreeData(this.firstTabTime),
|
|
this.getMemoryUtilizationData(this.firstTabTime),
|
|
this.getSwapSizePercentData(this.firstTabTime),
|
|
this.getMemorySizeAvailableData(this.firstTabTime),
|
|
this.getMemorySizePercentData(this.firstTabTime),
|
|
]);
|
|
this.loading = true;
|
|
} else {
|
|
this.secondChartList = {};
|
|
this.eventDataMap = {};
|
|
this.activeNames = [];
|
|
await this.fnInterFaceNameList();
|
|
this.loading = true;
|
|
}
|
|
},
|
|
getMonitorData() {
|
|
this.formData = {formFirst: this.formFirst};
|
|
serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
|
|
if (res && res.data) {
|
|
this.$set(this.formData, 'formValue', res.data);
|
|
}
|
|
});
|
|
},
|
|
getCpuLoadData(val) {
|
|
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
|
|
cpuLoadData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
cpuData['fnEvent'] = 'getCpuLoadData';
|
|
cpuData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
cpuData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
cpuData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['load1Data'] && res.data['yData']['load1Data'].length > 0 ? res.data['yData']['load1Data'] : [];
|
|
cpuData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['load5Data'] && res.data['yData']['load5Data'].length > 0 ? res.data['yData']['load5Data'] : [];
|
|
cpuData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['load15Data'] && res.data['yData']['load15Data'].length > 0 ? res.data['yData']['load15Data'] : [];
|
|
cpuData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['utiData'] && res.data['yData']['utiData'].length > 0 ? res.data['yData']['utiData'] : [];
|
|
}
|
|
// this.firstChartList[0] = cpuData;
|
|
this.$set(this.firstChartList, 0, cpuData);
|
|
}).catch(() => {
|
|
this.firstChartList[0] = cpuData;
|
|
});
|
|
},
|
|
getCpuTimeData(val) {
|
|
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
|
|
cpuTimeData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
memData['fnEvent'] = 'getCpuTimeData';
|
|
memData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
memData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
memData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['normalData'] && res.data['yData']['normalData'].length > 0 ? res.data['yData']['normalData'] : [];
|
|
memData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['idleData'] && res.data['yData']['idleData'].length > 0 ? res.data['yData']['idleData'] : [];
|
|
memData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['iowaitData'] && res.data['yData']['iowaitData'].length > 0 ? res.data['yData']['iowaitData'] : [];
|
|
memData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['norespData'] && res.data['yData']['norespData'].length > 0 ? res.data['yData']['norespData'] : [];
|
|
memData.dataVal.dataList[4].data = res && res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
|
|
memData.dataVal.dataList[5].data = res && res.data && res.data['yData'] && res.data['yData']['userpData'] && res.data['yData']['userpData'].length > 0 ? res.data['yData']['userpData'] : [];
|
|
}
|
|
// this.firstChartList[1] = memData;
|
|
this.$set(this.firstChartList, 1, memData);
|
|
}).catch(() => {
|
|
this.firstChartList[1] = memData;
|
|
});
|
|
},
|
|
getProcNumData(val) {
|
|
let procData = JSON.parse(JSON.stringify(this.resultData[2]));
|
|
procNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
procData['fnEvent'] = 'getProcNumData';
|
|
procData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
procData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
procData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['procNumRunData'] && res.data['yData']['procNumRunData'].length > 0 ? res.data['yData']['procNumRunData'] : [];
|
|
// procData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['procNumData'] && res.data['yData']['procNumData'].length > 0 ? res.data['yData']['procNumData'] : [];
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 2, procData);
|
|
}).catch(() => {
|
|
this.firstChartList[2] = procData;
|
|
});
|
|
},
|
|
getUserNumData(val) {
|
|
let userNumData = JSON.parse(JSON.stringify(this.resultData[3]));
|
|
serverUserNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
userNumData['fnEvent'] = 'getUserNumData';
|
|
userNumData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
userNumData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
userNumData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['usersNumData'] && res.data['yData']['usersNumData'].length > 0 ? res.data['yData']['usersNumData'] : [];
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 3, userNumData);
|
|
}).catch(() => {
|
|
this.firstChartList[3] = userNumData;
|
|
});
|
|
},
|
|
getSwapSizeFreeData(val) {
|
|
let swapSizeFreeData = JSON.parse(JSON.stringify(this.resultData[4]));
|
|
swapSizeFree(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
swapSizeFreeData['fnEvent'] = 'getSwapSizeFreeData';
|
|
swapSizeFreeData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
swapSizeFreeData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
swapSizeFreeData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['swapSizeFreeData'] && res.data['yData']['swapSizeFreeData'].length > 0 ? res.data['yData']['swapSizeFreeData'] : [];
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 4, swapSizeFreeData);
|
|
}).catch(() => {
|
|
this.firstChartList[4] = swapSizeFreeData;
|
|
});
|
|
},
|
|
getMemoryUtilizationData(val) {
|
|
let memoryUtilizaData = JSON.parse(JSON.stringify(this.resultData[5]));
|
|
memoryUtilization(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
memoryUtilizaData['fnEvent'] = 'getMemoryUtilizationData';
|
|
memoryUtilizaData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
memoryUtilizaData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
memoryUtilizaData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memoryUtilizationData'] && res.data['yData']['memoryUtilizationData'].length > 0 ? res.data['yData']['memoryUtilizationData'] : [];
|
|
if (memoryUtilizaData.dataVal.dataList[0].data.length > 0 && memoryUtilizaData.dataVal.dataList[0].data.some(num => num < 0)) {
|
|
memoryUtilizaData.dataVal.gridLeft = '-7%';
|
|
}
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 5, memoryUtilizaData);
|
|
}).catch(() => {
|
|
this.firstChartList[5] = memoryUtilizaData;
|
|
});
|
|
},
|
|
getSwapSizePercentData(val) {
|
|
let swapSizePercentData = JSON.parse(JSON.stringify(this.resultData[6]));
|
|
swapSizePercent(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
swapSizePercentData['fnEvent'] = 'getSwapSizePercentData';
|
|
swapSizePercentData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
swapSizePercentData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
swapSizePercentData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['swapSizePercentData'] && res.data['yData']['swapSizePercentData'].length > 0 ? res.data['yData']['swapSizePercentData'] : [];
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 6, swapSizePercentData);
|
|
}).catch(() => {
|
|
this.firstChartList[6] = swapSizePercentData;
|
|
});
|
|
},
|
|
getMemorySizeAvailableData(val) {
|
|
let memorySizeAvailData = JSON.parse(JSON.stringify(this.resultData[7]));
|
|
memorySizeAvailable(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
memorySizeAvailData['fnEvent'] = 'getMemorySizeAvailableData';
|
|
memorySizeAvailData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
memorySizeAvailData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
memorySizeAvailData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memorySizeAvailableData'] && res.data['yData']['memorySizeAvailableData'].length > 0 ? res.data['yData']['memorySizeAvailableData'] : [];
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 7, memorySizeAvailData);
|
|
}).catch(() => {
|
|
this.firstChartList[7] = memorySizeAvailData;
|
|
});
|
|
},
|
|
getMemorySizePercentData(val) {
|
|
let memorySizePercentData = JSON.parse(JSON.stringify(this.resultData[8]));
|
|
memorySizePercent(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
|
memorySizePercentData['fnEvent'] = 'getMemorySizePercentData';
|
|
memorySizePercentData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
|
|
if (res && res.data) {
|
|
memorySizePercentData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
|
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
|
memorySizePercentData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memorySizePercentData'] && res.data['yData']['memorySizePercentData'].length > 0 ? res.data['yData']['memorySizePercentData'] : []
|
|
}
|
|
// this.firstChartList[2] = powerData;
|
|
this.$set(this.firstChartList, 8, memorySizePercentData);
|
|
}).catch(() => {
|
|
this.firstChartList[8] = memorySizePercentData;
|
|
});
|
|
},
|
|
// two
|
|
// //第一模块 挂载 === 接口名称
|
|
fnInterFaceNameList(val) {
|
|
this.activeNames = [];
|
|
mountNameList({clientId: this.paramsData.clientId}).then(res => {
|
|
if (res && res.data && res.data.length > 0) {
|
|
let tabNameList = {};
|
|
res && res.data.forEach(async(item,index) => {
|
|
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
|
|
oneData.title = item && item.mount;
|
|
tabNameList[item.mount] = oneData;
|
|
});
|
|
this.secondChartList = {...tabNameList};
|
|
this.activeNames = [Object.keys(tabNameList)[0]];
|
|
this.fnSwitchNetNames(); // 第二模块名称
|
|
setTimeout(() => {
|
|
this.fnDiskNames(); // 第三模块名称
|
|
setTimeout(() => {
|
|
this.fnDockerNames(); // 第四模块名称
|
|
},500);
|
|
},500);
|
|
// this.getPointDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
|
|
} else {
|
|
this.fnSwitchNetNames(); // 第二模块名称
|
|
setTimeout(() => {
|
|
this.fnDiskNames(); // 第三模块名称
|
|
setTimeout(() => {
|
|
this.fnDockerNames(); // 第四模块名称
|
|
},500);
|
|
},500);
|
|
}
|
|
}).catch(error =>{
|
|
this.fnSwitchNetNames();
|
|
setTimeout(() => {
|
|
this.fnDiskNames(); // 第三模块名称
|
|
setTimeout(() => {
|
|
this.fnDockerNames(); // 第四模块名称
|
|
},500);
|
|
},500);
|
|
// this.$modal.closeLoading();
|
|
// console.error('获取接口名称列表失败：', error);
|
|
// 可添加错误提示，如this.$message.error('数据加载失败')
|
|
});
|
|
},
|
|
// 基本信息
|
|
getPointDetailsData(times, titleName) {
|
|
this.eventDataMap[titleName] = true;
|
|
pointDetails({clientId: this.paramsData.clientId, mount: titleName}).then(res => {
|
|
this.secondChartList[titleName].formModel = res && res.data || [];
|
|
this.getSpaceEcharts(times ,titleName);
|
|
setTimeout(() => {
|
|
this.getSpaceRate(times, titleName);
|
|
},500)
|
|
}).catch(() => {
|
|
this.getSpaceEcharts(times, titleName);
|
|
setTimeout(() => {
|
|
this.getSpaceRate(times, titleName);
|
|
},500)
|
|
});
|
|
},
|
|
// 空间
|
|
getSpaceEcharts(times,titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
|
|
mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
mountEcharts.fnEvent = 'getSpaceEcharts';
|
|
spaceEcharts(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
mountEcharts.title = titleName + content.echartFors[0].title;
|
|
mountEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
mountEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
mountEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[0].oneName,
|
|
data: res.data && res.data.yData['vfsFreeData'] || []
|
|
};
|
|
mountEcharts.dataVal.dataList[1] = {
|
|
name: content.echartFors[0].twoName,
|
|
data: res.data && res.data.yData['vfsTotalData'] || []
|
|
};
|
|
}
|
|
mountCollect['echartList'][0] = mountEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
this.$modal.closeLoading();
|
|
}).catch(() => {
|
|
this.$modal.closeLoading();
|
|
});
|
|
},
|
|
// 空间利用率
|
|
getSpaceRate(times,titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
|
|
mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
mountEcharts.fnEvent = 'getSpaceRate';
|
|
spaceRate(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
mountEcharts.title = titleName + content.echartFors[1].title;
|
|
mountEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
mountEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
mountEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[1].oneName,
|
|
data: res.data && res.data.yData['vfsUtilData'] || []
|
|
};
|
|
}
|
|
mountCollect['echartList'][1] = mountEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
this.$modal.closeLoading();
|
|
}).catch(() => {
|
|
this.$modal.closeLoading();
|
|
});
|
|
},
|
|
// 第二模块 网络接口 ---所有网络接口名称
|
|
fnSwitchNetNames (){
|
|
postInterFaceName({clientId: this.paramsData.clientId,resourceType: 1}).then(res => {
|
|
if (res && res.length > 0) {
|
|
let tabNameList = {};
|
|
res && res.forEach(async(item,index) => {
|
|
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
|
oneData.title = item && item.interfaceName;
|
|
oneData.serverIp = item && item.serverIp;
|
|
tabNameList[item.interfaceName] = oneData;
|
|
this.$set(this.secondChartList, item.interfaceName, oneData);
|
|
});
|
|
if (this.activeNames && this.activeNames.length <= 0) {
|
|
this.activeNames = [res[0].interfaceName];
|
|
// this.getNetDetailsData(this.currTimeList, res[0].interfaceName);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 基本信息
|
|
getNetDetailsData(times, titleName) {
|
|
this.eventDataMap[titleName] = true;
|
|
netDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
|
|
this.secondChartList[titleName].formModel = res && res.data || [];
|
|
if (await this.getNetEcharts(times, titleName)) {
|
|
if (await this.getNetIPv4Echarts(times, titleName)) {
|
|
if (await this.getNetIPv6Echarts(times, titleName)) {
|
|
this.getNetDropped(times ,titleName);
|
|
}
|
|
}
|
|
}
|
|
}).catch(async () => {
|
|
if (await this.getNetEcharts(times, titleName)) {
|
|
if (await this.getNetIPv4Echarts(times, titleName)) {
|
|
if (await this.getNetIPv6Echarts(times, titleName)) {
|
|
this.getNetDropped(times ,titleName);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 流量
|
|
getNetEcharts(times, titleName, unitData) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getNetEcharts';
|
|
return trafficEcharts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[0].title;
|
|
netEcharts.dataVal.gridTop = '50%';
|
|
netEcharts.dataVal.legend = {top: '32%', left: '10%',type: 'scroll',orient: 'horizontal'};
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
if (content.echartFors[0].unitSel) {
|
|
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
|
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
|
}
|
|
if (res.data && res.data.showRealation) {
|
|
Object.keys(res.data.showRealation).forEach((key,index) => {
|
|
netEcharts.dataVal.dataList[index] = {
|
|
name: res.data.showRealation[key],
|
|
data: res.data && res.data.yData[key] || []
|
|
};
|
|
});
|
|
}
|
|
// netEcharts.dataVal.dataList[0] = {
|
|
// name: content.echartFors[0].oneName,
|
|
// data: res.data && res.data.yData['netOutSpeedData'] || []
|
|
// };
|
|
// netEcharts.dataVal.dataList[1] = {
|
|
// name: content.echartFors[0].twoName,
|
|
// data: res.data && res.data.yData['netInSpeedData'] || []
|
|
// };
|
|
mountCollect['echartList'][0] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
return true;
|
|
}).catch(() => {
|
|
return true;
|
|
});
|
|
},
|
|
// IPv4流量
|
|
getNetIPv4Echarts(times, titleName, unitData) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getNetIPv4Echarts';
|
|
return trafficIPv4Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[1].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[1].oneName,
|
|
data: res.data && res.data.yData['netOutSpeedData'] || []
|
|
};
|
|
if (content.echartFors[1].unitSel) {
|
|
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
|
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
|
}
|
|
netEcharts.dataVal.dataList[1] = {
|
|
name: content.echartFors[1].twoName,
|
|
data: res.data && res.data.yData['netInSpeedData'] || []
|
|
};
|
|
mountCollect['echartList'][1] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
return true;
|
|
}).catch(() => {
|
|
return true;
|
|
});
|
|
},
|
|
// IPv6流量
|
|
getNetIPv6Echarts(times, titleName, unitData) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getNetIPv6Echarts';
|
|
return trafficIPv6Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[2].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[2].oneName,
|
|
data: res.data && res.data.yData['netOutSpeedData'] || []
|
|
};
|
|
if (content.echartFors[2].unitSel) {
|
|
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
|
|
netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
|
|
}
|
|
netEcharts.dataVal.dataList[1] = {
|
|
name: content.echartFors[2].twoName,
|
|
data: res.data && res.data.yData['netInSpeedData'] || []
|
|
};
|
|
mountCollect['echartList'][2] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
return true;
|
|
}).catch(() => {
|
|
return true;
|
|
});
|
|
},
|
|
// 丢包数
|
|
getNetDropped(times, titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getNetDropped';
|
|
return droppedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[3].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[3].oneName,
|
|
data: res.data && res.data.yData['outDroppedData'] || []
|
|
};
|
|
netEcharts.dataVal.dataList[1] = {
|
|
name: content.echartFors[3].twoName,
|
|
data: res.data && res.data.yData['inDroppedData'] || []
|
|
};
|
|
mountCollect['echartList'][3] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
this.$modal.closeLoading();
|
|
return true;
|
|
}).catch(() => {
|
|
this.$modal.closeLoading();
|
|
return true;
|
|
});
|
|
},
|
|
|
|
// 第三模块 硬盘设备 ---所有名称 diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts
|
|
fnDiskNames (){
|
|
diskAllNames({clientId: this.paramsData.clientId}).then(res => {
|
|
if (res && res.data.length > 0) {
|
|
let tabNameList = {};
|
|
res && res.data.forEach(async(item,index) => {
|
|
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
|
|
oneData.title = item && item.name;
|
|
tabNameList[item.name] = oneData;
|
|
this.$set(this.secondChartList, item.name, oneData);
|
|
});
|
|
if (this.activeNames && this.activeNames.length <= 0) {
|
|
this.activeNames = [res.data[0].name];
|
|
// this.getDiskDetailsData(this.currTimeList, res.data[0].name);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 基本信息
|
|
getDiskDetailsData(times, titleName) {
|
|
this.eventDataMap[titleName] = true;
|
|
diskDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
|
|
this.secondChartList[titleName].formModel = res && res.data || [];
|
|
this.getSpeedEcharts(times, titleName);
|
|
// if (await this.getSpeedEcharts(times, titleName)) {
|
|
// if (await this.getDiskTimes(times ,titleName)) {
|
|
// this.getDiskBytes(times ,titleName);
|
|
// }
|
|
// }
|
|
}).catch(async () => {
|
|
this.getSpeedEcharts(times, titleName);
|
|
// if (await this.getSpeedEcharts(times, titleName)) {
|
|
// if (await this.getDiskTimes(times ,titleName)) {
|
|
// this.getDiskBytes(times ,titleName);
|
|
// }
|
|
// }
|
|
});
|
|
},
|
|
//
|
|
getSpeedEcharts(times, titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getSpeedEcharts';
|
|
return speedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[0].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[0].oneName,
|
|
data: res.data && res.data.yData['writeSpeedData'] || []
|
|
};
|
|
netEcharts.dataVal.dataList[1] = {
|
|
name: content.echartFors[0].twoName,
|
|
data: res.data && res.data.yData['readSpeedData'] || []
|
|
};
|
|
mountCollect['echartList'][0] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
this.$modal.closeLoading();
|
|
return true;
|
|
}).catch(() => {
|
|
this.$modal.closeLoading();
|
|
return true;
|
|
});
|
|
},
|
|
//
|
|
// getDiskTimes(times, titleName) {
|
|
// let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
// let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
// let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
|
|
// netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
// netEcharts.fnEvent = 'getDiskTimes';
|
|
// return timesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
// if (res && res.data) {
|
|
// netEcharts.title = titleName + content.echartFors[1].title;
|
|
// netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
// netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
// netEcharts.dataVal.dataList[0] = {
|
|
// name: content.echartFors[1].oneName,
|
|
// data: res.data && res.data.yData['writeTimesData'] || []
|
|
// };
|
|
// netEcharts.dataVal.dataList[1] = {
|
|
// name: content.echartFors[1].twoName,
|
|
// data: res.data && res.data.yData['readTimesData'] || []
|
|
// };
|
|
// mountCollect['echartList'][1] = netEcharts;
|
|
// this.$set(this.secondChartList, titleName, mountCollect);
|
|
// }
|
|
// return true;
|
|
// }).catch(() => {
|
|
// return true;
|
|
// });
|
|
// },
|
|
// //
|
|
// getDiskBytes(times, titleName) {
|
|
// let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
// let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
// let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
|
|
// netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
// netEcharts.fnEvent = 'getDiskBytes';
|
|
// return bytesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
// if (res && res.data) {
|
|
// netEcharts.title = titleName + content.echartFors[2].title;
|
|
// netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
// netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
// netEcharts.dataVal.dataList[0] = {
|
|
// name: content.echartFors[2].oneName,
|
|
// data: res.data && res.data.yData['writeBytesData'] || []
|
|
// };
|
|
// netEcharts.dataVal.dataList[1] = {
|
|
// name: content.echartFors[2].twoName,
|
|
// data: res.data && res.data.yData['readBytesData'] || []
|
|
// };
|
|
// mountCollect['echartList'][2] = netEcharts;
|
|
// this.$set(this.secondChartList, titleName, mountCollect);
|
|
// }
|
|
// this.$modal.closeLoading();
|
|
// return true;
|
|
// }).catch(() => {
|
|
// this.$modal.closeLoading();
|
|
// return true;
|
|
// });
|
|
// },
|
|
|
|
// 第四模块 容器 ---所有名称 dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts
|
|
fnDockerNames (){
|
|
dockerAllNames({clientId: this.paramsData.clientId}).then(res => {
|
|
if (res && res.data.length > 0) {
|
|
let tabNameList = {};
|
|
res && res.data.forEach(async(item,index) => {
|
|
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
|
|
oneData.title = item && item.id;
|
|
tabNameList[item.id] = oneData;
|
|
this.$set(this.secondChartList, item.id, oneData);
|
|
});
|
|
if (this.activeNames && this.activeNames.length <= 0) {
|
|
this.activeNames = [res.data[0].id];
|
|
// this.getDockerDetailsData(this.currTimeList, res.data[0].id);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 基本信息
|
|
getDockerDetailsData(times, titleName) {
|
|
this.eventDataMap[titleName] = true;
|
|
dockerDetails({clientId: this.paramsData.clientId, id: titleName}).then(async res => {
|
|
this.secondChartList[titleName].formModel = res && res.data || [];
|
|
if (await this.getCpuEcharts(times, titleName)) {
|
|
if (await this.getDockerMem(times ,titleName)) {
|
|
this.getDockerSpeed(times ,titleName);
|
|
}
|
|
}
|
|
}).catch(async () => {
|
|
if (await this.getCpuEcharts(times, titleName)) {
|
|
if (await this.getDockerMem(times ,titleName)) {
|
|
this.getDockerSpeed(times ,titleName);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//
|
|
getCpuEcharts(times, titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getCpuEcharts';
|
|
return cpuUtilEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[0].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[0].oneName,
|
|
data: res.data && res.data.yData['writeSpeedData'] || []
|
|
};
|
|
mountCollect['echartList'][0] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
return true;
|
|
}).catch(() => {
|
|
return true;
|
|
});
|
|
},
|
|
//
|
|
getDockerMem(times, titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getDockerMem';
|
|
return dockerMemEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[1].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[1].oneName,
|
|
data: res.data && res.data.yData['writeTimesData'] || []
|
|
};
|
|
mountCollect['echartList'][1] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
return true;
|
|
}).catch(() => {
|
|
return true;
|
|
});
|
|
},
|
|
//
|
|
getDockerSpeed(times, titleName) {
|
|
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
|
|
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
|
let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
|
|
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
|
netEcharts.fnEvent = 'getDockerSpeed';
|
|
return dockerSpeedEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
|
if (res && res.data) {
|
|
netEcharts.title = titleName + content.echartFors[2].title;
|
|
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
|
|
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
|
|
netEcharts.dataVal.dataList[0] = {
|
|
name: content.echartFors[2].oneName,
|
|
data: res.data && res.data.yData['writeBytesData'] || []
|
|
};
|
|
netEcharts.dataVal.dataList[1] = {
|
|
name: content.echartFors[2].twoName,
|
|
data: res.data && res.data.yData['readBytesData'] || []
|
|
};
|
|
mountCollect['echartList'][2] = netEcharts;
|
|
this.$set(this.secondChartList, titleName, mountCollect);
|
|
}
|
|
this.$modal.closeLoading();
|
|
return true;
|
|
}).catch(() => {
|
|
this.$modal.closeLoading();
|
|
return true;
|
|
});
|
|
},
|
|
|
|
|
|
collapseChangeData(valList) {
|
|
valList && valList.forEach(item => {
|
|
if (item && !this.eventDataMap[item]) {
|
|
this.$modal.loading();
|
|
if (this.secondChartList[item].type === 'mount') {
|
|
this.getPointDetailsData(this.currTimeList, item);
|
|
} else if (this.secondChartList[item].type === 'net') {
|
|
this.getNetDetailsData(this.currTimeList, item);
|
|
} else if (this.secondChartList[item].type === 'disk') {
|
|
this.getDiskDetailsData(this.currTimeList, item);
|
|
} else if (this.secondChartList[item].type === 'dock') {
|
|
this.getDockerDetailsData(this.currTimeList, item);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
chartFnEvent(valData, fnName, tabName, unit) {
|
|
this.firstChartTrans = valData;
|
|
// 检查函数是否存在，避免报错
|
|
if (typeof this[fnName] === 'function') {
|
|
this.defaultTimes = valData.timeArr;
|
|
this.firstTabTimeArr = valData.timeArr;
|
|
let unitData = unit ? {unit: unit} : {};
|
|
// 调用实际函数，并传递参数（如选中的值、当前项）
|
|
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName, unitData);
|
|
} else {
|
|
console.warn(`函数 ${fnName} 未定义`);
|
|
}
|
|
},
|
|
goBack() {
|
|
this.$router.push("/resource/serverRegister");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|