引言

无人超市作为新零售的典型场景，正经历着从概念验证到规模化落地的阶段。真正实现"无人"运营的背后，是一套高度智能化的可视化管理系统在提供全方位支撑。

在考虑将可视化加入我们的系统之前，我们先做了一下调研，目前在零售业，可视化系统面临三个核心的挑战是：

• 数据割裂：人、货、场数据分散在独立系统中。
• 响应滞后：从数据采集到决策执行的延迟高达小时级。
• 交互单一：缺乏多终端协同的立体化监控体系。

可视化系统作为连接数据与用户的桥梁，能够将复杂的数据转化为易于理解的图表、图像等形式，帮助用户快速掌握关键信息。本文将详细介绍无人超市的可视化系统设计方案，采用“前端可视化层 + 中台业务逻辑层 + 底层数据层”三层架构，旨在为无人超市的运营管理提供全面、高效的可视化支持。

一、系统架构设计

1.1 整体架构概览

该系统通过三层架构实现：

• 前端可视化层：采用微前端架构，各终端独立开发部署。
• 中台业务层：基于领域驱动设计（DDD）划分业务边界。
• 底层数据层：Lambda架构实现批流一体处理。

1.2 技术栈选型

二、前端可视化层

前端可视化层是用户与系统进行交互的主要界面，根据不同的使用场景和用户需求。

2.1 大屏驾驶舱

大屏驾驶舱主要用于门店全局数据可视化，展示人流热力图、销售实时曲线、安防状态等信息。它通常设置在门店的管理中心或监控室，为管理者提供全面、实时的门店运营数据。

2.1.1 示例：热力图

可以使用 AntV L7 库创建了一个热力图可视化地图：

// 导入热力图和场景模块
import { Heatmap } from '@antv/l7';
import { Scene } from '@antv/l7-scene';

/**
 * 创建地图场景实例
 * @param {Object} config - 场景配置对象
 * @param {string} config.id - 地图容器的DOM元素ID
 * @param {string} [config.mapStyle='dark'] - 地图样式主题
 * @param {number} [config.pitch=45] - 地图俯仰角度
 */
const storeScene = new Scene({
  id: 'mapContainer',
  mapStyle: 'dark',
  pitch: 45,
});

/**
 * 创建热力图层实例并配置数据源与样式
 * @param {Object} [layerConfig] - 图层配置对象（此处为空）
 * @returns {HeatmapLayer} 热力图层实例
 */
const heatmapLayer = new HeatmapLayer({})
  // 配置数据源及解析规则
  .source(heatData, {
    parser: {
      type: 'json',       // 数据格式为JSON
      x: 'lng',           // 经度字段名
      y: 'lat',           // 纬度字段名
    },
  })
  // 设置热力值映射关系
  .size('count', [0, 1])  // 将count字段值映射到[0,1]范围
  // 定义热力图视觉样式
  .style({
    intensity: 3,         // 热力强度系数
    radius: 20,           // 热力点半径(像素)
    rampColors: {         // 颜色渐变配置
      colors: [           // 颜色梯度数组
        '#FFEEE8', 
        '#FFC0B1', 
        '#FF8C77', 
        '#EF5742', 
        '#C42125'
      ],
      positions: [        // 颜色对应位置(0-1)
        0, 0.2, 0.4, 0.6, 1.0
      ],
    },
  });

// 将热力图层添加到场景中
storeScene.addLayer(heatmapLayer);

通过经纬度数据（lng, lat）和统计值（count）生成热力图，颜色越红表示count值越高，实现数据分布密度可视化。

2.2 移动端看板

移动端看板是为管理者提供的实时监控工具，通过手机或平板电脑等移动设备，管理者可以随时随地查看库存、营销效果、设备状态等信息。

2.2.1 示例：库存预警组件

/**
 * 库存预警组件 - 展示库存不足的商品列表及预警信息
 * 
 * 该组件接收商品列表数据，筛选出库存量不足的商品（库存量不足2天消耗量），
 * 并以进度条形式展示各商品的库存状态。当库存告急商品超过3个时显示全局警告提示。
 * 
 * @param {Object[]} items - 商品数据数组
 * @param {string} items[].sku - 商品唯一标识
 * @param {string} items[].name - 商品名称
 * @param {number} items[].stock - 当前库存量
 * @param {number} items[].dailyAvg - 日均消耗量
 * @param {number} items[].capacity - 库存总容量
 * @param {number} items[].safeStock - 安全库存阈值
 * @returns {JSX.Element} 库存预警面板的React组件
 */
import { Progress, Alert } from 'antd';

