595 lines
17 KiB
Vue
595 lines
17 KiB
Vue
<!-- 用户管理 -->
|
||
<template>
|
||
|
||
|
||
<div>
|
||
<el-row>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="邀请码">
|
||
<div class="form">
|
||
|
||
<!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
|
||
|
||
<!-- <el-form-item label="搜索用户名">-->
|
||
<!-- <el-input v-model="formInline.name" size="mini" placeholder="" ></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<el-form-item style="margin-left: 10px;">
|
||
<el-button @click="onSubmit" >查看所有用户</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
|
||
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
|
||
|
||
<!-- <el-form-item>-->
|
||
<!-- <el-button v-if="permissions=='管理员'" type="warning" plain @click="onSubmit" icon="el-icon-postcard" size="mini" >点击生成邀请码</el-button>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<el-form-item >
|
||
<el-button type="primary" plain style="margin-right: 10px;margin-left: 10px;" size="mini" icon="el-icon-plus" @click="addInviteCode">点击添加邀请码</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
</div>
|
||
|
||
<el-table v-if="permissions=='管理员'" class='table' :data="tableData" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||
border
|
||
height="100%"
|
||
:row-style="{height:'36px'}"
|
||
:cell-style="{padding:'0px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center">
|
||
|
||
<el-table-column v-for='(val,key) in tableLabel' :prop="key" :label="val" /><!--插槽里面没有东西就可以用单标签 -->
|
||
|
||
<el-table-column
|
||
prop="scale"
|
||
label="操作">
|
||
<template slot-scope="scope">
|
||
|
||
<!-- <el-button v-if="scope.row.权限=='管理员'" v-on:click="detail(scope.row)" size="mini" type="primary">生成邀请码</el-button> -->
|
||
<el-button v-on:click="modify(scope.row)" size="mini" >修改</el-button>
|
||
<el-button v-on:click="delete(scope.row)" size="mini" >删除</el-button>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-button style='width: 150px;' @click="queryInviteCode">邀请码管理</el-button>
|
||
<el-dialog title="邀请码使用情况" :visible.sync="dialogVisible" width="100%">
|
||
<el-table
|
||
:data="inviteCodeData"
|
||
stripe
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="code"
|
||
label="邀请码"
|
||
width="200">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="ctime"
|
||
label="生成时间"
|
||
width="300">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="tuser"
|
||
label="使用者"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="status"
|
||
label="是否使用"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="utime"
|
||
label="使用时间"
|
||
width="300">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
<el-dialog title="用户列表" :visible.sync="usertDataVisible" width="100%">
|
||
<el-table
|
||
:data="usertData"
|
||
stripe
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="realname"
|
||
label="姓名"
|
||
width="200">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="username"
|
||
label="用户名"
|
||
width="200">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="telephone"
|
||
label="电话"
|
||
width="300">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="email"
|
||
label="邮箱"
|
||
width="200">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="unit"
|
||
label="单位"
|
||
width="200">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="position"
|
||
label="职位"
|
||
width="200">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="status"
|
||
label="是否为管理员（1为管理员）"
|
||
width="80">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="当前生成的邀请码" :visible.sync="inviteCodeVisible" width="100%">
|
||
{{inviteCode}}
|
||
</el-dialog>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="用户活动" height="500px">
|
||
<el-form :inline="true">
|
||
|
||
<el-form-item >
|
||
<el-input v-model="name" placeholder="请输入用户名" size="mini" @keyup.enter.native="activity(name,start,end)" @submit.native.prevent></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="开始时间" prop="开始时间">
|
||
<el-date-picker
|
||
v-model="start"
|
||
type="date"
|
||
placeholder="年/月/日"
|
||
size="mini"
|
||
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="结束时间" prop="结束时间">
|
||
<el-date-picker
|
||
v-model="end"
|
||
type="date"
|
||
placeholder="年/月/日"
|
||
size="mini"
|
||
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item >
|
||
<el-button type="primary" plain style="margin-right: 10px;margin-left: 10px;" @click="activity(name,start,end)">查看</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!--用户表-->
|
||
<el-table class='table' :data="activityData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||
border
|
||
height="100%"
|
||
:row-style="{height:'36px'}"
|
||
:cell-style="{padding:'0px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center">
|
||
|
||
<el-table-column v-for='(val,key) in activityLabel' :prop="key" :label="val" /><!--插槽里面没有东西就可以用单标签 -->
|
||
|
||
<!-- <el-table-column-->
|
||
<!-- prop="scale"-->
|
||
<!-- label="操作">-->
|
||
<!-- <template slot-scope="scope">-->
|
||
|
||
<!-- <!– <el-button v-if="scope.row.权限=='管理员'" v-on:click="detail(scope.row)" size="mini" type="primary">生成邀请码</el-button> –>-->
|
||
<!-- <el-button v-on:click="modify(scope.row)" size="mini" >修改</el-button>-->
|
||
<!-- <el-button v-on:click="delete(scope.row)" size="mini" >删除</el-button>-->
|
||
|
||
<!-- </template>-->
|
||
<!-- </el-table-column>-->
|
||
</el-table>
|
||
|
||
<!-- 分页-->
|
||
<div class="block" style="margin-top:15px;">
|
||
<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="activityData.length">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
|
||
|
||
</el-tab-pane>
|
||
<el-tab-pane label="访问模块" height="500px">
|
||
<el-form :inline="true">
|
||
|
||
<el-form-item label="开始时间" prop="开始时间">
|
||
<el-date-picker
|
||
v-model="moduleStart"
|
||
type="date"
|
||
placeholder="年/月/日"
|
||
size="mini"
|
||
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="结束时间" prop="结束时间">
|
||
<el-date-picker
|
||
v-model="moduleEnd"
|
||
type="date"
|
||
placeholder="年/月/日"
|
||
size="mini"
|
||
value-format="yyyy-MM-dd[T]hh:mm:ss[.000Z]"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item >
|
||
<el-button type="primary" plain style="margin-right: 10px;margin-left: 10px;" @click="moduleAct(moduleStart,moduleEnd)">查看</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div id="module" ref="module" style="width:100%;height:300px;"></div>
|
||
<div id="time" ref="time" style="width:100%;height:300px;"></div>
|
||
</el-tab-pane>
|
||
|
||
</el-tabs>
|
||
</el-row>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import http from "@/utils/request";
|
||
import * as echarts from "echarts"
|
||
import {Loading} from "element-ui";
|
||
export default {
|
||
components:{
|
||
},
|
||
data () {
|
||
return {
|
||
moduleStart:'',
|
||
moduleEnd:'',
|
||
start:'',
|
||
end:'',
|
||
currentPage: 1, // 当前页码
|
||
total: 20, // 总条数
|
||
pageSize: 10, // 每页的数据条数
|
||
name:'',
|
||
activityData:[],
|
||
usertData:'',
|
||
usertDataVisible:false,
|
||
inviteCode:'',
|
||
inviteCodeData:[],
|
||
dialogVisible:false,
|
||
inviteCodeVisible:false,
|
||
formInline:{
|
||
name:''
|
||
},
|
||
// 当前用户
|
||
// permissions:'管理员',
|
||
permissions:'普通用户',
|
||
|
||
activityLabel:{
|
||
用户名:'用户名',
|
||
IP:'IP',
|
||
访问模块:'访问模块',
|
||
关键词:'关键词',
|
||
时间:'时间',
|
||
|
||
|
||
},
|
||
|
||
tableLabel: {
|
||
用户名: '用户名',
|
||
姓名: '姓名',
|
||
电话: '电话',
|
||
邮箱: '邮箱',
|
||
单位:'单位',
|
||
职位:'职位',
|
||
权限:'权限',
|
||
|
||
|
||
},
|
||
tableData:[
|
||
{
|
||
用户名: 'user1',
|
||
权限:'管理员',
|
||
},
|
||
{
|
||
用户名: 'test1',
|
||
权限:'普通用户',
|
||
},
|
||
{
|
||
用户名: 'test2',
|
||
权限:'普通用户',
|
||
},
|
||
{
|
||
用户名: 'test3',
|
||
权限:'普通用户',
|
||
},
|
||
{
|
||
用户名: 'user2',
|
||
权限:'管理员',
|
||
},
|
||
{
|
||
用户名: 'test4',
|
||
权限:'普通用户',
|
||
},
|
||
{
|
||
用户名: 'test5',
|
||
权限:'普通用户',
|
||
},
|
||
]
|
||
}
|
||
},
|
||
mounted(){
|
||
|
||
},
|
||
watch:{
|
||
activityData(){
|
||
console.log(this.activityData.length)
|
||
this.total= this.activityData.length
|
||
}
|
||
|
||
},
|
||
methods:{
|
||
|
||
handleSizeChange(val) {
|
||
console.log(`每页 ${val} 条`);
|
||
this.currentPage = 1;
|
||
this.pageSize = val;
|
||
},
|
||
//当前页改变时触发 跳转其他页
|
||
handleCurrentChange(val) {
|
||
console.log(`当前页: ${val}`);
|
||
this.currentPage = val;
|
||
},
|
||
|
||
|
||
activity(name,start,end){
|
||
const params = new URLSearchParams();
|
||
params.append('username', name);
|
||
params.append('stime',start);
|
||
params.append('etime',end);
|
||
// if (start!=='' && end!==''){
|
||
// ''
|
||
// }
|
||
let options={
|
||
text:'请稍等'
|
||
}
|
||
let loadingInstance = Loading.service(options);
|
||
http.post('/users/user_act/',params).then((res)=>{
|
||
this.activityData=res.data
|
||
loadingInstance.close()
|
||
}).finally(()=>
|
||
loadingInstance.close()
|
||
)
|
||
},
|
||
|
||
moduleAct(moduleStart,moduleEnd){
|
||
const params = new URLSearchParams();
|
||
params.append('stime',moduleStart)
|
||
params.append('etime',moduleEnd)
|
||
let options={
|
||
text:'请稍等'
|
||
}
|
||
let loadingInstance = Loading.service(options);
|
||
http.post('/users/model_act/',params).then((res)=>{
|
||
let data=[]
|
||
for (let i in res.data){
|
||
let tmp={}
|
||
tmp['name']=res.data[i]['访问模块']
|
||
tmp['value']=res.data[i]['次数']
|
||
data.push(tmp)
|
||
}
|
||
// let chartDom = document.getElementById('module');
|
||
let myChart = echarts.init(this.$refs.module)
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
// {
|
||
// name: '访问来源',
|
||
// type: 'pie',
|
||
// radius: ['50%', '70%'],
|
||
// avoidLabelOverlap: false,
|
||
// label: {
|
||
// show: false,
|
||
// position: 'center'
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// fontSize: '30',
|
||
// fontWeight: 'bold'
|
||
// }
|
||
// },
|
||
// labelLine: {
|
||
// show: false
|
||
// },
|
||
// data: data
|
||
// }
|
||
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
padAngle: 5,
|
||
itemStyle: {
|
||
borderRadius: 10
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 40,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
};
|
||
// console.log(option)
|
||
myChart.setOption(option)
|
||
console.log(myChart.getOption())
|
||
|
||
})
|
||
http.post('/users/time_act/',params).then((res)=>{
|
||
|
||
let data=[]
|
||
let time=[]
|
||
for (let i in res.data){
|
||
time.push(res.data[i]['访问模块'])
|
||
data.push(res.data[i]['访问量'])
|
||
}
|
||
// let chartDom = document.getElementById('time');
|
||
|
||
let myChart = echarts.init(this.$refs.time);
|
||
let option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
data: time,
|
||
type: 'line',
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
// console.log(option)
|
||
myChart.setOption(option);
|
||
console.log(myChart.getOption())
|
||
})
|
||
loadingInstance.close()
|
||
|
||
|
||
},
|
||
|
||
queryInviteCode(){
|
||
http.get('/users/invite_all/').then((res)=>{
|
||
this.inviteCodeData=res.data
|
||
this.dialogVisible=true
|
||
})
|
||
},
|
||
addInviteCode(){
|
||
http.get('/users/invite/').then((res)=>{
|
||
|
||
this.inviteCode=res.data
|
||
this.inviteCodeVisible=true
|
||
})
|
||
},
|
||
onSubmit(){
|
||
http.post('/users/all_users/').then((res)=>{
|
||
this.usertData=res.data
|
||
this.usertDataVisible=true
|
||
})
|
||
|
||
|
||
},
|
||
modify(){},
|
||
delete(){},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang='less' scoped>
|
||
.form1{//2、产品搜索栏
|
||
|
||
display:flex;
|
||
justify-content:space-between;//左右贴边
|
||
margin:0px;
|
||
// height: 40px;
|
||
padding-left: 5px;
|
||
.el-form-item {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
}
|
||
.form{//搜索栏
|
||
|
||
display:flex;
|
||
justify-content:space-between;//左右贴边
|
||
// margin-top:5px;
|
||
// height: 40px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.table{
|
||
margin-top: 0px;
|
||
margin-right: 0px;
|
||
margin-left: 5px;
|
||
padding: 0px;
|
||
}
|
||
// /deep/ .el-table {
|
||
// width: 98.5% !important;
|
||
// }
|
||
// /deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||
// border-bottom: 1px solid rgba(224, 223, 223, 0.771) !important;
|
||
// padding: 0px 0 !important;
|
||
// min-width: 0 !important;
|
||
// }
|
||
// .el-table .el-table__cell {
|
||
// padding: 20px 0;
|
||
// min-width: 0;
|
||
// }
|
||
/deep/ .active_header{//表头
|
||
color: #333333;
|
||
font-size: 13px;
|
||
text-align: center !important;
|
||
// height: 1px;
|
||
}
|
||
/deep/ .content_center{//表的内容
|
||
text-align: center !important;
|
||
font-size: 13px;
|
||
}
|
||
|
||
|
||
|
||
.grayish_btn{//浅灰色按钮
|
||
color: #fff;//文字颜色
|
||
background-color: #aaaaaa;//背景颜色
|
||
}
|
||
|
||
.el-tabs--card {
|
||
height: calc(100vh - 110px);
|
||
/* overflow-y: auto; */
|
||
}
|
||
.el-tab-pane {
|
||
height: calc(100vh - 110px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
</style>
|