ThingsBoard フロントエンド プロジェクトの組み込みコンポーネント開発

ThingsBoard は現在、Github 上で最も人気のあるオープンソース IoT プラットフォーム (12.8k Star) であり、IoT プロジェクトの迅速な開発、管理、拡張を実現でき、中小企業および零細企業向けの IoT プラットフォームとして最適です。

この記事では、ThingsBoard フロントエンド プロジェクトで組み込みのメニュー ナビゲーション ウィジェットを開発する方法を紹介します。

内蔵関連コンポーネント

TB (ThingsBoard 略称、以下同じ) には、システムのフロントエンドに日付範囲選択コンポーネントなどの 30 以上の組み込みコンポーネントがあります。

対応するコードは、フロントエンド プロジェクト ファイル
:に保存されますthingsboard\ui-ngx\src\app\modules\home\components\widget\lib\date-range-navigator。

TB バックグラウンドは 14 種類のコンポーネント パッケージ (コンポーネント コレクションの 1 種類で、それ以上のコンポーネントは追加できません) を指定し、バックグラウンド インターフェイスはコードの
保存場所を返しますthingsboard\application\src\main\data\json\system\widget_bundles。

対応する TB フロントエンド コンポーネント パッケージ インターフェイスのリスト:

setting ダッシュボード内のコンポーネントの場合、編集時の詳細オプションは、日付範囲選択コンポーネントの詳細コンテンツに対応するファイルなど、コンポーネントのファイルに対応します thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\settings\date\date-range-navigator-widget-settings.component.ts。

もちろん、この記事ではコンポーネントの詳細設定機能については触れませんので、今後関連記事が公開される可能性があります。

コンポーネントの実装

まず日付範囲ウィジェットを見てみましょう。

TB のフロントエンドにはコンポーネントが組み込まれており tb-date-range-navigator-widget 、そのコンポーネントの機能はコンポーネント セレクターを呼び出すことで直接実現されるため、メニュー ナビゲーション コンポーネントを開発する際には、まず対応するコンポーネントを開発する必要があることがわかります。

メニューナビゲーションコンポーネント

メニュー ナビゲーション コンポーネントを選択するときに落とし穴に落ちました。選択した Lauiui メニュー ナビゲーションが TB フロントエンド プロジェクトに導入され、スタイルは問題ないことがわかりましたが、クリックしても展開されず効果が折りたたまれませんでした。諦めること。もちろん、layuiが悪いというわけではなく、layuiは非常に丁寧なフロントエンドコンポーネントであり、私が開発しているブログテーマもlayuiを使用しています。

その後、Angular によって実装されたバージョンに対応する Ant Design コンポーネント ライブラリと ng-zorro-antd、その中のメニュー ナビゲーション コンポーネント リンクを選択しました。

Angular が Ant を導入

TB フロントエンド プロジェクトは Angular v12 のバージョンを使用するため、対応する ng-zorro-antd バージョンを v12.1.1 として選択する必要があります。バージョンが高すぎる場合は、インストール後にエラーが報告されます。インストール コマンド:

yarn add [email protected] --save

 

angular.json ファイルに CSS スタイルとアイコン リソースを導入します。

"styles": [
             "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
          ],
"assets": [
            {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
            }
        ],

 

組み込みの作成

メニュー ナビゲーション コンポーネント、 \thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\ ディレクトリ内に作成した 関連ファイルを作成しますmenu 。

|menu
| -- menu.component.html
| -- menu.component.scss
| -- menu.component.ts
| -- menu.model.ts

 

menu.component.html メニュー ナビゲーションの例がドキュメントで使用されています ng-zorro-antd 。

<ul nz-menu nzMode="inline">
  <li nz-submenu nzTitle="Navigation One" nzIcon="mail" nzOpen>
    <ul>
      <li nz-menu-group nzTitle="Item 1">
        <ul>
          <li nz-menu-item nzSelected>Option 1</li>
          <li nz-menu-item>Option 2</li>
        </ul>
      </li>
      <li nz-menu-group nzTitle="Item 2">
        <ul>
          <li nz-menu-item>Option 3</li>
          <li nz-menu-item>Option 4</li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
    <ul>
      <li nz-menu-item>Option 5</li>
      <li nz-menu-item>Option 6</li>
      <li nz-submenu nzTitle="Submenu">
        <ul>
          <li nz-menu-item>Option 7</li>
          <li nz-menu-item>Option 8</li>
          <li nz-submenu nzTitle="Submenu">
            <ul>
              <li nz-menu-item>Option 9</li>
              <li nz-menu-item>Option 10</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
    <ul>
      <li nz-menu-item>Option 11</li>
      <li nz-menu-item>Option 12</li>
      <li nz-menu-item>Option 13</li>
    </ul>
  </li>
</ul>

menu.component.ts ファイル内に tb-menu-widget コンポーネント セレクターを作成します。

import { Component } from '@angular/core';
import { WidgetContext } from '@home/models/widget-component.models';
 
@Component({
  selector: 'tb-menu-widget',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
 
export class MenuComponent {
  ctx: WidgetContext;
  constructor() {
  }
}

 

menu.models.ts このファイルはエクスポートされたコンポーネントを宣言し MenuComponent、 ng-zorro-antd メニューとアイコンのモジュール NzMenuModule を インポートしますNzIconModule。

import { NgModule } from '@angular/core';
import { MenuComponent } from '@home/components/widget/lib/menu/menu.component';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzIconModule } from 'ng-zorro-antd/icon';
 
@NgModule({
  declarations:
    [
      MenuComponent
    ],
  imports: [
    NzMenuModule,
    NzIconModule
  ],
  exports: [
    MenuComponent
  ]
})
 
export class MenuModule {}

 

注: 公式 Web サイトの方法では、 コンポーネント モジュールapp.module.ts をルート モジュールに導入すると ng-zorro-antd 有効になりますが、TB プロジェクトでは有効になりません。テスト後、 ng-zorro-antd コンポーネント モジュールをルート モジュールに導入した場合にのみ有効になります。特定のコンポーネント。

最後に、  ファイル内のモジュールをwidget-components.module.ts インポートおよびエクスポートして 有効にすることを忘れないでください。MenuModule

import { MenuModule } from '@home/components/widget/lib/menu/menu.models';
 
@NgModule({
    imports: [
        MenuModule
      ],
    exports: [
        MenuModule
    ]
})

 

最後に、TB Web サイトのコンポーネント パッケージにコンポーネントを追加し、コンポーネント を呼び出して 、コンポーネント ライブラリのメニュー ナビゲーションtb-menu-widget を正常に導入します ng-zooro-antd 。

エピローグ

結核の読者は非常に少ないため、結核について勉強したことがなく、この記事を理解できないのは普通のことです - - 読み飛ばしてください。結核関連の記事は私の仕事上の知識の記録としての役割を果たします。そうすればさらに良いでしょう少数の人々を助けることができるかもしれません~