联调服务器管理详情PPPoE功能 、优化图形监控加载缓慢问题 、交换机管理修改光模块图表参数

src/views/resource/serverRegister/PPPoEConfig.vue

@@ -36,7 +36,7 @@
   import * as XLSX from 'xlsx';
   import Form from '@/components/form/index.vue';
   import TableList from '@/components/table/index.vue';
-  import {networkList} from '@/api/disRevenue/resource';
+  import {networkList, addPoeConfigMain} from '@/api/disRevenue/resource';
   export default {
     name: "PPPoEConfig",
     components: {Form, TableList},
@@ -50,10 +50,17 @@
     watch: {
       modelVal: {
         handler(val, oldVal) {
-          console.log(val,oldVal)
           if (val && val.length > 0) {
-            this.ruleForm = val[0];
-            this.roleList = val[0].subList;
+            val[0].pppoeEnabled = val[0] && (val[0].pppoeEnabled || val[0].pppoeEnabled === 0) ? val[0].pppoeEnabled.toString() : val[0].pppoeEnabled;
+            let newModel = JSON.parse(JSON.stringify(val));
+            this.ruleForm = newModel[0];
+            newModel[0].subList.map((item,index) => {
+               item['targetIndexNum'] = index + 1;
+              if (index !== 0) {
+                item['showNum'] = '1';
+              }
+            });
+            this.roleList = newModel[0].subList;
             this.poeInterfaceList();
           }
         },
@@ -78,6 +85,7 @@
             ]
           }
         },
