SunYF/bj_power
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 批量更新前端静态资源与界面文案

Browse Source 
1. 更新多个项目的index.html引入的资源hash文件名
2. 替换BOM页面标题为物料清单，同步路由菜单文案
3. 为多个select组件添加placeholder提示文案
4. 重构MES布局，移除侧边抽屉菜单，添加页面标题
5. 新增/替换部分静态资源文件，删除旧的冗余资源文件
This commit is contained in:
SunYF
2026-08-28 17:42:50 +08:00
parent dd078038e2
commit 047cdd9870
55 changed files with 389 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bj_power_mes/frontend/src/components/PageHelp.vue
+107 -28
View File
@@ -1,32 +1,57 @@
<template>
<!-- 页面左下角 "?" 帮助按钮：点击弹出当前页面整体介绍 + 字段说明 -->
<div class="page-help">
<el-tooltip content="操作说明" placement="left">
<el-tooltip content="本页操作说明" placement="left">
<el-button class="help-fab" circle @click="open">?</el-button>
</el-tooltip>
<el-drawer v-model="show" :title="data.title || '操作说明'" size="480px" append-to-body>
<div class="ph-overview" v-if="data.overview">{{ data.overview }}</div>
<el-drawer v-model="show" :title="data.title || '操作说明'" size="520px" append-to-body class="ph-drawer">
<!-- 顶部概览 -->
<div class="ph-inner">
<div class="ph-banner">
<div class="ph-banner-title">{{ data.title || '操作说明' }}</div>
<div class="ph-banner-sub">页面整体说明</div>
</div>
<div class="ph-overview" v-if="data.overview">{{ data.overview }}</div>
<div v-if="data.sections && data.sections.length">
<div v-for="(sec, si) in data.sections" :key="si">
<h3 class="ph-sec-title">{{ sec.title }}</h3>
<p class="ph-sec-overview" v-if="sec.overview">{{ sec.overview }}</p>
<el-table :data="sec.fields" border size="small" class="ph-table">
<el-table-column prop="name" label="字段" width="96" />
<el-table-column prop="source" label="来源" width="80" />
<el-table-column prop="purpose" label="用途" min-width="120" show-overflow-tooltip />
<el-table-column prop="fill" label="怎么填" min-width="140" show-overflow-tooltip />
</el-table>
<!-- 字段说明引言行 -->
<div class="ph-legend">
<span class="lg"><i class="ic lg-source"></i>来源：这个字段从哪来、谁填</span>
<span class="lg"><i class="ic lg-purpose"></i>用途：它起什么作用</span>
<span class="lg"><i class="ic lg-fill"></i>怎么填：具体填什么</span>
</div>
<!-- 分组（多组） -->
<template v-if="data.sections && data.sections.length">
<div v-for="(sec, si) in data.sections" :key="si" class="ph-section">
<div class="ph-sec-title" v-if="sec.title">{{ sec.title }}</div>
<div class="ph-sec-overview" v-if="sec.overview">{{ sec.overview }}</div>
<div class="ph-field" v-for="(f, fi) in sec.fields" :key="fi">
<div class="ph-fname">
{{ f.name }}
<span class="ph-fsource">{{ f.source }}</span>
</div>
<div class="ph-fpurpose">{{ f.purpose }}</div>
<div class="ph-ffill">👉 {{ f.fill }}</div>
</div>
</div>
</template>
<!-- 单组字段 -->
<div v-else class="ph-section">
<template v-if="data.fields && data.fields.length">
<div class="ph-field" v-for="(f, fi) in data.fields" :key="fi">
<div class="ph-fname">
{{ f.name }}
<span class="ph-fsource">{{ f.source }}</span>
</div>
<div class="ph-fpurpose">{{ f.purpose }}</div>
<div class="ph-ffill">👉 {{ f.fill }}</div>
</div>
</template>
<el-empty v-else description="暂无说明" :image-size="70" />
</div>
</div>
<el-table v-else :data="data.fields" border size="small" class="ph-table">
<el-table-column prop="name" label="字段" width="96" />
<el-table-column prop="source" label="来源" width="80" />
<el-table-column prop="purpose" label="用途" min-width="120" show-overflow-tooltip />
<el-table-column prop="fill" label="怎么填" min-width="140" show-overflow-tooltip />
</el-table>
</el-drawer>
</div>
</template>
@@ -43,12 +68,66 @@ function open() { show.value = true }
</script>
<style scoped>
.page-help { position: fixed; left: 16px; bottom: 16px; z-index: 2000; }
.help-fab { background: #409eff; color: #fff; font-weight: 700; font-size: 18px;
box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.help-fab:hover { background: #66b1ff; }
.ph-overview { color: #555; line-height: 1.7; margin-bottom: 14px; white-space: pre-line; }
.ph-sec-title { margin: 12px 0 4px; font-size: 15px; }
.ph-sec-overview { color: #777; margin: 4px 0 8px; line-height: 1.6; font-size: 13px; }
.ph-table :deep(.el-table__cell), .ph-table :deep(td.el-table__cell) { padding: 4px 6px; font-size: 12px; }
.page-help { position: fixed; left: 18px; bottom: 18px; z-index: 2050; }
.help-fab {
width: 42px; height: 42px; background: #1668dc; color: #fff; font-weight: 700;
font-size: 20px; box-shadow: 0 3px 10px rgba(22,50,79,.3);
transition: transform .15s;
}
.help-fab:hover { background: #0e57c3; transform: scale(1.06); }
.ph-inner { padding: 0 6px 24px; }
/* 顶部深色横幅 */
.ph-banner {
background: linear-gradient(120deg, #1668dc, #3a98f0);
color: #fff; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.ph-banner-title { font-size: 20px; font-weight: 700; }
.ph-banner-sub { font-size: 12px; opacity: .85; margin-top: 4px; }
/* 概览 */
.ph-overview {
color: #3f536e; line-height: 1.8; font-size: 14px; margin-bottom: 16px;
background: #f4f7fb; border: 1px solid #e4ecf5; border-radius: 8px;
padding: 12px 14px; white-space: pre-line;
}
/* 图例 */
.ph-legend {
display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px;
padding: 10px 14px; background: #fafbfc; border: 1px dashed #d9e0e8; border-radius: 8px;
font-size: 12px; color: #6b7785;
}
.ph-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.ph-legend .ic { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg-source { background: #8fa5f5; }
.lg-purpose { background: #22b07d; }
.lg-fill { background: #f5a623; }
/* 分组 */
.ph-section { margin-bottom: 18px; }
.ph-sec-title {
font-size: 15px; font-weight: 700; color: #1b2a3a; margin: 0 0 4px;
padding-left: 10px; border-left: 4px solid #1668dc; line-height: 1.4;
}
.ph-sec-overview { color: #7a8694; font-size: 13px; margin: 4px 0 10px; line-height: 1.7; }
/* 字段卡片 */
.ph-field {
background: #fff; border: 1px solid #eef1f6; border-radius: 8px;
padding: 10px 14px; margin-bottom: 8px;
}
.ph-fname {
display: flex; align-items: center; gap: 8px;
font-weight: 700; color: #1b2a3a; font-size: 14px;
}
.ph-fsource {
font-weight: 400; font-size: 11px; color: #1668dc;
background: #e8f1ff; border-radius: 4px; padding: 1px 8px;
}
.ph-fpurpose { color: #22b07d; font-size: 13px; line-height: 1.6; margin-top: 6px; }
.ph-fpurpose::before { content: '用途：'; font-weight: 600; color: #1b8d63; }
.ph-ffill { color: #8a5b00; font-size: 13px; line-height: 1.6; margin-top: 4px; }
.ph-ffill::before { content: '怎么填：'; font-weight: 600; color: #8a5b00; }
</style>
bj_power_mes/frontend/src/layouts/MainLayout.vue
+5 -9
View File
@@ -11,7 +11,8 @@
</el-aside>
<el-container>
<el-header class="header">
<div @click="drawer=true" style="cursor:pointer">☰ 菜单</div>
<span class="page-title">{{ $route.meta.title || '' }}</span>
<div class="spacer"></div>
<div>
<span style="margin-right:16px">{{ userName }}</span>
<el-button size="small" @click="router.push('/change-password')">修改密码</el-button>
@@ -23,12 +24,6 @@
</el-main>
</el-container>
</el-container>
<el-drawer v-model="drawer" direction="ltr" size="200px">
<el-menu :default-active="$route.path" router>
<el-menu-item v-for="m in menus" :key="m.path" :index="m.path">{{ m.name }}</el-menu-item>
</el-menu>
</el-drawer>
</template>
<script setup>
@@ -38,7 +33,6 @@ import { getUser, logout } from '../utils/auth'
import request from '../utils/request'
const router = useRouter()
const drawer = ref(false)
const menus = computed(() => {
const me = getUser()
@@ -50,7 +44,7 @@ const menus = computed(() => {
const defaultMenus = [
{ code: 'produce.workorder', name: '工单管理', path: '/work-order' },
{ code: 'produce.bom', name: 'BOM', path: '/bom' },
{ code: 'produce.bom', name: '物料清单', path: '/bom' },
{ code: 'produce.material', name: '备料单', path: '/material-request' },
{ code: 'produce.plc', name: 'PLC工序下发', path: '/plc-send' },
{ code: 'produce.torque', name: '拧紧查询', path: '/torque' },
@@ -83,4 +77,6 @@ function doLogout() {
.aside { background: #001529; }
.logo { color: #fff; font-size: 17px; font-weight: 600; text-align: center; line-height: 60px; height: 60px; }
.header { display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #eee; }
.page-title { font-size: 16px; font-weight: 600; color: #303133; }
.spacer { flex: 1; }
</style>
bj_power_mes/frontend/src/pages/Bom.vue
+1 -1
View File
@@ -30,7 +30,7 @@
</el-table-column>
</el-table>
<el-dialog v-model="add.show" title="添加BOM物料" width="520px">
<el-dialog v-model="add.show" title="添加物料清单" width="520px">
<el-form :model="add" label-width="90px">
<el-form-item label="物料编码"><el-input v-model="add.materialCode" /></el-form-item>
<el-form-item label="物料名称"><el-input v-model="add.materialName" /></el-form-item>
bj_power_mes/frontend/src/pages/Rbac.vue
+1 -1
View File
@@ -89,7 +89,7 @@
<el-form-item label="编码"><el-input v-model="r.code" /></el-form-item>
<el-form-item label="备注"><el-input v-model="r.remark" /></el-form-item>
<el-form-item label="权限">
<el-select v-model="r.permissionCodes" multiple filterable style="width:100%">
<el-select v-model="r.permissionCodes" multiple filterable placeholder="请选择权限" style="width:100%">
<el-option v-for="p in perms" :key="p.code" :label="p.name" :value="p.code" />
</el-select>
</el-form-item>
bj_power_mes/frontend/src/pages/Scan.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<el-form-item label="工单号"><el-input v-model="scan.orderNo" style="width:170px" /></el-form-item>
<el-form-item label="工位"><el-input v-model="scan.station" style="width:90px" /></el-form-item>
<el-form-item label="类型">
<el-select v-model="scan.type" style="width:130px">
<el-select v-model="scan.type" placeholder="请选择类型" style="width:130px">
<el-option label="进线ONLINE" value="ONLINE" />
<el-option label="工序PROCESS" value="PROCESS" />
<el-option label="完工DONE" value="DONE" />
bj_power_mes/frontend/src/pages/WorkOrder.vue
+2 -2
View File
@@ -6,7 +6,7 @@
<el-input v-model="query.orderNo" placeholder="模糊查询" clearable style="width:180px" @keyup.enter="load" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="query.status" clearable placeholder="全部" style="width:150px">
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width:150px">
<el-option v-for="s in statusOptions" :key="s.v" :label="s.l" :value="s.v" />
</el-select>
</el-form-item>
@@ -50,7 +50,7 @@
<el-form-item label="数量"><el-input-number v-model="dialog.quantity" :min="1" /></el-form-item>
<el-form-item label="工序组合"><el-input v-model="dialog.processSeq" placeholder="如 135" /></el-form-item>
<el-form-item label="状态">
<el-select v-model="dialog.status" style="width:100%">
<el-select v-model="dialog.status" placeholder="请选择状态" style="width:100%">
<el-option v-for="s in statusOptions" :key="s.v" :label="s.l" :value="s.v" />
</el-select>
</el-form-item>
bj_power_mes/frontend/src/router/index.js
+1 -1
View File
@@ -9,7 +9,7 @@ const routes = [
children: [
{ path: '', redirect: '/work-order' },
{ path: 'work-order', name: 'WorkOrder', component: () => import('../pages/WorkOrder.vue'), meta: { title: '工单管理' } },
{ path: 'bom', name: 'Bom', component: () => import('../pages/Bom.vue'), meta: { title: 'BOM' } },
{ path: 'bom', name: 'Bom', component: () => import('../pages/Bom.vue'), meta: { title: '物料清单' } },
{ path: 'material-request', name: 'MaterialRequest', component: () => import('../pages/MaterialRequest.vue'), meta: { title: '备料单' } },
{ path: 'plc-send', name: 'PlcSend', component: () => import('../pages/PlcSend.vue'), meta: { title: 'PLC工序下发' } },
{ path: 'torque', name: 'Torque', component: () => import('../pages/Torque.vue'), meta: { title: '拧紧查询' } },