conditional-style.vp.tsx

/** @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_status",
      "name": "设备状态",
      "type": "json",
      "connectorType": "json",
      "config": {
        "copyToRoot": true,
        "fileName": ""
      },
      "tables": [
        {
          "uid": "tbl_status",
          "name": "设备状态",
          "fields": [
            {
              "uid": "设备",
              "alias": "设备",
              "type": "string"
            },
            {
              "uid": "状态值",
              "alias": "状态值",
              "type": "number"
            }
          ]
        }
      ]
    }
  ],
  connectionData: {
    "conn_status": [
      {
        "tableId": "tbl_status",
        "tableName": "设备状态",
        "fields": [
          {
            "uid": "设备",
            "alias": "设备",
            "type": "string"
          },
          {
            "uid": "状态值",
            "alias": "状态值",
            "type": "number"
          }
        ],
        "rows": [
          {
            "设备": "泵站 1",
            "状态值": 1
          },
          {
            "设备": "泵站 2",
            "状态值": 0
          },
          {
            "设备": "泵站 3",
            "状态值": 0
          }
        ]
      }
    ]
  },
  dataRules: [
    {
      "uid": "dc_alarm",
      "name": "存在告警(状态值=1)",
      "rules": [
        [
          {
            "connection": "conn_status",
            "table": "tbl_status",
            "field": "状态值",
            "func": "=",
            "args": 1,
            "method": "some"
          }
        ]
      ]
    }
  ],
  screen: (
    <screen
      uid={"screen_main"}
      name={"主页面"}
      fullscreen-mode={"fill-uniform"} fill-auto-expand={true}
      size={[1920,1080]}
      background-color={"#0c0d0e"}
      stateOverrides={{}}
    >
      <basic-text
        uid={"w_title"}
        position={[140,70]}
        size={[1300,60]}
        text={"条件样式：当「状态值=1」命中告警条件，标题变红，否则变绿"}
        text-font={{"size":28,"color":"#ffffff"}}
        text-position={"left"}
        stateOverrides={{}}
      />
      <basic-text
        uid={"w_status"}
        name={"状态标题(条件样式)"}
        position={[140,220]}
        size={[700,120]}
        text={"设备运行状态"}
        text-font={{"size":64,"color":"#ffffff"}}
        text-position={"center"}
        conditionalStyles={[{"paths":["text-font"],"cases":[{"ruleId":"dc_alarm","value":{"size":64,"color":"#ff4d4f"}},{"fallback":true,"value":{"size":64,"color":"#52c41a"}}]}]}
        stateOverrides={{}}
      />
      <basic-table
        uid={"w_table"}
        name={"设备状态明细"}
        position={[140,380]}
        size={[700,320]}
        row-count={5}
        table-data-fields={[["conn_status","tbl_status","设备"],["conn_status","tbl_status","状态值"]]}
        stateOverrides={{}}
      />
    </screen>
  ),
})