profitManage1.1/src/views/resource/switchRegister/monitorChart.vue

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

<script>
  import FirstMonitor from "./firstMonitor";
  import SecondAutoFind from "./secondAutoFind";
  import {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,
    switchNetErrDiscard, switchNetSpeed, moduleAllName, moduleMsg, moduleLowThreshold, modulePower, mpuAllName, mpuMsg, mpuCpuUse, mpuMemUse,
    mpuTemperature,pwrAllName, pwrMsg, pwrCurrent, pwrVoltage, fanAllName, fanMsg} from "@/api/disRevenue/resource"
  export default {
    name: "MonitorChart",
    components: {FirstMonitor, SecondAutoFind},
    data() {
      return {
        loading: false,
        currTimeList: {},
        defaultTimes: [],
        activeName: 'first',
        paramsData: {},
        // 第一栏
        firstChartTrans: {},
        formFirst: {
          sysName: '系统名称', sysLocation: '系统位置', sysObjectID: '系统Object ID', hwStackSystemMac: '系统MAC地址',
          sysUpTime: '系统运行时间', entPhysicalName: '设备名称', sysContact: '系统联系信息', entPhysicalSoftwareRev: '设备软件版本', sysDescr: '系统描述'
        },
        formData: {},
        firstChartList: [],
        resultData: [
          {
            title: '设备CPU使用率(%)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [{
                name: '设备CPU使用率',
                data: [],
              }]
            }
          },{
            title: '设备内存使用率(%)',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [{
                name: '设备内存使用率',
                data: [],
              }]
            }
          },{
            title: '功率',
            dateShowType: 'datetimerange',
            dateDataTrans: {transList: true},
            dataVal: {
              titleVal: {textAlign: 'left', left: '1%'},
              yAxisName: ' ',
              gridTop: '35%',
              legend: {top: '15%', left: '10%'},
              lineXData: [],
              dataList: [{
                name: '系统平均功率(mW)',
                data: [],
              },{
                name: '系统实时功率(mW)',
                data: []
              }]
            }
          }
        ],
        //  第二栏
        activeNames: [],
        secondChartList: {},
        eventDataMap: {},
        echartData: {
          title: 'GE1/0/1的丢包数',
          dateShowType: 'datetimerange',
          dateDataTrans: {transList: true},
          dataVal: {
            titleVal: {textAlign: 'left', left: '1%'},
            yAxisName: ' ',
            gridTop: '35%',
            legend: {top: '15%', left: '10%'},
            lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
            dataList: [{
              name: '入站丢包',
              data: [120, 132, 101, 134, 90, 230, 210],
            },{
              name: '出站丢包',
              data: [220, 182, 191, 234, 290, 330, 310]
            }]
          }
        },
        linuxSystem: {
          net: {
            title: '网络端口GE1/0/1',
            type: 'net',
            formList: {ifDescr: '端口名称', ifType: '端口类型', ifOperStatus: '端口状态', ifSpeed: '端口适配速率(Mbps)'},
            formModel: {},
            echartFors: [
              {title: '的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
              {title: '的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
              {title: '的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
              {title: '的网络速率', oneName: '端口实时接收速率', twoName: '端口实时发送速率'},
            ],
            echartList: []
          },
          light: {
            title: '光模块sabc',
            type: 'light',
            formList: {name: '光模块端口名称'},
            formModel: {name: 'sabc'},
            echartFors: [
              {title: '的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
              {title: '的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
            ],
            echartList: []
          },
          mpu: {
            title: 'MPU1',
            type: 'mpu',
            formList: {name: 'MPU名称', system: 'MPU的操作系统'},
            formModel: {name: 'MPU1', system: 'xxxx'},
            echartFors: [
              {title: '的CPU使用率(%)', oneName: 'CPU利用率'},
              {title: '的内存使用率(%)', oneName: '内存利用率'},
              {title: '的温度(°C)', oneName: '温度'},
            ],
            echartList: []
          },
          pw: {
            title: '电源PW1',
            type: 'pw',
            formList: {name: '电源名称', status: '电源状态'},
            formModel: {name: 'PW1', status: '正在供电'},
            echartFors: [
              {title: '电流(mA)', oneName: '电源电流'},
              {title: '电压(mV)', oneName: '电源电压'}
            ],
            echartList: []
          },
          fan: {
            title: '风扇FAN1',
            type: 'fan',
            formList: {name: '风扇名称', status: '风扇状态'},
            formModel: {name: 'FAN1', status: 'xxx'},
            echartFors: [],
            echartList: []
          }
        },
      }
    },
    created() {
      let startData = '';
      let endData = '';
      const year = new Date().getFullYear();
      const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
      const day = String(new Date().getDate()).padStart(2, '0');     // 当前日（如8）
      const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
      startData = `${year}-${month}-${prevDay} 00:00:00`;
      endData = `${year}-${month}-${day} 00:00:00`;
      this.currTimeList = {startTime: startData, endTime: endData};
      this.defaultTimes = [startData, endData];
      this.paramsData = this.$route && this.$route.query;
      this.handleClick();
    },
    methods: {
      async handleClick(tab, event) {
        this.loading = false;
        if (this.activeName === 'first') {
          await Promise.all([
            this.getMonitorData(),
            this.getCpuData(this.currTimeList),
            this.getMemData(this.currTimeList),
            this.getPowerData(this.currTimeList)
          ]);
          this.loading = true;
        } else {
          await this.fnInterFaceNameList();
          this.loading = true;
        }
      },
      getMonitorData() {
        this.formData = {formFirst: this.formFirst};
        switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
          if (res && res.data) {
            this.formData['formValue'] = res.data;
          }
        });
      },
      getCpuData(val) {
        let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
        cpuData.dateDataTrans['dateRange'] = this.defaultTimes;
        cpuData['fnEvent'] = 'getCpuData';
        switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          if (res && res.data) {
            cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            cpuData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchCpuUse'] && res.data['yData']['switchCpuUse'].length > 0 ? res.data['yData']['switchCpuUse'] : [];
          }
          // this.firstChartList[0] = cpuData;
          this.$set(this.firstChartList, 0, cpuData);
        }).catch(() => {
          this.firstChartList[0] = cpuData;
        });
      },
      getMemData(val) {
        let memData = JSON.parse(JSON.stringify(this.resultData[1]));
        memData.dateDataTrans['dateRange'] = this.defaultTimes;
        memData['fnEvent'] = 'getMemData';
        switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          if (res && res.data) {
            memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            memData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
          }
          // this.firstChartList[1] = memData;
          this.$set(this.firstChartList, 1, memData);
        }).catch(() => {
          this.firstChartList[1] = memData;
        });
      },
      getPowerData(val) {
        let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
        powerData.dateDataTrans['dateRange'] = this.defaultTimes;
        powerData['fnEvent'] = 'getPowerData';
        switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
          if (res && res.data) {
            powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
              this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
            powerData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
            powerData.dataVal.dataList[1].data = res.data && res.data['yData'] && res.data['yData']['switchcurrentPower'] && res.data['yData']['switchcurrentPower'].length > 0 ? res.data['yData']['switchcurrentPower'] : [];
          }
          // this.firstChartList[2] = powerData;
          this.$set(this.firstChartList, 2, powerData);
        }).catch(() => {
          this.firstChartList[2] = powerData;
        });
      },
      // two
      // 接口名称
      fnInterFaceNameList(val) {
        this.activeNames = [];
        postInterFaceName({clientId: this.paramsData.clientId,resourceType: 2}).then(res => {
          let tabNameList = {};
          if (res && res.length > 0) {
            res && res.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
              oneData.title = item && item.interfaceName;
              tabNameList[item.interfaceName + '_net'] = oneData;
            });
            this.secondChartList = {...tabNameList};
            this.activeNames = [Object.keys(tabNameList)[0]];
            this.fnModuleNameList(); // 第二模块名称
            setTimeout(() => {
              this.fnMpuNameList(); // 第三模块名称
              setTimeout(() => {
                this.fnPwrNameList(); // 第四模块名称
                setTimeout(() => {
                  this.fnFanNameList(); // 第五模块名称
                },500);
              },500);
            },500);
            this.getNetDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
          } else {
            this.fnModuleNameList(); // 第二模块名称
            setTimeout(() => {
              this.fnMpuNameList(); // 第三模块名称
              setTimeout(() => {
                this.fnPwrNameList(); // 第四模块名称
                setTimeout(() => {
                  this.fnFanNameList(); // 第五模块名称
                },500);
              },500);
            },500);
          }
        }).catch((error) => {
          this.fnModuleNameList(); // 第二模块名称
          setTimeout(() => {
            this.fnMpuNameList(); // 第三模块名称
            setTimeout(() => {
              this.fnPwrNameList(); // 第四模块名称
              setTimeout(() => {
                this.fnFanNameList(); // 第五模块名称
              },500);
            },500);
          },500);
        });
      },
      // 基本信息
      getNetDetailsData(times, titleName, keyName) {
        this.$modal.loading();
        this.eventDataMap[keyName] = true;
        switchNetDetails({clientId: this.paramsData.clientId, ifDescr: titleName}).then(async res => {
          this.secondChartList[keyName].formModel = res && res.data || [];
          if (await this.getNetDiscards(times ,titleName, keyName)) {
            if (await this.getNetTotal(times, titleName, keyName)) {
              if (await this.getNetErrDisc(times, titleName, keyName)) {
                this.getNetSpeed(times, titleName, keyName);
              }
            }
          }
        }).catch(async error => {
          if (await this.getNetDiscards(times ,titleName, keyName)) {
            if (await this.getNetTotal(times, titleName, keyName)) {
              if (await this.getNetErrDisc(times, titleName, keyName)) {
                this.getNetSpeed(times, titleName, keyName);
              }
            }
          }
        });
      },
      // 丢包
      getNetDiscards(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetDiscards';
        return switchNetDiscards(Object.assign({}, {ifDescr : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['netInDiscardsData'] || []
            };
            // 出
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[0].twoName,
              data: res.data && res.data.yData['netOutDiscardsData'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      // 总数
      getNetTotal(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetTotal';
        return switchNeTotal(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[1].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['netInTotalData'] || []
            };
            // 出
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[1].twoName,
              data: res.data && res.data.yData['netOutTotalData'] || []
            };
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      // 错误丢包
      getNetErrDisc(times, titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetErrDisc';
        return switchNetErrDiscard(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[2].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[2].oneName,
              data: res.data && res.data.yData['netInErrDiscardsData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[2].twoName,
              data: res.data && res.data.yData['netOutErrDiscardsData'] || []
            };
            mountCollect['echartList'][2] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      // 实时流量
      getNetSpeed(times, titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getNetSpeed';
        return switchNetSpeed(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[3].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[3].oneName,
              data: res.data && res.data.yData['netInSpeedData'] || []
            };
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[3].twoName,
              data: res.data && res.data.yData['netOutSpeedData'] || []
            };
            mountCollect['echartList'][3] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            // return true;
            this.$modal.closeLoading();
          }
        }).catch(() => {
          // return true;
          this.$modal.closeLoading();
        });
      },

      // 光模块的所有名称 moduleAllName, moduleMsg, moduleLowThreshold, modulePower
      fnModuleNameList(val) {
        moduleAllName({clientId: this.paramsData.clientId}).then(res => {
          let tabNameList = {};
          if (res && res.data && res.data.length > 0) {
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['light']));
              oneData.title = item && item.fiberPortName;
              tabNameList[item.fiberPortName + '_module'] = oneData;
              this.$set(this.secondChartList, item.fiberPortName + '_module', oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [Object.keys(tabNameList)[0]];
              this.getModuleDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
            }
          }
        });
      },
      // 基本信息
      getModuleDetailsData(times, titleName, keyName) {
        this.$modal.loading();
        this.eventDataMap[keyName] = true;
        moduleMsg({clientId: this.paramsData.clientId, moudleName: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getModuleLowThreshold(times ,titleName, keyName)) {
            this.getModulePower(times, titleName, keyName);
          }
        }).catch(async error => {
          if (await this.getModuleLowThreshold(times ,titleName, keyName)) {
            this.getModulePower(times, titleName, keyName);
          }
        });
      },
      // 光衰阈值
      getModuleLowThreshold(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['light']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getModuleLowThreshold';
        return moduleLowThreshold(Object.assign({}, {moudleName : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['TxLowThreshold'] || []
            };
            // 出
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[0].twoName,
              data: res.data && res.data.yData['RxLowThreshold'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      // 功率
      getModulePower(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['light']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getModulePower';
        return modulePower(Object.assign({}, {moudleName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[1].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['RxPower'] || []
            };
            // 出
            netEcharts.dataVal.dataList[1] = {
              name: content.echartFors[1].twoName,
              data: res.data && res.data.yData['TxPower'] || []
            };
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            this.$modal.closeLoading();
            return true;
          }
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },

      // mpu的所有名称 mpuAllName, mpuMsg, mpuCpuUse, mpuMemUse, mpuTemperature
      fnMpuNameList(val) {
        mpuAllName({clientId: this.paramsData.clientId}).then(res => {
          let tabNameList = {};
          if (res && res.data && res.data.length > 0) {
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
              oneData.title = item && item.mpuName;
              tabNameList[item.mpuName + '_mpu'] = oneData;
              this.$set(this.secondChartList, item.mpuName + '_mpu', oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [Object.keys(tabNameList)[0]];
              this.getMpuDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
            }
          }
        });
      },
      // 基本信息
      getMpuDetailsData(times, titleName, keyName) {
        this.$modal.loading();
        this.eventDataMap[keyName] = true;
        mpuMsg({clientId: this.paramsData.clientId, mpuName: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getMpuCpuUse(times ,titleName, keyName)) {
            if (await this.getMpuMemUse(times, titleName, keyName)) {
              this.getMpuTemperature(times, titleName, keyName);
            }
          }
        }).catch(async error => {
          if (await this.getMpuCpuUse(times ,titleName, keyName)) {
            if (await this.getMpuMemUse(times, titleName, keyName)) {
              this.getMpuTemperature(times, titleName, keyName);
            }
          }
        });
      },
      //
      getMpuCpuUse(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getMpuCpuUse';
        return mpuCpuUse(Object.assign({}, {mpuName : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['cpuUsage'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      //
      getMpuMemUse(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getMpuMemUse';
        return mpuMemUse(Object.assign({}, {mpuName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[1].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['memUsage'] || []
            };
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      //
      getMpuTemperature(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getMpuTemperature';
        return mpuTemperature(Object.assign({}, {mpuName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[2].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[2].oneName,
              data: res.data && res.data.yData['temperature'] || []
            };
            mountCollect['echartList'][2] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            this.$modal.closeLoading();
            return true;
          }
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },

      // 电源的所有名称 pwrAllName, pwrMsg, pwrCurrent, pwrVoltage
      fnPwrNameList(val) {
        pwrAllName({clientId: this.paramsData.clientId}).then(res => {
          let tabNameList = {};
          if (res && res.data && res.data.length > 0) {
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
              oneData.title = item && item.pwrName;
              tabNameList[item.pwrName + '_pw'] = oneData;
              this.$set(this.secondChartList, item.pwrName + '_pw', oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [Object.keys(tabNameList)[0]];
              this.getPwrDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
            }
          }
        });
      },
      // 基本信息
      getPwrDetailsData(times, titleName, keyName) {
        this.$modal.loading();
        this.eventDataMap[keyName] = true;
        pwrMsg({clientId: this.paramsData.clientId, pwrName: titleName}).then(async res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          if (await this.getPwrCurrent(times ,titleName, keyName)) {
            this.getPwrVoltage(times, titleName, keyName);
          }
        }).catch(async error => {
          if (await this.getPwrCurrent(times ,titleName, keyName)) {
            this.getPwrVoltage(times, titleName, keyName);
          }
        });
      },
      //
      getPwrCurrent(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getPwrCurrent';
        return pwrCurrent(Object.assign({}, {pwrName : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[0].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[0].oneName,
              data: res.data && res.data.yData['pwrCurrent'] || []
            };
            mountCollect['echartList'][0] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            return true;
          }
        }).catch(() => {
          return true;
        });
      },
      //
      getPwrVoltage(times,titleName, keyName) {
        let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
        let netEcharts = JSON.parse(JSON.stringify(this.echartData));
        let content = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
        netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
        netEcharts.fnEvent = 'getPwrVoltage';
        return pwrVoltage(Object.assign({}, {pwrName : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
          if (res && res.data) {
            netEcharts.title = titleName + content.echartFors[1].title;
            netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
            // 入
            netEcharts.dataVal.dataList[0] = {
              name: content.echartFors[1].oneName,
              data: res.data && res.data.yData['pwrVoltage'] || []
            };
            mountCollect['echartList'][1] = netEcharts;
            this.$set(this.secondChartList, keyName, mountCollect);
            this.$modal.closeLoading();
            return true;
          }
        }).catch(() => {
          this.$modal.closeLoading();
          return true;
        });
      },

      // 风扇的所有名称 fanAllName, fanMsg
      fnFanNameList(val) {
        fanAllName({clientId: this.paramsData.clientId}).then(res => {
          let tabNameList = {};
          if (res && res.data && res.data.length > 0) {
            res && res.data.forEach(async(item,index) => {
              let oneData = JSON.parse(JSON.stringify(this.linuxSystem['fan']));
              oneData.title = item && item.fanName;
              tabNameList[item.fanName + '_fan'] = oneData;
              this.$set(this.secondChartList, item.fanName + '_fan', oneData);
            });
            if (this.activeNames && this.activeNames.length <= 0) {
              this.activeNames = [Object.keys(tabNameList)[0]];
              this.getFanDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
            }
          }
        });
      },
      // 基本信息
      getFanDetailsData(times, titleName, keyName) {
        this.eventDataMap[keyName] = true;
        fanMsg({clientId: this.paramsData.clientId, fanName: titleName}).then(res => {
          this.secondChartList[titleName].formModel = res && res.data || [];
          this.$modal.closeLoading();
        }).catch( error => {
          this.$modal.closeLoading();
        });
      },

      collapseChangeData(valList) {
        valList && valList.forEach(item => {
          if (!this.eventDataMap[item]) {
            this.$modal.loading();
            if (this.secondChartList[item].type === 'net') {
              this.getNetDetailsData(this.currTimeList, this.secondChartList[item].title, item);
            } else if (this.secondChartList[item].type === 'light') {
              this.getModuleDetailsData(this.currTimeList, this.secondChartList[item].title, item);
            } else if (this.secondChartList[item].type === 'mpu') {
              this.getMpuDetailsData(this.currTimeList, this.secondChartList[item].title, item);
            } else if (this.secondChartList[item].type === 'pw') {
              this.getPwrDetailsData(this.currTimeList, this.secondChartList[item].title, item);
            } else if (this.secondChartList[item].type === 'fan') {
              this.getFanDetailsData(this.currTimeList, this.secondChartList[item].title, item);
            }
          }
        });
      },
      chartFnEvent(valData, fnName, tabName, key) {
        this.firstChartTrans = valData;
        // 检查函数是否存在，避免报错
        if (typeof this[fnName] === 'function') {
          this.defaultTimes = valData.timeArr;
          // 调用实际函数，并传递参数（如选中的值、当前项）
          this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName, key);
        } else {
          console.warn(`函数 ${fnName} 未定义`);
        }
      },
      goBack() {
        this.$router.push("/resource/switchRegister");
      }
    }
  }
</script>

<style scoped>

</style>