rui.jiang
/
performance-test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							/*
 * @Author: your name
 * @Date: 2025-05-14 10:49:00
 * @LastEditTime: 2025-05-26 11:02:41
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /downLoadServer/src/server/utils/chartsCom/yawErrorLine.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 generateYawErrorLine = async (
  chartData,
  bucketName,
  objectName
) => {
  try {
    const data = [];
    const colors = [...colorSchemes[0].colors]; // 生成颜色
    // 获取 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");

    chartData &&
      chartData.data &&
      chartData.data.forEach((turbine, index) => {
        // 判断图表类型，根据类型调整绘制方式
        const chartConfig = {
          x: turbine.xData, // X 数据
          y: turbine.yData, // Y 数据
          name: turbine.legend, // 使用机组名称
          line: {
            color: colors[index % colors.length], // 为每个机组分配不同的颜色
          },
          marker: {
            color: colors[index % colors.length], // 为每个机组分配不同的颜色
          },
          hovertemplate:
            `${chartData.xaixs}:` +
            ` %{x} <br> ` +
            `${chartData.yaixs}:` +
            "%{y} <br> <extra></extra>",
        };

        if (chartData.chartType === "line") {
          chartConfig.mode = "lines+markers"; // 如果是折线图
          chartConfig.fill = "none";
        } else if (chartData.chartType === "bar") {
          chartConfig.fill = "tonexty";
        }

        data.push(chartConfig);
      });

    const layout = {
      title: {
        text: chartData.data[0].title,
        font: {
          size: 16, // 设置标题字体大小（默认 16）
          weight: "bold",
        },
      },
      xaxis: {
        gridcolor: "rgb(255,255,255)",
        tickcolor: "rgb(255,255,255)",
        backgroundcolor: "#e5ecf6",
        title: chartData.xaixs || "X轴", // 横坐标标题
      },
      yaxis: {
        gridcolor: "rgb(255,255,255)",
        tickcolor: "rgb(255,255,255)",
        backgroundcolor: "#e5ecf6",
        title: chartData.yaixs || "Y轴", // 纵坐标标题
      },
      //   margin: {
      //     l: 50,
      //     r: 50,
      //     t: 50,
      //     b: 50,
      //   },
      plot_bgcolor: "#e5ecf6",
      gridcolor: "#fff",
      bgcolor: "#e5ecf6", // 设置背景颜色
      autosize: true, // 开启自适应
      barmode: chartData.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
    };

    if (
      chartData.contract_Cp_curve_yData &&
      chartData.contract_Cp_curve_yData.length > 0
    ) {
      data.push({
        x: chartData.contract_Cp_curve_xData,
        y: chartData.contract_Cp_curve_yData,
        mode: "lines+markers",
        name: "合同功率曲线",
        line: {
          color: "red",
          width: 1, // 设置线条的宽度为1
        },
        marker: { color: "red", size: 4 },
      });
    }

    // 使用 Puppeteer 生成图表的截图
    const browser = await puppeteer.launch({
      headless: "new",
      args: ["--no-sandbox", "--disable-setuid-sandbox"],
    });

    const tempDir = path.join(process.cwd(), "images");
    await fs.ensureDir(tempDir);
    const tempFilePath = path.join(
      tempDir,
      `temp_yaw_error_chart_${Date.now()}.jpeg`
    );

    try {
      const page = await browser.newPage();
      const htmlContent = `
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>静态偏航折线分图</title>
            <script>${plotlyContent}</script>
            <style>
              body { margin: 0; }
              #chart { width: 800px; height: 600px; }
            </style>
          </head>
          <body>
            <div id="chart"></div>
            <script>
              window.onload = function() {
                Plotly.newPlot('chart', ${JSON.stringify(
                  data
                )}, ${JSON.stringify(layout)}).then(() => {
                  window.chartRendered = true;
                });
              };
            </script>
          </body>
        </html>
      `;

      await page.setContent(htmlContent, { waitUntil: "networkidle0" });
      await page.waitForFunction(() => window.chartRendered === true, {
        timeout: 60000,
      });

      // 截图并保存到临时文件
      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(
        `${process.env.API_BASE_URL}/examples/upload`,
        {
          filePath: tempFilePath,
          bucketName,
          objectName,
        }
      );

      console.log("上传成功:", response.data);
      return response?.data?.url;
    } catch (error) {
      console.error("生成折线图失败:", error);
      throw error;
    } finally {
      await browser.close();
    }
  } catch (error) {
    console.error("生成折线图失败:", error);
    throw error;
  }
};