唯杰地图 logo唯杰地图
VJMAP
EN

postmessage-linkage.vp.tsx

vjvp/examples/postmessage-linkage.vp.tsx 3.8 KB144 行
原文
/** @jsx h */
// AUTO-GENERATED by export-examples-tsx —— 由同名 .vpproj.json 导出的 VP-TSX 配对视图(已回编译等值验证)。
// 修改请改 JSON 后重跑导出脚本,或改本文件后用 compile.mts 重编 JSON——保持两者一致。
import { defineProject, h } from '../scripts/vptsx/runtime'

export default defineProject({
  name: "数据交互(联动)",
  connections: [
    {
      "uid": "conn_pm",
      "name": "PostMessage数据源",
      "type": "postMessage",
      "connectorType": "postMessage",
      "config": {
        "linkId": "link_demo",
        "responseMode": "实时更新"
      },
      "tables": [
        {
          "uid": "tbl_pm",
          "name": "data",
          "eventName": "data",
          "eventParams": "",
          "fields": [
            {
              "uid": "f_month",
              "sourceField": "month",
              "alias": "month",
              "type": "string"
            },
            {
              "uid": "f_sales",
              "sourceField": "sales",
              "alias": "sales",
              "type": "number"
            },
            {
              "uid": "f_profit",
              "sourceField": "profit",
              "alias": "profit",
              "type": "number"
            }
          ]
        }
      ]
    }
  ],
  connectionData: {
    "conn_pm": [
      {
        "tableId": "tbl_pm",
        "tableName": "data",
        "fields": [
          {
            "uid": "f_month",
            "sourceField": "month",
            "alias": "month",
            "type": "string"
          },
          {
            "uid": "f_sales",
            "sourceField": "sales",
            "alias": "sales",
            "type": "number"
          },
          {
            "uid": "f_profit",
            "sourceField": "profit",
            "alias": "profit",
            "type": "number"
          }
        ],
        "rows": [
          {
            "f_month": "一月",
            "f_sales": 16000,
            "f_profit": 110
          },
          {
            "f_month": "二月",
            "f_sales": 19000,
            "f_profit": 230
          },
          {
            "f_month": "三月",
            "f_sales": 15000,
            "f_profit": 340
          }
        ]
      }
    ]
  },
  screen: (
    <screen
      uid={"screen_main"}
      name={"主页面"}
      fullscreen-mode={"fill-uniform"} fill-auto-expand={true}
      size={[1920,1080]}
      background-color={"#0c0d0e"}
      cross-filter-receive={true}
      select-sync-receive={true}
      stateOverrides={{}}
    >
      <chart-pie
        uid={"w_pie"}
        position={[208,190]}
        size={[420,320]}
        cross-filter-emit={true}
        select-sync-emit={true}
        category={[["conn_pm","tbl_pm","f_month"]]}
        value={[["conn_pm","tbl_pm","f_sales"]]}
        stateOverrides={{}}
      />
      <chart-bar
        uid={"w_bar"}
        position={[1209,206]}
        size={[420,300]}
        cross-filter-receive={true}
        select-sync-receive={true}
        category-field={[["conn_pm","tbl_pm","f_month"]]}
        metric-fields={[["conn_pm","tbl_pm","f_sales"],["conn_pm","tbl_pm","f_profit"]]}
        stateOverrides={{}}
      />
      <basic-table
        uid={"w_table"}
        position={[1177,597]}
        size={[480,320]}
        select-sync-receive={true}
        table-data-fields={[["conn_pm","tbl_pm","f_month"],["conn_pm","tbl_pm","f_sales"],["conn_pm","tbl_pm","f_profit"]]}
        select-sync-fields={[["conn_pm","tbl_pm","f_month"]]}
        stateOverrides={{}}
      />
      <basic-text
        uid={"w_text"}
        position={[311,744]}
        size={[300,60]}
        text={"文本"}
        value-field={[["conn_pm","tbl_pm","f_month"]]}
        stateOverrides={{}}
      />
    </screen>
  ),
})