Skip to main content
Version: Next

LMES SOP Widget Box Documentation

1. Introduction​

The SOP (Standard Operating Procedure) Widget Box is a visualization component used in the LMES workstation execution terminal. It is used to display operation instructions, drawings, precautions, and other information to workers.

2. Technical Architecture​

  • Framework: Vue 3 + TypeScript
  • Component Library: Element Plus
  • PDF Rendering: PDF.js
  • Image Rendering: v-viewer

3. Component Features​

3.1 Multi-format Support​

Supports displaying files in various formats:

  • PDF: Used for standard operation manuals.
  • Image (JPG/PNG): Used for product appearance diagrams, defect examples.
  • Video (MP4): Used for operation demonstration videos.
  • Text: Rich text display for key precautions.

3.2 Context Sensitivity​

The component can automatically switch the displayed SOP content based on the current:

  • Product Model: Different models display different assembly drawings.
  • Process: different processes display different operation steps.
  • Workstation: different workstations display corresponding safety specifications.

4. Integration Guide​

4.1 Installation​

npm install @lmes/sop-viewer

4.2 Usage​

<template>
  <SopViewer 
    :productId="currentProduct.id"
    :processId="currentProcess.id"
    :stationId="currentStation.id"
    height="100%"
  />
</template>

<script setup>
import { SopViewer } from '@lmes/sop-viewer';
// ...
</script>

5. Backend Interface​

The component depends on the ISopAppService interface to obtain data:

  • GetSopListAsync(GetSopListInput input): Get the list of SOPs meeting the conditions.
  • GetSopContentAsync(Guid id): Get specific SOP file content (or URL).
Last updated on