Skip to content

Commit 4dfc8c1

Browse files
SuperAlwaysSuperAlways
committed
feat: home 1
1 parent b72768a commit 4dfc8c1

File tree

1 file changed

+71
-48
lines changed

1 file changed

+71
-48
lines changed

‎src/views/iot/home/index.vue

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,98 @@
11
<template>
22
<div class="min-h-full bg-gray-50">
3-
<el-space direction="vertical" :fill="true" size="large" class="w-full p-4">
3+
<el-space direction="vertical" :fill="true" size="small" class="w-full p-2">
44
<!-- 统计卡片行 -->
5-
<el-row :gutter="20" class="mb-6">
5+
<el-row :gutter="16" class="mb-4">
66
<el-col :span="6">
7-
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover">
7+
<el-card class="stat-card" shadow="never">
88
<div class="flex flex-col">
9-
<span class="text-gray-600 text-lg font-medium mb-2">品类数量</span>
10-
<span class="text-4xl font-bold text-blue-600 mb-4">{{ statsData.categoryTotal }}</span>
9+
<span class="text-gray-500 text-base mb-1">品类数量</span>
10+
<span class="text-3xl font-bold text-gray-700">{{ statsData.categoryTotal }}</span>
1111
<el-divider class="my-2" />
12-
<div class="flex items-center text-gray-500">
12+
<div class="flex items-center text-gray-400 text-sm">
1313
<span>今日新增</span>
14-
<span class="ml-2 text-green-500 text-lg">↑ 0</span>
14+
<span class="ml-1 text-green-500">↑ 0</span>
1515
</div>
1616
</div>
1717
</el-card>
1818
</el-col>
1919
<el-col :span="6">
20-
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover">
20+
<el-card class="stat-card" shadow="never">
2121
<div class="flex flex-col">
22-
<span class="text-gray-600 text-lg font-medium mb-2">产品数量</span>
23-
<span class="text-4xl font-bold text-indigo-600 mb-4">{{ statsData.productTotal }}</span>
22+
<span class="text-gray-500 text-base mb-1">产品数量</span>
23+
<span class="text-3xl font-bold text-gray-700">{{ statsData.productTotal }}</span>
2424
<el-divider class="my-2" />
25-
<div class="flex items-center text-gray-500">
25+
<div class="flex items-center text-gray-400 text-sm">
2626
<span>今日新增</span>
27-
<span class="ml-2 text-green-500 text-lg">↑ 0</span>
27+
<span class="ml-1 text-green-500">↑ 0</span>
2828
</div>
2929
</div>
3030
</el-card>
3131
</el-col>
3232
<el-col :span="6">
33-
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover">
33+
<el-card class="stat-card" shadow="never">
3434
<div class="flex flex-col">
35-
<span class="text-gray-600 text-lg font-medium mb-2">设备数量</span>
36-
<span class="text-4xl font-bold text-purple-600 mb-4">{{ statsData.deviceTotal }}</span>
35+
<span class="text-gray-500 text-base mb-1">设备数量</span>
36+
<span class="text-3xl font-bold text-gray-700">{{ statsData.deviceTotal }}</span>
3737
<el-divider class="my-2" />
38-
<div class="flex items-center text-gray-500">
38+
<div class="flex items-center text-gray-400 text-sm">
3939
<span>今日新增</span>
40-
<span class="ml-2 text-green-500 text-lg">↑ 0</span>
40+
<span class="ml-1 text-green-500">↑ 0</span>
4141
</div>
4242
</div>
4343
</el-card>
4444
</el-col>
4545
<el-col :span="6">
46-
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover">
46+
<el-card class="stat-card" shadow="never">
4747
<div class="flex flex-col">
48-
<span class="text-gray-600 text-lg font-medium mb-2">物模型消息</span>
49-
<span class="text-4xl font-bold text-teal-600 mb-4">{{ statsData.reportTotal }}</span>
48+
<span class="text-gray-500 text-base mb-1">物模型消息</span>
49+
<span class="text-3xl font-bold text-gray-700">{{ statsData.reportTotal }}</span>
5050
<el-divider class="my-2" />
51-
<div class="flex items-center text-gray-500">
51+
<div class="flex items-center text-gray-400 text-sm">
5252
<span>今日新增</span>
53-
<span class="ml-2 text-green-500 text-lg">↑ 0</span>
53+
<span class="ml-1 text-green-500">↑ 0</span>
5454
</div>
5555
</div>
5656
</el-card>
5757
</el-col>
5858
</el-row>
5959

6060
<!-- 图表行 -->
61-
<el-row :gutter="20" class="mb-6">
61+
<el-row :gutter="16" class="mb-4">
6262
<el-col :span="12">
63-
<el-card class="h-full hover:shadow-lg transition-shadow duration-300" shadow="hover">
63+
<el-card class="chart-card" shadow="never">
6464
<template #header>
6565
<div class="flex items-center">
66-
<h3 class="text-lg font-semibold text-gray-700">设备数量统计</h3>
66+
<span class="text-base font-medium text-gray-600">设备数量统计</span>
6767
</div>
6868
</template>
69-
<div ref="chartDeviceNumStat" class="h-[300px]" ></div>
69+
<div ref="chartDeviceNumStat" class="h-[240px]"></div>
7070
</el-card>
7171
</el-col>
7272
<el-col :span="12">
73-
<el-card class="h-full hover:shadow-lg transition-shadow duration-300" shadow="hover">
73+
<el-card class="chart-card" shadow="never">
7474
<template #header>
7575
<div class="flex items-center">
76-
<h3 class="text-lg font-semibold text-gray-700">设备状态统计</h3>
76+
<span class="text-base font-medium text-gray-600">设备状态统计</span>
7777
</div>
7878
</template>
79-
<el-row class="h-[300px]">
79+
<el-row class="h-[240px]">
8080
<el-col :span="8" class="flex flex-col items-center">
81-
<div ref="chartDeviceOnline" class="h-[200px] w-full" ></div>
82-
<div class="text-center mt-4">
83-
<span class="text-sm font-medium text-green-600">在线设备</span>
81+
<div ref="chartDeviceOnline" class="h-[160px] w-full"></div>
82+
<div class="text-center mt-2">
83+
<span class="text-sm text-gray-600">在线设备</span>
8484
</div>
8585
</el-col>
8686
<el-col :span="8" class="flex flex-col items-center">
87-
<div ref="chartDeviceOffline" class="h-[200px] w-full" ></div>
88-
<div class="text-center mt-4">
89-
<span class="text-sm font-medium text-red-600">离线设备</span>
87+
<div ref="chartDeviceOffline" class="h-[160px] w-full"></div>
88+
<div class="text-center mt-2">
89+
<span class="text-sm text-gray-600">离线设备</span>
9090
</div>
9191
</el-col>
9292
<el-col :span="8" class="flex flex-col items-center">
93-
<div ref="chartDeviceActive" class="h-[200px] w-full" ></div>
94-
<div class="text-center mt-4">
95-
<span class="text-sm font-medium text-blue-600">待激活设备</span>
93+
<div ref="chartDeviceActive" class="h-[160px] w-full"></div>
94+
<div class="text-center mt-2">
95+
<span class="text-sm text-gray-600">待激活设备</span>
9696
</div>
9797
</el-col>
9898
</el-row>
@@ -103,13 +103,13 @@
103103
<!-- 消息统计行 -->
104104
<el-row>
105105
<el-col :span="24">
106-
<el-card class="hover:shadow-lg transition-shadow duration-300" shadow="hover">
106+
<el-card class="chart-card" shadow="never">
107107
<template #header>
108108
<div class="flex items-center">
109-
<h3 class="text-lg font-semibold text-gray-700">消息量统计</h3>
109+
<span class="text-base font-medium text-gray-600">消息量统计</span>
110110
</div>
111111
</template>
112-
<div ref="chartMsgStat" class="h-[400px]" ></div>
112+
<div ref="chartMsgStat" class="h-[300px]"></div>
113113
</el-card>
114114
</el-col>
115115
</el-row>
@@ -385,18 +385,41 @@ onMounted(() => {
385385

386386
<style lang="scss" scoped>
387387
.stat-card {
388-
@apply bg-white rounded-lg overflow-hidden;
388+
@apply bg-white rounded overflow-hidden;
389389
390-
&:hover {
391-
@apply transform transition-transform duration-300 -translate-y-1;
390+
:deep(.el-card__body) {
391+
@apply p-3;
392+
}
393+
394+
.el-divider {
395+
@apply my-2;
392396
}
393397
}
394398
395-
:deep(.el-card__body) {
396-
@apply p-6;
399+
.chart-card {
400+
@apply bg-white rounded overflow-hidden;
401+
402+
:deep(.el-card__header) {
403+
@apply py-2 px-3 border-b border-gray-100 bg-white;
404+
}
405+
406+
:deep(.el-card__body) {
407+
@apply p-3;
408+
}
397409
}
398410
399-
:deep(.el-card__header) {
400-
@apply p-4 border-b border-gray-200 bg-gray-50;
411+
// 修改图表配色方案，使其更加柔和
412+
:deep(.echarts) {
413+
.tooltip {
414+
@apply bg-white/90 border border-gray-200 shadow-sm;
415+
}
416+
417+
.axis-line {
418+
@apply text-gray-300;
419+
}
420+
421+
.split-line {
422+
@apply text-gray-100;
423+
}
401424
}
402425
</style>

0 commit comments

Comments
 (0)