const StockWarning = ({ items }) => {
  // 过滤出库存不足2天消耗量的商品
  const criticalItems = items.filter(item => item.stock / item.dailyAvg < 2);

  return (
    <div className='stock-panel'>
      <h3>库存预警 ({criticalItems.length})</h3>
      
      {/* 渲染每个预警商品的库存状态 */}
      {criticalItems.map(item => (
        <div key={item.sku} className='stock-item'>
          {/* 库存进度条：红色表示低于安全库存，正常为蓝色 */}
          <Progress 
            percent={Math.round((item.stock / item.capacity) * 100)} 
            status={item.stock < item.safeStock ? 'exception' : 'normal'} 
            showInfo={false} 
          />
          <span className='sku-name'>{item.name}</span>
          <span className='stock-num'>
            {item.stock}/{item.capacity}
          </span>
        </div>
      ))}
      
      {/* 当预警商品超过3个时显示全局警告 */}
      {criticalItems.length > 3 && <Alert message='超过3个商品库存告急' type='warning' showIcon />}
    </div>
  );
};

2.3 店内交互终端

店内交互终端主要为消费者提供 AR 商品导航和自助结算功能。

终端交互流程：

重点逻辑：AR 商品导航的定位和识别是重点逻辑。通过摄像头采集环境信息，结合商品的位置信息，在 AR 场景中显示商品的位置。自助结算界面的支付流程也是重点逻辑，需要与支付中台进行安全、稳定的数据交互。

参数解析：

• AR 定位参数：如摄像头的位置、角度等，用于确定 AR 场景的坐标系。

三、中台业务层

中台业务层是系统的核心，负责处理业务逻辑和数据交互。

3.1 商品管理

3.1.1 商品识别流程

3.1.2 示例：商品识别

from flask import Flask, jsonify
import cv2
import tensorflow as tf

app = Flask(__name__)
model = tf.keras.models.load_model('goods_model.h5')

@app.route('/detect', methods=['POST'])
def detect_goods():
    # 接收视频帧
    img_bytes = request.files['image'].read()
    img = cv2.imdecode(np.frombuffer(img_bytes, np.uint8), cv2.IMREAD_COLOR)
    
    # 预处理
    img_resized = cv2.resize(img, (224,224))
    img_rgb = cv2.cvtColor(img_resized, cv2.COLOR_BGR2RGB)
    img_normalized = img_rgb / 255.0
    
    # 预测
    pred = model.predict(np.expand_dims(img_normalized, axis=0))
    class_id = np.argmax(pred)
    confidence = float(np.max(pred))
    
    # 库存联动
    if confidence > 0.9:
        stock_info = update_stock(class_id, get_position(img))
        return jsonify({
            'status': 'success',
            'goods_id': class_id,
            'stock': stock_info
        })
    
    return jsonify({'status': 'uncertain'})

def update_stock(goods_id, position):
    # 调用库存系统API
    pass

3.2 支付中台

3.2.1 支付流程状态机

3.2.2 示例：异常处理机制

from flask import Flask, jsonify
import cv2
import tensorflow as tf

app = Flask(__name__)
model = tf.keras.models.load_model('goods_model.h5')

@app.route('/detect', methods=['POST'])
def detect_goods():
    """
    商品检测API接口，接收视频帧并进行商品识别
    
    处理流程：
    1. 接收POST请求中的图像数据
    2. 图像预处理和模型预测
    3. 根据置信度决定是否更新库存
    4. 返回识别结果
    
    Returns:
        json: 识别结果，包含状态(status)、商品ID(goods_id)和库存信息(stock)，
              或不确定状态(uncertain)
    """
    # 接收视频帧
    img_bytes = request.files['image'].read()
    img = cv2.imdecode(np.frombuffer(img_bytes, np.uint8), cv2.IMREAD_COLOR)
    
    # 图像预处理：调整尺寸、颜色空间转换和归一化
    img_resized = cv2.resize(img, (224,224))
    img_rgb = cv2.cvtColor(img_resized, cv2.COLOR_BGR2RGB)
    img_normalized = img_rgb / 255.0
    
    # 模型预测：获取类别ID和置信度
    pred = model.predict(np.expand_dims(img_normalized, axis=0))
    class_id = np.argmax(pred)
    confidence = float(np.max(pred))
    
    # 高置信度时更新库存并返回完整结果
    if confidence > 0.9:
        stock_info = update_stock(class_id, get_position(img))
        return jsonify({
            'status': 'success',
            'goods_id': class_id,
            'stock': stock_info
        })
    
    return jsonify({'status': 'uncertain'})

