mixdashboards

v1.0.30

Published

5 days ago

MixDashboards Display Components - Show, Pro, App

0High
0Medium
0Low

mixment

mixlinker dashboard components vue3

MixDashboards v2

完整的 Vue 3 显示板组件库，支持大屏、显示屏和移动端展示

特性

🎨 三种显示模式: Show（显示屏）、Pro（大屏）、App（移动端）
🔌 完整的 API: 60+ 个 API 方法，全面控制显示板
🎯 事件系统: 16 种事件类型，灵活的事件监听
🌈 主题支持: 亮色/暗色主题，支持自动切换
📡 实时数据: WebSocket 支持，实时数据订阅
🔗 组件通讯: LinkHub 频道通讯机制
🎭 弹窗系统: 灵活的图层弹窗和页面弹窗
📊 丰富组件: 图表、地图、3D 模型等 40+ 种组件

安装

npm install mixdashboards

快速开始

全局注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import MixDashboards from 'mixdashboards'
import 'element-plus/dist/index.css'
import 'mixdashboards/style'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(ElementPlus)
app.use(MixDashboards)
app.mount('#app')

按需引入

import { DesignShow, DesignPro, DesignApp } from 'mixdashboards'
import 'mixdashboards/style'

export default {
  components: {
    DesignShow,
    DesignPro,
    DesignApp
  }
}

使用组件

<template>
  <DesignShow 
    :script="dashboardData" 
    :uid="dashboardId"
    :enableWebSocket="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import { DesignShow } from 'mixdashboards'

const dashboardData = ref({
  sheets: [
    {
      name: '页面1',
      layers: [
        {
          id: 'layer-1',
          name: '图层1',
          visible: true,
          opacity: 100,
          components: [
            // 组件配置...
          ]
        }
      ]
    }
  ],
  type: 'show'
})

const dashboardId = ref('dashboard-001')
</script>

API 使用

基础 API

const dashboard = window.MixDashboard

// 监听就绪事件
dashboard.on('onReady', () => {
  console.log('Dashboard 已就绪')
})

// 切换页签
dashboard.switchSheet(1)

// 显示弹窗
dashboard.showModal({
  layerId: 'layer-detail',
  width: 80,
  height: 60
})

// 更新组件
dashboard.updateComponent('comp-123', {
  data: [{ value: 100, label: '数据' }]
})

// 切换主题
dashboard.toggleTheme()

事件监听

// 监听页签切换
dashboard.on('onSheetChange', (index) => {
  console.log('切换到页签:', index)
})

// 监听主题变化
dashboard.on('onThemeChange', (theme) => {
  console.log('主题已切换:', theme)
})

// 监听组件更新
dashboard.on('onComponentUpdate', (component) => {
  console.log('组件已更新:', component)
})

LinkHub 通讯

// 发布数据
dashboard.publish('sensor-data', {
  temperature: 25.5,
  humidity: 60
})

// 订阅数据
dashboard.subscribe('sensor-data', (data) => {
  console.log('收到数据:', data)
})

组件属性

DesignShow / DesignPro / DesignApp

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | script | Object | - | Dashboard 配置数据（必填） | | uid | String | - | Dashboard 唯一标识 | | enableWebSocket | Boolean | true | 是否启用 WebSocket |

API 方法

生命周期

init(config?) - 初始化
destroy() - 销毁
reload() - 重新加载
isReady() - 检查是否就绪

数据管理

loadDashboard(data) - 加载数据
getDashboard() - 获取数据
refreshData() - 刷新数据
stopSubscription() - 停止订阅
resumeSubscription() - 恢复订阅

页签管理

switchSheet(index) - 切换页签
getCurrentSheet() - 获取当前页签
getSheets() - 获取所有页签
setTabDisplayMode(mode) - 设置页签显示模式
setTabsVisible(visible) - 设置页签可见性

图层管理

getLayers(sheetIndex?) - 获取图层列表
setLayerVisible(layerId, visible) - 设置图层可见性
setLayerOpacity(layerId, opacity) - 设置图层透明度

组件管理

getComponent(id) - 获取组件
getAllComponents() - 获取所有组件
updateComponent(id, data) - 更新组件
setComponentVisible(id, visible) - 设置组件可见性
triggerComponentEvent(id, eventType) - 触发组件事件

弹窗管理

showModal(options) - 显示弹窗
hideModal() - 隐藏弹窗
toggleModal(options) - 切换弹窗
isModalVisible() - 检查弹窗是否可见

主题管理

setTheme(theme) - 设置主题
getTheme() - 获取主题
toggleTheme() - 切换主题
setDefaultTheme(theme) - 设置默认主题
setShowThemeToggle(show) - 设置是否显示主题切换按钮

支持的组件类型

图表类

折线图 (lin)
柱状图 (bar)
饼图 (pie)
雷达图 (rad)
仪表盘 (gag)
桑基图 (sankey)

数据展示

卡片 (crd, vlu, evn)
列表 (lst, grd)
表格 (gridview)

地图类

基础地图 (bmp)
中国地图 (cmp)

3D 模型

GLB 模型 (glbModel)

媒体类

图片 (photo)
视频 (video)
音频 (audio)

其他

文本框 (textbox)
时钟 (clock)
日期时间 (datetime)
二维码 (qrcode)
轮播图 (swiper)

浏览器支持

Chrome >= 90
Firefox >= 88
Safari >= 14
Edge >= 90

依赖要求

Peer Dependencies

Vue 3.4+
Pinia 2.0+ 或 3.0+
Element Plus 2.0+

可选依赖

html2canvas - 截图功能（需要时安装）

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 类型检查
npm run type-check

# 构建
npm run build

许可证

MIT

技术支持

如有问题或建议，请联系技术支持团队。