Skip to content

G
gin-vue-admin

是阿延啊 / gin-vue-admin
与 Fork 源项目一致

Fork自 FLIPPED-AURORA / gin-vue-admin

通知 1
Star 0
Fork 0
G
gin-vue-admin

体验新版 GitCode，发现更多精彩内容 >>

提交 0e6a5e69 编写于 作者: P piexlmax
浏览文件
操作

dashboard调整

上级 26d48129
隐藏空白更改
内联 并排
Showing with 250 addition and 113 deletion
web/src/style/main.scss
浏览文件 @ 0e6a5e69
......@@ -1484,7 +1484,7 @@ $mainHight: 100vh;
}
.el-pagination__jump{
.el-pagination__editor{
}
}
}
......
web/src/components/dashbordCharts/echartsLine.vue → web/src/view/dashboard/dashbordCharts/echartsLine.vue
浏览文件 @ 0e6a5e69
<template>
<div class="dashbord-line-box">
<div class="dashbord-line-title">Gva 仓库commit 记录</div>
<div class="dashbord-line-title">
访问趋势
</div>
<div
ref="echart"
class="dashbord-line"
......@@ -12,8 +14,8 @@ import echarts from 'echarts'
import 'echarts/theme/macarons'
var dataAxis = []
for (var i = 1; i < 21; i++) {
dataAxis.push(`${i}号`)
for (var i = 1; i < 13; i++) {
dataAxis.push(`${i}月`)
}
var data = [
220,
......@@ -28,14 +30,6 @@ var data = [
321,
90,
149,
210,
122,
133,
334,
198,
123,
125,
220,
]
var yMax = 500
var dataShadow = []
......@@ -71,6 +65,12 @@ export default {
},
setOptions() {
this.chart.setOption({
grid: {
left: '40',
right: '40',
top: '40',
bottom: '20',
},
xAxis: {
data: dataAxis,
axisTick: {
......@@ -102,21 +102,14 @@ export default {
series: [
{
type: 'bar',
barWidth: 40,
itemStyle: {
borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' },
]),
color: '#188df0',
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' },
]),
color: '#188df0',
},
},
data: data,
......@@ -129,15 +122,14 @@ export default {
</script>
<style lang="scss" scoped>
.dashbord-line-box {
padding: 20px;
.dashbord-line {
background-color: #fff;
height: 360px;
width: calc(100% - 40px);
width: 100%;
}
.dashbord-line-title {
color: rgb(56, 137, 206);
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}
}
</style>
web/src/components/dashbordTable/dashbordTable.vue → web/src/view/dashboard/dashbordTable/dashbordTable.vue
浏览文件 @ 0e6a5e69
<template>
<div class="commit-table">
<div class="commit-table-title">Gva 仓库commit 记录</div>
<el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
<div class="commit-table-title">
更新日志
</div>
<div class="log">
<div v-for="(item,key) in dataTimeline" :key="key" class="log-item">
<div class="flex-1 flex"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
<div class="flex-5 flex message">{{ item.message }}</div>
<div class="flex-3 flex form">{{ item.from }}</div>
</div>
</div>
<!-- <el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
<el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
</el-table>
</el-table> -->
</div>
</template>
<script>
import { Commits } from '@/api/github'
import { formatTimeToStr } from '@/utils/date.js'
export default {
data() {
return {
......@@ -26,9 +36,9 @@ export default {
Commits(0).then(({ data }) => {
this.loading = false
data.forEach((element, index) => {
if (element.commit.message && index < 6) {
if (element.commit.message && index < 10) {
this.dataTimeline.push({
from: new Date(element.commit.author.date),
from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
title: element.commit.author.name,
showDayAndMonth: true,
message: element.commit.message,
......@@ -42,13 +52,61 @@ export default {
</script>
<style lang="scss" scoped>
.commit-table{
padding: 20px;
background-color: #fff;
height: 400px;
&-title{
color: rgb(56,137,206);
font-size: 18px;
margin-bottom: 20px;
font-weight: 600;
margin-bottom: 12px;
}
.log{
&-item{
display: flex;
justify-content: space-between;
margin-top: 14px;
.key{
&.top{
background: #314659;
color: #FFFFFF;;
}
display: inline-flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #F0F2F5;
text-align: center;
color:rgba($color: #000000, $alpha: 0.65)
}
.message{
color: rgba(0, 0, 0, 0.65);
}
.form{
color: rgba(0, 0, 0, 0.65);
margin-left: 12px;
}
.flex{
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flex-1{
flex:1;
}
.flex-2{
flex:2;
}
.flex-3{
flex:3;
}
.flex-4{
flex:4;
}
.flex-5{
flex:5;
}
}
}
}
</style>
web/src/view/dashboard/index.vue
浏览文件 @ 0e6a5e69
<template>
<div class="page">
<div class="mycard dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon" />今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-custom icon" />总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-comment icon" />好评率 (99%)
</div>
</el-col>
</el-row>
<div class="gva-card-box">
<div class="gva-card dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon" />今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-custom icon" />总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-comment icon" />好评率 (99%)
</div>
</el-col>
</el-row>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
</div>
<div class="mycard dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
<div class="gva-card-box">
<div class="gva-card dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
</div>
<el-card class="mycard quick-entrance">
<template #header>
<div class="card-header">
<span>快捷入口</span>
</div>
</template>
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
class="quick-entrance-items"
@click="toTarget(card.name)"
>
<div class="quick-entrance-item">
<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
<i :class="card.icon" :style="{ color: card.color }" />
</div>
<p>{{ card.label }}</p>
<div class="gva-card-box">
<el-card class="gva-card quick-entrance">
<template #header>
<div class="card-header">
<span>快捷入口</span>
</div>
</el-col>
</el-row>
</el-card>
</template>
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
class="quick-entrance-items"
@click="toTarget(card.name)"
>
<div class="quick-entrance-item">
<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
<i :class="card.icon" :style="{ color: card.color }" />
</div>
<p>{{ card.label }}</p>
</div>
</el-col>
</el-row>
</el-card>
<!-- <div class="quick-entrance-title"></div> -->
<div class="mycard">
<el-row :gutter="0">
<el-col :xs="24" :sm="16">
<echarts-line />
</el-col>
<el-col :xs="24" :sm="8">
<dashbord-table />
</el-col>
</el-row>
</div>
<div class="gva-card-box">
<div class="gva-card">
<div class="card-header">
<span>数据统计</span>
</div>
<div class="echart-box">
<el-row :gutter="20">
<el-col :xs="24" :sm="18">
<echarts-line />
</el-col>
<el-col :xs="24" :sm="6">
<dashbord-table />
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
<script>
import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
import echartsLine from '@/view/dashboard/dashbordCharts/echartsLine.vue'
import dashbordTable from '@/view/dashboard/dashbordTable/dashbordTable.vue'
export default {
components: {
echartsLine,
......@@ -157,33 +168,42 @@ export default {
.page {
background: #f0f2f5;
padding: 0;
.mycard {
.gva-card-box{
padding: 12px;
&+.gva-card-box{
padding-top: 0px;
}
}
.gva-card {
box-sizing: border-box;
background-color: #fff;
border-radius: 10px;
border-radius: 2px;
height: auto;
padding: 10px 30px;
padding: 26px 30px;
overflow: hidden;
margin-bottom: 15px;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
}
.dashbord1 {
height: 120px;
height: 196px;
@include flex-center;
justify-content: space-between;
color: #777;
&-left {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
&-title {
margin-top: 15px;
font-size: 22px;
color: #000;
color: #343844;
}
&-dot {
font-size: 14px;
margin-top: 10px;
color: #6B7687;
}
&-rows {
// margin-top: 15px;
color: #6B7687;
width: 600px;
align-items: center;
}
......@@ -194,11 +214,21 @@ export default {
margin-top: 28px;
}
}
::v-deep(.el-card__header){
padding:0;
border-bottom: none;
}
.card-header{
padding-bottom: 20px;
border-bottom: 1px solid #e8e8e8;
}
.dashbord2 {
@include flex-center;
justify-content: flex-start;
height: 60px;
&-item {
&+.dashbord2-item{
margin-top:24px;
}
line-height: 25px;
}
}
......@@ -234,6 +264,9 @@ export default {
}
}
}
.echart-box{
padding: 14px;
}
}
.icon {
font-size: 20px;
......@@ -249,7 +282,7 @@ export default {
//小屏幕不显示右侧，将登陆框居中
@media (max-width: 750px) {
.mycard {
.gva-card {
padding: 20px 10px !important;
.dashbord1 {
height: auto;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或