XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-06-27 19:02:30 +08:00
parent 70aef09c3c
commit 4cbdb339c6
13 changed files with 279 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/assets/img/no-widgets.svg
View File

@ -1,57 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 750 750" style="enable-background:new 0 0 750 750;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.35;fill:#B3B3B3;}
.st1{opacity:0.1;fill:#B3B3B3;}
.st2{opacity:0.3;fill:#B3B3B3;}
.st3{opacity:0.1;}
.st4{fill:#B3B3B3;}
</style>
<g>
<path class="st0" d="M465.1,261.4H264c-1.3,0-2.4,1.1-2.4,2.4v255.6c0,1.3,1.1,2.4,2.4,2.4h201.1c1.3,0,2.4-1.1,2.4-2.4V263.8
C467.5,262.4,466.4,261.4,465.1,261.4z M417.9,443c0,1.3-1.1,2.4-2.4,2.4h-102c-1.3,0-2.4-1.1-2.4-2.4v-11.3c0-1.3,1.1-2.4,2.4-2.4
h102c1.3,0,2.4,1.1,2.4,2.4V443z M417.9,397.2c0,1.3-1.1,2.4-2.4,2.4h-102c-1.3,0-2.4-1.1-2.4-2.4v-11.3c0-1.3,1.1-2.4,2.4-2.4h102
c1.3,0,2.4,1.1,2.4,2.4V397.2z M417.9,351.5c0,1.3-1.1,2.4-2.4,2.4h-102c-1.3,0-2.4-1.1-2.4-2.4v-11.3c0-1.3,1.1-2.4,2.4-2.4h102
c1.3,0,2.4,1.1,2.4,2.4V351.5z"/>
<g>
<path class="st1" d="M462.1,236.8L462.1,236.8C384.8,236.2,321,295.1,314,370.7c-18.5-19.1-44.4-31.1-73.1-31.3h0
c-56.8-0.4-103.2,45.3-103.6,102.1l-0.8,101.4l175.6,1.3l30.1,0.2l265.1,2l1.2-160.9C609.2,304,543.6,237.4,462.1,236.8z"/>
<path class="st2" d="M216.9,227.4c-3.4,0-6.5,1.1-9,2.9c0.2-1,0.3-2,0.3-3c0.1-8.3-6.6-15.1-15-15.2s-15.1,6.6-15.2,15
c0,0.3,0,0.6,0,0.9c-1.6-0.6-3.4-1-5.2-1c-8.3-0.1-15.1,6.6-15.2,15c-0.1,8.2,6.4,14.9,14.5,15.2l0,0l44.6,0.3
c8.3,0.1,15.1-6.6,15.2-15S225.2,227.5,216.9,227.4z"/>
<path class="st2" d="M596.4,194.2c-3.4,0-6.5,1.1-9,2.9c0.2-1,0.3-2,0.3-3c0.1-8.3-6.6-15.1-15-15.2s-15.1,6.6-15.2,15
c0,0.3,0,0.6,0,0.9c-1.6-0.6-3.4-1-5.2-1c-8.3-0.1-15.1,6.6-15.2,15c-0.1,8.2,6.4,14.9,14.5,15.2l0,0l44.6,0.3
c8.3,0.1,15.1-6.6,15.2-15S604.7,194.3,596.4,194.2z"/>
<g>
<g class="st3">
<path class="st4" d="M496.9,497.5c-2.1,0-3.7,1.6-3.7,3.7c0,1.5,0.8,2.7,2,3.3l-0.5,65.1l3.5,0l0.5-65.3
c1.1-0.6,1.8-1.8,1.8-3.1C500.6,499.1,499,497.6,496.9,497.5z"/>
<path class="st4" d="M572.3,501.7c0-1.9-1.6-3.6-3.7-3.7c-2.1,0-3.7,1.6-3.7,3.7c0,1.4,0.8,2.6,1.9,3.2l-0.5,65.2l3.5,0
l0.5-65.2C571.5,504.3,572.2,503.1,572.3,501.7z"/>
</g>
<rect x="522.7" y="472.2" transform="matrix(7.448311e-03 -1 1 7.448311e-03 8.6828 1045.4733)" class="st1" width="16.5" height="92.3"/>
<polygon class="st1" points="495.4,509.8 495.2,510.1 485.5,526.3 484.8,526.3 484.9,509.8 "/>
<polygon class="st1" points="518.7,510 508.8,526.5 496.3,526.4 500.2,519.8 506,509.9 "/>
<polygon class="st1" points="542,510.2 532.1,526.6 519.6,526.5 529.3,510.1 "/>
<polygon class="st1" points="565.3,510.4 555.5,526.8 542.9,526.7 552.7,510.3 "/>
<polygon class="st1" points="577.2,510.4 577.1,527 566.2,526.9 576,510.4 "/>
<rect x="522.5" y="497.7" transform="matrix(7.448311e-03 -1 1 7.448311e-03 -17.0149 1070.603)" class="st1" width="16.5" height="92.3"/>
<polygon class="st1" points="495.2,535.3 495,535.6 485.3,551.8 484.6,551.8 484.7,535.3 "/>
<polygon class="st1" points="518.5,535.5 508.6,552 496.1,551.9 500,545.3 505.8,535.4 "/>
<polygon class="st1" points="541.8,535.7 531.9,552.1 519.4,552 529.1,535.6 "/>
<polygon class="st1" points="565.1,535.9 555.4,552.3 542.7,552.2 552.5,535.8 "/>
<polygon class="st1" points="577,536 576.9,552.5 566,552.4 575.8,536 "/>
<path class="st1" d="M577.1,527c0,0,0-0.1,0-0.3l0-0.9c0-0.7,0-1.8,0-3.2c0-2.8,0.1-6.9,0.1-12.2l0.1,0.1l-92.3-0.5l0,0l0.1-0.1
c0,5.6-0.1,11.2-0.1,16.5l-0.1-0.1l65.8,0.6l19.5,0.1l5.3,0l0,0l-5.3,0l-19.5-0.1l-65.8-0.3l-0.3,0l0.1-16.8l0.1,0l92.3,0.8
l0.1,0l0,0.1c0,5.3-0.1,9.4-0.1,12.2c0,1.5,0,2.5,0,3.2l0,0.7C577.1,526.8,577.1,527,577.1,527z"/>
<path class="st1" d="M576.9,552.5c0,0,0-0.1,0-0.3l0-0.9c0-0.7,0-1.8,0-3.2c0-2.8,0.1-6.9,0.1-12.2l0.1,0.1l-92.3-0.5l0,0
l0.1-0.1c0,5.6-0.1,11.2-0.1,16.5l-0.1-0.1l65.8,0.6l19.5,0.1l5.3,0l0,0l-5.3,0l-19.5-0.1l-65.8-0.3l-0.3,0l0.1-16.7l0.1,0
l92.3,0.8l0.1,0l0,0.1c0,5.3-0.1,9.4-0.1,12.2c0,1.5,0,2.5,0,3.2l0,0.7C576.9,552.3,576.9,552.5,576.9,552.5z"/>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

2
src/layout/components/userbar.vue
View File

@ -119,7 +119,7 @@
} }
}, },
created() { created() {
var userInfo = this.$tool.data.get("userinfo"); var userInfo = this.$tool.data.get("user");
this.username = userInfo.username; this.username = userInfo.username;
this.avatar = userInfo.avatar; this.avatar = userInfo.avatar;
}, },

