811 lines
37 KiB
Vue
811 lines
37 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<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-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-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 {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,
|
||
switchNetErrDiscard, switchNetSpeed, moduleAllName, moduleMsg, moduleLowThreshold, modulePower, mpuAllName, mpuMsg, mpuCpuUse, mpuMemUse,
|
||
mpuTemperature,pwrAllName, pwrMsg, pwrCurrent, pwrVoltage, fanAllName, fanMsg} from "@/api/disRevenue/resource"
|
||
export default {
|
||
name: "MonitorChart",
|
||
components: {FirstMonitor, SecondAutoFind},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
currTimeList: {},
|
||
defaultTimes: [],
|
||
activeName: 'first',
|
||
paramsData: {},
|
||
// 第一栏
|
||
firstChartTrans: {},
|
||
formFirst: {
|
||
sysName: '系统名称', sysLocation: '系统位置', sysObjectID: '系统Object ID', hwStackSystemMac: '系统MAC地址',
|
||
sysUpTime: '系统运行时间', entPhysicalName: '设备名称', sysContact: '系统联系信息', entPhysicalSoftwareRev: '设备软件版本', sysDescr: '系统描述'
|
||
},
|
||
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使用率',
|
||
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: '系统平均功率(mW)',
|
||
data: [],
|
||
},{
|
||
name: '系统实时功率(mW)',
|
||
data: []
|
||
}]
|
||
}
|
||
}
|
||
],
|
||
// 第二栏
|
||
activeNames: [],
|
||
secondChartList: {},
|
||
eventDataMap: {},
|
||
echartData: {
|
||
title: 'GE1/0/1的丢包数',
|
||
dateShowType: 'datetimerange',
|
||
dateDataTrans: {transList: true},
|
||
dataVal: {
|
||
titleVal: {textAlign: 'left', left: '1%'},
|
||
yAxisName: ' ',
|
||
gridTop: '35%',
|
||
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: {
|
||
net: {
|
||
title: '网络端口GE1/0/1',
|
||
type: 'net',
|
||
formList: {ifDescr: '端口名称', ifType: '端口类型', ifOperStatus: '端口状态', ifSpeed: '端口适配速率(Mbps)'},
|
||
formModel: {},
|
||
echartFors: [
|
||
{title: '的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
|
||
{title: '的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
|
||
{title: '的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
|
||
{title: '的网络速率', oneName: '端口实时接收速率', twoName: '端口实时发送速率'},
|
||
],
|
||
echartList: []
|
||
},
|
||
light: {
|
||
title: '光模块sabc',
|
||
type: 'light',
|
||
formList: {name: '光模块端口名称'},
|
||
formModel: {name: 'sabc'},
|
||
echartFors: [
|
||
{title: '的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
|
||
{title: '的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
|
||
],
|
||
echartList: []
|
||
},
|
||
mpu: {
|
||
title: 'MPU1',
|
||
type: 'mpu',
|
||
formList: {name: 'MPU名称', system: 'MPU的操作系统'},
|
||
formModel: {name: 'MPU1', system: 'xxxx'},
|
||
echartFors: [
|
||
{title: '的CPU使用率(%)', oneName: 'CPU利用率'},
|
||
{title: '的内存使用率(%)', oneName: '内存利用率'},
|
||
{title: '的温度(°C)', oneName: '温度'},
|
||
],
|
||
echartList: []
|
||
},
|
||
pw: {
|
||
title: '电源PW1',
|
||
type: 'pw',
|
||
formList: {name: '电源名称', status: '电源状态'},
|
||
formModel: {name: 'PW1', status: '正在供电'},
|
||
echartFors: [
|
||
{title: '电流(mA)', oneName: '电源电流'},
|
||
{title: '电压(mV)', oneName: '电源电压'}
|
||
],
|
||
echartList: []
|
||
},
|
||
fan: {
|
||
title: '风扇FAN1',
|
||
type: 'fan',
|
||
formList: {name: '风扇名称', status: '风扇状态'},
|
||
formModel: {name: 'FAN1', status: 'xxx'},
|
||
echartFors: [],
|
||
echartList: []
|
||
}
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
let startData = '';
|
||
let endData = '';
|
||
const year = new Date().getFullYear();
|
||
const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
|
||
const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8）
|
||
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
|
||
startData = `${year}-${month}-${prevDay} 00:00:00`;
|
||
endData = `${year}-${month}-${day} 00:00:00`;
|
||
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.getCpuData(this.currTimeList),
|
||
this.getMemData(this.currTimeList),
|
||
this.getPowerData(this.currTimeList)
|
||
]);
|
||
this.loading = true;
|
||
} else {
|
||
await this.fnInterFaceNameList();
|
||
this.loading = true;
|
||
}
|
||
},
|
||
getMonitorData() {
|
||
this.formData = {formFirst: this.formFirst};
|
||
switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
|
||
if (res && res.data) {
|
||
this.formData['formValue'] = res.data;
|
||
}
|
||
});
|
||
},
|
||
getCpuData(val) {
|
||
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
|
||
cpuData.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
cpuData['fnEvent'] = 'getCpuData';
|
||
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||
if (res && res.data) {
|
||
cpuData.dataVal.lineXData = 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.data && res.data['yData'] && res.data['yData']['switchCpuUse'] && res.data['yData']['switchCpuUse'].length > 0 ? res.data['yData']['switchCpuUse'] : [];
|
||
}
|
||
// this.firstChartList[0] = cpuData;
|
||
this.$set(this.firstChartList, 0, cpuData);
|
||
}).catch(() => {
|
||
this.firstChartList[0] = cpuData;
|
||
});
|
||
},
|
||
getMemData(val) {
|
||
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
|
||
memData.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
memData['fnEvent'] = 'getMemData';
|
||
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||
if (res && res.data) {
|
||
memData.dataVal.lineXData = 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.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
|
||
}
|
||
// this.firstChartList[1] = memData;
|
||
this.$set(this.firstChartList, 1, memData);
|
||
}).catch(() => {
|
||
this.firstChartList[1] = memData;
|
||
});
|
||
},
|
||
getPowerData(val) {
|
||
let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
|
||
powerData.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
powerData['fnEvent'] = 'getPowerData';
|
||
switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||
if (res && res.data) {
|
||
powerData.dataVal.lineXData = 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'] : [];
|
||
powerData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
|
||
powerData.dataVal.dataList[1].data = res.data && res.data['yData'] && res.data['yData']['switchcurrentPower'] && res.data['yData']['switchcurrentPower'].length > 0 ? res.data['yData']['switchcurrentPower'] : [];
|
||
}
|
||
// this.firstChartList[2] = powerData;
|
||
this.$set(this.firstChartList, 2, powerData);
|
||
}).catch(() => {
|
||
this.firstChartList[2] = powerData;
|
||
});
|
||
},
|
||
// two
|
||
// 接口名称
|
||
fnInterFaceNameList(val) {
|
||
this.activeNames = [];
|
||
postInterFaceName({clientId: this.paramsData.clientId,resourceType: 2}).then(res => {
|
||
let tabNameList = {};
|
||
if (res && res.length > 0) {
|
||
res && res.forEach(async(item,index) => {
|
||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
oneData.title = item && item.interfaceName;
|
||
tabNameList[item.interfaceName + '_net'] = oneData;
|
||
});
|
||
this.secondChartList = {...tabNameList};
|
||
this.activeNames = [Object.keys(tabNameList)[0]];
|
||
this.fnModuleNameList(); // 第二模块名称
|
||
setTimeout(() => {
|
||
this.fnMpuNameList(); // 第三模块名称
|
||
setTimeout(() => {
|
||
this.fnPwrNameList(); // 第四模块名称
|
||
setTimeout(() => {
|
||
this.fnFanNameList(); // 第五模块名称
|
||
},500);
|
||
},500);
|
||
},500);
|
||
this.getNetDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
|
||
} else {
|
||
this.fnModuleNameList(); // 第二模块名称
|
||
setTimeout(() => {
|
||
this.fnMpuNameList(); // 第三模块名称
|
||
setTimeout(() => {
|
||
this.fnPwrNameList(); // 第四模块名称
|
||
setTimeout(() => {
|
||
this.fnFanNameList(); // 第五模块名称
|
||
},500);
|
||
},500);
|
||
},500);
|
||
}
|
||
}).catch((error) => {
|
||
this.fnModuleNameList(); // 第二模块名称
|
||
setTimeout(() => {
|
||
this.fnMpuNameList(); // 第三模块名称
|
||
setTimeout(() => {
|
||
this.fnPwrNameList(); // 第四模块名称
|
||
setTimeout(() => {
|
||
this.fnFanNameList(); // 第五模块名称
|
||
},500);
|
||
},500);
|
||
},500);
|
||
});
|
||
},
|
||
// 基本信息
|
||
getNetDetailsData(times, titleName, keyName) {
|
||
this.$modal.loading();
|
||
this.eventDataMap[keyName] = true;
|
||
switchNetDetails({clientId: this.paramsData.clientId, ifDescr: titleName}).then(async res => {
|
||
this.secondChartList[keyName].formModel = res && res.data || [];
|
||
if (await this.getNetDiscards(times ,titleName, keyName)) {
|
||
if (await this.getNetTotal(times, titleName, keyName)) {
|
||
if (await this.getNetErrDisc(times, titleName, keyName)) {
|
||
this.getNetSpeed(times, titleName, keyName);
|
||
}
|
||
}
|
||
}
|
||
}).catch(async error => {
|
||
if (await this.getNetDiscards(times ,titleName, keyName)) {
|
||
if (await this.getNetTotal(times, titleName, keyName)) {
|
||
if (await this.getNetErrDisc(times, titleName, keyName)) {
|
||
this.getNetSpeed(times, titleName, keyName);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 丢包
|
||
getNetDiscards(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getNetDiscards';
|
||
return switchNetDiscards(Object.assign({}, {ifDescr : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[0].title;
|
||
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['netInDiscardsData'] || []
|
||
};
|
||
// 出
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[0].twoName,
|
||
data: res.data && res.data.yData['netOutDiscardsData'] || []
|
||
};
|
||
mountCollect['echartList'][0] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 总数
|
||
getNetTotal(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getNetTotal';
|
||
return switchNeTotal(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[1].title;
|
||
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['netInTotalData'] || []
|
||
};
|
||
// 出
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[1].twoName,
|
||
data: res.data && res.data.yData['netOutTotalData'] || []
|
||
};
|
||
mountCollect['echartList'][1] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 错误丢包
|
||
getNetErrDisc(times, titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getNetErrDisc';
|
||
return switchNetErrDiscard(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[2].title;
|
||
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['netInErrDiscardsData'] || []
|
||
};
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[2].twoName,
|
||
data: res.data && res.data.yData['netOutErrDiscardsData'] || []
|
||
};
|
||
mountCollect['echartList'][2] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 实时流量
|
||
getNetSpeed(times, titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getNetSpeed';
|
||
return switchNetSpeed(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[3].title;
|
||
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['netInSpeedData'] || []
|
||
};
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[3].twoName,
|
||
data: res.data && res.data.yData['netOutSpeedData'] || []
|
||
};
|
||
mountCollect['echartList'][3] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
// return true;
|
||
this.$modal.closeLoading();
|
||
}
|
||
}).catch(() => {
|
||
// return true;
|
||
this.$modal.closeLoading();
|
||
});
|
||
},
|
||
|
||
// 光模块的所有名称 moduleAllName, moduleMsg, moduleLowThreshold, modulePower
|
||
fnModuleNameList(val) {
|
||
moduleAllName({clientId: this.paramsData.clientId}).then(res => {
|
||
let tabNameList = {};
|
||
if (res && res.data && res.data.length > 0) {
|
||
res && res.data.forEach(async(item,index) => {
|
||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['light']));
|
||
oneData.title = item && item.fiberPortName;
|
||
tabNameList[item.fiberPortName + '_module'] = oneData;
|
||
this.$set(this.secondChartList, item.fiberPortName + '_module', oneData);
|
||
});
|
||
if (this.activeNames && this.activeNames.length <= 0) {
|
||
this.activeNames = [Object.keys(tabNameList)[0]];
|
||
this.getModuleDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 基本信息
|
||
getModuleDetailsData(times, titleName, keyName) {
|
||
this.$modal.loading();
|
||
this.eventDataMap[keyName] = true;
|
||
moduleMsg({clientId: this.paramsData.clientId, moudleName: titleName}).then(async res => {
|
||
this.secondChartList[titleName].formModel = res && res.data || [];
|
||
if (await this.getModuleLowThreshold(times ,titleName, keyName)) {
|
||
this.getModulePower(times, titleName, keyName);
|
||
}
|
||
}).catch(async error => {
|
||
if (await this.getModuleLowThreshold(times ,titleName, keyName)) {
|
||
this.getModulePower(times, titleName, keyName);
|
||
}
|
||
});
|
||
},
|
||
// 光衰阈值
|
||
getModuleLowThreshold(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['light']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getModuleLowThreshold';
|
||
return moduleLowThreshold(Object.assign({}, {moudleName : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[0].title;
|
||
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['TxLowThreshold'] || []
|
||
};
|
||
// 出
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[0].twoName,
|
||
data: res.data && res.data.yData['RxLowThreshold'] || []
|
||
};
|
||
mountCollect['echartList'][0] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
// 功率
|
||
getModulePower(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['light']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getModulePower';
|
||
return modulePower(Object.assign({}, {moudleName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[1].title;
|
||
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['RxPower'] || []
|
||
};
|
||
// 出
|
||
netEcharts.dataVal.dataList[1] = {
|
||
name: content.echartFors[1].twoName,
|
||
data: res.data && res.data.yData['TxPower'] || []
|
||
};
|
||
mountCollect['echartList'][1] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
});
|
||
},
|
||
|
||
// mpu的所有名称 mpuAllName, mpuMsg, mpuCpuUse, mpuMemUse, mpuTemperature
|
||
fnMpuNameList(val) {
|
||
mpuAllName({clientId: this.paramsData.clientId}).then(res => {
|
||
let tabNameList = {};
|
||
if (res && res.data && res.data.length > 0) {
|
||
res && res.data.forEach(async(item,index) => {
|
||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
|
||
oneData.title = item && item.mpuName;
|
||
tabNameList[item.mpuName + '_mpu'] = oneData;
|
||
this.$set(this.secondChartList, item.mpuName + '_mpu', oneData);
|
||
});
|
||
if (this.activeNames && this.activeNames.length <= 0) {
|
||
this.activeNames = [Object.keys(tabNameList)[0]];
|
||
this.getMpuDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 基本信息
|
||
getMpuDetailsData(times, titleName, keyName) {
|
||
this.$modal.loading();
|
||
this.eventDataMap[keyName] = true;
|
||
mpuMsg({clientId: this.paramsData.clientId, mpuName: titleName}).then(async res => {
|
||
this.secondChartList[titleName].formModel = res && res.data || [];
|
||
if (await this.getMpuCpuUse(times ,titleName, keyName)) {
|
||
if (await this.getMpuMemUse(times, titleName, keyName)) {
|
||
this.getMpuTemperature(times, titleName, keyName);
|
||
}
|
||
}
|
||
}).catch(async error => {
|
||
if (await this.getMpuCpuUse(times ,titleName, keyName)) {
|
||
if (await this.getMpuMemUse(times, titleName, keyName)) {
|
||
this.getMpuTemperature(times, titleName, keyName);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//
|
||
getMpuCpuUse(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getMpuCpuUse';
|
||
return mpuCpuUse(Object.assign({}, {mpuName : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[0].title;
|
||
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['cpuUsage'] || []
|
||
};
|
||
mountCollect['echartList'][0] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
//
|
||
getMpuMemUse(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getMpuMemUse';
|
||
return mpuMemUse(Object.assign({}, {mpuName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[1].title;
|
||
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['memUsage'] || []
|
||
};
|
||
mountCollect['echartList'][1] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
//
|
||
getMpuTemperature(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getMpuTemperature';
|
||
return mpuTemperature(Object.assign({}, {mpuName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[2].title;
|
||
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['temperature'] || []
|
||
};
|
||
mountCollect['echartList'][2] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
});
|
||
},
|
||
|
||
// 电源的所有名称 pwrAllName, pwrMsg, pwrCurrent, pwrVoltage
|
||
fnPwrNameList(val) {
|
||
pwrAllName({clientId: this.paramsData.clientId}).then(res => {
|
||
let tabNameList = {};
|
||
if (res && res.data && res.data.length > 0) {
|
||
res && res.data.forEach(async(item,index) => {
|
||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
|
||
oneData.title = item && item.pwrName;
|
||
tabNameList[item.pwrName + '_pw'] = oneData;
|
||
this.$set(this.secondChartList, item.pwrName + '_pw', oneData);
|
||
});
|
||
if (this.activeNames && this.activeNames.length <= 0) {
|
||
this.activeNames = [Object.keys(tabNameList)[0]];
|
||
this.getPwrDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 基本信息
|
||
getPwrDetailsData(times, titleName, keyName) {
|
||
this.$modal.loading();
|
||
this.eventDataMap[keyName] = true;
|
||
pwrMsg({clientId: this.paramsData.clientId, pwrName: titleName}).then(async res => {
|
||
this.secondChartList[titleName].formModel = res && res.data || [];
|
||
if (await this.getPwrCurrent(times ,titleName, keyName)) {
|
||
this.getPwrVoltage(times, titleName, keyName);
|
||
}
|
||
}).catch(async error => {
|
||
if (await this.getPwrCurrent(times ,titleName, keyName)) {
|
||
this.getPwrVoltage(times, titleName, keyName);
|
||
}
|
||
});
|
||
},
|
||
//
|
||
getPwrCurrent(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getPwrCurrent';
|
||
return pwrCurrent(Object.assign({}, {pwrName : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[0].title;
|
||
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['pwrCurrent'] || []
|
||
};
|
||
mountCollect['echartList'][0] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
return true;
|
||
});
|
||
},
|
||
//
|
||
getPwrVoltage(times,titleName, keyName) {
|
||
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
|
||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||
let content = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
|
||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||
netEcharts.fnEvent = 'getPwrVoltage';
|
||
return pwrVoltage(Object.assign({}, {pwrName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
|
||
if (res && res.data) {
|
||
netEcharts.title = titleName + content.echartFors[1].title;
|
||
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['pwrVoltage'] || []
|
||
};
|
||
mountCollect['echartList'][1] = netEcharts;
|
||
this.$set(this.secondChartList, keyName, mountCollect);
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
}
|
||
}).catch(() => {
|
||
this.$modal.closeLoading();
|
||
return true;
|
||
});
|
||
},
|
||
|
||
// 风扇的所有名称 fanAllName, fanMsg
|
||
fnFanNameList(val) {
|
||
fanAllName({clientId: this.paramsData.clientId}).then(res => {
|
||
let tabNameList = {};
|
||
if (res && res.data && res.data.length > 0) {
|
||
res && res.data.forEach(async(item,index) => {
|
||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['fan']));
|
||
oneData.title = item && item.fanName;
|
||
tabNameList[item.fanName + '_fan'] = oneData;
|
||
this.$set(this.secondChartList, item.fanName + '_fan', oneData);
|
||
});
|
||
if (this.activeNames && this.activeNames.length <= 0) {
|
||
this.activeNames = [Object.keys(tabNameList)[0]];
|
||
this.getFanDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 基本信息
|
||
getFanDetailsData(times, titleName, keyName) {
|
||
this.eventDataMap[keyName] = true;
|
||
fanMsg({clientId: this.paramsData.clientId, fanName: titleName}).then(res => {
|
||
this.secondChartList[titleName].formModel = res && res.data || [];
|
||
this.$modal.closeLoading();
|
||
}).catch( error => {
|
||
this.$modal.closeLoading();
|
||
});
|
||
},
|
||
|
||
collapseChangeData(valList) {
|
||
valList && valList.forEach(item => {
|
||
if (!this.eventDataMap[item]) {
|
||
this.$modal.loading();
|
||
if (this.secondChartList[item].type === 'net') {
|
||
this.getNetDetailsData(this.currTimeList, this.secondChartList[item].title, item);
|
||
} else if (this.secondChartList[item].type === 'light') {
|
||
this.getModuleDetailsData(this.currTimeList, this.secondChartList[item].title, item);
|
||
} else if (this.secondChartList[item].type === 'mpu') {
|
||
this.getMpuDetailsData(this.currTimeList, this.secondChartList[item].title, item);
|
||
} else if (this.secondChartList[item].type === 'pw') {
|
||
this.getPwrDetailsData(this.currTimeList, this.secondChartList[item].title, item);
|
||
} else if (this.secondChartList[item].type === 'fan') {
|
||
this.getFanDetailsData(this.currTimeList, this.secondChartList[item].title, item);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
chartFnEvent(valData, fnName, tabName, key) {
|
||
this.firstChartTrans = valData;
|
||
// 检查函数是否存在，避免报错
|
||
if (typeof this[fnName] === 'function') {
|
||
this.defaultTimes = valData.timeArr;
|
||
// 调用实际函数，并传递参数（如选中的值、当前项）
|
||
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName, key);
|
||
} else {
|
||
console.warn(`函数 ${fnName} 未定义`);
|
||
}
|
||
},
|
||
goBack() {
|
||
this.$router.push("/resource/switchRegister");
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|