refactor: 多页面UI优化、接口清理与文案调整

1. 移除质检模板页面未使用的getCheckItem接口导入
2. 给成本综合页面表格添加固定高度适配布局
3. 更新物料告警页面的表格列文案:理论值→推论值、实测值→实际值、实际偏差值→实际偏差
4. 重构重定向菜单页面的样式,优化布局与视觉效果
This commit is contained in:
2026-06-13 11:14:14 +08:00
parent 325a93fd84
commit c149216ebd
4 changed files with 100 additions and 75 deletions

View File

@@ -27,7 +27,7 @@
</span> </span>
</div> </div>
<el-alert :title="'已配置'+allCols.length+'个列'" type="info" :closable="false" show-icon style="margin-bottom:8px" /> <el-alert :title="'已配置'+allCols.length+'个列'" type="info" :closable="false" show-icon style="margin-bottom:8px" />
<el-table v-loading="gridLoading" :data="gridRows" border stripe size="mini" style="width:100%" :header-cell-style="headerStyle" :key="'tbl-'+inputMode"> <el-table v-loading="gridLoading" height="calc(100vh - 140px)" :data="gridRows" border stripe size="mini" style="width:100%" :header-cell-style="headerStyle" :key="'tbl-'+inputMode">
<el-table-column label="日期" width="135" fixed> <el-table-column label="日期" width="135" fixed>
<template slot-scope="s"><el-date-picker v-model="s.row.detailDate" type="date" value-format="yyyy-MM-dd" size="mini" style="width:124px" @change="sortGrid" /></template> <template slot-scope="s"><el-date-picker v-model="s.row.detailDate" type="date" value-format="yyyy-MM-dd" size="mini" style="width:124px" @change="sortGrid" /></template>
</el-table-column> </el-table-column>

View File

@@ -191,7 +191,7 @@
<script> <script>
import { listInspectionItemTemplate, getInspectionItemTemplate, delInspectionItemTemplate, addInspectionItemTemplate, updateInspectionItemTemplate, getInfoByInspectionItem } from "@/api/mes/qc/inspectionItemTemplate"; import { listInspectionItemTemplate, getInspectionItemTemplate, delInspectionItemTemplate, addInspectionItemTemplate, updateInspectionItemTemplate, getInfoByInspectionItem } from "@/api/mes/qc/inspectionItemTemplate";
import { listCheckItem, getCheckItem, addCheckItem, updateCheckItem, delCheckItem } from "@/api/mes/qc/checkItem"; import { listCheckItem, addCheckItem, updateCheckItem, delCheckItem } from "@/api/mes/qc/checkItem";
import { addInspectionTaskWithItems } from "@/api/mes/qc/inspectionTask"; import { addInspectionTaskWithItems } from "@/api/mes/qc/inspectionTask";
import CheckItemTransfer from '@/components/KLPService/CheckItemSelect/index' import CheckItemTransfer from '@/components/KLPService/CheckItemSelect/index'
import CoilSelector from "@/components/CoilSelector/index.vue"; import CoilSelector from "@/components/CoilSelector/index.vue";

View File

