Оформление
Мобильный макет
1. Обзор
1.1 Версия
| Версия FineBI | **HTML5 Mobile Presentation Plugin /**Версия приложения | BI6.0 Интерфейс редактирования мобильных макетов H5 Plugin | Функциональные изменения |
|---|---|---|---|
| 6.0 | V11.0.68 | V6.0.01.20220701 | - |
| 6.0.11 | V11.0.82 | V6.0.18 | (1) Оптимизация входа в мобильную верстку; (2) В мобильном макете компонент имеет новый портал "Настройки компонента", нажав на который можно войти в интерфейс редактирования компонента для изменения его стиля; (3) Сохранение мобильного макета в режиме реального времени и синхронизация изменений темы в режиме реального времени.* Отмена кнопки "Сохранить", автоматическое сохранение * После изменения конфигурации компонента мобильный макет приборной панели может быть Обновление до последней конфигурации в режиме реального времени |
| 6.0.16 | V11.0.88 | V6.0.24.20231215 | (1) Новая мобильная верстка поддерживает изменение размера холста, подробности см. в разделе 3.1.(2) Поддержка заголовка компонента, настройки текстового компонента с насыщенным текстом, подробнее см. раздел 3.3.6.3) Мобильные текстовые компоненты поддерживают центрирование сверху и снизу4) Оптимизируйте конфигурацию по умолчанию:* Оптимизация положения легенды: верхний левый, верхний средний, мобильный наследуется как верхний; нижний левый, нижний средний, мобильный наследуется как нижний; * По умолчанию шрифт графика установлен на адаптивный; * Текстовые компоненты и карточки индикаторов по умолчанию не отображают полноэкранные кнопки 5) Оптимизация стиля компонентов фильтра:* Высота по умолчанию равна одной сетке, поддерживается ручная регулировка до двух сеток * Оптимизация всплывающих окон компонентов фильтра |
1.2 Сценарии применения
При работе в дороге пользователи часто обращаются к панелям FineBI с мобильных устройств, чтобы быстро просмотреть ход проекта в режиме реального времени и т. д.
Дизайнеры часто используют единую приборную панель FineBI для ПК и мобильных устройств и меняют только стиль оформления приборной панели, чтобы сэкономить затраты на разработку и время на обслуживание.
1.3 Функциональный профиль
FineBI поддерживает мобильные телефоны и планшеты на базе iOS или Android для просмотра приборных панелей, позволяя пользователям удобно перемещаться по приборным панелям системы одним касанием пальца.
FineBI предоставляет функцию мобильной раскладки в интерфейсе приборной панели, что удобно для пользователей при разработке компонентов и порядка отображения на экране мобильной приборной панели.
Нажмите "Mobile Layout" в интерфейсе редактирования приборной панели, чтобы войти в него. Как показано на рисунке ниже:
1.4 Подготовка окружающей среды
Требуется наличие плагина "BI6.0 mobile layout editing interface H5", FineBI поставляется с плагином, при его использовании рекомендуется убедиться, что плагин обновлен до последней версии.
1.5 Эффекты просмотра
- Ссылка на APP View: Посетите FineBI со стороны приложений, загрузите APP и привяжите к BI, после чего вы сможете просматривать шаблоны в "Каталог > дашборд".
- Ссылка на H5-вид: доступ к FineBI на стороне HTML5.
2. Мобильный макет по умолчанию
После создания приборной панели на ПК, не настраивая макет на мобильной стороне, смонтируйте ее в каталог. Предварительный просмотр для мобильных устройств по умолчанию показан ниже:
Правила по умолчанию:
1) По умолчанию один компонент на строку
2) Порядок компонентов отображается в соответствии с физическим расположением ПК, слева направо, сверху вниз.
3) Адаптивная регулировка высоты компонентов в зависимости от содержания
4) Компоненты фильтра по умолчанию не отображаются на приборной панели, но отображаются в кнопке компонента фильтра ниже
3. Настройка мобильного макета
3.1 Переход к мобильному макету
Чтобы сделать шаблон более красивым и удобным при отображении на мобильных устройствах, нажмите кнопку "Мобильный макет" в верхней части страницы редактирования панели, чтобы получить доступ к настройкам мобильного макета. Более подробная информация приведена в разделе 1.3.
Примечание: Кнопка Mobile Layout присутствует только на экране редактирования панели, на экране предварительного просмотра панели ее нет.
Войдите в интерфейс настроек мобильного макета, как показано на следующем рисунке:
| серийный номер | функциональность | инструкции |
|---|---|---|
| 1 | перепрофилирование | Нажмите, чтобы вернуться к эффекту мобильной панели по умолчанию. |
| 2 | масштабирование | Нажмите, чтобы увеличить или уменьшить масштаб экрана предварительного просмотра мобильных эффектов;По умолчанию используется значение 100%, возможны варианты 75%, 100%, 125% и 150%;Макет сохраняется на 100% каждый раз, когда вы переходите на мобильный, а масштабирование не влияет на фактическое представление на мобильном. |
| 3 | Мобильный холст | Для того чтобы имитировать эффект приближения к мобильному телефону на ПК, мы предоставляем конфигурации размеров холста для различных моделей мобильных телефонов, обратитесь к таблице ниже для соответствующих размеров различных названий холста. |
| 4 | дашборд/Мобильный макет | Нажмите, чтобы переключить расположение приборной панели для ПК/мобильных устройств |
| 4 | Предварительный просмотр для мобильных устройств | Предварительный просмотр мобильной презентации;Поддержка непосредственно в интерфейсе регулировки положения компонента, размера (компоненты фильтра не поддерживают изменение размера), регулировки ширины столбцов таблицы, перехода к компоненту для установки стиляМобильный макет приборной панели автоматически обновляется при изменении компонента.Примечание: высота экрана мобильного телефона в интерфейсе предварительного просмотра мобильного терминала составляет 670px, когда высота экрана мобильного телефона и интерфейса предварительного просмотра одинакова, количество компонентов, отображаемых на одном экране, одинаково; если высота больше 670px, на одном экране будет отображаться больше компонентов; с другой стороны, на одном экране будет отображаться меньше компонентов. |
| 5 | скрытый компонент | Скрытые компоненты отображаются в этой области |
| 6 | Настройки стиля | Настройка стиля поддерживает "Настройку страницы" и "Настройку компонента".* Настройка страницы: настройки для приборной панели. Вы можете установить разрыв между мобильными компонентами, фон приборной панели, показать ли все компоненты фильтра в панели параметров; * Настройки компонентов: настройки для отдельных компонентов. Можно настроить отображение полноэкранных кнопок, эффект адаптивного отображения компонентов |
Примечание 1: После настройки мобильного макета, если вы добавите новый компонент на приборную панель, он автоматически станет последним в мобильном макете; новый компонент фильтра появится вверху.
Примечание 2: Когда вы удаляете компонент на приборной панели, удаленный компонент синхронно удаляется в мобильном макете, а компоненты, расположенные за этим компонентом, перемещаются вверх.
Исторический размер холста (377 * 670)
| имя конфигурации | Размер холста |
|---|---|
| iPhone 13/14 по умолчанию (390*844) | 390*753 |
| iPhone 13/14 Pro Max (430*932) | 430*841 |
| HUAWEI Mate 60 (405*896) | 405*805 |
| HUAWEI Mate 60 Pro+/Pro (420*907) | 420*816 |
| HUAWEI P50/P60 (407*900) | 407*809 |
| Xiaomi 13/14 Pro (480*1067) | 480*976 |
| OPPO Find X6 Pro/X6 (480*1056) | 480*965 |
| VIVO X100 Pro /X100 (420*933) | 480*842 |
| Samsung Galaxy S23+/S23 (360*780) | 360*689 |
3.2 Скрытие компонентов
Некоторые компоненты приборной панели, которые используются для оптимизации эффекта диаграмм, не обязательно отображать на мобильных устройствах. На данном этапе эти компоненты можно скрыть в мобильном макете.
В интерфейсе мобильного макета нажмите кнопку "Скрыть" в левом верхнем углу компонента, и компонент переместится в раздел "Скрытые компоненты".
Скрытые компоненты не будут отображаться на мобильных устройствах. После скрытия компонента последующие компоненты перемещаются вверх по порядку. Это показано на следующем рисунке:
Для компонентов, которые были скрыты, нажмите кнопку "Показать" в правом верхнем углу компонента, компонент автоматически переместится на левую панель мобильного макета, а компонент, который снова будет отображаться, автоматически отобразится в последней позиции.
Примечание: Компоненты фильтра, которые восстанавливаются на экране, отображаются вверху, а компоненты фильтра внутри компонента вкладки отображаются в верхней части страницы вкладки; настройки отображения компонентов фильтра см. в разделе 3.4.3 документации.
3.3 Компоненты регулировки
3.3.1 Изменение размеров компонентов
FineBI engineering поддерживает изменение размеров компонентов в области предварительного просмотра для мобильных устройств в панели "Мобильный макет", как показано на следующем рисунке:
Примечание: Компоненты фильтра поддерживают настройку только ширины компонента, но не высоты. Как отображать компоненты фильтра непосредственно на приборной панели, см. в разделе 3.4.3 документации.
3.3.2 Регулировка положения компонентов
Мобильный макет поддерживает настройку положения компонентов и установку нескольких компонентов в ряд, как показано ниже:
3.3.3 Настройка ширины столбцов таблицы
Если при предварительном просмотре таблицы в мобильном устройстве столбцы данных отображаются не полностью, вы можете вручную настроить ширину столбцов. Как показано на рисунке ниже:
Примечание: Вы также можете установить эффект адаптации формы в разделе Настройки стиля > Настройки компонентов. См. раздел 3.5.
3.3.4 Регулировочные компоненты
После версии FineBI 6.0.11, если пользователь хочет настроить компонент.
1) Нажмите кнопку "Настройки" компонента в панели "Мобильный макет", чтобы войти в интерфейс редактирования компонента;
2) Измените стили компонентов и т.д., чтобы они соответствовали эффекту мобильной верстки.
3.3.5 Комбинации компонентов
Нажмите на компонент, чтобы настроить комбинацию, подробнее см. в документе: Комбинации компонентов.
Пользователи могут комбинировать содержимое приборной панели, чтобы получить макет в стиле блока.
3.3.6 Настройка насыщенного текста
Компонент заголовка/текста мобильного компонента поддерживает отдельную настройку мобильных стилей.
Примечание: Это не влияет на эффект ПК.
- текстовый компонент
- Название компонента
3.4 Настройки стиля страницы
На вкладке "Настройки стиля" вы можете задать стиль приборной панели "Настройки страницы" и "Настройки компонента".
3.4.1 Установка зазора между компонентами
Нажмите "Настройки стиля", установите зазор между компонентами на "10", и вы сможете увидеть эффект реализации с левой стороны. Как показано на рисунке ниже:
Примечание: Компоненты внутри компонента Tab также поддерживают настройку зазора между компонентами.
3.4.2 Настройка фона приборной панели
Фон можно установить как "Цвет" или "Рисунок". Например, в разделе "Настройки компонента > Настройка страницы" выберите "Фон" и нажмите "Цвет", чтобы установить синий фон. Эффект показан на следующем рисунке:
3.4.3 Компоненты фильтра дисплея
По умолчанию компоненты фильтров отображаются на панели параметров, как показано в разделе 2. Отключение функции "Показать все фильтры на панели параметров" отображает фильтры на приборной панели. Компоненты фильтров расположены в верхней части. Это показано на рисунке ниже:
Примечание: Компоненты фильтра в компоненте вкладки отображаются на соответствующей странице вкладки.
3.4.4 Адаптация шрифта диаграммы
Mobile поддерживает адаптивные шрифты диаграмм, нажмите "Настройки стиля > Шрифты диаграмм > Адаптивные". Во включенном состоянии, когда вы изменяете размер компонента диаграммы, размер шрифта в компоненте диаграммы будет подстраиваться автоматически. Как показано на рисунке ниже:
3.5 Стилизация компонентов
3.5.1 Кнопка скрытия полного экрана
Иногда пользователи не хотят, чтобы все компоненты показывались на весь экран при нажатии. Вы можете выбрать компонент и отключить "Показывать полноэкранную кнопку". Завершите работу над мобильным макетом и нажмите кнопку "Сохранить". Как показано на рисунке ниже:
Подробнее см. в документации: Настройки полноэкранной кнопки.
3.5.2 Адаптация компонентов
Для некоторых компонентов, таких как текстовые компоненты, компоненты карточек индикаторов KPI и табличные компоненты, вы можете настроить стиль отображения для мобильных устройств, установив адаптивный, чтобы содержимое отображалось полностью.
1) Адаптивная карта показателей KPI
В мобильном макете выберите компонент "Настройки стиля" и выберите "Адаптивный режим", как показано на следующем рисунке:
Существует четыре типа адаптации: стандартная адаптация, общая адаптация, адаптация по ширине и адаптация по высоте, причем общая адаптация используется по умолчанию.
Примечание: Настройки адаптации компонента типа текста для пользовательских графиков такие же, как и для карт индикаторов.
2) Адаптация текстового компонента
В мобильном макете выберите компонент "Настройки стиля" и выберите "Адаптивный режим", как показано на следующем рисунке:
Адаптация ширины текстового компонента: когда текстовое содержимое не встречается в мобильной части автоматической подачи строки, сохраняется настройка размера шрифта; когда текстовое содержимое в мобильной части автоматической подачи строки (не нажимайте вручную клавишу Enter для подачи строки), текстовое содержимое в мобильной части адаптируется по ширине.
3) Адаптация формы
В мобильном макете выберите компонент "Настройки стиля" и выберите "Адаптивный режим", по умолчанию - "Стандартный адаптивный".
- Стандартная адаптация: правило отображения по умолчанию для мобильных таблиц, максимальная ширина колонки составляет 1/2 видимой ширины компонента, минимальная - 1/6 видимой ширины компонента.
- Адаптация ширины: ширина столбцов наследования PC изометрический адаптивный эффект, ширина таблицы для поддержки полной ширины компонента (не будет появляться горизонтальная полоса прокрутки), мобильная сторона экрана может отображать все столбцы.
Если адаптация не соответствует требованиям, ширину столбцов можно отрегулировать, перетащив их напрямую, как описано в разделе 3.3.3 этого документа.
3.6 Настройки макета BI
BI Mobile поддерживает "Grid Layout" и "Adaptive Layout", разница между ними заключается в том, что когда содержимое компонента меньше высоты компонента, может ли компонент адаптироваться для регулировки высоты.
Подробности см. в разделе: Настройки макета BI.
4. Восстановите стандартную мобильную раскладку
Если вам нужно восстановить исходный макет мобильного по умолчанию, то нажмите кнопку "Сброс" в правом верхнем углу, и макет мобильного будет восстановлен. Как показано на рисунке ниже:
