行为审计

src/components/SideBar.vue

@@ -9,7 +9,7 @@
       <el-menu-item index="/user">用户管理</el-menu-item>
       <el-menu-item index="/views/certificate/index">凭证管理</el-menu-item>
       <el-menu-item index="/views/account/register">账号管理</el-menu-item>
-      <el-menu-item index="/views/audit/behavior">行为审计</el-menu-item>
+      <el-menu-item index="/views/xingwei/index">行为审计</el-menu-item>
       <el-submenu index="">
         <template #title>
           权限管理

src/router.js

@@ -38,9 +38,9 @@ export default new Router({
           component: () => import('./views/account/register.vue'),
         },
         {
-          path: '/views/audit/behavior',
-          name: 'behavior',
-          component: () => import('./views/audit/behavior .vue'),
+          path: '/views/xingwei/index',
+          name: 'index',
+          component: () => import('./views/xingwei/index.vue'),
         },
         {
           path: '/group',

src/views/audit/behavior .vue

@@ -1,19 +0,0 @@
-<template lang="html">
-  <div id="behavior ">
-    <p>behavior</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'behavior ',
-  props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {},
-};
-</script>
-
-<style lang="scss" scoped></style>

src/views/xingwei/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div id="index">
+    <el-row class="audit">
+      <el-col :span="24" class="btn">
+        <el-col :span="20"><h3>账号注册</h3></el-col>
+      </el-col>
+      <el-col :span="24">
+        <el-col :span="2" class="title">时间段：</el-col>
+        <el-col :span="9">
+          <div class="block">
+            <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+            </el-date-picker>
+          </div>
+        </el-col>
+        <el-col :span="2" class="title">域名：</el-col>
+        <el-col :span="10"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="title">地&nbsp;&nbsp;&nbsp;域：</el-col>
+        <el-col :span="9"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="title">应用：</el-col>
+        <el-col :span="11">
+          <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-select v-model="valuem" placeholder="请选择" v-if="value === '应用'">
+            <el-option v-for="item in optionm" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="2" class="title">登录主机：</el-col>
+        <el-col :span="9"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="title">登录方式：</el-col>
+        <el-col :span="10"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="24" style="margin:10px 0;"
+          ><el-col :span="5" class="searchInp" style="    margin: 0px 0 0 34%;"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+          <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col
+        ></el-col>
+      </el-col>
+      <el-col :span="24">
+        <el-table :data="tableData" border style="width: 100%">
+          <el-table-column prop="name" label="用戶" width="180"> </el-table-column>
+          <el-table-column prop="loginTime" label="登录时间" width="180"> </el-table-column>
+          <el-table-column prop="outTime" label="推出时间"> </el-table-column>
+          <el-table-column prop="operation" label="操作行为"> </el-table-column>
+          <el-table-column prop="addressName" label="域名"> </el-table-column>
+          <el-table-column prop="address" label="地域"> </el-table-column>
+          <el-table-column prop="login" label="登录应用"> </el-table-column>
+          <el-table-column prop="time" label="在线时长"> </el-table-column>
+        </el-table>
+        <el-col class="paging">
+          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: () => ({
+    value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+    input: '',
+    value: '',
+    valuem: '',
+    options: [
+      {
+        value: '应用',
+        label: '应用',
+      },
+    ],
+    optionm: [
+      {
+        value: '模块',
+        label: '模块',
+      },
+    ],
+    pickerOptions: {
+      shortcuts: [
+        {
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+        {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+        {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          },
+        },
+      ],
+    },
+    tableData: [
+      {
+        name: '顾红伟',
+        loginTime: '2019-9-9',
+        outTime: '2019-9-9',
+        operation: '1',
+        addressName: '中国',
+        address: '长春',
+        login: '就业',
+        time: '20分钟',
+      },
+    ],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.audit {
+  width: 100%;
+  padding: 20px;
+}
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
+.title {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+}
+.paging {
+  text-align: right;
+  margin: 10px 0;
+}
+</style>