main.js
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);