Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
是阿延啊
gin-vue-admin
提交
0e6a5e69
G
gin-vue-admin
项目概览
是阿延啊
/
gin-vue-admin
与 Fork 源项目一致
Fork自
FLIPPED-AURORA / gin-vue-admin
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0e6a5e69
编写于
9月 18, 2021
作者:
P
piexlmax
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
dashboard调整
上级
26d48129
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
250 addition
and
113 deletion
+250
-113
web/src/style/main.scss
web/src/style/main.scss
+1
-1
web/src/view/dashboard/dashbordCharts/echartsLine.vue
web/src/view/dashboard/dashbordCharts/echartsLine.vue
+17
-25
web/src/view/dashboard/dashbordTable/dashbordTable.vue
web/src/view/dashboard/dashbordTable/dashbordTable.vue
+112
-0
web/src/view/dashboard/index.vue
web/src/view/dashboard/index.vue
+120
-87
未找到文件。
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
:
18
px
;
font-weight
:
600
;
margin-bottom
:
12
px
;
}
}
</
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
:
10
px
;
border-radius
:
2
px
;
height
:
auto
;
padding
:
10
px
30px
;
padding
:
26
px
30px
;
overflow
:
hidden
;
margin-bottom
:
15px
;
box-shadow
:
0
0
7px
1px
rgba
(
0
,
0
,
0
,
0
.03
);
}
.dashbord1
{
height
:
1
20
px
;
height
:
1
96
px
;
@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
)
{
.
my
card
{
.
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录