Merge branch 'master' of http://git.lgzn.space/chengdandan/TransFlow

2022-12-16 14:51:00 +08:00 · 2022-12-16 14:51:00 +08:00 · f4bdd5415a
parent e36896c082 da08f97ad9
commit f4bdd5415a
15 changed files with 807 additions and 214 deletions
--- a/dist/static/css/chunk-23301b80.68cf7a92.css
+++ b/dist/static/css/chunk-23301b80.68cf7a92.css
@ -1 +0,0 @@
-.pagination-container[data-v-29a9bf84]{background:#fff;padding:10px 0 0 16px}.pagination-container.hidden[data-v-29a9bf84]{display:none}
--- a/dist/static/css/chunk-24e19412.2a17d88a.css
+++ b/dist/static/css/chunk-24e19412.2a17d88a.css
@ -1 +0,0 @@
-.test-div i{font-size:25px}
--- 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;
--- a/src/router/index.js
+++ b/src/router/index.js
@ -9,11 +9,12 @@ VueRouter.prototype.push = function push(location) {
 }

 export default new VueRouter({
-  routes: [
-    {
+  routes: [{
      path: '/', // 程序启动默认路由
      component: () => import('@/components/common/Whole.vue'),
-      meta: { title: '整体页面布局' },
+      meta: {
+        title: '整体页面布局'
+      },
      redirect: '/test1', // 重定向到首页
      children: [
        // {
@ -24,33 +25,44 @@ export default new VueRouter({
        {
          path: '/test1',
          component: () => import('@/page/test1/index.vue'),
-          meta: { title: '一级菜单1' },
+          meta: {
+            title: '一级菜单1'
+          },
          redirect: '/test1/test1-1', // 该配置是若点击选择一级菜单时，默认选中并跳转到该一级菜单下的第一个二级菜单
-          children:[
-            {
+          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: 'AnalysisMain',
@ -103,6 +115,47 @@ export default new VueRouter({
                component: () =>
                    import ('@/views/general/HealthCheck.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: 'StateOperation',
              name: 'StateOperation',
@ -110,7 +163,7 @@ export default new VueRouter({
                title: '运行状态'
              },
              component: () =>
-                    import ('@/views/StateOperation.vue'),
+                import('@/views/StateOperation.vue'),
            }, {
              path: 'interface',
              name: 'interface',
@ -118,7 +171,7 @@ export default new VueRouter({
                title: '接口'
              },
              component: () =>
-                    import ('@/views/interface.vue'),
+                import('@/views/interface.vue'),
            }, {
              path: 'IPSetting',
              name: 'IPSetting',
@ -126,7 +179,7 @@ export default new VueRouter({
                title: 'IP设置'
              },
              component: () =>
-                    import ('@/views/IPSetting.vue'),
+                import('@/views/IPSetting.vue'),
            },
            {
              path: 'globalSettings',
@ -135,39 +188,43 @@ export default new VueRouter({
                title: '全局设置'
              },
              component: () =>
-                    import ('@/views/SystemSettings/globalSettings.vue'),
-            }, {
+                import('@/views/SystemSettings/globalSettings.vue'),
+            },
+            {
              path: 'ExportingSettings',
              name: 'ExportingSettings',
              meta: {
                title: '关于本机——导出设置'
              },
              component: () =>
-                import ('@/views/SystemSettings/ExportingSettings.vue'),
-            },{
+                import('@/views/SystemSettings/ExportingSettings.vue'),
+            },
+            {
              path: 'ImportSettings',
              name: 'ImportSettings',
              meta: {
                title: '关于本机——导入设置'
              },
              component: () =>
-                import ('@/views/SystemSettings/ImportSettings.vue'),
-            },{
+                import('@/views/SystemSettings/ImportSettings.vue'),
+            }, 
+            {
              path: 'InterfaceServerCertificates',
              name: 'InterfaceServerCertificates',
              meta: {
                title: '接口与服务器证书'
              },
              component: () =>
-                import ('@/views/SystemSettings/InterfaceServerCertificates.vue'),
-            },{
+                import('@/views/SystemSettings/InterfaceServerCertificates.vue'),
+            }, 
+            {
              path: 'UDPServiceSettings',
              name: 'UDPServiceSettings',
              meta: {
                title: 'UDP服务设置'
              },
              component: () =>
-                import ('@/views/SystemSettings/UDPServiceSettings.vue'),
+                import('@/views/SystemSettings/UDPServiceSettings.vue'),
            },
            {
              path: 'myId',
@ -176,7 +233,7 @@ export default new VueRouter({
                title: '我的账号'
              },
              component: () =>
-                    import ('@/views/myId.vue'),
+                import('@/views/myId.vue'),
            }, {
              path: 'IdManagement',
              name: 'IdManagement',
@ -184,7 +241,7 @@ export default new VueRouter({
                title: '账号管理'
              },
              component: () =>
-                    import ('@/views/IdManagement.vue'),
+                import('@/views/IdManagement.vue'),
            },
            {
              path: 'logs',
@ -192,7 +249,7 @@ export default new VueRouter({
              meta: {
                title: '通知/日志'
              },
-                component: () => import ('@/views/logs.vue')
+              component: () => import('@/views/logs.vue')
            }

          ]
@ -200,48 +257,62 @@ export default new VueRouter({
        {
          path: '/test2',
          component: () => import('@/page/test2/index.vue'),
-          meta: { title: '一级菜单2' },
+          meta: {
+            title: '一级菜单2'
+          },
          redirect: '/test2/test2-1', // 该配置是若点击选择父目录时，默认选中该父目录下的子路径页面
-          children:[
-            {
+          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', // 国际化组件
          component: () => import('@/components/common/I18n.vue'),
-          meta: { title: '国际化' }
+          meta: {
+            title: '国际化'
+          }
        },
        {
          path: '/permission', // 权限页面
@ -254,19 +325,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', // 登录页面
      component: () => import('@/page/Login.vue'),
-      meta: { title: '登录' }
+      meta: {
+        title: '登录'
+      }
    },
    {
      path: '*',
--- a/src/views/IPSetting.vue
+++ b/src/views/IPSetting.vue
@ -1,28 +1,51 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/IdManagement.vue
+++ b/src/views/IdManagement.vue
@ -1,28 +1,114 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
      <p>账号管理</p>
-    <div class="test-div">
+    <!-- <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>
--- a/src/views/StateOperation.vue
+++ b/src/views/StateOperation.vue
@ -1,28 +1,159 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
+      <!-- <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>
--- a/src/views/SystemSettings/ExportingSettings.vue
+++ b/src/views/SystemSettings/ExportingSettings.vue
@ -1,28 +1,71 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/SystemSettings/ImportSettings.vue
+++ b/src/views/SystemSettings/ImportSettings.vue
@ -1,28 +1,62 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/SystemSettings/InterfaceServerCertificates.vue
+++ b/src/views/SystemSettings/InterfaceServerCertificates.vue
@ -1,28 +1,83 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/SystemSettings/UDPServiceSettings.vue
+++ b/src/views/SystemSettings/UDPServiceSettings.vue
@ -1,28 +1,46 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/SystemSettings/globalSettings.vue
+++ b/src/views/SystemSettings/globalSettings.vue
@ -1,20 +1,40 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/general/HealthCheck.vue
+++ b/src/views/general/HealthCheck.vue
@ -1,20 +1,30 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
      <p>健康检测 </p>
-    <div class="test-div">
+      <!-- <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>
--- a/src/views/logs.vue
+++ b/src/views/logs.vue
@ -1,28 +1,99 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>主体页面 1 - 2 </p>
-    <div class="test-div">
+      <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>
--- a/src/views/myId.vue
+++ b/src/views/myId.vue
@ -1,28 +1,43 @@
 <template>
-<div class="content-box">
+  <div class="content-box">
    <div class="container">
-    <p>我的账号 </p>
-    <div class="test-div">
+      <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>
				`@ -1 +0,0 @@`
				`.pagination-container[data-v-29a9bf84]{background:#fff;padding:10px 0 0 16px}.pagination-container.hidden[data-v-29a9bf84]{display:none}`