+        ipList: [],
       }
     },
     created() {
@@ -93,52 +101,94 @@
             clientId: {label: 'clientId', hidden: true},
             pppoeEnabled: {label: '启用PPPoE', span: readonly ? 12 : 24, type: 'radio', options: this.dict.type.pppoe_enabled, required: true},
             pppoeConfigMode: {label: 'PPPoE配置方式', span: readonly ? 10 : 24, type: 'select', options: this.dict.type.pppoe_config_mode, warningTitle: '使用multi_wan_conntrack.sh', required: true},
-            pppoeInterface: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: [], required: true},
+            pppoeInterface: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: this.ipList || [], required: true},
             subList: {label: 'PPPoE配置规则', span: 24, slotName: 'tempPoeConfigRules'},
           }
         }];
         this.columns = {
           id: { label: `ID`,width: '50'},
-          serialNumber: { label: `序号`, width: '50',visible: true},
+          serialNumber: { label: `序号`, minWidth: '50',visible: true, type: 'number', placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
           vlanId: { label: `VLANID`, minWidth: '100',visible: true, type: 'number', placeholder: '请输入数字', slotName: readonly ? null : 'tempEditModel'},
           ipv4Address: { label: `IPv4地址`, minWidth: '100',visible: true, placeholder: '如1.1.1.1', slotName: readonly ? null : 'tempEditModel'},
           ipv4MaskBits: { label: `IPv4掩码位数`, minWidth: '100',visible: true, type: 'number', min: 1, max: 32, placeholder: '请输入1-32', slotName: readonly ? null : 'tempEditModel'},
           ipv4Gateway:{ label: `IPv4网关`,minWidth: '100',visible: true, placeholder: '如1.1.1.1', slotName: readonly ? null : 'tempEditModel'},
-          bandwidthResult: { label: `虚拟网卡上报带宽(Mbps)`, minWidth: '130', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
+          bandwidthResult: { label: `虚拟网卡上报带宽(Mbps)`, minWidth: '140', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
           macAddress: { label: `MAC地址`, minWidth: '120', visible: readonly},
           status: { label: `连通状态`, minWidth: '100', visible: readonly},
         };
       },
       poeInterfaceList() {
         networkList({clientId: this.ruleForm.clientId, newFlag: 1}).then(res => {
-          let ipList = [];
+          this.ipList = [];
           res && res.data.map(item => {
-            this.ipContentList[item.id] = item;
-            ipList.push({label: item.interfaceName, value: item.id});
+            this.ipList.push({label: item.interfaceName, value: item.interfaceName});
           });
-          this.formList[0].controls.pppoeInterface['options'] = ipList;
+          this.formList[0].controls.pppoeInterface['options'] = this.ipList;
         });
       },
+      // 切换编辑和保存
       formSubmit() {
-        this.ruleForm = {name: '12'};
         if (!this.readonly) {
-          console.log('submit=====',this.roleList,this.ruleForm);
+          this.ruleForm = Object.assign({}, this.ruleForm, this.$refs.formRef.$refs.ruleForm.model);
+          this.submitPoeModel();
         } else {
-          this.roleList = this.roleList.length > 0 ? this.roleList : [{serialNumber: '1', vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}];
+          this.ruleForm = Object.assign({}, this.ruleForm, {typeName: 111});
+          this.roleList = this.roleList.length > 0 ? this.roleList : [{targetIndexNum: 1, serialNumber: 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}];
+          this.readonly = !this.readonly;
+          this.fnFormList(this.readonly);
         }
-        this.readonly = !this.readonly;
-        this.fnFormList(this.readonly);
+      },
+      // 新增判断
+      submitPoeModel() {
+        let params = {
+          clientId: this.ruleForm.clientId,
+          pppoeEnabled: this.ruleForm.pppoeEnabled,
+          pppoeConfigMode: this.ruleForm.pppoeConfigMode,
+          pppoeInterface: this.ruleForm.pppoeInterface,
+          subList: this.roleList
+        };
+        let indexNum = 0;
+        if (this.modelVal && this.modelVal[0] && this.modelVal[0].subList && this.modelVal[0].subList.length === this.roleList.length) {
+          let arr = ['vlanId', 'serialNumber', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult'];
+          Object.keys(params).some(keyName => {
+            if (keyName ==='subList') {
+              params['subList'].some((item,index) => {
+                arr.some(keyTowName => {
+                  if (item[keyTowName] !== this.modelVal[0].subList[index][keyTowName]) {
+                    indexNum = 1;
+                    return true;
+                  }
+                });
+                return true;
+              });
+            } else if (params[keyName] !== this.modelVal[0][keyName]) {
+              indexNum = 1;
+            }
+          });
+        } else {
+          indexNum = 1;
+        }
+        if (indexNum === 0) {
+          this.readonly = true;
+          this.fnFormList(this.readonly);
+          return;
+        }
+        addPoeConfigMain(params).then(res => {
+          this.ruleForm = Object.assign(this.ruleForm, this.$refs.formRef.$refs.ruleForm.model, {typeName: 222});
+          this.readonly = true;
+          this.fnFormList(this.readonly);
+        });
       },
       // 监听事件
       callback(result, dataVal, formVal) {
         if (result && result.fnCode) {
           switch (result.fnCode) {
             case 'add':
-                this.roleList.push({showNum: '1', serialNumber: this.roleList.length + 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined});
+                this.roleList.push({targetIndexNum: this.roleList.length + 1,showNum: '1', serialNumber: 1, vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined});
               break;
             case 'delete':
-              console.log('dataVal===',dataVal);
-              this.roleList.splice(dataVal.serialNumber - 1, 1);
+              this.roleList.splice(this.roleList.findIndex(item => item.targetIndexNum === dataVal.targetIndexNum), 1);
+              break;
             case 'submit':
               console.log('contentList===',this.contentList, 'dataVal===',dataVal);
               // this.$emit("dialogResult", {open: false});
@@ -161,7 +211,6 @@
         document.body.removeChild(link);
       },
       handleFileUpload(file) {
-        console.log('file====',file);
         // 如果是使用 Element UI 的 el-upload 组件，文件对象是 file.raw
         const actualFile = file.raw || file; // 兼容两种获取方式[1,3](@ref)
 
@@ -189,19 +238,18 @@
 
             // 6. 将解析后的数据存储在组件的 data 中
             // this.excelData = jsonData;
-            console.log('解析到的Excel数据：', jsonData);
+            // console.log('解析到的Excel数据：', jsonData);
 
             // 可以在这里调用后续处理方法，如数据校验、发送到后端等
             this.processExcelData(jsonData);
 
           } catch (error) {
-            console.error('解析Excel文件时出错：', error);
+            // console.error('解析Excel文件时出错：', error);
             this.$message.error('文件解析失败，请检查文件格式是否正确。');
           }
         };
 
         fileReader.onerror = (error) => {
-          console.error('读取文件失败：', error);
           this.$message.error('读取文件失败，请重试。');
         };
 
@@ -216,17 +264,14 @@
           let arrList = [];
           data.map((item,index) => {
             if (item && item.length > 0) {
-              let arr = ['vlanId', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult'];
-              let obj = {serialNumber: oldDataList.length + index + 1, showNum: '1'};
+              let arr = ['vlanId', 'serialNumber', 'ipv4Address', 'ipv4MaskBits', 'ipv4Gateway', 'bandwidthResult'];
+              let obj = {targetIndexNum: oldDataList.length + index + 1, showNum: '1'};
               arr.forEach((val, valIndex) => {
                 obj[val] = item[valIndex];
-                // console.log('val===',val, valIndex);
-                // arrList.push(obj);
               });
-              // console.log('item===',item, 'obj===', obj);
+              arrList.push(obj);
             }
           });
-          // console.log('arrList===',arrList);
           this.roleList = oldDataList.concat(arrList);
         } else {
           this.$message.warning('导入的文件中没有数据。');
@@ -237,7 +282,7 @@
         this.roleList.forEach(item => {
           let indexNum = 0;
           Object.keys(item).some(val => {
-            if (val !== 'serialNumber' && val !== 'showNum' && item[val]) {
+            if (val !== 'serialNumber' && val !== 'targetIndexNum' && val !== 'showNum' && item[val]) {
               indexNum = 1;
               return;
             }

src/views/resource/serverRegister/details.vue

@@ -45,7 +45,7 @@
         <!--    最新版本号    -->
         <template #tempMaxVersion="{ field, model, formModel }">
           {{model}}
-          <div v-if="formModel['maxAgentVersion']" class="disInlineBlock ml20">
+          <div v-if="!compareVersions(model,formModel['maxAgentVersion'])" class="disInlineBlock ml20">
             最新版本({{formModel.maxAgentVersion}})
             <el-button class="ml20" style="background-color: #169bd5;border-color: #169bd5;" type="primary" size="mini" @click="upMaxVersion(formModel)">升级到最新</el-button>
           </div>
@@ -55,22 +55,41 @@
     <!--  tab___echarts/form/table  -->
     <div class="mt20 plr-10">
       <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
-        <el-tab-pane v-for="item of tabList" :label="item.name" :name="item.name">
-          <!--    网卡流量控制、系统监控、挂载文件系统监控、硬盘设备监控     -->
-          <div v-if="activeName === '网卡流量监控' || activeName === '系统监控' || activeName === '挂载文件系统监控' || activeName === '硬盘设备监控'">
-            <serRegisTabsChart :key="activeName" :activeName="activeName" :chartModelList="[]"></serRegisTabsChart>
-          </div>
-          <!--    网卡信息、FRP信息、虚拟网卡信息     -->
-          <div v-if="activeName === '网卡信息' || activeName === 'FRP信息' || activeName === '虚拟网卡信息'">
-            <serRegisFormOther :key="activeName" :activeName="activeName" :modelVal="modelVal"></serRegisFormOther>
-          </div>
-          <div v-if="activeName === '收益查看'">
-            <serRegisTable :key="activeName" :activeName="activeName" :modelVal="modelVal" @fnPaging="fnPaging"></serRegisTable>
-          </div>
-          <!--    PPPoE配置     -->
-          <div v-if="activeName === 'PPPoE配置'">
-            <PPPoEConfig :key="activeName" :modelVal="modelVal"></PPPoEConfig>
-          </div>
+        <!--    网卡流量监控     -->
+        <el-tab-pane label="网卡流量监控" name="网卡流量监控">
+          <serRegisTabsChart :key="activeName" :activeName="activeName" :chartModelList="[]"></serRegisTabsChart>
+        </el-tab-pane>
+        <!--    系统监控     -->
+        <el-tab-pane label="系统监控" name="系统监控">
+          <serRegisTabsChart :key="activeName" :activeName="activeName" :chartModelList="[]"></serRegisTabsChart>
+        </el-tab-pane>
+        <!--    挂载文件系统监控     -->
+        <el-tab-pane label="挂载文件系统监控" name="挂载文件系统监控">
+          <serRegisTabsChart :key="activeName" :activeName="activeName" :chartModelList="[]"></serRegisTabsChart>
+        </el-tab-pane>
+        <!--    硬盘设备监控     -->
+        <el-tab-pane label="硬盘设备监控" name="硬盘设备监控">
+          <serRegisTabsChart :key="activeName" :activeName="activeName" :chartModelList="[]"></serRegisTabsChart>
+        </el-tab-pane>
+        <!--    网卡信息     -->
+        <el-tab-pane label="网卡信息" name="网卡信息">
+          <serRegisFormOther :key="activeName" :activeName="activeName" :modelVal="[ruleForm]"></serRegisFormOther>
+        </el-tab-pane>
+        <!--    虚拟网卡信息     -->
+        <el-tab-pane label="虚拟网卡信息" name="虚拟网卡信息">
+          <serRegisFormOther :key="activeName" :activeName="activeName" :modelVal="mapDataList['虚拟网卡信息']"></serRegisFormOther>
+        </el-tab-pane>
+        <!--    收益查看     -->
+        <el-tab-pane label="收益查看" name="收益查看">
+          <serRegisTable :key="activeName" :activeName="activeName" :modelVal="mapDataList['收益查看']"></serRegisTable>
+        </el-tab-pane>
+        <!--    FRP信息     -->
+        <el-tab-pane label="FRP信息" name="FRP信息">
+          <serRegisFormOther :key="activeName" :activeName="activeName" :modelVal="mapDataList['FRP信息']"></serRegisFormOther>
+        </el-tab-pane>
+        <!--    PPPoE配置     -->
+        <el-tab-pane label="PPPoE配置" name="PPPoE配置">
+          <PPPoEConfig :key="activeName" :modelVal="mapDataList['PPPoE配置']"></PPPoEConfig>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -83,7 +102,7 @@
   import bandWImg from '@/assets/images/bandwidth.svg';
   import cpuImg from '@/assets/images/cpu.svg';
   import memoryImg from '@/assets/images/memory.svg';
-  import {getHandle, trafficSerDetails, agentIsNew, virNetInterfaceChild, frpMsgByClient, getPppoeConfig} from "@/api/disRevenue/resource";
+  import {getHandle, trafficSerDetails, agentIsNew, virNetInterfaceChild, frpMsgByClient, getPppoeConfig, updateAgentManage, postInterFaceName} from "@/api/disRevenue/resource";
   import {listBandWidth} from "@/api/disRevenue/earnManage";
   import serRegisFormOther from './formOther';
   import serRegisTable from './table';
@@ -98,7 +117,6 @@
         mapDataList: {},
         ruleForm: {},
         formList: [],
-        modelVal: [],
         paramsData: {},
         headerList: [
           {name: 'CPU使用率(%)', num: '', imgUrl: cpuUseImg},
@@ -107,11 +125,64 @@
           {name: '内存', num: '', unit: 'G', imgUrl: memoryImg},
         ],
         activeName: '网卡流量监控',
-        tabList: [
-          {name: '网卡流量监控'}, {name: '系统监控'}, {name: '挂载文件系统监控'}, {name: '硬盘设备监控'}, {name: '网卡信息'},
-          {name: '虚拟网卡信息'}, {name: '收益查看'}, {name: 'FRP信息'}, {name: 'PPPoE配置'}
-        ],
-        echartList: {}
+        echartList: {},
+        linuxSystem: {
+          mount: {
+            title: '挂载文件系统',
+            type: 'mount',
+            echartFors: [
+              {title: '的空间利用率(%)', oneName: '利用率'},
+            ],
+            echartList: [null]
+          },
+          net: {
+            title: '网络接口interface eth0',
+            type: 'net',
+            echartFors: [
+              {title: '的流量', oneName: '出站流量', twoName: '入站流量', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
+              {title: '5分钟内的丢包数(个)', oneName: '出站丢包数', twoName: '入站丢包数'},
+            ],
+            echartList: [null,null]
+          },
+          disk: {
+            title: '硬盘',
+            type: 'disk',
+            echartFors: [
+              {title: '的读写速率(KB/s)', oneName: '磁盘写入速率', twoName: '磁盘读取速率'}
+            ],
+            echartList: [null]
+          },
+          dock: {
+            title: '容器',
+            type: 'dock',
+            echartFors: [
+              {title: '的CPU利用率(%)', oneName: 'CPU利用率'},
+              {title: '的内存利用率(%)', oneName: '内存利用率'},
+              {title: '的网络速率(Kbps)', oneName: '网络接收速率', twoName: '网络发送速率'},
+            ],
+            echartList: [null, null, null]
+          },
+        },
+        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]
+            }]
+          }
+        },
+        tabsListData: {},
       }
     },
     created() {
@@ -123,6 +194,7 @@
         this.activeName = this.paramsData.target;
       }
       this.fnFormList();
+      this.handleClick();
     },
     methods: {
       fnFormList(objVal) {
@@ -186,11 +258,31 @@
           }
         });
       },
+      // 判断版本是否相同
+      compareVersions(targetVer, version2) {
+        if (targetVer && version2) {
+          const v1 = targetVer.split('.').map(Number);
+          const v2 = version2.split('.').map(Number);
+
+          const maxLength = Math.max(v1.length, v2.length);
+
+          for (let i = 0; i < maxLength; i++) {
+            const num1 = v1[i] || 0;
+            const num2 = v2[i] || 0;
+            if (num1 !== num2) {
+              return false;
+            }
+          }
+          return true; // 相等
+        }
+      },
       // 更新到最新版本
       async upMaxVersion(model) {
         let agentType = await this.fnAgentIsNew(model);
-        if (agentType) {
-
+        if (agentType && agentType.newFlag) {
+          updateAgentManage(agentType).then(res => {
+            console.log('res===',res);
+          });
         } else {
           let content = `<p style="font-size: 1rem;font-weight: 600;">升级警告</p>` +
             `<p style="height: 0px;margin-bottom: 50px;">未找到最新版本${model.maxAgentVersion}的下载地址，请到【AGENT更新】中添加一条版本${model.maxAgentVersion}的更新策略，才可自动进行升级更新`;
@@ -202,23 +294,26 @@
       //agent版本是否为最新版本
       fnAgentIsNew(model) {
         return agentIsNew({clientId: model.clientId, agentVersion: model.maxAgentVersion}).then(res => {
-          return res && res.data ? res.data.newFlag : false;
+          return res && res.data;
         });
       },
       // tab栏点击事件
-      handleClick(tab, event) {
-        this.modelVal = [];
-        if (this.mapDataList[this.activeName] && this.mapDataList[this.activeName].length > 0) {
-          this.modelVal = this.mapDataList[this.activeName];
-        } else {
-          if (this.activeName === '虚拟网卡信息') {
+      handleClick() {
+        if (!this.mapDataList[this.activeName] || this.mapDataList[this.activeName].length <= 0) {
+          if (this.activeName === '网卡流量监控') {
+            this.fnSwitchNetNames();
+          } else if (this.activeName === '系统监控') {
+
+          } else if (this.activeName === '挂载文件系统监控') {
+
+          } else if (this.activeName === '硬盘设备监控') {
+
+          } else if (this.activeName === '虚拟网卡信息') {
             this.virtualNetCard(this.activeName);
           } else if (this.activeName === 'FRP信息') {
             this.fnFRPData(this.activeName);
           } else if (this.activeName === '收益查看') {
             this.serverBandWidth(this.activeName);
-          } else if (this.activeName === '网卡信息') {
-            this.modelVal = [this.ruleForm];
           } else if (this.activeName === 'PPPoE配置') {
             this.fnPppoeConfig(this.activeName);
           }
@@ -226,45 +321,56 @@
       },
       // 收益信息的分页回调
       fnPaging(val) {
-        this.modelVal = [];
-        this.mapDataList[this.activeName] = [];
         this.serverBandWidth(this.activeName,val);
       },
       // 收益信息
       serverBandWidth(keyName, val) {
-        let newParams = Object.assign({}, {pageNum: 1, pageSize: 10, clientId: this.ruleForm.clientId, resourceType: 1}, val);
+        let newParams = Object.assign({}, {pageNum: 1, pageSize: 10, clientId: this.paramsData.clientId, resourceType: 1}, val);
         listBandWidth(newParams).then(res => {
           newParams['total'] = res && res.total;
-          this.mapDataList[this.activeName] = [{tableList: res && res.rows, queryParams: newParams}];
-          this.modelVal = [{tableList: res && res.rows, queryParams: newParams}];
+          this.$set(this.mapDataList, keyName, [{tableList: res && res.rows, queryParams: newParams}]);
         })
       },
       // FRP信息
       fnFRPData(keyName) {
-        frpMsgByClient({clientId: this.ruleForm.clientId}).then(res => {
+        frpMsgByClient({clientId: this.paramsData.clientId}).then(res => {
           if (res && res.data) {
-            this.mapDataList[keyName] = [res.data];
-            this.modelVal = [res.data];
+            this.$set(this.mapDataList, keyName, [res.data]);
           }
         });
       },
       // 虚拟网卡信息
       virtualNetCard(keyName) {
-        this.mapDataList[keyName] = [];
-        virNetInterfaceChild({clientId: this.ruleForm.clientId}).then(resVal => {
+        let newData = [];
+        virNetInterfaceChild({clientId: this.paramsData.clientId}).then(resVal => {
           resVal && resVal.data.forEach(item => {
-            this.mapDataList[keyName].push({title: item.interfaceName, formModel: item});
+            newData.push({title: item.interfaceName, formModel: item});
           });
-          this.modelVal = this.mapDataList[keyName];
+          this.$set(this.mapDataList, keyName, newData);
         });
       },
       // PPPoE配置
       fnPppoeConfig(keyName) {
-        getPppoeConfig({clientId: this.ruleForm.clientId}).then(res => {
+        getPppoeConfig({clientId: this.paramsData.clientId}).then(res => {
           if (res && res.data) {
-            res.data['pppoeEnabled'] = res.data['pppoeEnabled'].toString();
-            this.mapDataList[keyName] = [res.data];
-            this.modelVal = [res.data];
+            res.data['pppoeEnabled'] = res.data && res.data['pppoeEnabled'] ? res.data['pppoeEnabled'].toString() : res.data['pppoeEnabled'];
+            this.$set(this.mapDataList, keyName, [res.data]);
+          }
+        });
+      },
+      // 网络接口 ---所有网络接口名称
+      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.tabsListData, item.interfaceName, oneData);
+            });
           }
         });
       },

src/views/resource/serverRegister/index.vue

@@ -551,13 +551,13 @@
               case 'details':
                 this.$router.push({
                   path:'/resource/serverRegister/details',
-                  query: {id: rowData.id, readonly: true}
+                  query: {id: rowData.id, readonly: true, clientId: rowData.clientId}
                 });
                 break;
               case 'poeConfig':
                 this.$router.push({
                   path:'/resource/serverRegister/details',
-                  query: {id: rowData.id, readonly: true, target: 'PPPoE配置'}
+                  query: {id: rowData.id, readonly: true, target: 'PPPoE配置', clientId: rowData.clientId}
                 });
                 break;
               case 'echartView':

src/views/resource/serverRegister/monitorChart.vue

@@ -187,6 +187,7 @@
         activeNames: [],
         matchNum: {num: ''},
         secondChartList: {},
+        tabsListData: {},
         eventDataMap: {},
         echartData: {
           title: 'GE1/0/1的丢包数',
@@ -314,6 +315,7 @@
           this.loading = true;
         } else {
           this.secondChartList = {};
+          this.tabsListData = {};
           this.eventDataMap = {};
           this.activeNames = [];
           await this.fnInterFaceNameList();
@@ -497,13 +499,15 @@
               oneData.title = item && item.mount;
               tabNameList[item.mount] = oneData;
             });
-            this.secondChartList = {...tabNameList};
+            // 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);
@@ -514,6 +518,7 @@
               this.fnDiskNames(); // 第三模块名称
               setTimeout(() => {
                 this.fnDockerNames(); // 第四模块名称
+                this.secondChartList = {... this.tabsListData};
                 this.$modal.closeLoading();
               },500);
             },500);
@@ -524,6 +529,7 @@
             this.fnDiskNames(); // 第三模块名称
             setTimeout(() => {
               this.fnDockerNames(); // 第四模块名称
+              this.secondChartList = {... this.tabsListData};
               this.$modal.closeLoading();
             },500);
           },500);
@@ -611,7 +617,8 @@
               oneData.businessFlag = item.businessFlag;
               oneData.serverIp = item && item.serverIp;
               tabNameList[item.interfaceName] = oneData;
-              this.$set(this.secondChartList, 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];
@@ -830,7 +837,8 @@
               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.secondChartList, item.name, oneData);
+              this.$set(this.tabsListData, item.name, oneData);
             });
             if (this.activeNames && this.activeNames.length <= 0) {
               this.activeNames = [res.data[0].name];
@@ -957,7 +965,8 @@
               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.secondChartList, item.id, oneData);
