在医药冷链、高端生鲜、精密化工等垂直物流场景中，“按时送达”只是及格线，“合规温控”才是生命线。一辆装载疫苗的冷藏车，如果在高速公路上发生制冷机组故障，导致厢内温度从标准的2-8℃飙升至25℃，即便司机以最快速度抵达，这批价值百万的货物也已报废，甚至可能引发公共安全事故。传统的“到货测温”属于“死后验尸”，无法挽回损失。

。我们将实现毫秒级的温湿度数据实时采集、基于Mapbox的热力图可视化、以及多维度的阈值报警机制。通过“端（设备）-管（网络）-云（TMS）-控（报警）”的闭环，确保一旦温度异常，系统能在秒级触发预警，指挥司机紧急干预，真正实现冷链运输的“防患于未然”。

一、系统架构：从传感器到前端大屏 

高频时序数据的实时处理与可视化

。IoT设备通常以秒级或分钟级频率上报数据，这对系统的吞吐量和前端渲染能力提出了极高要求。

二、Node.js后端：IoT数据接入与规则引擎 

后端的核心任务是“接得住、算得快、判得准”。

首先，我们需要一个服务来订阅IoT设备发布的主题（Topic）。

规则引擎决定了什么是“异常”。冷链规则通常很复杂，例如“疫苗运输需保持在2-8℃，且波动不能超过±0.5℃/分钟”。

三、前端可视化：React + Mapbox 热力图 

前端需要将枯燥的数字转化为直观的图形。我们将在地图上展示车辆的实时位置和温度的冷热分布。

import { useEffect, useState, useRef } from 'react';

const useIotWebSocket = (url) => {
  const [telemetryData, setTelemetryData] = useState({});
  const [alerts, setAlerts] = useState([]);
  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket(url);

    ws.current.onopen = () => console.log('IoT WebSocket Connected');
    
    ws.current.onmessage = (event) => {
      const message = JSON.parse(event.data);
      
      if (message.type === 'TELEMETRY_UPDATE') {
        const { deviceSn, temperature, location } = message.data;
        setTelemetryData(prev => ({
          ...prev,
          [deviceSn]: { temperature, location, timestamp: Date.now() }
        }));
      }
      
      if (message.type === 'TEMP_ALERT') {
        setAlerts(prev => [message.data, ...prev].slice(0, 20)); // 保留最近20条
      }
    };

    ws.current.onclose = () => console.log('IoT WebSocket Disconnected');

    return () => ws.current.close();
  }, [url]);

  return { telemetryData, alerts };
};

export default useIotWebSocket;

图层非常适合展示温度分布。我们将根据温度值的高低，映射不同的颜色。

import React, { useEffect } from 'react';
import mapboxgl from 'mapbox-gl';

const IotHeatmapLayer = ({ map, telemetryData }) => {
  useEffect(() => {
    if (!map || Object.keys(telemetryData).length === 0) return;

    const sourceId = 'iot-heatmap-source';
    const layerId = 'iot-heatmap-layer';

    // 将数据转换为GeoJSON格式
    const geojsonData = {
      type: 'FeatureCollection',
      features: Object.values(telemetryData)
        .filter(d => d.location)
        .map(d => ({
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [d.location.lng, d.location.lat]
          },
          properties: {
            temperature: d.temperature
          }
        }))
    };

    // 添加或更新数据源
    if (map.getSource(sourceId)) {
      map.getSource(sourceId).setData(geojsonData);
    } else {
      map.addSource(sourceId, {
        type: 'geojson',
        data: geojsonData
      });

      // 添加热力图层
      map.addLayer({
        id: layerId,
        type: 'heatmap',
        source: sourceId,
        paint: {
          // 热力图权重：温度越高，权重越大
          'heatmap-weight': [
            'interpolate',
            ['linear'],
            ['get', 'temperature'],
            -10, 0,  // -10℃及以下，权重为0
            0, 0.2,  // 0℃
            8, 0.5,  // 8℃
            25, 1     // 25℃及以上，权重为1
          ],
          // 热力图颜色渐变：蓝 -> 绿 -> 黄 -> 红
          'heatmap-color': [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0, 'rgba(0, 0, 255, 0)',   // 透明
            0.2, 'royalblue',
            0.4, 'cyan',
            0.6, 'lime',
            0.8, 'yellow',
            1, 'red'
          ],
          // 热力图半径
          'heatmap-radius': 30,
          // 热力图透明度
          'heatmap-opacity': 0.7
        }
      });
    }

    // 清理函数
    return () => {
      if (map.getLayer(layerId)) map.removeLayer(layerId);
      if (map.getSource(sourceId)) map.removeSource(sourceId);
    };
  }, [map, telemetryData]);

  return null;
};

export default IotHeatmapLayer;

import React from 'react';
import MapboxMap from '../../components/MapboxMap';
import IotHeatmapLayer from '../../components/IoTMap/IotHeatmapLayer';
import AlertPanel from '../../components/IoTMap/AlertPanel';
import useIotWebSocket from '../../hooks/useIotWebSocket';

const ColdChainMonitor = () => {
  const WS_URL = process.env.REACT_APP_WS_URL || 'ws://localhost:8080/ws/iot';
  const { telemetryData, alerts } = useIotWebSocket(WS_URL);

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      {/* 左侧报警面板 */}
      <div style={{ width: '300px', overflowY: 'auto', background: '#1a1a1a', color: 'white' }}>
        <h2 style={{ padding: '16px' }}>实时报警</h2>
        <AlertPanel alerts={alerts} />
      </div>
      
      {/* 右侧地图 */}
      <div style={{ flex: 1 }}>
        <MapboxMap>
          <IotHeatmapLayer telemetryData={telemetryData} />
          {/* 可以在这里叠加车辆图标图层 */}
        </MapboxMap>
      </div>
    </div>
  );
};

export default ColdChainMonitor;

医药冷链（如GSP规范）要求数据不可篡改。我们的设计满足了以下合规要求：

本文详细阐述了TMS中冷链温度监控模块的构建过程。通过

构建高并发的数据处理管道，结合

实现实时缓存与规则防抖，并最终通过

将温度数据可视化。我们不仅实现了温度的实时监控，更重要的是建立了一套

通过这一章，我们的TMS系统已经具备了保障高价值、高敏感性货物运输安全的能力。

运输管理系统（TMS）| 温度监控功能：IoT设备数据实时展示与报警

前端开发

物联网

后端

开发工具

数据可视化

数据完整性

消息队列

数据处理

数据转换

PostgreSQL

服务器

数据库

WebSocket

MongoDB

短信

Redis

React

JSON

MQTT

2026上云采购 | AI焕新·智启新局

ctsdb

腾讯云大数据特惠0.2折起


oceanus

腾讯云BI特惠9.9元起！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在医药冷链、高端生鲜、精密化工等垂直物流场景中，“按时送达”只是及格线，“合规温控”才是生命线。一辆装载疫苗的冷藏车，如果在高速公路上发生制冷机组故障，导致厢内温度从标准的2-8℃飙升至25℃，即便司机以最快速度抵达，这批价值百万的货物也已报废，甚至可能引发公共安全事故。传统的“到货测温”属于“死后验尸”，无法挽回损失...

运输管理系统（TMS）| 温度监控功能：IoT设备数据实时展示与报警

运输管理系统（TMS）| 温度监控功能：IoT设备数据实时展示与报警

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