唯杰地图 logo唯杰地图
VJMAP
EN

main.js

vjvp/templates/vite-app/src/main.js 1.7 KB41 行
原文
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);