LMES SOP Widget Box Technical Documentation

Overview

SopWidgetBox (Manual Dashboard) is a comprehensive component box for shop floor operations, providing complete SOP (Standard Operating Procedure) execution and monitoring functions. This component supports various production site operation scenarios such as process selection, step display, material management, and production parameter control.

Component ID: SopWidgetBox Component Name: Manual Dashboard Component Category: run (Runtime Component) Permission Required: None (authorizationRequired: false)

---

Architecture Design

Component Architecture Diagram

Technology Stack

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• Communication Protocol: SignalR WebSocket
• Styles: SCSS Modules
• State Management: Vue Reactive State
• Internationalization: Built-in i18n support

---

Core Function Modules

1. Process Filter (Process)

Function Description: Provides station selection and process flow display functions, serving as the entry and control center of the entire SOP component box.

Main Features:

• Station variable trigger configuration
• Default station option setting
• Real-time station status monitoring
• Process flow chart display

Configuration Items:

{
  stationId: string,          // Station trigger variable
  stationConfig: {            // Default options
    workSection: string,      // Work Section
    workStation: string       // Work Station
  }
}

2. Step List (StepList)

Function Description: Displays detailed step information of the current process, supporting step navigation and status tracking.

3. SOP File Display Box (SopFile)

Function Description: Displays standard operating procedure files, supporting multiple file formats (PDF, images, etc.).

Configuration Items:

{
  sizeMode: 1 | 2,           // 1: Fixed, 2: Fit Content
  contentMode: 0 | 1 | 2,    // 0: Original Content, 1: Fit Component Width, 2: Fit Component Height
  sopWidth: number,          // SOP Width
  sopHeight: number,         // SOP Height
  sopIsFullscreen: boolean   // Is Fullscreen
}

4. Statistic Parameter Display Box (Statistic)

Function Description: Real-time display of production statistical data, such as output, yield rate, cycle time, and other key indicators.

5. Production Parameter List (ParameterList)

Function Description: Displays and inputs production process parameters, supporting parameter validation and history recording.

Permission Code: paramsList-input (Production Parameter List - Writable)

6. Production Material List (MaterialList)

Function Description: Manages material information used in the production process, supporting material traceability.

Configuration Items:

{
  materialListMode: 0 | 1,   // 0: No Reset, 1: Auto Reset
  listInputType: 1 | 2       // 1: Manual Wrap, 2: Auto Wrap
}

Permission Codes:

• materialList-input (Material List - Writable)
• sop-materialList-reset (Material List - Reset)

7. Material Input Box (MaterialInput)

Function Description: Quick input of material barcodes, supporting scanner input and cursor control.

Configuration Items:

{
  cursorType: 1 | 2,         // 1: Keep Cursor, 2: Jump Cursor
  cursorTarget: number,      // Cursor Target Component ID
  inputType: 1 | 2           // 1: Input Box, 2: Text Box
}

Permission Code: material-input (Material Code - Writable)

Core Functions:

• Enter to auto submit
• Auto clear on outbound
• Smart cursor jump

8. Process Control (ProcessControl)

Function Description: Executes production control operations, such as inbound, outbound, pause, etc.

Configuration Items:

{
  btnText: string,           // Button Text
  concreteFn: string,        // Concrete Function Name
  isConfirm: boolean,        // Is Confirm Required
  confirmText: string,       // Confirm Prompt Text
  objectName: string,        // Object Name
  fnWidgetInfo: FieldItem    // Function Component Info
}

Permission Codes:

• production-control (Production Control - Button)
• production-input (Production Control - Writable)

Supported Control Functions:

• Inbound Signal Control
• Product Serial Number Input
• Process Reset
• Quality Judgment
• Outbound Control

9. Batch Material Operation (BatchMaterial)

Function Description: Handles feeding and management operations for batch materials.

10. Step Watch Display Box (StepWatchPage)

Function Description: Real-time monitoring of step execution status, displaying monitoring page.

11. Work Section SOP Display Box (WorkSectionSopButton)

Function Description: Popup display of work section level SOP documents.

Permission Code: sop-workSection-dialog (Work Section SOP Display Box)

---

Core Technical Implementation

Socket Communication Mechanism

The component communicates with the backend in real-time via SignalR WebSocket:

Key Socket Methods:

Method Name	Description	Parameters
SubscribeSOP	Subscribe SOP Data	workStationId, widgetIds, language
FillMaterial	Fill Material Barcode	materialCode
FillProcessControl	Fill Production Control Params	controlParams
ChangeCulture	Switch Language	language
SOPListCallBackId	Step List Callback	-
ProcessParameterListCallBackId	Production Param List Callback	-
MaterialListCallBackId	Material List Callback	-
MessageCallBackId	Message Prompt Callback	-
SOPAttachmentListCallBackId	SOP Attachment List Callback	-

State Management

Global State (state.ts):

// Component State Map
widgetStateMap: Record<string, string>

// Socket Connection Reference
socketRef: {
  target: any,
  messageInit: boolean
}

// Message Processing Map
socketMessageMap: Record<string, any>

// Default Configuration Map
defaultMap: Record<string, any>

Message Processing Mechanism:

interface MessageType {
  message: string,      // Message Content
  showType: 0 | 1,     // 0: Toast, 1: Notification
  messageType: 0 | 1   // 0: Success, 1: Error
}

Permission Control

Permission Code Definition (enum.ts):

export const permissionCodes = {
  'production-control': 'Production Control - Button',
  'production-input': 'Production Control - Writable',
  'material-input': 'Material Code - Writable',
  'materialList-input': 'Material List - Writable',
  'paramsList-input': 'Production Param List - Writable',
  'sop-materialList-reset': 'Material List - Reset',
  'sop-workSection-dialog': 'Work Section SOP Display Box',
}

Permission Check:

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

if (!isPermission('material-input')) {
  // No Permission Handling
  return
}

Event Bus

Uses event publish/subscribe pattern for inter-component communication:

// Publish Event
emitter.emit('eventName', data)

// Subscribe Event
emitter.on('eventName', (data) => {
  // Handle Event
})

// Unsubscribe
emitter.off('eventName', handler)

---

Configuration Explanation

Component Props (Props)

Complete component property definition:

interface SopWidgetBoxProps {
  // Component Mode
  widgetMode: string                    // Default: 'Process'
  
  // Station Configuration
  stationConfig: {
    workSection: string,
    workStation: string
  }
  stationId: string                     // Station Variable ID
  
  // Material Configuration
  materialListMode: 0 | 1               // Default: 0
  
  // Input Configuration
  inputType: 1 | 2                      // Default: 1
  listInputType: 1 | 2                  // Default: 1
  cursorType: 1 | 2                     // Default: 1
  cursorTarget: number                  // Cursor Target
  
  // Signal Configuration
  inboundSignalMode: 0 | 1              // Default: 1
  productInputMode: 0 | 1               // Default: 0
  
  // Control Button Configuration
  btnText: string                       // Button Text
  concreteFn: string                    // Concrete Function
  fnWidgetInfo: FieldItem               // Function Info
  isConfirm: boolean                    // Is Confirm
  confirmText: string                   // Confirm Text
  
  // SOP Display Configuration
  sizeMode: 1 | 2                       // Default: 1
  contentMode: 0 | 1 | 2                // Default: 0
  sopWidth: number                      // Default: 1200
  sopHeight: number                     // Default: 600
  sopIsFullscreen: boolean              // Default: true
  
  // Quality Configuration
  outboundResultVariable: number | string
  qualifiedJudgmentType: number | string
}

Environment Modes

The component supports two running modes:

1. Production Mode (information-prod):

   • Full permission control
   • Real-time Socket communication
   • Operation mask protection

