修复后台浏览记录界面

package-lock.json

@@ -18,10 +18,11 @@
         "clipboard": "2.0.8",
         "codemirror": "^5.49.2",
         "core-js": "^3.21.1",
+        "default-passive-events": "^2.0.0",
         "echarts": "4.9.0",
         "echarts-gl": "^1.1.1",
         "echarts-wordcloud": "^1.1.3",
-        "element-ui": "^2.15.6",
+        "element-ui": "^2.15.8",
         "file-saver": "2.0.5",
         "fuse.js": "6.4.3",
         "highlight.js": "9.18.5",
@@ -4562,6 +4563,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -7202,6 +7212,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/default-passive-events": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
+      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
+    },
     "node_modules/defaults": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
@@ -9124,6 +9139,12 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
       "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "node_modules/filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -12916,6 +12937,12 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmmirror.com/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -23364,6 +23391,15 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "devOptional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -25464,6 +25500,11 @@
         }
       }
     },
+    "default-passive-events": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
+      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
+    },
     "defaults": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
@@ -26997,6 +27038,12 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
       "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -29914,6 +29961,12 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmmirror.com/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
+      "optional": true
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",

src/api/monitor/log.js

@@ -2,21 +2,21 @@ import request from '@/utils/request'
 
 export function getErrDetail(id) {
   return request({
-    url: 'api/logs/error/' + id,
+    url: 'bxg/api/logs/error/' + id,
     method: 'get'
   })
 }
 
 export function delAllError() {
   return request({
-    url: 'api/logs/del/error',
+    url: 'bxg/api/logs/del/error',
     method: 'delete'
   })
 }
 
 export function delAllInfo() {
   return request({
-    url: 'api/logs/del/info',
+    url: 'bxg/api/logs/del/info',
     method: 'delete'
   })
 }

src/mixins/crud.js

@@ -3,9 +3,9 @@ import {
   download
 } from '@/api/bxg/data'
 import {
-  parseTime,
   downloadFile
 } from '@/utils/index'
+import {parseTime} from "@/utils/ruoyi";
 import checkPermission from '@/utils/permission'
 
 export default {

src/store/getters.js

@@ -31,5 +31,7 @@ const getters = {
   uploadApi: state => state.api.uploadApi,
   updateAvatarApi: state => state.api.updateAvatarApi,
   qiNiuUploadApi: state => state.api.qiNiuUploadApi,
+  sqlApi: state => state.api.sqlApi,
+  swaggerApi: state => state.api.swaggerApi
 }
 export default getters

src/views/bxg/monitor/log/errorLog.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <Search />
+      <crudOperation>
+        <el-button
+          slot="left"
+          class="filter-item"
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :loading="crud.delAllLoading"
+          @click="confirmDelAll()"
+        >
+          清空
+        </el-button> 
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;height:calc(100vh - 300px);overflow-y: scroll;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" inline class="demo-table-expand">
+            <el-form-item label="请求方法">
+              <span>{{ props.row.method }}</span>
+            </el-form-item>
+            <el-form-item label="请求参数">
+              <span>{{ props.row.params }}</span>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('username')" prop="username" label="用户名" />
+      <el-table-column v-if="columns.visible('requestIp')" prop="requestIp" label="IP" />
+      <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="IP来源" />
+      <el-table-column v-if="columns.visible('description')" prop="description" label="描述" />
+      <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" />
+      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="异常详情" width="100px">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="info(scope.row.id)">查看详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
+      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
+    </el-dialog>
+    <!--分页组件-->
+    <el-footer style="height:60px;width:100%;background-color:#f6f6f6">
+      <div style="float:left"></div>
+      <pagination style="float:right;margin-top:15px" />
+    </el-footer>
+  </div>
+</template>
+
+<script>
+import { getErrDetail, delAllError } from '@/api/monitor/log'
+import Search from './search'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '异常日志', url: 'api/logs/error' })
+export default {
+  name: 'ErrorLog',
+  components: { Search, crudOperation, pagination },
+  mixins: [presenter(defaultCrud)],
+  data() {
+    return {
+      errorInfo: '', dialog: false
+    }
+  },
+  created() {
+    this.crud.optShow = {
+      add: false,
+      edit: false,
+      del: false,
+      download: true
+    }
+  },
+  methods: {
+    // 获取异常详情
+    info(id) {
+      this.dialog = true
+      getErrDetail(id).then(res => {
+        this.errorInfo = res.exception
+      })
+    },
+    confirmDelAll() {
+      this.$confirm(`确认清空所有异常日志吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.crud.delAllLoading = true
+        delAllError().then(res => {
+          this.crud.delAllLoading = false
+          this.crud.dleChangePage(1)
+          this.crud.delSuccessNotify()
+          this.crud.toQuery()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err.response.data.message)
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 70px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 100%;
+}
+.demo-table-expand .el-form-item__content {
+  font-size: 12px;
+}
+/deep/ .el-dialog__body {
+  padding: 0 20px 10px 20px !important;
+}
+.java.hljs {
+  color: #444;
+  background: #ffffff !important;
+  height: 630px !important;
+}
+  .app-container{
+  padding-bottom: 0px;
+}
+</style>

src/views/bxg/monitor/log/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <Search />
+      <crudOperation>
+        <el-button
+          slot="left"
+          class="filter-item"
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :loading="crud.delAllLoading"
+          @click="confirmDelAll()"
+        >
+          清空
+        </el-button>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;height:calc(100vh - 300px);overflow-y: scroll;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-form label-position="left" inline class="demo-table-expand">
+            <el-form-item label="请求方法">
+              <span>{{ props.row.method }}</span>
+            </el-form-item>
+            <el-form-item label="请求参数">
+              <span>{{ props.row.params }}</span>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('username')" prop="username" label="用户名" />
+      <el-table-column v-if="columns.visible('requestIp')" prop="requestIp" label="IP" />
+      <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="IP来源" />
+      <el-table-column v-if="columns.visible('description')" prop="description" label="描述" />
+      <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" />
+      <el-table-column v-if="columns.visible('time')" prop="time" label="请求耗时" align="center">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+          <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
+          <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期" width="180px">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+   <el-footer style="height:60px;width:100%;background-color:#f6f6f6">
+     <div style="float:left"></div>
+      <pagination style="float:right;margin-top:15px" />
+   </el-footer>
+  </div>
+</template>
+
+<script>
+import Search from './search'
+import { delAllInfo } from '@/api/monitor/log'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '日志', url: 'api/logs' })
+export default {
+  name: 'Log',
+  components: { Search, crudOperation, pagination },
+  mixins: [presenter(defaultCrud)],
+  created() {
+    this.crud.optShow = {
+      add: false,
+      edit: false,
+      del: false,
+      download: true
+    }
+  },
+  methods: {
+    confirmDelAll() {
+      this.$confirm(`确认清空所有操作日志吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.crud.delAllLoading = true
+        delAllInfo().then(res => {
+          this.crud.delAllLoading = false
+          this.crud.dleChangePage(1)
+          this.crud.delSuccessNotify()
+          this.crud.toQuery()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err.response.data.message)
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 70px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 100%;
+}
+.demo-table-expand .el-form-item__content {
+  font-size: 12px;
+}
+  .app-container{
+  padding-bottom: 0px;
+}
+</style>

src/views/bxg/monitor/log/mlog.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-button
+        type="danger"
+        class="filter-item"
+        size="mini"
+        icon="el-icon-refresh"
+        @click="toQuery"
+      >刷新</el-button>
+    </div>
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
+      <el-table-column prop="nickname" label="用户名" />
+      <el-table-column prop="requestIp" label="IP" />
+      <el-table-column prop="address" label="地址来源" />
+      <el-table-column prop="description" label="描述" />
+      <el-table-column prop="createTime" label="创建日期" width="180px">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      style="margin-top: 8px;"
+      layout="total, prev, pager, next, sizes"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </div>
+</template>
+
+<script>
+import initData from '@/mixins/crud'
+import { parseTime } from '@/utils/index'
+export default {
+  name: 'Log',
+  mixins: [initData],
+  created() {
+    this.$nextTick(() => {
+      this.init()
+    })
+  },
+  methods: {
+    parseTime,
+    beforeInit() {
+      this.url = 'bxg/api/logs/mlogs'
+      const query = this.query
+      const value = query.value
+      this.params = { page: this.page, size: this.size }
+      if (value) { this.params['blurry'] = value }
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/bxg/monitor/log/search.vue

@@ -0,0 +1,35 @@
+<template>
+  <div v-if="crud.props.searchToggle">
+    <el-input
+      v-model="query.blurry"
+      clearable
+      size="small"
+      placeholder="请输入你要搜索的内容"
+      style="width: 200px;"
+      class="filter-item"
+    />
+    <el-date-picker
+      v-model="query.createTime"
+      :default-time="['00:00:00','23:59:59']"
+      type="daterange"
+      range-separator=":"
+      size="small"
+      class="date-item"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+    />
+    <rrOperation
+      :crud="crud"
+    />
+  </div>
+</template>
+
+<script>
+import { header } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+export default {
+  components: { rrOperation },
+  mixins: [header()]
+}
+</script>

src/views/bxg/monitor/online/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <rrOperation :crud="crud" />
+      </div>
+      <crudOperation>
+        <el-button
+          slot="left"
+          class="filter-item"
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :loading="delLoading"
+          :disabled="crud.selections.length === 0"
+          @click="doDelete(crud.selections)"
+        >
+          强退
+        </el-button>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;height:calc(100vh - 300px);overflow-y: scroll;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column v-if="columns.visible('userName')" prop="userName" label="用户名" align="center" />
+      <el-table-column v-if="columns.visible('nickName')" prop="nickName" label="用户昵称" align="center" />
+      <el-table-column v-if="columns.visible('job')" prop="job" label="岗位" align="center" />
+      <el-table-column v-if="columns.visible('ip')" prop="ip" label="登录IP" align="center" />
+      <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="登录地点" align="center" />
+      <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" align="center" />
+      <el-table-column v-if="columns.visible('loginTime')" prop="loginTime" label="登录时间" align="center">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100px" fixed="right" align="center">
+        <template slot-scope="scope">
+          <el-popover
+            :ref="scope.$index"
+            v-permission="['admin']"
+            placement="top"
+            width="180"
+          >
+            <p>确定强制退出该用户吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.key, scope.$index)">确定</el-button>
+            </div>
+            <el-button slot="reference" size="mini" type="text">强退</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-footer style="height:60px;width:100%;background-color:#f6f6f6">
+      <div style="float:left"></div>
+      <pagination  style="float:right;margin-top:15px" />
+    </el-footer>
+  </div>
+</template>
+
+<script>
+import { del } from '@/api/monitor/online'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ url: 'auth/online', title: '在线用户' })
+export default {
+  name: 'OnlineUser',
+  components: { pagination, crudOperation, rrOperation },
+  mixins: [presenter(defaultCrud), header(), crud()],
+  data() {
+    return {
+      delLoading: false,
+      permission: {}
+    }
+  },
+  created() {
+    this.crud.msg.del = '强退成功！'
+    this.crud.optShow = {
+      add: false,
+      edit: false,
+      del: false,
+      download: true
+    }
+  },
+  methods: {
+    // 获取数据前设置好接口地址
+    beforeInit() {
+      this.url = 'auth/online'
+      return true
+    },
+    doDelete(datas) {
+      this.$confirm(`确认强退选中的${datas.length}个用户?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.delMethod(datas)
+      }).catch(() => {})
+    },
+    // 踢出用户
+    delMethod(key, index) {
+      const ids = []
+      if (key instanceof Array) {
+        key.forEach(val => {
+          ids.push(val.key)
+        })
+      } else ids.push(key)
+      this.delLoading = true
+      del(ids).then(() => {
+        this.delLoading = false
+        if (this.$refs[index]) {
+          this.$refs[index].doClose()
+        }
+        this.crud.dleChangePage(1)
+        this.crud.delSuccessNotify()
+        this.crud.toQuery()
+      }).catch(() => {
+        this.delLoading = false
+        if (this.$refs[index]) {
+          this.$refs[index].doClose()
+        }
+      })
+    }
+  }
+}
+</script>
+<style >
+  .app-container{
+  padding-bottom: 0px;
+}
+</style>

src/views/bxg/monitor/online/indext.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <rrOperation :crud="crud" />
+      </div>
+      <crudOperation>
+        <el-button
+          slot="left"
+          class="filter-item"
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :loading="delLoading"
+          :disabled="crud.selections.length === 0"
+          @click="doDelete(crud.selections)"
+        >
+          强退
+        </el-button>
+      </crudOperation>
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;height:calc(100vh - 300px);overflow-y: scroll;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column v-if="columns.visible('userName')" prop="userName" label="用户名" align="center" />
+      <el-table-column v-if="columns.visible('nickName')" prop="nickName" label="用户昵称" align="center" />
+      <el-table-column v-if="columns.visible('ip')" prop="ip" label="登录IP" align="center" />
+      <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="登录地点"  align="center"/>
+      <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" align="center" />
+      <el-table-column v-if="columns.visible('loginTime')" prop="loginTime" label="登录时间" align="center">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100px" fixed="right" align="center">
+        <template slot-scope="scope">
+          <el-popover
+            :ref="scope.$index"
+            v-permission="['admin']"
+            placement="top"
+            width="180"
+          >
+            <p>确定强制退出该用户吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.key, scope.$index)">确定</el-button>
+            </div>
+            <el-button slot="reference" size="mini" type="text">强退</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <el-footer style="height:60px;width:100%;background-color:#f6f6f6">
+      <div style="float:left"></div>
+      <pagination  style="float:right;margin-top:15px" />
+    </el-footer>
+  </div>
+</template>
+
+<script>
+import { delT } from '@/api/monitor/online'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ url: 'auth/online', title: '在线用户', query: { type: 1 }})
+export default {
+  name: 'OnlineUser',
+  components: { pagination, crudOperation, rrOperation },
+  mixins: [presenter(defaultCrud), header(), crud()],
+  data() {
+    return {
+      delLoading: false,
+      permission: {}
+    }
+  },
+  created() {
+    this.crud.msg.del = '强退成功！'
+    this.crud.optShow = {
+      add: false,
+      edit: false,
+      del: false,
+      download: true
+    }
+  },
+  methods: {
+    // 获取数据前设置好接口地址
+    beforeInit() {
+      this.url = 'auth/online'
+      return true
+    },
+    doDelete(datas) {
+      this.$confirm(`确认强退选中的${datas.length}个用户?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.delMethod(datas)
+      }).catch(() => {})
+    },
+    // 踢出用户
+    delMethod(key, index) {
+      const ids = []
+      if (key instanceof Array) {
+        key.forEach(val => {
+          ids.push(val.key)
+        })
+      } else ids.push(key)
+      this.delLoading = true
+      delT(ids).then(() => {
+        this.delLoading = false
+        if (this.$refs[index]) {
+          this.$refs[index].doClose()
+        }
+        this.crud.dleChangePage(1)
+        this.crud.delSuccessNotify()
+        this.crud.toQuery()
+      }).catch(() => {
+        this.delLoading = false
+        if (this.$refs[index]) {
+          this.$refs[index].doClose()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container{
+  padding-bottom: 0px;
+}
+</style>

src/views/bxg/monitor/server/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者服务地址" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <rrOperation :crud="crud" />
+      </div>
+      <crudOperation :permission="permission" />
+    </div>
+    <!--表单组件-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="form.address" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="端口" prop="port">
+          <el-input-number v-model.number="form.port" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model.number="form.sort" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" />
+      <el-table-column v-if="columns.visible('state')" prop="state" label="状态" width="50px">
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.state === '1' ? 'success' : 'info'"
+            disable-transitions
+          >
+            <i v-if="scope.row.state === '1'" class="el-icon-success" />
+            <i v-if="scope.row.state === '0'" class="el-icon-error" />
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
+      <el-table-column v-if="columns.visible('address')" prop="address" label="地址" />
+      <el-table-column v-if="columns.visible('port')" prop="port" label="端口" width="80px" align="center" />
+      <el-table-column v-if="columns.visible('cpuRate')" :formatter="formatCpuRate" prop="cpuRate" label="CPU使用率" width="100px" align="center" />
+      <el-table-column v-if="columns.visible('cpuCore')" prop="cpuCore" label="CPU内核数" width="100px" align="center" />
+      <el-table-column v-if="columns.visible('memTotal')" prop="memTotal" label="物理内存" align="center">
+        <template slot-scope="scope">
+          <el-row>
+            <el-col :span="24">{{ formatMem(scope.row) }}</el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-progress :percentage="percentNumber(scope.row.memUsed,scope.row.memTotal)" :status="percentStatus(scope.row.memUsed,scope.row.memTotal)" :show-text="false" />
+            </el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('diskTotal')" prop="diskTotal" :formatter="formatDisk" label="磁盘使用情况" align="center">
+        <template slot-scope="scope">
+          <el-row>
+            <el-col :span="24">{{ formatDisk(scope.row) }}</el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-progress :percentage="percentNumber(scope.row.diskUsed,scope.row.diskTotal)" :status="percentStatus(scope.row.diskUsed,scope.row.diskTotal)" :show-text="false" />
+            </el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="columns.visible('swapTotal')" prop="swapTotal" label="交换空间" align="center">
+        <template slot-scope="scope">
+          <el-row>
+            <el-col :span="24">{{ formatSwap(scope.row) }}</el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-progress :percentage="percentNumber(scope.row.swapUsed,scope.row.swapTotal)" :status="percentStatus(scope.row.swapUsed,scope.row.swapTotal)" :show-text="false" />
+            </el-col>
+          </el-row>
+        </template>
+      </el-table-column>
+      <el-table-column v-permission="['admin','server:edit','server:del']" label="操作" width="150px" align="center">
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :permission="permission"
+          />
+        </template> 
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import crudServer from '@/api/monitor/server'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '监控', url: 'api/server', sort: 'sort,asc', crudMethod: { ...crudServer }})
+const defaultForm = { id: null, address: 'localhost', name: null, ip: null, port: 8777, state: null, cpuRate: null, cpuCore: null, memTotal: null, memUsed: null, diskTotal: null, diskUsed: null, swapTotal: null, swapUsed: null, sort: 999 }
+export default {
+  name: 'ServerMonitor',
+  components: { pagination, crudOperation, rrOperation, udOperation },
+  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'server:add'],
+        edit: ['admin', 'server:edit'],
+        del: ['admin', 'server:del']
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        address: [
+          { required: true, message: '请输入IP', trigger: 'blur' }
+        ],
+        port: [
+          { required: true, message: '请输入访问端口', trigger: 'blur', type: 'number' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.crud.optShow.download = false
+  },
+  methods: {
+    formatCpuRate(row, column) {
+      const value = row.cpuRate
+      if (!value) {
+        return 0
+      }
+      return (Math.floor(value * 10000) / 100) + '%'
+    },
+    percentNumber(value, total) {
+      if (!value || !total) {
+        return 0
+      }
+      return value / total * 100
+    },
+    percentStatus(value, total) {
+      const percent = this.percentNumber(value, total)
+      if (percent < 60) {
+        return 'success'
+      } else if (percent < 90) {
+        return 'warning'
+      } else {
+        return 'exception'
+      }
+    },
+    convertToGb(num) {
+      if (!num) {
+        return '-'
+      }
+      let unit = 'G'
+      if (num > 1024) {
+        num = num / 1024
+        unit = 'T'
+      }
+      num = Math.floor(num * 100) / 100
+      return num + unit
+    },
+    formatMem(row, column) {
+      return this.convertToGb(row.memUsed) + ' / ' + this.convertToGb(row.memTotal)
+    },
+    formatDisk(row, column) {
+      return this.convertToGb(row.diskUsed) + ' / ' + this.convertToGb(row.diskTotal)
+    },
+    formatSwap(row, column) {
+      return this.convertToGb(row.swapUsed) + ' / ' + this.convertToGb(row.swapTotal)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-col {
+    text-align: center;
+  }
+</style>

src/views/bxg/monitor/sql/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <elFrame :src="sqlApi" />
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import iFrame from "@/components/iFrame/index"
+export default {
+  name: 'Sql',
+  components: { iFrame },
+  computed: {
+    ...mapGetters([
+      'sqlApi'
+    ])
+  }
+}
+</script>