VueAssetMapКарта инфраструктурных активов для Vue 3

Компонент для сущностей, связей и представлений одного графа, с поиском, фильтрами и трассировкой пути.

Начать

Примеры

GitHub

Одни данные, несколько представлений

Сущности и связи объявляются один раз. Представление оставляет связи, у которых в layers есть его id, поэтому те же данные рисуются и как физическая топология, и как VPN-оверлей.

Поиск, фильтры и трассировка

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

Типы, статусы и подписи — ваши

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

Показать исходник

<script setup lang="ts">
import { ref } from 'vue'
import { AssetMap } from 'vue-asset-map'
import { useSiteTheme } from '../theme/useSiteTheme'
import { useSiteLocale } from '../theme/useSiteLocale'
import { entities, links, views, statusColors, kindIcons } from './fixture'

const view = ref('physical')
const selection = ref<string[]>([])
const theme = useSiteTheme()
const locale = useSiteLocale()
</script>

<template>
  <AssetMap
    v-model:view="view"
    v-model:selection="selection"
    class="demo-map"
    :entities="entities"
    :links="links"
    :views="views"
    :theme="theme"
    :locale="locale"
    :theme-config="{ statusColors, kindIcons }"
    :layout="{ engine: 'radial', options: { rootId: 'internet' } }"
    auto-fit-view
  />
</template>