+              this.$set(this.tabsListData, item.id, oneData);
             });
             if (this.activeNames && this.activeNames.length <= 0) {
               this.activeNames = [res.data[0].id];

src/views/resource/switchRegister/monitorChart.vue

@@ -98,6 +98,7 @@
         //  第二栏
         activeNames: [],
         secondChartList: {},
+        tabsListData: {},
         eventDataMap: {},
         echartData: {
           title: 'GE1/0/1的丢包数',
@@ -135,8 +136,8 @@
           light: {
             title: '光模块sabc',
             type: 'light',
-            formList: {name: '光模块端口名称'},
-            formModel: {name: 'sabc'},
+            formList: {fiberPortName: '光模块端口名称'},
+            formModel: {},
             echartFors: [
               {title: '的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
               {title: '的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
@@ -228,6 +229,7 @@
           this.loading = true;
         } else {
           this.secondChartList = {};
+          this.tabsListData = {};
           this.eventDataMap = {};
           this.activeNames = [];
           await this.fnInterFaceNameList();
@@ -305,7 +307,8 @@
               oneData['expand'] = item.expand;
               tabNameList[item.interfaceName + '_net'] = oneData;
             });
-            this.secondChartList = {...tabNameList};
+            // this.secondChartList = {...tabNameList};
+            this.tabsListData = {...tabNameList};
             this.activeNames = [Object.keys(tabNameList)[0]];
             this.fnModuleNameList(); // 第二模块名称
             setTimeout(() => {
@@ -314,6 +317,7 @@
                 this.fnPwrNameList(); // 第四模块名称
                 setTimeout(() => {
                   this.fnFanNameList(); // 第五模块名称
+                  this.secondChartList = {...this.tabsListData};
                   this.$modal.closeLoading();
                 },500);
               },500);
@@ -327,6 +331,7 @@
                 this.fnPwrNameList(); // 第四模块名称
                 setTimeout(() => {
                   this.fnFanNameList(); // 第五模块名称
+                  this.secondChartList = {...this.tabsListData};
                   this.$modal.closeLoading();
                 },500);
               },500);
@@ -340,6 +345,7 @@
               this.fnPwrNameList(); // 第四模块名称
               setTimeout(() => {
                 this.fnFanNameList(); // 第五模块名称
+                this.secondChartList = {...this.tabsListData};
                 this.$modal.closeLoading();
               },500);
             },500);
