跳到主要内容
版本：Next

LMES 人工看板技术组件文档

概述​

SopWidgetBox（人工看板）是一个用于生产车间现场操作的综合性组件箱，提供了完整的SOP（Standard Operating Procedure，标准作业程序）执行和监控功能。该组件支持工序选择、工步展示、物料管理、生产参数控制等多种生产现场操作场景。

组件标识: SopWidgetBox
组件名称: 人工看板
组件分类: run (运行时组件)
权限要求: 无 (authorizationRequired: false)

架构设计​

组件架构图​

技术栈​

  • 框架: Vue 3 (Composition API)
  • 语言: TypeScript
  • 通信协议: SignalR WebSocket
  • 样式: SCSS Modules
  • 状态管理: Vue Reactive State
  • 国际化: 内置 i18n 支持

核心功能模块​

1. 工序筛选器 (Process)​

功能描述:
提供工位选择和工序流程展示功能，是整个SOP组件箱的入口和控制中心。

主要特性:

  • 工位变量触发配置
  • 默认工位选项设置
  • 实时工位状态监控
  • 工序流程图展示

配置项:

{
  stationId: string,          // 工位触发变量
  stationConfig: {            // 默认选项
    workSection: string,      // 工段
    workStation: string       // 工位
  }
}

2. 工步列表 (StepList)​

功能描述:
展示当前工序的详细工步信息，支持工步导航和状态跟踪。

3. SOP文件展示框 (SopFile)​

功能描述:
展示标准作业指导文件，支持多种文件格式（PDF、图片等）。

配置项:

{
  sizeMode: 1 | 2,           // 1:固定, 2:适应内容
  contentMode: 0 | 1 | 2,    // 0:原始内容, 1:适应组件宽, 2:适应组件高
  sopWidth: number,          // SOP宽度
  sopHeight: number,         // SOP高度
  sopIsFullscreen: boolean   // 是否全屏
}

4. 统计参数显示框 (Statistic)​

功能描述:
实时显示生产统计数据，如产量、良品率、节拍等关键指标。

5. 生产参数列表 (ParameterList)​

功能描述:
展示和录入生产过程参数，支持参数校验和历史记录。

权限码: paramsList-input (生产参数列表-可写)

6. 生产物料列表 (MaterialList)​

功能描述:
管理生产过程中使用的物料信息，支持物料追溯。

配置项:

{
  materialListMode: 0 | 1,   // 0:不重置, 1:自动重置
  listInputType: 1 | 2       // 1:手动换行, 2:自动换行
}

权限码:

  • materialList-input (物料列表-可写)
  • sop-materialList-reset (物料列表-重置)

7. 物料输入框 (MaterialInput)​

功能描述:
快速录入物料条码，支持扫码枪输入和光标控制。

配置项:

{
  cursorType: 1 | 2,         // 1:光标保持, 2:光标跳转
  cursorTarget: number,      // 光标目标组件ID
  inputType: 1 | 2           // 1:输入框, 2:文本框
}

权限码: material-input (物料码-可写)

核心功能:

  • 回车自动提交
  • 出站自动清空
  • 光标智能跳转

8. 生产控制 (ProcessControl)​

功能描述:
执行生产控制操作，如进站、出站、暂停等。

配置项:

{
  btnText: string,           // 按钮文本
  concreteFn: string,        // 具体功能函数名
  isConfirm: boolean,        // 是否需要确认
  confirmText: string,       // 确认提示文本
  objectName: string,        // 对象名称
  fnWidgetInfo: FieldItem    // 功能组件信息
}

权限码:

  • production-control (生产控制-按钮)
  • production-input (生产控制-可写)

支持的控制功能:

  • 进站信号控制
  • 产品序列号输入
  • 工序重置
  • 质量判定
  • 出站控制

9. 批次料操作 (BatchMaterial)​

功能描述:
处理批次物料的投料和管理操作。

10. 工步监控展示框 (StepWatchPage)​

功能描述:
实时监控工步执行状态，展示监控页面。

11. 工序SOP展示框 (WorkSectionSopButton)​

功能描述:
弹窗式展示工序级别的SOP文档。

