energy-mini.vp.tsx

/** @jsx h */
/** @jsxFrag Fragment */
/**
 * VP-TSX 示例 —— 能源监控 mini 大屏（科技蓝）。
 *
 * 演示三个核心红利：
 * 1. 类型即时纠错：属性名/枚举来自 types.generated.ts（schema 同源），臆造即编译报错；
 * 2. 循环消重复：4 张 KPI 卡是一个 map()，不是 4 段复制粘贴的 JSON；
 * 3. 常量复用：配色 token 一处声明。
 *
 * 产出链（在 vjvp/ 所在目录执行）：
 *   pnpm exec tsc -p vjvp/scripts/vptsx/tsconfig.json
 *   pnpm exec tsx vjvp/scripts/vptsx/compile.mts \
 *     vjvp/scripts/vptsx/examples/energy-mini.vp.tsx
 */
import { bind, defineProject, h, jsonConnection } from '../runtime'

// —— 配色 token（科技蓝套系，见 SKILL.md 科技感视觉规范） ——
const GLOW = '#00E5FF'
const ACCENT = '#38BDF8'
const TEXT_DIM = '#7FA8D9'
const PANEL_BG = 'linear-gradient(160deg,rgba(10,28,56,0.72),rgba(5,16,36,0.78))'
const PANEL_BORDER = '#14335F'

// —— 数据：内联 json 连接（字段 uid = 列名） ——
const CONN = 'conn_energy'
const TBL = 'tbl_month'
const energy = jsonConnection({
  uid: CONN,
  name: '能耗数据',
  table: {
    uid: TBL,
    name: '月度能耗',
    fields: [
      { uid: '月份', alias: '月份', type: 'string' },
      { uid: '能耗', alias: '能耗', type: 'number' },
    ],
  },
  rows: [
    { 月份: '一月', 能耗: 320 },
    { 月份: '二月', 能耗: 286 },
    { 月份: '三月', 能耗: 341 },
    { 月份: '四月', 能耗: 305 },
    { 月份: '五月', 能耗: 372 },
    { 月份: '六月', 能耗: 398 },
  ],
})

const KPIS = [
  { name: '总能耗', value: 12680, unit: 'kWh', color: GLOW },
  { name: '光伏出力', value: 4210, unit: 'kW', color: ACCENT },
  { name: '负载率', value: 76.4, unit: '%', color: '#2E8BFF' },
  { name: '告警数', value: 3, unit: '条', color: '#FBBF24' },
]

export default defineProject({
  name: '能源监控 mini（VP-TSX 示例）',
  connections: [energy.connection],
  connectionData: { ...energy.connectionData },
  screen: (
    <screen
      uid="screen_main"
      name="主页面"
      layout-profile="canvas-scale"
      fullscreen-mode="fill-uniform" fill-auto-expand={true}
      size={[1920, 1080]}
      background-color="linear-gradient(180deg,#020A18 0%,#081A38 55%,#04101F 100%)"
    >
      {/* 页面顶部辉光（纯装饰一律 no-events） */}
      <basic-graphical
        name="顶部辉光"
        position={[0, 0]}
        size={[1920, 200]}
        shape="rect"
        graphical-color="linear-gradient(180deg,rgba(0,229,255,0.14),rgba(0,229,255,0))"
        border={false}
        no-events={true}
      />

      {/* 顶栏：渐变发光标题 + 光带 + 实时时间 */}
      <basic-text
        name="标题"
        position={[560, 24]}
        size={[800, 64]}
        text="能源监控指挥中心"
        text-position="center"
        text-font={{ size: 40, bold: true, color: 'linear-gradient(90deg,#7DE3FF,#2E8BFF)' }}
        font-shadow-color={GLOW}
        font-shadow-blur={18}
        font-spacing={6}
      />
      <basic-graphical
        name="标题光带"
        position={[560, 94]}
        size={[800, 2]}
        shape="rect"
        graphical-color="linear-gradient(90deg,rgba(0,229,255,0) 0%,rgba(0,229,255,0.85) 50%,rgba(0,229,255,0) 100%)"
        border={false}
        no-events={true}
      />
      <basic-timer
        name="实时时间"
        position={[1560, 36]}
        size={[330, 40]}
        time-format="YYYY-MM-DD HH:mm:ss"
        show-weekday={true}
      />

      {/* KPI 行：一个 map() 而非 4 段重复 JSON */}
      {KPIS.map((k, i) => (
        <basic-card
          uid={`kpi-${i + 1}`}
          name={k.name}
          position={[120 + i * 430, 140]}
          size={[400, 120]}
          static-value={k.value}
          unit-text={k.unit}
          background-color="rgba(8,24,56,0.65)"
          border-style="solid"
          border-color={PANEL_BORDER}
          border-width={1}
          border-radius={10}
          text-font={{ size: 40, bold: true, color: k.color }}
          unit-font={{ size: 14, color: TEXT_DIM }}
        />
      ))}

      {/* 左面板：柱状图绑定 json 连接（bind 产出 [[conn,tbl,field]] 三元组） */}
      <group-panel
        name="月度能耗面板"
        position={[120, 320]}
        size={[860, 640]}
        background={true}
        background-color={PANEL_BG}
        border={true}
        border-color={PANEL_BORDER}
        border-width={1}
        border-radius={12}
      >
        <basic-text
          position={[24, 18]}
          size={[300, 30]}
          text="月度能耗"
          text-font={{ size: 18, bold: true, color: '#7DD3FC' }}
        />
        <chart-bar
          name="月度能耗柱图"
          position={[20, 64]}
          size={[820, 550]}
          title-show={false}
          category-field={bind(CONN, TBL, '月份')}
          metric-fields={bind(CONN, TBL, '能耗')}
          bar-color={GLOW}
          bar-radius={5}
          show-label={true}
          show-legend={false}
        />
      </group-panel>

      {/* 右面板：折线走内置演示数据（无绑定） */}
      <group-panel
        name="负载趋势面板"
        position={[1010, 320]}
        size={[790, 640]}
        background={true}
        background-color={PANEL_BG}
        border={true}
        border-color={PANEL_BORDER}
        border-width={1}
        border-radius={12}
      >
        <basic-text
          position={[24, 18]}
          size={[300, 30]}
          text="负载趋势"
          text-font={{ size: 18, bold: true, color: '#7DD3FC' }}
        />
        <chart-line
          name="负载趋势折线"
          position={[20, 64]}
          size={[750, 550]}
          title-show={false}
          smooth={true}
          show-symbol={false}
          show-area={true}
          area-opacity={28}
          line-color={ACCENT}
          show-legend={false}
        />
      </group-panel>
    </screen>
  ),
})