陈志鹏
2 years ago
12 changed files with 418 additions and 575 deletions
@ -1,4 +1,6 @@ |
|||||||
'use strict' |
'use strict' |
||||||
module.exports = { |
module.exports = { |
||||||
NODE_ENV: '"production"' |
NODE_ENV: '"production"', |
||||||
|
VUE_APP_MODE: 'production', |
||||||
|
VUE_APP_API_URL: 'https://api.zhongxuemall.com.cn' |
||||||
} |
} |
||||||
|
|||||||
@ -1,137 +0,0 @@ |
|||||||
<template> |
|
||||||
<el-container class="home_container"> |
|
||||||
<el-header> |
|
||||||
<div class="home_title">自研平台</div> |
|
||||||
<div class="home_userinfoContainer"> |
|
||||||
<el-dropdown @command="handleCommand"> |
|
||||||
<span class="el-dropdown-link home_userinfo"> |
|
||||||
{{currentUserName}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i> |
|
||||||
</span> |
|
||||||
<el-dropdown-menu slot="dropdown"> |
|
||||||
<el-dropdown-item command="sysMsg">系统消息</el-dropdown-item> |
|
||||||
<el-dropdown-item command="MyHome">个人主页</el-dropdown-item> |
|
||||||
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> |
|
||||||
</el-dropdown-menu> |
|
||||||
</el-dropdown> |
|
||||||
</div> |
|
||||||
</el-header> |
|
||||||
<el-container> |
|
||||||
<el-aside width="200px"> |
|
||||||
<el-menu |
|
||||||
default-active="0" |
|
||||||
class="el-menu-vertical-demo" style="background-color: #ECECEC" router> |
|
||||||
<template v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden"> |
|
||||||
<el-submenu :index="index+''" v-if="item.children.length>1" :key="index"> |
|
||||||
<template slot="title"> |
|
||||||
<i :class="item.iconCls"></i> |
|
||||||
<span>{{item.name}}</span> |
|
||||||
</template> |
|
||||||
<el-menu-item v-for="child in item.children" v-if="!child.hidden" :index="child.path" :key="child.path"> |
|
||||||
{{child.name}} |
|
||||||
</el-menu-item> |
|
||||||
</el-submenu> |
|
||||||
<template v-else> |
|
||||||
<el-menu-item :index="item.children[0].path"> |
|
||||||
<i :class="item.children[0].iconCls"></i> |
|
||||||
<span slot="title">{{item.children[0].name}}</span> |
|
||||||
</el-menu-item> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
</el-menu> |
|
||||||
</el-aside> |
|
||||||
<el-container> |
|
||||||
<el-main> |
|
||||||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|
||||||
<el-breadcrumb-item :to="{ path: '/home' }"></el-breadcrumb-item> |
|
||||||
<el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item> |
|
||||||
</el-breadcrumb> |
|
||||||
<keep-alive> |
|
||||||
<router-view v-if="this.$route.meta.keepAlive"></router-view> |
|
||||||
</keep-alive> |
|
||||||
<router-view v-if="!this.$route.meta.keepAlive"> |
|
||||||
</router-view> |
|
||||||
</el-main> |
|
||||||
</el-container> |
|
||||||
</el-container> |
|
||||||
</el-container> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import {getRequest} from '../utils/api' |
|
||||||
export default{ |
|
||||||
methods: { |
|
||||||
handleCommand(command){ |
|
||||||
var _this = this; |
|
||||||
if (command == 'logout') { |
|
||||||
this.$confirm('注销登录吗?', '提示', { |
|
||||||
confirmButtonText: '确定', |
|
||||||
cancelButtonText: '取消', |
|
||||||
type: 'warning' |
|
||||||
}).then(function () { |
|
||||||
getRequest("/logout") |
|
||||||
_this.currentUserName = '临时用户'; |
|
||||||
_this.$router.replace({path: '/'}); |
|
||||||
}, function () { |
|
||||||
//取消 |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted: function () { |
|
||||||
var _this = this; |
|
||||||
getRequest("/currentUserName").then(function (msg) { |
|
||||||
_this.currentUserName = msg.data; |
|
||||||
}, function (msg) { |
|
||||||
_this.currentUserName = '临时用户'; |
|
||||||
}); |
|
||||||
}, |
|
||||||
data(){ |
|
||||||
return { |
|
||||||
currentUserName: '' |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style> |
|
||||||
.home_container { |
|
||||||
height: 100%; |
|
||||||
position: absolute; |
|
||||||
top: 0px; |
|
||||||
left: 0px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.el-header { |
|
||||||
background-color: dodgerblue; |
|
||||||
color: #333; |
|
||||||
text-align: center; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.el-aside { |
|
||||||
background-color: #ECECEC; |
|
||||||
} |
|
||||||
|
|
||||||
.el-main { |
|
||||||
background-color: #fff; |
|
||||||
color: #000; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.home_title { |
|
||||||
color: #fff; |
|
||||||
font-size: 22px; |
|
||||||
display: inline; |
|
||||||
} |
|
||||||
|
|
||||||
.home_userinfo { |
|
||||||
color: #fff; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.home_userinfoContainer { |
|
||||||
display: inline; |
|
||||||
margin-right: 20px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,179 +0,0 @@ |
|||||||
<template> |
|
||||||
<div v-loading="loading"> |
|
||||||
<div>自研平台</div> |
|
||||||
<div> |
|
||||||
<img src="https://t7.baidu.com/it/u=2405382010,1555992666&fm=193&f=GIF" style="height: 800px"> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import {getRequest} from '../utils/api' |
|
||||||
import {putRequest} from '../utils/api' |
|
||||||
import {deleteRequest} from '../utils/api' |
|
||||||
export default{ |
|
||||||
mounted: function () { |
|
||||||
this.loading = true; |
|
||||||
this.loadUserList(); |
|
||||||
this.cardloading = Array.apply(null, Array(20)).map(function (item, i) { |
|
||||||
return false; |
|
||||||
}); |
|
||||||
this.eploading = Array.apply(null, Array(20)).map(function (item, i) { |
|
||||||
return false; |
|
||||||
}); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
saveRoles(id, index){ |
|
||||||
var selRoles = this.roles; |
|
||||||
if (this.cpRoles.length == selRoles.length) { |
|
||||||
for (var i = 0; i < this.cpRoles.length; i++) { |
|
||||||
for (var j = 0; j < selRoles.length; j++) { |
|
||||||
if (this.cpRoles[i].id == selRoles[j]) { |
|
||||||
selRoles.splice(j, 1); |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
if (selRoles.length == 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
} |
|
||||||
var _this = this; |
|
||||||
_this.cardloading.splice(index, 1, true) |
|
||||||
putRequest("/admin/user/role", {rids: this.roles, id: id}).then(resp=> { |
|
||||||
if (resp.status == 200 && resp.data.status == 'success') { |
|
||||||
_this.$message({type: resp.data.status, message: resp.data.msg}); |
|
||||||
_this.loadOneUserById(id, index); |
|
||||||
} else { |
|
||||||
_this.cardloading.splice(index, 1, false) |
|
||||||
_this.$message({type: 'error', message: '更新失败!'}); |
|
||||||
} |
|
||||||
}, resp=> { |
|
||||||
_this.cardloading.splice(index, 1, false) |
|
||||||
if (resp.response.status == 403) { |
|
||||||
var data = resp.response.data; |
|
||||||
_this.$message({type: 'error', message: data}); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
showRole(aRoles, id, index){ |
|
||||||
this.cpRoles = aRoles; |
|
||||||
this.roles = []; |
|
||||||
this.loadRoles(index); |
|
||||||
for (var i = 0; i < aRoles.length; i++) { |
|
||||||
this.roles.push(aRoles[i].id); |
|
||||||
} |
|
||||||
}, |
|
||||||
deleteUser(id){ |
|
||||||
var _this = this; |
|
||||||
this.$confirm('删除该用户, 是否继续?', '提示', { |
|
||||||
confirmButtonText: '确定', |
|
||||||
cancelButtonText: '取消', |
|
||||||
type: 'warning' |
|
||||||
}).then(() => { |
|
||||||
_this.loading = true; |
|
||||||
deleteRequest("/admin/user/" + id).then(resp=> { |
|
||||||
if (resp.status == 200 && resp.data.status == 'success') { |
|
||||||
_this.$message({type: 'success', message: '删除成功!'}) |
|
||||||
_this.loadUserList(); |
|
||||||
return; |
|
||||||
} |
|
||||||
_this.loading = false; |
|
||||||
_this.$message({type: 'error', message: '删除失败!'}) |
|
||||||
}, resp=> { |
|
||||||
_this.loading = false; |
|
||||||
_this.$message({type: 'error', message: '删除失败!'}) |
|
||||||
}); |
|
||||||
}).catch(() => { |
|
||||||
_this.$message({ |
|
||||||
type: 'info', |
|
||||||
message: '已取消删除' |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
enabledChange(enabled, id, index){ |
|
||||||
var _this = this; |
|
||||||
_this.cardloading.splice(index, 1, true) |
|
||||||
putRequest("/admin/user/enabled", {enabled: enabled, uid: id}).then(resp=> { |
|
||||||
if (resp.status != 200) { |
|
||||||
_this.$message({type: 'error', message: '更新失败!'}) |
|
||||||
_this.loadOneUserById(id, index); |
|
||||||
return; |
|
||||||
} |
|
||||||
_this.cardloading.splice(index, 1, false) |
|
||||||
_this.$message({type: 'success', message: '更新成功!'}) |
|
||||||
}, resp=> { |
|
||||||
_this.$message({type: 'error', message: '更新失败!'}) |
|
||||||
_this.loadOneUserById(id, index); |
|
||||||
}); |
|
||||||
}, |
|
||||||
loadRoles(index){ |
|
||||||
var _this = this; |
|
||||||
_this.eploading.splice(index, 1, true) |
|
||||||
getRequest("/admin/roles").then(resp=> { |
|
||||||
_this.eploading.splice(index, 1, false) |
|
||||||
if (resp.status == 200) { |
|
||||||
_this.allRoles = resp.data; |
|
||||||
} else { |
|
||||||
_this.$message({type: 'error', message: '数据加载失败!'}); |
|
||||||
} |
|
||||||
}, resp=> { |
|
||||||
_this.eploading.splice(index, 1, false) |
|
||||||
if (resp.response.status == 403) { |
|
||||||
var data = resp.response.data; |
|
||||||
_this.$message({type: 'error', message: data}); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
loadOneUserById(id, index){ |
|
||||||
var _this = this; |
|
||||||
getRequest("/admin/user/" + id).then(resp=> { |
|
||||||
_this.cardloading.splice(index, 1, false) |
|
||||||
if (resp.status == 200) { |
|
||||||
_this.users.splice(index, 1, resp.data); |
|
||||||
} else { |
|
||||||
_this.$message({type: 'error', message: '数据加载失败!'}); |
|
||||||
} |
|
||||||
}, resp=> { |
|
||||||
_this.cardloading.splice(index, 1, false) |
|
||||||
if (resp.response.status == 403) { |
|
||||||
var data = resp.response.data; |
|
||||||
_this.$message({type: 'error', message: data}); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
loadUserList(){ |
|
||||||
var _this = this; |
|
||||||
getRequest("/admin/user?nickname="+this.keywords).then(resp=> { |
|
||||||
_this.loading = false; |
|
||||||
if (resp.status == 200) { |
|
||||||
_this.users = resp.data; |
|
||||||
} else { |
|
||||||
_this.$message({type: 'error', message: '数据加载失败!'}); |
|
||||||
} |
|
||||||
}, resp=> { |
|
||||||
_this.loading = false; |
|
||||||
if (resp.response.status == 403) { |
|
||||||
var data = resp.response.data; |
|
||||||
_this.$message({type: 'error', message: data}); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
searchClick(){ |
|
||||||
this.loading = true; |
|
||||||
this.loadUserList(); |
|
||||||
} |
|
||||||
}, |
|
||||||
data(){ |
|
||||||
return { |
|
||||||
loading: false, |
|
||||||
eploading: [], |
|
||||||
cardloading: [], |
|
||||||
keywords: '', |
|
||||||
users: [], |
|
||||||
allRoles: [], |
|
||||||
roles: [], |
|
||||||
cpRoles: [] |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -0,0 +1,108 @@ |
|||||||
|
<template> |
||||||
|
<div class="echart" id="mychart" :style="myChartStyle"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from 'echarts' |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
xData: ['2022/10/11', '2022/10/12', '2022/10/13', '2022/10/14', '2022/10/15', '2022/10/16', '2022/10/17'], //横坐标 |
||||||
|
yData: [23, 24, 18, 25, 27, 28, 25], //数据 |
||||||
|
myChartStyle: { float: 'left', width: '100%', height: '400px' }, //图表样式 |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initEcharts() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initEcharts() { |
||||||
|
// 基本柱状图 |
||||||
|
const option = { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||||
|
{ offset: 0, color: '#00fffb' }, //0 起始颜色 |
||||||
|
{ offset: 1, color: '#0061ce' }, //1 结束颜色 |
||||||
|
]), |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '0%', |
||||||
|
right: '3%', |
||||||
|
bottom: '3%', |
||||||
|
top: '3%', |
||||||
|
// 图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关 |
||||||
|
containLabel: true, |
||||||
|
//是否显示直角坐标系网络 |
||||||
|
show: true, |
||||||
|
//grid 四条边框的颜色 |
||||||
|
borderColor: 'rgba(0, 240, 255, 0.3)', |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: this.xData, |
||||||
|
axisTick: { |
||||||
|
alignWithLabel: false, |
||||||
|
// 把x轴的刻度隐藏起来 |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: '#4c9bfd', |
||||||
|
}, |
||||||
|
// x轴这条线的颜色样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(0, 240, 255, 0.3)', |
||||||
|
// width: 3 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: 'value', |
||||||
|
axisTick: { |
||||||
|
alignWithLabel: false, |
||||||
|
// 把y轴的刻度隐藏起来 |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
color: '#4c9bfd', |
||||||
|
}, |
||||||
|
// y轴这条线的颜色样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(0, 240, 255, 0.3)', |
||||||
|
// width: 3 |
||||||
|
}, |
||||||
|
}, |
||||||
|
// y轴分割线的颜色样式 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(0, 240, 255, 0.3)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
legend: { |
||||||
|
itemWidth: 14, |
||||||
|
itemHeight: 10, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'bar', //形状为柱状图 |
||||||
|
data: this.yData, |
||||||
|
barWidth: 20, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
const myChart = echarts.init(document.getElementById('mychart')) |
||||||
|
myChart.setOption(option) |
||||||
|
//随着屏幕大小调节图表 |
||||||
|
window.addEventListener('resize', () => { |
||||||
|
myChart.resize() |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
Loading…
Reference in new issue