陈志鹏
2 years ago
12 changed files with 418 additions and 575 deletions
@ -1,4 +1,6 @@
@@ -1,4 +1,6 @@
|
||||
'use strict' |
||||
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 @@
@@ -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 @@
@@ -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 @@
@@ -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