import { createVpViewer } from "vjvpsdk"; import "vjvpsdk/vp-runtime.css"; // exports 暴露的子路径;vjvpsdk/dist/... 会被 exports 封装挡住 async function main() { // 工程 body:编辑器"导出工程"得到的 .vpproj.json(顶层 { project, connections, connectionData, dataRules }) const body = await (await fetch("/dashboards/demo.vpproj.json")).json(); const ctx = createVpViewer("#app", body, { params: { theme: "dark" }, // 「导出工程」的 .vpproj.json 是精简形态(connectionData 省略 tableName/fields),SDK 不补齐, // 直挂会让柱/线/双轴图抛 TypeError;挂载前从 connections 补齐(完整 body 上为空操作) transformData(b) { for (const c of b.connections ?? []) for (const t of c.tables ?? []) { const d = b.connectionData?.[c.uid]?.find((x) => x.tableId === t.uid); if (d) { d.tableName ??= t.name; d.fields ??= t.fields; } } }, onReady(ctx) { console.log("vp ready, screens:", ctx.screens.length); // 推数示例:每 5 秒刷新 conn_demo/tbl_demo(换成你的连接 uid / 表 id) // setInterval(async () => { // const rows = await (await fetch("/api/rows")).json(); // ctx.setData("conn_demo", "tbl_demo", rows); // }, 5000); // 大屏「发送行为事件」→ 宿主 // ctx.on("open-detail", (_e, payload) => console.log(payload)); // 程序化改组件 // ctx.getWidget("kpi_total")?.setOption("unit-text", "万元"); }, }); // 热更新/销毁时清理 if (import.meta.hot) import.meta.hot.dispose(() => ctx.destroy()); } // vite 默认构建 target 不支持顶层 await,包一层 async main main().catch(console.error);