mirror of
https://gitee.com/myxzgzs/boyue-ui-admin-vue3
synced 2025-08-08 16:32:43 +08:00
feat: home 1
This commit is contained in:
alwayssuper
parent
b72768ab4f
commit
4dfc8c1b04
@ -1,56 +1,56 @@
|
|||||||
<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 @@
|
|||||||
</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 @@
|
|||||||
<!-- 消息统计行 -->
|
<!-- 消息统计行 -->
|
||||||
<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(() => {
|
|||||||
|
|
||||||
<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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user