服务器注册的图形分析

src/api/disRevenue/resource.js

@@ -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
+  })
+}

src/plugins/modal.js

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

src/views/resource/serverRegister/monitorChart.vue

@@ -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: '文件系统类型'},
+            type: 'mount',
-            formModel: {name: 'vfs'},
+            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.getPointDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
-            this.getSpaceEcharts(this.currTimeList ,Object.keys(tabNameList)[0]);
+            this.fnSwitchNetNames(); // 第二模块名称
-            this.getSpaceRate(this.currTimeList ,Object.keys(tabNameList)[0]);
+            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) {
+      fnSwitchNetNames (){
-        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
+        postInterFaceName({clientId: this.paramsData.clientId,resourceType: 1}).then(res => {
-        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
+          if (res && res.length > 0) {
-        netEcharts.fnEvent = 'getNetErrDisc';
+            let tabNameList = {};
-        switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
+            res && res.forEach(async(item,index) => {
-          if (res && res.data) {
+              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
-            netEcharts.title = `${val.interfaceName}的错误包数量`;
+              oneData.title = item && item.interfaceName;
-            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+              tabNameList[item.interfaceName] = oneData;
-            netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
+              this.$set(this.secondChartList, item.interfaceName, oneData);
-            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);
           }
         });
       },
-      // 实时流量
+      // 基本信息
-      getNetSpeed(times, val) {
+      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 = 'getNetSpeed';
+        netEcharts.fnEvent = 'getNetEcharts';
-        switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
+        trafficEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
           if (res && res.data) {
-            netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
+            netEcharts.title = titleName + content.echartFors[0].title;
-            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            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[val.interfaceName].echartFors[3].oneName;
+            netEcharts.dataVal.dataList[0] = {
-            netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
+              name: content.echartFors[0].oneName,
-            netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
+              data: res.data && res.data.yData['inSpeedData'] || []
-            netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
+            };
-            this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
+            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});
+            if (this.secondChartList[item].type === 'mount') {
-            this.getNetTotal(this.currTimeList, {interfaceName: item});
+              this.getSpaceEcharts(this.currTimeList, item);
-            this.getNetErrDisc(this.currTimeList, {interfaceName: item});
+            } else if (this.secondChartList[item].type === 'net') {
-            this.getNetSpeed(this.currTimeList, {interfaceName: item});
+              this.getNetDetailsData(this.currTimeList, item);
-            setTimeout(() => {
+            } else if (this.secondChartList[item].type === 'disk') {
-              if (!this.activeNames.includes(item)) this.activeNames.push(item);
+              this.getDiskDetailsData(this.currTimeList, item);
-              this.$modal.closeLoading();
+            } else if (this.secondChartList[item].type === 'dock') {
-            },2500);
+              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') {

src/views/resource/serverRegister/secondAutoFind.vue

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

src/views/resource/serverScriptStrat/serverScriptStrat.vue

@@ -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-group v-model="checkboxGroup" size="min" :disabled="dialogData['timeline'] ? false : true">
-        <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-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},
+          offlineNum: { label: `不在线数量`,minWidth: '100', slotName: 'tempFirst', visible: true},
-          successNum: { label: `执行成功数量`,minWidth: '120', slotName: 'tempSecond', visible: true},
+          sucessNum: { label: `执行成功数量`,minWidth: '120', slotName: 'tempSecond', visible: true},
-          dangerNum: { label: `执行失败数量`,minWidth: '120', slotName: 'tempThird', 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;
         }
       },
 

src/views/resource/switchRegister/monitorChart.vue

@@ -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: '的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
-              {title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
+              {title: '的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
-              {title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
+              {title: '的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
-              {title: 'GE1/0/1的网络速率', 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 {
+        postInterFaceName({clientId: this.paramsData.clientId}).then(res => {
-          const res = await postInterFaceName({clientId: this.paramsData.clientId});
+          let tabNameList = {};
-            // .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;
+            tabNameList[item.interfaceName] = oneData;
-              if (index === 0) {
+          });
-                this.$modal.loading();
+          this.secondChartList = {...tabNameList};
-                await Promise.all([
+          this.activeNames = [Object.keys(tabNameList)[0]];
-                  this.getNetDiscards(this.currTimeList, item),
+          this.getNetDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
-                  this.getNetTotal(this.currTimeList, item),
+          // this.fnSwitchNetNames(); // 第二模块名称
-                  this.getNetErrDisc(this.currTimeList, item),
+          // setTimeout(() => {
-                  this.getNetSpeed(this.currTimeList, item)
+          //   this.fnDiskNames(); // 第三模块名称
-                ]);
+          //   setTimeout(() => {
-                setTimeout(() => {
+          //     this.fnDockerNames(); // 第四模块名称
-                  if (!this.activeNames.includes(item.interfaceName)) this.activeNames.push(item.interfaceName);
+          //   },500);
-                  this.$modal.closeLoading();
+          // },500);
-                },2000);
+        }).catch((error) => {
-              }
+
         });
-          // });
-        } catch (error) {
-          this.$modal.closeLoading();
-          console.error('获取接口名称列表失败：', error);
-          // 可添加错误提示，如this.$message.error('数据加载失败')
-        }
       },
       // 基本信息
-      getNetData() {
+      getNetDetailsData(times, titleName) {
-        switchNetDetails({clientId: this.paramsData.clientId}).then(res => {
+        this.$modal.loading();
-          if (res && res.data) {
+        this.eventDataMap[titleName] = true;
-            this.formData['formValue'] = res.data;
+        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) {
+      getNetDiscards(times,titleName) {
-        const interfaceName = val.interfaceName;
+        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
         let netEcharts = JSON.parse(JSON.stringify(this.echartData));
-        if (netEcharts && netEcharts.dateDataTrans) {
+        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 => {
+        return switchNetDiscards(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
-          this.$set(this.secondChartList[interfaceName].echartList, 0, []);
           if (res && res.data) {
-            this.eventDataMap['interfaceName'] = false;
+            netEcharts.title = titleName + content.echartFors[0].title;
-            netEcharts.title = `${interfaceName}的丢包数`;
+            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
-            console.log('');
-            netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || [];
             // 入
             netEcharts.dataVal.dataList[0] = {
-              name: this.secondChartList[interfaceName].echartFors[0].oneName,
+              name: content.echartFors[0].oneName,
-              data: res.data.yData?.netInDiscardsData || []
+              data: res.data && res.data.yData['netInDiscardsData'] || []
             };
             // 出
             netEcharts.dataVal.dataList[1] = {
-              name: this.secondChartList[interfaceName].echartFors[0].twoName,
+              name: content.echartFors[0].twoName,
-              data: res.data.yData?.netOutDiscardsData || []
+              data: res.data && res.data.yData['netOutDiscardsData'] || []
             };
-            this.$set(this.secondChartList[interfaceName].echartList, 0, netEcharts);
+            mountCollect['echartList'][0] = netEcharts;
-            this.$set(this.eventDataMap, interfaceName, true);
+            this.$set(this.secondChartList, titleName, mountCollect);
-            if (this.firstChartTrans?.timeList) {
+            return true;
-              this.matchNum['interfaceName'] = val.interfaceName;
-              this.$set(this.matchNum, 'num', Math.floor(Math.random() * 9000));
-            }
           }
+        }).catch(() => {
+          return true;
         });
       },
       // 总数
-      getNetTotal(times,val) {
+      getNetTotal(times,titleName) {
-        const interfaceName = val.interfaceName;
+        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
-        // let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName]));
         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.title = titleName + content.echartFors[1].title;
-            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            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,
+              name: content.echartFors[1].oneName,
-              data: res.data.yData?.netInTotalData || []
+              data: res.data && res.data.yData['netInTotalData'] || []
             };
             // 出
             netEcharts.dataVal.dataList[1] = {
-              name: this.secondChartList[interfaceName].echartFors[1].twoName,
+              name: content.echartFors[1].twoName,
-              data: res.data.yData?.netOutTotalData || []
+              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.title = titleName + content.echartFors[2].title;
-            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            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[val.interfaceName].echartFors[2].oneName;
+            netEcharts.dataVal.dataList[0] = {
-            netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
+              name: content.echartFors[2].oneName,
-            netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
+              data: res.data && res.data.yData['netInErrDiscardsData'] || []
-            netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
+            };
-            this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
+            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.title = titleName + content.echartFors[3].title;
-            netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
+            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[val.interfaceName].echartFors[3].oneName;
+            netEcharts.dataVal.dataList[0] = {
-            netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
+              name: content.echartFors[3].oneName,
-            netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
+              data: res.data && res.data.yData['netInSpeedData'] || []
-            netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
+            };
-            this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
+            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});
+            if (this.secondChartList[item].type === 'net') {
-            this.getNetTotal(this.currTimeList, {interfaceName: item});
+              this.getNetDetailsData(this.currTimeList, 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);
           }
         });
       },
       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} 未定义`);
         }

src/views/resource/switchRegister/secondAutoFind.vue

@@ -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">
+            <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.formModel[key] || '-'}}</span>
+              <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">
+          <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.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>
+            <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 {