def update_stock(goods_id, position):
    """
    更新库存系统
    
    Args:
        goods_id (int): 识别出的商品ID
        position (any): 商品位置信息
    
    Returns:
        any: 库存系统返回的库存信息
    """
    # 调用库存系统API
    pass

主要功能是：

• 接收POST请求中的商品图像。
• 预处理图像并加载预训练模型进行预测。
• 当置信度>90%时更新库存系统。
• 返回识别结果（成功时包含商品ID和库存信息，否则返回不确定状态）。

3.3 用户中心

用户中心主要负责用户的人脸识别认证，包括活体检测和黑名单预警功能。通过摄像头采集用户的人脸信息，与系统中的用户数据进行比对，验证用户的身份。

重点逻辑：

人脸图像的处理和识别是用户中心的重点逻辑。通过 OpenCV 库对采集到的人脸图像进行预处理，如裁剪、归一化等，然后使用人脸识别算法提取人脸特征，与系统中的用户数据进行比对。

参数解析：

• 人脸识别算法参数：如阈值、特征维度等，用于调整人脸识别的准确性和效率。
• 消息队列参数：如 Kafka 的主题、分区等，用于指定消息的发送和接收。

四、底层数据层

底层数据层主要负责数据的采集、存储和处理。

4.1 实时数据流

实时数据流通过摄像头/传感器采集人/货/场行为数据，使用 Kafka 进行流处理。将采集到的数据实时传输到中台业务层，为前端交互层提供实时数据支持。

4.1.1 示例：Flink作业配置

/**
 * 获取流处理执行环境
 * @returns {StreamExecutionEnvironment} 流处理执行环境实例
 */
StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironment();

/**
 * 构建Kafka数据源配置
 * @type {KafkaSource<String>}
 * 配置说明：
 *   - 设置Kafka服务器地址
 *   - 设置订阅的主题名称
 *   - 设置消息反序列化器（使用简单字符串模式）
 */
KafkaSource<String> source = KafkaSource.<String>builder()
    .setBootstrapServers("kafka:9092")
    .setTopics("camera-feeds")
    .setDeserializer(new SimpleStringSchema())
    .build();

/**
 * 从Kafka源创建数据流并执行人流计数处理流程
 * 处理步骤：
 *   1. 创建基础数据流
 *   2. 按摄像头ID分组
 *   3. 设置30秒滚动窗口
 *   4. 使用自定义聚合器进行人数统计
 *   5. 将结果输出到ClickHouse
 */
DataStream<CameraEvent> events = env.fromSource(
    source, 
    WatermarkStrategy.noWatermarks(), 
    "Kafka Source"
);

events
    .keyBy(event -> event.getCameraId())
    .window(TumblingEventTimeWindows.of(Time.seconds(30)))
    .aggregate(new PeopleCounter())
    .addSink(new ClickHouseSink());

4.2 离线数仓

离线数仓主要用于存储历史销售、用户画像等数据，采用 HDFS + ClickHouse 的架构。HDFS 用于存储原始数据，ClickHouse 用于高效的数据分析和查询。

4.3 AI 模型库

AI 模型库主要用于存储和管理商品识别 CNN 模型、客流预测 LSTM 模型等人工智能模型。通过 Python 编写模型训练和推理程序，为中台业务层提供 AI 服务。

重点逻辑：

模型的训练和推理是 AI 模型库的重点逻辑。通过收集和标注数据，使用深度学习框架训练商品识别 CNN 模型、客流预测 LSTM 模型等。将训练好的模型部署到模型推理服务中，中台业务层通过调用 API 进行模型推理。

参数解析：

• 模型训练参数：如学习率、批次大小、训练轮数等，用于调整模型的训练效果。
• 模型推理 API 参数：如输入数据格式、输出数据格式等，用于调用模型推理服务。

结语

本文详细介绍了无人超市的可视化系统设计方案，采用“前端可视化层 + 中台业务逻辑层 + 底层数据层”三层架构。前端交互层包括大屏驾驶舱、移动端看板和店内交互终端，为用户提供了不同场景下的可视化交互界面；中台业务层包括用户中心、商品管理和支付中台，负责处理业务逻辑和数据交互；底层数据层包括实时数据流、离线数仓和 AI 模型库，负责数据的采集、存储和处理。

通过本方案的设计和实施，可以实现无人超市运营数据的全面可视化，帮助管理者及时掌握门店运营情况，提高运营效率和决策的科学性。同时，为消费者提供了更加便捷、智能的购物体验，提升了用户满意度。