mirror of
https://github.com/bpmbpm/doc.git
synced 2026-04-28 11:30:42 +00:00
341 lines
No EOL
13 KiB
HTML
341 lines
No EOL
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BPMN Калькулятор | No-Code на основе BPMN</title>
|
||
|
||
<!-- Подключение bpmn-js -->
|
||
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@latest/dist/assets/diagram-js.css" />
|
||
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@latest/dist/assets/bpmn-font/css/bpmn.css" />
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1fr 400px;
|
||
gap: 20px;
|
||
background: white;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* Панель BPMN-диаграммы */
|
||
.bpmn-panel {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
min-height: 500px;
|
||
}
|
||
|
||
#canvas {
|
||
width: 100%;
|
||
height: 500px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* Панель управления калькулятором */
|
||
.calculator-panel {
|
||
background: white;
|
||
padding: 30px;
|
||
border-left: 1px solid #e9ecef;
|
||
}
|
||
|
||
.calculator-panel h2 {
|
||
margin-bottom: 20px;
|
||
color: #2d3748;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
color: #4a5568;
|
||
}
|
||
|
||
input, select {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
input:focus, select:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||
}
|
||
|
||
.result {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.result-label {
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,0.9);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.result-value {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: white;
|
||
}
|
||
|
||
.info {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background: #f7fafc;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
color: #718096;
|
||
}
|
||
|
||
.bpmn-info {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background: #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
color: #495057;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.calculator-panel {
|
||
border-left: none;
|
||
border-top: 1px solid #e9ecef;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Левая панель: BPMN-диаграмма -->
|
||
<div class="bpmn-panel">
|
||
<h3 style="margin-bottom: 15px;">📊 BPMN 2.0 Модель процесса</h3>
|
||
<div id="canvas"></div>
|
||
<div class="bpmn-info">
|
||
⚙️ BPMN-процесс: Start → Выполнить вычисление → End<br>
|
||
🔄 При изменении входных данных процесс "выполняется" автоматически
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Правая панель: Интерфейс калькулятора -->
|
||
<div class="calculator-panel">
|
||
<h2>🧮 BPMN Калькулятор</h2>
|
||
|
||
<div class="form-group">
|
||
<label>Число A:</label>
|
||
<input type="number" id="num1" value="10" step="any">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Число B:</label>
|
||
<input type="number" id="num2" value="5" step="any">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Операция:</label>
|
||
<select id="operation">
|
||
<option value="+">➕ Сложение (+)</option>
|
||
<option value="-">➖ Вычитание (-)</option>
|
||
<option value="*">✖️ Умножение (*)</option>
|
||
<option value="/">➗ Деление (/)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="result">
|
||
<div class="result-label">Результат вычисления:</div>
|
||
<div class="result-value" id="result">—</div>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<strong>💡 Как это работает:</strong><br>
|
||
1. BPMN-диаграмма визуализирует процесс вычисления<br>
|
||
2. JavaScript реализует бизнес-логику калькулятора<br>
|
||
3. Любое изменение входных данных автоматически обновляет результат<br>
|
||
4. BPMN-модель служит документацией процесса
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Подключение bpmn-js и логика -->
|
||
<script src="https://unpkg.com/bpmn-js@latest/dist/bpmn-modeler.development.js"></script>
|
||
<script>
|
||
// ========== Логика калькулятора (BPMN-совместимая) ==========
|
||
function calculate(num1, num2, operation) {
|
||
// Проверка на корректность ввода
|
||
if (isNaN(num1) || isNaN(num2)) {
|
||
return "Ошибка: введите числа";
|
||
}
|
||
|
||
// Выполнение операции
|
||
switch(operation) {
|
||
case '+':
|
||
return num1 + num2;
|
||
case '-':
|
||
return num1 - num2;
|
||
case '*':
|
||
return num1 * num2;
|
||
case '/':
|
||
if (num2 === 0) {
|
||
return "Ошибка: деление на ноль";
|
||
}
|
||
return num1 / num2;
|
||
default:
|
||
return "Ошибка: неизвестная операция";
|
||
}
|
||
}
|
||
|
||
// Функция обновления результата
|
||
function updateResult() {
|
||
const num1 = parseFloat(document.getElementById('num1').value);
|
||
const num2 = parseFloat(document.getElementById('num2').value);
|
||
const operation = document.getElementById('operation').value;
|
||
|
||
const result = calculate(num1, num2, operation);
|
||
document.getElementById('result').textContent =
|
||
typeof result === 'number' ? result.toFixed(4) : result;
|
||
|
||
// Визуальная анимация для BPMN-диаграммы
|
||
highlightBPMNTask();
|
||
}
|
||
|
||
// Функция анимации BPMN-задачи (демонстрация выполнения процесса)
|
||
function highlightBPMNTask() {
|
||
const taskElement = document.querySelector('[data-element-id="CalculateTask"]');
|
||
if (taskElement) {
|
||
taskElement.style.transition = 'filter 0.3s';
|
||
taskElement.style.filter = 'drop-shadow(0 0 8px #667eea)';
|
||
setTimeout(() => {
|
||
taskElement.style.filter = '';
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
// ========== Инициализация BPMN-диаграммы ==========
|
||
const canvas = document.getElementById('canvas');
|
||
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
|
||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
||
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
|
||
targetNamespace="http://bpmn.io/schema/bpmn">
|
||
<process id="CalculatorProcess" isExecutable="false">
|
||
<startEvent id="StartEvent" name="Начало" />
|
||
<serviceTask id="CalculateTask" name="Вычислить: A + B = ?" />
|
||
<endEvent id="EndEvent" name="Конец" />
|
||
<sequenceFlow id="flow1" sourceRef="StartEvent" targetRef="CalculateTask" />
|
||
<sequenceFlow id="flow2" sourceRef="CalculateTask" targetRef="EndEvent" />
|
||
</process>
|
||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="CalculatorProcess">
|
||
<bpmndi:BPMNShape id="StartEvent_di" bpmnElement="StartEvent">
|
||
<dc:Bounds x="80" y="150" width="36" height="36" />
|
||
<bpmndi:BPMNLabel>
|
||
<dc:Bounds x="86" y="193" width="24" height="14" />
|
||
</bpmndi:BPMNLabel>
|
||
</bpmndi:BPMNShape>
|
||
<bpmndi:BPMNShape id="CalculateTask_di" bpmnElement="CalculateTask">
|
||
<dc:Bounds x="180" y="130" width="120" height="80" />
|
||
<bpmndi:BPMNLabel />
|
||
</bpmndi:BPMNShape>
|
||
<bpmndi:BPMNShape id="EndEvent_di" bpmnElement="EndEvent">
|
||
<dc:Bounds x="350" y="150" width="36" height="36" />
|
||
<bpmndi:BPMNLabel>
|
||
<dc:Bounds x="357" y="193" width="22" height="14" />
|
||
</bpmndi:BPMNLabel>
|
||
</bpmndi:BPMNShape>
|
||
<bpmndi:BPMNEdge id="flow1_di" bpmnElement="flow1">
|
||
<di:waypoint x="116" y="168" />
|
||
<di:waypoint x="180" y="170" />
|
||
<bpmndi:BPMNLabel />
|
||
</bpmndi:BPMNEdge>
|
||
<bpmndi:BPMNEdge id="flow2_di" bpmnElement="flow2">
|
||
<di:waypoint x="300" y="170" />
|
||
<di:waypoint x="350" y="168" />
|
||
<bpmndi:BPMNLabel />
|
||
</bpmndi:BPMNEdge>
|
||
</bpmndi:BPMNPlane>
|
||
</bpmndi:BPMNDiagram>
|
||
</definitions>`;
|
||
|
||
// Создание экземпляра BpmnJS для просмотра
|
||
const viewer = new BpmnJS({
|
||
container: '#canvas'
|
||
});
|
||
|
||
// Загрузка BPMN-диаграммы
|
||
viewer.importXML(bpmnXML, function(err) {
|
||
if (err) {
|
||
console.error('Ошибка загрузки BPMN:', err);
|
||
canvas.innerHTML = '<div style="color:red; padding:20px;">❌ Ошибка загрузки BPMN-диаграммы</div>';
|
||
} else {
|
||
console.log('✅ BPMN-диаграмма успешно загружена');
|
||
|
||
// Получаем доступ к элементам для анимации
|
||
setTimeout(() => {
|
||
const overlays = viewer.get('overlays');
|
||
const elementRegistry = viewer.get('elementRegistry');
|
||
const taskElement = elementRegistry.get('CalculateTask');
|
||
|
||
if (taskElement) {
|
||
// Добавляем атрибут для CSS-стилизации
|
||
const gfx = elementRegistry.getGraphics(taskElement);
|
||
if (gfx) {
|
||
gfx.setAttribute('data-element-id', 'CalculateTask');
|
||
}
|
||
}
|
||
}, 100);
|
||
}
|
||
});
|
||
|
||
// ========== Подписка на события ввода ==========
|
||
document.getElementById('num1').addEventListener('input', updateResult);
|
||
document.getElementById('num2').addEventListener('input', updateResult);
|
||
document.getElementById('operation').addEventListener('change', updateResult);
|
||
|
||
// Инициализация результата
|
||
updateResult();
|
||
|
||
// Добавляем обработчик для демонстрации выполнения BPMN-процесса
|
||
setInterval(() => {
|
||
const taskElement = document.querySelector('[data-element-id="CalculateTask"]');
|
||
if (taskElement) {
|
||
taskElement.style.filter = 'drop-shadow(0 0 4px #ddd)';
|
||
}
|
||
}, 2000);
|
||
</script>
|
||
</body>
|
||
</html> |