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

添加 Title 组件

Browse Source
This commit is contained in:
tao
2025-12-30 15:51:13 +08:00
parent 1b4c9bcc8d
commit 7b36211f04
8 changed files with 60 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
src/components/common/ActionButtons/index.vue
View File

@@ -1,394 +0,0 @@
<template>
<div class="bottom-actions">
<div class="pagination-container">
<div class="pagination-control left" v-if="showPagination">
<div class="pagination-btn-wrapper">
<a-button :disabled="currentPage === 1" @click="goToPrevPage" class="pagination-btn prev-btn">
<template #icon>
<LeftOutlined />
</template>
</a-button>
<div class="page-tooltip" v-if="currentPage > 1">
{{ currentPage - 1 }} / {{ totalPages }}
</div>
</div>
</div>
<div class="buttons-container">
<a-row :gutter="16" justify="center">
<a-col v-for="button in currentPageButtons" :key="button.label">
<a-button :type="button.type" size="large" @click="executeButtonAction(button.handler)"
:class="['action-button', getButtonStatusClass(button)]">
<component :is="getButtonStatusIcon(button)" v-if="getButtonStatusIcon(button)"
class="status-icon-btn" />
{{ button.label }}
</a-button>
</a-col>
</a-row>
</div>
<div class="pagination-control right" v-if="showPagination">
<div class="pagination-btn-wrapper">
<a-button :disabled="currentPage === totalPages" @click="goToNextPage" class="pagination-btn next-btn">
<template #icon>
<RightOutlined />
</template>
</a-button>
<div class="page-tooltip" v-if="currentPage < totalPages">
{{ currentPage + 1 }} / {{ totalPages }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
interface ActionButton {
label: string;
handler: string;
type: ButtonType;
status?: 'running' | 'paused' | 'idle';
}
interface Props {
buttons: ActionButton[];
buttonsPerPage?: number;
}
interface Emits {
(e: 'execute', handlerName: string): void;
}
const props = withDefaults(defineProps<Props>(), {
buttonsPerPage: 6
});
const emit = defineEmits<Emits>();
// 底部按钮分页控制
const currentPage = ref(1);
const buttonsPerPage = ref(props.buttonsPerPage);
// 获取按钮状态样式类
const getButtonStatusClass = (button: ActionButton) => {
const statusClasses = {
running: 'status-running',
paused: 'status-paused',
idle: 'status-idle'
};
return statusClasses[button.status || 'idle'];
};
// 获取按钮状态图标
const getButtonStatusIcon = (button: ActionButton) => {
const statusIcons = {
running: 'i-play-circle',
paused: 'i-pause-circle',
idle: ''
};
return statusIcons[button.status || 'idle'];
};
// 计算当前页显示的按钮
const currentPageButtons = computed(() => {
const start = (currentPage.value - 1) * buttonsPerPage.value;
const end = start + buttonsPerPage.value;
return props.buttons.slice(start, end);
});
// 计算总页数
const totalPages = computed(() => {
return Math.ceil(props.buttons.length / buttonsPerPage.value);
});
// 是否显示分页控制
const showPagination = computed(() => {
return totalPages.value > 1;
});
// 分页控制函数
const goToPrevPage = () => {
if (currentPage.value > 1) {
currentPage.value--;
}
};
const goToNextPage = () => {
if (currentPage.value < totalPages.value) {
currentPage.value++;
}
};
// 执行按钮操作
const executeButtonAction = (handlerName: string) => {
emit('execute', handlerName);
};
// 响应式调整按钮数量
const updateButtonsPerPage = () => {
nextTick(() => {
const buttonsContainer = document.querySelector('.buttons-container') as HTMLElement;
if (!buttonsContainer) {
buttonsPerPage.value = props.buttonsPerPage; // 默认值
return;
}
const containerWidth = buttonsContainer.offsetWidth;
const buttonWidth = 100; // 单个操作按钮最小宽度
const buttonGap = 16; // 按钮间距
// 计算可以放置的按钮数量
const maxButtons = Math.floor((containerWidth + buttonGap) / (buttonWidth + buttonGap));
// 设置最小和最大按钮数量
buttonsPerPage.value = Math.max(3, maxButtons);
});
};
// 初始化
onMounted(() => {
// 初始化按钮数量
updateButtonsPerPage();
// 监听窗口大小变化
window.addEventListener('resize', updateButtonsPerPage);
});
// 清理事件监听
onBeforeUnmount(() => {
window.removeEventListener('resize', updateButtonsPerPage);
});
</script>
<style scoped lang="scss">
// 变量定义
$primary-color: #4a90e2;
$primary-light: #5ba0f2;
$success-color: #52c41a;
$success-light: #73d13d;
$success-bg: rgba(82, 196, 26, 0.1);
$success-bg-hover: rgba(82, 196, 26, 0.2);
$warning-color: #faad14;
$warning-light: #ffc53d;
$warning-bg: rgba(250, 173, 20, 0.1);
$warning-bg-hover: rgba(250, 173, 20, 0.2);
$error-color: #ff4d4f;
$error-light: #ff7875;
$bg-dark: rgba(0, 0, 0, 0.4);
$bg-overlay: rgba(255, 255, 255, 0.1);
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
$text-light: #cccccc;
$text-success: #52c41a;
$text-warning: #faad14;
$white: #ffffff;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$border-radius: 6px;
$border-radius-lg: 8px;
$transition: all 0.3s ease;
// 混合器
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin button-base {
border-radius: $border-radius;
font-weight: 500;
transition: $transition;
cursor: pointer;
user-select: none;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
&:active {
transform: translateY(0);
}
}
/* 底部操作按钮区域 */
.bottom-actions {
height: 80px;
background: $bg-dark;
border-top: 2px solid $primary-color;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: $spacing-sm $spacing-lg;
flex-shrink: 0;
gap: 6px;
}
.pagination-container {
@include flex-center;
width: 100%;
gap: $spacing-lg;
}
.pagination-control {
display: flex;
align-items: center;
}
.pagination-btn-wrapper {
position: relative;
display: flex;
align-items: center;
}
.pagination-btn {
width: 35px;
height: 50px;
border-radius: $border-radius-lg;
@include flex-center;
background: rgba(74, 144, 226, 0.1);
border: 1px solid $primary-color;
color: $text-light;
transition: $transition;
&:hover {
background: rgba(74, 144, 226, 0.2);
border-color: $primary-light;
color: $white;
}
&:disabled {
background: $bg-overlay;
border-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.3);
transform: none;
}
}
.page-tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: $white;
padding: $spacing-xs $spacing-sm;
border-radius: $border-radius;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
&::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.8);
}
}
.pagination-btn-wrapper:hover .page-tooltip {
opacity: 1;
}
.buttons-container {
flex: 1;
@include flex-center;
}
.action-button {
min-width: 100px;
height: 36px;
font-size: 14px;
@include button-base;
}
/* 按钮状态样式 */
.action-button {
&.status-running {
background: $success-bg !important;
border-color: $success-color !important;
color: $text-success !important;
box-shadow: 0 0 8px rgba(82, 196, 26, 0.3);
&:hover {
background: $success-bg-hover !important;
border-color: $success-light !important;
color: $white !important;
box-shadow: 0 0 12px rgba(82, 196, 26, 0.5);
}
}
&.status-paused {
background: $warning-bg !important;
border-color: $warning-color !important;
color: $text-warning !important;
box-shadow: 0 0 8px rgba(250, 173, 20, 0.3);
&:hover {
background: $warning-bg-hover !important;
border-color: $warning-light !important;
color: $white !important;
box-shadow: 0 0 12px rgba(250, 173, 20, 0.5);
}
}
&.status-idle {
background: $bg-overlay;
border-color: rgba(255, 255, 255, 0.3);
color: $text-light;
&:hover {
background: $bg-overlay-hover;
border-color: rgba(255, 255, 255, 0.5);
color: $white;
}
}
}
.status-icon-btn {
width: 14px;
height: 14px;
margin-right: 6px;
}
/* 响应式设计 */
@media (max-width: 1366px) {
.bottom-actions .ant-btn {
min-width: 90px;
height: 36px;
font-size: 13px;
}
}
@media (max-width: 1024px) {
.bottom-actions {
height: 70px;
.ant-row {
flex-wrap: wrap;
gap: $spacing-sm;
}
.ant-btn {
min-width: 80px;
height: 32px;
font-size: 12px;
}
}
}
</style>

