rui.jiang
/
performance-test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							/*
 * @Author: your name
 * @Date: 2025-04-14 11:15:35
 * @LastEditTime: 2025-05-21 15:10:19
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/downLoadServer/src/server/utils/chartsCom/HeatmapCharts.js
 */

import puppeteer from "puppeteer";
import fs from "fs-extra";
import path from "path";
import FormData from "form-data";
import { colorSchemes } from "../colors.js";
import axios from "axios";
export const generateHeatmapChart = async (data, bucketName, objectName) => {
  try {
    console.log("开始生成热力图...");
    console.log("数据:", data);

    // 创建临时目录
    const tempDir = path.join(process.cwd(), "images");
    await fs.ensureDir(tempDir);
    const tempFilePath = path.join(
      tempDir,
      `temp_heatmap_chart_${Date.now()}.jpeg`
    );

    // 获取 plotly.js 的绝对路径
    const plotlyPath = path.join(
      process.cwd(),
      "src",
      "public",
      "js",
      "plotly-3.0.1.min.js"
    );
    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");

    // 创建浏览器实例
    const browser = await puppeteer.launch({
      headless: "new",
      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
      args: ["--no-sandbox", "--disable-setuid-sandbox"],
    });

    try {
      const page = await browser.newPage();

      // 准备图表数据
      const chartDataset = data.data[0];

      const trace = {
        type: "heatmap",
        x: chartDataset.xData,
        y: chartDataset.yData,
        z: chartDataset.ZData,
        zmin: 0, // 最小值
        zmax: 100, // 最大值
        colorscale: [
          [0, "#E1ECC5"], // 0% - 50%
          [0.5, "#E1ECC5"], // 50%
          [0.5, "#9BC8C1"], // 50% - 85%
          [0.85, "#9BC8C1"], // 85%
          [0.85, "#5783B3"], // 85% - 100%
          [1, "#5783B3"], // 100%
        ],
        text: chartDataset.ZData.map((row) =>
          row.map((value) => value.toString())
        ),
        hoverinfo: "text", // Hover时显示文本
        showscale: true, // 显示颜色条
        texttemplate: "%{text}", // 在热图块上显示z值
        xgap: 2, // 设置水平方向格子之间的间距
        ygap: 2, // 设置垂直方向格子之间的间距
      };

      // 准备布局配置
      const layout = {
        showlegend: false,
        autosize: true,
        title: {
          text: chartDataset.title,
          font: {
            size: 16,
            weight: "bold",
          },
        },
        xaxis: {
          title: data.xaixs || "X轴",
          tickvals: chartDataset.xData,
          ticktext: chartDataset.xData,
          tickmode: "array",
          tickfont: {
            size: 12,
          },
        },
        yaxis: {
          title: data.yaixs || "Y轴",
          tickvals: chartDataset.yData,
          ticktext: chartDataset.yData,
          tickmode: "array",
          tickfont: {
            size: 12,
          },
        },
        plot_bgcolor: "white",
        gridcolor: "#d3d3d3", // 设置网格线颜色
      };

      // 准备 HTML 内容
      const htmlContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <title>热力图</title>
          <script>${plotlyContent}</script>
        </head>
        <body>
          <div id="chart" style="width: 100%; height: 450px"></div>
          <script>
            window.chartRendered = false;
            const trace = ${JSON.stringify(trace)};
            const layout = ${JSON.stringify(layout)};
            Plotly.newPlot('chart', [trace], layout, { responsive: true }).then(() => {
              window.chartRendered = true;
            }); 
          </script>
        </body>
        </html>
      `;
      // 设置页面内容
      await page.setContent(htmlContent, {
        waitUntil: "networkidle0",
      });

      // 等待图表渲染完成，延长超时时间
      await page.waitForFunction(() => window.chartRendered === true, {
        timeout: 120000, // 延长到 120 秒
      });

      // 截图并保存到临时文件
      const chartElement = await page.$("#chart");
      await chartElement.screenshot({
        path: tempFilePath,
        type: "jpeg",
      });

      // 上传图片到服务器
      const formData = new FormData();
      formData.append("file", fs.createReadStream(tempFilePath));
      //   const response = await axios.post(
      //     "http://10.10.10.11:8080/upload",
      //     formData,
      //     {
      //       headers: {
      //         ...formData.getHeaders(),
      //       },
      //     }
      //   );

      // 返回图片URL
      //   return response.data.data;
      // return formData;
      // 发送上传请求
      const response = await axios.post(
        `${process.env.API_BASE_URL}/examples/upload`,
        { filePath: tempFilePath, bucketName, objectName }
      );
      return response?.data?.url;
    } catch (error) {
      console.error("生成热力图失败:", error);
      throw error;
    } finally {
      await browser.close();
    }
  } catch (error) {
    console.error("生成热力图失败:", error);
    throw error;
  }
};