4
src/main.js
View File

@ -2,7 +2,7 @@ import { createApp } from 'vue'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css' import 'element-plus/theme-chalk/display.css'
import scui from './scui' import x from './x'
import i18n from './locales' import i18n from './locales'
import router from './router' import router from './router'
import store from './store' import store from './store'
@ -14,7 +14,7 @@ app.use(store);
app.use(router); app.use(router);
app.use(ElementPlus); app.use(ElementPlus);
app.use(i18n); app.use(i18n);
app.use(scui); app.use(x);
//挂载app //挂载app
app.mount('#app'); app.mount('#app');

13
src/router/index.js
View File

@ -66,10 +66,13 @@ router.beforeEach(async (to, from, next) => {
if (!isGetRouter) { if (!isGetRouter) {
// 重新获取菜单路 // 重新获取菜单路
api.system.index.get().then((response) => { api.system.index.get().then((response) => {
tool.data.set("menu", response.data.menu)
tool.data.set("userinfo", response.data.user) for (const key in response.data) {
tool.data.set("permissions", response.data.permissions) if (Object.prototype.hasOwnProperty.call(response.data, key)) {
tool.data.set("dashboardgrid", response.data.dashboardGrid) tool.data.set(key, response.data[key]);
}
}
var menu = router.sc_getMenu(); var menu = router.sc_getMenu();
var menuRouter = filterAsyncRouter(menu) var menuRouter = filterAsyncRouter(menu)
menuRouter = flatAsyncRoutes(menuRouter) menuRouter = flatAsyncRoutes(menuRouter)
@ -103,7 +106,7 @@ router.onError((error) => {
//入侵追加自定义方法、对象 //入侵追加自定义方法、对象
router.sc_getMenu = () => { router.sc_getMenu = () => {
var apiMenu = tool.data.get("menu") || [] var apiMenu = tool.data.get("menu") || []
let userInfo = tool.data.get("userinfo") || {} let userInfo = tool.data.get("user") || {}
let userMenu = treeFilter(userRoutes, node => { let userMenu = treeFilter(userRoutes, node => {
return node.meta.role ? node.meta.role.filter(item => userInfo.role.indexOf(item) > -1).length > 0 : true return node.meta.role ? node.meta.role.filter(item => userInfo.role.indexOf(item) > -1).length > 0 : true
}) })

2
src/utils/permission.js
View File

@ -42,7 +42,7 @@ export function permission(data) {
} }
export function rolePermission(data) { export function rolePermission(data) {
let userInfo = tool.data.get("userinfo"); let userInfo = tool.data.get("user");
if(!userInfo){ if(!userInfo){
return false; return false;
} }

7
src/views/home/index.vue
View File

@ -9,8 +9,8 @@
</el-card> </el-card>
</el-main> </el-main>
</div> </div>
<work v-if="dashboard=='1'" @on-mounted="onMounted"></work> <!-- <work @on-mounted="onMounted"></work> -->
<widgets v-else @on-mounted="onMounted"></widgets> <widgets @on-mounted="onMounted"></widgets>
</template> </template>
<script> <script>
@ -27,11 +27,10 @@
data(){ data(){
return { return {
pageLoading: true, pageLoading: true,
dashboard: '0'
} }
}, },
created(){ created(){
this.dashboard = this.$tool.data.get("userinfo").dashboard || '0'; // this.dashboard = this.$tool.data.get("user").dashboard || '0';
}, },
mounted(){ mounted(){

94
src/views/home/widgets/components/stat.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<el-card shadow="hover" header="统计" v-loading="loading">
<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
</el-card>
</template>
<script>
import scEcharts from '@/components/scEcharts';
export default {
title: "统计",
icon: "el-icon-data-line",
description: "实时统计",
components: {
scEcharts
},
data() {
return {
loading: true,
option: {}
}
},
created() {
var _this = this;
setTimeout(function() {
_this.loading = false
}, 500);
var option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
boundaryGap: false,
type: 'category',
data: (function (){
var now = new Date();
var res = [];
var len = 30;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
},
yAxis: [{
type: 'value',
name: '价格',
"splitLine": {
"show": false
}
}],
series: [
{
name: '收入',
type: 'line',
symbol: 'none',
lineStyle: {
width: 1,
color: '#409EFF'
},
areaStyle: {
opacity: 0.1,
color: '#79bbff'
},
data: (function (){
var res = [];
var len = 30;
while (len--) {
res.push(Math.round(Math.random() * 0));
}
return res;
})()
},
],
};
this.option = option;
},
mounted(){
var _this = this;
setInterval(function (){
var o = _this.option;
o.series[0].data.shift()
o.series[0].data.push(Math.round(Math.random() * 100));
o.xAxis.data.shift();
o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
//_this.$refs.c1.myChart.setOption(o)
},2100)
},
}
</script>

134
src/views/home/widgets/components/work.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<el-card shadow="never" header="我的常用">
<ul class="myMods">
<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
<p>{{ mod.meta.title }}</p>
</a>
<router-link v-else :to="{ path: mod.path }">
<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
<p>{{ mod.meta.title }}</p>
</router-link>
</li>
<li class="modItem-add" @click="addMods">
<a href="javascript:void(0)">
<el-icon><el-icon-plus /></el-icon>
</a>
</li>
</ul>
<el-drawer title="添加应用" v-model="modsDrawer" :size="570" destroy-on-close>
<div class="setMods">
<h4>我的常用 ( {{myMods.length}} )</h4>
<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="people">
<template #item="{ element }">
<li :style="{background:element.meta.color||'#909399'}">
<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
<p>{{element.meta.title}}</p>
</li>
</template>
</draggable>
</div>
<div class="setMods">
<h4>全部应用 ( {{filterMods.length}} )</h4>
<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="people">
<template #item="{ element }">
<li :style="{background:element.meta.color||'#909399'}">
<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
<p>{{element.meta.title}}</p>
</li>
</template>
</draggable>
</div>
<template #footer>
<el-button @click="modsDrawer=false">取消</el-button>
<el-button type="primary" @click="saveMods">保存</el-button>
</template>
</el-drawer>
</el-card>
</template>
<script>
import draggable from 'vuedraggable'
export default {
title: "我的常用",
icon: "el-icon-setting",
description: "点个星星支持一下",
components: {
draggable
},
data() {
return {
mods: [],
myMods: [],
myModsName: [],
filterMods: [],
modsDrawer: false
}
},
mounted(){
this.getMods()
},
methods: {
addMods(){
this.modsDrawer = true
},
getMods(){
//这里可用改为读取远程数据
this.myModsName = this.$tool.data.get("my-mods") || []
var menuTree = this.$tool.data.get("menu")
this.filterMenu(menuTree)
this.myMods = this.mods.filter(item => {
return this.myModsName.includes(item.name)
})
this.filterMods = this.mods.filter(item => {
return !this.myModsName.includes(item.name)
})
},
filterMenu(map){
map.forEach(item => {
if(item.meta.hidden || item.meta.type=="button"){
return false
}
if(item.meta.type=='iframe'){
item.path = `/i/${item.name}`
}
if(item.children&&item.children.length > 0){
this.filterMenu(item.children)
}else{
this.mods.push(item)
}
})
},
saveMods(){
const myModsName = this.myMods.map(v => v.name)
this.$tool.data.set("my-mods", myModsName)
this.$message.success("设置常用成功")
this.modsDrawer = false
}
}
}
</script>
<style scoped>
.myMods {list-style:none;margin:-10px;}
.myMods li {display: inline-block;width: 100px;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px;border-radius:5px;}
.myMods li:hover {opacity: 0.8;}
.myMods li a {width: 100%;height: 100%;padding:10px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}
.myMods li i {font-size: 26px;color: #fff;}
.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
.modItem-add {border: 1px dashed #ddd;cursor: pointer;}
.modItem-add i {font-size: 30px;color: #999!important;}
.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}
.setMods {padding:0 20px;}
.setMods h4 {font-size: 14px;font-weight: normal;}
.setMods ul {margin:20px -5px;min-height: 90px;}
.setMods li {display: inline-block;width: 80px;height:80px;text-align: center;margin:5px;color: #fff;vertical-align: top;padding:4px;padding-top:15px;cursor: move;border-radius: 3px;}
.setMods li i {font-size: 20px;}
.setMods li p {font-size: 12px;margin-top: 10px;}
.setMods li.sortable-ghost {opacity: 0.3;}
</style>

30
src/views/home/widgets/index.vue
View File

@ -1,19 +1,14 @@
<template> <template>
<div :class="['widgets-home', customizing?'customizing':'']" ref="main"> <div :class="['widgets-home', customizing?'customizing':'']" ref="main">
<div class="widgets-content"> <div class="widgets-content">
<div class="widgets-top"> <div class="widgets-top-actions">
<div class="widgets-top-title"> <el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
控制台 <el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
</div>
<div class="widgets-top-actions">
<el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
<el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
</div>
</div> </div>
<div class="widgets" ref="widgets"> <div class="widgets" ref="widgets">
<div class="widgets-wrapper"> <div class="widgets-wrapper">
<div v-if="nowCompsList.length<=0" class="no-widgets"> <div v-if="nowCompsList.length<=0" class="no-widgets">
<el-empty image="@/assets/img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty> <el-empty description="没有部件啦" :image-size="280"></el-empty>
</div> </div>
<el-row :gutter="15"> <el-row :gutter="15">
<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24"> <el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24">
@ -102,11 +97,12 @@
customizing: false, customizing: false,
allComps: allComps, allComps: allComps,
selectLayout: [], selectLayout: [],
defaultGrid: this.$config.DEFAULT_GRID, defaultGrid: [],
grid: [] grid: []
} }
}, },
created(){ created(){
this.defaultGrid = this.$tool.data.get("defaultgrid") || this.$config.DEFAULT_GRID
this.grid = this.$tool.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid)) this.grid = this.$tool.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
}, },
mounted() { mounted() {
@ -123,6 +119,7 @@
description: allComps[key].description description: allComps[key].description
}) })
} }
var myCopmsList = this.grid.copmsList.reduce(function(a, b){return a.concat(b)}) var myCopmsList = this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
for(let comp of allCompsList){ for(let comp of allCompsList){
const _item = myCopmsList.find((item)=>{return item === comp.key}) const _item = myCopmsList.find((item)=>{return item === comp.key})
@ -196,8 +193,8 @@
<style scoped lang="scss"> <style scoped lang="scss">
.widgets-home {display: flex;flex-direction: row;flex: 1;height: 100%;} .widgets-home {display: flex;flex-direction: row;flex: 1;height: 100%;}
.widgets-content {flex: 1;overflow: auto;overflow-x:hidden;padding:15px;} .widgets-content {flex: 1;overflow: auto;overflow-x:hidden;padding:10px 10px;}
.widgets-aside {width: 360px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.1);position: relative;overflow: auto;} .widgets-aside {width: 380px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.1);position: relative;overflow: auto;}
.widgets-aside-title {font-size: 14px;display: flex;align-items: center;justify-content: center;} .widgets-aside-title {font-size: 14px;display: flex;align-items: center;justify-content: center;}
.widgets-aside-title i {margin-right: 10px;font-size: 18px;} .widgets-aside-title i {margin-right: 10px;font-size: 18px;}
.widgets-aside-close {font-size: 18px;width:30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 3px;cursor: pointer;} .widgets-aside-close {font-size: 18px;width:30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 3px;cursor: pointer;}
@ -207,6 +204,15 @@
.widgets-top-title {font-size: 18px;font-weight: bold;} .widgets-top-title {font-size: 18px;font-weight: bold;}
.widgets {transform-origin: top left;transition: transform .15s;} .widgets {transform-origin: top left;transition: transform .15s;}
.widgets-top-actions {
position: fixed;
right: 30px;
bottom: 20px;
z-index: 990;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
.draggable-box {height: 100%;} .draggable-box {height: 100%;}

2
src/views/home/work/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-main> <el-main>
<el-alert title="根据角色配置,可让不同角色访问不同的控制台视图,参数值在登录成功后返回 dashboard:{type}" type="success" style="margin-bottom:20px;"></el-alert> <!-- <el-alert title="根据角色配置,可让不同角色访问不同的控制台视图,参数值在登录成功后返回 dashboard:{type}" type="success" style="margin-bottom:20px;"></el-alert> -->
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :lg="24"> <el-col :lg="24">
<el-card shadow="never" header="我的常用"> <el-card shadow="never" header="我的常用">

12
src/views/login/components/passwordForm.vue
View File

@ -87,10 +87,14 @@
}) })
return false return false
} }
this.$tool.data.set("menu", menu.data.menu)
this.$tool.data.set("userinfo", menu.data.user)
this.$tool.data.set("permissions", menu.data.permissions) for (const key in menu.data) {
this.$tool.data.set("dashboardgrid", menu.data.dashboardGrid) if (Object.prototype.hasOwnProperty.call(menu.data, key)) {
this.$tool.data.set(key, menu.data[key]);
}
}
}else{ }else{
this.islogin = false this.islogin = false
this.$message.warning(menu.message) this.$message.warning(menu.message)

13
src/views/login/index.vue
View File

@ -161,10 +161,15 @@
}) })
return false return false
} }
this.$tool.data.set("menu", menu.data.menu)
this.$tool.data.set("userinfo", menu.data.user)
this.$tool.data.set("permissions", menu.data.permissions) for (const key in menu.data) {
this.$tool.data.set("dashboardgrid", menu.data.dashboardGrid) if (Object.prototype.hasOwnProperty.call(menu.data, key)) {
this.$tool.data.set(key, menu.data[key]);
}
}
}else{ }else{
this.islogin = false this.islogin = false
this.$message.warning(menu.message) this.$message.warning(menu.message)

0
src/scui.js → src/x.js
View File