<template>
  <div class="app-container" @scroll="handleScroll">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="自动发现项" name="second">
        <template v-if="activeName === 'second'">
          <SecondAutoFind ref="layoutChart" v-if="loading" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
        </template>
      </el-tab-pane>
      <el-tab-pane label="监控项" name="first">
        <template v-if="activeName === 'first'">
          <FirstMonitor v-if="loading" :formData="formData" :chartList="firstChartList" @chartFnEvent="chartFnEvent"></FirstMonitor>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div style="float: right;margin-top: 20px;">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
  import FirstMonitor from "./firstMonitor";
  import SecondAutoFind from "./secondAutoFind";
  import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent,
    memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate, postInterFaceName,
    netDetails, trafficEcharts, trafficIPv4Echarts, trafficIPv6Echarts, droppedEcharts, diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts,
    dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts} from "@/api/disRevenue/resource"
  export default {
    name: "serverMonitorChart",
    components: {FirstMonitor, SecondAutoFind},
    data() {
      return {
        loading: false,
        currTimeList: {},
        defaultTimes: [],
        firstTabTime: {},
        firstTabTimeArr: [],
        activeName: 'second',
        paramsData: {},
        // 第一栏
        firstChartTrans: {},
        formFirst: {
          memorySizeTotalCollect: '总内存(GB)', systemCpuNum: 'CPU数量', systemSwOsCollect: '操作系统', systemSwArchCollect: '操作系统架构', kernelMaxprocCollect: '最大进程数', systemDiskSizeTotalCollect: '硬盘-总可用空间(GB)',
          systemBoottimeCollect: '系统启动时间', systemUptimeCollect: '系统正确运行时间', systemLocaltimeCollect: '系统本地时间', systemUnameCollect: '系统描述'
        },
        formData: {},
        firstChartList: [],
        resultData: [
          {
            title: 'CPU负载(%)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: 'CPU使用率', data: []},
                {name: 'CPU的1分钟负载', data: []},
                {name: 'CPU的5分钟负载', data: []},
                {name: 'CPU的15分钟负载', data: []},
              ]
            }
          },{
            title: 'CPU时间(s)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '22%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: 'CPU正常运行时间', data: []},
                {name: 'CPU空闲时间', data: []},
                {name: 'CPU等待响应时间', data: []},
                {name: 'CPU系统时间', data: []},
                {name: 'CPU软件无响应时间', data: []},
                {name: 'CPU运行用户进程所花费的时间', data: []},
              ]
            }
          },{
            title: '正在运行的进程数(个)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '正在运行的进程数', data: []},
                // {name: '进程数', data: []}
              ]
            }
          },{
            title: '登录用户数(个)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '登录用户数', data: []}
              ]
            }
          },{
            title: '交换卷/文件的可用空间(字节)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '交换卷/文件的可用空间', data: []}
              ]
            }
          },{
            title: '内存利用率(%)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '内存利用率', data: []}
              ]
            }
          },{
            title: '可用交换空间百分比(%)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '可用交换空间百分比', data: []}
              ]
            }
          },{
            title: '可用内存(G)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '可用内存', data: []}
              ]
            }
          },{
            title: '可用内存百分比(%)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [
                {name: '可用内存百分比', data: []}
              ]
            }
          }
        ],
        //  第二栏
        activeNames: [],
        matchNum: {num: ''},
        secondChartList: {},
        tabsListData: {},
        eventDataMap: {},
        echartData: {
          title: 'GE1/0/1的丢包数',
          dateShowType: 'datetimerange',
          dateDataTrans: {transList: true, MarUltabsTop: '30px'},
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            yAxisName: ' ',
            gridTop: '40%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '入站丢包',
              data: [120, 132, 101, 134, 90, 230, 210],
            },{
              name: '出站丢包',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          }
        },
        linuxSystem: {
          mount: {
            title: '挂载文件系统',
            type: 'mount',
            formList: {vfsType: '文件系统类型'},
            formModel: {},
            echartFors: [
              {title: '的空间(G)', oneName: '可用空间', twoName: '总空间'},
              {title: '的空间利用率(%)', oneName: '空间利用率'},
            ],
            echartList: [null,null]
          },
          net: {
            title: '网络接口interface eth0',
            type: 'net',
            formList: {type: '接口类型', status: '运行状态', speed: '速度', mac: '网卡MAC信息'},
            formModel: {},
            echartFors: [
              {title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
              {title: '的IPv4流量', oneName: 'IPv4出站流量', twoName: 'IPv4入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
              {title: '的IPv6流量', oneName: 'IPv6出站流量', twoName: 'IPv6入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
              {title: '的丢包数(个)', oneName: '出站丢包', twoName: '入站丢包'},
            ],
            echartList: [null,null]
          },
          disk: {
            title: '硬盘',
            type: 'disk',
            formList: {total: '磁盘大小(G)', writeTimesStr: '写入次数', readTimesStr: '读取次数', writeBytesStr: '写入字节', readBytesStr: '读取字节'},
            formModel: {},
            echartFors: [
              {title: '的读写速率(KB/s)', oneName: '磁盘写入速率', twoName: '磁盘读取速率'},
              // {title: '的读写次数(次)', oneName: '磁盘写入次数', twoName: '磁盘读取次数'},
              // {title: '的读写字节(Bytes/s)', oneName: '磁盘写入字节', twoName: '磁盘读取字节'},
            ],
            echartList: [null]
          },
          dock: {
            title: '容器',
            type: 'dock',
            formList: {id: '容器ID', name: '容器名称'},
            formModel: {},
            echartFors: [
              {title: '的CPU利用率(%)', oneName: 'CPU利用率'},
              {title: '的内存利用率(%)', oneName: '内存利用率'},
              {title: '的网络速率(Kbps)', oneName: '网络接收速率', twoName: '网络发送速率'},
            ],
            echartList: [null, null, null]
          },
        },
      }
    },
    created() {
      const now = new Date();
      // 获取当前时间
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      // 正确计算前一天（处理跨月情况）
      const prevDate = new Date(now);
      prevDate.setDate(now.getDate() - 1);
      const prevYear = prevDate.getFullYear();
      const prevMonth = String(prevDate.getMonth() + 1).padStart(2, '0');
      const prevDay = String(prevDate.getDate()).padStart(2, '0');
      // 构建时间字符串
      const timeString = `${hours}:${minutes}:${seconds}`;
      const startData = `${prevYear}-${prevMonth}-${prevDay} ${timeString}`;
      const endData = `${year}-${month}-${day} ${timeString}`;

      this.firstTabTime = {startTime: startData, endTime: endData};
      this.firstTabTimeArr = [startData, endData];
      this.currTimeList = {startTime: startData, endTime: endData};
      this.defaultTimes = [startData, endData];
      this.paramsData = this.$route && this.$route.query;
      this.handleClick();
    },
    methods: {
      handleScroll(event) {
        // console.log('滚动位置', event.target.scrollTop);
        if (!this.scrollTimeout) {
          this.scrollTimeout = setTimeout(() => {
            this.$refs.layoutChart.checkElementsInViewport();
            this.scrollTimeout = null;
          }, 200); // 200ms 节流间隔
        }
      },
      async handleClick(tab, event) {
        this.loading = false;
        if (this.activeName === 'first') {
          await Promise.all([
            this.getMonitorData(),
            this.getCpuLoadData(this.firstTabTime),
            this.getCpuTimeData(this.firstTabTime),
            this.getProcNumData(this.firstTabTime),
            this.getUserNumData(this.firstTabTime),
            this.getSwapSizeFreeData(this.firstTabTime),
            this.getMemoryUtilizationData(this.firstTabTime),
            this.getSwapSizePercentData(this.firstTabTime),
            this.getMemorySizeAvailableData(this.firstTabTime),
            this.getMemorySizePercentData(this.firstTabTime),
          ]);
          this.loading = true;
        } else {
          this.secondChartList = {};
          this.tabsListData = {};
          this.eventDataMap = {};
          this.activeNames = [];
          await this.fnInterFaceNameList();
          this.loading = true;
        }
      },
      getMonitorData() {
        this.formData = {formFirst: this.formFirst};
        serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data) {
            this.$set(this.formData, 'formValue', res.data);
          }
        });
      },
      getCpuLoadData(val) {
        let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
        cpuLoadData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          cpuData['fnEvent'] = 'getCpuLoadData';
          cpuData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            cpuData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            cpuData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['utiData'] && res.data['yData']['utiData'].length > 0 ? res.data['yData']['utiData'] : [];
            cpuData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['load1Data'] && res.data['yData']['load1Data'].length > 0 ? res.data['yData']['load1Data'] : [];
            cpuData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['load5Data'] && res.data['yData']['load5Data'].length > 0 ? res.data['yData']['load5Data'] : [];
            cpuData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['load15Data'] && res.data['yData']['load15Data'].length > 0 ? res.data['yData']['load15Data'] : [];
          }
          // this.firstChartList[0] = cpuData;
          this.$set(this.firstChartList, 0, cpuData);
        }).catch(() => {
          this.firstChartList[0] = cpuData;
        });
      },
      getCpuTimeData(val) {
        let memData = JSON.parse(JSON.stringify(this.resultData[1]));
        cpuTimeData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          memData['fnEvent'] = 'getCpuTimeData';
          memData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            memData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            memData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['normalData'] && res.data['yData']['normalData'].length > 0 ? res.data['yData']['normalData'] : [];
            memData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['idleData'] && res.data['yData']['idleData'].length > 0 ? res.data['yData']['idleData'] : [];
            memData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['iowaitData'] && res.data['yData']['iowaitData'].length > 0 ? res.data['yData']['iowaitData'] : [];
            memData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['norespData'] && res.data['yData']['norespData'].length > 0 ? res.data['yData']['norespData'] : [];
            memData.dataVal.dataList[4].data = res && res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
            memData.dataVal.dataList[5].data = res && res.data && res.data['yData'] && res.data['yData']['userpData'] && res.data['yData']['userpData'].length > 0 ? res.data['yData']['userpData'] : [];
          }
          // this.firstChartList[1] = memData;
          this.$set(this.firstChartList, 1, memData);
        }).catch(() => {
          this.firstChartList[1] = memData;
        });
      },
      getProcNumData(val) {
        let procData = JSON.parse(JSON.stringify(this.resultData[2]));
        procNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          procData['fnEvent'] = 'getProcNumData';
          procData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            procData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            procData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['procNumRunData'] && res.data['yData']['procNumRunData'].length > 0 ? res.data['yData']['procNumRunData'] : [];
            // procData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['procNumData'] && res.data['yData']['procNumData'].length > 0 ? res.data['yData']['procNumData'] : [];
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 2, procData);
        }).catch(() => {
          this.firstChartList[2] = procData;
        });
      },
      getUserNumData(val) {
        let userNumData = JSON.parse(JSON.stringify(this.resultData[3]));
        serverUserNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          userNumData['fnEvent'] = 'getUserNumData';
          userNumData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            userNumData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            userNumData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['usersNumData'] && res.data['yData']['usersNumData'].length > 0 ? res.data['yData']['usersNumData'] : [];
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 3, userNumData);
        }).catch(() => {
          this.firstChartList[3] = userNumData;
        });
      },
      getSwapSizeFreeData(val) {
        let swapSizeFreeData = JSON.parse(JSON.stringify(this.resultData[4]));
        swapSizeFree(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          swapSizeFreeData['fnEvent'] = 'getSwapSizeFreeData';
          swapSizeFreeData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            swapSizeFreeData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            swapSizeFreeData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['swapSizeFreeData'] && res.data['yData']['swapSizeFreeData'].length > 0 ? res.data['yData']['swapSizeFreeData'] : [];
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 4, swapSizeFreeData);
        }).catch(() => {
          this.firstChartList[4] = swapSizeFreeData;
        });
      },
      getMemoryUtilizationData(val) {
        let memoryUtilizaData = JSON.parse(JSON.stringify(this.resultData[5]));
        memoryUtilization(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          memoryUtilizaData['fnEvent'] = 'getMemoryUtilizationData';
          memoryUtilizaData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            memoryUtilizaData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            memoryUtilizaData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memoryUtilizationData'] && res.data['yData']['memoryUtilizationData'].length > 0 ? res.data['yData']['memoryUtilizationData'] : [];
            if (memoryUtilizaData.dataVal.dataList[0].data.length > 0 && memoryUtilizaData.dataVal.dataList[0].data.some(num => num < 0)) {
              memoryUtilizaData.dataVal.gridLeft = '-7%';
            }
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 5, memoryUtilizaData);
        }).catch(() => {
          this.firstChartList[5] = memoryUtilizaData;
        });
      },
      getSwapSizePercentData(val) {
        let swapSizePercentData = JSON.parse(JSON.stringify(this.resultData[6]));
        swapSizePercent(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          swapSizePercentData['fnEvent'] = 'getSwapSizePercentData';
          swapSizePercentData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            swapSizePercentData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            swapSizePercentData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['swapSizePercentData'] && res.data['yData']['swapSizePercentData'].length > 0 ? res.data['yData']['swapSizePercentData'] : [];
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 6, swapSizePercentData);
        }).catch(() => {
          this.firstChartList[6] = swapSizePercentData;
        });
      },
      getMemorySizeAvailableData(val) {
        let memorySizeAvailData = JSON.parse(JSON.stringify(this.resultData[7]));
        memorySizeAvailable(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          memorySizeAvailData['fnEvent'] = 'getMemorySizeAvailableData';
          memorySizeAvailData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            memorySizeAvailData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            memorySizeAvailData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memorySizeAvailableData'] && res.data['yData']['memorySizeAvailableData'].length > 0 ? res.data['yData']['memorySizeAvailableData'] : [];
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 7, memorySizeAvailData);
        }).catch(() => {
          this.firstChartList[7] = memorySizeAvailData;
        });
      },
      getMemorySizePercentData(val) {
        let memorySizePercentData = JSON.parse(JSON.stringify(this.resultData[8]));
        memorySizePercent(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          memorySizePercentData['fnEvent'] = 'getMemorySizePercentData';
          memorySizePercentData.dateDataTrans['dateRange'] = this.firstTabTimeArr;
          if (res && res.data) {
            memorySizePercentData.dataVal.lineXData = res && res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            memorySizePercentData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memorySizePercentData'] && res.data['yData']['memorySizePercentData'].length > 0 ? res.data['yData']['memorySizePercentData'] : []
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 8, memorySizePercentData);
        }).catch(() => {
          this.firstChartList[8] = memorySizePercentData;
        });
      },
      // two
      //  //第一模块 挂载 === 接口名称
      fnInterFaceNameList(val) {
        this.$modal.loading();
        this.activeNames = [];
        mountNameList({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data && res.data.length > 0) {
            let tabNameList = {};
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
              oneData.title = item && item.mount;
              tabNameList[item.mount] = oneData;
            });
            // this.secondChartList = {...tabNameList};
            this.tabsListData = {...tabNameList};
            this.activeNames = [Object.keys(tabNameList)[0]];
            this.fnSwitchNetNames(); // 第二模块名称
            setTimeout(() => {
              this.fnDiskNames(); // 第三模块名称
              setTimeout(() => {
                this.fnDockerNames(); // 第四模块名称
                this.secondChartList = {... this.tabsListData};
                this.$modal.closeLoading();
              },500);
            },500);
            // this.getPointDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
          } else {
            this.fnSwitchNetNames(); // 第二模块名称
            setTimeout(() => {
              this.fnDiskNames(); // 第三模块名称
              setTimeout(() => {
                this.fnDockerNames(); // 第四模块名称
                this.secondChartList = {... this.tabsListData};
                this.$modal.closeLoading();
              },500);
            },500);
          }
        }).catch(error =>{
          this.fnSwitchNetNames();
          setTimeout(() => {
            this.fnDiskNames(); // 第三模块名称
            setTimeout(() => {
              this.fnDockerNames(); // 第四模块名称
              this.secondChartList = {... this.tabsListData};
              this.$modal.closeLoading();
            },500);
          },500);
          // this.$modal.closeLoading();
          // console.error('获取接口名称列表失败：', error);
          // 可添加错误提示，如this.$message.error('数据加载失败')
        });
      },
      // 基本信息
      getPointDetailsData(times, titleName) {
        this.eventDataMap[titleName] = true;
        pointDetails({clientId: this.paramsData.clientId, mount: titleName}).then(res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          this.getSpaceEcharts(times ,titleName);
          setTimeout(() => {
            this.getSpaceRate(times, titleName);
          },500)
        }).catch(() => {
          this.getSpaceEcharts(times, titleName);
          setTimeout(() => {
            this.getSpaceRate(times, titleName);
          },500)
        });
      },
      // 空间
      getSpaceEcharts(times,titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
        mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        mountEcharts.fnEvent = 'getSpaceEcharts';
        spaceEcharts(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            mountEcharts.title = titleName + content.echartFors[0].title;
            mountEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            mountEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            mountEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['vfsFreeData'] || []
            };
            mountEcharts.dataVal.dataList[1] = {
              name: content.echartFors[0].twoName,
              data: res.data && res.data.yData['vfsTotalData'] || []
            };
          }
          mountCollect['echartList'][0] = mountEcharts;
          this.$set(this.secondChartList, titleName, mountCollect);
          this.$modal.closeLoading();
        }).catch(() => {
          this.$modal.closeLoading();
        });
      },
      // 空间利用率
      getSpaceRate(times,titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
        mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        mountEcharts.fnEvent = 'getSpaceRate';
        spaceRate(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            mountEcharts.title = titleName + content.echartFors[1].title;
            mountEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            mountEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            mountEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['vfsUtilData'] || []
            };
          }
          mountCollect['echartList'][1] = mountEcharts;
          this.$set(this.secondChartList, titleName, mountCollect);
          this.$modal.closeLoading();
        }).catch(() => {
          this.$modal.closeLoading();
        });
      },
      // 第二模块 网络接口 ---所有网络接口名称
      fnSwitchNetNames (){
        postInterFaceName({clientId: this.paramsData.clientId,resourceType: 1}).then(res => {
          if (res && res.length > 0) {
            let tabNameList = {};
            res && res.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
              oneData.title = item && item.interfaceName;
              oneData.businessFlag = item.businessFlag;
              oneData.serverIp = item && item.serverIp;
              tabNameList[item.interfaceName] = oneData;
              // this.$set(this.secondChartList, item.interfaceName, oneData);
              this.$set(this.tabsListData, item.interfaceName, oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [res[0].interfaceName];
              // this.getNetDetailsData(this.currTimeList, res[0].interfaceName);
            }
          }
        });
      },
      // 基本信息
      getNetDetailsData(times, titleName) {
        this.eventDataMap[titleName] = true;
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        netDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getNetEcharts(times, titleName)) {
            if (mountCollect.businessFlag) {
              if (await this.getNetIPv4Echarts(times, titleName)) {
                if (await this.getNetIPv6Echarts(times, titleName)) {
                  this.getNetDropped(times ,titleName);
                }
              }
            } else {
              this.getNetDropped(times ,titleName);
            }
          }
        }).catch(async () => {
          if (await this.getNetEcharts(times, titleName)) {
            if (mountCollect.businessFlag) {
              if (await this.getNetIPv4Echarts(times, titleName)) {
                if (await this.getNetIPv6Echarts(times, titleName)) {
                  this.getNetDropped(times ,titleName);
                }
              }
            } else {
              this.getNetDropped(times ,titleName);
            }
          }
        });
      },
      // 流量
      getNetEcharts(times, titleName, unitData) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetEcharts';
        return trafficEcharts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            if (content.echartFors[0].unitSel) {
              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            }
            let ledgendArr = [];
            if (res.data && res.data.showRealation) {
              Object.keys(res.data.showRealation).forEach((key,index) => {
                ledgendArr.push(res.data.showRealation[key]);
                netEcharts.dataVal.dataList[index] = {
                  name: res.data.showRealation[key],
                  data: res.data && res.data.yData[key] || []
                };
              });
            }
            if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            }
            // netEcharts.dataVal.dataList[0] = {
            //   name: content.echartFors[0].oneName,
            //   data: res.data && res.data.yData['netOutSpeedData'] || []
            // };
            // netEcharts.dataVal.dataList[1] = {
            //   name: content.echartFors[0].twoName,
            //   data: res.data && res.data.yData['netInSpeedData'] || []
            // };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // IPv4流量
      getNetIPv4Echarts(times, titleName, unitData) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetIPv4Echarts';
        return trafficIPv4Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[1].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            if (content.echartFors[1].unitSel) {
              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            }
            let ledgendArr = [];
            if (res.data && res.data.showRealation) {
              Object.keys(res.data.showRealation).forEach((key,index) => {
                ledgendArr.push(res.data.showRealation[key]);
                netEcharts.dataVal.dataList[index] = {
                  name: res.data.showRealation[key],
                  data: res.data && res.data.yData[key] || []
                };
              });
            }
            if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            }
            // netEcharts.dataVal.dataList[0] = {
            //   name: content.echartFors[1].oneName,
            //   data: res.data && res.data.yData['netOutSpeedData'] || []
            // };
            // netEcharts.dataVal.dataList[1] = {
            //   name: content.echartFors[1].twoName,
            //   data: res.data && res.data.yData['netInSpeedData'] || []
            // };
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // IPv6流量
      getNetIPv6Echarts(times, titleName, unitData) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetIPv6Echarts';
        return trafficIPv6Echarts(Object.assign(unitData || {}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[2].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            if (content.echartFors[2].unitSel) {
              netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
              netEcharts.dataVal['unitSelList'] = content.echartFors[0].unitSel;
            }
            let ledgendArr = [];
            if (res.data && res.data.showRealation) {
              Object.keys(res.data.showRealation).forEach((key,index) => {
                ledgendArr.push(res.data.showRealation[key]);
                netEcharts.dataVal.dataList[index] = {
                  name: res.data.showRealation[key],
                  data: res.data && res.data.yData[key] || []
                };
              });
            }
            if (res.data && res.data.showRealation && Object.keys(res.data.showRealation).length > 5) {
              netEcharts.dataVal.legend = Object.assign({}, netEcharts.dataVal.legend, {show: false, legendSelect: ledgendArr, data: ledgendArr});
            }
            // netEcharts.dataVal.dataList[0] = {
            //   name: content.echartFors[2].oneName,
            //   data: res.data && res.data.yData['netOutSpeedData'] || []
            // };
            // netEcharts.dataVal.dataList[1] = {
            //   name: content.echartFors[2].twoName,
            //   data: res.data && res.data.yData['netInSpeedData'] || []
            // };
            mountCollect['echartList'][2] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      // 丢包数
      getNetDropped(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let indexNum = 1;
        if (mountCollect.businessFlag) {
          indexNum = 3;
        }
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetDropped';
        return droppedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[3].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[3].oneName,
              data: res.data && res.data.yData['outDroppedData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[3].twoName,
              data: res.data && res.data.yData['inDroppedData'] || []
            };
            mountCollect['echartList'][indexNum] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          this.$modal.closeLoading();
          return true;
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },

      // 第三模块 硬盘设备 ---所有名称 diskAllNames, diskDetails, speedEcharts, timesEcharts, bytesEcharts
      fnDiskNames (){
        diskAllNames({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data.length > 0) {
            let tabNameList = {};
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
              oneData.title = item && item.name;
              tabNameList[item.name] = oneData;
              // this.$set(this.secondChartList, item.name, oneData);
              this.$set(this.tabsListData, item.name, oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [res.data[0].name];
              // this.getDiskDetailsData(this.currTimeList, res.data[0].name);
            }
          }
        });
      },
      // 基本信息
      getDiskDetailsData(times, titleName) {
        this.eventDataMap[titleName] = true;
        diskDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          this.getSpeedEcharts(times, titleName);
          // if (await this.getSpeedEcharts(times, titleName)) {
          //   if (await this.getDiskTimes(times ,titleName)) {
          //     this.getDiskBytes(times ,titleName);
          //   }
          // }
        }).catch(async () => {
          this.getSpeedEcharts(times, titleName);
          // if (await this.getSpeedEcharts(times, titleName)) {
          //   if (await this.getDiskTimes(times ,titleName)) {
          //     this.getDiskBytes(times ,titleName);
          //   }
          // }
        });
      },
      //
      getSpeedEcharts(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getSpeedEcharts';
        return speedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['writeSpeedData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[0].twoName,
              data: res.data && res.data.yData['readSpeedData'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          this.$modal.closeLoading();
          return true;
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },
      //
      // getDiskTimes(times, titleName) {
      //   let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
      //   let netEcharts = JSON.parse(JSON.stringify(this.echartData));
      //   let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
      //   netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
      //   netEcharts.fnEvent = 'getDiskTimes';
      //   return timesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
      //     if (res && res.data) {
      //       netEcharts.title = titleName + content.echartFors[1].title;
      //       netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
      //       netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
      //       netEcharts.dataVal.dataList[0] = {
      //         name: content.echartFors[1].oneName,
      //         data: res.data && res.data.yData['writeTimesData'] || []
      //       };
      //       netEcharts.dataVal.dataList[1] = {
      //         name: content.echartFors[1].twoName,
      //         data: res.data && res.data.yData['readTimesData'] || []
      //       };
      //       mountCollect['echartList'][1] = netEcharts;
      //       this.$set(this.secondChartList, titleName, mountCollect);
      //     }
      //     return true;
      //   }).catch(() => {
      //     return true;
      //   });
      // },
      // //
      // getDiskBytes(times, titleName) {
      //   let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
      //   let netEcharts = JSON.parse(JSON.stringify(this.echartData));
      //   let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
      //   netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
      //   netEcharts.fnEvent = 'getDiskBytes';
      //   return bytesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
      //     if (res && res.data) {
      //       netEcharts.title = titleName + content.echartFors[2].title;
      //       netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
      //       netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
      //       netEcharts.dataVal.dataList[0] = {
      //         name: content.echartFors[2].oneName,
      //         data: res.data && res.data.yData['writeBytesData'] || []
      //       };
      //       netEcharts.dataVal.dataList[1] = {
      //         name: content.echartFors[2].twoName,
      //         data: res.data && res.data.yData['readBytesData'] || []
      //       };
      //       mountCollect['echartList'][2] = netEcharts;
      //       this.$set(this.secondChartList, titleName, mountCollect);
      //     }
      //     this.$modal.closeLoading();
      //     return true;
      //   }).catch(() => {
      //     this.$modal.closeLoading();
      //     return true;
      //   });
      // },

      // 第四模块 容器 ---所有名称 dockerAllNames, dockerDetails, cpuUtilEcharts, dockerMemEcharts, dockerSpeedEcharts
      fnDockerNames (){
        dockerAllNames({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data.length > 0) {
            let tabNameList = {};
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
              oneData.title = item && item.id;
              tabNameList[item.id] = oneData;
              // this.$set(this.secondChartList, item.id, oneData);
              this.$set(this.tabsListData, item.id, oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [res.data[0].id];
              // this.getDockerDetailsData(this.currTimeList, res.data[0].id);
            }
          }
        });
      },
      // 基本信息
      getDockerDetailsData(times, titleName) {
        this.eventDataMap[titleName] = true;
        dockerDetails({clientId: this.paramsData.clientId, id: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getCpuEcharts(times, titleName)) {
            if (await this.getDockerMem(times ,titleName)) {
              this.getDockerSpeed(times ,titleName);
            }
          }
        }).catch(async () => {
          if (await this.getCpuEcharts(times, titleName)) {
            if (await this.getDockerMem(times ,titleName)) {
              this.getDockerSpeed(times ,titleName);
            }
          }
        });
      },
      //
      getCpuEcharts(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getCpuEcharts';
        return cpuUtilEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['writeSpeedData'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      //
      getDockerMem(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getDockerMem';
        return dockerMemEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[1].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['writeTimesData'] || []
            };
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          return true;
        }).catch(() => {
          return true;
        });
      },
      //
      getDockerSpeed(times, titleName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getDockerSpeed';
        return dockerSpeedEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[2].title;
            netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[2].oneName,
              data: res.data && res.data.yData['writeBytesData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[2].twoName,
              data: res.data && res.data.yData['readBytesData'] || []
            };
            mountCollect['echartList'][2] = netEcharts;
            this.$set(this.secondChartList, titleName, mountCollect);
          }
          this.$modal.closeLoading();
          return true;
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },


      collapseChangeData(valList) {
        valList && valList.forEach(item => {
          if (item && !this.eventDataMap[item]) {
            // this.$modal.loading();
            if (this.secondChartList[item].type === 'mount') {
              this.getPointDetailsData(this.currTimeList, item);
            } else if (this.secondChartList[item].type === 'net') {
              this.getNetDetailsData(this.currTimeList, item);
            } else if (this.secondChartList[item].type === 'disk') {
              this.getDiskDetailsData(this.currTimeList, item);
            } else if (this.secondChartList[item].type === 'dock') {
              this.getDockerDetailsData(this.currTimeList, item);
            }
          }
        });
      },
      chartFnEvent(valData, fnName, tabName, unit) {
        this.firstChartTrans = valData;
        // 检查函数是否存在，避免报错
        if (typeof this[fnName] === 'function') {
          this.defaultTimes = valData.timeArr;
          this.firstTabTimeArr = valData.timeArr;
          let unitData = unit ? {unit: unit} : {};
          // 调用实际函数，并传递参数（如选中的值、当前项）
          this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName, unitData);
        } else {
          console.warn(`函数 ${fnName} 未定义`);
        }
      },
      goBack() {
        this.$router.push("/resource/serverRegister");
      }
    }
  }
</script>

<style scoped>

</style>
