Wance/frontend_hmi_station
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化仓库

Browse Source
This commit is contained in:
tao
2025-12-17 17:00:29 +08:00
commit 71158afc35
44 changed files with 5301 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
src/views/index.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<div class="ipc-dashboard">
<Header title="过站工控机">
<template #right>
<a-button @click="handleLogout">退出登录</a-button>
</template>
</Header>
<div class="menu-grid">
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/pwoManage')">
<div class="icon-wrap">
<i-lucide-building />
</div>
<div class="text">
<div class="title">工单管理</div>
<div class="desc">管理生产工单和进度</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/stationControl')">
<div class="icon-wrap">
<i-lucide-monitor />
</div>
<div class="text">
<div class="title">游站控制</div>
<div class="desc">设备状态监控和控制</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dispatch')">
<div class="icon-wrap">
<i-lucide-package />
</div>
<div class="text">
<div class="title">出站管理</div>
<div class="desc">产品出站和质量检测</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/hold')">
<div class="icon-wrap">
<i-lucide-server />
</div>
<div class="text">
<div class="title">Hold管理</div>
<div class="desc">异常处理和Hold状态管理</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dataAnalysis')">
<div class="icon-wrap">
<i-lucide-bar-chart-3 />
</div>
<div class="text">
<div class="title">数据分析</div>
<div class="desc">生产数据统计分析</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/maintenance')">
<div class="icon-wrap">
<i-lucide-wrench />
</div>
<div class="text">
<div class="title">设备维护</div>
<div class="desc">设备保养和维修记录</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/personnel')">
<div class="icon-wrap">
<i-lucide-users />
</div>
<div class="text">
<div class="title">人员管理</div>
<div class="desc">操作人员及权限管理</div>
</div>
</a-card>
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/settings')">
<div class="icon-wrap">
<i-lucide-settings />
</div>
<div class="text">
<div class="title">系统设置</div>
<div class="desc">系统参数配置</div>
</div>
</a-card>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { useAuthStore, useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
const authStore = useAuthStore();
const userStore = useUserStore();
const { username } = storeToRefs(userStore);
const { token } = storeToRefs(authStore);
const loggedIn = ref(Boolean(token.value));
const router = useRouter();
const handleLogout = () => {
Modal.confirm({
title: '提示',
content: `是否确认退出登录：${username.value}`,
okText: '确定',
cancelText: '取消',
onOk: () => {
message.success('已退出');
},
onCancel: () => {
message.error('操作失败');
}
});
};
const handleJumpTo = (path) => {
if (!loggedIn.value) {
message.warning("尚未登录，请先登录");
return;
}
router.push({ path });
};
</script>
<style scoped lang="scss">
.ipc-dashboard {
background: #f5f7fa;
height: 100vh;
display: flex;
flex-direction: column;
}
.menu-grid {
flex: 1;
display: flex;
flex-wrap: wrap;
padding: 8vh 6vh;
gap: 4%;
row-gap: 6vh;
.menu-card {
width: 22%;
cursor: pointer;
border-radius: 1vw;
overflow: visible;
:deep(.ant-card-body) {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px 16px;
gap: 1vh;
.icon-wrap {
width: 5vw;
height: 5vw;
border-radius: 50%;
background: linear-gradient(180deg, #0c6bd1 0%, #1c6fb8 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 3vw;
}
.text {
text-align: center;
.title {
font-size: 1.2vw;
font-weight: 500;
margin-bottom: 6px;
}
.desc {
color: #8b96a7;
font-size: 0.9vw;
}
}
}
}
}
:deep(.login-dialog) {
.ant-modal {
width: 48vw;
left: 26vw;
border-radius: 16px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
overflow: hidden;
}
.ant-modal-header {
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
border-bottom: none;
padding: 24px 20px !important;
.ant-modal-title {
color: #fff;
font-size: 20px;
font-weight: 600;
}
.ant-modal-close-x {
color: rgba(255, 255, 255, 0.7);
font-size: 20px;
&:hover {
color: #fff;
}
}
}
.ant-modal-body {
padding: 32px 28px !important;
}
.login-form {
.ant-form-item {
margin-bottom: 22px;
.ant-form-item-label > label {
color: #1f2937;
font-size: 16px;
font-weight: 500;
padding-bottom: 10px;
}
.ant-input {
font-size: 16px;
height: 42px;
border-radius: 8px;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
padding: 0 1rem;
&:focus,
&:hover {
border-color: #0c6bd1;
box-shadow: 0 0 0 3px rgba(12, 107, 209, 0.1);
}
}
.ant-input-password-icon {
color: #bfbfbf;
&:hover {
color: #0c6bd1;
}
}
}
}
.ant-modal-footer {
padding: 20px 28px !important;
border-top: 1px solid #f0f0f0;
background: #fafafa;
border-radius: 0 0 16px 16px;
.ant-btn {
font-size: 16px;
font-weight: 500;
border-radius: 8px;
padding: 10px 32px !important;
transition: all 0.3s ease;
&:not(.btn-primary) {
border-color: #d9d9d9;
color: #595959;
&:hover {
border-color: #0c6bd1;
color: #0c6bd1;
background: #f0f7ff;
}
}
}
.btn-primary {
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
border: none;
color: #fff;
&:hover {
box-shadow: 0 4px 16px rgba(12, 107, 209, 0.4);
}
}
}
}
</style>