diff --git a/README.md b/README.md index 1c89bf9..b3d1139 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,6 @@ ## 平台简介 -- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。 -- 成员项目: 基于 vben5(ant-design-vue) 的前端项目 [ruoyi-plus-vben5](https://gitee.com/dapppp/ruoyi-plus-vben5) -- 成员项目: 基于soybean 的前端项目 [ruoyi-plus-soybean](https://gitee.com/xlsea/ruoyi-plus-soybean) -## 配套后端代码仓库地址 - -| 介绍 | 项目名 | 项目地址 | -|------------|:-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| 🔥 分布式集群框架 | RuoYi-Vue-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Vue-Plus) - [GitHub](https://github.com/dromara/RuoYi-Vue-Plus) - [GitCode](https://gitcode.com/dromara/RuoYi-Vue-Plus) | -| 🔥 微服务框架 | RuoYi-Cloud-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Cloud-Plus)- [GitHub](https://github.com/dromara/RuoYi-Cloud-Plus) - [GitCode](https://gitcode.com/dromara/RuoYi-Cloud-Plus) | - -## 分支说明 - -- ts分支(稳定发布主分支 生产可用) -- dev分支(开发分支 开发过程中使用) ## 前端运行 diff --git a/src/api/rfid/statistics.ts b/src/api/rfid/statistics.ts new file mode 100644 index 0000000..2d6e1f2 --- /dev/null +++ b/src/api/rfid/statistics.ts @@ -0,0 +1,34 @@ +import request from '@/utils/request'; + +/** + * 首页统计数据类型(轻量级,不涉及分表数据) + */ +export interface HomeStatsVO { + locationStats: LocationStats; + locations: LocationItem[]; +} + +export interface LocationStats { + totalLocations: number; + workshopCount: number; + processCount: number; + stationCount: number; +} + +export interface LocationItem { + id: number; + locationCode: string; + locationAlias: string; + locationType: string; + childCount: number; +} + +/** + * 获取首页统计数据 + */ +export function getHomeStats() { + return request({ + url: '/rfid/statistics/home', + method: 'get' + }); +} diff --git a/src/views/index.vue b/src/views/index.vue index eb7d088..da04e81 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,184 +1,163 @@ - + + + + + 欢迎使用 RFID 中间件管理系统 + {{ currentTime }} + + + + + - - - - - 设备总数 - {{ stats.totalDevices || 0 }} - + + + + 设备管理 - - - - - 在线设备 - {{ stats.onlineDevices || 0 }} - + + + + 位置管理 - - - - - 离线设备 - {{ stats.offlineDevices || 0 }} - + + + + 读取记录 - - - - - 告警设备 - {{ stats.alarmDevices || 0 }} - + + + + 监控看板 - - - + + + + - - 设备列表 - 查看更多 - + 位置统计 - - - - - - {{ row.locationAlias || '-' }} - - - - - - - - - - - - + + + 位置总数 + {{ stats.locationStats?.totalLocations || 0 }} + + + + 车间数量 + {{ stats.locationStats?.workshopCount || 0 }} + + + 工序数量 + {{ stats.locationStats?.processCount || 0 }} + + + 工位数量 + {{ stats.locationStats?.stationCount || 0 }} + + - + + - 告警记录 - 查看更多 + 车间概览 + 管理位置 - + - - {{ row.deviceName || '-' }} - - - {{ row.alarmTime || '-' }} - - + + + - + - - {{ row.alarmAction || '-' }} - + + + + + + 系统使用指南 + + + + 进入【位置管理】模块,支持创建车间、工序、工位三级位置结构,便于设备归属管理。 + + + 进入【设备管理】模块,可新增、编辑、删除 RFID 读写器设备,并关联到指定位置。 + + + 进入【读取记录】模块,可按时间范围、设备筛选历史读卡数据。 + + + 点击【监控看板】快捷入口,可实时查看设备状态、成功率趋势和告警信息。 + + + @@ -190,53 +169,74 @@ onMounted(() => { margin-bottom: 16px; } - // 统计卡片样式 - .stat-card { + // 欢迎卡片 + .welcome-card { + background: linear-gradient(135deg, #409eff 0%, #53a8ff 100%); :deep(.el-card__body) { - padding: 16px 20px; + padding: 24px 32px; + } + } + .welcome-content { + .welcome-text { + h2 { + color: #fff; + font-size: 22px; + margin: 0 0 8px 0; + } + p { + color: rgba(255,255,255,0.85); + font-size: 14px; + margin: 0; + } } } - .stat-card-inner { - display: flex; - align-items: center; + // 快捷入口卡片 + .shortcut-card { + cursor: pointer; + transition: all 0.3s; + &:hover { + transform: translateY(-4px); + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + } + :deep(.el-card__body) { + padding: 24px 16px; + } } - - .stat-icon { - width: 56px; - height: 56px; - border-radius: 8px; + .shortcut-inner { display: flex; + flex-direction: column; align-items: center; - justify-content: center; - color: #fff; - margin-right: 16px; - flex-shrink: 0; - - &.bg-primary { background: linear-gradient(135deg, #409eff, #53a8ff); } - &.bg-success { background: linear-gradient(135deg, #67c23a, #85ce61); } - &.bg-warning { background: linear-gradient(135deg, #e6a23c, #ebb563); } - &.bg-danger { background: linear-gradient(135deg, #f56c6c, #f78989); } - } - - .stat-content { - flex: 1; - min-width: 0; - - .stat-title { + gap: 12px; + span { font-size: 14px; - color: #909399; - margin-bottom: 4px; - } - - .stat-value { - font-size: 28px; - font-weight: 600; + font-weight: 500; color: #303133; + } + } - &.text-success { color: #67c23a; } - &.text-warning { color: #e6a23c; } - &.text-danger { color: #f56c6c; } + // 位置统计 + .location-stats { + .stat-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + .label { + color: #606266; + font-size: 14px; + } + .value { + font-size: 20px; + font-weight: 600; + color: #303133; + &.text-primary { color: #409eff; } + &.text-success { color: #67c23a; } + &.text-warning { color: #e6a23c; } + } + } + :deep(.el-divider) { + margin: 12px 0; } } @@ -245,7 +245,6 @@ onMounted(() => { display: flex; justify-content: space-between; align-items: center; - span { font-size: 16px; font-weight: 600; @@ -253,7 +252,7 @@ onMounted(() => { } } - // 表格容器 + // 通用卡片内边距 :deep(.el-card__body) { padding: 16px; }
{{ currentTime }}
进入【位置管理】模块,支持创建车间、工序、工位三级位置结构,便于设备归属管理。
进入【设备管理】模块,可新增、编辑、删除 RFID 读写器设备,并关联到指定位置。
进入【读取记录】模块,可按时间范围、设备筛选历史读卡数据。
点击【监控看板】快捷入口,可实时查看设备状态、成功率趋势和告警信息。