系统监控和在线人员功能

src/api/loginOnLine/LoginOnLineService.js

@@ -0,0 +1,74 @@
+import request from '@/utils/httpRequest'
+
+export default class PostService {
+  list (params) {
+    console.log(params)
+    return request({
+      url: '/sys/loginUserOnline/list',
+      method: 'get',
+      params: params
+    })
+  }
+  queryById (id) {
+    return request({
+      url: '/sys/project/queryById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
+  save (inputForm) {
+    return request({
+      url: `/sys/project/save`,
+      method: 'post',
+      data: inputForm
+    })
+  }
+  delete (tokenId, loginName) {
+    return request({
+      url: '/sys/loginUserOnline/delete',
+      method: 'delete',
+      params: {
+        tokenId: tokenId,
+        loginName: loginName
+      }
+    })
+  }
+
+  importExcel (data) {
+    return request({
+      url: '/sys/project/import',
+      method: 'post',
+      data: data
+    })
+  }
+  exportTemplate () {
+    return request({
+      url: '/sys/project/import/template',
+      method: 'get',
+      responseType: 'blob'
+    })
+  }
+  exportExcel (params) {
+    return request({
+      url: '/sys/project/export',
+      method: 'get',
+      params: params,
+      responseType: 'blob'
+    })
+  }
+  proportion (params) {
+    return request({
+      url: '/sys/project/proportion',
+      method: 'get',
+      params: params
+    })
+  }
+  fileUploadList (params) {
+    return request({
+      url: '/sys/project/exportFileUploadList',
+      method: 'get',
+      params: params,
+      responseType: 'blob'
+    })
+  }
+}

src/views/modules/loginOnLine/LoginOnLine.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="page">
+    <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+      <!-- 搜索框-->
+      <el-form-item prop="ip">
+        <el-input size="small" v-model="searchForm.ip" placeholder="请输入登录地址" clearable></el-input>
+      </el-form-item>
+      <el-form-item prop="name">
+        <el-input size="small" v-model="searchForm.name" placeholder="请输入用户名称" clearable></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
+        <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="bg-white top">
+      <vxe-toolbar :refresh="{query: refreshList}" import export print custom>
+        <template #buttons>
+
+        </template>
+      </vxe-toolbar>
+      <div style="height: calc(100% - 80px);">
+        <vxe-table
+          border="inner"
+          auto-resize
+          resizable
+          height="auto"
+          :loading="loading"
+          size="small"
+          ref="projectTable"
+          show-header-overflow
+          show-overflow
+          highlight-hover-row
+          :menu-config="{}"
+          :print-config="{}"
+          @sort-change="sortChangeHandle"
+          :sort-config="{remote:true}"
+          :data="dataList"
+          :checkbox-config="{}">
+          <vxe-column type="checkbox"  width="40px"></vxe-column>
+          <vxe-column width="100px"  title="用户姓名" field="userName" > </vxe-column>
+          <vxe-column width="100px"  title="部门" field="officeName" > </vxe-column>
+          <vxe-column width="120px"  title="主机" field="ip" > </vxe-column>
+          <vxe-column width="200px"  title="登陆地点" field="loginLocation" > </vxe-column>
+          <vxe-column width="120px"  title="浏览器" field="browser" > </vxe-column>
+          <vxe-column width="120px"  title="操作系统" field="os" > </vxe-column>
+          <vxe-column width="160px"  title="登陆时间" field="loginTime" > </vxe-column>
+          <vxe-column title="操作" width="200px" fixed="right" align="center">
+            <template  slot-scope="scope">
+              <el-button type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.tokenId, scope.row.loginName)">强退</el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <vxe-pager
+          background
+          size="small"
+          :current-page="tablePage.currentPage"
+          :page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          :page-sizes="[5, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+          @page-change="currentChangeHandle">
+        </vxe-pager>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LoginOnLineService from '@/api/loginOnLine/LoginOnLineService'
+  export default {
+    data () {
+      return {
+        searchForm: {
+          name: '',
+          ip: ''
+        },
+        dataList: [],
+        detailData: [],
+        tablePage: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 5,
+          orders: []
+        },
+        loading: false,
+        proport: ''
+      }
+    },
+    loginOnLineService: null,
+    created () {
+      this.loginOnLineService = new LoginOnLineService()
+    },
+    components: {
+    },
+    activated () {
+      this.refreshList()
+    },
+
+    methods: {
+      // 获取数据列表
+      refreshList () {
+        this.loading = true
+        this.loginOnLineService.list({
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          'itemType': '1',
+          ...this.searchForm
+        }).then(({data}) => {
+          // this.dataList = data.records
+          this.detailData = this.splitArr(
+            data.records,
+            this.tablePage.pageSize
+          )
+          this.tablePage.total = data.total
+          this.currentChangeHandle({ ...this.tablePage })
+          // this.tablePage.total = data.total
+          this.loading = false
+        })
+      },
+      // 当前页
+      currentChangeHandle ({ currentPage, pageSize }) {
+        this.tablePage.currentPage = currentPage
+        this.tablePage.pageSize = pageSize
+        this.dataList = this.detailData[currentPage - 1]
+        // this.refreshList()
+      },
+      // 排序
+      sortChangeHandle (column) {
+        this.tablePage.orders = []
+        if (column.order != null) {
+          this.tablePage.orders.push({column: this.$utils.toLine(column.property), asc: column.order === 'asc'})
+        }
+        this.refreshList()
+      },
+      // 删除
+      del (tokenId, loginName) {
+        /* let tokenIds = tokenId || this.$refs.projectTable.getCheckboxRecords().map(item => {
+          return item.tokenId
+        }).join(',') */
+        this.$confirm(`确定强退所选项吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.loading = true
+          this.loginOnLineService.delete(tokenId, loginName).then(({data}) => {
+            this.$message.success(data)
+            this.refreshList()
+            this.loading = false
+          })
+        })
+      },
+      resetSearch () {
+        this.$refs.searchForm.resetFields()
+        this.refreshList()
+      },
+      // 自定义服务端导出
+      exportMethod ({ options }) {
+        // 传给服务端的参数
+        const params = {
+          'current': this.tablePage.currentPage,
+          'size': this.tablePage.pageSize,
+          'orders': this.tablePage.orders,
+          'itemType': '1',
+          ...this.searchForm,
+          filename: options.filename,
+          sheetName: options.sheetName,
+          isHeader: options.isHeader,
+          original: options.original,
+          mode: options.mode,
+          selectIds: options.mode === 'selected' ? options.data.map(item => item.id) : [],
+          exportFields: options.columns.map(column => column.property)
+        }
+        return this.loginOnLineService.exportExcel(params).then((res) => {
+          // 将二进制流文件写入excel表，以下为重要步骤
+          this.$utils.downloadExcel(res.data, options.filename)
+        }).catch(function (err) {
+          if (err.response) {
+            console.log(err.response)
+          }
+        })
+      },
+      splitArr (ar, size = 1) {
+        let index = 0
+        let res = []
+        while (index < ar.length) {
+          res.push(ar.slice(index, index + size))
+          index += size
+        }
+        return res
+      }
+    }
+  }
+</script>

src/views/modules/monitor/Server.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading"> 
+  <div v-loading="loading">
     <el-row :gutter="12" v-if="ServerOS" >
       <el-col :span="8">
         <el-card shadow="hover" class="server-card">
@@ -57,7 +57,7 @@
                 </div>
                  </el-col>
             </el-row>
-    
+
         </el-card>
       </el-col>
       <el-col :span="8">
@@ -117,6 +117,14 @@
                   <td><div class="cell">Jvm最大可用内存</div></td>
                   <td><div class="cell">{{ServerOS.jvm.maxTotal}}M</div></td>
                 </tr>
+                <tr>
+                  <td class="cell">启动时间</td>
+                  <td class="cell">{{ ServerOS.jvm.startTime }}</td>
+                </tr>
+                <tr>
+                  <td class="cell">运行时长</td>
+                  <td class="cell">{{ ServerOS.jvm.runTime }}</td>
+                </tr>
               </tbody>
             </table>
             </div>
@@ -245,4 +253,4 @@
     margin-bottom: 18px;
     /* padding-bottom: 20px; */
   }
-</style>
+</style>