权限码: sop-workSection-dialog (工序SOP展示框)

核心技术实现​

Socket 通信机制​

组件通过 SignalR WebSocket 实现与后端的实时通信：

关键Socket方法:

方法名说明参数
SubscribeSOP订阅SOP数据workStationId, widgetIds, language
FillMaterial填充物料条码materialCode
FillProcessControl填充生产控制参数controlParams
ChangeCulture切换语言language
SOPListCallBackId工步列表回调-
ProcessParameterListCallBackId生产参数列表回调-
MaterialListCallBackId物料列表回调-
MessageCallBackId消息提示回调-
SOPAttachmentListCallBackIdSOP附件列表回调-

状态管理​

全局状态 (state.ts):

// 组件状态映射
widgetStateMap: Record<string, string>

// Socket连接引用
socketRef: {
  target: any,
  messageInit: boolean
}

// 消息处理映射
socketMessageMap: Record<string, any>

// 默认配置映射
defaultMap: Record<string, any>

消息处理机制:

interface MessageType {
  message: string,      // 消息内容
  showType: 0 | 1,     // 0: Toast, 1: Notification
  messageType: 0 | 1   // 0: 成功, 1: 错误
}

权限控制​

权限码定义 (enum.ts):

export const permissionCodes = {
  'production-control': '生产控制-按钮',
  'production-input': '生产控制-可写',
  'material-input': '物料码-可写',
  'materialList-input': '物料列表-可写',
  'paramsList-input': '生产参数列表-可写',
  'sop-materialList-reset': '物料列表-重置',
  'sop-workSection-dialog': '工序SOP展示框',
}

权限校验:

import { isPermission } from '@/libs/Permission/Permission'

if (!isPermission('material-input')) {
  // 无权限处理
  return
}

事件总线​

使用事件发布/订阅模式进行组件间通信：

// 发布事件
emitter.emit('eventName', data)

// 订阅事件
emitter.on('eventName', (data) => {
  // 处理事件
})

// 取消订阅
emitter.off('eventName', handler)

配置说明​

组件属性 (Props)​

完整的组件属性定义：

interface SopWidgetBoxProps {
  // 组件模式
  widgetMode: string                    // 默认: 'Process'
  
  // 工位配置
  stationConfig: {
    workSection: string,
    workStation: string
  }
  stationId: string                     // 工位变量ID
  
  // 物料配置
  materialListMode: 0 | 1               // 默认: 0
  
  // 输入配置
  inputType: 1 | 2                      // 默认: 1
  listInputType: 1 | 2                  // 默认: 1
  cursorType: 1 | 2                     // 默认: 1
  cursorTarget: number                  // 光标目标
  
  // 信号配置
  inboundSignalMode: 0 | 1              // 默认: 1
  productInputMode: 0 | 1               // 默认: 0
  
  // 控制按钮配置
  btnText: string                       // 按钮文本
  concreteFn: string                    // 具体功能
  fnWidgetInfo: FieldItem               // 功能信息
  isConfirm: boolean                    // 是否确认
  confirmText: string                   // 确认文本
  
  // SOP展示配置
  sizeMode: 1 | 2                       // 默认: 1
  contentMode: 0 | 1 | 2                // 默认: 0
  sopWidth: number                      // 默认: 1200
  sopHeight: number                     // 默认: 600
  sopIsFullscreen: boolean              // 默认: true
  
  // 质量配置
  outboundResultVariable: number | string
  qualifiedJudgmentType: number | string
}

环境模式​

组件支持两种运行模式：

  1. 生产模式 (information-prod):

    • 完整权限控制
    • 实时Socket通信
    • 操作遮罩保护

  2. 调试模式 (information-debugger):

    • 显示所有子组件
    • 无权限限制
    • 便于开发调试

使用示例:

<information-prod>
  <Widget node={props.node} widgetId={widgetMode.value} />
</information-prod>

<information-debugger>
  {/* 调试模式下显示所有组件 */}
</information-debugger>

数据模型​

Service API​

class SopWidgetBox extends Base {
  // 获取工位详情
  getWorkStationDetail(id: string): Promise<WorkStationDetail>
  
