TRKJ/profitManage1.1
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

服务器注册的图形分析

Browse Source
This commit is contained in:
康冉冉
2025-10-27 18:28:07 +08:00
parent 5df64af456
commit d7849c5e6d
7 changed files with 663 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/api/disRevenue/resource.js
View File

@@ -721,3 +721,107 @@ export function spaceRate(data) {
data: data
})
}
// 图形监控-自动发现项-网络接口的-基础信息
export function netDetails(data) {
return request({
url: '/rocketmq/traffic/netInterfaceDetailsMsg',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-网络接口的-流量
export function trafficEcharts(data) {
return request({
url: '/rocketmq/traffic/netInterfaceTrafficEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-网络接口的-丢数
export function droppedEcharts(data) {
return request({
url: '/rocketmq/traffic/netInterfaceDroppedEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-硬盘设备的-所有名称
export function diskAllNames(data) {
return request({
url: '/rocketmq/diskInfo/getAllDistName',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-硬盘设备的-基础信息
export function diskDetails(data) {
return request({
url: '/rocketmq/diskInfo/getDistDetailsMsg',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-硬盘设备的-读写速率
export function speedEcharts(data) {
return request({
url: '/rocketmq/diskInfo/rwSpeedEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-硬盘设备的-读写次数
export function timesEcharts(data) {
return request({
url: '/rocketmq/diskInfo/rwTimesEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-硬盘设备的-读写字节
export function bytesEcharts(data) {
return request({
url: '/rocketmq/diskInfo/rwBytesEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-容器的-所有名称
export function dockerAllNames(data) {
return request({
url: '/rocketmq/dockerInfo/getAllDockerId',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-容器的-基础信息
export function dockerDetails(data) {
return request({
url: '/rocketmq/dockerInfo/getDockerDetailsMsg',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-容器的-CPU利用率
export function cpuUtilEcharts(data) {
return request({
url: '/rocketmq/dockerInfo/cpuUtilEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-容器的-内存利用率
export function dockerMemEcharts(data) {
return request({
url: '/rocketmq/dockerInfo/memUtilEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-容器的-网络速率
export function dockerSpeedEcharts(data) {
return request({
url: '/rocketmq/dockerInfo/netSpeedEcharts',
method: 'post',
data: data
})
}

7
src/plugins/modal.js
View File

@@ -79,6 +79,11 @@ export default {
},
// 关闭遮罩层
closeLoading() {
loadingInstance.close()
// 关键：先判断实例是否存在，再调用 close 解决：因接口调用速度不同，导致加载状态关闭后，其他地方又重复调用关闭，结果报错问题
if (loadingInstance && typeof loadingInstance.close === 'function') {
loadingInstance.close();
loadingInstance = null; // 关闭后重置，避免重复关闭
}
// loadingInstance.close() // 原代码
}
}

448
src/views/resource/serverRegister/monitorChart.vue
View File

@@ -21,7 +21,10 @@
<script>
import FirstMonitor from "./firstMonitor";
import SecondAutoFind from "./secondAutoFind";
import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent, memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate} from "@/api/disRevenue/resource"
import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent,
memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate, postInterFaceName,
netDetails, trafficEcharts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts} from "@/api/disRevenue/resource"
export default {
name: "serverMonitorChart",
components: {FirstMonitor, SecondAutoFind},
@@ -30,7 +33,7 @@
loading: false,
currTimeList: {},
defaultTimes: [],
activeName: 'second',
activeName: 'first',
paramsData: {},
// 第一栏
firstChartTrans: {},
@@ -205,14 +208,50 @@
linuxSystem: {
mount: {
title: '挂载文件系统',
formList: {name: '文件系统类型'},
formModel: {name: 'vfs'},
type: 'mount',
formList: {vfsType: '文件系统类型'},
formModel: {},
echartFors: [
{title: '的空间(KB)', oneName: '可用空间', twoName: '总空间'},
{title: '的空间利用率(%)', oneName: '空间利用率'},
],
echartList: []
},
net: {
title: '网络接口interface eth0',
type: 'net',
formList: {type: '接口类型', status: '运行状态', speed: '速度'},
formModel: {},
echartFors: [
{title: '的流量(Kbps)', oneName: '入站流量', twoName: '出站流量'},
{title: '的丢包数(个)', oneName: '入站丢包', twoName: '出站丢包'},
],
echartList: []
},
disk: {
title: '硬盘',
type: 'disk',
formList: {total: '磁盘大小(GB)'},
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: []
},
},
}
},
@@ -414,7 +453,7 @@
});
},
// two
// 接口名称
// //第一模块 挂载 === 接口名称
fnInterFaceNameList(val) {
this.activeNames = [];
mountNameList({clientId: this.paramsData.clientId}).then(res => {
@@ -426,22 +465,43 @@
tabNameList[item.mount] = oneData;
});
this.secondChartList = {...tabNameList};
console.log('secondChartList===',this.secondChartList);
this.activeNames = [Object.keys(tabNameList)[0]];
this.getPointDetailsData(Object.keys(tabNameList)[0]);
this.getSpaceEcharts(this.currTimeList ,Object.keys(tabNameList)[0]);
this.getSpaceRate(this.currTimeList ,Object.keys(tabNameList)[0]);
this.getPointDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
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(titleName) {
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)
});
},
// 空间
@@ -449,13 +509,12 @@
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']));
console.log('content==',content);
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.lineXData = res.data && res.data.xData || [];
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'] || []
@@ -467,6 +526,9 @@
}
mountCollect['echartList'][0] = mountEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
// 空间利用率
@@ -474,13 +536,12 @@
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']));
console.log('content==vvv===',content);
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.lineXData = res.data && res.data.xData || [];
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'] || []
@@ -488,59 +549,342 @@
}
mountCollect['echartList'][1] = mountEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
// 错误丢包
getNetErrDisc(times, val) {
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetErrDisc';
switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${val.interfaceName}的错误包数量`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
// 第二模块 网络接口 ---所有网络接口名称
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;
tabNameList[item.interfaceName] = oneData;
this.$set(this.secondChartList, item.interfaceName, oneData);
});
}
});
},
// 实时流量
getNetSpeed(times, val) {
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetSpeed';
switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[3].oneName;
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
}
// 基本信息
getNetDetailsData(times, titleName) {
this.eventDataMap[titleName] = true;
netDetails({clientId: this.paramsData.clientId, name: titleName}).then(res => {
this.secondChartList[titleName].formModel = res && res.data || [];
this.getNetEcharts(times, titleName);
setTimeout(() => {
this.getNetDropped(times ,titleName);
},500);
}).catch(() => {
this.getNetEcharts(times, titleName);
setTimeout(() => {
this.getNetDropped(times ,titleName);
},500);
});
},
// 流量
getNetEcharts(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 = 'getNetEcharts';
trafficEcharts(Object.assign({}, {name : 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['inSpeedData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[0].twoName,
data: res.data && res.data.yData['outSpeedData'] || []
};
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
// 丢包数
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';
droppedEcharts(Object.assign({}, {name : 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['inDroppedData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[1].twoName,
data: res.data && res.data.yData['outDroppedData'] || []
};
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
// 第三模块 硬盘设备 ---所有名称 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);
});
}
});
},
// 基本信息
getDiskDetailsData(times, titleName) {
this.eventDataMap[titleName] = true;
diskDetails({clientId: this.paramsData.clientId, name: titleName}).then(res => {
this.secondChartList[titleName].formModel = res && res.data || [];
this.getSpeedEcharts(times, titleName);
setTimeout(() => {
this.getDiskTimes(times ,titleName);
setTimeout(() => {
this.getDiskBytes(times ,titleName);
},500);
},500);
}).catch(() => {
this.getSpeedEcharts(times, titleName);
setTimeout(() => {
this.getDiskTimes(times ,titleName);
setTimeout(() => {
this.getDiskBytes(times ,titleName);
},500);
},500);
});
},
//
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';
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.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();
}).catch(() => {
this.$modal.closeLoading();
});
},
//
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';
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.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);
}
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
//
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';
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.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();
}).catch(() => {
this.$modal.closeLoading();
});
},
// 第四模块 容器 ---所有名称 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);
});
}
});
},
// 基本信息
getDockerDetailsData(times, titleName) {
this.eventDataMap[titleName] = true;
dockerDetails({clientId: this.paramsData.clientId, id: titleName}).then(res => {
this.secondChartList[titleName].formModel = res && res.data || [];
this.getCpuEcharts(times, titleName);
setTimeout(() => {
this.getDockerMem(times ,titleName);
setTimeout(() => {
this.getDockerSpeed(times ,titleName);
},500);
},500);
}).catch(() => {
this.getCpuEcharts(times, titleName);
setTimeout(() => {
this.getDockerMem(times ,titleName);
setTimeout(() => {
this.getDockerSpeed(times ,titleName);
},500);
},500);
});
},
//
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';
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.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);
}
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
//
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';
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.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);
}
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
});
},
//
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';
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.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();
}).catch(() => {
this.$modal.closeLoading();
});
},
collapseChangeData(valList) {
valList && valList.forEach(item => {
if (!this.eventDataMap[item]) {
this.$modal.loading();
this.getNetDiscards(this.currTimeList, {interfaceName: item});
this.getNetTotal(this.currTimeList, {interfaceName: item});
this.getNetErrDisc(this.currTimeList, {interfaceName: item});
this.getNetSpeed(this.currTimeList, {interfaceName: item});
setTimeout(() => {
if (!this.activeNames.includes(item)) this.activeNames.push(item);
this.$modal.closeLoading();
},2500);
if (this.secondChartList[item].type === 'mount') {
this.getSpaceEcharts(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) {
console.log('ccccc===',fnName,'vvv==', typeof this[fnName] === 'function');
this.firstChartTrans = valData;
// 检查函数是否存在，避免报错
if (typeof this[fnName] === 'function') {

10
src/views/resource/serverRegister/secondAutoFind.vue
View File

@@ -35,18 +35,10 @@
watch: {
activeNames: {
handler(val) {
// console.log('val==',val);
this.activeShowList = val;
},
deep: true,
// immediate: true
},
secondChartList: {
handler(val) {
// console.log('val=000000=',val);
},
deep: true,
// immediate: true
immediate: true
},
},
data() {

30
src/views/resource/serverScriptStrat/serverScriptStrat.vue
View File

@@ -35,17 +35,17 @@
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempFirst="{ row, column }">
<div @click="fnDetails(1,row)">
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.timestamp}}</a>
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.offlineNum}}</a>
</div>
</template>
<template #tempSecond="{ row, column }">
<div @click="fnDetails(2,row)">
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.timestamp}}</a>
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.sucessNum}}</a>
</div>
</template>
<template #tempThird="{ row, column }">
<div @click="fnDetails(3,row)">
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.timestamp}}</a>
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.failNum}}</a>
</div>
</template>
<template #tmpExecution="{ row, column }">
@@ -57,8 +57,8 @@
</TableList>
<!-- 弹窗 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-checkbox-group v-model="checkboxGroup" size="min" disabled>
<el-checkbox-button style="margin-right: 10px;" v-for="city in cities" :label="city.label" :key="city.id">{{city.label}}</el-checkbox-button>
<el-checkbox-group v-model="checkboxGroup" size="min" :disabled="dialogData['timeline'] ? false : true">
<el-checkbox-button style="margin-right: 10px;" v-for="city in clientList" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div v-if="dialogData['timeline']" class="block mt10">
<el-timeline :reverse="true">
@@ -73,7 +73,7 @@
<script setup>
import TableList from "@/components/table/index.vue"
import {listPolicy, delPolicy} from "@/api/disRevenue/resource"
import {listPolicy, delPolicy, getScriptResultBySn} from "@/api/disRevenue/resource"
export default {
name: 'serverMonitorStrat',
components: {TableList},
@@ -100,9 +100,9 @@
scriptPath: { label: `脚本地址`,minWidth: '200'},
scriptParams: { label: `脚本参数`,minWidth: '200'},
executionMethod: { label: `执行方式`,minWidth: '200', slotName: 'tmpExecution'},
noNum: { label: `不在线数量`,minWidth: '100', slotName: 'tempFirst', visible: true},
successNum: { label: `执行成功数量`,minWidth: '120', slotName: 'tempSecond', visible: true},
dangerNum: { label: `执行失败数量`,minWidth: '120', slotName: 'tempThird', visible: true},
offlineNum: { label: `不在线数量`,minWidth: '100', slotName: 'tempFirst', visible: true},
sucessNum: { label: `执行成功数量`,minWidth: '120', slotName: 'tempSecond', visible: true},
failNum: { label: `执行失败数量`,minWidth: '120', slotName: 'tempThird', visible: true},
policyStatus: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
createBy:{ label: `创建人`,minWidth: '100'},
@@ -134,7 +134,7 @@
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-10 12:12:12'}
]
},
cities: [{id: 1, label: 'aa'}, {id: 2, label: 'bb'},{id: 3, label: 'cc'}],
clientList: [],
}
},
created() {
@@ -176,16 +176,26 @@
},
fnDetails(num, row){
this.dialogData['timelineList'] = [];
getScriptResultBySn({clientId: row.clientId, scriptId: row.id}).then(val => {
this.dialogData['timelineList'] = val && val.data && val.data.scriptResult || [];
}).catch(() => {
this.$modal.msgError("操作失败")
});
this.clientList = [];
this.open = true;
if (num === 1) {
this.title = '不在线设备';
this.dialogData['timeline'] = false;
this.clientList = row.offlineClientIds;
} else if (num === 2) {
this.title = '执行成功设备';
this.dialogData['timeline'] = true;
this.clientList = row.sucessClientIds;
} else {
this.title = '执行失败设备';
this.dialogData['timeline'] = true;
this.clientList = row.failClientIds;
}
},

230
src/views/resource/switchRegister/monitorChart.vue
View File

@@ -8,7 +8,7 @@
</el-tab-pane>
<el-tab-pane label="自动发现项" name="second">
<template v-if="activeName === 'second'">
<SecondAutoFind v-if="loading" :defaultTimes="defaultTimes" :matchNum="matchNum" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
<SecondAutoFind v-if="loading" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
</template>
</el-tab-pane>
</el-tabs>
@@ -30,7 +30,7 @@
loading: false,
currTimeList: {},
defaultTimes: [],
activeName: 'first',
activeName: 'second',
paramsData: {},
// 第一栏
firstChartTrans: {},
@@ -93,7 +93,6 @@
],
// 第二栏
activeNames: [],
matchNum: {num: ''},
secondChartList: {},
eventDataMap: {},
echartData: {
@@ -118,18 +117,20 @@
linuxSystem: {
net: {
title: '网络端口GE1/0/1',
type: 'net',
formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
echartFors: [
{title: 'GE1/0/1的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
{title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
{title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
{title: 'GE1/0/1的网络速率', oneName: '端口实时接收速率', twoName: '端口实时发送速率'},
{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: [
@@ -140,6 +141,7 @@
},
mpu: {
title: 'MPU1',
type: 'mpu',
formList: {name: 'MPU名称', system: 'MPU的操作系统'},
formModel: {name: 'MPU1', system: 'xxxx'},
echartFors: [
@@ -151,6 +153,7 @@
},
pw: {
title: '电源PW1',
type: 'pw',
formList: {name: '电源名称', status: '电源状态'},
formModel: {name: 'PW1', status: '正在供电'},
echartFors: [
@@ -161,6 +164,7 @@
},
fan: {
title: '风扇FAN1',
type: 'fan',
formList: {name: '风扇名称', status: '风扇状态'},
formModel: {name: 'FAN1', status: 'xxx'},
echartFors: [],
@@ -255,159 +259,185 @@
},
// two
// 接口名称
async fnInterFaceNameList(val) {
fnInterFaceNameList(val) {
this.activeNames = [];
try {
const res = await postInterFaceName({clientId: this.paramsData.clientId});
// .then(res => {
res && res.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
oneData.title = item && item.interfaceName;
this.secondChartList[item.interfaceName] = oneData;
if (index === 0) {
this.$modal.loading();
await Promise.all([
this.getNetDiscards(this.currTimeList, item),
this.getNetTotal(this.currTimeList, item),
this.getNetErrDisc(this.currTimeList, item),
this.getNetSpeed(this.currTimeList, item)
]);
setTimeout(() => {
if (!this.activeNames.includes(item.interfaceName)) this.activeNames.push(item.interfaceName);
this.$modal.closeLoading();
},2000);
}
});
// });
} catch (error) {
this.$modal.closeLoading();
console.error('获取接口名称列表失败：', error);
// 可添加错误提示，如this.$message.error('数据加载失败')
}
postInterFaceName({clientId: this.paramsData.clientId}).then(res => {
let tabNameList = {};
res && res.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
oneData.title = item && item.interfaceName;
tabNameList[item.interfaceName] = oneData;
});
this.secondChartList = {...tabNameList};
this.activeNames = [Object.keys(tabNameList)[0]];
this.getNetDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
// this.fnSwitchNetNames(); // 第二模块名称
// setTimeout(() => {
// this.fnDiskNames(); // 第三模块名称
// setTimeout(() => {
// this.fnDockerNames(); // 第四模块名称
// },500);
// },500);
}).catch((error) => {
});
},
// 基本信息
getNetData() {
switchNetDetails({clientId: this.paramsData.clientId}).then(res => {
if (res && res.data) {
this.formData['formValue'] = res.data;
getNetDetailsData(times, titleName) {
this.$modal.loading();
this.eventDataMap[titleName] = true;
switchNetDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
this.secondChartList[titleName].formModel = res && res.data || [];
if (await this.getNetDiscards(times ,titleName)) {
if (await this.getNetTotal(times, titleName)) {
if (await this.getNetErrDisc(times, titleName)) {
this.getNetSpeed(times, titleName);
}
}
}
}).catch(() => {
this.getSpaceEcharts(times ,titleName);
setTimeout(() => {
this.getNetTotal(times, titleName);
setTimeout(() => {
this.getNetErrDisc(times, titleName);
setTimeout(() => {
this.getNetSpeed(times, titleName);
},500);
},500);
},500);
});
},
// 丢包
getNetDiscards(times,val) {
const interfaceName = val.interfaceName;
getNetDiscards(times,titleName) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
if (netEcharts && netEcharts.dateDataTrans) {
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
}
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetDiscards';
switchNetDiscards(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
this.$set(this.secondChartList[interfaceName].echartList, 0, []);
return switchNetDiscards(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
this.eventDataMap['interfaceName'] = false;
netEcharts.title = `${interfaceName}的丢包数`;
console.log('');
netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || [];
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: this.secondChartList[interfaceName].echartFors[0].oneName,
data: res.data.yData?.netInDiscardsData || []
name: content.echartFors[0].oneName,
data: res.data && res.data.yData['netInDiscardsData'] || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: this.secondChartList[interfaceName].echartFors[0].twoName,
data: res.data.yData?.netOutDiscardsData || []
name: content.echartFors[0].twoName,
data: res.data && res.data.yData['netOutDiscardsData'] || []
};
this.$set(this.secondChartList[interfaceName].echartList, 0, netEcharts);
this.$set(this.eventDataMap, interfaceName, true);
if (this.firstChartTrans?.timeList) {
this.matchNum['interfaceName'] = val.interfaceName;
this.$set(this.matchNum, 'num', Math.floor(Math.random() * 9000));
}
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
return true;
}
}).catch(() => {
return true;
});
},
// 总数
getNetTotal(times,val) {
const interfaceName = val.interfaceName;
// let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName]));
getNetTotal(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 = 'getNetTotal';
switchNeTotal(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
return switchNeTotal(Object.assign({}, {name : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${interfaceName}的Bites总数`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
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: this.secondChartList[interfaceName].echartFors[1].oneName,
data: res.data.yData?.netInTotalData || []
name: content.echartFors[1].oneName,
data: res.data && res.data.yData['netInTotalData'] || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: this.secondChartList[interfaceName].echartFors[1].twoName,
data: res.data.yData?.netOutTotalData || []
name: content.echartFors[1].twoName,
data: res.data && res.data.yData['netOutTotalData'] || []
};
this.$set(this.secondChartList[interfaceName].echartList, 1, netEcharts);
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
return true;
}
}).catch(() => {
return true;
});
},
// 错误丢包
getNetErrDisc(times, val) {
getNetErrDisc(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 = 'getNetErrDisc';
switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
return switchNetErrDiscard(Object.assign({}, {name : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${val.interfaceName}的错误包数量`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
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, titleName, mountCollect);
return true;
}
}).catch(() => {
return true;
});
},
// 实时流量
getNetSpeed(times, val) {
getNetSpeed(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 = 'getNetSpeed';
switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
switchNetSpeed(Object.assign({}, {name : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[3].oneName;
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
}
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, titleName, mountCollect);
this.$modal.closeLoading();
}
}).catch(() => {
this.$modal.closeLoading();
});
},
collapseChangeData(valList) {
valList && valList.forEach(item => {
if (!this.eventDataMap[item]) {
this.$modal.loading();
this.getNetDiscards(this.currTimeList, {interfaceName: item});
this.getNetTotal(this.currTimeList, {interfaceName: item});
this.getNetErrDisc(this.currTimeList, {interfaceName: item});
this.getNetSpeed(this.currTimeList, {interfaceName: item});
setTimeout(() => {
if (!this.activeNames.includes(item)) this.activeNames.push(item);
this.$modal.closeLoading();
},2500);
if (this.secondChartList[item].type === 'net') {
this.getNetDetailsData(this.currTimeList, item);
}
}
});
},
chartFnEvent(valData, fnName, tabName) {
console.log('ccccc===',fnName,'vvv==', typeof this[fnName] === 'function');
this.firstChartTrans = valData;
// 检查函数是否存在，避免报错
if (typeof this[fnName] === 'function') {
this.defaultTimes = valData.timeArr;
// 调用实际函数，并传递参数（如选中的值、当前项）
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, {interfaceName: tabName});
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName);
} else {
console.warn(`函数 ${fnName} 未定义`);
}

42
src/views/resource/switchRegister/secondAutoFind.vue
View File

@@ -1,15 +1,15 @@
<template>
<div style="padding: 8px 20px 20px;">
<el-collapse v-model="activeShowList" @change="collapseChange">
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val.title}】`" :name="val.title">
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val && val.title || ''}】`" :name="val && val.title || ''">
<div class="mt10 w100">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item,key,index) of val.formList" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key] || '-'}}</span>
<div v-for="(item,key,index) of val && val.formList || []" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
</div>
</div>
<div v-for="item of val.echartList" :key="`div-${val.title}-${item.title}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :key="`chart-${val.title}-${item.title}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
<div v-for="item of val && val.echartList || []" :key="`div-${val && val.title || ''}-${item && item.title || ''}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
</div>
</div>
</el-collapse-item>
@@ -31,45 +31,15 @@
type: Array,
default: () => []
},
defaultTimes: {
type: Array,
default: () => []
},
matchNum: {
type: Object,
default: () => {}
}
},
watch: {
activeNames: {
handler(val) {
console.log('val==',val);
this.activeShowList = val;
},
deep: true,
// immediate: true
},
secondChartList: {
handler(val) {
console.log('val=000000=',val);
},
deep: true,
// immediate: true
},
matchNum: {
handler(val) {
// if (val && val.interfaceName) {
// let newData = JSON.parse(JSON.stringify(this.secondChartList));
// this.secondChartList[val.interfaceName].echartList = [];
// setTimeout(() => {
// // this.secondChartList[val.interfaceName].echartList = newData[val.interfaceName].echartList;
// },1000);
// console.log('val=matchNum=',val,'this.secondChartList=====',this.secondChartList);
// }
},
deep: true,
immediate: true
}
},
},
data() {
return {