git-sync/crawlab
1
0
Fork 0
mirror of https://github.com/crawlab-team/crawlab.git synced 2026-01-21 17:21:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

优化主页指标展示

Browse Source
This commit is contained in:
marvzhang
2020-03-22 09:25:54 +08:00
parent fac2558b20
commit e89e7ea755
4 changed files with 112 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
backend/model/project.go
View File

@@ -152,3 +152,16 @@ func RemoveProject(id bson.ObjectId) error {
return nil
}
func GetProjectCount(filter interface{}) (int, error) {
s, c := database.GetCol("projects")
defer s.Close()
count, err := c.Find(filter).Count()
if err != nil {
return 0, err
}
return count, nil
}

9
backend/routes/stats.go
View File

@@ -15,6 +15,7 @@ func GetHomeStats(c *gin.Context) {
SpiderCount int `json:"spider_count"`
ActiveNodeCount int `json:"active_node_count"`
ScheduleCount int `json:"schedule_count"`
ProjectCount int `json:"project_count"`
}
type Data struct {
@@ -50,6 +51,13 @@ func GetHomeStats(c *gin.Context) {
return
}
// 项目数
projectCount, err := model.GetProjectCount(bson.M{"user_id": services.GetCurrentUserId(c)})
if err != nil {
HandleError(http.StatusInternalServerError, c, err)
return
}
// 每日任务数
items, err := model.GetDailyTaskStats(bson.M{"user_id": services.GetCurrentUserId(c)})
if err != nil {
@@ -66,6 +74,7 @@ func GetHomeStats(c *gin.Context) {
TaskCount: taskCount,
SpiderCount: spiderCount,
ScheduleCount: scheduleCount,
ProjectCount: projectCount,
},
Daily: items,
},

1
frontend/src/i18n/zh.js
View File

@@ -274,6 +274,7 @@ export default {
// 项目
'All Tags': '全部标签',
'Projects': '项目',
'Project Name': '项目名称',
'Project Description': '项目描述',
'Tags': '标签',

138
frontend/src/views/home/Home.vue
View File

@@ -3,20 +3,33 @@
<el-row>
<ul class="metric-list">
<li class="metric-item" v-for="m in metrics" @click="onClickMetric(m)" :key="m.name">
<el-card class="metric-card" shadow="hover">
<el-col :span="6" class="icon-col">
<font-awesome-icon :icon="m.icon" :color="m.color"/>
<!--<i :class="m.icon" :style="{color:m.color}"></i>-->
</el-col>
<el-col :span="18" class="text-col">
<el-row>
<label class="label">{{$t(m.label)}}</label>
</el-row>
<el-row>
<div class="value">{{overviewStats[m.name]}}</div>
</el-row>
</el-col>
</el-card>
<div class="metric-icon" :class="m.color">
<!-- <font-awesome-icon :icon="m.icon"/>-->
<i :class="m.icon"></i>
</div>
<div class="metric-content" :class="m.color">
<div class="metric-wrapper">
<div class="metric-number">
{{overviewStats[m.name]}}
</div>
<div class="metric-name">
{{$t(m.label)}}
</div>
</div>
</div>
<!-- <el-card class="metric-card" shadow="hover">-->
<!-- <el-col :span="6" class="icon-col">-->
<!-- <font-awesome-icon :icon="m.icon" :color="m.color"/>-->
<!-- </el-col>-->
<!-- <el-col :span="18" class="text-col">-->
<!-- <el-row>-->
<!-- <label class="label">{{$t(m.label)}}</label>-->
<!-- </el-row>-->
<!-- <el-row>-->
<!-- <div class="value">{{overviewStats[m.name]}}</div>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!-- </el-card>-->
</li>
</ul>
</el-row>
@@ -41,10 +54,11 @@ export default {
overviewStats: {},
dailyTasks: [],
metrics: [
{ name: 'task_count', label: 'Total Tasks', icon: ['fa', 'play'], color: '#f56c6c', path: 'tasks' },
{ name: 'spider_count', label: 'Spiders', icon: ['fa', 'bug'], color: '#67c23a', path: 'spiders' },
{ name: 'active_node_count', label: 'Active Nodes', icon: ['fa', 'server'], color: '#409EFF', path: 'nodes' },
{ name: 'schedule_count', label: 'Schedules', icon: ['fa', 'clock'], color: '#409EFF', path: 'schedules' }
{ name: 'task_count', label: 'Total Tasks', icon: 'fa fa-check', color: 'blue', path: 'tasks' },
{ name: 'spider_count', label: 'Spiders', icon: 'fa fa-bug', color: 'green', path: 'spiders' },
{ name: 'active_node_count', label: 'Active Nodes', icon: 'fa fa-server', color: 'red', path: 'nodes' },
{ name: 'schedule_count', label: 'Schedules', icon: 'fa fa-clock-o', color: 'orange', path: 'schedules' },
{ name: 'project_count', label: 'Projects', icon: 'fa fa-code-fork', color: 'grey', path: 'projects' }
]
}
},
@@ -105,45 +119,71 @@ export default {
margin-right: 0;
}
.metric-item {
flex-basis: 25%;
.metric-item:hover {
transform: scale(1.05);
transition: transform 0.5s ease;
}
.metric-card:hover {
.metric-item {
flex-basis: 20%;
height: 64px;
display: flex;
color: white;
cursor: pointer;
.metric-icon {
display: inline-flex;
width: 64px;
align-items: center;
justify-content: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 24px;
svg {
width: 24px;
}
}
.metric-card {
margin-right: 30px;
cursor: pointer;
.metric-content {
display: flex;
width: calc(100% - 80px);
align-items: center;
opacity: 0.85;
font-size: 14px;
padding-left: 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
.icon-col {
text-align: right;
i {
margin-bottom: 15px;
font-size: 56px;
}
.metric-number {
font-weight: bolder;
margin-bottom: 5px;
}
}
.text-col {
padding-left: 20px;
height: 76px;
text-align: center;
.metric-icon.blue,
.metric-content.blue {
background: #409eff;
}
.label {
cursor: pointer;
font-size: 16px;
display: block;
height: 24px;
color: grey;
font-weight: 900;
}
.metric-icon.green,
.metric-content.green {
background: #67c23a;
}
.value {
font-size: 24px;
display: block;
height: 32px;
}
}
.metric-icon.red,
.metric-content.red {
background: #f56c6c;
}
.metric-icon.orange,
.metric-content.orange {
background: #E6A23C;
}
.metric-icon.grey,
.metric-content.grey {
background: #97a8be;
}
}
}