/WinnerZigbee

Primary LanguageTypeScript

Author: Стенин Максим

Contacts: Site: https://stenin.site Telegram: @SteninMaxim

Шаблон панели граффити - дзотай

Этот шаблон разработан на основе платформы Ray и предоставляется бизнес-разработчикам, которым необходимо разрабатывать панели в таких приложениях, как Tuya Smart и Smart Life. Код предоставляет основные методы использования для разработки Ray, включая использование маршрутизации, переходы по страницам, операции с устройствами, многоязычность и т. д. Используя контент, разработчики могут обращаться к вариантам использования и самостоятельно корректировать код в соответствии с потребностями бизнеса.

Условия и положения

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

Структура каталогов

├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmrc ├── .prettierrc.js ├── README.md ├── commitlint.config.js ├── package.json ├── project.tuya.json // Конфигурация проекта IDE, см. https://developer.tuya.com/cn/ray/guide/tutorial/directory. ├── ray.config.ts // Файл конфигурации проекта Ray, см. https://developer.tuya.com/cn/ray/guide/tutorial/directory. ├── источник │ ├── api // каталог интерфейса │ ├── app.config.ts // Файл, создаваемый по умолчанию при запуске проекта. Этот файл не требует отправки в git. │ ├── app.tsx // Файл записи проекта │ ├── атомы // каталог управления статусами дзотаев │ ├── components // каталог компонентов │ ├── global.config.ts // Элементы глобальной конфигурации проекта, см. https://developer.tuya.com/cn/ray/guide/tutorial/global-config. │ ├── i18n // Многоязычная локальная конфигурация │ ├── pages // Каталог страниц, в котором хранится исходный код всех компонентов страницы. Существует как минимум файл index.tsx. │ ├── res // Статический каталог ресурсов │ ├── routes.config.ts // Конфигурацию маршрутизации см. на https://developer.tuya.com/cn/ray/guide/tutorial/routes. │ ├── utils // Каталог методов инструмента │ ├──variables.less // меньше глобальных переменных │ └── withDevicePanel.tsx // Запись высокого уровня, обрабатывающая логику, связанную с устройством ├── tsconfig.json // файл конфигурации TS ├── typings // Глобальный проект TS Каталог определения типизации │ └── index.d.ts

Использование компонентов

