feat: 为多个页面添加操作帮助功能,替换旧版静态资源文件

1. 新增PageHelp通用帮助组件,实现页面左下角悬浮帮助按钮
2. 为WMS、MES、工位终端多个业务页面接入帮助系统
3. 替换项目中旧的打包静态资源文件,更新资源引用路径
4. 新增各模块的帮助文档配置数据
This commit is contained in:
SunYF
2026-08-28 17:23:44 +08:00
parent cbd55338f1
commit dd078038e2
93 changed files with 619 additions and 45 deletions
@@ -0,0 +1,54 @@
<template>
<!-- 页面右下角 "?" 帮助按钮点击弹出当前界面整体介绍 + 关键字段说明 -->
<div class="page-help">
<el-tooltip content="操作说明" placement="top">
<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>
<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="120" />
<el-table-column prop="source" label="来源" width="80" />
<el-table-column prop="purpose" label="用途" min-width="110" show-overflow-tooltip />
<el-table-column prop="fill" label="怎么操作" min-width="130" show-overflow-tooltip />
</el-table>
</div>
</div>
<el-table v-else :data="data.fields" border size="small" class="ph-table">
<el-table-column prop="name" label="字段" width="120" />
<el-table-column prop="source" label="来源" width="80" />
<el-table-column prop="purpose" label="用途" min-width="110" show-overflow-tooltip />
<el-table-column prop="fill" label="怎么操作" min-width="130" show-overflow-tooltip />
</el-table>
</el-drawer>
</div>
</template>
<script setup>
import { ref } from 'vue'
defineProps({
data: { type: Object, default: () => ({ title: '操作说明', overview: '', fields: [] }) }
})
const show = ref(false)
function open() { show.value = true }
</script>
<style scoped>
.page-help { position: fixed; right: 20px; bottom: 20px; z-index: 2000; }
.help-fab { width: 58px; height: 58px; background: #1668dc; color: #fff; font-weight: 700;
font-size: 26px; box-shadow: 0 3px 10px rgba(22,50,79,.35); }
.help-fab:hover { background: #0e57c3; }
.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; }
</style>
+53
View File
@@ -0,0 +1,53 @@
// 工位终端(bj_power_workstation)操作帮助数据
// 结构:title=界面名称,overview=整体说明,sections=按功能分组的字段/操作说明
export const helpWorkstation = {
title: '工位终端 使用说明',
overview:
'工位终端运行在 DOCK01~21 各工序工位的触屏设备上。操作员负责扫码、拧紧、上报工序完成或暂存退库。\n\n标准流程:①选择本工位号 → ②扫描工件SN → ③照工艺图纸用拧紧枪打螺丝 → ④看拧紧结果是否全部OK → ⑤该工序做完点「工序完成上报」→ 工件流转到下一工序。',
sections: [
{
title: '顶部与工位',
overview: '顶部显示当前工位号、登录人、离线同步状态。',
fields: [
{ name: '工位号', source: '下拉/固定', purpose: '当前所在工位 DOCK01~21,决定读哪道工序的任务', fill: '固定工位由配置锁定不可改;否则选择与实物一致的编号' },
{ name: '待同步 N 条', source: '系统统计', purpose: '标记有拧紧/工序数据尚未上报MES(离线缓存)', fill: '点击「重试同步」立即补传,消红为正常' },
{ name: '登录人', source: '登录信息', purpose: '当前操作员账号,上报记录会带此名字溯源', fill: '开机登入本人账号,勿共用' }
]
},
{
title: '扫码区',
overview: '扫码枪扫工件SN条码,作为本次操作的追踪依据。',
fields: [
{ name: '当前工件 SN', source: '扫码枪扫描', purpose: '唯一识别正在加工的工件,拧紧结果和上报都挂在此SN下', fill: '用扫码枪扫条码自动填入;没枪可手输回车' },
{ name: '进度 N/M颗', source: '拧紧结果统计', purpose: '已打的螺丝数/应打总颗数', fill: '每打一颗自动+1,无需手工维护' }
]
},
{
title: '当前工单与工序',
overview: '左栏显示本工位当前装配任务的工单号、产品型号、整件进度和工序清单。',
fields: [
{ name: '工单号', source: 'MES派发', purpose: '当前正在装配的生产工单,来源系统自动下发', fill: '不可改,随任务自动带出' },
{ name: '工序清单', source: 'MES工艺配置', purpose: '12道工序任务,✔为已完成,高亮为当前应做工序', fill: '照高亮工序执行,不用手工勾选' },
{ name: '工艺图纸', source: 'MES下发PDF', purpose: '当前工序的工艺图/拧紧点位,指导怎么打螺丝', fill: '点「放大查看」全屏看图,照图示点位顺序拧' }
]
},
{
title: '拧紧结果',
overview: '实时列出当前SN每一颗螺丝拧紧的扭矩/角度/结果,任何NG会红色闪烁告警。',
fields: [
{ name: '扭矩 Nm', source: '拧紧枪采集', purpose: '每颗螺丝达到的拧紧扭矩,判断是否合格', fill: '自动上传,与工艺标准不符标NG' },
{ name: '角度 °', source: '拧紧枪采集', purpose: '拧紧过程中的角度,判断屈服形变/滑牙', fill: '自动上传,无需填写' },
{ name: '结果 OK/NG', source: '系统判定', purpose: '该颗螺丝是否合格;有NG则必须复检', fill: 'NG时按告警横幅提示优先复检该工件' }
]
},
{
title: '底部三大按钮',
fields: [
{ name: '工序完成上报', source: '按钮操作+确认框', purpose: '本工位当前这道工序已做完,通知MES流转到下一工序', fill: '点后输入当前工序号(如OP10)确认;联网失败会自动离线缓存' },
{ name: '暂存退库', source: '按钮操作+确认框', purpose: '工件本工序不做完,退回库房暂存(如来料要下午继续)', fill: '点击并二次确认;系统会记录已完成工序,重上线从下一工序继续' },
{ name: '重试同步', source: '按钮操作', purpose: '立即把离线缓存的拧紧/上报数据补传给MES', fill: '看到「待同步」非0时点一下即可' }
]
}
]
}
@@ -120,6 +120,9 @@
<el-button class="big-btn warning" size="large" @click="onTempStore">暂存退库</el-button>
<el-button class="big-btn success" size="large" @click="manualFlush">重试同步</el-button>
</footer>
<!-- 操作说明帮助 -->
<PageHelp :data="helpWorkstation" />
</div>
</template>
@@ -127,6 +130,8 @@
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import PageHelp from '../components/PageHelp.vue'
import { helpWorkstation } from '../help'
import {
getConfig,
getSyncStats,
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>北京动力 · 工位终端</title>
<script type="module" crossorigin src="/assets/index-CQ7te7c7.js"></script>
<script type="module" crossorigin src="/assets/index-BPSi1TVi.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dz4RGjfJ.css">
</head>
<body>