HomeAssistant 中使用 Vue 构建UI面板的简易方式

一种简易的对 HomeAssistant 进行 UI 自定义的方式

网站网页

文

发布于

本文导览

发布于约2分钟

HomeAssistant 中使用 Vue 构建UI面板的简易方式

今天在 Home Assistant Developer Docs 中看到了一篇关于如何新建侧边栏项目，以及对应的面板内容的教程。教程中使用了 wired-card ，并提示说可以使用任何想用的框架，我便立马想到了 Vue 。

示例代码中给了一些可用的变量，包括：

static get properties() {
    return {
      hass: { type: Object },
      narrow: { type: Boolean },
      route: { type: Object },
      panel: { type: Object },
    };
  }

其中 hass 就是 HomeAssistant 的实例，narrow 是当前页面是否处于窄屏状态，route 是当前页面的路由信息，panel 是当前页面的信息。

其中当前页面信息可以在 configuration.yaml 中进行配置。

官方的代码我就不重复了，下面直接贴出我的基于 Vue 框架的代码, 可以在此基础上自由发挥。

面板模块代码

新建<config>/www/XXPanel.js, <config>指代的是你的HA的配置目录，你要你安装过 HACS 中的lovelace插件，一般也默认会有 www 文件夹了，如果没有就手动新建下，XXPanel.js文件内容如下：

import { createApp, ref, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

// custom_panel.js
const CustomPanel = {
  template: `
    <ha-card header="环境监测">
      <div class="card-content">
        <p>温度: {{ temperature }}°C</p>
        <p>湿度: {{ humidity }}%</p>
        <button @click="updateSensors" :disabled="isLoading">
          {{ isLoading ? '加载中...' : '刷新数据' }}
        </button>
      </div>
    </ha-card>
  `,
  data: () => ({
    temperature: 0,
    humidity: 0,
    isLoading: false
  }),
  methods: {
    async updateSensors() {
      this.isLoading = true;
      const [temp, hum] = await Promise.all([
        this.$hass.states['sensor.temperature'].state,
        this.$hass.states['sensor.relative_humidity'].state
      ]);
      this.temperature = temp;
      this.humidity = hum;
      this.isLoading = false;
    }
  },
  mounted() {
    nextTick(()=>{
      console.log(this.$hass)
      this.updateSensors();
      this.interval = setInterval(this.updateSensors, 60000);
    })
  },
  beforeUnmount() {
    clearInterval(this.interval);
  }
};
  
// 注册自定义元素
customElements.define('xx-panel', class extends HTMLElement {
    set hass(hass) {
      if (!this._panel) {
        this._panel = createApp(CustomPanel).mount(this);
      }
      this._panel.$hass = hass;
    }
});

这里在 mounted 钩子函数中，获取了 HomeAssistant 的实例，然后使用 this.$hass.states['sensor.temperature'].state 来获取温度传感器的值。另外使用了 beforeUnmount 钩子函数，在组件卸载时清除定时器，防止内存泄漏。

修改配置文件

在 configuration.yaml 文件中添加以下内容：

panel_custom:
  - name: xx-panel
    # url_path needs to be unique for each panel_custom config
    url_path: xx-panel
    sidebar_title: XXPanel
    sidebar_icon: mdi:server
    module_url: /local/XXPanel.js
    config:
      # Data you want to make available to panel
      hello: world

其中注意 name 字段，这个字段就是你在自定义元素中注册的名称，也就是 customElements.define('xx-panel', ...) 中的 xx-panel。

最后重启 HA 即可。