From 9765cf824d72f7895c3f63c6c2b5c4fabd58693d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=B7=E5=86=89=E5=86=89?= <kangranran@dingxuantech.cn>
Date: Wed, 31 Dec 2025 18:07:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=BC=80=E5=8F=91=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E7=AE=A1=E7=90=86=E7=9A=84=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E3=80=81=E5=89=8D=E7=AB=AF=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=AE=A1=E7=90=86=E7=9A=84?=
 =?UTF-8?q?PPPoE=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 src/assets/images/bandwidth.svg               |   1 +
 src/assets/images/cpu.svg                     |   1 +
 src/assets/images/cpuUse.svg                  |   1 +
 src/assets/images/memory.svg                  |   1 +
 src/components/table/index.vue                |   4 +-
 src/router/index.js                           |  17 +-
 .../resource/serverRegister/PPPoEConfig.vue   | 207 +++++++++++++---
 src/views/resource/serverRegister/details.vue | 220 ++++++++++++++++++
 .../resource/serverRegister/formOrTable.vue   | 185 +++++++++++++++
 src/views/resource/serverRegister/index.vue   |   9 +-
 .../resource/serverRegister/tabsChart.vue     | 159 +++++++++++++
 12 files changed, 765 insertions(+), 43 deletions(-)
 create mode 100644 src/assets/images/bandwidth.svg
 create mode 100644 src/assets/images/cpu.svg
 create mode 100644 src/assets/images/cpuUse.svg
 create mode 100644 src/assets/images/memory.svg
 create mode 100644 src/views/resource/serverRegister/details.vue
 create mode 100644 src/views/resource/serverRegister/formOrTable.vue
 create mode 100644 src/views/resource/serverRegister/tabsChart.vue