Разрабатывайте с использованием платформы Ray. Если вы хотите обеспечить совместимость с многотерминальными решениями, вам необходимо использовать компоненты, предоставляемые платформой Ray. Подробную информацию см. в [Документации по компонентам Ray] (https://developer.tuya. ком/cn/ray/компоненты)

Основные операции и API

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

Работа устройства

Чтобы удовлетворить потребности разработки панелей, платформа Ray также предоставляет API, связанные с работой устройства. Когда разработчики управляют устройством, они могут напрямую использовать возможности работы устройства, предоставляемые платформой. Подробную информацию см. в [Документ API — Возможности устройства] (https://developer.tuya.com/cn/ray/api/device-kit/add-timer)

Расширение компонента

Если компоненты, предоставляемые платформой Ray, не могут хорошо удовлетворить потребности бизнеса, вы также можете следовать правилам кросс-терминальной адаптации, разрабатывая расширенные компоненты самостоятельно, а стили в компонентах должны соответствовать правилам стиля.

Панель SDK

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

многоязычный

Многоязычность, используемая в шаблоне панели, инкапсулирует многоязычность продукта и многоязычность пользовательского интерфейса и может использоваться непосредственно в бизнесе. Подробную информацию см. в разделе Многоязычность. cn/ray/panel/i18n/i18n). Если эта библиотека не может удовлетворить потребности бизнеса, разработчики могут использовать getLangKey и [getLangContent](https://developer.tuya.tuya. com/cn/ray/api/get-lang-content), чтобы самостоятельно расширить многоязычные решения.

Управление статусом

В шаблоне для управления данными используется jotai. Основные способы использования кратко описаны ниже. Подробную информацию можно найти в официальной документации Jotai.

Определение атома

import { atom } from 'jotai';
import { selectAtom } from 'jotai/utils';
import deepEqual from 'fast-deep-equal';

/**
  * Определите здесь тип DP вашего текущего продукта.
  */
export interface DpState {
  switch: boolean;
}

/**
  * Определить dpStateAtom
  *
  * Первый параметр передается в значении по умолчанию.
  * Как обновить источник данных при передаче второго параметра и получении полезных данных.
  *
  * @docs Подробности см. на https://jotai.org/docs/basics/primitives.
 */
export const dpStateAtom = atom(null as DpState, (get, set, payload: DpState) => {
  set(dpStateAtom, { ...(get(dpStateAtom) || {}), ...payload });
});

/**
  * Определить селектор на основе dpStateAtom.
  *
  * Первый параметр передается в исходных данных атома.
  * Второй параметр передается в селекторе. Селектор соответствует данным, которые необходимо вернуть.
  * Третий параметр передается в EqualFn, чтобы определить, является ли он согласованным, что помогает избежать недопустимого рендеринга и повысить производительность.
  *
  * @docs Подробности см. на https://jotai.org/docs/utils/select-atom.
  */
export const selectDpStateAtom = selectAtom<DpState, DpState>(dpStateAtom, data => data, deepEqual);

Получить данные атома

import { useAtomValue } from 'jotai';
import { dpStateAtom, selectDpStateAtom } from '@/atoms';

const Home = () => {
   const dpState = useAtomValue(selectDpStateAtom);
   ...
}

Изменение данных атома

import { useSetAtom } from 'jotai';

const Home = () => {
   const setDpState = useSetAtom(dpStateAtom);
   ...
   setDpState({ switch: true })
}

Субподрядные возможности

Управление устройствами в рамках Ray, базовые возможности мини-программ, возможности, специфичные для Tuya, и т. д. — все это требует [пакета возможностей] шаблон добавляет четыре основных набора возможностей: BaseKit, TYKit, MiniKit и DeviceKit по умолчанию, и разработчики могут управлять ими в соответствии со своими потребностями. Вы также можете обратиться к [Руководству по интеграции возможностей API] (https://developer.tuya.com/cn/miniapp/api), чтобы настроить его самостоятельно.

Описание зависимости

  • @ray-js/comComponents: перекрестная библиотека базовых компонентов Ray.
  • @ray-js/framework: основной пакет кросс-терминальной платформы Ray.
  • @ray-js/panel-sdk: серия библиотек инструментов, которые могут вам понадобиться при разработке панели управления устройством.
  • fast-deep-equal: библиотека глубокого сравнения объектов, используемая в selectAtom от Jotai для улучшения производительности рендеринга.
  • jotai: библиотека управления состоянием Atomic React.

К приложению:

Назначение байтов DP sensor: Байт 3 CMD(HEX):
01: поиск датчиков 02: удалить этот датчик;
03: Включить игнор данного датчика 04: Отключить игнор данного датчика 05: Включить режим повышенной безопасности для датчика 06: Отключить режим повышенной безопасности (при потере связи более 24 часа или низкий заряд батареи не перекрывать кран) 07: Режим уборки. 0x07000000 - команда включить уборку, 0x07000001 - выключить очистку.

Байт 2 SENSOR_FLAGS Биты: 0 — registr; 1 — online; 2 — leak; 3 — ignore_state - игнор аварийных состояний, 1 - кран не перекрывать от этого датчика. Также в режиме уборки будут все датчики в игноре. 4 - security_mode - режим повышеной безопасности (при потере связи более 24 часа или низкий заряд батареи, перекрывать кран от этого конкретного датчика); 5 - Зарегистрировано аварийное состояние датчика - потеря сигнала, низкий заряд 6 - только для DP 107 7 - бит - кран закрыт по входу FUN - DP 107

Байт 1 Signal: 0 - 100

Байт 0 Battery: 0 - 100

dp 107 0x00SS0000 SS - биты: 0-активирован 1-нет обрыва 2-протечка 3-игнорирование 4-повышенная безопасность 5-датчик с контролем обырва 6 бит - признак внешнего питания 7 бит - кран закрыт по входу FUN

Краткое описание Winner Главный экран: На главном экране указан заряд батареи Winner, включение и выключение крана. При аварии приходит уведомление "Обнаружена протечка!" с номером датчика, где произошла протечка. Кнопка сброса аварии. Присудствует кнопка включения и выключения режима уборки. В настройках 2 счетчика Есть лог событий На вкладке датчики: Количество подключаемых каналов - 32 Проводных датчиков - 10 Датчик стороннего производителя - не ограничено Беспроводных датчиков - 30
Беспроводной датчик имеет: имя датчика, уровень сигнала, уровень заряда батареи. Протечка на датчике - цвет рамки и знак предупреждения красный. Датчик не выходит на связь более 24 часов - цвет рамки и значок связи голубой. Заряд батарейки на датчике красный - аварийное состояние, нужно менять батарейку. Датчик находится в состоянии игнора - цвет рамки серый. Опция «Игнорировать аварию на датчике» есть во всех зонах и имеет максимальный приоритет. Если установлена эта опция, любая аварийная ситуация от датчика не приведёт ни к каким реакциям привода кроме отображения состояние сенсора на экране приложения. При нажатии на датчик появятся настройки, можно удалить, заменить, переименовать имя данного датчика. После удаления, датчик на интерфейсе пропадает. При нажатии кнопки замена, датчик можно заменить на другой датчик с предыдущими настройками. Приложение переведено на русский, английский и китайский язык. Язык устанавливается в зависимотси от настроек телефона.