Skip to content

phsl / admin

Go to a project
Commit 4dfc8c1b by alwayssuper
Options

feat: home 1

parent b72768ab
Showing with 71 additions and 48 deletions
src/views/iot/home/index.vue
<template> <template>
<div class="min-h-full bg-gray-50"> <div class="min-h-full bg-gray-50">
<el-space direction="vertical" :fill="true" size="large" class="w-full p-4"> <el-space direction="vertical" :fill="true" size="small" class="w-full p-2">
<!-- 统计卡片行 --> <!-- 统计卡片行 -->
<el-row :gutter="20" class="mb-6"> <el-row :gutter="16" class="mb-4">
<el-col :span="6"> <el-col :span="6">
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="stat-card" shadow="never">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-gray-600 text-lg font-medium mb-2">品类数量</span> <span class="text-gray-500 text-base mb-1">品类数量</span>
<span class="text-4xl font-bold text-blue-600 mb-4">{{ statsData.categoryTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.categoryTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex items-center text-gray-500"> <div class="flex items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="ml-2 text-green-500 text-lg">↑ 0</span> <span class="ml-1 text-green-500">↑ 0</span>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="stat-card" shadow="never">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-gray-600 text-lg font-medium mb-2">产品数量</span> <span class="text-gray-500 text-base mb-1">产品数量</span>
<span class="text-4xl font-bold text-indigo-600 mb-4">{{ statsData.productTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.productTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex items-center text-gray-500"> <div class="flex items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="ml-2 text-green-500 text-lg">↑ 0</span> <span class="ml-1 text-green-500">↑ 0</span>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="stat-card" shadow="never">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-gray-600 text-lg font-medium mb-2">设备数量</span> <span class="text-gray-500 text-base mb-1">设备数量</span>
<span class="text-4xl font-bold text-purple-600 mb-4">{{ statsData.deviceTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.deviceTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex items-center text-gray-500"> <div class="flex items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="ml-2 text-green-500 text-lg">↑ 0</span> <span class="ml-1 text-green-500">↑ 0</span>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-card class="stat-card hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="stat-card" shadow="never">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-gray-600 text-lg font-medium mb-2">物模型消息</span> <span class="text-gray-500 text-base mb-1">物模型消息</span>
<span class="text-4xl font-bold text-teal-600 mb-4">{{ statsData.reportTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.reportTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
<div class="flex items-center text-gray-500"> <div class="flex items-center text-gray-400 text-sm">
<span>今日新增</span> <span>今日新增</span>
<span class="ml-2 text-green-500 text-lg">↑ 0</span> <span class="ml-1 text-green-500">↑ 0</span>
</div> </div>
</div> </div>
</el-card> </el-card>
...@@ -58,41 +58,41 @@ ...@@ -58,41 +58,41 @@
</el-row> </el-row>
<!-- 图表行 --> <!-- 图表行 -->
<el-row :gutter="20" class="mb-6"> <el-row :gutter="16" class="mb-4">
<el-col :span="12"> <el-col :span="12">
<el-card class="h-full hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="chart-card" shadow="never">
<template #header> <template #header>
<div class="flex items-center"> <div class="flex items-center">
<h3 class="text-lg font-semibold text-gray-700">设备数量统计</h3> <span class="text-base font-medium text-gray-600">设备数量统计</span>
</div> </div>
</template> </template>
<div ref="chartDeviceNumStat" class="h-[300px]" ></div> <div ref="chartDeviceNumStat" class="h-[240px]"></div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-card class="h-full hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="chart-card" shadow="never">
<template #header> <template #header>
<div class="flex items-center"> <div class="flex items-center">
<h3 class="text-lg font-semibold text-gray-700">设备状态统计</h3> <span class="text-base font-medium text-gray-600">设备状态统计</span>
</div> </div>
</template> </template>
<el-row class="h-[300px]"> <el-row class="h-[240px]">
<el-col :span="8" class="flex flex-col items-center"> <el-col :span="8" class="flex flex-col items-center">
<div ref="chartDeviceOnline" class="h-[200px] w-full" ></div> <div ref="chartDeviceOnline" class="h-[160px] w-full"></div>
<div class="text-center mt-4"> <div class="text-center mt-2">
<span class="text-sm font-medium text-green-600">在线设备</span> <span class="text-sm text-gray-600">在线设备</span>
</div> </div>
</el-col> </el-col>
<el-col :span="8" class="flex flex-col items-center"> <el-col :span="8" class="flex flex-col items-center">
<div ref="chartDeviceOffline" class="h-[200px] w-full" ></div> <div ref="chartDeviceOffline" class="h-[160px] w-full"></div>
<div class="text-center mt-4"> <div class="text-center mt-2">
<span class="text-sm font-medium text-red-600">离线设备</span> <span class="text-sm text-gray-600">离线设备</span>
</div> </div>
</el-col> </el-col>
<el-col :span="8" class="flex flex-col items-center"> <el-col :span="8" class="flex flex-col items-center">
<div ref="chartDeviceActive" class="h-[200px] w-full" ></div> <div ref="chartDeviceActive" class="h-[160px] w-full"></div>
<div class="text-center mt-4"> <div class="text-center mt-2">
<span class="text-sm font-medium text-blue-600">待激活设备</span> <span class="text-sm text-gray-600">待激活设备</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -103,13 +103,13 @@ ...@@ -103,13 +103,13 @@
<!-- 消息统计行 --> <!-- 消息统计行 -->
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-card class="hover:shadow-lg transition-shadow duration-300" shadow="hover"> <el-card class="chart-card" shadow="never">
<template #header> <template #header>
<div class="flex items-center"> <div class="flex items-center">
<h3 class="text-lg font-semibold text-gray-700">消息量统计</h3> <span class="text-base font-medium text-gray-600">消息量统计</span>
</div> </div>
</template> </template>
<div ref="chartMsgStat" class="h-[400px]" ></div> <div ref="chartMsgStat" class="h-[300px]"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
...@@ -385,18 +385,41 @@ onMounted(() => { ...@@ -385,18 +385,41 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.stat-card { .stat-card {
@apply bg-white rounded-lg overflow-hidden; @apply bg-white rounded overflow-hidden;
&:hover { :deep(.el-card__body) {
@apply transform transition-transform duration-300 -translate-y-1; @apply p-3;
}
.el-divider {
@apply my-2;
} }
} }
:deep(.el-card__body) { .chart-card {
@apply p-6; @apply bg-white rounded overflow-hidden;
:deep(.el-card__header) {
@apply py-2 px-3 border-b border-gray-100 bg-white;
}
:deep(.el-card__body) {
@apply p-3;
}
} }
:deep(.el-card__header) { // 修改图表配色方案，使其更加柔和
@apply p-4 border-b border-gray-200 bg-gray-50; :deep(.echarts) {
.tooltip {
@apply bg-white/90 border border-gray-200 shadow-sm;
}
.axis-line {
@apply text-gray-300;
}
.split-line {
@apply text-gray-100;
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment