LMES Manual Dashboard Technical Component Document

Overview

SopWidgetBox (Manual Dashboard) is a comprehensive component box for production workshop field operations, providing complete SOP (Standard Operating Procedure) execution and monitoring functions. This component supports various production field 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 Requirement: None (authorizationRequired: false)

---

Architecture Design

Component Architecture Diagram

Technology Stack

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• Communication Protocol: SignalR WebSocket
• Style: 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.

Key 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   // Whether full screen
}

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 records production process parameters, supporting parameter validation and history records.

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 line break, 2: Auto line break
}

Permission Codes:

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

7. Material Input Box (MaterialInput)

Function Description: Quick entry 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 area
}

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

Core Functions:

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

8. Production 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,        // Whether confirmation is required
  confirmText: string,       // Confirmation 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 Monitoring Display Box (StepWatchPage)

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

11. Work Section SOP Display Box (WorkSectionSopButton)

Function Description: Pop-up 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 implements real-time communication with the backend via SignalR WebSocket:

Key Socket Methods:

Method Name	Description	Parameters
SubscribeSOP	Subscribe to SOP data	workStationId, widgetIds, language
FillMaterial	Fill material barcode	materialCode
FillProcessControl	Fill production control parameters	controlParams
ChangeCulture	Switch language	language
SOPListCallBackId	Step list callback	-
ProcessParameterListCallBackId	Production parameter list callback	-
MaterialListCallBackId	Material list callback	-
MessageCallBackId	Message prompt callback	-
SOPAttachmentListCallBackId	SOP attachment list callback	-

State Management

Global State (state.ts):

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

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

// Message Handling Mapping
socketMessageMap: Record<string, any>

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

Message Handling 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 Parameter List - Writable',
  'sop-materialList-reset': 'Material List - Reset',
  'sop-workSection-dialog': 'Work Section SOP Display Box',
}

Permission Validation:

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

if (!isPermission('material-input')) {
  // No permission handling
  return
}

Event Bus

Use 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 Description

Component Properties (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                    // Whether 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):

   • Show all sub-components
   • No permission restrictions
   • Convenient for development and 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 Detail
  getWorkStationDetail(id: string): Promise<WorkStationDetail>
  
  // Get Flow 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 switching via Socket communication:

socketRef.call(ChangeCulture, currentLanguage)

---

Usage Examples

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

• Automatically disconnect Socket connection when component is unmounted
• Avoid duplicate connection creation
• 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 the next input component
• Improve operation efficiency

4. Error Handling

try {
  await socketRef[nodeId.value]?.call(FillMaterial, value)
} catch (error) {
  console.error('Material filling 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 Failure

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

2. Permission Issues

• Check user role configuration
• Confirm if permission codes are 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 the component pointed to by cursorTarget exists
• Check if input box DOM is rendered
• Verify if inputDomMap is correctly initialized

Debugging Tips

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

---

Extended Development

Adding New Function Pages

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 Functions

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

---

Version History

• v1.0.0: Initial version, including 11 core function modules
• Support complete SOP execution process
• Integrate Socket real-time communication
• Perfect permission control system

---