From ef09fe2a51aa260eb5339109ed8827c64e7f2d78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=8C=89=E6=97=B6=E5=90=83=E9=A5=AD?= <1273556223@qq.com>
Date: Fri, 16 Dec 2022 14:05:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/main.css                       |   1 +
 src/router/index.js                           | 352 ++++++++++--------
 src/views/IPSetting.vue                       |  41 +-
 src/views/IdManagement.vue                    | 104 +++++-
 src/views/StateOperation.vue                  | 147 +++++++-
 .../SystemSettings/ExportingSettings.vue      |  67 +++-
 src/views/SystemSettings/ImportSettings.vue   |  52 ++-
 .../InterfaceServerCertificates.vue           |  73 +++-
 .../SystemSettings/UDPServiceSettings.vue     |  36 +-
 src/views/SystemSettings/globalSettings.vue   |  36 +-
 src/views/general/HealthCheck.vue             |  37 +-
 src/views/logs.vue                            |  89 ++++-
 src/views/myId.vue                            |  33 +-
 13 files changed, 812 insertions(+), 256 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index a4be0a2c..a9fffcb7 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -105,6 +105,7 @@ a {
   left: 65px;
 }
 .container {
+  min-height: 100%;
   padding: 20px;    /* 控制主体部分与主体边框的距离 */
   background: #fff;
   border: 1px solid #ddd;
diff --git a/src/router/index.js b/src/router/index.js
index 7fa540f6..5e9dc3e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,12 +9,13 @@ VueRouter.prototype.push = function push(location) {
 }
 
 export default new VueRouter({
-  routes: [
-    {
-      path: '/',  // 程序启动默认路由
+  routes: [{
+      path: '/', // 程序启动默认路由
       component: () => import('@/components/common/Whole.vue'),
-      meta: { title: '整体页面布局' },
-      redirect: '/test1',  // 重定向到首页
+      meta: {
+        title: '整体页面布局'
+      },
+      redirect: '/test1', // 重定向到首页
       children: [
         // {
         //   path: '/Home',
@@ -24,170 +25,187 @@ export default new VueRouter({
         {
           path: '/test1',
           component: () => import('@/page/test1/index.vue'),
-          meta: { title: '一级菜单1' },
-          redirect: '/test1/test1-1',  // 该配置是若点击选择一级菜单时，默认选中并跳转到该一级菜单下的第一个二级菜单
-          children:[
-            {
+          meta: {
+            title: '一级菜单1'
+          },
+          redirect: '/test1/test1-1', // 该配置是若点击选择一级菜单时，默认选中并跳转到该一级菜单下的第一个二级菜单
+          children: [{
               path: 'test1-1',
               component: () => import('@/page/test1/test1-1.vue'),
-              meta: { title: '二级菜单1-1' },
+              meta: {
+                title: '二级菜单1-1'
+              },
             },
             {
               path: 'test1-2',
               component: () => import('@/page/test1/test1-2.vue'),
-              meta: { title: '二级菜单1-2' },
+              meta: {
+                title: '二级菜单1-2'
+              },
             },
             {
               path: 'test1-3',
               component: () => import('@/page/test1/test1-3.vue'),
-               meta: { title: '二级菜单1-3' },
+              meta: {
+                title: '二级菜单1-3'
+              },
             },
             {
               path: 'test1-4',
               component: () => import('@/page/test1/test1-4.vue'),
-              meta: { title: '二级菜单1-4' },
+              meta: {
+                title: '二级菜单1-4'
+              },
             },
             {
               path: 'test1-5',
               component: () => import('@/page/test1/test1-5.vue'),
-              meta: { title: '二级菜单1-5' },
+              meta: {
+                title: '二级菜单1-5'
+              },
             },
             {
-                path: 'index',
-                meta: { title: '分析' },
-                component: () => import ('@/views/index.vue')
-              }, 
-              {
-                path: 'AboutMachine',
-                name: 'AboutMachine',
-                meta: {
-                    title: '关于本机'
-                },
-                component: () =>
-                    import ('@/views/general/AboutMachine.vue'),
-            }, {
-                path: 'network',
-                name: 'network',
-                meta: {
-                    title: '网络'
-                },
-                component: () =>
-                    import ('@/views/general/network.vue'),
-            }, {
-                path: 'VPN',
-                name: 'VPN',
-                meta: {
-                    title: 'VPN'
-                },
-                component: () =>
-                    import ('@/views/general/VPN.vue'),
-            }, {
-                path: 'CustomOperations',
-                name: 'CustomOperations',
-                meta: {
-                    title: '自定义操作'
-                },
-                component: () =>
-                    import ('@/views/general/CustomOperations.vue'),
-            }, {
-                path: 'HealthCheck',
-                name: 'HealthCheck',
-                meta: {
-                    title: '健康检测'
-                },
-                component: () =>
-                    import ('@/views/general/HealthCheck.vue'),
+              path: 'index',
+              meta: {
+                title: '分析'
+              },
+              component: () => import('@/views/index.vue')
             },
             {
-                path: 'StateOperation',
-                name: 'StateOperation',
-                meta: {
-                    title: '运行状态'
-                },
-                component: () =>
-                    import ('@/views/StateOperation.vue'),
+              path: 'AboutMachine',
+              name: 'AboutMachine',
+              meta: {
+                title: '关于本机'
+              },
+              component: () =>
+                import('@/views/general/AboutMachine.vue'),
             }, {
-                path: 'interface',
-                name: 'interface',
-                meta: {
-                    title: '接口'
-                },
-                component: () =>
-                    import ('@/views/interface.vue'),
+              path: 'network',
+              name: 'network',
+              meta: {
+                title: '网络'
+              },
+              component: () =>
+                import('@/views/general/network.vue'),
             }, {
-                path: 'IPSetting',
-                name: 'IPSetting',
-                meta: {
-                    title: 'IP设置'
-                },
-                component: () =>
-                    import ('@/views/IPSetting.vue'),
+              path: 'VPN',
+              name: 'VPN',
+              meta: {
+                title: 'VPN'
+              },
+              component: () =>
+                import('@/views/general/VPN.vue'),
+            }, {
+              path: 'CustomOperations',
+              name: 'CustomOperations',
+              meta: {
+                title: '自定义操作'
+              },
+              component: () =>
+                import('@/views/general/CustomOperations.vue'),
+            }, {
+              path: 'HealthCheck',
+              name: 'HealthCheck',
+              meta: {
+                title: '健康检测'
+              },
+              component: () =>
+                import('@/views/general/HealthCheck.vue'),
             },
             {
-                path: 'globalSettings',
-                name: 'globalSettings',
-                meta: {
-                    title: '全局设置'
-                },
-                component: () =>
-                    import ('@/views/SystemSettings/globalSettings.vue'),
+              path: 'StateOperation',
+              name: 'StateOperation',
+              meta: {
+                title: '运行状态'
+              },
+              component: () =>
+                import('@/views/StateOperation.vue'),
             }, {
-                path: 'ExportingSettings',
-                name: 'ExportingSettings',
-                meta: {
-                    title: '关于本机——导出设置'
-                },
-                component: () =>
-                import ('@/views/SystemSettings/ExportingSettings.vue'),
-            },{
-                path: 'ImportSettings',
-                name: 'ImportSettings',
-                meta: {
-                    title: '关于本机——导入设置'
-                },
-                component: () =>
-                import ('@/views/SystemSettings/ImportSettings.vue'),
-            },{
-                path: 'InterfaceServerCertificates',
-                name: 'InterfaceServerCertificates',
-                meta: {
-                    title: '接口与服务器证书'
-                },
-                component: () =>
-                import ('@/views/SystemSettings/InterfaceServerCertificates.vue'),
-            },{
-                path: 'UDPServiceSettings',
-                name: 'UDPServiceSettings',
-                meta: {
-                    title: 'UDP服务设置'
-                },
-                component: () =>
-                import ('@/views/SystemSettings/UDPServiceSettings.vue'),
+              path: 'interface',
+              name: 'interface',
+              meta: {
+                title: '接口'
+              },
+              component: () =>
+                import('@/views/interface.vue'),
+            }, {
+              path: 'IPSetting',
+              name: 'IPSetting',
+              meta: {
+                title: 'IP设置'
+              },
+              component: () =>
+                import('@/views/IPSetting.vue'),
             },
             {
-                path: 'myId',
-                name: 'myId',
-                meta: {
-                    title: '我的账号'
-                },
-                component: () =>
-                    import ('@/views/myId.vue'),
-            }, {
-                path: 'IdManagement',
-                name: 'IdManagement',
-                meta: {
-                    title: '账号管理'
-                },
-                component: () =>
-                    import ('@/views/IdManagement.vue'),
+              path: 'globalSettings',
+              name: 'globalSettings',
+              meta: {
+                title: '全局设置'
+              },
+              component: () =>
+                import('@/views/SystemSettings/globalSettings.vue'),
             },
             {
-                path: 'logs',
-                name: 'logs',
-                meta: {
-                    title: '通知/日志'
-                },
-                component: () => import ('@/views/logs.vue')
+              path: 'ExportingSettings',
+              name: 'ExportingSettings',
+              meta: {
+                title: '关于本机——导出设置'
+              },
+              component: () =>
+                import('@/views/SystemSettings/ExportingSettings.vue'),
+            },
+            {
+              path: 'ImportSettings',
+              name: 'ImportSettings',
+              meta: {
+                title: '关于本机——导入设置'
+              },
+              component: () =>
+                import('@/views/SystemSettings/ImportSettings.vue'),
+            }, 
+            {
+              path: 'InterfaceServerCertificates',
+              name: 'InterfaceServerCertificates',
+              meta: {
+                title: '接口与服务器证书'
+              },
+              component: () =>
+                import('@/views/SystemSettings/InterfaceServerCertificates.vue'),
+            }, 
+            {
+              path: 'UDPServiceSettings',
+              name: 'UDPServiceSettings',
+              meta: {
+                title: 'UDP服务设置'
+              },
+              component: () =>
+                import('@/views/SystemSettings/UDPServiceSettings.vue'),
+            },
+            {
+              path: 'myId',
+              name: 'myId',
+              meta: {
+                title: '我的账号'
+              },
+              component: () =>
+                import('@/views/myId.vue'),
+            }, {
+              path: 'IdManagement',
+              name: 'IdManagement',
+              meta: {
+                title: '账号管理'
+              },
+              component: () =>
+                import('@/views/IdManagement.vue'),
+            },
+            {
+              path: 'logs',
+              name: 'logs',
+              meta: {
+                title: '通知/日志'
+              },
+              component: () => import('@/views/logs.vue')
             }
 
           ]
@@ -195,51 +213,65 @@ export default new VueRouter({
         {
           path: '/test2',
           component: () => import('@/page/test2/index.vue'),
-          meta: { title: '一级菜单2' },
-          redirect: '/test2/test2-1',     // 该配置是若点击选择父目录时，默认选中该父目录下的子路径页面
-          children:[
-            {
+          meta: {
+            title: '一级菜单2'
+          },
+          redirect: '/test2/test2-1', // 该配置是若点击选择父目录时，默认选中该父目录下的子路径页面
+          children: [{
               path: 'test2-1',
               component: () => import('@/page/test2/test2-1.vue'),
-              meta: { title: '二级菜单2-1' },
+              meta: {
+                title: '二级菜单2-1'
+              },
             },
             {
               path: 'test2-2',
               component: () => import('@/page/test2/test2-2.vue'),
-              meta: { title: '二级菜单2-2' },
+              meta: {
+                title: '二级菜单2-2'
+              },
             },
             {
               path: 'test2-3',
               component: () => import('@/page/test2/test2-3.vue'),
-              meta: { title: '二级菜单2-3' },
+              meta: {
+                title: '二级菜单2-3'
+              },
             },
           ]
         },
         {
           path: '/test3',
           component: () => import('@/page/test3/index.vue'),
-          meta: { title: '一级菜单3' },
+          meta: {
+            title: '一级菜单3'
+          },
           redirect: '/test3/test3-1',
-          children:[
-            {
+          children: [{
               path: 'test3-1',
               component: () => import('@/page/test3/test3-1.vue'),
-              meta: { title: '二级菜单3-1' }
+              meta: {
+                title: '二级菜单3-1'
+              }
             },
             {
               path: 'test3-2',
               component: () => import('@/page/test3/test3-2.vue'),
-              meta: { title: '二级菜单3-2' }
+              meta: {
+                title: '二级菜单3-2'
+              }
             },
           ]
         },
         {
-          path: '/i18n',  // 国际化组件
+          path: '/i18n', // 国际化组件
           component: () => import('@/components/common/I18n.vue'),
-          meta: { title: '国际化' }
+          meta: {
+            title: '国际化'
+          }
         },
         {
-          path: '/permission',  // 权限页面
+          path: '/permission', // 权限页面
           component: () => import('@/page/Permission.vue'),
           meta: {
             title: '权限测试',
@@ -249,19 +281,25 @@ export default new VueRouter({
         {
           path: '/404',
           component: () => import('@/page/404.vue'),
-          meta: { title: '404' }
+          meta: {
+            title: '404'
+          }
         },
         {
           path: '/403',
           component: () => import('@/page/403.vue'),
-          meta: { title: '403' }
+          meta: {
+            title: '403'
+          }
         },
       ]
     },
     {
-      path: '/Login',  // 登录页面
+      path: '/Login', // 登录页面
       component: () => import('@/page/Login.vue'),
-      meta: { title: '登录' }
+      meta: {
+        title: '登录'
+      }
     },
     {
       path: '*',
diff --git a/src/views/IPSetting.vue b/src/views/IPSetting.vue
index df410a3d..7d7fd18f 100644
--- a/src/views/IPSetting.vue
+++ b/src/views/IPSetting.vue
@@ -1,28 +1,51 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>FTP设置</p>
+      <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+
+      <el-form :model="form" label-position="left" label-width="110px" style="width:50%">
+        <el-form-item label="账号：">
+          <el-input placeholder="请输入账号名" v-model="form.ComponentPropsname" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="密码：">
+          <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="FTP：">
+          <el-input placeholder="请输入账号名" v-model="form.FTP" clearable></el-input>
+        </el-form-item>
+      </el-form>
+
+      <el-button type="primary" @cilck="Submit">修改</el-button>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      form: {
+        name: '',
+        password: '',
+        FTP: '',
+      }
+    }
+  },
+  methods:{
+    Submit() {
+      this.form;
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/IdManagement.vue b/src/views/IdManagement.vue
index df410a3d..7a2b768d 100644
--- a/src/views/IdManagement.vue
+++ b/src/views/IdManagement.vue
@@ -1,28 +1,114 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>账号管理</p>
+    <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <el-button @click="addAccountDialog = true" type="primary" style="margin-bottom: 10px;"><i class="el-icon-circle-plus-outline"
+          style="margin-right: 3px;"></i>新增</el-button>
+
+      <el-table :data="tableData" :height="tableHeight" border style="width: 100%">
+        <el-table-column align="center" prop="name" label="用户名称" width="180"></el-table-column>
+        <el-table-column align="center" prop="account" label="用户账号" width="180"></el-table-column>
+        <el-table-column align="center" prop="role" label="角色"></el-table-column>
+        <el-table-column align="center" prop="jurisdiction" label="权限"></el-table-column>
+        <el-table-column align="center" label="操作" width="160">
+          <template slot-scope="scope">
+            <el-button @click="edit(scope.row)" type="text" size="small" class="">编辑</el-button>
+            <el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button>
+            <el-button @click="clickDelete(scope.row)" type="text" size="small" class="el-icon-delete"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize"
+        layout="sizes, prev, pager, next" :total="totalNumber" style="padding-top: 10px;">
+      </el-pagination>
+
+      <el-dialog :title="dialogTitle" :visible.sync="addAccountDialog" width="30%">
+        <el-form label-position="left" label-width="80px" :model="formLabelAlign">
+          <el-form-item label="名称：">
+            <el-input v-model="formLabelAlign.name"></el-input>
+          </el-form-item>
+          <el-form-item label="账号：">
+            <el-input v-model="formLabelAlign.account"></el-input>
+          </el-form-item>
+          <el-form-item label="角色：">
+            <el-input v-model="formLabelAlign.role"></el-input>
+          </el-form-item>
+          <el-form-item label="权限：">
+            <el-input v-model="formLabelAlign.jurisdiction"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="addAccountDialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      addAccountDialog: false,
+      formLabelAlign: {
+        name: '',
+        account: '',
+        role: '',
+        jurisdiction: ''
+      },
+      tableData: [
+        {
+          name: 'admin',
+          account: '',
+          role: 'admin',
+          jurisdiction: '超级管理员'
+        }
+      ],
+      tableHeight: 0,
+      currentPage: 1,
+      pageSize: 100,
+      totalNumber: 1000,
+      tableHeight: 0,
+      dialogTitle: '新增'
+    }
+  },
+  created() {
+    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    this.tableHeight = windowHeight - 220;
+  },
+  methods: {
+    edit(scope) {
+      console.log(scope, '编辑');
+      this.dialogTitle = '编辑';
+      this.addAccountDialog = true;
+    },
+    showView(scope) {
+      console.log(scope, '查看');
+      this.dialogTitle = '查看';
+      this.addAccountDialog = true;
+    },
+    clickDelete(scope) {
+      console.log(scope, '删除');
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/StateOperation.vue b/src/views/StateOperation.vue
index df410a3d..6ad4a438 100644
--- a/src/views/StateOperation.vue
+++ b/src/views/StateOperation.vue
@@ -1,28 +1,159 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
+  <div class="content-box">
+    <div class="container">
+      <!-- <p>主体页面 1 - 2 </p>
     <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <h1>运行状态</h1>
+      <el-form :model="runningState" label-position="left" label-width="200px" style="width:70%">
+        <el-form-item label="类型：">{{ runningState.type }}</el-form-item>
+        <el-form-item label="版本：">{{ runningState.version }}</el-form-item>
+        <el-form-item label="当前系统时间：">{{ runningState.currentTime }}</el-form-item>
+        <el-form-item label="开始运行时间：">{{ runningState.startTime }}</el-form-item>
+        <el-form-item label="正常运行时长：">{{ runningState.runTime }}</el-form-item>
+      </el-form>
+
+      <h1 class="mar-top20">系统性能状态</h1>
+      <el-form :model="performance" label-position="left" label-width="200px" style="width:70%">
+        <el-form-item label="正常运行时长：">{{ performance.runTime }}</el-form-item>
+        <el-form-item label="平均Cpu利用率：">{{ performance.averageCpuUtilization }}</el-form-item>
+        <el-form-item label="Cpu利用率：">{{ performance.cpuUtilization }}</el-form-item>
+        <el-form-item label="Cpu温度：">{{ performance.cpuTemperature }}</el-form-item>
+        <el-form-item label="Cpu名称：">{{ performance.cpuName }}</el-form-item>
+        <el-form-item label="Gpu利用率：">{{ performance.gpuUtilization }}</el-form-item>
+        <el-form-item label="Gpu温度：">{{ performance.gpuTemperature }}</el-form-item>
+        <el-form-item label="使用的内存：">{{ performance.memoryUsage }}</el-form-item>
+        <el-form-item label="内存总数：">{{ performance.totalMemory }}</el-form-item>
+        <el-form-item label="已使用虚拟内存：">{{ performance.virtualMemoryUsed }}</el-form-item>
+        <el-form-item label="虚拟内存总计：">{{ performance.totalVirtualMemory }}</el-form-item>
+      </el-form>
+
+      <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
+        <el-table-column prop="mountingPoint" label="安装点">
+        </el-table-column>
+        <el-table-column prop="equipmentName" label="设备名称">
+        </el-table-column>
+        <el-table-column prop="occupancy" label="使用">
+          <template slot-scope="scope">
+            {{ scope.row.occupancy }}GB
+          </template>
+        </el-table-column>
+        <el-table-column prop="total" label="容量">
+          <template slot-scope="scope">
+            {{ scope.row.total }}GB
+          </template>
+        </el-table-column>
+      </el-table>
+
+
+      <h1 class="mar-top20">系统网络状态</h1>
+      <el-form :model="networkStatus" label-position="left" label-width="200px" style="width:70%">
+        <el-form-item label="互联网接入：">{{ networkStatus.internetAccess }}</el-form-item>
+        <el-form-item label="互联网延迟：">{{ networkStatus.internetDelay }}</el-form-item>
+        <el-form-item label="DNS访问：">{{ networkStatus.DNS }}</el-form-item>
+        <el-form-item label="本地VPN访问：">{{ networkStatus.VPNvisit }}</el-form-item>
+        <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPN }}</el-form-item>
+        <el-form-item label="服务器VPN访问：">{{ networkStatus.serverVPNOpen }}</el-form-item>
+      </el-form>
+
+      <el-table class="mar-top20" :data="mountingPointTable" border style="width: 100%">
+        <el-table-column prop="connect" label="连接">
+        </el-table-column>
+        <el-table-column prop="IP" label="IP地址">
+        </el-table-column>
+        <el-table-column prop="acceptor" label="接受">
+          <template slot-scope="scope">
+            {{ scope.row.occupancy }}K
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalReceived" label="收到的总数">
+          <template slot-scope="scope">
+            {{ scope.row.total }}GB
+          </template>
+        </el-table-column>
+        <el-table-column prop="transmission" label="传输">
+          <template slot-scope="scope">
+            {{ scope.row.total }}Kb/s
+          </template>
+        </el-table-column>
+        <el-table-column prop="transmissionTotal" label="传输的总数">
+          <template slot-scope="scope">
+            {{ scope.row.total }}MB
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      runningState: {
+        type: '',
+        version: '',
+        currentTime: '',
+        startTime: '',
+        runTime: '',
+      },
+      performance: {
+        runTime: '',
+        averageCpuUtilization: '',
+        cpuUtilization: '',
+        cpuTemperature: '',
+        cpuName: '',
+        gpuUtilization: '',
+        gpuTemperature: '',
+        memoryUsage: '',
+        totalMemory: '',
+        virtualMemoryUsed: '',
+        totalVirtualMemory: '',
+      },
+      mountingPointTable: [
+        {
+          mountingPoint: '2016-05-02',
+          equipmentName: '王小虎',
+          occupancy: '上海市普陀区金沙江路 1518 弄',
+          total: '上海市普陀区金沙江路 1518 弄',
+        },
+      ],
+      networkStatus: {
+        internetAccess: '',
+        internetDelay: '',
+        DNS: '',
+        VPNvisit: '',
+        serverVPN: '',
+        serverVPNOpen: '',
+      },
+      networkStatus: [
+        {
+          connect: '2016-05-02',
+          IP: '王小虎',
+          acceptor: '上海市普陀区金沙江路 1518 弄',
+          totalReceived: '上海市普陀区金沙江路 1518 弄',
+          transmission: '上海市普陀区金沙江路 1518 弄',
+          transmissionTotal: '上海市普陀区金沙江路 1518 弄',
+        },
+      ]
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
+
+.el-form-item {
+  margin-bottom: 0px;
+}
+
+.mar-top20 {
+  margin-top: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/SystemSettings/ExportingSettings.vue b/src/views/SystemSettings/ExportingSettings.vue
index df410a3d..00bf6214 100644
--- a/src/views/SystemSettings/ExportingSettings.vue
+++ b/src/views/SystemSettings/ExportingSettings.vue
@@ -1,28 +1,71 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
-      <i class="el-icon-edit"></i>
-      <i class="el-icon-share"></i>
-      <i class="el-icon-delete"></i>
+  <div class="content-box">
+    <div class="container">
+      <p>导出设置</p>
+      <!-- <div class="test-div">
+        <i class="el-icon-edit"></i>
+        <i class="el-icon-share"></i>
+        <i class="el-icon-delete"></i>
+      </div> -->
+      <el-form label-position="left" label-width="180px">
+        <el-form-item label="文件格式：">
+          <el-select v-model="value" placeholder="请选择导出文件格式">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="文件保存位置：">
+          <input type="file" id="file" hidden @change="fileChange" webkitdirectory>
+          <el-input placeholder="请输入内容" v-model="imgSavePath" class="input-with-select">
+            <el-button slot="append" icon="el-icon-folder" type="success" @click="btnChange"></el-button>
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <el-button class="el-icon-download" type="primary">导出</el-button>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      options: [
+        {
+          value: 'zip',
+          label: 'zip'
+        }, {
+          value: '7z',
+          label: '7z'
+        }
+      ],
+      value: 'zip',
+      imgSavePath: '',
+    }
+  },
+  methods: {
+    fileChange(e) {
+      try {
+        const fu = document.getElementById('file')
+        if (fu == null) return
+        this.imgSavePath = fu.files[0].path
+        console.log(fu.files)
+      } catch (error) {
+        console.debug('choice file err:', error)
+      }
+    },
+    btnChange() {
+      var file = document.getElementById('file')
+      file.click()
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/SystemSettings/ImportSettings.vue b/src/views/SystemSettings/ImportSettings.vue
index df410a3d..127b3764 100644
--- a/src/views/SystemSettings/ImportSettings.vue
+++ b/src/views/SystemSettings/ImportSettings.vue
@@ -1,28 +1,62 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>导入设置</p>
+      <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+
+      <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
+        :file-list="fileList" :auto-upload="false" @on-success="fileSuccess" @on-error="fileError" @on-progress="fileProgress">
+        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
+      </el-upload>
+
+      <div class="warning">
+        <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>范围1-8、默认6
+        将一个保存好的系统设置文件导入本系统。导入后将覆盖现有的所有分析和用户设置，并重启系统，未保存的数据可能会丢失，请谨慎使用.
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      fileList: [],
+    }
+  },
+  methods: {
+    submitUpload() {
+      this.$refs.upload.submit();
+      console.log(this.$refs.upload, '上传');
+    },
+    // 成功
+    fileSuccess(response, file, fileList) {
+      console.log(response, file, fileList, '成功');
+    },
+    // 失败
+    fileError(err, file, fileList){
+      console.log(err, file, fileList, '失败');
+    },
+    // 上传中
+    fileProgress(event, file, fileList){
+      console.log(event, file, fileList, '上传中');
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
+
+.warning {
+  margin-top: 10px;
+  width: 35%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/SystemSettings/InterfaceServerCertificates.vue b/src/views/SystemSettings/InterfaceServerCertificates.vue
index df410a3d..49d9f702 100644
--- a/src/views/SystemSettings/InterfaceServerCertificates.vue
+++ b/src/views/SystemSettings/InterfaceServerCertificates.vue
@@ -1,28 +1,83 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>用于REAST API的ssl web服务器证书</p>
+      <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <el-form :model="form" label-position="left" label-width="220px">
+        <el-form-item label="证书颁发者名称：">
+          {{ form.name1 }}
+        </el-form-item>
+        <el-form-item label="证书使用者名称：">
+          {{ form.name2 }}
+        </el-form-item>
+        <el-form-item label="证书有效时间：">
+          {{ form.startTime }}
+        </el-form-item>
+        <el-form-item label="证书到期时间：">
+          {{ form.endTime }}
+        </el-form-item>
+        <el-form-item label="证书被列入黑名单：">
+          {{ form.blacklist }}
+        </el-form-item>
+        <el-form-item label="自签名证书：">
+          {{ form.autograph }}
+        </el-form-item>
+        <el-form-item label="证书版本：">
+          {{ form.version }}
+        </el-form-item>
+      </el-form>
+
+      <el-button @click="showUpdateCertificate = true" type="primary">更新证书</el-button>
+
+      <el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
+        <el-row>
+          <el-col :span="6">
+            文件选择：
+          </el-col>
+          <el-col :span="18">
+            <el-upload action="https://jsonplaceholder.typicode.com/posts/">
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-col>
+        </el-row>
+
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
+        </span>
+      </el-dialog>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      form: {
+        name1: 'ParkingDetrctionCA',
+        name2: 'loc.rcesystems.cz',
+        startTime: '2019-12-02 22::17:47',
+        endTime: '2033-08-10 22::17:47',
+        blacklist: '否',
+        autograph: '否',
+        version: '3',
+      },
+      showUpdateCertificate: false,
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
+
+.el-form-item {
+  margin-bottom: 0px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/SystemSettings/UDPServiceSettings.vue b/src/views/SystemSettings/UDPServiceSettings.vue
index df410a3d..5b5573e3 100644
--- a/src/views/SystemSettings/UDPServiceSettings.vue
+++ b/src/views/SystemSettings/UDPServiceSettings.vue
@@ -1,28 +1,46 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>UPD服务设置</p>
+    <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <el-form :model="form" label-position="left" label-width="180px">
+        <el-form-item label="upd服务器端口：">
+          <el-input-number v-model="form.name" controls-position="right" :min="1"></el-input-number>
+        </el-form-item>
+
+        <el-form-item label="启用有效载荷：">
+          <el-switch v-model="form.delivery"></el-switch>
+        </el-form-item>
+
+        <el-form-item label="最大数据包大小：">
+          <el-input-number v-model="form.bytes" controls-position="right" :min="1"></el-input-number>
+          bytes
+        </el-form-item>
+      </el-form>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      form: {
+        name: 55570,
+        delivery: true,
+        bytes: 4096
+      }
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/SystemSettings/globalSettings.vue b/src/views/SystemSettings/globalSettings.vue
index df410a3d..7f5f877a 100644
--- a/src/views/SystemSettings/globalSettings.vue
+++ b/src/views/SystemSettings/globalSettings.vue
@@ -1,20 +1,40 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>全局设置</p>
+      <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <el-form label-position="left" label-width="180px">
+        <el-form-item label="视频接入上限：">
+          <el-input-number v-model="videoNumber" @change="handleChange" :min="1" size="mini"
+            :max="8"></el-input-number>
+          <i class="el-icon-warning" style="color: #409EFF; margin: 0 3px 0 10px;"></i>范围1-8、默认6
+        </el-form-item>
+
+        <el-form-item label="跳帧设置：">
+          <el-input-number v-model="FPS" @change="handleChange" size="mini"></el-input-number>
+        </el-form-item>
+
+        <el-form-item label="默认取值：">
+        </el-form-item>
+      </el-form>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
+  data() {
+    return {
+      videoNumber: 6,
+      FPS: 0,
+    }
+  },
+  methods: {
+    handleChange(value) {
 
     }
   }
@@ -22,7 +42,7 @@ export default {
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/general/HealthCheck.vue b/src/views/general/HealthCheck.vue
index 92c2dfc7..3e70baea 100644
--- a/src/views/general/HealthCheck.vue
+++ b/src/views/general/HealthCheck.vue
@@ -1,20 +1,30 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>健康检测 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>健康检测 </p>
+      <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+
+      <h3>网络状态</h3>
+      <el-form :model="form" label-position="left" label-width="200px" style="width:50%">
+        <el-form-item label="检查网络服务的状态：">
+          <div class="state">
+            <div class="Badge" style="background-color: pink;"></div>
+            <span>忙碌</span>
+          </div>
+        </el-form-item>
+      </el-form>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
+  data() {
+    return {
 
     }
   }
@@ -22,7 +32,18 @@ export default {
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
+.state {
+  display: flex;
+  justify-content: center;
+}
+.state .Badge {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin: 20px 5px 0 0;
+    transform: translateY(-50%);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/logs.vue b/src/views/logs.vue
index df410a3d..935daef0 100644
--- a/src/views/logs.vue
+++ b/src/views/logs.vue
@@ -1,28 +1,99 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>通知/日志</p>
+    <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <el-table :data="tableData" :height="tableHeight" border style="width: 100%">
+        <el-table-column align="center" prop="date" label="通知类型" width="180"></el-table-column>
+        <el-table-column align="center" prop="name" label="产生时机" width="180"></el-table-column>
+        <el-table-column align="center" prop="address" label="内容"></el-table-column>
+        <el-table-column align="center" label="操作" width="160">
+          <template slot-scope="scope">
+            <el-button @click="download(scope.row)" type="text" size="small" class="">下载</el-button>
+            <el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button>
+            <el-button @click="clickDelete(scope.row)" type="text" size="small" class="el-icon-delete"></el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="pageSize"
+        layout="sizes, prev, pager, next" :total="totalNumber" style="padding-top: 10px;">
+      </el-pagination>
+
+
+      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
+        <span>这是一段信息</span>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        },
+      ],
+      currentPage: 1,
+      pageSize: 100,
+      totalNumber: 1000,
+      tableHeight: 0,
+      dialogVisible: false
+    }
+  },
+  created() {
+    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    this.tableHeight = windowHeight - 170;
+  },
+  methods: {
+    download(scope) {
+      console.log(scope, '下载');
+    },
+    showView(scope) {
+      console.log(scope, '查看');
+      this.dialogVisible = true;
+    },
+    clickDelete(scope) {
+      console.log(scope, '删除');
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/myId.vue b/src/views/myId.vue
index df410a3d..c1c3d5ec 100644
--- a/src/views/myId.vue
+++ b/src/views/myId.vue
@@ -1,28 +1,43 @@
 <template>
-<div class="content-box">
-  <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+  <div class="content-box">
+    <div class="container">
+      <p>我的账号</p>
+    <!-- <div class="test-div">
       <i class="el-icon-edit"></i>
       <i class="el-icon-share"></i>
       <i class="el-icon-delete"></i>
+    </div> -->
+      <el-form label-position="left" label-width="60px" :model="formLabelAlign">
+        <el-form-item label="名称：">
+          {{ formLabelAlign.name }}
+        </el-form-item>
+        <el-form-item label="账号：">
+          {{ formLabelAlign.account }}
+        </el-form-item>
+        <el-form-item label="密码：">
+          {{ formLabelAlign.password }}
+        </el-form-item>
+      </el-form>
     </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-
+  data() {
+    return {
+      formLabelAlign: {
+        name: 'admin',
+        account: 'admin',
+        password: '123456',
+      },
     }
   }
 }
 </script>
 
 <style>
-.test-div i{
+.test-div i {
   font-size: 25px;
 }
 </style>
\ No newline at end of file