2. Debug Mode (information-debugger):

   • Shows all child components
   • No permission restrictions
   • Facilitates development debugging

Usage Example:

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

<information-debugger>
  {/* Show all components in debug mode */}
</information-debugger>

---

Data Model

Service API

class SopWidgetBox extends Base {
  // Get Station Details
  getWorkStationDetail(id: string): Promise<WorkStationDetail>
  
  // Get Process List
  getFlowList(): Promise<FlowList[]>
  
  // Batch Material Operation
  batchMaterial(data: any): Promise<void>
  
  // Get Page Configuration
  getPageBody(pageId: string): Promise<PageBody>
}

Data Flow

---

Internationalization Support

Component built-in internationalization function:

import { _t } from '../app'

// Use Translation
const text = _t('SopWidgetBox.title')

Language switch via Socket communication:

socketRef.call(ChangeCulture, currentLanguage)

---

Usage Example

Basic Usage

import SopWidgetBox from '@/widgets/SopWidgetBox'

export default {
  is: 'SopWidgetBox',
  name: 'Manual Dashboard',
  category: 'run',
  icon: sopBox,
  authorizationRequired: false,
  canvasView: provider(SopWidgetBox, true),
  settingsView: Setting,
}

Configure Process Filter

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

Configure Material Input

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

Configure Production Control

<SopWidgetBox
  :node="nodeData"
  widgetMode="ProcessControl"
  btnText="Inbound"
  concreteFn="SOP_InboundSignal"
  :isConfirm="true"
  confirmText="Confirm Inbound Operation?"
/>

---

Best Practices

1. Socket Connection Management

• Auto disconnect Socket when component unmounts
• Avoid creating duplicate connections
• Use connection pool reasonably

2. Permission Control

// Check permission before executing operation
if (!isPermission('production-control')) {
  ElMessage.warning('No operation permission')
  return
}

3. Cursor Control

Recommended configuration for material input scenarios:

• cursorType: 2 (Enable cursor jump)
• cursorTarget points to next input component
• Improve operation efficiency

4. Error Handling

try {
  await socketRef[nodeId.value]?.call(FillMaterial, value)
} catch (error) {
  console.error('Material fill failed:', error)
  ElMessage.error('Operation failed, please try again')
}

5. Performance Optimization

• Use computed to cache calculation results
• Use nextTick reasonably to handle DOM updates
• Avoid unnecessary component re-rendering

---

Troubleshooting

Common Issues

1. Socket Connection Failed

• Check if /hubs/v1/sop endpoint is accessible
• Confirm network connection status
• Check browser console error information

2. Permission Issue

• Check user role configuration
• Confirm if permission code is correct
• Verify if permission service is normal

3. Data Not Updating

• Check if Socket subscription is successful
• Confirm if message callback is correctly registered
• Check state update logic

4. Cursor Jump Not Working

• Confirm cursorTarget points to existing component
• Check if input box DOM is rendered
• Verify if inputDomMap is correctly initialized

Debugging Tips

1. Use debug mode to view all child component states
2. Monitor Socket message logs
3. Check global state widgetStateMap
4. Use Vue DevTools to debug reactive data

---

Extension Development

Add New Function Page

1. Create new page component under Views/Pages/
2. Register component info in Settings/config.ts
3. Add configuration component in Settings/Components/WidgetComponents/
4. Update enum.ts to add necessary permission codes

Custom Control Function

const customConcreteFn = (socketParams: Record<string, any>, key: string) => {
  const fnMap = {
    'YOUR_CUSTOM_FN': () => {
      // Custom Logic
      socketParams.CustomConfig = {
        // Config Params
      }
    }
  }
  const fn = fnMap[key]
  isFunction(fn) && fn()
}

---

Version History

• v1.0.0: Initial version, includes 11 core function modules
• Supports complete SOP execution flow
• Integrates Socket real-time communication
• Comprehensive permission control system

---