优化服务器管理详情四个图形展示功能和PPPoE配置

src/components/echartsList/line.vue

@@ -235,7 +235,7 @@
             grid: {
               top: dataXY && dataXY.gridTop || '80px',
               left: dataXY && dataXY.gridLeft || '2%',
-              right: '4%',
+              right: dataXY && dataXY.gridRight || '4%',
               bottom: dataXY && dataXY.gridBotm || '3%',
               containLabel: true
             },

src/views/resource/serverRegister/PPPoEConfig.vue

@@ -118,7 +118,7 @@
         };
       },
       poeInterfaceList() {
-        networkList({clientId: this.ruleForm.clientId, newFlag: 1}).then(res => {
+        networkList({clientIds: this.ruleForm.clientId, newFlag: 1}).then(res => {
           this.ipList = [];
           res && res.data.map(item => {
             this.ipList.push({label: item.interfaceName, value: item.interfaceName});

src/views/resource/serverRegister/details.vue

@@ -61,7 +61,7 @@
         </el-tab-pane>
         <!--    系统监控     -->
         <el-tab-pane label="系统监控" name="系统监控">
-          <serRegisTabsChart v-if="activeName === '系统监控'" :key="activeName" :activeName="activeName" :modelVal="ruleForm" :chartModelList="mapDataList['系统监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
+          <serRegisTabsChart v-if="activeName === '系统监控'" :key="activeName" :activeName="activeName" :modelVal="systemModel" :chartModelList="mapDataList['系统监控']" @timeChangeData="fnTimeChangeData" @chartFnEvent="chartFnEvent"></serRegisTabsChart>
         </el-tab-pane>
         <!--    挂载文件系统监控     -->
         <el-tab-pane label="挂载文件系统监控" name="挂载文件系统监控">
@@ -103,7 +103,8 @@
   import cpuImg from '@/assets/images/cpu.svg';
   import memoryImg from '@/assets/images/memory.svg';
   import {getHandle, trafficSerDetails, agentIsNew, virNetInterfaceChild, frpMsgByClient, getPppoeConfig, updateAgentManage, postInterFaceName,
-    mountNameList, diskAllNames, dockerAllNames, trafficEcharts, droppedEcharts, spaceRate, speedEcharts, cpuUtilEcharts, dockerMemEcharts, cpuLoadData, memoryUtilization} from "@/api/disRevenue/resource";
+    mountNameList, diskAllNames, dockerAllNames, trafficEcharts, droppedEcharts, spaceRate, speedEcharts, cpuUtilEcharts, dockerMemEcharts,
+    cpuLoadData, memoryUtilization, serverMonitorData} from "@/api/disRevenue/resource";
   import {listBandWidth} from "@/api/disRevenue/earnManage";
   import serRegisFormOther from './formOther';
   import serRegisTable from './table';
@@ -119,11 +120,12 @@
         ruleForm: {},
         formList: [],
         paramsData: {},
+        systemModel: {},
         headerList: [
-          {name: 'CPU使用率(%)', num: '', imgUrl: cpuUseImg},
-          {name: '带宽', num: '', unit: 'Mbps', imgUrl: bandWImg},
-          {name: 'CPU', num: '', unit: '核', imgUrl: cpuImg},
-          {name: '内存', num: '', unit: 'G', imgUrl: memoryImg},
+          {name: 'CPU使用率(%)', num: 0, imgUrl: cpuUseImg},
+          {name: '带宽', num: 0, unit: 'Mbps', imgUrl: bandWImg},
+          {name: 'CPU', num: 0, unit: '核', imgUrl: cpuImg},
+          {name: '内存', num: 0, unit: 'G', imgUrl: memoryImg},
         ],
         activeName: '网卡流量监控',
         echartList: {},
@@ -201,6 +203,8 @@
             titleVal: {textAlign: 'left', left: '1%'},
             yAxisName: ' ',
             gridTop: '30%',
+            // gridLeft: '7%',
+            // gridRight: undefined,
             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: [{
@@ -383,6 +387,7 @@
         getPppoeConfig({clientId: this.paramsData.clientId}).then(res => {
           if (res && res.data) {
             res.data['pppoeEnabled'] = res.data && res.data['pppoeEnabled'] ? res.data['pppoeEnabled'].toString() : res.data['pppoeEnabled'];
+            res.data['clientId'] = res.data && res.data['clientId'] ? res.data['clientId'] : this.paramsData.clientId;
             this.$set(this.mapDataList, keyName, [res.data]);
           }
         });
@@ -411,6 +416,7 @@
           {'CPU使用率': {title: 'CPU使用率(%)', clientId: this.paramsData.clientId},
             '内存使用率': {title: '内存使用率(%)', clientId: this.paramsData.clientId}
           });
+        this.getMonitorData();
         // dockerAllNames({clientId: this.paramsData.clientId}).then(res => {
         //   if (res && res.data.length > 0) {
         //     let tabNameList = {};
@@ -424,6 +430,13 @@
         //   }
         // });
       },
+      getMonitorData() {
+        serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
+          if (res && res.data) {
+            this.systemModel = res.data;
+          }
+        });
+      },
       //  挂载文件 === 接口名称
       fnInterFaceNameList(keyName) {
         mountNameList({clientId: this.paramsData.clientId}).then(res => {
@@ -651,7 +664,7 @@
             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'] : [];
           }
-          let paramsCpu = Object.assign({}, {echartList: [cpuData]}, this.mapDataList[keyVal][titleName]);
+          let paramsCpu = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [cpuData]});
           this.$set(this.mapDataList[keyVal], titleName, paramsCpu);
           return true;
         }).catch(() => {
@@ -693,7 +706,7 @@
               memoryUtilizaData.dataVal.gridLeft = '-7%';
             }
           }
-          let paramsCpus = Object.assign({}, {echartList: [memoryUtilizaData]}, this.mapDataList[keyVal][titleName]);
+          let paramsCpus = Object.assign({}, this.mapDataList[keyVal][titleName], {echartList: [memoryUtilizaData]});
           this.$set(this.mapDataList[keyVal], titleName, paramsCpus);
           // this.$set(this.firstChartList, 5, memoryUtilizaData);
           return true;

src/views/resource/serverRegister/tabsChart.vue

@@ -29,7 +29,7 @@
           <!--  图表标题  -->
           <div style="width: 100%;position: absolute;top: 12px;left: 30px;">
             <template v-if="val && val.serverIp">
-              <div class="w40 disInlineBlock">
+              <div class="w45 disInlineBlock">
                 <span v-if="val && val.toTitle" class="disInlineBlock" style="vertical-align: middle;">{{val.toTitle}}</span>
                 <span class="disInlineBlock" style="width:25%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;">{{val.title}}</span>
                 <span class="disInlineBlock" style="vertical-align: middle;">{{item && item.title}}</span>
@@ -56,7 +56,7 @@
       </template>
     </template>
     <div v-if="activeName === '系统监控'">
-      <div v-for="(item, key) of systemContent" class="disInlineBlock w50" style="font-size: 14px;line-height: 25px;">
+      <div v-for="(item, key) of systemContent" class="disInlineBlock w50" style="font-size: 14px;line-height: 25px;vertical-align: top;">
         <span style="color: #C0C4CC;">{{item}}：</span>{{modelVal[key]}}
       </div>
     </div>
@@ -109,10 +109,10 @@
         layoutModel: '1',
         systemContent: {
           systemSwOsCollect: '操作系统', systemSwArchCollect: '操作系统架构', kernelMaxprocCollect: '最大进程数', systemDiskSizeTotalCollect: '硬盘-总可用空间(GB)',
-          systemBoottimeCollect: '系统启动时间', systemUptimeCollect: '系统正确运行时间', systemLocaltimeCollect: '系统本地时间', systemUnameCollect: '系统描述',
-          avg1: 'CPU的1分钟负载(%)', avg5: 'CPU的5分钟负载(%)', avg15: 'CPU的15分钟负载(%)', uti: 'CPU使用率(%)', normal: 'CPU正常运行时间(s)', idle: 'CPU空闲时间(s)',
-          iowait: 'CPU等待响应时间(s)', system: 'CPU系统时间(s)', noresp: 'CPU软件无响应时间(s)', user: 'CPU运行用户进程所花费的时间(s)',runProcNum: '正在运行的进程数(个)',
-          usersNum: '登录用户数(个)', swapSizeFree: '交换卷/文件的可用空间(字节)', swapSizePercent: '可用交换空间百分比(%)', available: '可用内存(G)', percent: '可用内存百分比(%)'
+          systemBoottimeCollect: '系统启动时间', systemUptimeCollect: '系统正确运行时间', systemLocaltimeCollect: '系统本地时间', avg1: 'CPU的1分钟负载(%)',
+          avg5: 'CPU的5分钟负载(%)', avg15: 'CPU的15分钟负载(%)', uti: 'CPU使用率(%)', normal: 'CPU正常运行时间(s)', idle: 'CPU空闲时间(s)', iowait: 'CPU等待响应时间(s)',
+          system: 'CPU系统时间(s)', noresp: 'CPU软件无响应时间(s)', user: 'CPU运行用户进程所花费的时间(s)',procNumRunCollect: '正在运行的进程数(个)', systemUsersNumCollect: '登录用户数(个)',
+          systemSwapSizeFreeCollect: '交换卷/文件的可用空间(字节)', systemSwapSizePercentCollect: '可用交换空间百分比(%)', memorySizeAvailableCollect: '可用内存(G)', memorySizePercentCollect: '可用内存百分比(%)', systemUnameCollect: '系统描述'
         },
         sysForm: {},
         echartDataList: {},
@@ -142,7 +142,9 @@
     },
     methods: {
       // 时间 多选框状态
-      checkChange(val) {},
+      checkChange(val) {
+        this.timeModel = null;
+      },
       // 时间变化时
       dateChange(val){
         this.currTimeList = {startTime: val[0], endTime: val[1]};