refactor: 多页面UI优化、接口清理与文案调整
1. 移除质检模板页面未使用的getCheckItem接口导入 2. 给成本综合页面表格添加固定高度适配布局 3. 更新物料告警页面的表格列文案:理论值→推论值、实测值→实际值、实际偏差值→实际偏差 4. 重构重定向菜单页面的样式,优化布局与视觉效果
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user