大数据可视交互系统双十二活动

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

function SalesDashboard() {
  const [salesData, setSalesData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/sales');
      const data = await response.json();
      setSalesData(data);
    };

    const intervalId = setInterval(fetchData, 5000); // 每5秒更新一次数据
    return () => clearInterval(intervalId); // 清除定时器
  }, []);

  return (
    <div>
      <h1>实时销售额</h1>
      <ul>
        {salesData.map((item, index) => (
          <li key={index}>{item.product} - {item.amount}</li>
        ))}
      </ul>
    </div>
  );
}

export default SalesDashboard;

from flask import Flask, jsonify
import random

app = Flask(__name__)

@app.route('/api/sales', methods=['GET'])
def get_sales_data():
    # 模拟生成实时销售数据
    data = [
        {'product': 'A', 'amount': random.randint(100, 1000)},
        {'product': 'B', 'amount': random.randint(100, 1000)},
        # 其他产品数据
    ]
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)