diff --git a/package.json b/package.json
index 105abbb..58f8426 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
diff --git a/src/assets/images/bandwidth.svg b/src/assets/images/bandwidth.svg
new file mode 100644
index 0000000..87f0ef8
--- /dev/null
+++ b/src/assets/images/bandwidth.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763452638925" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10794" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M72.850286 736.451048c3.023238 3.072 3.023238 9.264762 6.046476 12.385523 3.072 6.241524 6.095238 12.434286 12.190476 18.627048 3.023238 6.241524 6.046476 9.313524 9.118476 15.555048 6.046476 9.264762 12.141714 18.627048 21.260191 31.012571 0 3.120762 3.023238 3.120762 3.023238 6.241524 9.118476 12.385524 18.236952 21.699048 27.306667 34.133333l3.072 3.120762c9.118476 9.264762 18.236952 21.699048 30.378666 31.012572l6.095238 6.241523c9.118476 9.264762 18.236952 15.506286 27.306667 21.74781 6.095238 3.072 9.118476 9.264762 15.213714 12.385524s12.190476 9.313524 18.236953 12.434285c12.190476 6.192762 21.26019 15.506286 33.401904 21.74781 18.236952 9.264762 36.473905 18.627048 57.734096 27.940571a1003.471238 1003.471238 0 0 1-78.994286-245.272381H72.850286v-9.313523z m619.763809-217.33181c0-43.446857-3.023238-83.870476-9.118476-124.196571H337.13981a823.003429 823.003429 0 0 0-9.069715 124.196571c0 43.446857 3.023238 83.821714 9.069715 124.196572h349.427809c3.023238-40.374857 6.046476-80.749714 6.046476-124.196572z m-455.728762 0c0-43.446857 3.072-83.870476 6.095238-124.196571H39.448381c0 6.241524-3.072 9.313524-3.072 15.555047 0 6.192762-3.023238 12.385524-3.023238 18.627048-3.023238 9.264762-3.023238 21.699048-6.095238 31.012571 0 6.241524 0 12.434286-3.023238 18.627048v40.374857c0 15.506286 0 27.940571 3.023238 43.446857 0 6.241524 0 12.434286 3.072 18.627048 0 9.313524 3.023238 21.74781 6.046476 31.061333 0 6.192762 3.072 12.434286 3.072 18.627048s3.023238 9.313524 3.023238 15.506286h203.532191a896.78019 896.78019 0 0 1-9.118477-127.268572zM458.703238 1012.736c18.18819 3.120762 33.401905 3.120762 51.638857 3.120762 18.236952 0 33.401905 0 51.638857-3.120762a945.347048 945.347048 0 0 0 106.300953-276.284952H352.402286a945.347048 945.347048 0 0 0 106.300952 276.284952zM340.21181 53.443048c-3.072 3.072-9.118476 3.072-12.190477 6.192762-3.023238 0-6.046476 3.120762-9.069714 3.120761-12.190476 6.192762-21.308952 9.264762-33.450667 15.506286-3.023238 0-6.046476 3.120762-9.118476 3.120762-12.141714 6.192762-21.26019 12.385524-30.378666 18.627048-3.023238 3.072-6.046476 3.072-9.118477 6.192762-9.118476 6.192762-18.18819 12.434286-24.283428 18.627047-6.095238 3.120762-9.118476 9.313524-15.213715 12.434286-6.046476 6.192762-12.141714 9.264762-18.18819 15.506286l-21.308952 21.747809c-3.023238 3.072-3.023238 6.192762-6.046477 6.192762A407.405714 407.405714 0 0 0 78.848 295.594667h185.344c12.190476-80.749714 39.497143-164.571429 75.971048-242.151619z m221.769142-27.940572h-6.095238C540.720762 22.381714 525.507048 22.381714 510.390857 22.381714c-15.213714 0-30.378667 0-45.592381 3.120762H458.703238a945.347048 945.347048 0 0 0-106.349714 276.284953h315.977143A945.347048 945.347048 0 0 0 561.980952 25.502476z m425.350096 583.68c3.023238-9.362286 3.023238-21.74781 6.046476-31.061333 0-6.241524 0-12.434286 3.072-18.627048 0-12.434286 3.023238-27.940571 3.023238-43.495619 0-15.506286 0-27.940571-3.023238-43.446857 0-6.192762 0-12.434286-3.072-18.627048 0-9.313524-3.023238-21.74781-6.046476-31.061333 0-6.192762-3.072-12.385524-3.072-18.627048 0-6.192762-3.023238-9.264762-3.023238-15.506285h-203.532191c3.023238 40.374857 6.046476 80.700952 6.046476 124.196571 0 43.446857-3.023238 83.821714-6.046476 124.14781h203.532191c0-6.192762 3.023238-9.264762 3.023238-15.506286 0 0 3.072-6.192762 3.072-12.434286z m-57.734096-338.407619c-3.023238-6.241524-6.095238-9.313524-9.118476-15.555047-6.095238-9.264762-12.190476-18.627048-21.26019-31.061334 0-3.072-3.023238-3.072-3.023238-6.192762-9.118476-12.434286-18.236952-21.74781-27.355429-34.133333l-3.023238-3.120762c-9.118476-9.264762-18.236952-21.74781-30.378667-31.061333l-6.095238-6.192762c-9.118476-9.264762-18.236952-15.506286-27.306666-21.74781-6.095238-3.072-9.167238-9.264762-15.213715-12.385524-6.095238-3.120762-12.190476-9.313524-18.236952-12.434285-12.190476-6.192762-21.26019-15.506286-33.450667-21.74781a1034.922667 1034.922667 0 0 0-57.685333-27.940571 1003.471238 1003.471238 0 0 1 78.994286 245.272381h185.295238c-3.023238-3.072-3.023238-9.264762-6.046477-12.385524 3.023238 3.072 0-3.120762-6.095238-9.313524z m-246.101333 710.948572c18.236952-6.241524 39.497143-15.555048 57.734095-27.940572a203.824762 203.824762 0 0 0 33.401905-21.747809c6.095238-3.120762 12.190476-9.313524 18.236952-12.434286 6.095238-3.072 9.118476-6.192762 15.213715-12.385524 9.118476-6.241524 18.236952-15.555048 27.306666-21.747809l6.095238-6.241524c9.118476-9.264762 21.26019-18.627048 30.378667-31.012572l3.023238-3.120762c9.118476-9.264762 18.236952-21.74781 27.355429-34.133333 0-3.120762 3.072-3.120762 3.072-6.241524 6.046476-9.264762 12.141714-18.627048 21.26019-31.012571 3.023238-6.241524 6.046476-9.313524 9.118476-15.555048 3.023238-6.192762 6.046476-12.385524 12.141715-18.627047 3.023238-3.072 3.023238-9.264762 6.046476-12.385524h-185.295238c-24.33219 96.207238-51.687619 176.956952-85.089524 254.537143z" fill="#1296db" p-id="10795"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/cpu.svg b/src/assets/images/cpu.svg
new file mode 100644
index 0000000..2a6c1d4
--- /dev/null
+++ b/src/assets/images/cpu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763452689974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11937" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M695.98076 0.061839c18.636877 0 34.373736 13.988319 36.548749 32.497254l0.255884 4.307379v69.941597h147.303828c18.679524 0 34.373736 13.988319 36.548749 32.539902l0.298531 4.307379V290.91653h69.856303a36.804633 36.804633 0 0 1 4.307379 73.39603l-4.264732 0.255884h-69.941597v110.456547h69.941597a36.804633 36.804633 0 0 1 4.264732 73.353382l-4.264732 0.298532h-69.941597v110.456547h69.941597a36.804633 36.804633 0 0 1 4.264732 73.353382l-4.264732 0.298531h-69.941597v147.261181a36.804633 36.804633 0 0 1-32.497254 36.548749l-4.307379 0.255884h-147.303828v69.941597a36.804633 36.804633 0 0 1-73.39603 4.350026l-0.255883-4.307379v-69.941597h-110.456547v69.941597a36.804633 36.804633 0 0 1-73.39603 4.264732l-0.298532-4.264732v-69.941597h-110.456547v69.941597a36.804633 36.804633 0 0 1-73.396029 4.264732l-0.255884-4.264732v-69.941597H143.570083a36.804633 36.804633 0 0 1-36.548749-32.539902l-0.298531-4.307378V732.742718H36.8665a36.804633 36.804633 0 0 1-4.307379-73.39603l4.264732-0.255884h69.941597v-110.456547H36.781205a36.804633 36.804633 0 0 1-4.264731-73.353382l4.264731-0.298532h69.941598v-110.456547H36.781205a36.804633 36.804633 0 0 1-4.264731-73.353382l4.264731-0.298531h69.941598V143.65535c0-18.679524 13.945672-34.373736 32.497254-36.54875l4.307379-0.255884h147.303827V36.909119A36.804633 36.804633 0 0 1 364.269941 32.516446l0.255883 4.307379v69.941597h110.456547V36.909119a36.804633 36.804633 0 0 1 73.39603-4.264731l0.298532 4.264731v69.941597h110.456547V36.909119c0-20.300122 16.504511-36.804633 36.84728-36.804633z m147.303828 180.398144H180.374716v662.739282h662.909872V180.459983z m-147.303828 110.456547c18.636877 0 34.373736 13.988319 36.548749 32.539902l0.255884 4.264731v368.216922a36.804633 36.804633 0 0 1-32.497254 36.548749l-4.307379 0.298531H327.678544a36.804633 36.804633 0 0 1-36.548749-32.539901l-0.255884-4.264732V327.721163c0-18.679524 13.988319-34.373736 32.497254-36.591396l4.307379-0.255884h368.302216z m-36.84728 73.651914H364.525824v294.565008h294.607656V364.568444z" fill="#1296db" p-id="11938"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/cpuUse.svg b/src/assets/images/cpuUse.svg
new file mode 100644
index 0000000..994d71b
--- /dev/null
+++ b/src/assets/images/cpuUse.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763452455440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M453.95 64.79c68.02 0 133.9 13.35 195.96 39.6a502.426 502.426 0 0 1 159.97 107.92 502 502 0 0 1 107.96 160.01 501.21 501.21 0 0 1 39.84 196.13c0 12.38-4.99 24.46-13.66 33.13a46.333 46.333 0 0 1-33.03 13.69l-59.28-0.1c2.72 6.61 3.44 13.9 2.06 21.09a400.69 400.69 0 0 1-136.41 230.53 396.749 396.749 0 0 1-255.2 92.47c-53.84 0-106.06-10.56-155.3-31.41a397.983 397.983 0 0 1-126.81-85.67C105.13 767.21 63.09 665.51 63.2 559.51a399.019 399.019 0 0 1 89.82-252.66 399.818 399.818 0 0 1 224.51-138.06c10.66-2.3 21.43 0.48 29.72 6.61l-0.03-63.82c0.01-25.8 20.96-46.79 46.73-46.79z m-46.72 170.16c-4.2 3.07-8.99 5.22-14.07 6.29-149.48 32.81-255.97 165.23-255.96 318.27a323.767 323.767 0 0 0 95.19 230.26 322.39 322.39 0 0 0 229.78 95.4c75.99 0.09 149.58-26.59 207.86-75.34a326.65 326.65 0 0 0 111.09-187.8c0.48-2.41 1.2-4.82 2.13-7.02l-329.41-0.55c-25.76-0.13-46.58-21.03-46.61-46.79V234.95z m69.39-108.99v420.58l419.85 0.72c-12.11-105-59.28-211.44-134.62-286.78-75.34-75.37-180.31-122.61-285.2-134.51h-0.03z m0 0" p-id="7879" fill="#1296db"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/memory.svg b/src/assets/images/memory.svg
new file mode 100644
index 0000000..91a62c9
--- /dev/null
+++ b/src/assets/images/memory.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763452772113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13072" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M922.688 810.624h-149.312a37.376 37.376 0 0 1-37.312-37.376L736 736h-49.792v74.688H611.584V736h-49.792v74.688H462.208V736h-49.728v74.688H337.792V736H288l-0.256 37.248a37.312 37.312 0 0 1-37.312 37.376h-149.12A37.312 37.312 0 0 1 64 773.248V250.752c0-20.672 16.704-37.376 37.312-37.376h821.312a37.312 37.312 0 0 1 37.376 37.376v522.496a37.312 37.312 0 0 1-37.312 37.376z m-37.376-177.344h-39.168a37.376 37.376 0 0 1 0-74.752h39.168V288.128H138.688v270.4h37.952a37.376 37.376 0 0 1 0 74.752h-37.952v102.528H213.12l0.256-49.6c0-20.672 4.288-24.896 24.896-24.896h547.584c20.608 0 24.896 4.224 24.896 24.896v49.6h74.624V633.28zM736 337.792h74.688V512H736V337.792z m-174.208 0h74.688V512H561.792V337.792z m-174.208 0h74.688V512H387.584V337.792z m-174.272 0H288V512l-73.472-0.128-1.216-174.08z" p-id="13073" fill="#1296db"></path></svg>
\ No newline at end of file
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index c6a1685..e762605 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -115,7 +115,7 @@
                     <template v-else>
                       <!--                    <el-tooltip v-if="item && item.content" :content="item.content" placement="top">-->
                       <template v-if="item && item.content">