@@ -103,77 +103,87 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$c: #5F7BA0;
.submenu-page { .submenu-page {
padding: 24px; padding: 20px 24px;
max-width: 960px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
// ===== HEADER =====
.submenu-page__header { .submenu-page__header {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 14px; padding: 0 0 12px 0;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #f0f2f5;
} }
.submenu-page__parent-title { .submenu-page__parent-title {
font-size: 16px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #303133; color: #303133;
} }
// ===== SECTIONS =====
.submenu-page__list { .submenu-page__list {
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); flex-direction: column;
gap: 16px; gap: 28px;
} }
.submenu-page__empty { .submenu-page__empty {
text-align: center; text-align: center;
padding: 60px 0; padding: 40px 0;
color: #909399; color: #909399;
font-size: 14px; font-size: 13px;
} }
.submenu-group { // ===== GROUP =====
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: border-color 0.2s, box-shadow 0.2s;
&:hover { .submenu-group {
border-color: #5F7BA0; background: transparent;
box-shadow: 0 2px 8px rgba(95, 123, 160, 0.12); border: none;
} border-radius: 0;
box-shadow: none;
overflow: visible;
} }
.submenu-group__title { .submenu-group__title {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 16px; padding: 0 0 10px 0;
margin-bottom: 12px;
cursor: pointer; cursor: pointer;
background: linear-gradient(135deg, #fafbfc, #f5f7fa); border-bottom: 1px solid #f5f6f8;
border-bottom: 1px solid #f0f2f5; background: transparent;
transition: background 0.15s, border-color 0.15s; transition: border-color 0.15s;
user-select: none;
&:hover { &:hover {
background: linear-gradient(135deg, #f0f2f5, #eceff3); border-bottom-color: $c;
border-bottom-color: #e4e7ed; .submenu-group__text { color: $c; }
.submenu-group__arrow { color: $c; transform: translateX(3px); }
} }
} }
.submenu-group__icon { .submenu-group__icon {
font-size: 18px; width: 32px;
color: #5F7BA0; height: 32px;
margin-right: 10px; border-radius: 10px;
flex-shrink: 0; background: rgba($c, 0.08);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
font-size: 16px;
color: $c;
} }
.submenu-group__text { .submenu-group__text {
font-size: 14px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #303133; color: #303133;
flex: 1; flex: 1;
@@ -181,89 +191,104 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
transition: color 0.15s;
} }
.submenu-group__count { .submenu-group__count {
font-size: 12px; font-size: 12px;
color: #5F7BA0; color: #909399;
background: rgba(95, 123, 160, 0.08); background: #f5f6f8;
padding: 2px 8px; padding: 2px 10px;
border-radius: 10px; border-radius: 10px;
margin-right: 8px; margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
} }
.submenu-group__arrow { .submenu-group__arrow {
font-size: 12px; font-size: 13px;
color: #c0c4cc; color: #c0c4cc;
flex-shrink: 0; flex-shrink: 0;
transition: color 0.15s; transition: transform 0.2s, color 0.2s;
.submenu-group__title:hover & {
color: #5F7BA0;
}
} }
// ===== TILE GRID =====
.submenu-group__items { .submenu-group__items {
padding: 6px 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
padding: 0;
background: transparent;
} }
// ===== TILE =====
.submenu-item { .submenu-item {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
padding: 10px 16px 10px 24px; padding: 16px 10px 14px;
cursor: pointer; cursor: pointer;
transition: background 0.15s, padding-left 0.2s; background: #fff;
border: 1px solid #f0f2f5;
border-radius: 10px;
text-align: center;
transition: border-color 0.15s, box-shadow 0.15s;
&:hover { &:hover {
background: rgba(95, 123, 160, 0.05); border-color: $c;
padding-left: 28px; box-shadow: 0 2px 10px rgba($c, 0.1);
.submenu-item__arrow { opacity: 1; }
} }
&:not(:last-child) { &:active {
border-bottom: 1px solid #f7f7f7; background: #fafbfd;
} }
} }
.submenu-item__folder,
.submenu-item__doc {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
flex-shrink: 0;
font-size: 18px;
color: $c;
background: rgba($c, 0.07);
}
.submenu-item__folder { .submenu-item__folder {
font-size: 14px;
color: #e6a23c; color: #e6a23c;
margin-right: 10px; background: rgba(#e6a23c, 0.08);
flex-shrink: 0;
}
.submenu-item__doc {
font-size: 14px;
color: #5F7BA0;
margin-right: 10px;
flex-shrink: 0;
} }
.submenu-item__text { .submenu-item__text {
font-size: 13px; font-size: 12px;
color: #606266; font-weight: 500;
flex: 1; color: #555;
min-width: 0; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 1.3;
} }
.submenu-item__arrow { .submenu-item__arrow {
font-size: 12px; font-size: 11px;
color: #c0c4cc; color: #c0c4cc;
flex-shrink: 0; margin-top: 6px;
margin-left: 4px; opacity: 0;
transition: color 0.15s; transition: opacity 0.15s;
.submenu-item:hover & {
color: #5F7BA0;
}
} }
.submenu-item--leaf { .submenu-item--leaf {
.submenu-item__doc { .submenu-item__doc {
color: #a8abb2; color: #a8abb2;
background: #f5f6f8;
} }
} }
</style> </style>

View File

@@ -64,15 +64,15 @@
<span v-else>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> <span v-else>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="论值" align="center" prop="theoreticalVal" /> <el-table-column label="论值" align="center" prop="theoreticalVal" />
<el-table-column label="实值" align="center" prop="actualVal" /> <el-table-column label="实值" align="center" prop="actualVal" />
<el-table-column label="允许偏差" align="center" prop="allowDeviation"> <el-table-column label="允许偏差" align="center" prop="allowDeviation">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.warningType === 'LENGTH'">{{ parseFloat((scope.row.allowDeviation * 100).toFixed(2)) }}%</span> <span v-if="scope.row.warningType === 'LENGTH'">{{ parseFloat((scope.row.allowDeviation * 100).toFixed(2)) }}%</span>
<span v-else>{{ scope.row.allowDeviation }}</span> <span v-else>{{ scope.row.allowDeviation }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="实际偏差" align="center" prop="deviationValue" /> <el-table-column label="实际偏差" align="center" prop="deviationValue" />
<el-table-column label="告警说明" align="center" prop="warningMsg" show-overflow-tooltip /> <el-table-column label="告警说明" align="center" prop="warningMsg" show-overflow-tooltip />
<el-table-column label="告警状态" align="center" prop="warningStatus"> <el-table-column label="告警状态" align="center" prop="warningStatus">