Разработайте визуальную производственную платформу для большого экрана с нуля

Платформа для создания страниц H5 с открытым исходным кодом несколько месяцев назадH5-DooringМы получили много восторженных отзывов и обменов.По прежнему плану автора мы сделали еще один визуальный редактор для больших экранов.V6.DooringДалее автор предложит вам взглянуть на дизайн нашей программы и техническую реализацию.

ты получишь

Визуализация идей дизайна продукта для большого экрана
Выбор основной технологии библиотеки визуальных диаграмм
Идеи дизайна редактора большого экрана
Визуальный редактор для большого экрана
Автономное исследование пользовательских данных

Перед введением давайте взглянем на отображение эффекта.

Предварительный просмотр эффекта

Реализация схемы

Визуализация идей дизайна продукта для большого экрана

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

По сравнению с традиционными настраиваемыми вручную диаграммами и информационными панелями появление производственной платформы для визуализации на большом экране может решить проблему компенсации индивидуальной разработки и рассеивания данных.Благодаря сбору, очистке и анализу данных для интуитивно понятной визуализации данных в реальном времени, больше Азимут, многоугольность, панорамное отображение различных индикаторов, мониторинг в реальном времени, динамичность с первого взгляда.

В ответ на вышеуказанные требования мы разработали набор визуальных решений для больших экранов, которые включают в себя следующие пункты:

Вышеприведенное изображение является базовым эскизом, разработанным автором 4 месяца назад, и будет постоянно обновляться в более поздний период.Благодаря приведенной выше декомпозиции дизайна мы можем в основном построить большой экран данных, который можно настроить под себя.

Выбор основной технологии библиотеки визуальных диаграмм

В настоящее время известными основными библиотеками визуализации, исследованными автором, являются:

echartСтаромодная библиотека визуальных диаграмм с открытым исходным кодом, основанная на JavaScript.
D3.jsБиблиотека визуализации на основе данных, которая может работать в современных браузерах без каких-либо других фреймворков. Она сочетает в себе мощные компоненты визуализации для управления DOM-манипулированием.
antvСодержит полную систему визуальных компонентов
Chart.jsПростая в использовании библиотека диаграмм JavaScript на основе HTML5.
metrics-graphicsБиблиотека визуализации, построенная на основе D3, оптимизированная для визуализации и представления данных временных рядов.
C3.jsУпрощает создание диаграмм на основе D3 за счет переноса кода, необходимого для построения всей диаграммы.

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

Идеи дизайна редактора большого экрана

В приведенном выше анализе мы знаем, что редактору с большим экраном требуется ядро редактора, которое в основном включает следующие части:

Библиотека компонентов
Перетаскивание (свободное перетаскивание, направляющие, автоматическое предложение)
Рендерер холста
редактор свойств

Как показано ниже:

Мы можем использовать любой метод инкапсуляции компонентов (react/vue и т. д.) для библиотеки компонентов, который используется здесь.H5-DooringМетод визуального проектирования компонентов используется для оптимизации и проектирования модели компонентов.

Аналогичный код выглядит следующим образом:

import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';

import styles from './index.less';
import { IChartConfig } from './schema';

const XChart = (props:IChartConfig) => {
  const { data, color, size, paddingTop, title } = props;
  const chartRef = useRef(null);
  useEffect(() => {
      const chart = new Chart({
        el: chartRef.current || undefined,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
      });

      // step 2: 处理数据
      const dataX = data.map(item => ({ ...item, value: Number(item.value) }));

      // Step 2: 载入数据源
      chart.source(dataX);

      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart
        .interval()
        .position('name*value')
        .color('name');

      // Step 4: 渲染图表
      chart.render();
  }, [data]);
  return (
    <div className={styles.chartWrap}>
      <div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
        {title}
      </div>
      <canvas ref={chartRef}></canvas>
    </div>
  );
};

export default memo(XChart);

Вышеупомянутый пример — это всего лишь простой пример, учитывая сложность бизнес-требований, мы склонны больше контролировать, например, анимацию (animation), событие(event), Сбор данных(data inject)Ждать.

Перетаскивание компонентов может использовать существующий рынокDragableи другие плагины, вы также можете использоватьH5-DooringУмная сетка перетаскивания. Здесь автор выбирает свободное перетаскивание. Существующие:

rc-drag
sortablejs
react-dnd
react-dragable
vue-dragable

И т. д. Конкретный процесс рендеринга перетаскиванием выглядит следующим образом:

Конкретный процесс перетаскивания:

Используйте перетаскиваемый API H5, чтобы перетащить левый компонент (данные компонента) в целевой контейнер (targetBox).
Прослушайте событие окончания перетаскивания, чтобы передать событие перетаскивания.dataвизуализировать реальные визуальные компоненты
Крепление визуального компонента,schemaПанель редактирования Inject, редактор свойств компонента рендеринга панели редактирования
перетаскивание, изменение атрибутов, обновление
предварительно просмотреть, опубликовать

компонентschemaСсылаться наДверной дизайн DSL

Автономное исследование визуализированных данных на большом экране

В настоящее время реализованная нами платформа построения может статически проектировать источники данных или внедрять сторонние интерфейсы следующим образом:

Мы можем вызвать внутренний интерфейс для получения данных в режиме реального времени, который используется во многих сценариях в платформе визуального мониторинга, следующим образом:

параметр(params) в области редактирования можно настроить параметры интерфейса.Автор редактора кода рекомендует здесь два типа, вы можете выбрать:

react-monaco-editor
react-codemirror2

Использование одного из вышеперечисленных может достичьminiВерсияvscode, тоже можно попробовать.

Доступность

Скриншот визуального большого экрана одним щелчком мышиФункция скриншота в один клик по-прежнему используетсяH5-DooringРешение для создания быстрых снимков экрана в основном используется для совместного использования большого экрана, создания плакатов и других нужд. Мы можем использовать любой из следующих компонентов для достижения:

dom-to-image
html2canvas

Отменить повторить

Чтобы отменить функцию повтора, мы можем использовать существующие библиотеки, такие какreact-undo, можно и самому реализовать, принцип реализации:

Это немного похоже на связанный список. Мы храним каждое состояние в массиве и реализуем функцию отмены повтора с помощью указателей. Если мы хотим быть более надежными, мы можем разработать «механизм исключения состояний», чтобы установить максимальное количество состояний. которые могут быть сохранены. , предыдущее автоматическое устранение (удаление, большее из которых называется извлечением из стека). Это позволяет избежать большого объема хранения состояния в сложных операциях и сэкономить память браузера.

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

arr.forEach(el => {
  let dom = [...Array.from(el.querySelectorAll('.calibrationNumber'))][0] as HTMLElement;
  if (dom) {
    dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(
      1,
    )})`;
  }
});

Подробный исходный код см. по адресу:H5-Dooring | Исходный код дизайна эталонной линии

Позднее планирование

В последнее время нашим основным направлением является разработка редактора H5-Dooring 2.0, а также обновление и оптимизация визуальной широкоэкранной строительной платформы.Онлайн-демонстрация будет выпущена позже, и вы можете играть.

Замечательный следующий выпуск

Схема проектирования компонента 3D визуализации
Дизайн платформы мониторинга визуализации данных
Управление данными и представление данных в режиме реального времени на большом визуальном экране
Обмен технологиями версии H5-Dooring 2.0