-                        <el-button size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="checkPermi([item.hasPermi])">{{item.content}}</el-button>
+                        <el-button size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" v-if="item && item.hasPermi ? checkPermi([item.hasPermi]) : true">{{item.content}}</el-button>
                       </template>
 <!--                      <el-button v-if="item && item.content" size="mini" link :type="item.type" :icon="item.icon" v-show="item && item.showName ? item.showVal.includes(scope.row[item.showName]) : true" @click="handleClick(item, scope.row)" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>-->
                       <!--                    </el-tooltip>-->
@@ -299,7 +299,7 @@
             }
             return true;
           } else {
-            if (!checkPermi([buttonConfig.hasPermi])) {
+            if (buttonConfig && buttonConfig.hasPermi && !checkPermi([buttonConfig.hasPermi])) {
               return false;
             }
             if (buttonConfig.showName) {
diff --git a/src/router/index.js b/src/router/index.js
index 6270c58..b5bc764 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -364,7 +364,7 @@ export const dynamicRoutes = [
     path: '/resource/serverRegister/edit',
     component: Layout,
     hidden: true,
-    permissions: ['resource:serverRegister:add', 'resource:serverRegister:edit', 'resource:serverRegister:details'],
+    permissions: ['resource:serverRegister:add', 'resource:serverRegister:edit'],
     children: [
       {
         path: ':id?',
@@ -374,6 +374,21 @@ export const dynamicRoutes = [
       }
     ]
   },
+  //  服务器管理详情
+  {
+    path: '/resource/serverRegister/details',
+    component: Layout,
+    hidden: true,
+    permissions: ['resource:serverRegister:details'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/resource/serverRegister/details'),
+        name: 'serverRegisterDetails',
+        meta: { title: '服务器管理详情', activeMenu: '/resource/serverRegister' }
+      }
+    ]
+  },
   {
     path: '/resource/serverRegister/monitorChart',
     component: Layout,
diff --git a/src/views/resource/serverRegister/PPPoEConfig.vue b/src/views/resource/serverRegister/PPPoEConfig.vue
index 7d06625..c8d07cb 100644
--- a/src/views/resource/serverRegister/PPPoEConfig.vue
+++ b/src/views/resource/serverRegister/PPPoEConfig.vue
@@ -1,47 +1,53 @@
 <template>
   <div style="padding: 0 30px;">
-    <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px'}" @fnClick="callback">
+    <el-button type="primary" style="position: absolute;right: 20px;z-index: 9999;" @click="formSubmit()">{{readonly ? '编辑' : '保存'}}</el-button>
+    <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px', buttonGroup: []}" @fnClick="callback">
       <template #tempPoeConfigRules="{ field, model, formModel }">
-        <el-button type="primary" size="mini">导入</el-button>
-        <el-button type="info" size="mini">模板下载</el-button>
-        <div style="margin-left: -120px">
-          <div v-for="(item,index) of contentList" class="w100">
-            <span class="disInlineBlock" style="width: 20px;">{{index + 1}}.</span>
-            <span class="disInlineBlock" style="width: calc((100% - 45px)/4)">VLANID：<el-input-number v-model="item.oneNum" style="width: calc(100% - 68px)" :controls="false" size="small" placeholder="请输入数字" /></span>
-            <span class="disInlineBlock" style="width: calc((100% - 45px)/4)"><span class="disInlineBlock">IPv4地址：</span><el-input v-model="item.ipv4Addr" style="width: calc(100% - 75px)" class="disInlineBlock" size="small" placeholder="如1.1.1.1" /></span>
-            <span class="disInlineBlock" style="width: calc((100% - 45px)/4)">IPv4掩码位数：<el-input-number v-model="item.ipv4Num" style="width: calc(100% - 103px)" :controls="false" :min="1" :max="32" size="small" placeholder="请输入1-32" /></span>
-            <span class="disInlineBlock" style="width: calc((100% - 45px)/4)"><span class="disInlineBlock">IPv4网关：</span><el-input v-model="item.ipv4Graw" style="width: calc(100% - 75px)" class="disInlineBlock" size="small" placeholder="如1.1.1.1" /></span>
-            <el-button style="width: 25px;padding: 9px 0;" type="primary" size="small" :icon="index === 0 ? 'el-icon-plus' : 'el-icon-minus'" @click="handleChange(index)"></el-button>
+        <div v-if="!readonly">
+          <el-upload
+            class="disInlineBlock mr20"
+            action=""
+            :auto-upload="false"
+            :on-change="handleFileUpload"
+            accept=".xls, .xlsx, .numbers"
+            :show-file-list="false">
+            <el-button size="mini" type="primary">导入</el-button>
+          </el-upload>
+<!--          <el-button type="primary" size="mini" >导入</el-button>-->
+          <el-button type="info" size="mini" @click="downloadTemp">模板下载</el-button>
+          <div style="margin-left: -120px">
+            <TableList id="tabHeadCenter" ref="tabRef" :columns="columns" :config="config" :queryParams="{total: 0}" :tableList="roleList"  @fnClick="callback">
+              <template #tempEditModel="{ row, valueKey, column }">
+                <el-input-number v-if="column.type === 'number'" v-model="row[valueKey]" class="w100" :controls="false" :min="column.min || undefined" :max="column.max || undefined"  size="small" :placeholder="column.placeholder || ''" />
+                <el-input v-else v-model="row[valueKey]" class="w100" size="small" :placeholder="column.placeholder" />
+              </template>
+            </TableList>
           </div>
         </div>
+        <div v-else style="margin-left: -120px">
+          <TableList ref="tabRef" :columns="columns" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :queryParams="{total: 0}" :tableList="roleList"></TableList>
+        </div>
       </template>
     </Form>
   </div>
 </template>
 
 <script>
+  import * as XLSX from 'xlsx';
   import Form from '@/components/form/index.vue';
+  import TableList from '@/components/table/index.vue';
   export default {
     name: "PPPoEConfig",
-    components: {Form},
+    components: {Form, TableList},
     props: {
-      open: {
-        type: String,
-        default: ''
-      },
-      dialogRowData: {
-        type: Object,
-        default: () => {}
+      modelVal: {
+        type: Array,
+        default: () => []
       }
     },
     watch: {
-      open: {
+      modelVal: {
         handler(val) {
-          if (val === 'type_true') {
-          } else if (val === 'type_false') {
-            // 清空form
-            this.$refs['formRef'].$refs.ruleForm.resetFields();
-          }
         },
         deep: true,
         immediate: true
@@ -51,38 +57,69 @@
       return {
         ruleForm: {},
         formList: [],
-        contentList: [{oneNum: '',ipv4Addr: '', ipv4Num: '', ipv4Graw: ''}]
+        readonly: true,
+        contentList: [{oneNum: '',ipv4Addr: '', ipv4Num: '', ipv4Graw: ''}],
+        roleList: [],
+        columns: {},
+        config: {
+          colHiddenCheck: true, colTopHiddenIcon: true,
+          tableButton: {
+            line: [
+              {content: '新增', fnCode: 'add', type: 'text'},
+              {content: '删除', fnCode: 'delete', type: 'text', showName: 'showNum', showVal: '1'},
+            ]
+          }
+        },
       }
     },
     created() {
-      this.fnFormList();
+      this.fnFormList(this.readonly);
     },
     methods: {
       // formList集合
-      fnFormList() {
+      fnFormList(readonly) {
         this.formList = [{
-          config: {title: ' ', labelWidth: '140px', colSpan: 'disBlock'},
+          config: {title: '', labelWidth: '140px', readonly: readonly},
           controls: {
             id: {label: 'ID', hidden: true},
-            businessName: {label: '启用PPPoE', span: 12, type: 'radio', options: [], required: true},
-            deployDevice: {label: 'PPPoE配置方式', span: 12, type: 'select', options: [], required: true},
-            deploy: {label: 'PPPoE网卡', span: 12, type: 'select', options: [], required: true},
+            businessName: {label: '启用PPPoE', span: readonly ? 12 : 24, type: 'radio', options: [], required: true},
+            deployDevice: {label: 'PPPoE配置方式', span: readonly ? 10 : 24, type: 'select', options: [], required: true},
+            deploy: {label: 'PPPoE网卡', span: readonly ? 12 : 24, type: 'select', options: [], required: true},
             deploed: {label: 'PPPoE配置规则', span: 24, slotName: 'tempPoeConfigRules'},
           }
         }];
+        this.columns = {
+          id: { label: `ID`,width: '50'},
+          serialNumber: { label: `序号`, width: '50',visible: true},
+          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: '120', visible: true, placeholder: '请输入', slotName: readonly ? null : 'tempEditModel'},
+          macAddress: { label: `MAC地址`, minWidth: '120', visible: readonly},
+          status: { label: `连通状态`, minWidth: '100', visible: readonly},
+        };
       },
-      // 按钮事件
-      handleChange(indexNum) {
-        if (indexNum === 0) {
-          this.contentList.push({oneNum: '',ipv4Addr: '', ipv4Num: '', ipv4Graw: ''});
+      formSubmit() {
+        this.ruleForm = {name: '12'};
+        if (!this.readonly) {
+          console.log('submit=====',this.roleList,this.ruleForm);
         } else {
-          this.contentList.splice(indexNum, 1);
+          this.roleList = this.roleList.length > 0 ? this.roleList : [{serialNumber: '1', vlanId: undefined, ipv4Address: undefined, ipv4MaskBits: undefined, ipv4Gateway: undefined, bandwidthResult: undefined}];
         }
+        this.readonly = !this.readonly;
+        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});
+              break;
+            case 'delete':
+              console.log('dataVal===',dataVal);
+              this.roleList.splice(dataVal.serialNumber - 1, 1);
             case 'submit':
               console.log('contentList===',this.contentList, 'dataVal===',dataVal);
               // this.$emit("dialogResult", {open: false});
@@ -94,10 +131,104 @@
           }
         }
       },
+      downloadTemp() {
+        this.download('http://172.16.15.51:9300/statics/csvfile/macvlan_vlan.csv', {
+        }, `template_${new Date().getTime()}.xlsx`)
+      },
+      handleFileUpload(file) {
+        console.log('file====',file);
+        // 如果是使用 Element UI 的 el-upload 组件，文件对象是 file.raw
+        const actualFile = file.raw || file; // 兼容两种获取方式[1,3](@ref)
+
+        if (!actualFile) {
+          return;
+        }
+
+        const fileReader = new FileReader();
+
+        fileReader.onload = (e) => {
+          try {
+            // 1. 获取读取结果，并将其转换为 Uint8Array
+            const data = new Uint8Array(e.target.result);
+            // 2. 使用 xlsx 解析数据
+            const workbook = XLSX.read(data, { type: 'array' });
+            // 3. 获取第一个工作表（Sheet）的名称
+            const firstSheetName = workbook.SheetNames[0];
+            // 4. 根据工作表名称获取对应的工作表对象
+            const worksheet = workbook.Sheets[firstSheetName];
+            // 5. 将工作表数据转换为 JSON 格式
+            // header: 1 表示按数组格式解析，包含表头；默认按对象格式（第一行为键名）
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+            // 或者使用对象格式（更常用，第一行作为对象的键）[3,6](@ref)
+            // const jsonData = XLSX.utils.sheet_to_json(worksheet);
+
+            // 6. 将解析后的数据存储在组件的 data 中
+            // this.excelData = jsonData;
+            console.log('解析到的Excel数据：', jsonData);
+
+            // 可以在这里调用后续处理方法，如数据校验、发送到后端等
+            this.processExcelData(jsonData);
+
+          } catch (error) {
+            console.error('解析Excel文件时出错：', error);
+            this.$message.error('文件解析失败，请检查文件格式是否正确。');
+          }
+        };
+
+        fileReader.onerror = (error) => {
+          console.error('读取文件失败：', error);
+          this.$message.error('读取文件失败，请重试。');
+        };
+
+        // 开始以 ArrayBuffer 格式读取文件
+        fileReader.readAsArrayBuffer(actualFile);
+      },
+      processExcelData(data) {
+        // 在这里对解析出的数据进行进一步处理
+        // 例如：数据清洗、验证、转换格式等[2](@ref)
+        if (data.length > 0) {
+          let oldDataList = this.oldTableList();
+          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'};
+              arr.forEach((val, valIndex) => {
+                obj[val] = item[valIndex];
+                // console.log('val===',val, valIndex);
+                // arrList.push(obj);
+              });
+              // console.log('item===',item, 'obj===', obj);
+            }
+          });
+          // console.log('arrList===',arrList);
+          this.roleList = oldDataList.concat(arrList);
+        } else {
+          this.$message.warning('导入的文件中没有数据。');
+        }
+      },
+      oldTableList() {
+        let contentList = [];
+        this.roleList.forEach(item => {
+          let indexNum = 0;
+          Object.keys(item).some(val => {
+            if (val !== 'serialNumber' && val !== 'showNum' && item[val]) {
+              indexNum = 1;
+              return;
+            }
+          });
+          if (indexNum === 1) {
+            contentList.push(item);
+          }
+        });
+        return contentList;
+      },
     }
   }
 </script>
 
 <style scoped>
-
+  ::v-deep #tabHeadCenter .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+   text-align: center!important;
+ }
 </style>
diff --git a/src/views/resource/serverRegister/details.vue b/src/views/resource/serverRegister/details.vue
new file mode 100644
index 0000000..a2190d2
--- /dev/null
+++ b/src/views/resource/serverRegister/details.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="app-container">
+    <!--  header box  -->
+    <div>
+      <div v-for="item of headerList" class="headerBox">
+        <div class="boxChild w100 h100">
+          <div class="disInlineBlock w80" style="padding-left: 10px;">
+            <div>{{item.name}}</div>
+            <div class="mt20" style="font-size: 2rem;">{{item.num}}</div>
+          </div>
+          <div class="disInlineBlock w20 " style="vertical-align: top;">
+            <img width="50" :src="item.imgUrl" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  form  -->
+    <div class="mt20">
+      <Form :formList="formList" :ruleFormData="ruleForm" :config=" {labelWidth: '92px', buttonGroup: []}" @fnClick="callback">
+        <!--   SN     -->
+        <template #tempClient="{field, model, formModel}">
+          {{model}}
+          <div class="disInlineBlock" style="margin: 0 20px;">
+            <dict-tag class="disInlineBlock ml10 mr10" :options="dict.type.rm_register_status" :value="formModel.registrationStatus"/>
+            <dict-tag class="disInlineBlock" :options="dict.type.rm_register_online_state" :value="formModel.onlineStatus"/>
+          </div>
+          <el-tag class="disInlineBlock dynamic-tag ml5" v-for="(tag, tagIndex) in formModel.remark" :closable="false" :disable-transitions="false">
+            {{ tag }}
+          </el-tag>
+        </template>
+        <!--    ip    -->
+        <template #tempIp1public="{field, model, formModel}">
+          {{model}}
+          <div class="disInlineBlock" style="color: #0052d9;">
+            <span class="disInlineBlock" style="margin: 0 20px;">{{formModel.ip1Province}}</span>
+            <span>{{formModel.ip1Isp}}</span>
+          </div>
+        </template>
+        <!--    不同label宽度    -->
+        <template #dynamicLabelWidth="{field, model, formModel}">
+         <div class="disInlineBlock" style="padding-right: 12px;color: #C0C4CC;font-weight: 700;" :style="field.inlineSty">{{field.label}}：</div>
+          {{model}}
+        </template>
+        <!--    最新版本号    -->
+        <template #tempMaxVersion="{ field, model, formModel }">
+          {{model}}
+          <div v-if="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>
+        </template>
+      </Form>
+    </div>
+    <!--  tab___echarts/form/table  -->
+    <div class="mt20">
+      <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 :activeName="activeName" :chartModelList="[]"></serRegisTabsChart>
+          </div>
+          <!--    网卡信息、FRP信息、收益查看、虚拟网卡信息     -->
+          <div v-if="activeName === '网卡信息' || activeName === 'FRP信息' || activeName === '收益查看' || activeName === '虚拟网卡信息'">
+            <serRegisFormOrTable :activeName="activeName" :modelVal="modelVal"></serRegisFormOrTable>
+          </div>
+          <!--    PPPoE配置     -->
+          <div v-if="activeName === 'PPPoE配置'">
+            <PPPoEConfig :modelVal="modelVal"></PPPoEConfig>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Form from '@/components/form/index.vue';
+  import cpuUseImg from '@/assets/images/cpuUse.svg';
+  import bandWImg from '@/assets/images/bandwidth.svg';
+  import cpuImg from '@/assets/images/cpu.svg';
+  import memoryImg from '@/assets/images/memory.svg';
+  import {getHandle} from "@/api/disRevenue/resource";
+  import serRegisFormOrTable from './formOrTable';
+  import serRegisTabsChart from './tabsChart';
+  import PPPoEConfig from "./PPPoEConfig";
+  export default {
+    name: "server_register_details",
+    components: {PPPoEConfig, Form, serRegisFormOrTable, serRegisTabsChart},
+    dicts: ['rm_register_status','rm_register_online_state'],
+    data() {
+      return {
+        ruleForm: {},
+        formList: [],
+        modelVal: [],
+        paramsData: {},
+        headerList: [
+          {name: 'CPU使用率(%)', num: '30', imgUrl: cpuUseImg},
+          {name: '带宽', num: '10000Mbps', imgUrl: bandWImg},
+          {name: 'CPU', num: '32核', imgUrl: cpuImg},
+          {name: '内存', num: '32G', imgUrl: memoryImg},
+        ],
+        activeName: '网卡流量监控',
+        tabList: [
+          {name: '网卡流量监控'}, {name: '系统监控'}, {name: '挂载文件系统监控'}, {name: '硬盘设备监控'}, {name: '网卡信息'},
+          {name: '虚拟网卡信息'}, {name: '收益查看'}, {name: 'FRP信息'}, {name: 'PPPoE配置'}
+        ],
+        echartList: {}
+      }
+    },
+    created() {
+      this.paramsData = this.$route && this.$route.query;
+      if (this.paramsData && this.paramsData.id) {
+        this.getFormDataList(this.paramsData.id);
+      }
+      if (this.paramsData && this.paramsData.target) {
+        this.activeName = this.paramsData.target;
+      }
+      this.fnFormList();
+    },
+    methods: {
+      fnFormList(objVal) {
+        this.formList = [{
+          config: {title: '',readonly: true},
+          controls: {
+            id: {label: 'ID',hidden: true},
+            clientId: {label: 'SN', span: 24, slotName: 'tempClient'},
+            // registrationStatus: {label: '', span: 3, type: 'select', options: this.dict.type.rm_register_status},
+            // onlineStatus: {label: '', span: 3, type: 'select', options: this.dict.type.rm_register_online_state},
+            // remark: {label: '', span: 14, type: 'dynamicTags'},
+            ip1PublicIp: {label: 'IP', span: 24, slotName: 'tempIp1public'},
+          }
+          }, {
+          config: {title: '标识信息',readonly: true},
+          controls: {
+            id: {label: 'ID',hidden: true},
+            businessName: {label: '业务名称', span: 8, type: 'input'},
+            logicalNodeId: {label: '逻辑节点标识', span: 4, inlineSty: 'margin-left: -18px;', labelWidthNull: true, slotName: 'dynamicLabelWidth'},
+            hardwareSn: {label: '设备SN', span: 12, type: 'input'},
+            machineCode: {label: '金山machineCode', span: 24, labelWidthNull: true, slotName: 'dynamicLabelWidth'},
+          }
+          },{
+            config: {title: '时间信息',readonly: true},
+            controls: {
+              id: {label: 'ID',hidden: true},
+              createTime: {label: '注册时间', span: 8, type: 'input'},
+              onboardTime: {label: '上机时间', span: 8, type: 'input'},
+            }
+          },{
+            config: {title: '其他',readonly: true},
+            controls: {
+              id: {label: 'ID',hidden: true},
+              agentVersion: {label: 'agent版本', span: 8, slotName: 'tempMaxVersion'},
+              heartbeatInterval: {label: '心跳间隔(s)', span: 6, type: 'input'},
+              heartbeatCount: {label: '心跳次数', span: 6, type: 'input'},
+            }
+        }];
+      },
+      // 获取详情
+      getFormDataList(id) {
+        let params = id;
+        getHandle(params).then(val => {
+          if (val && val.data) {
+            val.data['remark'] = val.data && val.data['remark'] ? val.data['remark'].split(',') : null;
+            this.ruleForm = val && val.data;
+          }
+        }).catch(() => {
+          this.$modal.msgError("操作失败")
+        });
+      },
+      // 更新到最新版本
+      upMaxVersion(model) {
+        let content = '<p style="font-size: 1rem;font-weight: 600;">升级警告</p>' +
+          '<p style="height: 0px;margin-bottom: 50px;">未找到最新版本xxx的下载地址，请到【AGENT更新】中添加一条版本xxx的更新策略，才可自动进行升级更新';
+        this.$modal.confirm(content, {submitTitle: '去添加'}).then(() => {
+          this.$router.push("/resource/agentUpdate");
+        }).catch(() => {});
+      },
+      // tab栏点击事件
+      handleClick(tab, event) {
+        if (this.activeName === '虚拟网卡信息') {
+          this.modelVal = [
+            {title: 'eth0.24', formModel: {interfaceName: '112'}},
+            {title: 'eth0.25', formModel: {interfaceName: '334'}},
+          ];
+        } else if (this.activeName === '网卡信息') {
+          this.modelVal = [this.ruleForm];
+        }
+      },
+      // 监听事件
+      callback(result, dataVal, formVal) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'cancel':
+              // if (this.paramsData && this.paramsData.type === 'alarmLog') {
+              //   // this.$router.push("/resource/alarmLog");
+              //   history.go(-1);
+              // } else {
+              //   this.$router.push("/resource/serverRegister");
+              // }
+              break;
+            default:
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .headerBox {
+    display: inline-block;
+    width: 25%;
+    height: 120px;
+    padding: 0 10px;
+  }
+  .boxChild {
+    border: 1px solid #ddd;
+    padding: 15px;
+  }
+</style>
diff --git a/src/views/resource/serverRegister/formOrTable.vue b/src/views/resource/serverRegister/formOrTable.vue
new file mode 100644
index 0000000..c93adc3
--- /dev/null
+++ b/src/views/resource/serverRegister/formOrTable.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="w100 h100">
+    <TableList v-if="activeName === '收益查看'" class="w100 h100" :columns="columns" :config="config" :queryParams="queryParams" :tableList="modelVal" @fnClick="callback">
+      <template #tempDay="{ valueKey, row, column }">
+        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime}}</span>
+      </template>
+      <template #tempMonth="{ valueKey, row, column }">
+        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime.slice(0, 7)}}</span>
+      </template>
+    </TableList>
+    <div v-else-if="activeName === '虚拟网卡信息'">
+      <el-collapse v-model="activeShowList">
+        <template v-for="(val, index) of modelVal">
+          <el-collapse-item :title="`【${val && val.title || ''}】${val && val.serverIp || ''}`" :name="index">
+            <div class="mt10 w100">
+              <div class="w100 plr-20" style="font-size: 14px">
+                <div v-for="(item,key,index) of collFormList || []" :key="`${key}-${index}`"  class="disInlineBlock p10" style="width: calc(100% / 3);">
+                  <div class="disInlineBlock" style="width: 120px;color: #C0C4CC;">{{item}}</div>
+                  <div style="width: calc(100% - 120px);vertical-align: top;" class="disInlineBlock">{{val && val.formModel[key] || '-'}}</div>
+                </div>
+              </div>
+            </div>
+          </el-collapse-item>
+        </template>
+      </el-collapse>
+    </div>
+    <Form v-else :formList="formList" :ruleFormData="modelVal[0]" :config=" {labelWidth: '140px', buttonGroup: []}" @fnClick="callback"></Form>
+  </div>
+</template>
+
+<script>
+  import Form from '@/components/form/index.vue';
+  import TableList from '@/components/table/index.vue';
+  export default {
+    name: "serRegisFormOrTable",
+    components: {Form, TableList},
+    dicts: ['frpc_connection_status','frpc_status'],
+    props: {
+      activeName: {
+        type: String,
+        default: ''
+      },
+      modelVal: {
+        type: Array,
+        default: () => []
+      }
+    },
+    watch: {
+      activeName: {
+        handler(val) {
+          if (val && (val !== '收益查看' && val !== '虚拟网卡信息')) {
+            this.formListData(val);
+          }
+        },
+        deep: true,
+        immediate: true
+      },
+    },
+    data() {
+      return {
+        activeShowList: [0,1,2,3,4,5,6,7,8,9],
+        formList: [],
+        // 列显隐信息
+        columns: {
+          id: {label: `ID`, width: '50'},
+          clientId: {label: `ClientID`, minWidth: '280', visible: true},
+          businessName: {label: `业务名称`, minWidth: '150', visible: true},
+          bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
+          bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
+          avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
+        },
+        config: {
+          colHiddenCheck: true, colTopHiddenIcon: true,
+          tableButton: {
+            line: [
+              {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
+            ]
+          }
+        },
+        queryParams: {
+          pageNum: 1,
+          pageSize: 8,
+          total: 0,
+        },
+        collFormList: {
+          interfaceName: '接口名称', interfaceType: '接口类型', macAddress: 'MAC地址',publicIp: '公网地址',
+          isp: '运营商', province: '省',  city: '市', ipv4Address: 'IPv4地址', ipv4Gateway: 'IPv4网关', ipv6Address: 'IPv6全球单播地址'
+        },
+      }
+    },
+    created() {
+    },
+    methods: {
+      // 网卡信息
+      formListData(val){
+        if (val === '网卡信息') {
+          this.formList = [{
+            config: {title: '', readonly: true},
+            controls: {
+              id: {label: 'ID',hidden: true},
+              ip1Isp: {label: 'IP1-运营商', span: 8, type: 'input'},
+              ip1Province: {label: 'IP1-省', span: 8, type: 'input'},
+              ip1City: {label: 'IP1-市', span: 8, type: 'input'},
+              ip1PublicIp: {label: 'IP1-业务公网', span: 8, type: 'input'},
+              ip1InterfaceName: {label: 'IP1-接口名称', span: 8, type: 'input'},
+              ip1MacAddress: {label: 'IP1-mac地址', span: 8, type: 'input'},
+              ip1InterfaceType: {label: 'IP1-接口类型', span: 8, type: 'input'},
+              ip1Ipv4Address: {label: 'IP1-IPv4地址', span: 8, type: 'input'},
+              ip1Gateway: {label: 'IP1-网关', span: 8, type: 'input'},
+              ip2Isp: {label: 'IP2-运营商', span: 8, type: 'input'},
+              ip2Province: {label: 'IP2-省', span: 8, type: 'input'},
+              ip2City: {label: 'IP2-市', span: 8, type: 'input'},
+              ip2PublicIp: {label: 'IP2-业务公网', span: 8, type: 'input'},
+              ip2InterfaceName: {label: 'IP2-接口名称', span: 8, type: 'input'},
+              ip2MacAddress: {label: 'IP2-mac地址', span: 8, type: 'input'},
+              ip2InterfaceType: {label: 'IP2-接口类型', span: 8, type: 'input'},
+              ip2Ipv4Address: {label: 'IP2-IPv4地址', span: 8, type: 'input'},
+              ip2Gateway: {label: 'IP2-网关', span: 8, type: 'input'},
+              ip3Isp: {label: 'IP3-运营商', span: 8, type: 'input'},
+              ip3Province: {label: 'IP3-省', span: 8, type: 'input'},
+              ip3City: {label: 'IP3-市', span: 8, type: 'input'},
+              ip3PublicIp: {label: 'IP3-业务公网', span: 8, type: 'input'},
+              ip3InterfaceName: {label: 'IP3-接口名称', span: 8, type: 'input'},
+              ip3MacAddress: {label: 'IP3-mac地址', span: 8, type: 'input'},
+              ip3InterfaceType: {label: 'IP3-接口类型', span: 8, type: 'input'},
+              ip3Ipv4Address: {label: 'IP3-IPv4地址', span: 8, type: 'input'},
+              ip3Gateway: {label: 'IP3-网关', span: 8, type: 'input'},
+              mgmtIsp: {label: '管理网-运营商', span: 8, type: 'input'},
+              mgmtProvince: {label: '管理网-省', span: 8, type: 'input'},
+              mgmtCity: {label: '管理网-市', span: 8, type: 'input'},
+              mgmtPublicIp: {label: '管理网-业务公网', span: 8, type: 'input'},
+              mgmtInterfaceName: {label: '管理网-接口名称', span: 8, type: 'input'},
+              mgmtMacAddress: {label: '管理网-mac地址', span: 8, type: 'input'},
+              mgmtInterfaceType: {label: '管理网-接口类型', span: 8, type: 'input'},
+              mgmtIpv4Address: {label: '管理网-IPv4地址', span: 8, type: 'input'},
+              mgmtGateway: {label: '管理网-网关', span: 8, type: 'input'},
+            }
+          }];
+        } else if (val === 'FRP信息') {
+          this.formList = [{
+            config: {title: '', readonly: true},
+            controls: {
+              id: {label: 'ID',hidden: true},
+              frpcConnectionStatus: { label: `FRP连接地址生成状态`,span: 8, type: 'select', options: this.dict.type.frpc_connection_status},
+              frpcCreateTime: { label: `链接生成时间`,span: 8, type: 'datetime'},
+              frpcStatus: { label: `FRPC服务状态`,span: 8, options: this.dict.type.frpc_status},
+              frpcServerAddr: { label: `FRPC_serverAddr`, span: 8, type: 'input'},
+              frpcServerPort: { label: `FRPC_serverPort`,span: 8, type: 'input'},
+              frpcName: { label: `FRPC_name`,span: 8, type: 'input'},
+              frpcType: { label: `FRPC_tcp`,span: 8, type: 'input'},
+              frpcLocalIp: { label: `FRPC_localIP`,span: 8, type: 'input'},
+              frpcLocalPort: { label: `FRPC_localPort`,span: 8, type: 'input'},
+            }
+          }];
+        }
+      },
+      callback(result, rowData, selectChange, selectList) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            // case 'calculate':
+            //   let fnType = recalBandWidth;
+            //   if (rowData && rowData.bandwidthType === '4') {
+            //     fnType = avgDetailMsg;
+            //   }
+            //   fnType(rowData.id).then(res => {
+            //     this.getList();
+            //     this.$modal.msgSuccess("操作成功！");
+            //   }).catch(() => {});
+            //   break;
+            default:
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  ::v-deep .el-collapse-item__header {
+    background-color: #d4e3fc!important;
+    /*color: #fff!important;*/
+    padding-left: 20px;
+    font-size: 1rem;
+  }
+</style>
diff --git a/src/views/resource/serverRegister/index.vue b/src/views/resource/serverRegister/index.vue
index 268afa7..776f67e 100644
--- a/src/views/resource/serverRegister/index.vue
+++ b/src/views/resource/serverRegister/index.vue
@@ -311,6 +311,7 @@
                     {content: '取消闪烁', fnCode: 'cancelFlash', type: 'text', showName: 'alarmFlag', showVal: 'true', icon: 'el-icon-magic-stick', hasPermi: 'resource:serverRegister:cancelFlash'},
                     {content: '生成FRP连接地址', fnCode: 'createFrpAddr', type: 'text', showName: 'frpcConnectionStatus', showVal: ['0', null], icon: 'el-icon-link', hasPermi: 'resource:serverRegister:createFrpAddr'},
                     {content: '显示FRP连接地址', fnCode: 'showFrpAddr', type: 'text', showName: 'frpcConnectionStatus', showVal: ['1','2'], icon: 'el-icon-link', hasPermi: 'resource:serverRegister:showFrpAddr'},
+                    {content: 'PPPoE配置', fnCode: 'poeConfig', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:poeConfig'},
                   ]
                 }
                 // {content: '注册', fnCode: 'enroll', showName: 'registrationStatus', showVal: '0', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:register:enroll'},
@@ -549,10 +550,16 @@
                 break;
               case 'details':
                 this.$router.push({
-                  path:'/resource/serverRegister/edit',
+                  path:'/resource/serverRegister/details',
                   query: {id: rowData.id, readonly: true}
                 });
                 break;
+              case 'poeConfig':
+                this.$router.push({
+                  path:'/resource/serverRegister/details',
+                  query: {id: rowData.id, readonly: true, target: 'PPPoE配置'}
+                });
+                break;
               case 'echartView':
                 this.$router.push({
                   path:'/resource/serverRegister/monitorChart',
diff --git a/src/views/resource/serverRegister/tabsChart.vue b/src/views/resource/serverRegister/tabsChart.vue
new file mode 100644
index 0000000..b8f80b8
--- /dev/null
+++ b/src/views/resource/serverRegister/tabsChart.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="w100 h100">
+    <div class="w100" style="height: 40px;">
+      <el-date-picker
+        v-model="timeList"
+        :style="{width: '360px!important', marginRight: '10px'}"
+        type="datetimerange"
+        :disabled="!timeShow"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        range-separator="至"
+        format="yyyy-MM-dd HH:mm:ss"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        @change="(val) => dateChange(val)"/>
+      <el-checkbox v-model="timeShow">选择时间</el-checkbox>
+      <!--   不同条时间件切换   -->
+      <el-radio-group v-model="timeModel" size="medium" class="ml20" :disabled="timeShow" @input="radioTimeChange">
+        <el-radio-button v-for="item of radioTimeList" :label="item.value">{{item.name}}</el-radio-button>
+      </el-radio-group>
+      <!--   单双列切换   -->
+      <el-radio-group v-model="layoutModel" size="medium" class="ml20" style="float: right;" @input="radioLayouteChange">
+        <el-radio-button v-for="item of radioLayoutList" :label="item.value">{{item.name}}</el-radio-button>
+      </el-radio-group>
+    </div>
+    <template v-if="Object.keys(echartList).length > 0">
+      <div v-for="(item, key, index) of echartList" class="disInlineBlock mt20 mb20 plr-10" :style="`width: calc(100% / ${layoutModel}); height:200px;`">
+        <EchartsLine v-if="item && item.dataVal" :key="`chart-${key || ''}-${index}`" :lineData="item && item.dataVal || {}"
+                     :title="item && item.title || '图表数据'" class="w100 h100" style="border: 1.5px solid #cfcfcf;"
+                     :chartData="(valData, unit) => chartDataEvent(valData, item.fnEvent,val.title, unit)"></EchartsLine>
+      </div>
+    </template>
+    <div v-else class="w100 h100 flex-center disInlineBlock mt20 mb20 plr-10" :style="`width: calc(100% / ${layoutModel}); height:200px;background: #f5f7fa;`">
+      <div class="loading-placeholder">
+        <i class="el-icon-loading"></i>
+        <span>加载中...</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EchartsLine from "@/components/echartsList/line.vue";
+  export default {
+    name: "serRegisTabsChart",
+    components: {EchartsLine},
+    props: {
+      activeName: {
+        type: String,
+        default: ''
+      },
+      chartModelList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    watch: {
+      activeName: {
+        handler(val) {
+          this.$nextTick(() => {
+            let chartData = 1;
+            if (val && (val === '网卡流量监控' || val === '硬盘设备监控')) {
+              chartData = 2;
+            }
+            this.echartList = {};
+            this.chartListData(chartData);
+          });
+        },
+        deep: true,
+        immediate: true
+      },
+    },
+    data() {
+      return {
+        timeList: [],
+        timeShow: false,
+        radioTimeList: [{name: '近6小时', value: '6'}, {name: '近24小时', value: '24'}, {name: '昨天', value: '-1'}, {name: '今天', value: '1'}],
+        timeModel: '6',
+        radioLayoutList: [{name: '单列显示', value: '1'}, {name: '双列显示', value: '2'}],
+        layoutModel: '1',
+        echartList: {},
+        echartData: {
+          title: ' ',
+          dataVal: {
+            // titleVal: {textAlign: 'center'},
+            yAxisName: ' ',
+            gridTop: '30%',
+            legend: {top: '12%', left: '10%'},
+            hiddenTime: true,
+            lineXData: ['a','b','c','d','e'],
+            // unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
+            dataList: [{
+              name: '出战流量',
+              data: [1,2,3,4,5],
+            },{
+              name: '入站流量',
+              data: [6,7,8,9,10]
+            }]
+          }
+        },
+      }
+    },
+    created() {
+    },
+    methods: {
+      // 时间变化时
+      dateChange(val){
+        // this.currTimeList = {startTime: val[0], endTime: val[1]};
+        // this.getNetTraffic(this.paramsData.clientIdList);
+      },
+      // 时间按钮切换
+      radioTimeChange(val) {
+        this.timeModel = val;
+      },
+      // 单双列按钮切换
+      radioLayouteChange(val) {
+        this.layoutModel = val;
+        this.$nextTick(() => {
+          const resizeEvent = new Event('resize');
+          // 派发这个事件，这会触发所有已绑定的 window resize 监听器
+          window.dispatchEvent(resizeEvent);
+        });
+      },
+      chartListData(charNum) {
+        setTimeout(() => {
+          let echartsModel = JSON.parse(JSON.stringify(this.echartData));
+          if (charNum === 1) {
+            delete echartsModel['dataVal'].dataList;
+            echartsModel['dataVal'].data = [1,3,5,7,9];
+          }
+          this.echartList = {one: echartsModel, tow: echartsModel};
+        },200);
+      },
+      chartDataEvent(valData, funcName, tabName, unit) {
+        this.$emit("chartFnEvent", valData, funcName, tabName, unit);
+        // // 检查函数是否存在，避免报错
+        // if (typeof this[funcName] === 'function') {
+        //   // 调用实际函数，并传递参数（如选中的值、当前项）
+        //   // this[funcName]({startTime: valData[0], endTime: valData[1]});
+        // } else {
+        //   console.warn(`函数 ${funcName} 未定义`);
+        // }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    color: #1890ff!important;
+    background-color: unset!important;
+  }
+  .loading-placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 1.1rem;
+  }
+</style>