ThingsPanel 从 v1.1.14 跨到 v1.1.15，改动集中在两个高频场景：把 ThingsVis 可视化组件嵌入到自己的业务系统里，以及在设备详情页上做日常运维。如果你做过 IoT 项目交付，大概率在这两个地方反复踩坑——嵌入时 iframe 尺寸对不上、权限透传断裂、设备详情页跳转层级太深。这次更新直接瞄准这些痛点。
ThingsVis 嵌入：从"能用"到"好用"
此前 ThingsVis 的嵌入方案基本是"给你一个 iframe 地址，剩下的自己搞定"。实际集成时，几个问题反复出现：
- 尺寸适配：iframe 内的可视化面板不会自动跟随外部容器宽高变化，缩放后图表要么溢出要么留大片空白。
- 权限透传：外部系统已登录的用户打开嵌入页面，还要再走一遍 ThingsPanel 的登录流程，交付时体验割裂。
- 事件通信：嵌入页面里的点击、筛选等交互，外部系统拿不到，想做联动只能硬编码。
v1.1.15 对这几个环节做了针对性改进。嵌入时支持通过 URL 参数直接传入 token，跳过二次登录；可视化面板增加了响应式布局，监听容器 resize 事件后自动重绘；同时暴露了 postMessage 事件通道，外部页面可以订阅图表内部的交互信号。
嵌入示例：把设备实时曲线嵌入到运维大屏
下面是一个最小可运行的嵌入示例，假设你已经部署了 ThingsPanel v1.1.15 并拿到了 API token：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>运维大屏 - 设备实时曲线</title>
<style>
/* 关键：容器必须有明确尺寸，ThingsVis 才能正确响应式重绘 */
.chart-container {
width: 100%;
height: 420px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>车间温湿度实时监控</h2>
<!-- 嵌入 ThingsVis 可视化面板 -->
<div class="chart-container">
<iframe
id="thingsvis-frame"
src=""
allow="clipboard-write"
style="width:100%;height:100%;border:none;"
></iframe>
</div>
<div id="event-log" style="margin-top:12px;font-size:14px;color:#555;">
交互事件日志：
</div>
<script>
// ====== 配置区 ======
const THINGS_PANEL_HOST = 'http://your-thingspanel-host:8080';
const DEVICE_ID = 'your-device-id';
const TOKEN = 'your-api-token'; // 从 ThingsPanel API 获取
// ====== 拼装嵌入 URL ======
// v1.1.15 支持 token 参数透传，免二次登录
const embedUrl = `${THINGS_PANEL_HOST}/thingsvis/embed`
+ `?device_id=${DEVICE_ID}`
+ `&token=${TOKEN}`
+ `&chart_type=realtime_curve`
+ `&auto_resize=true`; // 开启响应式重绘
document.getElementById('thingsvis-frame').src = embedUrl;
// ====== 监听 ThingsVis postMessage 事件 ======
window.addEventListener('message', (event) => {
// 校验来源，防止跨域干扰
if (event.origin !== THINGS_PANEL_HOST) return;
const data = event.data;
if (data.type === 'thingsvis_interaction') {
const logEl = document.getElementById('event-log');
logEl.innerHTML += `<br>[${new Date().toLocaleTimeString()}] `
+ `动作: ${data.action} | 设备: ${data.device_id} | 数据点: ${JSON.stringify(data.payload)}`;
// 示例：点击某个数据点后，在外部页面触发告警查询
if (data.action === 'datapoint_click' && data.payload.value > 30) {
console.log('温度超阈值，可联动告警模块');
}
}
});
</script>
</body>
</html>
运行前需要替换三个值：THINGS_PANEL_HOST、DEVICE_ID、TOKEN。auto_resize=true 是 v1.1.15 新增参数，开启后 iframe 内面板会监听容器尺寸变化并重绘图表，不再需要外部手动触发。
设备详情页：减少跳转，信息密度提升
设备详情页是运维人员停留时间最长的页面。旧版的问题是信息分散——基础属性、遥测数据、告警记录、事件日志分别在不同 tab 或子页面里，排查一个设备异常需要反复切换。
v1.1.15 的调整方向是聚合+就近操作：
- 遥测实时值和最近告警在同一视区内并列展示，不用切换 tab 就能看到"温度 28.5°C"旁边挂着一条"高温预警"。
- 设备属性编辑从弹窗改为行内编辑，改一个字段不用打开整页表单。
- 历史曲线查询的时间范围选择器支持快捷预设（近 1 小时、近 24 小时、近 7 天），减少手动输入。
这些改动看起来不大，但在日常运维中每天重复几十次操作时，省下来的跳转和等待时间是实打实的。
用 API 拿到设备详情数据做二次开发
如果你需要把设备详情数据拉到自己的系统里做聚合分析，v1.1.15 的设备详情 API 也做了相应调整，返回结构更扁平：
# 获取设备详情（含最新遥测 + 最近告警，一次请求拿齐）
curl -s -X GET \
"http://your-thingspanel-host:8080/api/v1/device/${DEVICE_ID}/detail" \
-H "Authorization: Bearer ${TOKEN}" \
-H "Content-Type: application/json" \
| python3 -m json.tool
# 返回结构示例（v1.1.15 聚合后）：
# {
# "device": { "id": "...", "name": "车间温湿度传感器-01", "status": "online" },
# "telemetry": {
# "temperature": { "value": 28.5, "ts": "2025-07-11T10:23:00Z" },
# "humidity": { "value": 62.3, "ts": "2025-07-11T10:23:00Z" }
# },
# "recent_alerts": [
# { "level": "warning", "message": "温度接近上限", "ts": "2025-07-11T09:45:00Z" }
# ]
# }
以前要分别调 /device/{id}、/telemetry/latest、/alerts/recent 三个接口，现在一个请求搞定。对前端渲染和大屏数据刷新来说，减少请求次数意味着减少并发压力和加载延迟。
升级路径与注意事项
v1.1.15 的改动集中在前端嵌入体验和设备详情页交互，后端 API 结构也有对应调整。升级时关注这几件事：
| 检查项 | 说明 |
|---|---|
| 前端版本 | 从 v1.1.14.2 升到 v1.1.15，需重新构建前端镜像 |
| 后端版本 | 从 v1.1.14.3 升到 v1.1.15，设备详情 API 返回结构有变化，依赖该接口的下游系统需适配 |
| Token 透传 | 嵌入场景用 URL 参数传 token，确认你的安全策略允许这种方式；生产环境建议搭配短时效 token |
| iframe 安全 | 如果外部系统和 ThingsPanel 不同域，确保 ThingsPanel 后端 CORS 配置和 X-Frame-Options 允许嵌入来源 |
| postMessage 校验 | 监听 message 事件时务必校验 event.origin，否则任何页面都能向你的大屏注入伪造事件 |
升级命令参考（Docker 部署）：
# 拉取新版本镜像
docker pull thingspanel/thingspanel-frontend:v1.1.15
docker pull thingspanel/thingspanel-backend:v1.1.15
# 停止旧服务，替换镜像标签后重启
docker compose down
# 修改 docker-compose.yml 中的镜像版本号为 v1.1.15
docker compose up -d
如果你已经在用 ThingsVis 嵌入，升级后把 iframe URL 加上 auto_resize=true 和 token 参数就能直接享受新特性。设备详情页的改动是前端渲染层面的，不需要额外配置，升级后自动生效。
一句话总结：v1.1.15 不是大版本，但改的都是每天重复踩的地方。嵌入集成和日常运维这两个场景的体验差距，从"凑合能用"往"交付不丢分"挪了一步。