feat: 实现自助BI看板功能，支持Superset/Metabase集成

- 新增BI模块(src/bi/)，包含数据模型、服务和控制器 - 支持数据源管理、图表创建、看板配置 - 实现多图表类型：折线图、柱状图、饼图、散点图、面积图、仪表盘、表格 - 提供REST API(/bi/)和前端API(/bi-api/)接口 - 创建响应式前端界面，支持拖拽和实时数据展示 - 默认包含运营总览、设备管理、安全监控看板 - 支持与Superset和Metabase集成 🤖 Generated with [OpenClaw](https://github.com/robocomp/openclaw)
2026-06-15 12:29:34 +08:00
parent 5eae031679
commit 61acfd8f8b
11 changed files with 2689 additions and 0 deletions
@@ -0,0 +1,267 @@
+/**
+ * API 封装模块
+ * 提供与后端API的交互功能
+ */
+
+class BIAPIClient {
+    constructor(baseURL = '') {
+        this.baseURL = baseURL || window.location.origin;
+    }
+
+    // 通用请求方法
+    async request(endpoint, options = {}) {
+        const url = `${this.baseURL}${endpoint}`;
+        const defaultOptions = {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            ...options,
+        };
+
+        try {
+            const response = await fetch(url, defaultOptions);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('API请求失败:', error);
+            throw error;
+        }
+    }
+
+    // GET请求
+    async get(endpoint, params = {}) {
+        const url = new URL(`${this.baseURL}${endpoint}`, window.location.origin);
+        
+        Object.keys(params).forEach(key => {
+            if (params[key] !== undefined && params[key] !== null) {
+                url.searchParams.append(key, params[key]);
+            }
+        });
+
+        return this.request(url.pathname + url.search);
+    }
+
+    // POST请求
+    async post(endpoint, data = {}) {
+        return this.request(endpoint, {
+            method: 'POST',
+            body: JSON.stringify(data),
+        });
+    }
+
+    // PUT请求
+    async put(endpoint, data = {}) {
+        return this.request(endpoint, {
+            method: 'PUT',
+            body: JSON.stringify(data),
+        });
+    }
+
+    // DELETE请求
+    async delete(endpoint) {
+        return this.request(endpoint, {
+            method: 'DELETE',
+        });
+    }
+
+    // BI相关API
+    async getOverviewDashboards() {
+        return this.get('/bi-api/dashboards/overview');
+    }
+
+    async getDashboardData(dashboardId) {
+        return this.get(`/bi-api/dashboards/${dashboardId}/data`);
+    }
+
+    async getChartData(chartId) {
+        return this.get(`/bi-api/charts/${chartId}/data`);
+    }
+
+    async searchBIObjects(keyword) {
+        return this.get('/bi-api/search', { keyword });
+    }
+
+    async getChartTypes() {
+        return this.get('/bi-api/charts/types');
+    }
+
+    async getDataSourceTypes() {
+        return this.get('/bi-api/data-sources/types');
+    }
+
+    async getPopularTags() {
+        return this.get('/bi-api/popular-tags');
+    }
+
+    async getQuickStats() {
+        return this.get('/bi-api/quick-stats');
+    }
+
+    async getChartSuggestions() {
+        return this.get('/bi-api/chart-suggestions');
+    }
+}
+
+// 创建全局API客户端实例
+const apiClient = new BIAPIClient();
+
+/**
+ * 数据获取函数
+ */
+
+// 获取概览看板列表
+export async function getDashboards() {
+    try {
+        return await apiClient.getOverviewDashboards();
+    } catch (error) {
+        console.error('获取看板列表失败:', error);
+        throw error;
+    }
+}
+
+// 获取看板详细数据
+export async function getDashboardDetail(dashboardId) {
+    try {
+        return await apiClient.getDashboardData(dashboardId);
+    } catch (error) {
+        console.error(`获取看板 ${dashboardId} 数据失败:`, error);
+        throw error;
+    }
+}
+
+// 获取图表数据
+export async function getChartData(chartId) {
+    try {
+        return await apiClient.getChartData(chartId);
+    } catch (error) {
+        console.error(`获取图表 ${chartId} 数据失败:`, error);
+        throw error;
+    }
+}
+
+// 搜索BI对象
+export async function searchBIObjects(keyword) {
+    try {
+        return await apiClient.searchBIObjects(keyword);
+    } catch (error) {
+        console.error(`搜索 ${keyword} 失败:`, error);
+        throw error;
+    }
+}
+
+// 获取支持的图表类型
+export async function getChartTypes() {
+    try {
+        return await apiClient.getChartTypes();
+    } catch (error) {
+        console.error('获取图表类型失败:', error);
+        throw error;
+    }
+}
+
+// 获取支持的数据源类型
+export async function getDataSourceTypes() {
+    try {
+        return await apiClient.getDataSourceTypes();
+    } catch (error) {
+        console.error('获取数据源类型失败:', error);
+        throw error;
+    }
+}
+
+// 获取热门标签
+export async function getPopularTags() {
+    try {
+        return await apiClient.getPopularTags();
+    } catch (error) {
+        console.error('获取热门标签失败:', error);
+        throw error;
+    }
+}
+
+// 获取快速统计信息
+export async function getQuickStats() {
+    try {
+        return await apiClient.getQuickStats();
+    } catch (error) {
+        console.error('获取快速统计失败:', error);
+        throw error;
+    }
+}
+
+// 获取图表建议
+export async function getChartSuggestions() {
+    try {
+        return await apiClient.getChartSuggestions();
+    } catch (error) {
+        console.error('获取图表建议失败:', error);
+        throw error;
+    }
+}
+
+/**
+ * 工具函数
+ */
+
+// 格式化日期
+export function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+// 格式化数字
+export function formatNumber(num, decimals = 2) {
+    return parseFloat(num).toFixed(decimals);
+}
+
+// 显示加载状态
+export function showLoading(element) {
+    element.innerHTML = '<div class="loading">加载中...</div>';
+}
+
+// 显示错误状态
+export function showError(element, message) {
+    element.innerHTML = `<div class="error">${message}</div>`;
+}
+
+// 显示空状态
+export function showEmpty(element, message = '暂无数据') {
+    element.innerHTML = `<div class="empty">${message}</div>`;
+}
+
+// 防抖函数
+export function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// 节流函数
+export function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    };
+}