海外电商实时数据
这是一个模拟海外电商平台的实时订单流转数据展示示例。该示例展示了从用户下单到最终配送的完整物流链路，包含以下关键节点：
- 🛍️ 新订单生成
- 🏭 订单处理与仓储
- 📦 发货准备阶段
- ✈️ 国际运输过程
- 🛃 海关清关环节
- 🚚 最终配送状态
系统每 4 秒会随机生成一条新的订单数据，包含具体的：
- 商品信息（品牌和型号）
- 订单时间
- 收货人信息（姓名和城市）
示例中的动画效果使用了 Flow 类型，直观地展示了订单在各个环节的流转过程。
演示效果
示例代码
import {
AnimationType,
ICraftPlayer,
ICraftPlayerInstance
} from "@icraft/player-react";
import React, { useRef } from "react";
import { getEcommerceData } from "./utils";
const style = {
width: "100%",
height: "100%",
position: "relative" as const,
overflow: "hidden" as const,
};
const getCard = (value: string) => {
const card = document.createElement("div");
card.innerHTML = value;
card.style.cssText = `
padding: 12px 16px;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
font-size: 14px;
color: #333;
max-width: 280px;
line-height: 1.5;
word-break: break-all;
`;
return card;
};
export default () => {
const playerRef = useRef<ICraftPlayerInstance>(null);
const timerRef = useRef<NodeJS.Timeout>();
const currentIndexRef = useRef(0);
const receiveData = async () => {
const player = playerRef.current;
if (!player) return;
const data = await getEcommerceData();
const { key, value } = data[currentIndexRef.current];
const line = player.getElementsByName(key)?.[0];
const card = getCard(value);
if (line) {
player.playAnimationByElementKey(line.key, {
animationType: AnimationType.Flow,
animationDuration: 3,
tipContent: card,
animationShowTip: true,
flowLineColor: "#1a73e8",
});
}
currentIndexRef.current = (currentIndexRef.current + 1) % data.length;
player.changeCustomCamera(currentIndexRef.current,3000);
};
React.useEffect(() => {
timerRef.current = setInterval(receiveData, 4000);
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
}
};
}, []);
return (
<div style={style}>
<ICraftPlayer
src='/templates/E-commerce.iplayer'
ref={playerRef}
/>
</div>
);
};
