新增用户流量报表、license流量报表页面，及后端接口定义
This commit is contained in:
aoshiguchen
@@ -0,0 +1,16 @@
|
||||
import request from '@/utils/request'
|
||||
export function fetchUserFlowReportList(query) {
|
||||
return request({
|
||||
url: '/report/user/flow-report/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchLicenseFlowReportList(query) {
|
||||
return request({
|
||||
url: '/report/license/flow-report/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@@ -56,7 +56,10 @@ export default {
|
||||
jobLog: '调度日志',
|
||||
log: '日志管理',
|
||||
loginLog: '登录日志',
|
||||
clientConnectLog: '客户端连接日志'
|
||||
clientConnectLog: '客户端连接日志',
|
||||
report: '报表管理',
|
||||
userFlowReport: '用户流量报表',
|
||||
licenseFlowReport: 'License流量报表'
|
||||
},
|
||||
navbar: {
|
||||
logOut: '退出登录',
|
||||
@@ -153,7 +156,10 @@ export default {
|
||||
msg: '消息',
|
||||
outcome: '结果',
|
||||
err: '异常信息',
|
||||
resetKey: '重置Key'
|
||||
resetKey: '重置Key',
|
||||
upFlow: '上行流量',
|
||||
downFlow: '下行流量',
|
||||
totalFlow: '总流量'
|
||||
},
|
||||
button: {
|
||||
lookOver: '查看'
|
||||
|
||||
@@ -80,6 +80,20 @@ export const asyncRouterMap = [
|
||||
{ path: 'jobManager', component: _import('system/jobManager'), name: 'jobManager', meta: { title: 'jobManager' }}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/report',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'report',
|
||||
meta: {
|
||||
title: 'report',
|
||||
icon: 'component'
|
||||
},
|
||||
children: [
|
||||
{ path: 'userFlowReport', component: _import('report/userFlowReport'), name: 'userFlowReport', meta: { title: 'userFlowReport' }},
|
||||
{ path: 'licenseFlowReport', component: _import('report/licenseFlowReport'), name: 'licenseFlowReport', meta: { title: 'licenseFlowReport' }}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/log',
|
||||
component: Layout,
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-select v-model="listQuery.userId" placeholder="请选择用户" clearable>
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
<el-button type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column type="index" width="100" :label="$t('table.id')"></el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.userName')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.licenseName')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.licenseName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.upFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.upFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.downFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.downFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.totalFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.totalFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pageInfo.sync="listQuery.current"
|
||||
:pageInfo-sizes="[10,20,30, 50]" :pageInfo-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchLicenseFlowReportList } from '@/api/report'
|
||||
import { userList } from '@/api/user'
|
||||
import waves from '@/directive/waves'
|
||||
|
||||
export default {
|
||||
name: 'jobLog',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
jobId: undefined
|
||||
},
|
||||
userList: [],
|
||||
dialogVisible: false,
|
||||
selectRow: {}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
},
|
||||
activated() {
|
||||
this.getUserList()
|
||||
if (this.$route.query.jobId) {
|
||||
this.listQuery.jobId = this.$route.query.jobId
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchLicenseFlowReportList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleShowClick(row) {
|
||||
console.log(row)
|
||||
},
|
||||
handleLookOver(row) {
|
||||
this.selectRow = row
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.job-msg-div{
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-select v-model="listQuery.userId" placeholder="请选择用户" clearable>
|
||||
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
<el-button type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column type="index" width="100" :label="$t('table.id')"></el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.userName')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.userName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.upFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.upFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.downFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.downFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" :label="$t('table.totalFlow')" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.totalFlowDesc}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-pageInfo.sync="listQuery.current"
|
||||
:pageInfo-sizes="[10,20,30, 50]" :pageInfo-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchUserFlowReportList } from '@/api/report'
|
||||
import { userList } from '@/api/user'
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
|
||||
export default {
|
||||
name: 'jobLog',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableKey: 0,
|
||||
list: null,
|
||||
total: null,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
jobId: undefined
|
||||
},
|
||||
userList: [],
|
||||
dialogVisible: false,
|
||||
selectRow: {}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getUserList()
|
||||
},
|
||||
activated() {
|
||||
this.getUserList()
|
||||
if (this.$route.query.jobId) {
|
||||
this.listQuery.jobId = this.$route.query.jobId
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchUserFlowReportList(this.listQuery).then(response => {
|
||||
this.list = response.data.data.records
|
||||
this.total = response.data.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getUserList() {
|
||||
userList().then(response => {
|
||||
this.userList = response.data.data
|
||||
})
|
||||
},
|
||||
handleFilter() {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.size = val
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.current = val
|
||||
this.getList()
|
||||
},
|
||||
handleShowClick(row) {
|
||||
console.log(row)
|
||||
},
|
||||
handleLookOver(row) {
|
||||
this.selectRow = row
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.job-msg-div{
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user