optimatica-meters-vue

Vue 3 компонент MeterPhotoAnalyzer — загрузка, камера, отправка и отображение результата распознавания счётчика. Поддерживает несколько фото за один раз (до 10): мультивыбор файлов, drag-and-drop пачкой и дозапись кадров с камеры.

Установка

npm install optimatica-meters-vue optimatica-meters

Peer dependency: Vue ^3.5

Подключение

// main.ts
import { createApp } from 'vue'
import { configureZhkhSdk } from 'optimatica-meters-vue'
import App from './App.vue'

configureZhkhSdk({ apiKey: 'eyJhbGci...' })

createApp(App).mount('#app')

<script setup lang="ts">
import { MeterPhotoAnalyzer } from 'optimatica-meters-vue'
import 'optimatica-meters-vue/style.css'
</script>

<template>
  <MeterPhotoAnalyzer api-key="eyJhbGci..." />
</template>

Vue plugin

import { createZhkhSdkPlugin } from 'optimatica-meters-vue'

app.use(createZhkhSdkPlugin({
  apiKey: 'eyJhbGci...',
}))
// регистрирует глобально <ZhkhMeterPhotoAnalyzer />

Props

| Prop | Тип | По умолчанию | Описание | |------|-----|--------------|----------| | apiKey | string | — | API-ключ (JWT) | | showApiKeyInput | boolean | auto | Поле ввода ключа | | showRawJson | boolean | false | Показать сырой JSON-ответ | | disabled | boolean | false | Отключить UI |

Events

| Event | Payload | |-------|---------| | analyze-start | File (по разу на каждое фото) | | success | { success: true, meter } (по разу на каждый распознанный счётчик) | | error | string | | complete | (response, error) — response только при одном фото | | results | AnalyzeMeterResponse[] — массив результатов по всем фото |

Composable

import { useMeterAnalyze } from 'optimatica-meters-vue'

const { isLoading, response, responses, error, analyze, analyzeMany, reset } =
  useMeterAnalyze()

await analyze(file)            // одно фото
await analyzeMany([f1, f2])    // несколько фото

Стили

import 'optimatica-meters-vue/style.css'

Компонент использует scoped CSS с префиксом zhkh-analyzer__* и CSS-переменными — работает без Tailwind.

Документация

Полная документация и Playground: apps/docs.