入门 Web HMI：用 Vue3 + TypeScript 做一个实时设备状态页

为什么工控人要学 Web HMI

传统桌面上位机要安装、难跨平台、更新麻烦。Web HMI 用浏览器打开，电脑、平板、手机都能看，部署即更新，是监控系统展示层的明确方向。Vue3 + TypeScript 对有编程基础的工控工程师并不难。

技术栈分工（先消除术语恐惧）

Vite：开发构建工具，负责本地热更新和打包，不用深究
Vue3：把数据和界面绑定，数据变界面自动变
TypeScript：带类型的 JavaScript，大型项目更不容易出错
实时数据通过 WebSocket 或定时 HTTP 轮询从后端拿

最小页面思路

后端提供 /api/devices 返回设备实时状态（或 WebSocket 推送）
前端定义设备数据类型（TypeScript interface）
页面用 v-for 渲染设备卡片，绑定状态和数值
定时刷新数据，状态变化自动反映到界面

<script setup lang="ts">
import { ref, onMounted } from 'vue'
interface Device { name: string; state: string; temperature: number }
const devices = ref<Device[]>([])
async function load() {
  const r = await fetch('/api/devices')
  devices.value = await r.json()
}
onMounted(() => { load(); setInterval(load, 2000) })
</script>

<template>
  <div v-for="d in devices" :key="d.name" class="device" :data-state="d.state">
    <span>{{ d.name }}</span>
    <span>{{ d.temperature }}℃</span>
  </div>
</template>

状态颜色用 CSS 类控制

.device[data-state="run"] { background:#eafaf1; }
.device[data-state="fault"] { background:#fdecea; }
.device[data-state="offline"] { background:#f1f5f9; color:#94a3b8; }

实时性：轮询还是 WebSocket

点位少、秒级刷新：定时轮询简单可靠
点位多、要毫秒级变化：用 WebSocket，后端推、前端收
工业现场内网环境，两种都可行，先用轮询跑通再升级

学习路径建议

先用 Vite 建 Vue3 项目，跑通静态页面
用假数据（Mock）渲染设备列表和状态颜色
接真实接口，替换假数据
加曲线图（ECharts）、报警列表、登录权限

工控工程师学 Web HMI 的最大优势是懂业务、懂数据，前端语法反而是最容易补的一环。