@@ -351,7 +357,7 @@
         // this.$modal.loading();
         this.eventDataMap[keyName] = true;
         switchNetDetails({clientId: this.paramsData.clientId, ifDescr: titleName}).then(async res => {
-          this.secondChartList[keyName].formModel = res && res.data || [];
+          this.secondChartList[keyName].formModel = res && res.data || {};
           if (await this.getNetSpeed(times ,titleName, keyName)) {
             // if (await this.getNetTotal(times, titleName, keyName)) {
               if (await this.getNetDiscards(times, titleName, keyName)) {
@@ -501,7 +507,8 @@
               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);
+              // this.$set(this.secondChartList, item.fiberPortName + '_module', oneData);
+              this.$set(this.tabsListData, item.fiberPortName + '_module', oneData);
             });
             if (this.activeNames && this.activeNames.length <= 0) {
               this.activeNames = [Object.keys(tabNameList)[0]];
@@ -515,7 +522,7 @@
         // this.$modal.loading();
         this.eventDataMap[keyName] = true;
         moduleMsg({clientId: this.paramsData.clientId, fiberPortName: titleName}).then(async res => {
-          this.secondChartList[titleName].formModel = res && res.data || [];
+          this.secondChartList[keyName].formModel = res && res.data && res.data[0] || {};
           if (await this.getModuleLowThreshold(times ,titleName, keyName)) {
             this.getModulePower(times, titleName, keyName);
           }
@@ -597,7 +604,8 @@
               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);
+              // this.$set(this.secondChartList, item.mpuName + '_mpu', oneData);
+              this.$set(this.tabsListData, item.mpuName + '_mpu', oneData);
             });
             if (this.activeNames && this.activeNames.length <= 0) {
               this.activeNames = [Object.keys(tabNameList)[0]];
@@ -611,7 +619,7 @@
         // this.$modal.loading();
         this.eventDataMap[keyName] = true;
         mpuMsg({clientId: this.paramsData.clientId, mpuName: titleName}).then(async res => {
-          this.secondChartList[titleName].formModel = res && res.data || [];
+          this.secondChartList[keyName].formModel = res && res.data || {};
           if (await this.getMpuCpuUse(times ,titleName, keyName)) {
             if (await this.getMpuMemUse(times, titleName, keyName)) {
               this.getMpuTemperature(times, titleName, keyName);
@@ -712,7 +720,8 @@
               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);
+              // this.$set(this.secondChartList, item.pwrName + '_pw', oneData);
+              this.$set(this.tabsListData, item.pwrName + '_pw', oneData);
             });
             if (this.activeNames && this.activeNames.length <= 0) {
               this.activeNames = [Object.keys(tabNameList)[0]];
@@ -726,7 +735,7 @@
         // this.$modal.loading();
         this.eventDataMap[keyName] = true;
         pwrMsg({clientId: this.paramsData.clientId, pwrName: titleName}).then(async res => {
-          this.secondChartList[titleName].formModel = res && res.data || [];
+          this.secondChartList[keyName].formModel = res && res.data || {};
           if (await this.getPwrCurrent(times ,titleName, keyName)) {
             this.getPwrVoltage(times, titleName, keyName);
           }
@@ -798,7 +807,8 @@
               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);
+              // this.$set(this.secondChartList, item.fanName + '_fan', oneData);
+              this.$set(this.tabsListData, item.fanName + '_fan', oneData);
             });
             if (this.activeNames && this.activeNames.length <= 0) {
               this.activeNames = [Object.keys(tabNameList)[0]];
@@ -811,7 +821,7 @@
       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.secondChartList[keyName].formModel = res && res.data || {};
           this.$modal.closeLoading();
         }).catch( error => {
           this.$modal.closeLoading();