mixdashboards

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) - 设置是否显示主题切换按钮

更多 API

查看完整 API 文档：API_DOCUMENTATION.md

快速参考：API_QUICK_REFERENCE.md

支持的组件类型

图表类

• 折线图 (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

技术支持

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

Copyright © 2014-2025 Mixlinker Networks Inc. All rights reserved.