244 lines
6.6 KiB
Vue
244 lines
6.6 KiB
Vue
<template>
|
|
<el-card style="min-height:calc(100vh - 84px);background: rgb(236,243,250);background-size:100% 100%">
|
|
<div class="dashboard-container">
|
|
<div class="sudoku_row" >
|
|
<svg-icon icon-class="人员" style="width: 35px;height: 35px"/>
|
|
<div class="dashboard-text" style="color:black">/{{ name }}</div>
|
|
<el-divider content-position="right" style="margin:24px"/>
|
|
<div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">
|
|
<router-link :to="sudoku.router" style="width: 100%">
|
|
<el-badge :value="sudoku.value" class="dashbadge" style="width: 100%;text-align:center">
|
|
<svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>
|
|
<h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>
|
|
</el-badge>
|
|
</router-link>
|
|
</div>
|
|
|
|
<div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
|
|
<div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
|
|
<svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
|
|
{{ value1.title }}
|
|
</div>
|
|
<router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
|
|
<el-card shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)">
|
|
<svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
|
|
<h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ value2.title }}</h4>
|
|
</el-card>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import request from '@/utils/request'
|
|
export default {
|
|
name: 'Dashboard',
|
|
data() {
|
|
return {
|
|
colors: ['rgb(162,126,253)', 'rgb(254,178,0)', 'rgb(66,222,144)', 'rgb(68,176,254)', 'rgb(255,87,116)'],
|
|
sudokus: [],
|
|
curSelect: null,
|
|
number: '',
|
|
timer: '',
|
|
fathers: [],
|
|
sons: []
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'name',
|
|
'token'
|
|
])
|
|
},
|
|
mounted() {
|
|
this.getFileList()
|
|
this.timer = setInterval(this.getFileList, 60 * 60 * 1000) // 60 分钟一刷新
|
|
this.initFirstModule()
|
|
this.initSecondModule()
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer)
|
|
},
|
|
methods: {
|
|
async initFirstModule() {
|
|
await request({
|
|
url: '',
|
|
method: 'post',
|
|
data: {
|
|
type: '1',
|
|
name: `菜单系统模块_首页信息_查询数据1`,
|
|
param: '角色编号=' + this.token
|
|
}
|
|
}).then(data => {
|
|
this.fathers = []
|
|
data.data.map(v => {
|
|
this.fathers.push({
|
|
id: v.id,
|
|
title: v.title,
|
|
icon: v.icon
|
|
})
|
|
})
|
|
})
|
|
},
|
|
Color(index) {
|
|
const colorAngle = Math.floor(Math.random() * 360 + index)
|
|
return 'hsla(' + colorAngle + ',70%,30%,1)'
|
|
},
|
|
async initSecondModule() {
|
|
await request({
|
|
url: '',
|
|
method: 'post',
|
|
data: {
|
|
type: '1',
|
|
name: `菜单系统模块_首页信息_查询数据2`,
|
|
param: '角色编号=' + this.token
|
|
}
|
|
}).then(data => {
|
|
this.sons = []
|
|
data.data.map(v => {
|
|
this.sons.push({
|
|
id: v.id,
|
|
pid: v.pid,
|
|
path: v.path,
|
|
icon: v.icon,
|
|
title: v.title
|
|
})
|
|
})
|
|
})
|
|
},
|
|
async getFileList() {
|
|
await request({
|
|
url: '',
|
|
method: 'post',
|
|
data: {
|
|
type: '1',
|
|
name: `菜单系统模块_通知信息_查询数据`,
|
|
param: '角色编号=' + this.token
|
|
}
|
|
}).then(data => {
|
|
this.sudokus = []
|
|
for (let i = 0; i < data.data.length; i++) {
|
|
this.getMessageNum(data.data[i].消息通知来源, data.data[i].通知条件, data, i)
|
|
}
|
|
})
|
|
},
|
|
async getMessageNum(tableName, condition, rawData, i) {
|
|
await request({
|
|
url: '',
|
|
method: 'post',
|
|
data: {
|
|
type: '3',
|
|
name: `select count(*) from ${tableName} where ${condition}`
|
|
}
|
|
}).then(res => {
|
|
this.sudokus.push({
|
|
id: rawData.data[i].id,
|
|
name: rawData.data[i].title,
|
|
icon: rawData.data[i].icon,
|
|
router: rawData.data[i].path,
|
|
value: res.data[0].Column1
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
.dashboard-container .el-divider__text {
|
|
color: gray;
|
|
font-size: 22px;
|
|
background-color: rgba(255,255,255,0.8);
|
|
}
|
|
</style>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
|
|
.box-card {
|
|
width: 100%
|
|
}
|
|
.item {
|
|
margin-top: 10px;
|
|
margin-right: 40px;
|
|
}
|
|
.sudoku_row{
|
|
display: flex;
|
|
align-items: center;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
.sudoku_item{
|
|
margin-top: 24ps;
|
|
margin-bottom: 20px;
|
|
margin-right: 20px;
|
|
border: 0 solid red;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width:240px;
|
|
height: 80px;
|
|
/*padding-top: 20px;*/
|
|
/*padding-bottom: 10px;*/
|
|
}
|
|
.sudoku_item:hover {
|
|
border: 2px solid white;
|
|
}
|
|
.sudoku_item img{
|
|
margin-bottom: 3px;
|
|
display: block;
|
|
}
|
|
.sudoku_item1{
|
|
margin-top: 24ps;
|
|
margin-bottom: 20px;
|
|
margin-left: 20px;
|
|
border: 0 solid red;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width:15%;
|
|
height: 80px;
|
|
padding-top: 20px;
|
|
/*padding-bottom: 10px;*/
|
|
}
|
|
.sudoku_item1:hover {
|
|
border: 2px solid rgb(135,187,224);
|
|
}
|
|
.sudoku_item1 img{
|
|
margin-bottom: 3px;
|
|
display: block;
|
|
}
|
|
.opacity{
|
|
opacity: 0.4;
|
|
background: #e5e5e5;
|
|
}
|
|
.dashboard {
|
|
&-container {
|
|
margin: 30px;
|
|
}
|
|
&-text {
|
|
font-size: 30px;
|
|
line-height: 46px;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-badge__content {
|
|
background-color: rgb(255,151,91);
|
|
}
|
|
/*#dashbadge {*/
|
|
/*background-color: rgb(255,151,91);*/
|
|
/*}*/
|
|
</style>
|