0
src/components/Header/index.vue → src/components/common/Header/index.vue
View File

20
src/components/common/Lucide/index.vue
View File

@@ -1,20 +0,0 @@
<script setup lang="ts">
defineOptions({
name: 'Lucide',
})
const props = defineProps({
name: {
type: String,
default: '',
},
})
</script>
<template>
<div>
<component :is="props.name" />
</div>
</template>
<style scoped lang="scss"></style>

46
src/components/common/Title/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div class="title">
<span>{{ name }}</span>
<a-space class="subtitle">
<slot name="extra" />
<a-button v-if="showRefresh" size="small" type="primary" @click="handleRefresh">
<template #icon><i-lucide-rotate-ccw /></template>刷新
</a-button>
</a-space>
</div>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
default: '',
},
showRefresh: {
type: Boolean,
default: false,
},
});
const slots = defineSlots<{
'default'(): any;
'extra'(): any;
}>();
const emit = defineEmits(['refresh']);
const handleRefresh = () => {
emit('refresh');
};
</script>
<style scoped lang="scss">
.title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid #c9c9c9;
padding-bottom: 7px;
}
</style>

20
src/views/pwoManage/infeed/equipment/index.vue
View File

@@ -109,18 +109,15 @@ fetchBoundEquipmentList()
<template>
<div class="equipment__container">
<div class="main-title">绑定设备列表</div>
<Title name="绑定设备列表" showRefresh @refresh="fetchBoundEquipmentList" />
<a-row class="main-content" :gutter="24">
<a-col :span="10" class="input__container">
<a-row>
<a-col :span="17">
<a-row :gutter="12">
<a-col :span="21">
<a-input size="large" v-model:value="equipmentInput" @pressEnter="fetchEquipmentInfo" placeholder="按下回车搜索" />
</a-col>
<a-col :span="6" :offset="1">
<a-space>
<a-button type="primary" size="large" @click="handleBind">绑定</a-button>
<a-button size="large" @click="fetchBoundEquipmentList">刷新</a-button>
</a-space>
<a-col :span="3">
<a-button type="primary" size="large" @click="handleBind">绑定</a-button>
</a-col>
</a-row>
<div class="description-wrapper">
@@ -173,13 +170,6 @@ fetchBoundEquipmentList()
}
}
.main-title {
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid #c9c9c9;
padding: 0 0 8px;
}
.table-wrapper {
height: 100%;
overflow: auto;

16
src/views/pwoManage/infeed/mask/index.vue
View File

@@ -136,11 +136,8 @@ fetchBoundMaskList()
<div class="mask__container">
<a-row class="main-content" :gutter="24">
<a-col :span="14" class="mask-item__container">
<div class="main-title">治具组合信息</div>
<a-space>
<a-button size="large" @click="() => openMaskModal = true">绑定治具组合</a-button>
<a-button size="large" @click="fetchBoundMaskList">刷新</a-button>
</a-space>
<Title name="治具组合信息" showRefresh @refresh="fetchBoundMaskList" />
<a-button size="large" @click="() => openMaskModal = true">绑定治具组合</a-button>
<div class="table-wrapper" ref="customTable">
<a-table :dataSource="maskTableData" :columns="maskColumns as ColumnsType<MaskTableItem>"
:pagination="false" bordered sticky size="middle" :scroll="{ y: tableHeight }" :loading="loadingMask">
@@ -154,7 +151,7 @@ fetchBoundMaskList()
</div>
</a-col>
<a-col :span="10" class="mask-item__container">
<div class="main-title">治具校验</div>
<Title name="治具校验" />
<a-row>
<a-col :span="20">
<a-input size="large" v-model:value="maskInput" @pressEnter="" placeholder="按下回车校验" />
@@ -208,13 +205,6 @@ fetchBoundMaskList()
overflow: hidden;
height: 100%;
.main-title {
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid #c9c9c9;
padding: 0 0 8px;
}
.table-wrapper {
flex: 1;
overflow: auto;

17
src/views/pwoManage/infeed/primaryMaterial/index.vue
View File

@@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue';
import { usePwoStore, useJobStore } from '@/store'
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { message } from 'ant-design-vue'
import { listMainMaterialEntryLog, addWaferEntryLogByCarrier, addDieEntryLogByCarrier, addWaferEntryLog, addDieEntryLog, delMainMaterialEntryLog } from '@/api/pwoManage/station/primaryMaterial'
import { listMainMaterialEntryLog, addWaferEntryLogByCarrier, addDieEntryLogByCarrier, addWaferEntryLog, addDieEntryLog, delMainMaterialEntryLog } from '@/api/pwoManage/primaryMaterial'
const pwoStore = usePwoStore();
const jobStore = useJobStore();
@@ -133,7 +133,7 @@ fetchPrimaryMaterialList()
<template>
<div class="primary-material__container">
<div class="main-title">主材料进站</div>
<Title name="主材料进站" showRefresh @refresh="fetchPrimaryMaterialList" />
<a-form layout="inline" size="large">
<a-form-item label="主材类型">
<a-input v-model:value="materialType" disabled />
@@ -141,15 +141,15 @@ fetchPrimaryMaterialList()
<a-form-item label="载具 ID">
<a-input v-model:value="carrierInput" @pressEnter="insertCarrier" placeholder="按下回车录入" allow-clear />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="insertCarrier">录入</a-button>
</a-form-item>
<a-form-item label="物料编码">
<a-input v-model:value="materialInput" @pressEnter="insertMaterial" placeholder="按下回车录入" allow-clear />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="insertMaterial">录入</a-button>
</a-form-item>
<a-form-item>
<a-button @click="fetchPrimaryMaterialList">刷新</a-button>
</a-form-item>
</a-form>
<div class="table-wrapper" ref="customTable">
<a-table :dataSource="materialTableData" :columns="materialColumns as ColumnsType<MaterialTableItem>"
@@ -175,13 +175,6 @@ fetchPrimaryMaterialList()
overflow: hidden;
height: 100%;
.main-title {
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid #c9c9c9;
padding: 0 0 8px;
}
.table-wrapper {
flex: 1;
overflow: auto;

9
src/views/pwoManage/infeed/rawMaterial/index.vue
View File

@@ -63,7 +63,7 @@ defineExpose({
<template>
<div class="raw-material__container">
<div class="main-title">材料确认</div>
<Title name="材料确认" showRefresh @refresh="" />
<div class="table-wrapper" ref="customTable">
<a-table :dataSource="materialTableData" :columns="materialColumns as ColumnsType<MaterialTableItem>"
:pagination="false" bordered sticky :scroll="{ y: tableHeight }">
@@ -88,13 +88,6 @@ defineExpose({
overflow: hidden;
height: 100%;
.main-title {
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid #c9c9c9;
padding: 0 0 8px;
}
.table-wrapper {
flex: 1;
overflow: auto;