mirror of
https://github.com/flipped-aurora/gin-vue-admin.git
synced 2026-10-12 04:12:05 +00:00
Merge branch 'gva_gormv2_dev' of https://github.com/flipped-aurora/gin-vue-admin into gva_workflow
Conflicts: server/api/v1/sys_work_flow.go server/service/sys_workflow.go
This commit is contained in:
pixel
@@ -58,10 +58,10 @@ export const getTable = (params) => {
|
||||
// @accept application/json
|
||||
// @Produce application/json
|
||||
// @Success 200 {string} string "{"success":true,"data":{},"msg":"创建成功"}"
|
||||
// @Router /autoCode/getColume [get]
|
||||
export const getColume = (params) => {
|
||||
// @Router /autoCode/getColumn [get]
|
||||
export const getColumn = (params) => {
|
||||
return service({
|
||||
url: "/autoCode/getColume",
|
||||
url: "/autoCode/getColumn",
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
|
||||
+2
-1
@@ -66,7 +66,8 @@ Vue.prototype.$echarts = echarts;
|
||||
|
||||
console.log(`
|
||||
欢迎使用 Gin-Vue-Admin
|
||||
当前版本:V2.3.4
|
||||
当前版本:V2.3.6
|
||||
默认自动化文档地址:http://127.0.0.1%s/swagger/index.html
|
||||
默认前端文件运行地址:http://127.0.0.1:8080
|
||||
如果项目让您获得了收益，希望您能请团队喝杯可乐:https://www.gin-vue-admin.com/docs/coffee
|
||||
`)
|
||||
@@ -0,0 +1,24 @@
|
||||
// basice
|
||||
$font-size: 14px;
|
||||
$icon-size:17px;
|
||||
$active-color:#1890ff;
|
||||
$bg-main:#f0f2f5;
|
||||
$border-color: #f4f4f4;
|
||||
|
||||
// aside
|
||||
$color-aside:rgba(255, 255, 255,.9);
|
||||
$icon-arrow-size-aside:12px;
|
||||
$width-submenu-aside:55px;
|
||||
$bg-aside:#191a23;
|
||||
// header
|
||||
$height-header: 60px;
|
||||
// nav-scroll
|
||||
$height-nav-scroll:40px;
|
||||
$active-bg-tabs-item-nav-scroll:#409eff;
|
||||
$bg-tabs-item-nav-scroll:#ddd;
|
||||
// table
|
||||
$bg-color-table-thead:#fafafa;
|
||||
$border-color-table:#ededed;
|
||||
$height-table-cell:45px;
|
||||
$color-table-tbody:#595959;
|
||||
$color-table-thead:#262626;
|
||||
@@ -0,0 +1,134 @@
|
||||
.login-register-box {
|
||||
height: 100vh;
|
||||
.login-box {
|
||||
width: 40vw;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -22vw;
|
||||
top: 5vh;
|
||||
.logo {
|
||||
height: 35vh;
|
||||
width: 35vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.vPic {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right !important;
|
||||
background: #ccc;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.logo_login {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#userLayout.user-layout-wrapper {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
&.mobile {
|
||||
.container {
|
||||
.main {
|
||||
max-width: 368px;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
|
||||
background-size: 100%;
|
||||
padding: 110px 0 144px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
margin-top: -40px;
|
||||
.header {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin-bottom: 30px;
|
||||
.badge {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-left: -12px;
|
||||
margin-top: -10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 44px;
|
||||
vertical-align: top;
|
||||
margin-right: 16px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 33px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 260px;
|
||||
width: 368px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
margin: 40px 0 10px;
|
||||
text-align: center;
|
||||
.links {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
width: 330px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-right: 40px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+371
-59
@@ -7,6 +7,7 @@
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
@import '@/style/basics.scss';
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
@@ -531,31 +532,30 @@ li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
tr {
|
||||
td {
|
||||
.cell {
|
||||
.el-button+.el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .el-table__body-wrapper {
|
||||
// tr {
|
||||
// td {
|
||||
// .cell {
|
||||
// .el-button+.el-button {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// navbar
|
||||
.aside {
|
||||
.el-scrollbar {
|
||||
.el-scrollbar__view {
|
||||
.el-menu-vertical {
|
||||
background-color: #001529;
|
||||
background-color: $bg-aside;
|
||||
}
|
||||
.el-menu-item:hover i,
|
||||
.el-menu-item:hover span {
|
||||
color: #fff;
|
||||
}
|
||||
li {
|
||||
background-color: #001529;
|
||||
background-color: $bg-aside;
|
||||
ul {
|
||||
.el-menu-item {
|
||||
background-color: #000408;
|
||||
@@ -568,7 +568,7 @@ li {
|
||||
}
|
||||
}
|
||||
.el-submenu__title:hover {
|
||||
background-color: #001529;
|
||||
background-color: $bg-aside;
|
||||
}
|
||||
.el-submenu__title:hover i,
|
||||
.el-submenu__title:hover span {
|
||||
@@ -589,10 +589,6 @@ li {
|
||||
background-color: #ecf0f5;
|
||||
padding: 0;
|
||||
}
|
||||
.breadcrumb {
|
||||
background-color: #fff;
|
||||
padding: 0 0 15px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -742,7 +738,7 @@ li {
|
||||
-webkit-transition: width .2s;
|
||||
transition: width .2s;
|
||||
width: 220px;
|
||||
background-color: #304156;
|
||||
background-color: $bg-aside;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
@@ -815,22 +811,14 @@ li {
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu .el-menu--inline {
|
||||
background: #2c3b41;
|
||||
}
|
||||
|
||||
.el-submenu .el-submenu {
|
||||
background-color: #000408 !important;
|
||||
}
|
||||
|
||||
// .el-menu .el-menu--inline {
|
||||
// background: #2c3b41;
|
||||
// }
|
||||
// .el-submenu .el-submenu {
|
||||
// background-color: #000408 !important;
|
||||
// }
|
||||
.aside .el-scrollbar .el-scrollbar__view .el-submenu__title:hover {
|
||||
background-color: #000408 !important;
|
||||
}
|
||||
|
||||
.el-submenu {
|
||||
.aside .el-scrollbar .el-scrollbar__view .el-submenu__title:hover {
|
||||
background-color: #000408 !important;
|
||||
}
|
||||
background-color: $bg-aside !important;
|
||||
}
|
||||
|
||||
.el-menu--vertical {
|
||||
@@ -852,8 +840,8 @@ li {
|
||||
// add 5.13
|
||||
.el-container {
|
||||
.admin-box {
|
||||
padding: 24px 24px 40px 24px;
|
||||
margin: 115px 24px 24px 24px;
|
||||
padding: 15px;
|
||||
margin: 115px 15px 20px;
|
||||
border-radius: 2px;
|
||||
.button-box {
|
||||
border: none;
|
||||
@@ -863,12 +851,10 @@ li {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.el-table--border {
|
||||
th {
|
||||
border-left: 1px solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
.el-table {
|
||||
thead {
|
||||
color: $color-table-thead;
|
||||
}
|
||||
th {
|
||||
padding: 5px 0;
|
||||
.cell {
|
||||
@@ -927,17 +913,17 @@ li {
|
||||
}
|
||||
|
||||
.el-container.layout-cont {
|
||||
.header-cont,
|
||||
.breadcrumb {
|
||||
height: 40px !important;
|
||||
line-height: 40px !important;
|
||||
}
|
||||
// .header-cont,
|
||||
// .breadcrumb {
|
||||
// height: 40px !important;
|
||||
// line-height: 40px !important;
|
||||
// }
|
||||
.main-cont.el-main {
|
||||
background-color: #f0f2f5;
|
||||
background-color: $bg-main;
|
||||
.menu-total {
|
||||
font-size: 22px;
|
||||
color: #838383;
|
||||
margin-top: 7px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
// background-color: #f0f2f5;
|
||||
}
|
||||
@@ -946,15 +932,37 @@ li {
|
||||
.el-container.layout-cont {
|
||||
.main-cont {
|
||||
.router-history {
|
||||
padding-bottom: 8px;
|
||||
padding-top: 5px;
|
||||
border-color: #f9f9f9;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
background: #fff;
|
||||
padding: 0 6px;
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 0;
|
||||
.el-tabs__header {
|
||||
margin: 0px 0 0 0;
|
||||
.el-tabs__item {
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
height: $height-nav-scroll;
|
||||
height: $height-nav-scroll;
|
||||
border: none;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
.el-tabs__item::before {
|
||||
content: "";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
background-color: #ddd;
|
||||
border-radius: 50%;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.el-tabs__item.is-active::before {
|
||||
background-color: #409eff;
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
background-color: rgba(64, 158, 255, .08);
|
||||
}
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1014,7 +1022,8 @@ li {
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-number__decrease, .el-input-number__increase{
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 6px !important;
|
||||
@@ -1028,7 +1037,310 @@ li {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-button {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.table-button{
|
||||
margin-right:8px !important;
|
||||
}
|
||||
$headerHigh: 52px;
|
||||
$mainHight: 100vh;
|
||||
.dropdown-group {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.topfix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.admin-box {
|
||||
min-height: calc(100vh - 200px);
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.layout-cont {
|
||||
.right-box {
|
||||
height: $height-header;
|
||||
line-height: $height-header;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin-right: 40px;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.header-cont {
|
||||
height: $height-header;
|
||||
background: #fff;
|
||||
}
|
||||
.main-cont {
|
||||
.breadcrumb {
|
||||
height: $height-header;
|
||||
line-height: $height-header;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.fl-right {
|
||||
// height: $height-header;
|
||||
// line-height: $height-header;
|
||||
}
|
||||
&.el-main {
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
height: $mainHight !important;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
.menu-total {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.aside {
|
||||
overflow: auto;
|
||||
// background: #fff;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-menu-vertical {
|
||||
height: calc(100vh - 64px) !important;
|
||||
visibility: auto;
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse {
|
||||
width: 54px;
|
||||
li {
|
||||
.el-tooltip,
|
||||
.el-submenu__title {
|
||||
padding: 0px 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.main-left {
|
||||
width: auto !important;
|
||||
}
|
||||
&.main-right {
|
||||
.admin-title {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.collapse {
|
||||
width: 53px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tilte {
|
||||
min-height: 64px;
|
||||
line-height: 64px;
|
||||
background: $bg-aside;
|
||||
text-align: center;
|
||||
.logoimg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
padding: 3px;
|
||||
}
|
||||
.tit-text {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.screenfull {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header-avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-component {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 60px;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
border-bottom: 1px solid #606266;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: $icon-size;
|
||||
margin-right: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
}
|
||||
.dropdown-group {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-box {
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.screenfull {
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
overflow: hidden;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
.car-left {
|
||||
height: 68px;
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
.car-right {
|
||||
height: 68px;
|
||||
width: 29%;
|
||||
float: left;
|
||||
.flow,
|
||||
.user-number,
|
||||
.feedback {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.flow {
|
||||
background-color: #fff7e8;
|
||||
border-color: #feefd0;
|
||||
color: #faad14;
|
||||
}
|
||||
.user-number {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #d9ecff;
|
||||
color: #409eff;
|
||||
}
|
||||
.feedback {
|
||||
background-color: #eef9e8;
|
||||
border-color: #dcf3d1;
|
||||
color: #52c41a;
|
||||
}
|
||||
.car-item {
|
||||
text-align: right;
|
||||
b {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-img {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
height: 68px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
margin-top: 14px;
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
color: #262626;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tips-text {
|
||||
color: #8c8c8c;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
margin: 5px 0;
|
||||
.grid-content {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
.el-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}::-webkit-scrollbar-track-piece{
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb{
|
||||
background-color: #dddddd;
|
||||
background-clip:padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover{
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
@@ -68,12 +68,12 @@ service.interceptors.response.use(
|
||||
Message({
|
||||
showClose: true,
|
||||
message: response.data.msg || decodeURI(response.headers.msg),
|
||||
type: 'error',
|
||||
type: response.headers.msgtype||'error',
|
||||
})
|
||||
if (response.data.data && response.data.data.reload) {
|
||||
store.commit('user/LoginOut')
|
||||
}
|
||||
return response.data.msg
|
||||
return response.data.msg ? response.data : response
|
||||
}
|
||||
},
|
||||
error => {
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
name:'RaddarChart',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
/* this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)*/
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
// window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'light')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(255,192,203,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,391 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
name: "Sunburst",
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
datas:[
|
||||
{
|
||||
name: 'Flora',
|
||||
itemStyle: {
|
||||
color: '#da0d68'
|
||||
},
|
||||
children: [{
|
||||
name: 'Black Tea',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#975e6d'
|
||||
}
|
||||
}, {
|
||||
name: 'Floral',
|
||||
itemStyle: {
|
||||
color: '#e0719c'
|
||||
},
|
||||
children: [{
|
||||
name: 'Chamomile',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#f99e1c'
|
||||
}
|
||||
}, {
|
||||
name: 'Rose',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#ef5a78'
|
||||
}
|
||||
}, {
|
||||
name: 'Jasmine',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#f7f1bd'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: 'Fruity',
|
||||
itemStyle: {
|
||||
color: '#da1d23'
|
||||
},
|
||||
children: [{
|
||||
name: 'Berry',
|
||||
itemStyle: {
|
||||
color: '#dd4c51'
|
||||
},
|
||||
children: [{
|
||||
name: 'Blackberry',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#3e0317'
|
||||
}
|
||||
}, {
|
||||
name: 'Raspberry',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#e62969'
|
||||
}
|
||||
}, {
|
||||
name: 'Blueberry',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#6569b0'
|
||||
}
|
||||
}, {
|
||||
name: 'Strawberry',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#ef2d36'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
name: 'Dried Fruit',
|
||||
itemStyle: {
|
||||
color: '#c94a44'
|
||||
},
|
||||
children: [{
|
||||
name: 'Raisin',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#b53b54'
|
||||
}
|
||||
}, {
|
||||
name: 'Prune',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#a5446f'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
name: 'Other Fruit',
|
||||
itemStyle: {
|
||||
color: '#dd4c51'
|
||||
},
|
||||
children: [{
|
||||
name: 'Coconut',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#f2684b'
|
||||
}
|
||||
}, {
|
||||
name: 'Cherry',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#e73451'
|
||||
}
|
||||
}, {
|
||||
name: 'Pomegranate',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#e65656'
|
||||
}
|
||||
}, {
|
||||
name: 'Pineapple',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#f89a1c'
|
||||
}
|
||||
}, {
|
||||
name: 'Grape',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#aeb92c'
|
||||
}
|
||||
}, {
|
||||
name: 'Apple',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#4eb849'
|
||||
}
|
||||
}, {
|
||||
name: 'Peach',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#f68a5c'
|
||||
}
|
||||
}, {
|
||||
name: 'Pear',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#baa635'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
name: 'Citrus Fruit',
|
||||
itemStyle: {
|
||||
color: '#f7a128'
|
||||
},
|
||||
children: [{
|
||||
name: 'Grapefruit',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#f26355'
|
||||
}
|
||||
}, {
|
||||
name: 'Orange',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#e2631e'
|
||||
}
|
||||
}, {
|
||||
name: 'Lemon',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#fde404'
|
||||
}
|
||||
}, {
|
||||
name: 'Lime',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#7eb138'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: 'Other',
|
||||
itemStyle: {
|
||||
color: '#0aa3b5'
|
||||
},
|
||||
children: [{
|
||||
name: 'Papery/Musty',
|
||||
itemStyle: {
|
||||
color: '#9db2b7'
|
||||
},
|
||||
children: [{
|
||||
name: 'Stale',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#8b8c90'
|
||||
}
|
||||
}, {
|
||||
name: 'Cardboard',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#beb276'
|
||||
}
|
||||
}, {
|
||||
name: 'Papery',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#fefef4'
|
||||
}
|
||||
}, {
|
||||
name: 'Woody',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#744e03'
|
||||
}
|
||||
}, {
|
||||
name: 'Moldy/Damp',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#a3a36f'
|
||||
}
|
||||
}, {
|
||||
name: 'Musty/Dusty',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#c9b583'
|
||||
}
|
||||
}, {
|
||||
name: 'Musty/Earthy',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#978847'
|
||||
}
|
||||
}, {
|
||||
name: 'Animalic',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#9d977f'
|
||||
}
|
||||
}, {
|
||||
name: 'Meaty Brothy',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#cc7b6a'
|
||||
}
|
||||
}, {
|
||||
name: 'Phenolic',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#db646a'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
name: 'Chemical',
|
||||
itemStyle: {
|
||||
color: '#76c0cb'
|
||||
},
|
||||
children: [{
|
||||
name: 'Bitter',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#80a89d'
|
||||
}
|
||||
}, {
|
||||
name: 'Salty',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#def2fd'
|
||||
}
|
||||
}, {
|
||||
name: 'Medicinal',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#7a9bae'
|
||||
}
|
||||
}, {
|
||||
name: 'Petroleum',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#039fb8'
|
||||
}
|
||||
}, {
|
||||
name: 'Skunky',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#5e777b'
|
||||
}
|
||||
}, {
|
||||
name: 'Rubber',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: '#120c0c'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
/* this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)*/
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
// window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
|
||||
series: {
|
||||
type: 'sunburst',
|
||||
highlightPolicy: 'ancestor',
|
||||
data: this.datas,
|
||||
radius: [0, '95%'],
|
||||
sort: null,
|
||||
levels: [{}, {
|
||||
r0: '15%',
|
||||
r: '35%',
|
||||
itemStyle: {
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
rotate: 'tangential'
|
||||
}
|
||||
}, {
|
||||
r0: '35%',
|
||||
r: '70%',
|
||||
label: {
|
||||
align: 'right'
|
||||
}
|
||||
}, {
|
||||
r0: '70%',
|
||||
r: '72%',
|
||||
label: {
|
||||
position: 'outside',
|
||||
padding: 3,
|
||||
silent: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3
|
||||
}
|
||||
}]
|
||||
},
|
||||
animationDuration: animationDuration
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<ul class="moon">
|
||||
<li class="crater"></li>
|
||||
<li class="crater"></li>
|
||||
<li class="crater"></li>
|
||||
</ul>
|
||||
<ul class="mountain-range">
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
<li class="mountain"></li>
|
||||
</ul>
|
||||
<div class="mountain-range-mask"></div>
|
||||
<ul class="forest">
|
||||
<li class="hill"></li>
|
||||
<li class="hill"></li>
|
||||
<li class="hill"></li>
|
||||
</ul>
|
||||
<ul class="sparkles">
|
||||
<li class="sparkle one"></li>
|
||||
<li class="sparkle one"></li>
|
||||
<li class="sparkle one"></li>
|
||||
<li class="sparkle one"></li>
|
||||
<li class="sparkle two"></li>
|
||||
<li class="sparkle two"></li>
|
||||
<li class="sparkle two"></li>
|
||||
<li class="sparkle two"></li>
|
||||
<li class="sparkle three"></li>
|
||||
<li class="sparkle three"></li>
|
||||
<li class="sparkle three"></li>
|
||||
<li class="sparkle three"></li>
|
||||
<li class="sparkle four"></li>
|
||||
<li class="sparkle four"></li>
|
||||
<li class="sparkle four"></li>
|
||||
<li class="sparkle four"></li>
|
||||
<li class="sparkle five"></li>
|
||||
<li class="sparkle five"></li>
|
||||
<li class="sparkle five"></li>
|
||||
<li class="sparkle five"></li>
|
||||
<li class="sparkle six"></li>
|
||||
<li class="sparkle six"></li>
|
||||
<li class="sparkle six"></li>
|
||||
<li class="sparkle six"></li>
|
||||
<li class="sparkle seven"></li>
|
||||
<li class="sparkle seven"></li>
|
||||
<li class="sparkle seven"></li>
|
||||
<li class="sparkle seven"></li>
|
||||
<li class="sparkle eight"></li>
|
||||
<li class="sparkle eight"></li>
|
||||
<li class="sparkle eight"></li>
|
||||
<li class="sparkle eight"></li>
|
||||
</ul>
|
||||
<div class="grass">
|
||||
<div class="pokemon">
|
||||
<div class="poke" id="bulbasaur">
|
||||
<div class="ear"></div>
|
||||
<div class="ear"></div>
|
||||
<div class="head"></div>
|
||||
<div class="leg"></div>
|
||||
<div class="bulba-body"></div>
|
||||
<div class="bulbs">
|
||||
<div class="bulb"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="poke" id="pikachu">
|
||||
<div class="ear"></div>
|
||||
<div class="ear"></div>
|
||||
<div class="hand"></div>
|
||||
<div class="pika-body"></div>
|
||||
<div class="head"></div>
|
||||
<div class="pika-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Animition'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/style/animition.scss';
|
||||
|
||||
</style>
|
||||
@@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
name: "stackMap",
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
/* this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)*/
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
// window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'light')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Javascript', 'Java', 'Python', 'Ruby', 'PHP']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
||||
fontSize : 12 //更改坐标轴文字大小
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgb(192,192,192)' //更改坐标轴颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
||||
fontSize: 12 //更改坐标轴文字大小
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(192,192,192)' //更改坐标轴颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Javascript',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Java',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Python',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Ruby',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [150, 212, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'PHP',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
data: [820, 832, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -47,9 +47,9 @@
|
||||
completed: todos => todos.filter(todo => todo.done)
|
||||
}
|
||||
const defalutList = [
|
||||
{ text: 'star this repository', done: false },
|
||||
{ text: 'follow author', done: false },
|
||||
{ text: 'vue-element-admin', done: true }
|
||||
{ text: '工作流功能绘制工具', done: false },
|
||||
{ text: '工作流流转方法', done: false },
|
||||
{ text: '自动化代码优化', done: false }
|
||||
]
|
||||
export default {
|
||||
components: { Todo },
|
||||
|
||||
@@ -1,27 +1,51 @@
|
||||
<template>
|
||||
<div class="big">
|
||||
<div class="mid">
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
<div class="card">
|
||||
<div class="car-left">
|
||||
<div>
|
||||
<span class="card-img"> <img :src="userInfo.headerImg" alt="" > </span>
|
||||
<div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4>
|
||||
<p class="tips-text">
|
||||
<i class="el-icon-sunny"></i>
|
||||
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<stackMap />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<Sunburst/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div id="main" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car-right">
|
||||
<el-row>
|
||||
<el-col :span="8"><div class="car-item">
|
||||
<span class="flow"><i class="el-icon-s-grid"></i></span>
|
||||
<span>今日流量 </span>
|
||||
<b>13260</b>
|
||||
</div></el-col>
|
||||
<el-col :span="8"><div class="car-item">
|
||||
<span class="user-number">
|
||||
<i class="el-icon-s-custom "></i>
|
||||
</span>
|
||||
<span>总用户 </span>
|
||||
<b>48286</b>
|
||||
</div></el-col>
|
||||
<el-col :span="8"><div class="car-item ">
|
||||
<span class="feedback">
|
||||
<i class="el-icon-star-on"></i>
|
||||
</span>
|
||||
<span>好评率 </span>
|
||||
<b>98%</b>
|
||||
</div></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
|
||||
<el-card shadow="hover" class="grid-content">
|
||||
<i :class="card.icon" :style="{color:card.color}"></i>
|
||||
<p>{{card.label}}</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="12">
|
||||
@@ -41,128 +65,69 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import RaddarChart from "./component/RaddarChart"
|
||||
import stackMap from "./component/stackMap"
|
||||
import Sunburst from "./component/Sunburst"
|
||||
import musicPlayer from "./component/musicPlayer"
|
||||
import TodoList from "./component/todoList"
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
data() {
|
||||
return {
|
||||
toolCards:[
|
||||
{
|
||||
label:"用户管理",
|
||||
icon:"el-icon el-icon-monitor",
|
||||
name:"user",
|
||||
color:"#ff9c6e"
|
||||
},
|
||||
{
|
||||
label:"角色管理",
|
||||
icon:"el-icon el-icon-setting",
|
||||
name:"authority",
|
||||
color:"#69c0ff"
|
||||
},
|
||||
{
|
||||
label:"菜单管理",
|
||||
icon:"el-icon el-icon-menu",
|
||||
name:"menu",
|
||||
color:"#b37feb"
|
||||
},
|
||||
{
|
||||
label:"代码生成器",
|
||||
icon:"el-icon el-icon-cpu",
|
||||
name:"autoCode",
|
||||
color:"#ffd666"
|
||||
},
|
||||
{
|
||||
label:"表单生成器",
|
||||
icon:"el-icon el-icon-document-checked",
|
||||
name:"formCreate",
|
||||
color:"#ff85c0"
|
||||
},
|
||||
{
|
||||
label:"关于我们",
|
||||
icon:"el-icon el-icon-user",
|
||||
name:"about",
|
||||
color:"#5cdbd3"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo'])
|
||||
},
|
||||
components:{
|
||||
RaddarChart, //雷达图
|
||||
stackMap, //堆叠图
|
||||
Sunburst, //旭日图
|
||||
musicPlayer, //音乐播放器
|
||||
TodoList //TodoList
|
||||
TodoList, //TodoList
|
||||
// RaddarChart, //雷达图
|
||||
// stackMap, //堆叠图
|
||||
// Sunburst, //旭日图
|
||||
},
|
||||
methods:{
|
||||
toTarget(name){
|
||||
this.$router.push({name})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let myChart = echarts.init(document.getElementById('main'),'macarons');
|
||||
// let stackMap = echarts.init(document.getElementById('stackMap'));
|
||||
let option = {
|
||||
legend: {},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
|
||||
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
|
||||
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
|
||||
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
|
||||
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
|
||||
]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
||||
fontSize : 14 //更改坐标轴文字大小
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgb(192,192,192)' //更改坐标轴颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
gridIndex:0,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgb(192,192,192)', //更改坐标轴文字颜色
|
||||
fontSize: 14 //更改坐标轴文字大小
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(192,192,192)' //更改坐标轴颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {top: '55%'},
|
||||
series: [
|
||||
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
||||
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
||||
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
||||
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
|
||||
{
|
||||
type: 'pie',
|
||||
id: 'pie',
|
||||
radius: '30%',
|
||||
center: ['50%', '25%'],
|
||||
label: {
|
||||
formatter: '{b}: {@2012} ({d}%)'
|
||||
},
|
||||
encode: {
|
||||
itemName: 'product',
|
||||
value: '2012',
|
||||
tooltip: '2012'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
//点记标记点时的动效
|
||||
myChart.on('updateAxisPointer', function (event) {
|
||||
var xAxisInfo = event.axesInfo[0];
|
||||
if (xAxisInfo) {
|
||||
var dimension = xAxisInfo.value + 1;
|
||||
myChart.setOption({
|
||||
series: {
|
||||
id: 'pie',
|
||||
label: {
|
||||
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
|
||||
},
|
||||
encode: {
|
||||
value: dimension,
|
||||
tooltip: dimension
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize',function() {myChart.resize()});
|
||||
myChart.setOption(option);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -170,7 +135,8 @@ export default {
|
||||
.big{
|
||||
margin:100px 0 0 0;
|
||||
padding-top: 0;
|
||||
background-color: rgb(243,243,243);;
|
||||
background-color: rgb(243,243,243);
|
||||
padding-top: 15px;
|
||||
.top{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
@@ -197,7 +163,7 @@ export default {
|
||||
.bottom{
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 20px 0;
|
||||
// margin: 20px 0;
|
||||
.el-row{
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
@@ -224,10 +224,6 @@ export default {
|
||||
background: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.router-history {
|
||||
background: #fff;
|
||||
padding: 0 6px;
|
||||
border-top: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
+146
-213
@@ -32,7 +32,7 @@
|
||||
<Screenfull class="screenfull"></Screenfull>
|
||||
<el-dropdown>
|
||||
<span class="header-avatar">
|
||||
欢迎您，<CustomPic/>
|
||||
<CustomPic/>
|
||||
<span style="margin-left: 5px">{{userInfo.nickName}}</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
@@ -43,7 +43,6 @@
|
||||
<el-badge is-dot />
|
||||
</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
@@ -67,23 +66,7 @@
|
||||
<BottomInfo />
|
||||
</el-main>
|
||||
</el-container>
|
||||
<el-dialog :visible.sync="showPassword" @close="clearPassword" title="修改密码" width="360px">
|
||||
<el-form :model="pwdModify" :rules="rules" label-width="80px" ref="modifyPwdForm">
|
||||
<el-form-item :minlength="6" label="原密码" prop="password">
|
||||
<el-input show-password v-model="pwdModify.password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :minlength="6" label="新密码" prop="newPassword">
|
||||
<el-input show-password v-model="pwdModify.newPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
|
||||
<el-input show-password v-model="pwdModify.confirmPassword"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="showPassword=false">取 消</el-button>
|
||||
<el-button @click="savePassword" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
@@ -94,7 +77,6 @@ import Screenfull from '@/view/layout/screenfull'
|
||||
import Search from '@/view/layout/search/search'
|
||||
import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import { changePassword } from '@/api/user'
|
||||
import CustomPic from '@/components/customPic'
|
||||
export default {
|
||||
name: 'Layout',
|
||||
@@ -105,33 +87,8 @@ export default {
|
||||
isSider: true,
|
||||
isMobile: false,
|
||||
isShadowBg: false,
|
||||
showPassword: false,
|
||||
loadingFlag:false,
|
||||
pwdModify: {},
|
||||
rules: {
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '最少6个字符', trigger: 'blur' }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, message: '最少6个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请输入确认密码', trigger: 'blur' },
|
||||
{ min: 6, message: '最少6个字符', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== this.pwdModify.newPassword) {
|
||||
callback(new Error('两次密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
@@ -159,30 +116,6 @@ export default {
|
||||
this.isSider = !!this.isCollapse
|
||||
this.totalCollapse()
|
||||
},
|
||||
savePassword() {
|
||||
this.$refs.modifyPwdForm.validate(valid => {
|
||||
if (valid) {
|
||||
changePassword({
|
||||
username: this.userInfo.userName,
|
||||
password: this.pwdModify.password,
|
||||
newPassword: this.pwdModify.newPassword
|
||||
}).then(() => {
|
||||
this.$message.success('修改密码成功！')
|
||||
this.showPassword = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
clearPassword() {
|
||||
this.pwdModify = {
|
||||
password: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
}
|
||||
this.$refs.modifyPwdForm.clearValidate()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo']),
|
||||
@@ -241,151 +174,151 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$headerHigh: 52px;
|
||||
$mainHight: 100vh;
|
||||
.dropdown-group {
|
||||
min-width: 100px;
|
||||
}
|
||||
.topfix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
}
|
||||
.admin-box {
|
||||
min-height: calc(100vh - 240px);
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin-top: 100px;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
.layout-cont {
|
||||
.right-box {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
// $headerHigh: 52px;
|
||||
// $mainHight: 100vh;
|
||||
// .dropdown-group {
|
||||
// min-width: 100px;
|
||||
// }
|
||||
// .topfix {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// box-sizing: border-box;
|
||||
// z-index: 999;
|
||||
// }
|
||||
// .admin-box {
|
||||
// min-height: calc(100vh - 240px);
|
||||
// background-color: rgb(255, 255, 255);
|
||||
// margin-top: 100px;
|
||||
// }
|
||||
// .el-scrollbar__wrap {
|
||||
// padding-bottom: 17px;
|
||||
// }
|
||||
// .layout-cont {
|
||||
// .right-box {
|
||||
// text-align: center;
|
||||
// vertical-align: middle;
|
||||
// img {
|
||||
// vertical-align: middle;
|
||||
// border: 1px solid #ccc;
|
||||
// border-radius: 6px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.header-cont {
|
||||
height: $headerHigh !important;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
line-height: $headerHigh;
|
||||
}
|
||||
.main-cont {
|
||||
.breadcrumb {
|
||||
line-height: 48px;
|
||||
display: inline-block;
|
||||
padding: 0 24px;
|
||||
// padding: 6px;
|
||||
// border-bottom: 1px solid #eee;
|
||||
}
|
||||
// .header-cont {
|
||||
// height: $headerHigh !important;
|
||||
// background: #fff;
|
||||
// box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
// line-height: $headerHigh;
|
||||
// }
|
||||
// .main-cont {
|
||||
// .breadcrumb {
|
||||
// line-height: 48px;
|
||||
// display: inline-block;
|
||||
// padding: 0 24px;
|
||||
// // padding: 6px;
|
||||
// // border-bottom: 1px solid #eee;
|
||||
// }
|
||||
|
||||
&.el-main {
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
// padding: 0px 10px;
|
||||
// background: #fff;
|
||||
}
|
||||
height: $mainHight !important;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
.menu-total {
|
||||
// z-index: 5;
|
||||
// position: absolute;
|
||||
// top: 10px;
|
||||
// right: -35px;
|
||||
margin-left: -10px;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 30px;
|
||||
// border: 0 solid #ffffff;
|
||||
// border-radius: 50%;
|
||||
// background: #fff;
|
||||
}
|
||||
.aside {
|
||||
overflow: auto;
|
||||
// background: #fff;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-menu-vertical {
|
||||
height: calc(100vh - 64px) !important;
|
||||
visibility: auto;
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse {
|
||||
width: 54px;
|
||||
li {
|
||||
.el-tooltip,
|
||||
.el-submenu__title {
|
||||
padding: 0px 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.main-left {
|
||||
width: auto !important;
|
||||
}
|
||||
&.main-right {
|
||||
.admin-title {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.collapse {
|
||||
width: 53px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tilte {
|
||||
background: #001529;
|
||||
min-height: 64px;
|
||||
line-height: 64px;
|
||||
background: #002140;
|
||||
text-align: center;
|
||||
.logoimg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
padding: 3px;
|
||||
}
|
||||
.tit-text {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// &.el-main {
|
||||
// overflow: auto;
|
||||
// background: #fff;
|
||||
// // padding: 0px 10px;
|
||||
// // background: #fff;
|
||||
// }
|
||||
// height: $mainHight !important;
|
||||
// overflow: visible;
|
||||
// position: relative;
|
||||
// .menu-total {
|
||||
// // z-index: 5;
|
||||
// // position: absolute;
|
||||
// // top: 10px;
|
||||
// // right: -35px;
|
||||
// margin-left: -10px;
|
||||
// float: left;
|
||||
// margin-top: 10px;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// line-height: 30px;
|
||||
// font-size: 30px;
|
||||
// // border: 0 solid #ffffff;
|
||||
// // border-radius: 50%;
|
||||
// // background: #fff;
|
||||
// }
|
||||
// .aside {
|
||||
// overflow: auto;
|
||||
// // background: #fff;
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// .el-menu-vertical {
|
||||
// height: calc(100vh - 64px) !important;
|
||||
// visibility: auto;
|
||||
// &:not(.el-menu--collapse) {
|
||||
// width: 220px;
|
||||
// }
|
||||
// }
|
||||
// .el-menu--collapse {
|
||||
// width: 54px;
|
||||
// li {
|
||||
// .el-tooltip,
|
||||
// .el-submenu__title {
|
||||
// padding: 0px 15px !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
// &.main-left {
|
||||
// width: auto !important;
|
||||
// }
|
||||
// &.main-right {
|
||||
// .admin-title {
|
||||
// float: left;
|
||||
// font-size: 16px;
|
||||
// vertical-align: middle;
|
||||
// margin-left: 20px;
|
||||
// img {
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// &.collapse {
|
||||
// width: 53px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .tilte {
|
||||
// background: #001529;
|
||||
// min-height: 64px;
|
||||
// line-height: 64px;
|
||||
// background: #002140;
|
||||
// text-align: center;
|
||||
// .logoimg {
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// vertical-align: middle;
|
||||
// background: #fff;
|
||||
// border-radius: 50%;
|
||||
// padding: 3px;
|
||||
// }
|
||||
// .tit-text {
|
||||
// display: inline-block;
|
||||
// color: #fff;
|
||||
// font-weight: 600;
|
||||
// font-size: 20px;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
.screenfull {
|
||||
display: inline-block;
|
||||
}
|
||||
.header-avatar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
// .screenfull {
|
||||
// display: inline-block;
|
||||
// }
|
||||
// .header-avatar{
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -103,8 +103,8 @@ export default {
|
||||
</script>
|
||||
<style scoped>
|
||||
.screenfull-svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
cursor: pointer;
|
||||
fill: #606266;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<transition name="el-fade-in-linear">
|
||||
<div class="transition-box" style="display: inline-block; " v-show="show">
|
||||
<el-select
|
||||
ref="search-input"
|
||||
@blur="hiddenSearch"
|
||||
@change="changeRouter"
|
||||
filterable
|
||||
@@ -18,56 +19,41 @@
|
||||
</el-select>
|
||||
</div>
|
||||
</transition>
|
||||
<div :style="{display:'inline-block'}">
|
||||
<i @click="show = !show" class="el-icon-search search-icon"></i>
|
||||
<div :style="{display:'inline-block',float:'right'}" class="user-box">
|
||||
<i @click="showSearch()" class="el-icon-search search-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'searchComponent',
|
||||
name: "searchComponent",
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value: "",
|
||||
show: false
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('router', ['routerList'])
|
||||
...mapGetters("router", ["routerList"])
|
||||
},
|
||||
methods: {
|
||||
changeRouter() {
|
||||
this.$router.push({ name: this.value })
|
||||
this.value = ''
|
||||
this.$router.push({ name: this.value });
|
||||
this.value = "";
|
||||
},
|
||||
hiddenSearch() {
|
||||
this.show = false
|
||||
this.show = false;
|
||||
},
|
||||
showSearch() {
|
||||
this.show = true;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs['search-input'].focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.search-component {
|
||||
display: inline-block;
|
||||
.el-input__inner {
|
||||
border: none;
|
||||
border-bottom: 1px solid #606266;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
}
|
||||
.dropdown-group {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -167,138 +167,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-register-box {
|
||||
height: 100vh;
|
||||
.login-box {
|
||||
width: 40vw;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -22vw;
|
||||
top: 5vh;
|
||||
.logo {
|
||||
height: 35vh;
|
||||
width: 35vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '@/style/login.scss';
|
||||
|
||||
.link-icon {
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.vPic {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right !important;
|
||||
background: #ccc;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.logo_login {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#userLayout.user-layout-wrapper {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
&.mobile {
|
||||
.container {
|
||||
.main {
|
||||
max-width: 368px;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
|
||||
background-size: 100%;
|
||||
padding: 110px 0 144px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
text-align: center;
|
||||
margin-top: -40px;
|
||||
.header {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin-bottom: 30px;
|
||||
.badge {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-left: -12px;
|
||||
margin-top: -10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 44px;
|
||||
vertical-align: top;
|
||||
margin-right: 16px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 33px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 260px;
|
||||
width: 368px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
margin: 40px 0 10px;
|
||||
text-align: center;
|
||||
.links {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
width: 330px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-right: 40px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+246
-36
@@ -1,52 +1,192 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="fl-left left-mg-xs">
|
||||
<el-avatar :size="120" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
|
||||
</div>
|
||||
<div class="fl-left left-mg-lg">
|
||||
<div>用户ID：{{userInfo.uuid}}</div>
|
||||
<div>用户昵称：{{userInfo.nickName}}</div>
|
||||
<div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
|
||||
</div>
|
||||
<ChooseImg ref="chooseImg" @enter-img="enterImg"/>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="fl-left avatar-box">
|
||||
<div class="user-card">
|
||||
<el-avatar
|
||||
class="user-avatar"
|
||||
:size="160"
|
||||
:src="userInfo.headerImg"
|
||||
shape="square"
|
||||
@click.native="openChooseImg"
|
||||
></el-avatar>
|
||||
<div class="user-personality">
|
||||
<p class="nickname">{{userInfo.nickName}}</p>
|
||||
<p class="person-info">这个家伙很懒，什么都没有留下</p>
|
||||
</div>
|
||||
<div class="user-information">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="el-icon-user"></i>资深前端工程师
|
||||
</li>
|
||||
<li>
|
||||
<i class="el-icon-data-analysis"></i>北京反转极光科技有限公司-技术部-前端事业群
|
||||
</li>
|
||||
<li>
|
||||
<i class="el-icon-video-camera-solid"></i>中国·北京市·朝阳区
|
||||
</li>
|
||||
<li>
|
||||
<i class="el-icon-medal-1"></i>goLang/JavaScript/Vue/Gorm
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="user-addcount">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="账号绑定" name="second">
|
||||
<ul>
|
||||
<li>
|
||||
<p class="title">密保手机</p>
|
||||
<p class="desc">
|
||||
已绑定手机:1245678910
|
||||
<a href="#">立即修改</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="title">密保邮箱</p>
|
||||
<p class="desc">
|
||||
已绑定邮箱：gin-vue-admin@google.com.cn
|
||||
<a href="#">立即修改</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="title">密保问题</p>
|
||||
<p class="desc">
|
||||
未设置密保问题
|
||||
<a href="#">去设置</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="title">修改密码</p>
|
||||
<p class="desc">
|
||||
修改个人密码
|
||||
<a href="#" @click="showPassword=true">修改密码</a>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<ChooseImg ref="chooseImg" @enter-img="enterImg" />
|
||||
|
||||
<el-dialog :visible.sync="showPassword" @close="clearPassword" title="修改密码" width="360px">
|
||||
<el-form :model="pwdModify" :rules="rules" label-width="80px" ref="modifyPwdForm">
|
||||
<el-form-item :minlength="6" label="原密码" prop="password">
|
||||
<el-input show-password v-model="pwdModify.password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :minlength="6" label="新密码" prop="newPassword">
|
||||
<el-input show-password v-model="pwdModify.newPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
|
||||
<el-input show-password v-model="pwdModify.confirmPassword"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="showPassword=false">取 消</el-button>
|
||||
<el-button @click="savePassword" type="primary">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChooseImg from "@/components/chooseImg";
|
||||
import {setUserInfo} from "@/api/user"
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
const path = process.env.VUE_APP_BASE_API
|
||||
import { setUserInfo,changePassword } from "@/api/user";
|
||||
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
const path = process.env.VUE_APP_BASE_API;
|
||||
export default {
|
||||
name: 'Person',
|
||||
data(){
|
||||
name: "Person",
|
||||
data() {
|
||||
return {
|
||||
path:path
|
||||
}
|
||||
path: path,
|
||||
activeName: "second",
|
||||
showPassword: false,
|
||||
pwdModify: {},
|
||||
rules: {
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ min: 6, message: "最少6个字符", trigger: "blur" }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||
{ min: 6, message: "最少6个字符", trigger: "blur" }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: "请输入确认密码", trigger: "blur" },
|
||||
{ min: 6, message: "最少6个字符", trigger: "blur" },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== this.pwdModify.newPassword) {
|
||||
callback(new Error("两次密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ChooseImg
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('user', ['userInfo', 'token'])
|
||||
ChooseImg
|
||||
},
|
||||
methods:{
|
||||
...mapMutations('user',['ResetUserInfo']),
|
||||
openChooseImg(){
|
||||
this.$refs.chooseImg.open()
|
||||
},
|
||||
async enterImg(url){
|
||||
const res = await setUserInfo({headerImg:url,ID:this.userInfo.ID})
|
||||
if(res.code == 0){
|
||||
this.ResetUserInfo({headerImg:url})
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"设置成功"
|
||||
}
|
||||
)
|
||||
computed: {
|
||||
...mapGetters("user", ["userInfo", "token"])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("user", ["ResetUserInfo"]),
|
||||
savePassword() {
|
||||
this.$refs.modifyPwdForm.validate(valid => {
|
||||
if (valid) {
|
||||
changePassword({
|
||||
username: this.userInfo.userName,
|
||||
password: this.pwdModify.password,
|
||||
newPassword: this.pwdModify.newPassword
|
||||
}).then((res) => {
|
||||
if(res.code == 0){
|
||||
this.$message.success("修改密码成功！");
|
||||
}
|
||||
this.showPassword = false;
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
clearPassword() {
|
||||
this.pwdModify = {
|
||||
password: "",
|
||||
newPassword: "",
|
||||
confirmPassword: ""
|
||||
};
|
||||
this.$refs.modifyPwdForm.clearValidate();
|
||||
},
|
||||
openChooseImg() {
|
||||
this.$refs.chooseImg.open();
|
||||
},
|
||||
async enterImg(url) {
|
||||
const res = await setUserInfo({ headerImg: url, ID: this.userInfo.ID });
|
||||
if (res.code == 0) {
|
||||
this.ResetUserInfo({ headerImg: url });
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "设置成功"
|
||||
});
|
||||
}
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.avatar-uploader .el-upload {
|
||||
@@ -72,4 +212,74 @@ export default {
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
.avatar-box {
|
||||
box-shadow: -2px 0 20px -16px;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
.user-avatar{
|
||||
cursor: pointer;
|
||||
}
|
||||
.user-card {
|
||||
min-height: calc(90vh - 200px);
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
.el-avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user-personality {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 26px;
|
||||
}
|
||||
.person-info{
|
||||
margin-top: 6px;
|
||||
font-size: 14px;
|
||||
color:#999
|
||||
}
|
||||
}
|
||||
.user-information {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
ul {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
li {
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
padding: 20px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-addcount {
|
||||
ul {
|
||||
li {
|
||||
.title {
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
color: #696969;
|
||||
}
|
||||
.desc {
|
||||
font-size: 16px;
|
||||
padding: 0 10px 20px 10px;
|
||||
color: #a9a9a9;
|
||||
a {
|
||||
color: rgb(64, 158, 255);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -195,7 +195,6 @@ export default {
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.getDbfdOptions();
|
||||
const dictRes = await getSysDictionaryList({
|
||||
page: 1,
|
||||
pageSize: 999999
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getColume" type="primary">使用此表创建</el-button>
|
||||
<el-button @click="getColumn" type="primary">使用此表创建</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
@@ -63,6 +63,9 @@
|
||||
<el-form-item label="自动创建api">
|
||||
<el-checkbox v-model="form.autoCreateApiToSql"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动移动文件">
|
||||
<el-checkbox v-model="form.autoMoveFile"></el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 组件列表 -->
|
||||
<div class="button-box clearflex">
|
||||
@@ -114,7 +117,7 @@
|
||||
<el-tag type="danger">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
|
||||
<!-- 组件列表 -->
|
||||
<div class="button-box clearflex">
|
||||
<el-button @click="enterForm" type="primary">生成代码包</el-button>
|
||||
<el-button @click="enterForm" type="primary">生成代码</el-button>
|
||||
</div>
|
||||
<!-- 组件弹窗 -->
|
||||
<el-dialog title="组件内容" :visible.sync="dialogFlag">
|
||||
@@ -137,12 +140,12 @@ const fieldTemplate = {
|
||||
dataTypeLong: "",
|
||||
comment: "",
|
||||
fieldSearchType: "",
|
||||
dictType:""
|
||||
dictType: ""
|
||||
};
|
||||
|
||||
import FieldDialog from "@/view/systemTools/autoCode/component/fieldDialog.vue";
|
||||
import { toUpperCase, toHump } from "@/utils/stringFun.js";
|
||||
import { createTemp, getDB, getTable, getColume } from "@/api/autoCode.js";
|
||||
import { createTemp, getDB, getTable, getColumn } from "@/api/autoCode.js";
|
||||
import { getDict } from "@/utils/dictionary";
|
||||
|
||||
export default {
|
||||
@@ -165,6 +168,7 @@ export default {
|
||||
abbreviation: "",
|
||||
description: "",
|
||||
autoCreateApiToSql: false,
|
||||
autoMoveFile: false,
|
||||
fields: []
|
||||
},
|
||||
rules: {
|
||||
@@ -274,6 +278,14 @@ export default {
|
||||
return false;
|
||||
}
|
||||
const data = await createTemp(this.form);
|
||||
if (data.headers?.success == "false") {
|
||||
return;
|
||||
} else {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "自动化代码创建成功，正在下载"
|
||||
});
|
||||
}
|
||||
const blob = new Blob([data]);
|
||||
const fileName = "ginvueadmin.zip";
|
||||
if ("download" in document.createElement("a")) {
|
||||
@@ -309,9 +321,9 @@ export default {
|
||||
}
|
||||
this.dbform.tableName = "";
|
||||
},
|
||||
async getColume() {
|
||||
async getColumn() {
|
||||
const gormModelList = ["id", "created_at", "updated_at", "deleted_at"];
|
||||
const res = await getColume(this.dbform);
|
||||
const res = await getColumn(this.dbform);
|
||||
if (res.code == 0) {
|
||||
const tbHump = toHump(this.dbform.tableName);
|
||||
this.form.structName = toUpperCase(tbHump);
|
||||
@@ -321,29 +333,29 @@ export default {
|
||||
this.form.description = tbHump + "表";
|
||||
this.form.autoCreateApiToSql = true;
|
||||
this.form.fields = [];
|
||||
res.data.columes &&
|
||||
res.data.columes.map(item => {
|
||||
if (!gormModelList.some(gormfd => gormfd == item.columeName)) {
|
||||
const fbHump = toHump(item.columeName);
|
||||
res.data.columns &&
|
||||
res.data.columns.map(item => {
|
||||
if (!gormModelList.some(gormfd => gormfd == item.columnName)) {
|
||||
const fbHump = toHump(item.columnName);
|
||||
this.form.fields.push({
|
||||
fieldName: toUpperCase(fbHump),
|
||||
fieldDesc: item.columeComment || fbHump + "字段",
|
||||
fieldDesc: item.columnComment || fbHump + "字段",
|
||||
fieldType: this.fdMap[item.dataType],
|
||||
dataType: item.dataType,
|
||||
fieldJson: fbHump,
|
||||
dataTypeLong: item.dataTypeLong,
|
||||
columnName: item.columeName,
|
||||
comment: item.columeComment,
|
||||
columnName: item.columnName,
|
||||
comment: item.columnComment,
|
||||
fieldSearchType: "",
|
||||
dictType:""
|
||||
dictType: ""
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
async setFdMap() {
|
||||
const fdTpyes = ["string", "int", "bool", "float64", "time.Time"];
|
||||
fdTpyes.map(async fdtype => {
|
||||
const fdTypes = ["string", "int", "bool", "float64", "time.Time"];
|
||||
fdTypes.map(async fdtype => {
|
||||
const res = await getDict(fdtype);
|
||||
res.map(item => {
|
||||
this.fdMap[item.label] = fdtype;
|
||||
|
||||
Reference in New Issue
Block a user