piexlmax
3 years ago
5 changed files with 250 additions and 167 deletions
-
54web/src/components/dashbordTable/dashbordTable.vue
-
42web/src/view/dashboard/dashbordCharts/echartsLine.vue
-
112web/src/view/dashboard/dashbordTable/dashbordTable.vue
-
77web/src/view/dashboard/index.vue
@ -1,54 +0,0 @@ |
|||
<template> |
|||
<div class="commit-table"> |
|||
<div class="commit-table-title">Gva 仓库commit 记录</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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Commits } from '@/api/github' |
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
dataTimeline: [], |
|||
} |
|||
}, |
|||
created() { |
|||
this.loadCommits() |
|||
}, |
|||
methods: { |
|||
loadCommits() { |
|||
Commits(0).then(({ data }) => { |
|||
this.loading = false |
|||
data.forEach((element, index) => { |
|||
if (element.commit.message && index < 6) { |
|||
this.dataTimeline.push({ |
|||
from: new Date(element.commit.author.date), |
|||
title: element.commit.author.name, |
|||
showDayAndMonth: true, |
|||
message: element.commit.message, |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</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; |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<div class="commit-table"> |
|||
<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> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Commits } from '@/api/github' |
|||
import { formatTimeToStr } from '@/utils/date.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
dataTimeline: [], |
|||
} |
|||
}, |
|||
created() { |
|||
this.loadCommits() |
|||
}, |
|||
methods: { |
|||
loadCommits() { |
|||
Commits(0).then(({ data }) => { |
|||
this.loading = false |
|||
data.forEach((element, index) => { |
|||
if (element.commit.message && index < 10) { |
|||
this.dataTimeline.push({ |
|||
from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'), |
|||
title: element.commit.author.name, |
|||
showDayAndMonth: true, |
|||
message: element.commit.message, |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.commit-table{ |
|||
background-color: #fff; |
|||
height: 400px; |
|||
&-title{ |
|||
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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue