|
|
<template>
|
|
|
<div class="app-container home">
|
|
|
<!-- 欢迎区域 -->
|
|
|
<el-card shadow="hover" class="welcome-card mb-4">
|
|
|
<div class="welcome-content">
|
|
|
<div class="welcome-text">
|
|
|
<h2>欢迎使用 RFID 中间件管理系统</h2>
|
|
|
<p>{{ currentTime }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 快捷入口 -->
|
|
|
<el-row :gutter="16" class="mb-4">
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
<el-card shadow="hover" class="shortcut-card" @click="$router.push('/base/rfidDevice')">
|
|
|
<div class="shortcut-inner">
|
|
|
<el-icon :size="36" color="#409eff"><Monitor /></el-icon>
|
|
|
<span>设备管理</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
<el-card shadow="hover" class="shortcut-card" @click="$router.push('/base/rfidLocation')">
|
|
|
<div class="shortcut-inner">
|
|
|
<el-icon :size="36" color="#67c23a"><Location /></el-icon>
|
|
|
<span>位置管理</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
<el-card shadow="hover" class="shortcut-card" @click="$router.push('/base/rfidReadRecord')">
|
|
|
<div class="shortcut-inner">
|
|
|
<el-icon :size="36" color="#e6a23c"><Document /></el-icon>
|
|
|
<span>读取记录</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
<el-card shadow="hover" class="shortcut-card" @click="$router.push('/rfid/dashboard')">
|
|
|
<div class="shortcut-inner">
|
|
|
<el-icon :size="36" color="#f56c6c"><DataAnalysis /></el-icon>
|
|
|
<span>监控看板</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 位置统计与列表 -->
|
|
|
<el-row :gutter="16" class="mb-4">
|
|
|
<!-- 位置统计卡片 -->
|
|
|
<el-col :xs="24" :md="8">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header"><span>位置统计</span></div>
|
|
|
</template>
|
|
|
<div class="location-stats">
|
|
|
<div class="stat-item">
|
|
|
<span class="label">位置总数</span>
|
|
|
<span class="value">{{ stats.locationStats?.totalLocations || 0 }}</span>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="stat-item">
|
|
|
<span class="label">车间数量</span>
|
|
|
<span class="value text-primary">{{ stats.locationStats?.workshopCount || 0 }}</span>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
<span class="label">工序数量</span>
|
|
|
<span class="value text-success">{{ stats.locationStats?.processCount || 0 }}</span>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
<span class="label">工位数量</span>
|
|
|
<span class="value text-warning">{{ stats.locationStats?.stationCount || 0 }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<!-- 顶级位置列表 -->
|
|
|
<el-col :xs="24" :md="16">
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span>车间概览</span>
|
|
|
<el-button type="primary" link @click="$router.push('/base/rfidLocation')">管理位置</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-table :data="stats.locations || []" border stripe max-height="260" empty-text="暂无位置数据">
|
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|
|
<el-table-column prop="locationCode" label="位置编号" min-width="100" />
|
|
|
<el-table-column prop="locationAlias" label="位置名称" min-width="120" />
|
|
|
<el-table-column prop="locationType" label="位置类型" width="100" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<dict-tag :options="location_type" :value="row.locationType"/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="childCount" label="子位置数" width="100" align="center" />
|
|
|
</el-table>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 系统帮助 -->
|
|
|
<el-card shadow="hover">
|
|
|
<template #header>
|
|
|
<div class="card-header"><span>系统使用指南</span></div>
|
|
|
</template>
|
|
|
<el-collapse>
|
|
|
<el-collapse-item title="1. 如何管理位置？" name="1">
|
|
|
<p>进入【位置管理】模块，支持创建车间、工序、工位三级位置结构，便于设备归属管理。</p>
|
|
|
</el-collapse-item>
|
|
|
<el-collapse-item title="2. 如何管理设备？" name="2">
|
|
|
<p>进入【设备管理】模块，可新增、编辑、删除 RFID 读写器设备，并关联到指定位置。</p>
|
|
|
</el-collapse-item>
|
|
|
<el-collapse-item title="3. 如何查看读取记录？" name="3">
|
|
|
<p>进入【读取记录】模块，可按时间范围、设备筛选历史读卡数据。</p>
|
|
|
</el-collapse-item>
|
|
|
<el-collapse-item title="4. 如何进入监控看板？" name="4">
|
|
|
<p>点击【监控看板】快捷入口，可实时查看设备状态、成功率趋势和告警信息。</p>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="Index" lang="ts">
|
|
|
import { onMounted, ref, getCurrentInstance, toRefs, type ComponentInternalInstance, onUnmounted } from 'vue';
|
|
|
import { getHomeStats, type HomeStatsVO } from "@/api/rfid/statistics";
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
const { location_type } = toRefs<any>(proxy?.useDict("location_type"));
|
|
|
|
|
|
const stats = ref<Partial<HomeStatsVO>>({});
|
|
|
const currentTime = ref('');
|
|
|
let timer: number | null = null;
|
|
|
|
|
|
const updateTime = () => {
|
|
|
const now = new Date();
|
|
|
currentTime.value = now.toLocaleString('zh-CN', {
|
|
|
year: 'numeric', month: '2-digit', day: '2-digit',
|
|
|
hour: '2-digit', minute: '2-digit', second: '2-digit'
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const loadData = async () => {
|
|
|
try {
|
|
|
const res = await getHomeStats();
|
|
|
stats.value = res.data;
|
|
|
} catch (e) {
|
|
|
console.error("获取首页数据失败", e);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
updateTime();
|
|
|
timer = window.setInterval(updateTime, 1000);
|
|
|
loadData();
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
if (timer) clearInterval(timer);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.home {
|
|
|
padding: 16px;
|
|
|
|
|
|
.mb-4 {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
// 欢迎卡片
|
|
|
.welcome-card {
|
|
|
background: linear-gradient(135deg, #409eff 0%, #53a8ff 100%);
|
|
|
:deep(.el-card__body) {
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 快捷入口卡片
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
.shortcut-inner {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
color: #303133;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 位置统计
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 卡片头部样式
|
|
|
.card-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
color: #303133;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 通用卡片内边距
|
|
|
:deep(.el-card__body) {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|