车辆诊断仪表板 - 交互式演示
点击图片上的 蓝色圆点 查看每个功能的详细介绍
点击图片上的蓝色圆点查看详细功能介绍
📱
实时监控
实时监控车辆关键参数，包括故障代码、烟灰水平、温度等重要指标。
🔧
远程控制
通过应用远程执行诊断命令，如重置故障代码、强制 DPF 再生等操作。
📊
历史追踪
记录所有诊断活动和维护历史，帮助您更好地管理车队和预防问题。
如何使用此组件
1
导入组件
import { InteractiveImage, HotspotData } from '@/shared-components/InteractiveImage';2
定义热点数据
const hotspots: HotspotData[] = [
{
id: 'feature-1',
x: 50, // X 坐标百分比 (0-100)
y: 30, // Y 坐标百分比 (0-100)
title: '功能标题',
description: '功能详细描述...',
icon: '🎯', // 可选的 emoji 图标
},
// 更多热点...
];3
使用组件
<InteractiveImage
src="/path/to/image.png"
alt="图片描述"
hotspots={hotspots}
width={1080}
height={1920}
/>