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

refactor: enhance data structure annotations and improve layout responsiveness in Home component

Browse Source
This commit is contained in:
Marvin Zhang
2025-08-07 09:58:11 +08:00
parent 44dd68918f
commit 060396af3d
2 changed files with 74 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/controllers/stats.go
View File

@@ -2,9 +2,10 @@ package controllers
import (
"errors"
"time"
"github.com/crawlab-team/crawlab/core/models/service"
"go.mongodb.org/mongo-driver/bson/primitive"
"time"
"github.com/crawlab-team/crawlab/core/constants"
"github.com/crawlab-team/crawlab/core/entity"
@@ -189,20 +190,20 @@ type GetStatsTaskResponse struct {
}
type GetStatsTaskResponseByStatusItem struct {
Status string `json:"status"`
Tasks int `json:"tasks"`
Status string `json:"status" bson:"status"`
Tasks int `json:"tasks" bson:"tasks"`
}
type GetStatsTaskResponseByNodeItem struct {
NodeId primitive.ObjectID `json:"node_id"`
Node models.Node `json:"node"`
NodeName string `json:"node_name"`
Tasks int `json:"tasks"`
NodeId primitive.ObjectID `json:"node_id" bson:"node_id"`
Node models.Node `json:"node" bson:"node"`
NodeName string `json:"node_name" bson:"node_name"`
Tasks int `json:"tasks" bson:"tasks"`
}
type GetStatsTaskResponseBySpiderItem struct {
SpiderId primitive.ObjectID `json:"spider_id"`
Spider models.Spider `json:"spider"`
SpiderName string `json:"spider_name"`
Tasks int `json:"tasks"`
SpiderId primitive.ObjectID `json:"spider_id" bson:"spider_id"`
Spider models.Spider `json:"spider" bson:"spider"`
SpiderName string `json:"spider_name" bson:"spider_name"`
Tasks int `json:"tasks" bson:"tasks"`
}
func GetStatsTasks(_ *gin.Context, params *GetStatsTasksParams) (response *Response[GetStatsTaskResponse], err error) {
@@ -280,7 +281,7 @@ func getTaskStatsByNode(query bson.M) (data []GetStatsTaskResponseByNodeItem, er
{{
"$project",
bson.M{
"node_id": "$node_id",
"node_id": "$_id",
"node": bson.M{"$arrayElemAt": bson.A{"$_n", 0}},
"node_name": bson.M{"$arrayElemAt": bson.A{"$_n.name", 0}},
"tasks": "$tasks",
@@ -315,7 +316,7 @@ func getTaskStatsBySpider(query bson.M) (data []GetStatsTaskResponseBySpiderItem
{{
"$project",
bson.M{
"spider_id": "$spider_id",
"spider_id": "$_id",
"spider": bson.M{"$arrayElemAt": bson.A{"$_s", 0}},
"spider_name": bson.M{"$arrayElemAt": bson.A{"$_s.name", 0}},
"tasks": "$tasks",

62
frontend/crawlab-ui/src/views/home/Home.vue
View File

@@ -320,13 +320,9 @@ defineOptions({ name: 'ClHome' });
<template>
<el-scrollbar>
<div class="home">
<el-row class="row-overview-metrics">
<el-col
v-for="(m, i) in metrics"
:key="i"
:span="24 / Math.min(metrics.length, 4)"
>
<div class="row-overview-metrics">
<cl-metric
v-for="m in metrics"
:icon="m.icon"
:title="m.name"
:value="m.value"
@@ -334,38 +330,32 @@ defineOptions({ name: 'ClHome' });
:color="getColor(m)"
@click="onMetricClick(m)"
/>
</el-col>
</el-row>
<el-row class="row-line-chart">
</div>
<div class="row-line-chart">
<cl-chart
type="line"
:data="dailyChartData"
:options="dailyChartOptions"
/>
</el-row>
<el-row class="row-pie-chart">
<el-col :span="8">
</div>
<div class="row-pie-chart">
<cl-chart
type="pie"
:data="tasksByStatusChartData"
:options="tasksByStatusChartOptions"
/>
</el-col>
<el-col :span="8">
<cl-chart
type="pie"
:data="tasksByNodeChartData"
:options="tasksByNodeChartOptions"
/>
</el-col>
<el-col :span="8">
<cl-chart
type="pie"
:data="tasksBySpiderChartData"
:options="tasksBySpiderChartOptions"
/>
</el-col>
</el-row>
</div>
</div>
</el-scrollbar>
</template>
@@ -373,23 +363,45 @@ defineOptions({ name: 'ClHome' });
<style scoped>
.home {
background: white;
min-height: calc(
100vh - var(--cl-header-height) - var(--cl-tabs-view-height)
);
padding: 20px;
.row-overview-metrics {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
display: grid;
margin-bottom: 12px;
@media (min-width: 768px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 1280px) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.row-line-chart {
height: 400px;
margin-bottom: 12px;
}
.row-pie-chart {
height: 400px;
display: grid;
margin-bottom: 12px;
@media (min-width: 768px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1280px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}
</style>