  // 获取流程列表
  getFlowList(): Promise<FlowList[]>
  
  // 批次物料操作
  batchMaterial(data: any): Promise<void>
  
  // 获取页面配置
  getPageBody(pageId: string): Promise<PageBody>
}

数据流向​

国际化支持​

组件内置国际化功能：

import { _t } from '../app'

// 使用翻译
const text = _t('SopWidgetBox.title')

语言切换通过Socket通信：

socketRef.call(ChangeCulture, currentLanguage)

使用示例​

基础使用​

import SopWidgetBox from '@/widgets/SopWidgetBox'

export default {
  is: 'SopWidgetBox',
  name: '人工看板',
  category: 'run',
  icon: sopBox,
  authorizationRequired: false,
  canvasView: provider(SopWidgetBox, true),
  settingsView: Setting,
}

配置工序筛选器​

<SopWidgetBox
  :node="nodeData"
  widgetMode="Process"
  :stationId="stationVariable"
  :stationConfig="{
    workSection: 'SECTION_001',
    workStation: 'STATION_001'
  }"
/>

配置物料输入​

<SopWidgetBox
  :node="nodeData"
  widgetMode="MaterialInput"
  :cursorType="2"
  :cursorTarget="nextWidgetId"
  :inputType="1"
/>

配置生产控制​

<SopWidgetBox
  :node="nodeData"
  widgetMode="ProcessControl"
  btnText="进站"
  concreteFn="SOP_InboundSignal"
  :isConfirm="true"
  confirmText="确认进站操作？"
/>

最佳实践​

1. Socket连接管理​

  • 组件卸载时自动断开Socket连接
  • 避免重复创建连接
  • 合理使用连接池

2. 权限控制​

// 在执行操作前检查权限
if (!isPermission('production-control')) {
  ElMessage.warning('无操作权限')
  return
}

3. 光标控制​

物料输入场景建议配置：

  • cursorType: 2 (启用光标跳转)
  • cursorTarget 指向下一个输入组件
  • 提升操作效率

4. 错误处理​

try {
  await socketRef[nodeId.value]?.call(FillMaterial, value)
} catch (error) {
  console.error('物料填充失败:', error)
  ElMessage.error('操作失败，请重试')
}

5. 性能优化​

  • 使用 computed 缓存计算结果
  • 合理使用 nextTick 处理DOM更新
  • 避免不必要的组件重渲染

故障排查​

常见问题​

1. Socket连接失败

  • 检查 /hubs/v1/sop 端点是否可访问
  • 确认网络连接状态
  • 查看浏览器控制台错误信息

2. 权限问题

  • 检查用户角色配置
  • 确认权限码是否正确
  • 验证权限服务是否正常

3. 数据不更新

  • 检查Socket订阅是否成功
  • 确认消息回调是否正确注册
  • 查看状态更新逻辑

4. 光标跳转不生效

  • 确认 cursorTarget 指向的组件存在
  • 检查输入框DOM是否已渲染
  • 验证 inputDomMap 是否正确初始化

调试技巧​

  1. 使用调试模式查看所有子组件状态
  2. 监听Socket消息日志
  3. 检查全局状态 widgetStateMap
  4. 使用Vue DevTools调试响应式数据

扩展开发​

添加新的功能页面​

  1. 在 Views/Pages/ 下创建新页面组件
  2. 在 Settings/config.ts 中注册组件信息
  3. 在 Settings/Components/WidgetComponents/ 中添加配置组件
  4. 更新 enum.ts 添加必要的权限码

自定义控制功能​

const customConcreteFn = (socketParams: Record<string, any>, key: string) => {
  const fnMap = {
    'YOUR_CUSTOM_FN': () => {
      // 自定义逻辑
      socketParams.CustomConfig = {
        // 配置参数
      }
    }
  }
  const fn = fnMap[key]
  isFunction(fn) && fn()
}

版本历史​

  • v1.0.0: 初始版本，包含11个核心功能模块
  • 支持完整的SOP执行流程
  • 集成Socket实时通信
  • 完善的权限控制体系