easy-flow

Демонстрационный адрес

Спасибо платформе кода Cloud за бесплатный сервис Gitee Pages, доступ может быть немного медленным.

Демонстрационный адрес

Эффектные изображения

Изображение

Описание проекта

easy-flow — это дизайнер процессов на основе VUE+ElementUI+JsPlumb. Узлы можно перетаскивать с помощью плагина vuedraggable.

Функциональное описание

• Поддержка перетаскивания для добавления узлов.
• Возможность устанавливать условия, нажимая на линию.
• Поддержка загрузки данных для создания схемы процесса.
• Можно перетаскивать холст.
• Поддерживаются настраиваемые стили линий, якорей и типов.
• Поддерживается принудительно управляемая диаграмма.

Журнал обновлений

2020-11-12

• Добавлена адаптивная компоновка принудительно управляемой диаграммы, нужно только предоставить узлы, отношения между узлами и автоматически рассчитать координаты (лучше, чем без координат).

2020-08-06

• Добавлено несколько примеров самосоединения.
• Добавлены масштабирование (всё ещё есть некоторые проблемы) и использование инструкций.
• Добавлен обратный вызов перетаскивания.
• Узел имеет параметр viewOnly, который можно использовать для управления тем, доступен ли узел только для чтения.

2020-06-14

• Добавлено: пользовательские типы линий.
• Добавлено: настраиваемые якоря для линий.
• Добавлено: настройка стилей линий.

2020-05-10

• Модификация исходного кода JsPlumb.
• Поддержка настройки и изменения меток.
• Добавление состояния узла.

2020-05-06

• Новое: поддержка условий для линий.
• Рефакторинг: рефакторинг макета.
• Удалено: показать контроль отображения параметров.
• Новое: перетаскивание холста.

2020-03-14

• Настройка стиля страницы.
• Новый параметр типа.
• Настройка стиля меню.

2019-12-09

• Исправлена проблема, из-за которой информация об узле не обновлялась при перемещении узла и нажатии на «Информация о процессе».

2019-12-08

• Удалены определения _this, используются стрелочные функции.

2019-11-26

• Исправлено: исправлена ошибка, из-за которой удаление узла также удаляло другие линии.
• Оптимизировано: оптимизирована структура кода.
• Версия обновлена: версия lodash обновлена до 4.17.15.

2019-11-25

• Проблема с уникальными идентификаторами nodeId при загрузке данных решена.

2019-08-23

• IE 11.316 не поддерживает перетаскивание, проблема решена.
• Добавлен демонстрационный URL-адрес среды, демонстрационный URL-адрес.

2019-08-22

• Ошибка перетаскивания в браузере Firefox решена.

Инструкция по эксплуатации

• Левые дочерние узлы можно перетащить, чтобы переместить их на холст справа, а затем отпустить мышь, чтобы добавить узел.
• Узлы разделены на три части: левая часть представляет собой значок, обозначающий узел, средняя часть описывает узел, правая часть представляет состояние узла, и вы можете перетащить левую часть значка, чтобы создать линию, которая может соединять другие узлы. Перемещение левого значка за пределы позиции может изменить положение узла на странице.

Формат данных

{
    name: 'Процесс D',
    nodeList: [
        {
            id: 'nodeA',
            name: 'Узел A процесса D',
            type: 'task',
            left: '18px',
            top: '223px',
            ico: 'el-icon-user-solid',
            state: 'success'
        },
        {
            id: 'nodeB',
            type: 'task',
            name: 'Узел B процесса D',
            left: '351px',
            top: '96px',
            ico: 'el-icon-goods',
            viewOnly: true,
            state: 'error'
        },
        {
            id: 'nodeC',
            name: 'Узел C процесса D',
            type: 'task',
            left: '354px',
            top: '351px',
            ico: 'el-icon-present',
            state: 'warning'
        }, {
            id: 'nodeD',
            name: 'Узел D процесса D',
            type: 'task',
            left: '723px',
            top: '215px',
            ico: 'el-icon-present',
            state: 'running'
        }
    ],
    lineList: [{
        from: 'nodeA',
        to: 'nodeB',
        label: 'Прямая линия, пользовательский стиль линии, фиксированный якорь',
        connector: 'Straight',
        anchors: ['Top', 'Bottom'],
        paintStyle: {strokeWidth: 2, stroke: '#1879FF'}
    }, {
        from: 'nodeA',
        to: 'nodeC',
        label: 'Кривая Безье, фиксированный якорь',
        connector: 'Bezier',
        anchors: ['Bottom', 'Left']
    }, {
        from: 'nodeB',
        to: 'nodeD',
        label: 'Стиль линии по умолчанию, динамический якорь'
    }, {
        from: 'nodeC',
        to: 'nodeD',
        label: 'Стиль линии по умолчанию, динамический якорь'
    }
    ]
}

Параметры данных

Параметры nodeList

Параметры lineList

1. Скопируйте папку easy-flow/src/components/ef в каталог вашего проекта (например, /src/views).

2. Измените файл main.js, добавив в него следующие строки:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/этот каталог был скопирован на предыдущем шаге/ef/index.css'
Vue.use(ElementUI, {size: 'small'});

Запуск

# Скачать проект
git clone  https://github.com/lettersporter/easy-flow.git

# Установить зависимости
npm install

# Запустить проект
npm run dev

# Адрес для доступа
http://localhost:8080

GitHub

https://github.com/lettersporter/easy-flow

Кодовый облачный сервис

https://gitee.com/xiaoka2017/easy-flow

Группа общения

QQ группа: 534446043

Соглашение

Используйте соглашение, указанное в файле package.json проекта.

Учебные материалы