用户行为记录

package.json

@@ -47,6 +47,7 @@
     "jsonlint": "1.6.3",
     "jszip": "3.1.5",
     "mockjs": "1.0.1-beta3",
+    "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "screenfull": "4.0.0",

src/api/statistics.js

+import request from '@/utils/request'
+
+export function getLog(data) {
+  return request({
+    url: '/log/get_log',
+    method: 'post',
+    data
+  })
+}
+
+export function getLogCount(data) {
+  return request({
+    url: '/log/get_log_count',
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -125,6 +125,19 @@ export default new Router({
 })
 
 export const asyncRouterMap = [
+  {
+    path: '/statistics',
+    component: Layout,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/statistics/index'),
+        name: 'statistics',
+        meta: { title: '用户行为记录', icon: 'peoples' }
+      }
+    ]
+  },
   {
     path: '/pipeline',
     component: Layout,
@@ -136,13 +149,13 @@ export const asyncRouterMap = [
     },
     children: [
       {
-        path: '/application',
+        path: 'application',
         component: () => import('@/views/pipeline/application/index'),
         name: 'application',
         meta: { title: '应用管理', icon: 'example' }
       },
       {
-        path: '/quali',
+        path: 'quali',
         component: () => import('@/views/testdata/index'),
         name: 'quali',
         meta: { title: '质效管理', icon: 'tab' }

src/views/statistics/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="listQuery.query.active" placeholder="Action" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-input v-model="listQuery.query.microservice_name" placeholder="Microservice Name" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-input v-model="listQuery.query.namespace" placeholder="Namespace" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-input v-model="listQuery.query.user" placeholder="User" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="logs"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Action" prop="Action" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.active }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Microservice Name" prop="Microservice Name" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.microservice_name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Namespace" prop="Namespace" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.namespace }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="User" prop="User" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.user }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Date" prop="Date" align="center">
+        <template slot-scope="scope">
+          <span >{{ scope.row.createdAt | formatDate }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Detail" align="center" width="180" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleInfo(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="count>0" :total="count" :page.sync="page" :limit.sync="listQuery.query.count" @pagination="handleFilter" />
+
+    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
+      <json-editor ref="jsonEditor" v-model="temp"/>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getLog, getLogCount } from '@/api/statistics'
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import JsonEditor from '@/components/JsonEditor'
+import moment from 'moment'
+
+export default {
+  name: 'Statistics',
+  components: { Pagination, JsonEditor },
+  directives: { waves },
+  filters: {
+    formatDate(date, pattern = 'YYYY-MM-DD HH:mm:ss') {
+      return moment(date).format(pattern)
+    }
+  },
+  data() {
+    return {
+      listLoading: true,
+      page: 1,
+      listQuery: {
+        query: {
+          count: 10
+        }
+      },
+      temp: {},
+      dialogFormVisible: false,
+      dialogStatus: '',
+      rules: {
+        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
+        // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
+        // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+      },
+      logs: [],
+      count: 1
+    }
+  },
+
+  created() {
+    this.getLog()
+    this.getLogCount()
+  },
+
+  methods: {
+    getLog() {
+      for (const prop in this.listQuery) {
+        if (this.listQuery[prop] === '') {
+          delete this.listQuery[prop]
+        }
+      }
+      getLog(this.listQuery).then(res => {
+        this.logs = res.data.data
+        this.listLoading = false
+      })
+      setTimeout(() => {
+        this.listLoading = false
+      }, 0.5 * 1000)
+    },
+
+    getLogCount() {
+      getLogCount(this.listQuery).then(res => {
+        this.count = res.data.data
+      })
+    },
+
+    handleFilter() {
+      this.listQuery.query.num = this.page - 1
+      this.getLog()
+      this.getLogCount()
+    },
+
+    handleInfo(row) {
+      this.temp = row
+      delete this.temp._id
+      this.dialogStatus = '详情'
+      this.dialogFormVisible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  width: 600px;
+}
+</style>