完整版没问题的下载报告功能

downLoadServer/src/server/controllers/chartController.js

@@ -23,11 +23,17 @@ import { generatePlotlyCharts } from "../utils/chartsCom/PlotlyCharts.js";
 import { generatePlotlyChartsFen } from "../utils/chartsCom/PlotlyChartsFen.js";
 // import { getProductionIndicatorTotal } from "../utils/chartsCom/productionIndicatorTotal.js";
 import { copyFileDocx } from "../utils/copyFileCsv.js";
+import { processChartsImages } from "../utils/copyFileImage.js";
 import axios from "axios";
 import Papa from "papaparse";
 import fs from "fs-extra";
 import path from "path";
 import FormData from "form-data";
+import pLimit from "p-limit";
+
+const chartTaskLimit = pLimit(
+  Number.parseInt(process.env.CHART_RENDER_CONCURRENCY || "1", 10),
+);
 
 // 提取公共逻辑到辅助函数
 const handleChartGeneration = async (
@@ -35,16 +41,37 @@ const handleChartGeneration = async (
   res,
   generateChartFn,
   successMessage,
-  additionalParams = {}
+  additionalParams = {},
 ) => {
   try {
-    const { fileAddr, bucketName, objectName, fieldInfo, fieldEngineCode } =
-      req.body;
+    const {
+      fileAddr,
+      bucketName,
+      objectName,
+      fieldInfo,
+      fieldEngineCode,
+      startDate,
+      endDate,
+    } = req.body;
     if (!fileAddr) {
       return errorResponse(res, "缺少数据URL", 400);
     }
     // 从URL获取数据
-    const response = await axios.get(fileAddr);
+    //    const response = await axios.get(fileAddr);
+    // 从URL获取数据
+    const path = fileAddr.replace(/^https?:\/\/[^/]+/, "");
+    // console.log("[handleChartGeneration] start fetch:", {
+    //   url: `http://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}${path}`,
+    //   bucketName,
+    //   objectName,
+    // });
+    const response = await axios.get(
+      `http://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}${path}`,
+      {
+        timeout: 60000, // 例如 60 秒，可按需要调
+      },
+    );
+    // console.log("[handleChartGeneration] fetch done");
     let data = [];
     // console.log("获取到的数据:", data);/
     if (typeof response.data === "string") {
@@ -72,22 +99,32 @@ const handleChartGeneration = async (
       return errorResponse(res, "获取的数据格式不正确", 400);
     }
 
-    // 生成图表并上传
-    const imageUrl = await generateChartFn(
-      data,
-      bucketName,
-      objectName,
-      fieldEngineCode,
-      fieldInfo,
-      ...Object.values(additionalParams)
-    );
+    // 生成图表并上传（折线图等：第 5、6 参应为 startDate/endDate，不能误传 fieldInfo）
+    const { skipFieldInfo, ...restAdditional } = additionalParams || {};
+    const imageUrl = skipFieldInfo
+      ? await generateChartFn(
+          data,
+          bucketName,
+          objectName,
+          fieldEngineCode,
+          startDate,
+          endDate,
+        )
+      : await generateChartFn(
+          data,
+          bucketName,
+          objectName,
+          fieldEngineCode,
+          fieldInfo,
+          ...Object.values(restAdditional),
+        );
     // console.log(imageUrl, "imageUrl");
     successResponse(
       res,
       {
         imageUrl,
       },
-      successMessage
+      successMessage,
     );
   } catch (error) {
     console.error(`${successMessage.replace("生成成功", "生成失败")}:`, error);
@@ -95,13 +132,13 @@ const handleChartGeneration = async (
       errorResponse(
         res,
         `获取数据失败: ${error.response.status}`,
-        error.response.status
+        error.response.status,
       );
     } else {
       errorResponse(
         res,
         `${successMessage.replace("生成成功", "生成失败")}`,
-        500
+        500,
       );
     }
   }
@@ -119,7 +156,7 @@ const fetchCsvAndParse = async (
   onParsed,
   onError,
   successMessage,
-  additionalParams = {}
+  additionalParams = {},
 ) => {
   try {
     const {
@@ -153,7 +190,7 @@ const fetchCsvAndParse = async (
           fieldInfo,
           chartType,
           engineTypeCode,
-          additionalParams
+          additionalParams,
         );
       },
       error: (error) => {
@@ -168,7 +205,7 @@ const fetchCsvAndParse = async (
       errorResponse(
         res,
         `获取数据失败: ${error.response.status}`,
-        error.response.status
+        error.response.status,
       );
     } else {
       errorResponse(res, "获取 CSV 失败", 500);
@@ -187,7 +224,7 @@ const handleParsedResult = async (
   fieldInfo,
   chartType,
   engineTypeCode,
-  additionalParams
+  additionalParams,
 ) => {
   // chartType==="faultUnitChart"?
   const data =
@@ -225,19 +262,21 @@ const handleParsedResult = async (
       if (chartType === "radar") {
         const results = await Promise.all(
           data.map((val) =>
-            onParsed(
-              val,
-              data,
-              bucketName,
-              objectName,
-              fieldInfo,
-              engineTypeCode,
-              additionalParams
-            ).catch((err) => {
-              console.error("getRadarCharts failed:", err);
-              return null;
-            })
-          )
+            chartTaskLimit(() =>
+              onParsed(
+                val,
+                data,
+                bucketName,
+                objectName,
+                fieldInfo,
+                engineTypeCode,
+                additionalParams,
+              ).catch((err) => {
+                console.error("getRadarCharts failed:", err);
+                return null;
+              }),
+            ),
+          ),
         );
         imageUrls.push(...results);
         // console.log(imageUrls, "img");
@@ -247,7 +286,7 @@ const handleParsedResult = async (
           bucketName,
           objectName,
           fieldInfo,
-          additionalParams
+          additionalParams,
         );
       }
     }
@@ -264,9 +303,8 @@ export const createBarChart = async (req, res) => {
 };
 
 export const createLineChart = async (req, res) => {
-  const { fieldEngineCode } = req.body;
   await handleChartGeneration(req, res, generateLineChart, "折线图生成成功", {
-    fieldEngineCode,
+    skipFieldInfo: true,
   });
 };
 
@@ -275,7 +313,7 @@ export const createLineAndChildLine = async (req, res) => {
     req,
     res,
     generateLineAndChildLine,
-    "折线图生成成功"
+    "折线图生成成功",
   );
 };
 //createPlotlyChartsFen
@@ -288,7 +326,7 @@ export const createPlotlyChartsFen = async (req, res) => {
     "折线图生成成功",
     {
       fieldEngineCode,
-    }
+    },
   );
 };
 
@@ -309,7 +347,7 @@ export const createTwoDMarkersChart = async (req, res) => {
     req,
     res,
     generateTwoDMarkersChart,
-    "2D 分图生成成功"
+    "2D 分图生成成功",
   );
 };
 export const createTwoDMarkersChart1 = async (req, res) => {
@@ -317,7 +355,7 @@ export const createTwoDMarkersChart1 = async (req, res) => {
     req,
     res,
     generateTwoDMarkersChart1,
-    "2D 分图生成成功"
+    "2D 分图生成成功",
   );
 };
 export const createColorbarInitTwoDmarkersChart = async (req, res) => {
@@ -325,7 +363,7 @@ export const createColorbarInitTwoDmarkersChart = async (req, res) => {
     req,
     res,
     generateColorbarInitTwoDmarkersChart,
-    "2D 分图生成成功"
+    "2D 分图生成成功",
   );
 };
 export const createpowerMarkers2DCharts = async (req, res) => {
@@ -333,7 +371,7 @@ export const createpowerMarkers2DCharts = async (req, res) => {
     req,
     res,
     generatepowerMarkers2DCharts,
-    "2D 分图生成成功"
+    "2D 分图生成成功",
   );
 };
 
@@ -345,7 +383,7 @@ export const createBoxMarkersCharts = async (req, res) => {
     req,
     res,
     generateBoxMarkersCharts,
-    "箱线图生成成功"
+    "箱线图生成成功",
   );
 };
 
@@ -354,7 +392,7 @@ export const createGeneratorTemperature = async (req, res) => {
     req,
     res,
     generateGeneratorTemperature,
-    "发电温度"
+    "发电温度",
   );
 };
 
@@ -379,7 +417,7 @@ export const createyawErrorCharts = async (req, res) => {
     req,
     res,
     getYawErrorBarSumCharts,
-    "静态偏航误差的绝对值机组台数分布情况"
+    "静态偏航误差的绝对值机组台数分布情况",
   );
 };
 export const createyawErrorBarSumCharts = async (req, res) => {
@@ -422,7 +460,7 @@ export const createCopyFileCsv = async (req, res) => {
     // 检查文件大小
     if (stats.size > MAX_FILE_SIZE) {
       throw new Error(
-        `生成的文件超过大小限制 (${MAX_FILE_SIZE / 1024 / 1024}MB)`
+        `生成的文件超过大小限制 (${MAX_FILE_SIZE / 1024 / 1024}MB)`,
       );
     }
 
@@ -434,7 +472,7 @@ export const createCopyFileCsv = async (req, res) => {
         filePath: tempFilePath,
         bucketName,
         objectName: `${objectName}/${path.basename(tempFilePath)}`,
-      }
+      },
     );
 
     if (!response?.data?.url) {
@@ -442,11 +480,6 @@ export const createCopyFileCsv = async (req, res) => {
     }
 
     console.log("文件上传成功");
-
-    // 4. 清理临时文件
-    // await fs.unlink(tempFilePath).catch(console.error);
-    // console.log("临时文件已清理");
-
     // 5. 返回成功响应
     res.json({
       success: true,
@@ -490,3 +523,32 @@ export const createCopyFileCsv = async (req, res) => {
     });
   }
 };
+export const createCopyFileImage = async (req, res) => {
+  try {
+    const { fieldInfo, bucketName, objectName } = req.body;
+
+    if (!fieldInfo || !bucketName || !objectName) {
+      return res.status(400).json({
+        success: false,
+        message: "缺少必要的参数",
+      });
+    }
+
+    const result = await processChartsImages(req.body);
+
+    res.json({
+      success: true,
+      data: {
+        downloadId: result.downloadId,
+        url: result.url,
+      },
+    });
+  } catch (error) {
+    console.error("文件处理失败:", error);
+
+    res.status(500).json({
+      success: false,
+      message: error.message,
+    });
+  }
+};

downLoadServer/src/server/controllers/uploadController.js

@@ -1,18 +1,18 @@
 /*
  * @Author: your name
  * @Date: 2025-04-28 14:46:54
- * @LastEditTime: 2025-05-26 16:19:14
+ * @LastEditTime: 2026-03-17 15:42:47
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /downLoadServer/src/server/controllers/uploadController.js
  */
 // src/server/controllers/uploadController.js
 import multer from "multer";
-import { uploadFileToMinIO } from "../utils/minioService.js";
+import { uploadBufferToMinIO } from "../utils/minioService.js";
 import path from "path";
 import fs from "fs-extra";
 import { fileURLToPath } from "url";
-
+import { minioClient } from "../utils/minioService.js";
 // 获取 __dirname
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -31,33 +31,46 @@ const upload = multer({ storage });
 
 // 上传文件的控制器
 export const uploadFile = async (req, res) => {
-  const bucketName = req.body.bucketName; // 您的桶名称
-  const filePath = req.body.filePath; // 从 req.body 中获取文件路径
-  const objectName = req.body.objectName; // 在 MinIO 中的文件名
-  // 检查 filePath 是否有效
-  if (typeof filePath !== "string" || !filePath) {
-    return res.status(400).json({ message: "Invalid file path" });
-  }
-  try {
-    // 确保文件存在
-    await fs.access(filePath);
-    // 调用 uploadFileToMinIO 函数上传文件
-    await uploadFileToMinIO(bucketName, filePath, objectName);
-    // 构造文件的 URL
-    const url = `http://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${bucketName}/${objectName}`;
-    // 删除临时文件
-    if (filePath) {
-      await fs.unlink(filePath);
-    } else {
-      console.error("filePath is undefined, cannot unlink");
-    }
+  const { bucketName, filePath, objectName } = req.body;
 
+  try {
+    const buffer = await fs.promises.readFile(filePath); // ✅ 关键
+    const url = await uploadBufferToMinIO(bucketName, objectName, buffer);
+    await fs.promises.unlink(filePath); // 删除临时文件
     res.status(200).json({ url, message: "File uploaded successfully" });
   } catch (error) {
     console.error("File upload failed:", error);
     res.status(500).json({ message: "File upload failed", error });
   }
 };
+// export const uploadFile = async (req, res) => {
+//   const bucketName = req.body.bucketName; // 您的桶名称
+//   const filePath = req.body.filePath; // 从 req.body 中获取文件路径
+//   const objectName = req.body.objectName; // 在 MinIO 中的文件名
+//   // 检查 filePath 是否有效
+//   if (typeof filePath !== "string" || !filePath) {
+//     return res.status(400).json({ message: "Invalid file path" });
+//   }
+//   try {
+//     // 确保文件存在
+//     await fs.access(filePath);
+//     // 调用 uploadFileToMinIO 函数上传文件
+//     await uploadBufferToMinIO(bucketName, filePath, objectName);
+//     // 构造文件的 URL
+//     const url = `http://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${bucketName}/${objectName}`;
+//     // 删除临时文件
+//     if (filePath) {
+//       await fs.unlink(filePath);
+//     } else {
+//       console.error("filePath is undefined, cannot unlink");
+//     }
+
+//     res.status(200).json({ url, message: "File uploaded successfully" });
+//   } catch (error) {
+//     console.error("File upload failed:", error);
+//     res.status(500).json({ message: "File upload failed", error });
+//   }
+// };
 export const uploadMiddleware = upload.single("file");
 
 export const downloadFile = async (req, res) => {
@@ -67,3 +80,35 @@ export const downloadFile = async (req, res) => {
   const url = `http://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${bucketName}/${objectName}`;
   res.status(200).json({ url, message: "File downloaded successfully" });
 };
+export const uploadStream = async (req, res) => {
+  try {
+    const bucketName = req.headers["bucketname"];
+    const objectName = req.headers["objectname"];
+
+    console.log("bucketName:", bucketName);
+    console.log("objectName:", objectName);
+
+    if (!bucketName || !objectName) {
+      return res.status(400).json({
+        success: false,
+        message: "缺少 bucketName 或 objectName",
+      });
+    }
+
+    await minioClient.putObject(bucketName, objectName, req);
+
+    const fileUrl = `http://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${bucketName}/${objectName}`;
+
+    res.json({
+      success: true,
+      url: fileUrl,
+    });
+  } catch (error) {
+    console.error("上传失败:", error);
+
+    res.status(500).json({
+      success: false,
+      message: error.message,
+    });
+  }
+};

downLoadServer/src/server/routes/chartRoutes.js

@@ -22,6 +22,7 @@ import {
   createyawErrorBarSumCharts,
   createProductionIndicatorTotal,
   createCopyFileCsv,
+  createCopyFileImage,
   createPlotlyChartsFen,
   createPlotlyCharts,
 } from "../controllers/chartController.js";
@@ -38,7 +39,7 @@ router.post("/TwoDMarkersChart", createTwoDMarkersChart);
 router.post("/TwoDMarkersChart1", createTwoDMarkersChart1);
 router.post(
   "/ColorbarInitTwoDmarkersChart",
-  createColorbarInitTwoDmarkersChart
+  createColorbarInitTwoDmarkersChart,
 );
 router.post("/powerMarkers2DCharts", createpowerMarkers2DCharts);
 
@@ -54,6 +55,7 @@ router.post("/yawErrorBarSumChart", createyawErrorBarSumCharts);
 router.post("/productionIndicatorTotal", createProductionIndicatorTotal);
 router.post("/radarChart", createRadarCharts);
 router.post("/CopyFileCsv", createCopyFileCsv);
+router.post("/CopyFileImage", createCopyFileImage);
 router.post("/PlotlyChartsFen", createPlotlyChartsFen);
 router.post("/PlotlyCharts", createPlotlyCharts);
 

downLoadServer/src/server/routes/exampleRoutes.js

@@ -4,6 +4,7 @@ import {
   uploadFile,
   uploadMiddleware,
   downloadFile,
+  uploadStream,
 } from "../controllers/uploadController.js"; // 导入上传控制器
 
 const router = express.Router();
@@ -11,5 +12,6 @@ const router = express.Router();
 router.get("/", getExample);
 router.post("/", createExample);
 router.post("/upload", uploadMiddleware, uploadFile); // 添加上传路由
+router.post("/uploadStream", uploadStream); // 添加上传路由
 router.post("/downLoadCsv", downloadFile);
 export default router;

downLoadServer/src/server/server.js

@@ -1,48 +1,97 @@
 import dotenv from "dotenv";
-// 加载 .env 文件中的环境变量
 dotenv.config();
+
 import express from "express";
+import cors from "cors";
+import path from "path";
+import { fileURLToPath } from "url";
+
 import { serverConfig } from "./config.js";
 import { logger } from "./middleware/logger.js";
 import { errorHandler } from "./middleware/errorHandler.js";
+
 import exampleRoutes from "./routes/exampleRoutes.js";
 import chartRoutes from "./routes/chartRoutes.js";
-import path from "path";
-import { fileURLToPath } from "url";
-// 引入 cors 模块
-import cors from "cors";
+
+import {
+  initChartService,
+  shutdownChartService,
+} from "./utils/chartService/index.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
-// 使用 cors 中间件
+
+/**
+ * =========================
+ * 中间件
+ * =========================
+ */
 app.use(cors());
-// 中间件
-app.use(express.json({ limit: "100mb" }));
+app.use(express.json({ limit: "10mb" }));
 app.use(logger);
 
-// 静态文件服务
-app.use("/images", express.static(path.join(process.cwd(), "src", "images")));
-app.use("/js", express.static(path.join(process.cwd(), "src", "public", "js")));
-app.use(
-  "/testData.json",
-  express.static(path.join(process.cwd(), "src", "testData.json"))
-);
+/**
+ * =========================
+ * 静态资源
+ * =========================
+ */
+app.use("/js", express.static(path.join(process.cwd(), "src/public/js")));
 
-// 路由
+/**
+ * =========================
+ * 路由
+ * =========================
+ */
 app.use("/examples", exampleRoutes);
 app.use("/chartServer/charts", chartRoutes);
 
-// 错误处理
+/**
+ * =========================
+ * 错误处理
+ * =========================
+ */
 app.use(errorHandler);
 
-export const startServer = () => {
-  app.listen(serverConfig.port, serverConfig.host, () => {
-    console.log(
-      `Server is running on http://${serverConfig.host}:${serverConfig.port}`
-    );
-  });
+/**
+ * =========================
+ * 启动服务
+ * =========================
+ */
+export const startServer = async () => {
+  try {
+    await initChartService(); // ✅统一入口
+
+    app.listen(serverConfig.port, serverConfig.host, () => {
+      console.log(
+        `🚀 Server running at http://${serverConfig.host}:${serverConfig.port}`,
+      );
+    });
+  } catch (err) {
+    console.error("❌ Server start failed:", err);
+    process.exit(1);
+  }
+};
+
+/**
+ * =========================
+ * 优雅退出
+ * =========================
+ */
+const shutdown = async () => {
+  console.log("🛑 Shutting down server...");
+
+  try {
+    await shutdownChartService();
+  } catch (err) {
+    console.error("Shutdown error:", err);
+  }
+
+  process.exit(0);
 };
 
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);
+
 export default app;

downLoadServer/src/server/utils/chartService/browserPool.js

@@ -0,0 +1,146 @@
+import puppeteer from "puppeteer";
+
+let browser;
+const pagePool = [];
+const MAX_PAGES = Number.parseInt(process.env.CHART_MAX_PAGES || "1", 10);
+const DEFAULT_TIMEOUT_MS = Number.parseInt(
+  process.env.CHART_RENDER_TIMEOUT_MS || "",
+  10,
+);
+const EFFECTIVE_TIMEOUT_MS = Number.isFinite(DEFAULT_TIMEOUT_MS)
+  ? DEFAULT_TIMEOUT_MS
+  : 500000;
+
+const isBrowserAlive = () => browser && browser.isConnected();
+
+const clearPagePool = async () => {
+  const pages = pagePool.splice(0, pagePool.length);
+  await Promise.allSettled(
+    pages.map(async (page) => {
+      if (page && !page.isClosed()) await page.close();
+    }),
+  );
+};
+
+const createPage = async () => {
+  if (!isBrowserAlive()) {
+    await initBrowserPool();
+  }
+
+  const page = await browser.newPage();
+  page.setDefaultTimeout(EFFECTIVE_TIMEOUT_MS);
+  page.setDefaultNavigationTimeout(EFFECTIVE_TIMEOUT_MS);
+  return page;
+};
+
+const isUsablePage = (page) =>
+  page && !page.isClosed() && page.browser()?.isConnected();
+
+/**
+ * 初始化浏览器 + 预创建 page
+ */
+export const initBrowserPool = async () => {
+  if (!isBrowserAlive()) {
+    await clearPagePool();
+    browser = null;
+
+    browser = await puppeteer.launch({
+      headless: "new",
+      executablePath: process.env.CHROME_PATH || undefined,
+      args: [
+        "--no-sandbox",
+        "--disable-setuid-sandbox",
+        "--disable-dev-shm-usage",
+        "--disable-background-timer-throttling",
+        "--disable-backgrounding-occluded-windows",
+        "--disable-renderer-backgrounding",
+      ],
+      // 避免渲染压力下 CDP 调用超时（对应报错：Runtime.callFunctionOn timed out）
+      protocolTimeout: EFFECTIVE_TIMEOUT_MS,
+    });
+
+    browser.on("disconnected", () => {
+      browser = null;
+      pagePool.splice(0, pagePool.length);
+    });
+
+    console.log("✅ Browser initialized");
+
+    // 预创建 page
+    for (let i = 0; i < MAX_PAGES; i++) {
+      pagePool.push(await createPage());
+    }
+
+    console.log(`✅ Page pool initialized: ${MAX_PAGES}`);
+  }
+};
+
+/**
+ * 获取 page（核心）
+ */
+export const getPage = async () => {
+  if (!isBrowserAlive()) {
+    await initBrowserPool();
+  }
+
+  if (pagePool.length > 0) {
+    while (pagePool.length > 0) {
+      const page = pagePool.pop();
+      if (isUsablePage(page)) return page;
+      await discardPage(page);
+    }
+  }
+
+  // pool 空了就新建（兜底）
+  return createPage();
+};
+
+/**
+ * 释放 page
+ */
+export const releasePage = async (page) => {
+  if (!page) return;
+
+  try {
+    if (!isUsablePage(page)) {
+      await discardPage(page);
+      return;
+    }
+
+    if (pagePool.length < MAX_PAGES) {
+      pagePool.push(page);
+    } else {
+      await page.close();
+    }
+  } catch (err) {
+    console.error("❌ releasePage error:", err);
+  }
+};
+
+export const discardPage = async (page) => {
+  if (!page) return;
+
+  try {
+    if (!page.isClosed()) await page.close();
+  } catch (err) {
+    console.warn("⚠️ discardPage failed:", err.message);
+  }
+};
+
+/**
+ * 关闭
+ */
+export const closeBrowserPool = async () => {
+  try {
+    await clearPagePool();
+
+    if (browser) {
+      await browser.close();
+      browser = null;
+    }
+
+    console.log("🛑 Browser pool closed");
+  } catch (err) {
+    console.error("❌ closeBrowserPool error:", err);
+  }
+};

downLoadServer/src/server/utils/chartService/chartRenderer.js

@@ -0,0 +1,85 @@
+import { getPage, releasePage } from "./browserPool.js";
+import { getPlotly } from "./plotlyLoader.js";
+
+export const renderToBuffer = async (data, layout) => {
+  let page;
+
+  try {
+    const timeoutMs = Number.isFinite(
+      Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10),
+    )
+      ? Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10)
+      : 500000;
+    page = await getPage(); // 🔹 从 page 池获取
+    page.setDefaultTimeout(timeoutMs);
+    page.setDefaultNavigationTimeout(timeoutMs);
+    const plotly = getPlotly();
+
+    const html = `
+      <html>
+        <head>
+          <script>${plotly}</script>
+        </head>
+        <body>
+          <div id="chart" style="width:800px;height:600px;"></div>
+          <script>
+            Plotly.newPlot('chart', ${JSON.stringify(data)}, ${JSON.stringify(
+      layout,
+    )})
+            .then(() => { window.chartRendered = true; });
+          </script>
+        </body>
+      </html>
+    `;
+
+    await page.setContent(html, {
+      waitUntil: "domcontentloaded",
+      timeout: timeoutMs,
+    });
+    await page.waitForFunction(() => window.chartRendered === true, {
+      timeout: timeoutMs,
+    });
+    return await page.screenshot({ type: "jpeg" });
+  } finally {
+    if (page) await releasePage(page); // 🔹 使用 releasePage 回收
+  }
+};
+
+export function buildHTML(traces, layout) {
+  const plotlyContent = getPlotly();
+
+  return `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <title>Chart</title>
+        <script>${plotlyContent}</script>
+        <style>
+          body { margin: 0; background: #e5ecf6; }
+          #chart { width: 800px; height: 600px; }
+        </style>
+      </head>
+      <body>
+        <div id="chart"></div>
+        <script>
+          (function() {
+            try {
+              const traces = ${JSON.stringify(traces)};
+              const layout = ${JSON.stringify(layout)};
+              Plotly.newPlot('chart', traces, layout, {
+                responsive: true,
+                displayModeBar: false,
+                staticPlot: true
+              })
+              .then(() => { window.chartReady = true; })
+              .catch(() => { window.chartError = true; });
+            } catch {
+              window.chartError = true;
+            }
+          })();
+        </script>
+      </body>
+    </html>
+  `;
+}

downLoadServer/src/server/utils/chartService/fileManager.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: your name
+ * @Date: 2026-03-17 11:49:34
+ * @LastEditTime: 2026-03-17 11:49:42
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/downLoadServer/src/server/utils/chartService/fileManager.js
+ */
+import path from "path";
+import fs from "fs-extra";
+import { randomUUID } from "crypto";
+
+const tempDir = path.join(process.cwd(), "tmp/charts");
+
+export async function initTempDir() {
+  await fs.ensureDir(tempDir);
+}
+
+export function createTempImagePath() {
+  return path.join(tempDir, `chart_${Date.now()}_${randomUUID()}.jpeg`);
+}
+
+export async function safeRemove(filePath) {
+  try {
+    await fs.remove(filePath);
+  } catch (e) {
+    if (e.code !== "ENOENT") {
+      console.error("remove file error:", e);
+    }
+  }
+}

downLoadServer/src/server/utils/chartService/index.js

@@ -0,0 +1,116 @@
+// src/server/utils/chartService/index.js
+import { discardPage, getPage, releasePage } from "./browserPool.js";
+import { buildHTML } from "./chartRenderer.js";
+import { chartLimit } from "./limiter.js";
+import { initBrowserPool, closeBrowserPool } from "./browserPool.js";
+import { initPlotly } from "./plotlyLoader.js";
+import { uploadBufferToMinIO } from "../minioService.js";
+
+let initialized = false;
+
+/**
+ * 初始化 chart 服务
+ */
+export const initChartService = async () => {
+  if (initialized) return;
+  await initBrowserPool();
+  await initPlotly();
+  initialized = true;
+  console.log("🚀 Chart service ready");
+};
+
+/**
+ * 关闭 chart 服务
+ */
+export const shutdownChartService = async () => {
+  try {
+    await closeBrowserPool();
+    initialized = false;
+    console.log("🛑 Chart service shutdown complete");
+  } catch (err) {
+    console.error("❌ Shutdown error:", err);
+  }
+};
+
+/**
+ * 核心渲染函数（带重试 + MinIO 上传）
+ * @param {Array} traces
+ * @param {Object} layout
+ * @param {string} bucketName
+ * @param {string} objectName
+ * @param {number} retry
+ */
+export async function renderChart({
+  traces,
+  layout,
+  bucketName,
+  objectName,
+  retry = 2,
+}) {
+  return chartLimit(async () => {
+    let attempt = 0;
+    const timeoutMs = Number.isFinite(
+      Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10),
+    )
+      ? Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10)
+      : 120000;
+
+    while (attempt <= retry) {
+      const page = await getPage();
+      let shouldDiscardPage = false;
+
+      try {
+        const html = buildHTML(traces, layout);
+
+        // 重置页面
+        await page.goto("about:blank");
+        await page.setContent(html, {
+          waitUntil: "domcontentloaded",
+          timeout: timeoutMs,
+        });
+
+        // 等待渲染完成
+        await Promise.race([
+          page.waitForFunction(() => window.chartReady === true, {
+            timeout: timeoutMs,
+          }),
+          page.waitForTimeout(timeoutMs),
+        ]);
+
+        // 检查错误
+        const hasError = await page.evaluate(() => window.chartError || false);
+        if (hasError) throw new Error("Chart render failed in browser");
+
+        const element = await page.$("#chart");
+        if (!element) throw new Error("Chart element not found");
+
+        // 截图
+        const buffer = await element.screenshot({ type: "jpeg", quality: 90 });
+
+        // 上传到 MinIO
+        const url = await uploadBufferToMinIO(bucketName, objectName, buffer);
+        return url;
+      } catch (err) {
+        shouldDiscardPage = true;
+        attempt++;
+        console.error(
+          `❌ renderChart error (attempt ${attempt}):`,
+          err.message,
+        );
+        if (attempt > retry) throw err;
+        await new Promise((r) => setTimeout(r, 1000));
+      } finally {
+        try {
+          if (shouldDiscardPage) {
+            await discardPage(page);
+          } else if (page && !page.isClosed()) {
+            await releasePage(page);
+          }
+        } catch (err) {
+          console.warn("page release failed, closing:", err);
+          await discardPage(page);
+        }
+      }
+    }
+  });
+}

downLoadServer/src/server/utils/chartService/limiter.js

@@ -0,0 +1,16 @@
+/*
+ * @Author: your name
+ * @Date: 2026-03-17 11:50:34
+ * @LastEditTime: 2026-03-17 11:50:35
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/downLoadServer/src/server/utils/chartService/limiter.js
+ */
+import pLimit from "p-limit";
+
+const renderConcurrency = Number.parseInt(
+  process.env.CHART_RENDER_CONCURRENCY || "1",
+  10,
+);
+
+export const chartLimit = pLimit(Number.isFinite(renderConcurrency) ? renderConcurrency : 1);

downLoadServer/src/server/utils/chartService/plotlyLoader.js

@@ -0,0 +1,22 @@
+import fs from "fs-extra";
+import path from "path";
+
+let plotlyContent = null;
+
+// 初始化 Plotly 内容
+export const initPlotly = async () => {
+  const plotlyPath = path.join(
+    process.cwd(),
+    "src/public/js/plotly-latest.min.js",
+  );
+  plotlyContent = await fs.readFile(plotlyPath, "utf-8");
+  console.log("✅ Plotly loaded");
+};
+
+// 获取 Plotly 内容
+export const getPlotly = () => {
+  if (!plotlyContent) {
+    throw new Error("Plotly not initialized, call initPlotly() first");
+  }
+  return plotlyContent;
+};

downLoadServer/src/server/utils/chartService/uploadService.js

@@ -0,0 +1,37 @@
+/*
+ * @Author: your name
+ * @Date: 2026-03-17 13:23:29
+ * @LastEditTime: 2026-03-17 13:23:30
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/downLoadServer/src/server/utils/chartService/uploadService1.js
+ */
+import FormData from "form-data";
+import axios from "axios";
+
+export const uploadBuffer = async (
+  buffer,
+  bucketName,
+  objectName,
+  extra = {},
+) => {
+  const formData = new FormData();
+
+  formData.append("file", buffer, "chart.jpg");
+  formData.append("bucketName", bucketName);
+  formData.append("objectName", objectName);
+
+  Object.keys(extra).forEach((key) => {
+    formData.append(key, extra[key]);
+  });
+
+  const res = await axios.post(
+    `${process.env.API_BASE_URL}/examples/upload`,
+    formData,
+    {
+      headers: formData.getHeaders(),
+    },
+  );
+
+  return res.data.url;
+};

downLoadServer/src/server/utils/chartService/uploader.js

@@ -0,0 +1,103 @@
+// // /*
+// //  * @Author: your name
+// //  * @Date: 2026-03-17 11:50:22
+// //  * @LastEditTime: 2026-03-17 13:23:48
+// //  * @LastEditors: bogon
+// //  * @Description: In User Settings Edit
+// //  * @FilePath: /performance-test/downLoadServer/src/server/utils/chartService/uploader.js
+// //  */
+// // import axios from "axios";
+
+// // export async function uploadImage(filePath, bucketName, objectName) {
+// //   const response = await axios.post(
+// //     `${process.env.API_BASE_URL}/examples/upload`,
+// //     {
+// //       filePath,
+// //       bucketName,
+// //       objectName,
+// //     },
+// //   );
+
+// //   return response?.data?.url;
+// // }
+// // uploader.js
+// import axios from "axios";
+// import FormData from "form-data";
+
+// /**
+//  * 上传图片 buffer 到服务器
+//  * @param {Buffer} buffer - 生成的图表图片
+//  * @param {string} bucketName - 存储桶名称
+//  * @param {string} objectName - 文件名
+//  * @returns {Promise<string>} 返回上传后的 URL
+//  */
+// export const uploadImage = async (buffer, bucketName, objectName) => {
+//   try {
+//     const form = new FormData();
+
+//     // 添加文件字段
+//     form.append("file", buffer, {
+//       filename: objectName, // 上传文件名
+//       contentType: "image/jpeg", // 上传内容类型
+//     });
+
+//     // 如果服务端需要 bucketName，也可以放在表单字段里
+//     form.append("bucketName", bucketName);
+
+//     const response = await axios.post(
+//       "http://0.0.0.0:3001/examples/upload",
+//       form,
+//       {
+//         headers: {
+//           ...form.getHeaders(), // FormData 必须的 headers
+//         },
+//         maxBodyLength: Infinity, // 防止大文件被限制
+//       },
+//     );
+
+//     // 假设服务端返回 JSON 中包含 url 字段
+//     return response.data.url;
+//   } catch (err) {
+//     console.error("❌ Error uploading file to server:", err.message);
+//     throw err;
+//   }
+// };
+// src/server/utils/uploader.js
+import axios from "axios";
+import FormData from "form-data";
+
+/**
+ * 上传图片 buffer 到 HTTP 服务
+ * @param {Buffer} buffer - 生成的图表图片
+ * @param {string} bucketName - 存储桶名称
+ * @param {string} objectName - 文件名
+ * @returns {Promise<string>} 返回上传后的 URL
+ */
+export const uploadImage = async (buffer, bucketName, objectName) => {
+  try {
+    const form = new FormData();
+
+    form.append("file", buffer, {
+      filename: objectName,
+      contentType: "image/jpeg",
+    });
+
+    form.append("bucketName", bucketName);
+
+    const response = await axios.post(
+      "http://0.0.0.0:3001/examples/upload",
+      form,
+      {
+        headers: {
+          ...form.getHeaders(),
+        },
+        maxBodyLength: Infinity,
+      },
+    );
+
+    return response.data.url;
+  } catch (err) {
+    console.error("❌ Error uploading file to server:", err.message);
+    throw err;
+  }
+};

downLoadServer/src/server/utils/chartsCom/3DDrawingChart.js

@@ -1,11 +1,3 @@
-/*
- * @Author: your name
- * @Date: 2025-04-14 16:09:13
- * @LastEditTime: 2025-07-14 15:00:16
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/3DDrawingChart.js
- */
 import puppeteer from "puppeteer";
 import fs from "fs-extra";
 import path from "path";
@@ -14,6 +6,11 @@ import axios from "axios";
 import { colorSchemes } from "../colors.js";
 export const generate3DDrawingChart = async (data, bucketName, objectName) => {
   try {
+    const timeoutMs = Number.isFinite(
+      Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10),
+    )
+      ? Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10)
+      : 500000;
     const colorSchemesItem = colorSchemes[0].colors;
     // 创建临时目录
     const tempDir = path.join(process.cwd(), "images");
@@ -39,10 +36,13 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
       executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
 
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
+      protocolTimeout: timeoutMs,
     });
 
     try {
       const page = await browser.newPage();
+      page.setDefaultTimeout(timeoutMs);
+      page.setDefaultNavigationTimeout(timeoutMs);
 
       // 准备图表数据
       const chartDataset = data.data[0]; // 修改为 data.chartData
@@ -86,6 +86,7 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
             fixedrange: true, // 防止缩放
             tickcolor: "black",
             tickangle: -10,
+            zeroline: false,
             title: {
               text: data.xaixs,
             },
@@ -104,6 +105,7 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
             showbackground: true,
             tickcolor: "black",
             tickangle: 25,
+            zeroline: false,
             title: {
               text: data.yaixs,
             },
@@ -119,6 +121,7 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
             tickcolor: "black",
             tickangle: -90,
             nticks: 3,
+            zeroline: false,
             title: {
               text: data.zaixs,
             },
@@ -192,12 +195,14 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
         `;
       // 设置页面内容
       await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
+        // 这里没有外部网络请求，使用 domcontentloaded 更稳定，避免 30s 默认 navigation timeout
+        waitUntil: "domcontentloaded",
+        timeout: timeoutMs,
       });
 
       // 等待图表渲染完成，延长超时时间
       await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 150000, // 延长到 120 秒
+        timeout: timeoutMs,
       });
 
       // 截图并保存到临时文件

downLoadServer/src/server/utils/chartsCom/BarChart.js

@@ -1,208 +1,135 @@
-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";
-
-/**
- * 生成柱状图并上传
- * @param {Object} data - 图表数据
- * @returns {Promise<String>} - 返回图片URL
+/*
+ * 柱状图（服务化版本）
  */
-export const generateBarChart = async (data, bucketName, objectName) => {
-  try {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(tempDir, `temp_chart_${Date.now()}.jpeg`);
-
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.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();
+import { renderChart } from "../chartService/index.js";
 
-      // 准备图表数据
-      const chartDataset = data.data[0];
-      const trace = {
-        x: chartDataset.xData,
-        y: chartDataset.yData,
-        type: "bar",
-        marker: {
-          color: "#588CF0",
-        },
-        line: {
-          color: "#588CF0",
-        },
-        name: chartDataset.title || "数据",
-        hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br>`,
-      };
-      const yValues = chartDataset.yData || [];
-      const minY = Math.min(...yValues, -5);
-      const maxY = Math.max(...yValues, 5);
-
-      // 准备布局配置
-      const layout = {
-        title: {
-          text: chartDataset.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: data.xaixs || "X轴",
-          gridcolor: "rgb(255,255,255)",
-          type: data.xaixs === "机组" ? "category" : undefined,
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        yaxis: {
-          title: data.yaixs || "Y轴",
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          title_standoff: 100,
-          range:
-            data.data[0].title === "温度偏差"
-              ? [minY - 1, maxY + 1]
-              : undefined, // ✅ 手动设置 Y 轴范围
-        },
-        margin: {
-          l: 50,
-          r: 50,
-          t: 50,
-          b: 50,
-        },
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-        bgcolor: "#e5ecf6",
-        autosize: true,
-      };
+export const generateBarChart = async (data, bucketName, objectName) => {
+  /**
+   * =========================
+   * 1. 数据校验
+   * =========================
+   */
+  const chartDataset = data?.data?.[0];
 
-      // 如果 Y 轴是 "温度偏差"，添加两条红色虚线
-      if (data.data[0].title === "温度偏差") {
-        layout.shapes = [
-          {
-            type: "line",
-            xref: "paper",
-            yref: "y",
-            x0: 0,
-            x1: 1,
-            y0: 5,
-            y1: 5,
-            line: {
-              color: "red",
-              width: 2,
-              dash: "dash",
-            },
-            hovertext: "上限: 5°C",
-            hoverinfo: "text",
-          },
-          {
-            type: "line",
-            xref: "paper",
-            yref: "y",
-            x0: 0,
-            x1: 1,
-            y0: -5,
-            y1: -5,
-            line: {
-              color: "red",
-              width: 2,
-              dash: "dash",
-            },
-            hovertext: "下限: -5°C",
-            hoverinfo: "text",
-          },
-        ];
-        layout.hovermode = "x unified";
-      }
+  if (!chartDataset) {
+    throw new Error("Invalid chart data");
+  }
 
-      // 如果是机组数据，设置刻度值
-      if (data.xaixs === "机组" || data.xaixs === "机组名称") {
-        layout.xaxis.tickvals = chartDataset.xData;
-        layout.xaxis.ticktext = chartDataset.xData;
-      }
+  const xData = chartDataset.xData || [];
+  const yData = chartDataset.yData || [];
 
-      // 创建HTML内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <script>${plotlyContent}</script>
-            <style>
-              body { margin: 0; }
-              #chart { width: 800px; height: 600px; }
-            </style>
-          </head>
-          <body>
-            <div id="chart"></div>
-            <script>
-              window.onload = function() {
-                const trace = ${JSON.stringify(trace)};
-                const layout = ${JSON.stringify(layout)};
-                Plotly.newPlot('chart', [trace], layout).then(() => {
-                  window.chartRendered = true;
-                });
-              };
-            </script>
-          </body>
-        </html>
-      `;
+  /**
+   * =========================
+   * 2. traces
+   * =========================
+   */
+  const traces = [
+    {
+      x: xData,
+      y: yData,
+      type: "bar",
+      marker: {
+        color: "#588CF0",
+      },
+      name: chartDataset.title || "数据",
+      hovertemplate: `${data.xaixs}: %{x}<br>${data.yaixs}: %{y}<extra></extra>`,
+    },
+  ];
 
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
+  /**
+   * =========================
+   * 3. layout
+   * =========================
+   */
+  const minY = Math.min(...yData, -5);
+  const maxY = Math.max(...yData, 5);
 
-      // 等待图表渲染完成
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 60000,
-      });
+  const layout = {
+    title: {
+      text: chartDataset.title,
+      font: { size: 16 },
+    },
+    xaxis: {
+      title: data.xaixs || "X轴",
+      type:
+        data.xaixs === "机组" || data.xaixs === "机组名称"
+          ? "category"
+          : undefined,
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    yaxis: {
+      title: data.yaixs || "Y轴",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+      range:
+        chartDataset.title === "温度偏差" ? [minY - 1, maxY + 1] : undefined,
+    },
+    margin: { l: 50, r: 50, t: 50, b: 50 },
+    showlegend: true,
+  };
 
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+  /**
+   * =========================
+   * 4. 温度偏差（上下限线）
+   * =========================
+   */
+  if (chartDataset.title === "温度偏差") {
+    layout.shapes = [
+      {
+        type: "line",
+        xref: "paper",
+        yref: "y",
+        x0: 0,
+        x1: 1,
+        y0: 5,
+        y1: 5,
+        line: { color: "red", width: 2, dash: "dash" },
+      },
+      {
+        type: "line",
+        xref: "paper",
+        yref: "y",
+        x0: 0,
+        x1: 1,
+        y0: -5,
+        y1: -5,
+        line: { color: "red", width: 2, dash: "dash" },
+      },
+    ];
 
-      // 上传图片到服务器
-      const formData = new FormData();
-      formData.append("file", fs.createReadStream(tempFilePath));
-      formData.append("type", "chart");
-      formData.append("engineCode", data.engineCode);
-      formData.append("analysisTypeCode", data.analysisTypeCode);
+    layout.hovermode = "x unified";
+  }
 
-      // 发送上传请求
-      const response = await axios.post(
-        `${process.env.API_BASE_URL}/examples/upload`,
-        { filePath: tempFilePath, bucketName, objectName },
-      );
-      return response?.data?.url;
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    // console.error("生成图表失败:", error);
-    throw error;
+  /**
+   * =========================
+   * 5. 机组类目处理
+   * =========================
+   */
+  if (data.xaixs === "机组" || data.xaixs === "机组名称") {
+    layout.xaxis.tickvals = xData;
+    layout.xaxis.ticktext = xData;
   }
+
+  /**
+   * =========================
+   * 6. 调用统一渲染
+   * =========================
+   */
+  return await renderChart({
+    traces,
+    layout,
+    bucketName,
+    objectName,
+  });
 };

downLoadServer/src/server/utils/chartsCom/BoxLineCharts.js

@@ -1,179 +1,173 @@
 /*
  * @Author: your name
  * @Date: 2025-05-12 17:40:10
- * @LastEditTime: 2025-07-10 13:57:37
+ * @LastEditTime: 2026-03-18 09:18:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /downLoadServer/src/server/utils/chartsCom/BoxLineCharts.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";
 
-/**
- * 生成柱状图并上传
- * @param {Object} data - 图表数据
- * @returns {Promise<String>} - 返回图片URL
+/*
+ * 箱线图（终极稳定版）
  */
+import { renderChart } from "../chartService/index.js";
 
-export const generateBoxLineChart = async (data, bucketName, objectName) => {
-  try {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(tempDir, `temp_chart_${Date.now()}.jpeg`);
-
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.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"],
-    });
+const normalizeBoxXValue = (x) => {
+  const date = new Date(x);
+  if (!Number.isNaN(date.getTime())) {
+    return date.toISOString().slice(0, 10);
+  }
+  return String(x);
+};
 
-    try {
-      const page = await browser.newPage();
-
-      // 准备图表数据
-      const chartDataset = data.data[0];
-
-      // 过滤数据
-      const filteredData = filterData(chartDataset);
-
-      // 绘制箱线图
-      const trace = {
-        x: filteredData.xData,
-        y: filteredData.yData,
-        type: "box",
-        marker: {
-          color: "#263649",
-        },
-        line: {
-          width: 0.8,
-        },
-        boxpoints: false,
-        boxmean: false,
-        name: filteredData.title,
-        fillcolor: "#458EF7",
-        hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br>`,
-      };
-
-      let trace2 = {};
-      if (filteredData.medians && filteredData.medians.x.length > 0) {
-        trace2 = {
-          x: filteredData.medians.x,
-          y: filteredData.medians.y,
-          mode: "markers",
-          marker: {
-            color: "#406DAB",
-            size: 3,
-          },
-          name: `${filteredData.title} - 中位点`,
-          type: "scatter",
-        };
-      }
-      // 准备布局配置
-      const layout = {
-        title: {
-          text: filteredData.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: data.xaixs || "X轴",
-          gridcolor: "rgb(255,255,255)",
-          type: data.xaixs === "机组" ? "category" : undefined,
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        yaxis: {
-          title: data.yaixs || "Y轴",
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        showlegend: false,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-        bgcolor: "#e5ecf6",
-      };
-
-      // 创建HTML内容
-      const htmlContent = `
-          <!DOCTYPE html>
-          <html>
-            <head>
-              <script>${plotlyContent}</script>
-              <style>
-                body { margin: 0; }
-                #chart { width: 800px; height: 600px; }
-              </style>
-            </head>
-            <body>
-              <div id="chart"></div>
-              <script>
-                window.onload = function() {
-                  const trace = ${JSON.stringify(trace)};
-                  const layout = ${JSON.stringify(layout)};
-                  Plotly.newPlot('chart', [trace, ${JSON.stringify(
-                    trace2,
-                  )}], 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 },
+const quantile = (sortedValues, p) => {
+  if (!sortedValues.length) return null;
+  const index = (sortedValues.length - 1) * p;
+  const lower = Math.floor(index);
+  const upper = Math.ceil(index);
+  if (lower === upper) return sortedValues[lower];
+  return (
+    sortedValues[lower] +
+    (sortedValues[upper] - sortedValues[lower]) * (index - lower)
+  );
+};
+
+const buildBoxStats = (xData = [], yData = []) => {
+  const grouped = new Map();
+  const len = Math.min(xData.length, yData.length);
+
+  for (let i = 0; i < len; i++) {
+    const x = xData[i];
+    const y = Number(yData[i]);
+    if (x === null || x === undefined || x === "") continue;
+    if (!Number.isFinite(y)) continue;
+
+    const key = normalizeBoxXValue(x);
+    if (!grouped.has(key)) grouped.set(key, []);
+    grouped.get(key).push(y);
+  }
+
+  const x = [];
+  const q1 = [];
+  const median = [];
+  const q3 = [];
+  const lowerfence = [];
+  const upperfence = [];
+  const mean = [];
+
+  [...grouped.entries()]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .forEach(([key, values]) => {
+      const sortedValues = values.sort((a, b) => a - b);
+      x.push(key);
+      q1.push(quantile(sortedValues, 0.25));
+      median.push(quantile(sortedValues, 0.5));
+      q3.push(quantile(sortedValues, 0.75));
+      lowerfence.push(sortedValues[0]);
+      upperfence.push(sortedValues[sortedValues.length - 1]);
+      mean.push(
+        sortedValues.reduce((sum, value) => sum + value, 0) /
+          sortedValues.length,
       );
-      return response?.data?.url;
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    console.error("生成图表失败:", error);
-    throw error;
+    });
+
+  return { x, q1, median, q3, lowerfence, upperfence, mean };
+};
+
+/**
+ * 生成箱线图并上传
+ */
+export const generateBoxLineChart = async (data, bucketName, objectName) => {
+  const chartDataset = data.data[0];
+
+  // ✅ 数据过滤（保留你的逻辑）
+  const filteredData = filterData(chartDataset);
+  const stats = buildBoxStats(filteredData.xData, filteredData.yData);
+
+  // ✅ 主箱线图
+  const trace = {
+    x: stats.x,
+    q1: stats.q1,
+    median: stats.median,
+    q3: stats.q3,
+    lowerfence: stats.lowerfence,
+    upperfence: stats.upperfence,
+    mean: stats.mean,
+    type: "box",
+    marker: {
+      color: "#263649",
+    },
+    line: {
+      width: 0.8,
+    },
+    boxpoints: false,
+    boxmean: false,
+    name: filteredData.title,
+    fillcolor: "#458EF7",
+    hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br>`,
+  };
+
+  // ✅ 中位点（可选）
+  const traces = [trace];
+
+  if (stats.x.length) {
+    traces.push({
+      x: stats.x,
+      y: stats.median,
+      mode: "markers",
+      marker: {
+        color: "#406DAB",
+        size: 3,
+      },
+      name: `${filteredData.title} - 中位点`,
+      type: "scatter",
+    });
   }
+
+  // ✅ layout
+  const layout = {
+    title: {
+      text: filteredData.title,
+      font: {
+        size: 16,
+        weight: "bold",
+      },
+    },
+    xaxis: {
+      title: data.xaixs || "X轴",
+      gridcolor: "#fff",
+      type: data.xaixs === "机组" ? "category" : undefined,
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    yaxis: {
+      title: data.yaixs || "Y轴",
+      gridcolor: "#fff",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    showlegend: false,
+    plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
+  };
+
+  // ✅ 🚀 统一走 chartService
+  return await renderChart({
+    traces,
+    layout,
+    bucketName,
+    objectName,
+  });
 };
 
 // 过滤数据的函数

downLoadServer/src/server/utils/chartsCom/BoxMarkersCharts.js

@@ -1,46 +1,120 @@
 /*
  * @Author: your name
  * @Date: 2025-05-13 11:02:32
- * @LastEditTime: 2025-07-10 13:59:24
+ * @LastEditTime: 2026-03-18 09:11:01
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /downLoadServer/src/server/utils/chartsCom/BoxMarkersCharts.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";
-
-// 判断时间戳是否在选择的日期范围内
-const isInDateRange = (timestamp) => {
-  const [startDate, endDate] = [];
+// 绘制箱线图
+/*
+ * 箱线图 + 中位点（终极稳定版）
+ */
+import { renderChart } from "../chartService/index.js";
+
+/**
+ * 判断时间范围
+ */
+const isInDateRange = (timestamp, startDate, endDate) => {
   if (!startDate || !endDate) return true;
 
-  const date = new Date(timestamp);
-  return date >= new Date(startDate) && date <= new Date(endDate);
+  const t = new Date(timestamp).getTime();
+  const start = new Date(startDate).getTime();
+  const end = new Date(endDate).getTime();
+  if (Number.isNaN(t) || Number.isNaN(start) || Number.isNaN(end)) return true;
+  return t >= start && t <= end;
+};
+
+const normalizeBoxXValue = (x) => {
+  const date = new Date(x);
+  if (!Number.isNaN(date.getTime())) {
+    return date.toISOString().slice(0, 10);
+  }
+  return String(x);
+};
+
+const quantile = (sortedValues, p) => {
+  if (!sortedValues.length) return null;
+  const index = (sortedValues.length - 1) * p;
+  const lower = Math.floor(index);
+  const upper = Math.ceil(index);
+  if (lower === upper) return sortedValues[lower];
+  return (
+    sortedValues[lower] +
+    (sortedValues[upper] - sortedValues[lower]) * (index - lower)
+  );
 };
 
-// 过滤数据
-const filterData = (group) => {
+const buildBoxStats = (xData = [], yData = []) => {
+  const grouped = new Map();
+  const len = Math.min(xData.length, yData.length);
+
+  for (let i = 0; i < len; i++) {
+    const x = xData[i];
+    const y = Number(yData[i]);
+    if (x === null || x === undefined || x === "") continue;
+    if (!Number.isFinite(y)) continue;
+
+    const key = normalizeBoxXValue(x);
+    if (!grouped.has(key)) grouped.set(key, []);
+    grouped.get(key).push(y);
+  }
+
+  const x = [];
+  const q1 = [];
+  const median = [];
+  const q3 = [];
+  const lowerfence = [];
+  const upperfence = [];
+  const mean = [];
+
+  [...grouped.entries()]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .forEach(([key, values]) => {
+      const sortedValues = values.sort((a, b) => a - b);
+      x.push(key);
+      q1.push(quantile(sortedValues, 0.25));
+      median.push(quantile(sortedValues, 0.5));
+      q3.push(quantile(sortedValues, 0.75));
+      lowerfence.push(sortedValues[0]);
+      upperfence.push(sortedValues[sortedValues.length - 1]);
+      mean.push(
+        sortedValues.reduce((sum, value) => sum + value, 0) /
+          sortedValues.length,
+      );
+    });
+
+  return { x, q1, median, q3, lowerfence, upperfence, mean };
+};
+
+/**
+ * 过滤数据（修复版）
+ */
+const filterData = (group, options = {}) => {
+  const { startDate, endDate } = options;
+
   const filteredXData = [];
   const filteredYData = [];
   const filteredMedians = group.medians ? { x: [], y: [] } : null;
 
-  group.medians.x.forEach((timestamp, index) => {
-    if (isInDateRange(timestamp)) {
-      filteredMedians.x.push(timestamp);
-      filteredMedians.y.push(group.medians.y[index]);
-    }
-  });
+  // ✅ medians 安全处理
+  if (group.medians?.x?.length) {
+    group.medians.x.forEach((timestamp, index) => {
+      if (isInDateRange(timestamp, startDate, endDate)) {
+        filteredMedians.x.push(timestamp);
+        filteredMedians.y.push(group.medians.y[index]);
+      }
+    });
+  }
 
+  // ✅ 主数据
   group.xData.forEach((timestamp, index) => {
-    if (isInDateRange(timestamp)) {
+    if (isInDateRange(timestamp, startDate, endDate)) {
       filteredXData.push(timestamp);
       filteredYData.push(group.yData[index]);
     }
   });
+
   return {
     ...group,
     xData: filteredXData,
@@ -49,7 +123,9 @@ const filterData = (group) => {
   };
 };
 
-// 绘制箱线图
+/**
+ * 生成箱线图（带中位点）
+ */
 export const generateBoxMarkersCharts = async (
   data,
   bucketName,
@@ -57,24 +133,29 @@ export const generateBoxMarkersCharts = async (
 ) => {
   const { data: chartData, xaixs, yaixs, analysisTypeCode } = data;
 
-  const filteredData = chartData.map((group) => filterData(group));
+  // ✅ 支持时间过滤
+  const filteredData = chartData.map((group) =>
+    filterData(group, {
+      startDate: data.startDate,
+      endDate: data.endDate,
+    }),
+  );
 
   const traces = [];
-  const medianMarkers = [];
-  // 获取 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");
 
   filteredData.forEach((group) => {
+    const stats = buildBoxStats(group.xData, group.yData);
+    if (!stats.x.length) return;
+
+    // ✅ 箱线图
     traces.push({
-      x: group.xData,
-      y: group.yData,
+      x: stats.x,
+      q1: stats.q1,
+      median: stats.median,
+      q3: stats.q3,
+      lowerfence: stats.lowerfence,
+      upperfence: stats.upperfence,
+      mean: stats.mean,
       type: "box",
       name: group.title,
       marker: { color: "#263649" },
@@ -85,114 +166,69 @@ export const generateBoxMarkersCharts = async (
       hovertemplate:
         `<b>${xaixs}</b>: %{x}<br>` +
         `<b>最大值</b>: %{upperfence}<br>` +
-        `<b>上四分位数 (Q3)</b>: %{q3}<br>` +
-        `<b>中位数 (Median)</b>: %{median}<br>` +
-        `<b>下四分位数 (Q1)</b>: %{q1}<br>` +
+        `<b>Q3</b>: %{q3}<br>` +
+        `<b>中位数</b>: %{median}<br>` +
+        `<b>Q1</b>: %{q1}<br>` +
         `<b>最小值</b>: %{lowerfence}<br>` +
         `<b>均值</b>: %{mean}<br>` +
         `<extra></extra>`,
     });
 
-    if (group.medians && group.medians.x.length > 0) {
-      medianMarkers.push({
-        x: group.medians.x,
-        y: group.medians.y,
-        mode: "markers",
-        marker: { color: "#f00", size: 3 },
-        name: `${group.title} - 中位点`,
-        type: "scatter",
-        hovertemplate: `<b>${xaixs}</b>: %{x} <br> <b>${yaixs}</b>: %{y} <br><b>中位点</b>: %{y}<br><extra></extra>`,
-      });
-    }
+    // ✅ 中位点 scatter
+    traces.push({
+      x: stats.x,
+      y: stats.median,
+      mode: "markers",
+      marker: { color: "#f00", size: 3 },
+      name: `${group.title} - 中位点`,
+      type: "scatter",
+      hovertemplate:
+        `<b>${xaixs}</b>: %{x}<br>` +
+        `<b>${yaixs}</b>: %{y}<br>` +
+        `<b>中位点</b>: %{y}<br>` +
+        `<extra></extra>`,
+    });
   });
 
+  // ✅ layout（更干净）
   const layout = {
     title: {
-      text: analysisTypeCode + chartData[0].engineName,
-      font: { size: 16, weight: "bold" },
+      text: analysisTypeCode + (chartData[0]?.engineName || ""),
+      font: { size: 16 },
     },
     xaxis: {
       title: xaixs,
       type: "date",
       tickformat: "%Y-%m-%d",
+      gridcolor: "#fff",
       gridcolor: "rgb(255,255,255)",
       tickcolor: "rgb(255,255,255)",
       backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
     },
     yaxis: {
       title: yaixs,
       gridcolor: "rgb(255,255,255)",
       tickcolor: "rgb(255,255,255)",
       backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
     },
     plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
     showlegend: true,
   };
 
-  // 使用 Puppeteer 生成图表的截图
-  const browser = await puppeteer.launch({
-    headless: "new",
-    // 根据系统改路径
-    executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-    args: ["--no-sandbox", "--disable-setuid-sandbox"],
+  // ✅ 🚀 核心：统一走 chartService
+  return await renderChart({
+    traces,
+    layout,
+    bucketName,
+    objectName,
   });
-
-  try {
-    const page = await browser.newPage();
-    const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-          <head>
-           <meta charset="UTF-8">
-           <script>${plotlyContent}</script>
-            <style>
-              body { margin: 0; }
-              #chart { width: 800px; height: 600px; }
-            </style>
-          </head>
-          <body>
-            <div id="chart"></div>
-            <script>
-              window.onload = function() {
-                const traces = ${JSON.stringify([...traces, ...medianMarkers])};
-                const layout = ${JSON.stringify(layout)};
-                Plotly.newPlot('chart', traces, layout).then(() => {
-                  window.chartRendered = true;
-                });
-              };
-            </script>
-          </body>
-        </html>
-      `;
-
-    await page.setContent(htmlContent, { waitUntil: "networkidle0" });
-    await page.waitForFunction(() => window.chartRendered === true, {
-      timeout: 60000,
-    });
-
-    // 截图并保存到临时文件
-    const tempFilePath = path.join(
-      process.cwd(),
-      "images",
-      `chart_${Date.now()}.jpeg`,
-    );
-    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,
-      },
-    );
-
-    return response?.data?.url;
-  } finally {
-    await browser.close();
-  }
 };

downLoadServer/src/server/utils/chartsCom/ColorbarInitTwoDmarkersChart.js

@@ -1,224 +1,126 @@
 /*
- * @Author: your name
- * @Date: 2025-04-28 10:27:00
- * @LastEditTime: 2025-07-09 14:30:16
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/ColorbarInitTwoDmarkersChart.js
+ * 2D 散点图（带 colorbar）- 终极稳定版
  */
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
+import { renderChart } from "../chartService/index.js";
 import { colorSchemes } from "../colors.js";
-import axios from "axios";
+
+const maxFiniteValue = (values = []) => {
+  let max = -Infinity;
+  for (const value of values) {
+    const n = Number(value);
+    if (Number.isFinite(n) && n > max) {
+      max = n;
+    }
+  }
+  return max === -Infinity ? 0 : max;
+};
 
 export const generateColorbarInitTwoDmarkersChart = async (
   data,
   bucketName,
   objectName,
 ) => {
-  try {
-    const colorsBar = colorSchemes[4].colors;
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_scatter_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}`, // 根据系统改路径
+  const colorsBar = colorSchemes[4].colors;
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    });
+  const scatterData = data.data?.[0];
+  if (!scatterData) throw new Error("scatterData missing");
 
-    try {
-      const page = await browser.newPage();
+  // ✅ 构造颜色刻度（更合理）
+  // const colorStops = [colorsBar[0], colorsBar[4], colorsBar[8], colorsBar[12]];
 
-      // 提取散点数据
-      const scatterData = data.data && data.data[0];
+  // const colorscale = colorStops.map((color, index) => [
+  //   index / (colorStops.length - 1),
+  //   color,
+  // ]);
+  const colorscale = [
+    [0, "#e6f4f5"], // 0%
+    [0.1, "#74ABF7"], // 1%
+    // [0.1, "#3E7AF6"], // 1%
+    [0.2, "#0000E4"], // 30%
+    [1, "#020085"], // 100%
+  ];
+  // ✅ colorbar 数据
+  const hasColorbar =
+    scatterData.colorbar &&
+    scatterData.colorbar.length === scatterData.xData.length;
 
-      // 如果有 colorbar 数据
-      const uniqueTimeLabels =
-        scatterData.colorbar &&
-        scatterData.colorbar.length === scatterData.xData.length
-          ? [...new Set(scatterData.colorbar)] // 从 colorbar 中提取唯一的标签
-          : [...new Set(scatterData.yData)]; // 如果没有 colorbar，使用 data.color
+  const colorValues = hasColorbar ? scatterData.colorbar : scatterData.yData;
 
-      const ticktext = uniqueTimeLabels.map((dateStr) => dateStr); // 格式化为标签
-      const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 设置 tick 值
-      const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
-        acc[curr] = index + 1;
-        return acc;
-      }, {});
-      // 获取 colorbar 的最小值和最大值来计算比例值
-      const minValue = Math.min(...new Set(uniqueTimeLabels));
-      const maxValue = Math.max(...new Set(uniqueTimeLabels));
-      const colorStops = [
-        colorsBar[0],
-        colorsBar[4],
-        colorsBar[8],
-        colorsBar[12],
-      ];
+  // ✅ trace
+  const trace = {
+    x: scatterData.xData,
+    y: scatterData.yData,
+    mode: "markers",
+    type: "scattergl",
+    text: scatterData.engineName,
 
-      // 计算渐变比例
-      const colors = colorStops.map((color, index) => {
-        const proportion = index / (colorStops.length - 1); // 计算比例值 (0, 1/3, 2/3, 1)
-        return [proportion, color]; // 创建比例-颜色映射
-      });
-      // 计算颜色值映射
-      let colorValues = [];
-      if (
-        scatterData.colorbar &&
-        scatterData.colorbar.length === scatterData.xData.length
-      ) {
-        colorValues = scatterData.colorbar.map((date) => timeMapping[date]);
-      } else {
-        colorValues = scatterData.yData.map((date) => timeMapping[date]);
-      }
+    marker: {
+      color: colorValues,
+      colorscale,
+      size: 4,
+      line: {
+        color: "#fff",
+        width: 0.3,
+      },
 
-      // 绘制 2D 散点图
-      const trace = {
-        x: scatterData.xData,
-        y: scatterData.yData,
-        mode: "markers",
-        type: "scattergl", // 使用 scattergl 提高性能
-        text: scatterData.engineName, // 提示文本
-        marker: {
-          color: scatterData.colorbar, // 根据 colorbar 映射的数字设置颜色
-          colorscale: colors, // 使用自定义颜色比例
-          colorbar: scatterData.colorbar
-            ? { title: { text: scatterData.colorbartitle || "" } }
-            : undefined, // 如果有 colorbar 显示，否则不显示
-          size: 4, // 点的大小
-          line: {
-            color: "#fff", // 让边框颜色和点颜色相同
-            width: 0.3, // 设置边框宽度
-          },
-        },
-      };
+      // ✅ colorbar 显示
+      colorbar: hasColorbar
+        ? { title: { text: scatterData.colorbartitle || "" } }
+        : undefined,
+    },
+  };
 
-      // 设置 hovertemplate
-      if (scatterData.colorbar) {
-        trace.customdata = scatterData.colorbar || scatterData.color;
-      }
-      if (scatterData.colorbartitle === "密度") {
-        trace.marker.cmin = 0;
-        trace.marker.cmax = maxValue;
-      } else if (scatterData.colorbartitle === "百分比(%)") {
-        trace.marker.cmin = 0;
-        trace.marker.cmax = 100;
-      }
-      // 图表布局
-      const layout = {
-        title: {
-          text: scatterData.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: {
-            text: data.xaixs,
-          },
-          gridcolor: "rgb(255,255,255)", // 网格线颜色
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true, // 显示背景
-        },
-        yaxis: {
-          title: {
-            text: data.yaixs,
-          },
-          gridcolor: "rgb(255,255,255)", // 网格线颜色
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true, // 显示背景
-        },
-        showlegend: false,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff", // 设置网格线颜色
-      };
-      if (data.xaixs === "时间") {
-        layout.xaxis.type = "date";
-        layout.xaxis.tickformat = "%Y-%m-%d";
-      }
-      // 准备 HTML 内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <meta charset="UTF-8">
-          <title>2D 散点图</title>
-          <script>${plotlyContent}</script>
-        </head>
-        <body>
-          <div id="chart" style="width: 100%; height: 600px"></div>
-          <script>
-            const traces = [${JSON.stringify(trace)}];
-            const layout = ${JSON.stringify(layout)};
-            Plotly.newPlot('chart', traces, layout, { responsive: true }).then(() => {
-              window.chartRendered = true; // 确保在图表渲染完成后设置
-              console.log("图表渲染完成");
-            }).catch((error) => {
-              console.error("图表渲染错误:", error); // 捕获渲染错误
-            });
-          </script>
-        </body>
-        </html>
-      `;
-
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
-
-      // 等待图表渲染完成，延长超时时间
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 150000, // 延长到 150 秒
-      });
+  // ✅ 特殊范围控制（修复版）
+  if (scatterData.colorbartitle === "密度") {
+    trace.marker.cmin = 0;
+    trace.marker.cmax = maxFiniteValue(colorValues);
+  } else if (scatterData.colorbartitle === "百分比(%)") {
+    trace.marker.cmin = 0;
+    trace.marker.cmax = 100;
+  }
 
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+  // ✅ layout
+  const layout = {
+    title: {
+      text: scatterData.title,
+      font: { size: 16, weight: "bold" },
+    },
+    xaxis: {
+      title: data.xaixs,
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    yaxis: {
+      title: data.yaixs,
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    showlegend: false,
+    plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
+  };
 
-      // 上传图片到服务器
-      const formData = new FormData();
-      formData.append("file", fs.createReadStream(tempFilePath));
-      // 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("生成2D散点图失败:", error);
-      throw error;
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    console.error("生成2D散点图失败:", error);
-    throw error;
+  // ✅ 时间轴处理
+  if (data.xaixs === "时间") {
+    layout.xaxis.type = "date";
+    layout.xaxis.tickformat = "%Y-%m-%d";
   }
+
+  // ✅ 🚀 核心：统一走 chartService
+  return await renderChart({
+    traces: [trace],
+    layout,
+    bucketName,
+    objectName,
+  });
 };

downLoadServer/src/server/utils/chartsCom/FaultAll.js

@@ -1,9 +1,7 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
-import axios from "axios"; // 导入 axios
-import { colorSchemes } from "../colors.js";
+/*
+ * 全场故障图（柱状 + 折线双轴）- 终极稳定版
+ */
+import { renderChart } from "../chartService/index.js";
 
 export const getFaultAllCharts = async (
   data,
@@ -11,173 +9,91 @@ export const getFaultAllCharts = async (
   objectName,
   analysisTypeCode,
 ) => {
-  // 获取 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");
-  // console.log(data, "全场故障数据");
-  try {
-    // 提取故障类型、故障次数和故障时长
-    const faultTypes = data.map((item) => item.fault_detail);
-    const faultCounts = data.map((item) => item.count);
-    const faultDurations = data.map((item) => item.fault_time_sum);
-
-    // 故障次数的柱状图数据（左侧 Y 轴）
-    const barTrace = {
-      x: faultTypes.slice(0, 10),
-      y: faultCounts.slice(0, 10),
-      type: "bar",
-      marker: { color: "#64ADC2" }, // 蓝色柱状图
-      name: "故障次数",
-      hovertemplate: `故障类型: %{x} <br> 故障次数: %{y} 次<br>`,
-    };
+  if (!Array.isArray(data) || data.length === 0) {
+    throw new Error("fault data empty");
+  }
 
-    // 故障时长的折线图数据（右侧 Y 轴）
-    const lineTrace = {
-      x: faultTypes.slice(0, 10),
-      y: faultDurations.slice(0, 10),
-      type: "scatter",
-      mode: "lines+markers", // 线性图 + 点标记
-      line: { color: "#1A295D" }, // 红色折线
-      name: "故障时长",
-      yaxis: "y2", // 使用第二个 Y 轴（右侧）
-      hovertemplate: `故障类型: %{x} <br> 故障时长: %{y} 小时 <br>`,
-    };
+  // ✅ 排序（真正 Top10）
+  const sorted = [...data].sort((a, b) => b.count - a.count).slice(0, 10);
 
-    // 布局配置，设置双 Y 轴
-    const layout = {
-      title: {
-        text: "全场故障次数与时长分析Top10",
-        font: {
-          size: 16, // 设置标题字体大小（默认 16）
-          weight: "bold",
-        },
-      },
-      xaxis: {
-        title: {
-          text: "故障类型",
-        },
+  const faultTypes = sorted.map((item) => item.fault_detail);
+  const faultCounts = sorted.map((item) => item.count);
+  const faultDurations = sorted.map((item) => item.fault_time_sum);
 
-        tickangle: 30,
-        tickmode: "array",
-        tickvals: faultTypes.slice(0, 10),
-        tickfont: { size: 12 },
-        gridcolor: "rgb(255,255,255)",
-        tickcolor: "rgb(255,255,255)",
-        backgroundcolor: "#e5ecf6",
-      },
-      yaxis: {
-        title: {
-          text: "故障次数",
-        },
-        titlefont: { color: "#64ADC2" },
-        tickfont: { color: "#64ADC2" },
-        side: "left", // 左侧的 Y 轴
-        showline: true,
-        linecolor: "#64ADC2",
-        gridcolor: "rgb(255,255,255)",
-        tickcolor: "rgb(255,255,255)",
-        backgroundcolor: "#e5ecf6",
-      },
-      yaxis2: {
-        title: {
-          text: "故障时长 (小时)",
-        },
-        titlefont: { color: "#1A295D" },
-        tickfont: { color: "#1A295D" },
-        overlaying: "y", // 在第一个 Y 轴上方绘制
-        side: "right", // 右侧的 Y 轴
-        position: 1, // 调整右侧轴的位置
-        showline: true,
-        linecolor: "#1A295D", // 设置右侧轴线颜色
-      },
-      barmode: "group", // 柱状图分组
-      plot_bgcolor: "#e5ecf6",
-      gridcolor: "#fff",
-      bgcolor: "#e5ecf6", // 设置背景颜色
-      showlegend: false,
-      margin: {
-        t: 80, // 上边距
-        b: 150, // 下边距，给 X 轴标签更多空间
-      },
-    };
+  // ✅ 柱状图（左轴）
+  const barTrace = {
+    x: faultTypes,
+    y: faultCounts,
+    type: "bar",
+    marker: { color: "#64ADC2" },
+    name: "故障次数",
+    hovertemplate: `故障类型: %{x}<br>故障次数: %{y} 次<br>`,
+  };
 
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_fault_all_chart_${Date.now()}.jpeg`,
-    );
+  // ✅ 折线图（右轴）
+  const lineTrace = {
+    x: faultTypes,
+    y: faultDurations,
+    type: "scatter",
+    mode: "lines+markers",
+    line: { color: "#1A295D" },
+    name: "故障时长",
+    yaxis: "y2",
+    hovertemplate: `故障类型: %{x}<br>故障时长: %{y} 小时<br>`,
+  };
 
-    // 使用 Puppeteer 生成图表的截图
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
+  // ✅ layout（优化版）
+  const layout = {
+    title: {
+      text: "全场故障次数与时长分析 Top10",
+      font: { size: 16 },
+    },
+    xaxis: {
+      title: "故障类型",
+      tickangle: 30,
+      tickfont: { size: 12 },
+      gridcolor: "#fff",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    yaxis: {
+      title: "故障次数",
+      side: "left",
+      showline: true,
+      linecolor: "#64ADC2",
+      tickfont: { color: "#64ADC2" },
+      gridcolor: "#fff",
+      zeroline: false,
+    },
+    yaxis2: {
+      title: "故障时长 (小时)",
+      overlaying: "y",
+      side: "right",
+      showline: true,
+      linecolor: "#1A295D",
+      tickfont: { color: "#1A295D" },
+      zeroline: false,
+    },
+    barmode: "group",
+    plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
+    showlegend: false,
+    margin: {
+      t: 80,
+      b: 120,
+    },
+  };
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    });
-    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(
-                  barTrace,
-                )}, ${JSON.stringify(lineTrace)}], ${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,
-        },
-      );
-      return response?.data?.url;
-    } catch (error) {
-      console.error("生成图表失败:", error);
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    console.error("发生错误:", error);
-  }
+  // ✅ 🚀 核心：统一走 chartService
+  return await renderChart({
+    traces: [barTrace, lineTrace],
+    layout,
+    bucketName,
+    objectName,
+  });
 };

downLoadServer/src/server/utils/chartsCom/FaultUnit.js

@@ -1,8 +1,7 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
-import axios from "axios"; // 导入 axios
+/*
+ * 机组故障气泡图（终极稳定版）
+ */
+import { renderChart } from "../chartService/index.js";
 
 export const getFaultUnitCharts = async (
   data,
@@ -10,160 +9,95 @@ export const getFaultUnitCharts = async (
   objectName,
   analysisTypeCode,
 ) => {
-  try {
-    // 获取 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");
+  if (!Array.isArray(data) || data.length === 0) {
+    throw new Error("fault unit data empty");
+  }
 
-    // 步骤 1：预处理
-    const combined = data.map((item) => ({
+  // ✅ 数据预处理
+  const combined = data
+    .map((item) => ({
       name: item.wind_turbine_name,
-      count: item.count,
-      durationHour: (item.fault_time / 3600).toFixed(2), // 秒转小时
-    }));
+      count: Number(item.count) || 0,
+      durationHour: Number((item.fault_time || 0) / 3600),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
 
-    // 步骤 2：按 name 排序（字典序）
-    combined.sort((a, b) => a.name.localeCompare(b.name));
+  const names = combined.map((d) => d.name);
+  const durations = combined.map((d) => d.durationHour);
+  const counts = combined.map((d) => d.count);
 
-    // 步骤 3：归一化 count 用于 size
-    const rawSizes = combined.map((d) => d.count);
-    const minSize = 8;
-    const maxSize = 30;
-    const sizeRange = maxSize - minSize;
-    const minValue = Math.min(...rawSizes);
-    const maxValue = Math.max(...rawSizes);
-    const normalizedSizes = rawSizes.map((val) => {
-      if (maxValue === minValue) return (minSize + maxSize) / 2;
-      return ((val - minValue) / (maxValue - minValue)) * sizeRange + minSize;
-    });
+  // ✅ 气泡大小归一化
+  const minSize = 8;
+  const maxSize = 30;
 
-    // 步骤 4：生成 plotly 数据
-    const bubbleData = combined.map((d, i) => ({
-      x: [d.name],
-      y: [d.durationHour],
-      mode: "markers",
-      type: "scatter",
-      name: d.name,
-      marker: {
-        size: normalizedSizes[i],
-        sizemode: "area",
-        sizeref: 1,
-        sizemin: 4,
-        showscale: false,
-      },
-      hovertemplate: `机组: ${d.name}<br>故障时长: ${d.durationHour} 小时<br>故障次数: ${d.count} 次<extra></extra>`,
-    }));
+  const minVal = Math.min(...counts);
+  const maxVal = Math.max(...counts);
 
-    const layout = {
-      title: {
-        text: "机组故障时长与故障次数分析",
-        font: { size: 16, weight: "bold" },
-      },
-      xaxis: {
-        title: "故障机组",
-        type: "category",
-        tickangle: 30,
-        tickfont: { size: 12 },
-        gridcolor: "rgb(255,255,255)",
-        tickcolor: "rgb(255,255,255)",
-        backgroundcolor: "#e5ecf6",
-        showbackground: true,
-      },
-      yaxis: {
-        title: "故障时长（小时）",
-        tickfont: { size: 12 },
-        gridcolor: "rgb(255,255,255)",
-        tickcolor: "rgb(255,255,255)",
-        backgroundcolor: "#e5ecf6",
-        showbackground: true,
-      },
-      plot_bgcolor: "#e5ecf6",
-      gridcolor: "#fff",
-      margin: { t: 80, b: 120 },
-      showlegend: true,
-      legendgroup: "same",
-      legend: {
-        itemsizing: "constant",
-        font: {
-          size: 12,
-        },
-      },
-    };
+  const sizes = counts.map((val) => {
+    if (maxVal === minVal) return (minSize + maxSize) / 2;
+    return ((val - minVal) / (maxVal - minVal)) * (maxSize - minSize) + minSize;
+  });
 
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_fault_unit_chart_${Date.now()}.jpeg`,
-    );
+  // ✅ 🚀 单 trace（性能关键）
+  const trace = {
+    x: names,
+    y: durations,
+    mode: "markers",
+    type: "scatter",
+    marker: {
+      size: sizes,
+      sizemode: "area",
+      sizemin: 4,
+    },
+    text: combined.map(
+      (d) =>
+        `机组: ${d.name}<br>故障时长: ${d.durationHour.toFixed(
+          2,
+        )} 小时<br>故障次数: ${d.count} 次`,
+    ),
+    hovertemplate: "%{text}<extra></extra>",
+  };
 
-    // 使用 Puppeteer 生成图表的截图
-    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 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(
-                  bubbleData,
-                )}, ${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);
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    console.error("发生错误:", error);
-  }
+  const layout = {
+    title: {
+      text: "机组故障时长与故障次数分析",
+      font: { size: 16 },
+    },
+    xaxis: {
+      title: "故障机组",
+      type: "category",
+      tickangle: 30,
+      tickfont: { size: 12 },
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      zeroline: false,
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+    },
+    yaxis: {
+      title: "故障时长（小时）",
+      tickfont: { size: 12 },
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      zeroline: false,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+    },
+    plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
+    margin: { t: 80, b: 120 },
+    showlegend: false, // ✅ 单 trace 不需要 legend
+  };
+
+  // ✅ 🚀 统一出口
+  return await renderChart({
+    traces: [trace],
+    layout,
+    bucketName,
+    objectName,
+  });
 };

downLoadServer/src/server/utils/chartsCom/GeneratorTemperature.js

@@ -1,255 +1,135 @@
 /*
- * @Author: your name
- * @Date: 2025-05-13 14:33:50
- * @LastEditTime: 2025-07-10 13:59:10
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/GeneratorTemperature.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";
+import { renderChart } from "../chartService/index.js";
 
 export const generateGeneratorTemperature = async (
   data,
   bucketName,
   objectName,
 ) => {
-  try {
-    const typeLine = ["solid", "solid", "dot", "dot", "dash", "solid"];
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(tempDir, `temp_chart_${Date.now()}.jpeg`);
-
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.min.js",
-    );
-    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
-    const colorDefault = [
-      "#0000F5",
-      "#377E21",
-      "#0000F5",
-      "#377E21",
-      "#000000",
-      "#F2A93B",
-    ];
-    // 创建浏览器实例
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    });
+  if (!data || !Array.isArray(data.data)) {
+    throw new Error("generator temperature data invalid");
+  }
 
-    try {
-      const page = await browser.newPage();
+  const typeLine = ["solid", "solid", "dot", "dot", "dash", "solid"];
 
-      // 准备图表数据
-      const chartDataset = data.data;
-      const chartData = []; // 用于存储图表配置
+  const colorDefault = [
+    "#0000F5",
+    "#377E21",
+    "#0000F5",
+    "#377E21",
+    "#000000",
+    "#F2A93B",
+  ];
 
-      chartDataset.forEach((turbine, index) => {
-        const chartConfig = {
-          x: turbine.xData,
-          y: turbine.yData,
-          name: turbine.Name,
-          line: {
-            dash: typeLine[index % colorDefault.length],
-            color:
-              data.color1 && data.color1.length > 0
-                ? data.color1[index % data.color1.length]
-                : colorDefault[index % colorDefault.length],
-          },
-          marker: {
-            color:
-              data.color1 && data.color1.length > 0
-                ? data.color1[index % data.color1.length]
-                : colorDefault[index % colorDefault.length],
-          },
-          hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br>`,
-        };
+  const chartDataset = data.data;
 
-        if (data.chartType === "line") {
-          chartConfig.fill = "none";
-          chartConfig.mode = "lines";
-        } else if (data.chartType === "bar") {
-          chartConfig.fill = "tonexty";
-        }
+  // ✅ traces 构建
+  const traces = chartDataset.map((turbine, index) => {
+    const color =
+      data.color1 && data.color1.length > 0
+        ? data.color1[index % data.color1.length]
+        : colorDefault[index % colorDefault.length];
 
-        chartData.push(chartConfig);
-      });
+    const base = {
+      x: turbine.xData || [],
+      y: turbine.yData || [],
+      name: turbine.Name || `series-${index}`,
+      hovertemplate: `${data.xaixs || "X"}: %{x}<br>${
+        data.yaixs || "Y"
+      }: %{y}<br>`,
+      marker: { color },
+    };
 
-      const layout = {
-        title: {
-          text: "发电机-轴承温度偏差:" + data.turbineName,
-          // text: data.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: data.xaixs || "X轴",
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        yaxis: {
-          title: data.yaixs || "Y轴",
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        margin: {
-          l: 50,
-          r: 50,
-          t: 50,
-          b: 50,
-        },
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-        bgcolor: "#e5ecf6",
-        autosize: true,
-        barmode: data.chartType === "bar" ? "stack" : "group",
-        shapes: [
-          {
-            type: "line",
-            xref: "paper",
-            x0: 0,
-            x1: 1,
-            yref: "y",
-            y0: 15,
-            y1: 15,
-            line: {
-              color: "red",
-              width: 2,
-              dash: "dash",
-            },
-          },
-          {
-            type: "line",
-            xref: "paper",
-            x0: 0,
-            x1: 1,
-            yref: "y",
-            y0: -15,
-            y1: -15,
-            line: {
-              color: "red",
-              width: 2,
-              dash: "dash",
-            },
-          },
-          {
-            type: "line",
-            xref: "paper",
-            x0: 0,
-            x1: 1,
-            yref: "y",
-            y0: 5,
-            y1: 5,
-            line: {
-              color: "#F9DD70",
-              width: 2,
-              dash: "dash",
-            },
-          },
-          {
-            type: "line",
-            xref: "paper",
-            x0: 0,
-            x1: 1,
-            yref: "y",
-            y0: -5,
-            y1: -5,
-            line: {
-              color: "#F9DD70",
-              width: 2,
-              dash: "dash",
-            },
-          },
-          {
-            type: "line",
-            xref: "paper",
-            x0: 0,
-            x1: 1,
-            yref: "y",
-            y0: 0,
-            y1: 0,
-            line: {
-              color: "#fff", // 设置为黑色
-              width: 2,
-            },
-          },
-        ],
+    if (data.chartType === "bar") {
+      return {
+        ...base,
+        type: "bar",
       };
+    }
 
-      // 创建HTML内容
-      const htmlContent = `
-            <!DOCTYPE html>
-            <html>
-              <head>
-                <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(
-                      chartData,
-                    )}, ${JSON.stringify(layout)}).then(() => {
-                      window.chartRendered = true;
-                    });
-                  };
-                </script>
-              </body>
-            </html>
-          `;
-
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
+    // 默认 line
+    return {
+      ...base,
+      type: "scatter",
+      mode: "lines",
+      line: {
+        dash: typeLine[index % typeLine.length],
+        color,
+      },
+    };
+  });
 
-      // 等待图表渲染完成
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 60000,
-      });
+  // ✅ layout
+  const layout = {
+    title: {
+      text: `发电机-轴承温度偏差: ${data.turbineName || ""}`,
+      font: { size: 16 },
+    },
+    xaxis: {
+      title: data.xaixs || "X轴",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    yaxis: {
+      title: data.yaixs || "Y轴",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      zeroline: false,
+    },
+    plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
+    margin: {
+      l: 50,
+      r: 50,
+      t: 60,
+      b: 50,
+    },
+    barmode: data.chartType === "bar" ? "stack" : "group",
 
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+    // ✅ 阈值线（核心保留）
+    shapes: [
+      createThresholdLine(15, "red"),
+      createThresholdLine(-15, "red"),
+      createThresholdLine(5, "#F9DD70"),
+      createThresholdLine(-5, "#F9DD70"),
+      createThresholdLine(0, "#fff"),
+    ],
+  };
 
-      // 上传图片到服务器
-      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 },
-      );
-      return response?.data?.url;
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    console.error("生成图表失败:", error);
-    throw error;
-  }
+  // ✅ 统一出口
+  return await renderChart({
+    traces,
+    layout,
+    bucketName,
+    objectName,
+  });
 };
+
+// ✅ 抽离：阈值线生成器（非常推荐）
+function createThresholdLine(y, color) {
+  return {
+    type: "line",
+    xref: "paper",
+    x0: 0,
+    x1: 1,
+    yref: "y",
+    y0: y,
+    y1: y,
+    line: {
+      color,
+      width: 2,
+      dash: y === 0 ? "solid" : "dash",
+    },
+  };
+}

downLoadServer/src/server/utils/chartsCom/HeatmapCharts.js

@@ -1,180 +1,111 @@
 /*
- * @Author: your name
- * @Date: 2025-04-14 11:15:35
- * @LastEditTime: 2025-07-09 14:31:02
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/downLoadServer/src/server/utils/chartsCom/HeatmapCharts.js
+ * 热力图（终极稳定版）
  */
+import { renderChart } from "../chartService/index.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 {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_heatmap_chart_${Date.now()}.jpeg`,
-    );
+  if (!data || !Array.isArray(data.data) || data.data.length === 0) {
+    throw new Error("heatmap data invalid");
+  }
 
-    // 获取 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 chartDataset = data.data[0];
 
-    // 创建浏览器实例
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
+  const xData = chartDataset.xData || [];
+  const yData = chartDataset.yData || [];
+  const zData = chartDataset.ZData || [];
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    });
+  // ✅ 校验二维数组（很关键）
+  if (!Array.isArray(zData) || !Array.isArray(zData[0])) {
+    throw new Error("ZData must be 2D array");
+  }
 
-    try {
-      const page = await browser.newPage();
+  // ✅ 数据量控制（防止内存炸）
+  const MAX_SIZE = 200; // 200x200 已经很大了
+  if (zData.length > MAX_SIZE || zData[0].length > MAX_SIZE) {
+    console.warn("heatmap too large, may affect performance");
+  }
 
-      // 准备图表数据
-      const chartDataset = data.data[0];
+  // ✅ 是否显示文本（大数据关闭）
+  const showText = zData.length * zData[0].length <= 2500;
 
-      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 trace = {
+    type: "heatmap",
+    x: xData,
+    y: yData,
+    z: zData,
 
-      // 准备布局配置
-      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", // 设置网格线颜色
-      };
+    zmin: 0,
+    zmax: 100,
 
-      // 准备 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",
-      });
+    colorscale: [
+      [0, "#E1ECC5"],
+      [0.5, "#E1ECC5"],
+      [0.5, "#9BC8C1"],
+      [0.85, "#9BC8C1"],
+      [0.85, "#5783B3"],
+      [1, "#5783B3"],
+    ],
 
-      // 等待图表渲染完成，延长超时时间
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 120000, // 延长到 120 秒
-      });
+    // ✅ 只在小数据量显示文字
+    ...(showText && {
+      text: zData.map((row) => row.map((v) => String(v))),
+      texttemplate: "%{text}",
+    }),
 
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+    hovertemplate: "X: %{x}<br>Y: %{y}<br>值: %{z}<extra></extra>",
 
-      // 上传图片到服务器
-      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(),
-      //       },
-      //     }
-      //   );
+    showscale: true,
+    xgap: 2,
+    ygap: 2,
+  };
 
-      // 返回图片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;
-  }
+  const layout = {
+    title: {
+      text: chartDataset.title || "热力图",
+      font: { size: 16 },
+    },
+    xaxis: {
+      title: data.xaixs || "X轴",
+      tickmode: "array",
+      tickvals: xData,
+      ticktext: xData,
+      tickfont: { size: 12 },
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      zeroline: false,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+    },
+    yaxis: {
+      title: data.yaixs || "Y轴",
+      tickmode: "array",
+      tickvals: yData,
+      ticktext: yData,
+      tickfont: { size: 12 },
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      zeroline: false,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+    },
+    plot_bgcolor: "#ffffff",
+    paper_bgcolor: "#ffffff",
+    margin: {
+      t: 60,
+      b: 60,
+    },
+    showlegend: false,
+  };
+
+  // ✅ 🚀 统一出口
+  return await renderChart({
+    traces: [trace],
+    layout,
+    bucketName,
+    objectName,
+  });
 };

downLoadServer/src/server/utils/chartsCom/PlotlyCharts.js

@@ -1,87 +1,114 @@
-/*
- * @Author: your name
- * @Date: 2025-05-15 15:22:19
- * @LastEditTime: 2025-07-09 14:31:43
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/PlotlyCharts.js
+import { renderChart } from "../chartService/index.js";
+import { colorSchemes } from "../colors.js";
+
+/**
+ * 数据过滤（可选）
  */
+const filterData = (group, startDate, endDate) => {
+  if (!startDate || !endDate) return group;
 
-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";
-import { text } from "stream/consumers";
+  const xData = [];
+  const yData = [];
+
+  group.xData.forEach((x, i) => {
+    const date = new Date(x);
+    if (date >= new Date(startDate) && date <= new Date(endDate)) {
+      xData.push(x);
+      yData.push(group.yData[i]);
+    }
+  });
+
+  return { ...group, xData, yData };
+};
 
 /**
- * 生成折线图并上传
- * @param {Object} options - 配置选项
- * @param {string} options.fileAddr - 数据文件地址
- * @param {string[]} options.color1 - 颜色数组1
- * @param {string[]} options.colors - 颜色数组2
- * @returns {Promise<String>} - 返回图片URL
+ * ✅ 终极版 Plotly 图表生成
  */
 export const generatePlotlyCharts = async (
   chartData,
   bucketName,
   objectName,
+  startDate,
+  endDate,
 ) => {
-  const colorSchemesItem = colorSchemes[0].colors;
-  const tempDir = path.join(process.cwd(), "images");
-  const tempFilePath = path.join(tempDir, `temp_line_chart_${Date.now()}.jpeg`);
-  let browser;
-
   try {
-    // 构建数据
-    const data = [];
-    const newData = chartData.data.filter(
-      (item) => item.enginName !== "合同功率曲线",
-    );
+    const colorSchemesItem = colorSchemes[0].colors;
 
-    newData.forEach((turbine, index) => {
-      data.push({
-        x: turbine.xData,
-        y: turbine.yData,
-        name: turbine.enginName,
-        mode: "lines",
-        connectgaps: false,
-        line: { color: colorSchemesItem[index % colorSchemesItem.length] },
-        marker: { color: colorSchemesItem[index % colorSchemesItem.length] },
-      });
+    // ✅ 1. 分离数据（更安全）
+    const normalData = [];
+    let contractLine = null;
+
+    chartData.data.forEach((item) => {
+      if (item.enginName === "合同功率曲线") {
+        contractLine = item;
+      } else {
+        normalData.push(item);
+      }
     });
 
-    if (
-      chartData.data[chartData.data.length - 1] &&
-      chartData.data[chartData.data.length - 1].enginName === "合同功率曲线" &&
-      chartData.data[chartData.data.length - 1].yData.length > 0
-    ) {
-      data.push({
-        x: chartData.data[chartData.data.length - 1].xData,
-        y: chartData.data[chartData.data.length - 1].yData,
+    // ✅ 2. 数据过滤（你之前缺失的）
+    const filteredData = normalData.map((group) =>
+      filterData(group, startDate, endDate),
+    );
+
+    // ✅ 3. 构建 traces
+    const traces = filteredData.map((turbine, index) => ({
+      x: turbine.xData,
+      y: turbine.yData,
+      name: turbine.enginName,
+      type: "scatter",
+      mode: "lines",
+      connectgaps: false,
+      line: {
+        color: colorSchemesItem[index % colorSchemesItem.length],
+      },
+      marker: {
+        color: colorSchemesItem[index % colorSchemesItem.length],
+      },
+    }));
+
+    // ✅ 4. 合同功率曲线（更稳）
+    if (contractLine && contractLine.yData?.length) {
+      traces.push({
+        x: contractLine.xData,
+        y: contractLine.yData,
+        type: "scatter",
         mode: "lines+markers",
         name: "合同功率曲线",
-        line: {
-          color: "red",
-          width: 1,
-        },
+        line: { color: "red", width: 1 },
         marker: { color: "red", size: 4 },
       });
     }
 
+    // ✅ 5. layout
     const layout = {
       title: {
         text: `风速功率曲线分析${chartData.engineTypeName}机型`,
-        font: { size: 16, weight: "bold" },
+        font: { size: 16 },
+      },
+      xaxis: {
+        title: "风速(m/s)",
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      yaxis: {
+        title: "功率(kW)",
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
-      xaxis: { title: { text: "风速(m / s)" || "X轴" }, gridcolor: "#fff" },
-      yaxis: { title: { text: "功率(kW)" || "Y轴" }, gridcolor: "#fff" },
       margin: { l: 50, r: 50, t: 50, b: 50 },
       plot_bgcolor: "#e5ecf6",
-      bgcolor: "#e5ecf6",
-      autosize: true,
-      barmode: "group",
+      paper_bgcolor: "#e5ecf6",
       legend: {
         orientation: "h",
         xanchor: "center",
@@ -90,93 +117,17 @@ export const generatePlotlyCharts = async (
       },
     };
 
-    await fs.ensureDir(tempDir);
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.min.js",
-    );
-    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
-
-    browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    });
-
-    const page = await browser.newPage();
-
-    const htmlContent = `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <script>${plotlyContent}</script>
-          <style>body { margin: 0; } #chart { width: 800px; height: 600px; }</style>
-        </head>
-        <body>
-          <div id="chart"></div>
-          <script>
-            window.onload = function () {
-              const data = ${JSON.stringify(data)};
-              const layout = ${JSON.stringify(layout)};
-              Plotly.newPlot('chart', data, layout, { responsive: true }).then(() => {
-                window.chartRendered = true;
-              });
-            };
-          </script>
-        </body>
-      </html>`;
-
-    await page.setContent(htmlContent, { waitUntil: "networkidle0" });
-
-    await page.waitForFunction(() => window.chartRendered === true, {
-      timeout: 60000,
+    // ✅ 6. 统一渲染（核心优化点🔥）
+    const url = await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
     });
 
-    const chartElement = await page.$("#chart");
-    await chartElement.screenshot({ path: tempFilePath, type: "jpeg" });
-
-    // ✅ 上传前判断文件是否存在
-    if (!(await fs.pathExists(tempFilePath))) {
-      throw new Error("图表截图文件未生成");
-    }
-
-    // ✅ 发起上传
-    try {
-      const response = await axios.post(
-        `${process.env.API_BASE_URL}/examples/upload`,
-        {
-          filePath: tempFilePath,
-          bucketName,
-          objectName,
-        },
-      );
-
-      const imageUrl = response?.data?.url;
-
-      return imageUrl;
-    } catch (uploadError) {
-      throw uploadError;
-    } finally {
-      // ✅ 上传后安全删除
-      try {
-        if (await fs.pathExists(tempFilePath)) {
-          await fs.unlink(tempFilePath);
-        }
-      } catch (deleteError) {
-        console.warn("⚠️ 删除临时文件失败:", deleteError.message);
-      }
-    }
+    return url;
   } catch (error) {
-    console.error("❌ 生成折线图失败:", error.message);
+    console.error("❌ 生成图表失败:", error);
     throw error;
-  } finally {
-    if (browser) {
-      await browser.close();
-    }
   }
 };

downLoadServer/src/server/utils/chartsCom/PlotlyChartsFen.js

@@ -1,17 +1,4 @@
-/*
- * @Author: your name
- * @Date: 2025-05-23 17:19:20
- * @LastEditTime: 2025-07-09 14:31:54
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/PlotlyChartsFen.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";
+import { renderChart } from "../chartService/index.js";
 
 /**
  * 生成折线图并上传
@@ -25,191 +12,128 @@ export const generatePlotlyChartsFen = async (
   fieldEngineCode,
 ) => {
   try {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_heatmap_chart_${Date.now()}.jpeg`,
-    );
+    if (!data || !Array.isArray(data.data)) {
+      throw new Error("PlotlyChartsFen data invalid");
+    }
 
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.min.js",
-    );
-    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
+    const getEngineCode = (item) => item.engineCode || item.enginCode;
+    const getEngineName = (item) => item.engineName || item.enginName || "";
+    const isContractLine = (item) => getEngineName(item) === "合同功率曲线";
 
-    // 创建浏览器实例
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
+    const buildValidPairs = (xData = [], yData = []) => {
+      const maxLen = Math.min(xData.length, yData.length);
+      const pairs = [];
+      for (let i = 0; i < maxLen; i++) {
+        const x = xData[i];
+        const y = Number(yData[i]);
+        if (x === null || x === undefined || x === "") continue;
+        if (!Number.isFinite(y)) continue;
+        pairs.push({ x, y });
+      }
+      return pairs;
+    };
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
-    });
+    const sortedData = [...data.data]
+      .filter((item) => !isContractLine(item))
+      .sort((a, b) => {
+        const aIsTarget = getEngineCode(a) === fieldEngineCode;
+        const bIsTarget = getEngineCode(b) === fieldEngineCode;
 
-    try {
-      const page = await browser.newPage();
+        if (aIsTarget && !bIsTarget) return 1;
+        if (!aIsTarget && bIsTarget) return -1;
 
-      // 准备图表数据
-      const sortedData = data.data.sort((a, b) => {
-        if (
-          a.enginCode === fieldEngineCode &&
-          b.enginCode !== fieldEngineCode
-        ) {
-          return 1;
-        }
-        if (
-          a.enginCode !== fieldEngineCode &&
-          b.enginCode === fieldEngineCode
-        ) {
-          return -1;
-        }
-        return 0;
+        return getEngineName(a).localeCompare(getEngineName(b));
       });
 
-      const finalData = [];
-      let enginName = "";
-      sortedData
-        .filter((item) => item.enginName !== "合同功率曲线")
-        .forEach((turbine) => {
-          const color =
-            turbine.enginCode === fieldEngineCode ? "#406DAB" : "#D3D3D3";
-          enginName =
-            turbine.enginCode === fieldEngineCode ? turbine.enginName : "";
-          const chartConfig = {
-            x: turbine.xData,
-            y: turbine.yData,
-            connectgaps: false,
-            name: turbine.enginName,
-            mode: "lines",
-            fill: "none",
-            line: { color },
-            marker: { color },
-          };
-          finalData.push(chartConfig);
-        });
-      const filterData = data.data.filter(
-        (item) => item.enginName === "合同功率曲线",
-      );
-      // 添加合同功率曲线
-      if (filterData && filterData[0].enginName === "合同功率曲线") {
-        finalData.push({
-          x: filterData[0].xData,
-          y: filterData[0].yData,
+    let targetEngineName = "";
+    const traces = sortedData
+      .map((turbine) => {
+        const isTarget = getEngineCode(turbine) === fieldEngineCode;
+        if (isTarget) targetEngineName = getEngineName(turbine);
+
+        const pairs = buildValidPairs(turbine.xData, turbine.yData);
+        if (!pairs.length) return null;
+
+        const color = isTarget ? "#406DAB" : "#D3D3D3";
+        return {
+          x: pairs.map((pair) => pair.x),
+          y: pairs.map((pair) => pair.y),
+          connectgaps: false,
+          name: getEngineName(turbine),
+          type: "scatter",
+          mode: pairs.length === 1 ? "markers" : "lines",
+          fill: "none",
+          line: { color, width: isTarget ? 2 : 1 },
+          marker: { color, size: pairs.length === 1 ? 7 : 4 },
+        };
+      })
+      .filter(Boolean);
+
+    const contractLine = data.data.find(isContractLine);
+    if (contractLine) {
+      const pairs = buildValidPairs(contractLine.xData, contractLine.yData);
+      if (pairs.length) {
+        traces.push({
+          x: pairs.map((pair) => pair.x),
+          y: pairs.map((pair) => pair.y),
+          type: "scatter",
           mode: "lines+markers",
           name: "合同功率曲线",
-          line: {
-            color: "red",
-            width: 1,
-          },
+          line: { color: "red", width: 1 },
           marker: { color: "red", size: 4 },
         });
       }
+    }
 
-      // 准备布局配置
-      const layout = {
-        title: {
-          text: `机组 ${enginName}风速功率曲线分析`,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: {
-            text: "风速(m/s)" || "x轴",
-          },
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        yaxis: {
-          title: { text: "功率(kW)" || "Y轴" },
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        margin: {
-          l: 50,
-          r: 50,
-          t: 50,
-          b: 50,
-        },
-        autosize: true,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-        bgcolor: "#e5ecf6",
-        legend: {
-          orientation: "h",
-          xanchor: "center",
-          x: 0.5,
-          y: -0.2,
-        },
-      };
-      // 创建HTML内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <script>${plotlyContent}</script>
-            <style>
-              body { margin: 0; }
-              #chart { width: 800px; height: 600px; }
-            </style>
-          </head>
-          <body>
-            <div id="chart"></div>
-            <script>
-              window.onload = function() {
-                const data = ${JSON.stringify(finalData)};
-                const layout = ${JSON.stringify(layout)};
-                Plotly.newPlot('chart', data, layout, {
-                  responsive: true
-                }).then(() => {
-                  window.chartRendered = true;
-                });
-              };
-            </script>
-          </body>
-        </html>
-      `;
-
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
-
-      // 等待图表渲染完成
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 60000,
-      });
+    if (!traces.length) {
+      throw new Error("PlotlyChartsFen has no valid points");
+    }
 
-      // 截图并保存到临时文件
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+    const layout = {
+      title: {
+        text:
+          data.title ||
+          `机组 ${targetEngineName || fieldEngineCode || ""}风速功率曲线分析`,
+        font: { size: 16 },
+      },
+      xaxis: {
+        title: data.xaixs || "风速(m/s)",
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true,
+        linecolor: "#ffffff",
+        zeroline: false,
+      },
+      yaxis: {
+        title: data.yaixs || "功率(kW)",
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true,
+        zeroline: false,
+        linecolor: "#ffffff",
+      },
+      margin: { l: 50, r: 50, t: 50, b: 50 },
+      autosize: true,
+      plot_bgcolor: "#e5ecf6",
+      paper_bgcolor: "#e5ecf6",
+      legend: {
+        orientation: "h",
+        xanchor: "center",
+        x: 0.5,
+        y: -0.2,
+      },
+    };
 
-      // 上传图片到服务器
-      const formData = new FormData();
-      formData.append("file", fs.createReadStream(tempFilePath));
-      // return formData;
-      // 发送上传请求
-      const response = await axios.post(
-        `${process.env.API_BASE_URL}/examples/upload`,
-        { filePath: tempFilePath, bucketName, objectName },
-      );
-      return response?.data?.url;
-    } finally {
-      await browser.close();
-    }
+    return await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
+    });
   } catch (error) {
     console.error("生成折线图失败:", error);
     throw error;

downLoadServer/src/server/utils/chartsCom/Radar.js

@@ -2,7 +2,6 @@
 import puppeteer from "puppeteer";
 import fs from "fs-extra";
 import path from "path";
-import FormData from "form-data";
 import axios from "axios";
 
 // 获取 echarts.min.js 的路径
@@ -31,27 +30,8 @@ const getHtmlContent = () => `
 <body>
   <div id="chart"></div>
   <script>
-    window.renderChart = function(chartData, itemCsvData, engineTypeCode) {
-      function calcStats(data) {
-        const matrix = data.map(item => [
-          Number(item.TurbinePowerRate),
-          Number(item.TurbineRunRate),
-          Number(item.WindSpeedAvr),
-          Number(item.Thi),
-          Number(item.Ws)
-        ]);
-
-        const max = matrix[0].map((_, i) => Math.max(...matrix.map(row => row[i])));
-        const min = matrix[0].map((_, i) => Math.min(...matrix.map(row => row[i])));
-        const median = matrix[0].map((_, i) => {
-          const sorted = matrix.map(row => row[i]).sort((a, b) => a - b);
-          const mid = Math.floor(sorted.length / 2);
-          return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
-        });
-        return { max, min, median };
-      }
-
-      const { max, min, median } = calcStats(itemCsvData);
+    window.renderChart = function(chartData, stats, engineTypeCode) {
+      const { max, min, median } = stats;
       const values = [
         chartData.TurbinePowerRate,
         chartData.TurbineRunRate,
@@ -79,6 +59,7 @@ const getHtmlContent = () => `
           center: ["50%", "50%"],
           radius: "60%",
         },
+        toolbox: { show: false },
         series: [
           {
             name: chartData.wind_turbine_name,
@@ -118,6 +99,37 @@ const getHtmlContent = () => `
 </html>
 `;
 
+const medianOf = (values) => {
+  if (!values.length) return 0;
+  const sorted = values.sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0
+    ? (sorted[mid - 1] + sorted[mid]) / 2
+    : sorted[mid];
+};
+
+const calcStats = (data) => {
+  const columns = [[], [], [], [], []];
+  data.forEach((item) => {
+    [
+      item.TurbinePowerRate,
+      item.TurbineRunRate,
+      item.WindSpeedAvr,
+      item.Thi,
+      item.Ws,
+    ].forEach((value, index) => {
+      const n = Number(value);
+      if (Number.isFinite(n)) columns[index].push(n);
+    });
+  });
+
+  return {
+    max: columns.map((values) => (values.length ? Math.max(...values) : 0)),
+    min: columns.map((values) => (values.length ? Math.min(...values) : 0)),
+    median: columns.map(medianOf),
+  };
+};
+
 export const getRadarCharts = async (
   chartData,
   itemCsvData,
@@ -126,40 +138,60 @@ export const getRadarCharts = async (
   fieldInfo,
   engineTypeCode,
 ) => {
+  const tempDir = path.join(process.cwd(), "images");
+  await fs.ensureDir(tempDir);
+  const tempFilePath = path.join(
+    tempDir,
+    `temp_radar_chart_${Date.now()}_${Math.random().toString(36).slice(2)}.jpeg`,
+  );
+
   const browser = await puppeteer.launch({
     headless: "new",
     executablePath: process.env.CHROME_PATH,
     args: ["--no-sandbox", "--disable-setuid-sandbox"],
   });
-  const page = await browser.newPage();
-  const tempDir = path.join(process.cwd(), "images");
-  await fs.ensureDir(tempDir);
-  const tempFilePath = path.join(tempDir, `radar_chart_${Date.now()}.jpeg`);
-
-  await page.setContent(getHtmlContent(), { waitUntil: "load" });
-  await page.waitForFunction(() => typeof window.renderChart === "function");
-
-  await page.evaluate(
-    (chartData, itemCsvData, engineTypeCode) => {
-      window.renderChart(chartData, itemCsvData, engineTypeCode);
-    },
-    chartData,
-    itemCsvData,
-    engineTypeCode,
-  );
 
-  // ✅ 等待 echarts 渲染完成
-  await page.waitForFunction("window.chartFinished === true", {
-    timeout: 3000,
-  });
+  try {
+    const page = await browser.newPage();
+    const stats = calcStats(itemCsvData);
 
-  const chartElement = await page.$("#chart");
-  await chartElement.screenshot({ path: tempFilePath, type: "jpeg" });
+    await page.setViewport({
+      width: 600,
+      height: 600,
+      deviceScaleFactor: 2,
+    });
+
+    await page.setContent(getHtmlContent(), {
+      waitUntil: "domcontentloaded",
+      timeout: 0,
+    });
+
+    await page.waitForFunction(() => typeof window.renderChart === "function", {
+      timeout: 10000,
+    });
+
+    await page.evaluate(
+      (chartData, stats, engineTypeCode) => {
+        window.renderChart(chartData, stats, engineTypeCode);
+      },
+      chartData,
+      stats,
+      engineTypeCode,
+    );
+
+    await page.waitForFunction(() => window.chartFinished === true, {
+      timeout: 15000,
+    });
+
+    const chartElement = await page.waitForSelector("#chart");
+
+    await chartElement.screenshot({
+      path: tempFilePath,
+      type: "jpeg",
+      quality: 100,
+    });
 
-  try {
     const newUrl = objectName.substring(0, objectName.lastIndexOf("/"));
-    const formData = new FormData();
-    formData.append("file", fs.createReadStream(tempFilePath));
 
     const response = await axios.post(
       `${process.env.API_BASE_URL}/examples/upload`,
@@ -172,8 +204,10 @@ export const getRadarCharts = async (
 
     return response?.data?.url;
   } catch (error) {
-    console.error("❌ 上传失败：", error.message);
+    console.error("getRadarCharts failed:", error);
+    throw error;
   } finally {
     await browser.close();
+    await fs.remove(tempFilePath).catch(() => {});
   }
 };

downLoadServer/src/server/utils/chartsCom/Time3DChart.js

@@ -1,11 +1,3 @@
-/*
- * @Author: your name
- * @Date: 2025-04-14 17:49:33
- * @LastEditTime: 2025-07-14 17:24:27
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/downLoadServer/src/server/utils/chartsCom/Time3DChart.js
- */
 import puppeteer from "puppeteer";
 import fs from "fs-extra";
 import path from "path";
@@ -21,6 +13,11 @@ const formatDate = (dateString) => {
 };
 export const generateTime3DChart = async (data, bucketName, objectName) => {
   try {
+    const timeoutMs = Number.isFinite(
+      Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10),
+    )
+      ? Number.parseInt(process.env.CHART_RENDER_TIMEOUT_MS || "", 10)
+      : 500000;
     // 创建临时目录
     const tempDir = path.join(process.cwd(), "images");
     await fs.ensureDir(tempDir);
@@ -49,10 +46,13 @@ export const generateTime3DChart = async (data, bucketName, objectName) => {
         "--disable-setuid-sandbox",
         "--window-size=1920,1080",
       ],
+      protocolTimeout: timeoutMs,
     });
 
     try {
       const page = await browser.newPage();
+      page.setDefaultTimeout(timeoutMs);
+      page.setDefaultNavigationTimeout(timeoutMs);
       // 准备图表数据
       const uniqueMonths = Array.from(
         new Set(data.data[0].yData.map((date) => formatDate(date))),
@@ -101,6 +101,7 @@ export const generateTime3DChart = async (data, bucketName, objectName) => {
               text: data.xaixs,
               standoff: 100,
             },
+            zeroline: false,
           },
           yaxis: {
             type: "category", // 让 Y 轴按类别均匀分布
@@ -118,6 +119,7 @@ export const generateTime3DChart = async (data, bucketName, objectName) => {
             tickcolor: "black",
             zeroline: false,
             tickangle: 25,
+            zeroline: false,
             title: {
               text: data.yaixs,
             },
@@ -207,12 +209,13 @@ export const generateTime3DChart = async (data, bucketName, objectName) => {
         `;
       // 设置页面内容
       await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
+        waitUntil: "domcontentloaded",
+        timeout: timeoutMs,
       });
 
       // 等待图表渲染完成，延长超时时间
       await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 150000, // 延长到 120 秒
+        timeout: timeoutMs,
       });
 
       // 截图并保存到临时文件

downLoadServer/src/server/utils/chartsCom/TwoDMarkersChart.js

@@ -1,18 +1,43 @@
-/*
- * @Author: your name
- * @Date: 2025-04-25 16:19:33
- * @LastEditTime: 2025-07-08 14:40:29
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/TwoDMarkersChart.js
- */
-
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
+import { renderChart } from "../chartService/index.js";
 import { colorSchemes } from "../colors.js";
-import axios from "axios";
+
+const MAX_COLORBAR_CATEGORIES = Number.parseInt(
+  process.env.CHART_MAX_COLORBAR_CATEGORIES || "50",
+  10,
+);
+
+const buildColorConfig = (rawColorData) => {
+  const seen = new Map();
+  let allNumeric = true;
+
+  for (const value of rawColorData) {
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) allNumeric = false;
+
+    if (seen.size <= MAX_COLORBAR_CATEGORIES && !seen.has(value)) {
+      seen.set(value, seen.size + 1);
+    }
+  }
+
+  // 连续数值或分类过多时，直接使用连续色条；避免为海量唯一值生成 ticktext/tickvals/mapping。
+  if (allNumeric || seen.size > MAX_COLORBAR_CATEGORIES) {
+    return {
+      colorValues: rawColorData.map((value) => Number(value)),
+      colorbar: undefined,
+      customdata: undefined,
+    };
+  }
+
+  const ticktext = [...seen.keys()];
+  return {
+    colorValues: rawColorData.map((value) => seen.get(value)),
+    colorbar: {
+      tickvals: ticktext.map((_, i) => i + 1),
+      ticktext,
+    },
+    customdata: rawColorData,
+  };
+};
 
 export const generateTwoDMarkersChart = async (
   data,
@@ -20,192 +45,109 @@ export const generateTwoDMarkersChart = async (
   objectName,
 ) => {
   try {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_scatter_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"],
-    });
+    const chartDataset = data.data?.[0];
+    if (!chartDataset) {
+      throw new Error("2D散点数据为空");
+    }
 
-    try {
-      const page = await browser.newPage();
-
-      // 准备图表数据
-      const chartDataset = data.data[0];
-      const uniqueTimeLabels =
-        chartDataset.colorbar &&
-        chartDataset.colorbar.length === chartDataset.xData.length
-          ? [...new Set(chartDataset.colorbar)]
-          : [...new Set(chartDataset.yData)];
-
-      const ticktext = uniqueTimeLabels.map((label) => label);
-      const tickvals = uniqueTimeLabels.map((_, index) => index + 1);
-      const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
-        acc[curr] = index + 1;
-        return acc;
-      }, {});
-
-      // 获取 colorbar 的最小值和最大值来计算比例值
-      const minValue = Math.min(...new Set(uniqueTimeLabels));
-      const maxValue = Math.max(...new Set(uniqueTimeLabels));
-      const colorStops = [
-        colorSchemes[0].colors[0],
-        colorSchemes[0].colors[4],
-        colorSchemes[0].colors[8],
-        colorSchemes[0].colors[12],
-      ];
-      // 计算渐变比例
-      const colors = colorStops.map((color, index) => {
-        const proportion = index / (colorStops.length - 1); // 计算比例值 (0, 1/3, 2/3, 1)
-        return [proportion, color]; // 创建比例-颜色映射
-      });
-      // 确保 colors 至少有 2 种颜色，否则使用默认颜色
-      if (colors.length < 2) {
-        colors.push([1, colorStops[colorStops.length - 1] || "#1B2973"]);
-      }
-
-      // 计算颜色值映射
-      let colorValues =
-        chartDataset.colorbar &&
-        chartDataset.colorbar.length === chartDataset.xData.length
-          ? chartDataset.colorbar.map((date) => timeMapping[date])
-          : chartDataset.yData.map((date) => timeMapping[date]);
-
-      // 绘制 2D 散点图
-      const trace = {
-        x: chartDataset.xData,
-        y: chartDataset.yData,
-        mode: "markers",
-        type: "scattergl", // 使用 scattergl 提高性能
-        text: chartDataset.engineName, // 提示文本
-        marker: {
-          color: colorValues,
-          colorscale: [
-            [0, "#F9FDD2"],
-            [0.15, "#E9F6BD"],
-            [0.3, "#C2E3B9"],
-            [0.45, "#8AC8BE"],
-            [0.6, "#5CA8BF"],
-            [0.75, "#407DB3"],
-            [0.9, "#2E4C9A"],
-            [1, "#1B2973"],
-          ],
-          size: new Array(chartDataset.xData.length).fill(6), // 点的大小
-        },
-      };
-
-      // 图表布局
-      const layout = {
-        title: {
-          text: chartDataset.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: {
-            text: data.xaixs,
-          },
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true,
-        },
-        yaxis: {
-          title: {
-            text: data.yaixs,
-          },
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true,
-        },
-        // showlegend: true,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-      };
-
-      // 准备 HTML 内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <meta charset="UTF-8">
-          <title>2D 散点图</title>
-          <script>${plotlyContent}</script>
-        </head>
-        <body>
-          <div id="chart" style="width: 100%; height: 600px"></div>
-          <script>
-            const traces = [${JSON.stringify(trace)}];
-            const layout = ${JSON.stringify(layout)};
-            Plotly.newPlot('chart', traces, layout, { responsive: true }).then(() => {
-              window.chartRendered = true; // 确保在图表渲染完成后设置
-              console.log("图表渲染完成");
-            }).catch((error) => {
-              console.error("图表渲染错误:", error); // 捕获渲染错误
-            });
-          </script>
-        </body>
-        </html>
-      `;
-
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
-
-      // 等待图表渲染完成，延长超时时间
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 150000, // 延长到 150 秒
-      });
-
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
-
-      // 上传图片到服务器
-      const formData = new FormData();
-      formData.append("file", fs.createReadStream(tempFilePath));
-      // 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("生成2D散点图失败:", error);
-      throw error;
-    } finally {
-      await browser.close();
+    const { xData, yData, title, engineName } = chartDataset;
+
+    // ✅ 1. color 数据源（统一逻辑）
+    const rawColorData =
+      chartDataset.colorbar?.length === xData.length
+        ? chartDataset.colorbar
+        : yData;
+
+    // ✅ 2. 颜色渐变（安全版）
+    const colors = colorSchemes?.[0]?.colors || [];
+
+    const safePick = (i) => colors[i] || colors[0] || "#1B2973";
+
+    const colorStops = [safePick(0), safePick(4), safePick(8), safePick(12)];
+
+    const colorscale = colorStops.map((c, i) => [
+      i / (colorStops.length - 1),
+      c,
+    ]);
+
+    if (colorscale.length < 2) {
+      colorscale.push([1, safePick(0)]);
     }
+
+    // ✅ 3. 映射颜色值：小分类使用离散刻度，大数据/连续值使用连续色条
+    const colorConfig = buildColorConfig(rawColorData);
+
+    // ⚠️ 性能优化（点很多时很关键🔥）
+    const pointCount = xData.length;
+    const markerSize = pointCount > 5000 ? 3 : 6;
+
+    // ✅ 5. trace
+    const trace = {
+      x: xData,
+      y: yData,
+      type: "scattergl",
+      mode: "markers",
+      name: engineName || "散点图",
+      marker: {
+        color: colorConfig.colorValues,
+        colorscale,
+        size: markerSize,
+        colorbar: {
+          title: { text: chartDataset.colorbartitle || "分类" },
+          ...colorConfig.colorbar,
+        },
+      },
+      customdata: colorConfig.customdata,
+      hovertemplate:
+        `${data.xaixs}: %{x}<br>` +
+        `${data.yaixs}: %{y}<br>` +
+        (colorConfig.customdata
+          ? `分类: %{customdata}<extra></extra>`
+          : `<extra></extra>`),
+    };
+
+    // ✅ 6. layout（简化+统一风格）
+    const layout = {
+      title: {
+        text: title || "2D散点图",
+        font: { size: 16 },
+      },
+      xaxis: {
+        title: data.xaixs,
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      yaxis: {
+        title: data.yaixs,
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      showlegend: false,
+      plot_bgcolor: "#e5ecf6",
+      paper_bgcolor: "#e5ecf6",
+    };
+
+    // ✅ 7. 渲染
+    const url = await renderChart({
+      traces: [trace],
+      layout,
+      bucketName,
+      objectName,
+    });
+
+    return url;
   } catch (error) {
-    console.error("生成2D散点图失败:", error);
+    console.error("❌ 生成2D散点图失败:", error);
     throw error;
   }
 };

downLoadServer/src/server/utils/chartsCom/TwoDMarkersChart1.js

@@ -1,9 +1,5 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
+import { renderChart } from "../chartService/index.js";
 import { colorSchemes } from "../colors.js";
-import axios from "axios";
 
 export const generateTwoDMarkersChart1 = async (
   data,
@@ -11,203 +7,151 @@ export const generateTwoDMarkersChart1 = async (
   objectName,
 ) => {
   try {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_scatter_chart_${Date.now()}.jpeg`,
+    // ✅ 1. 数据拆分（修复 enginName 拼写问题🔥）
+    const scatterData = data.data.find(
+      (item) => item.engineName !== "合同功率曲线",
     );
 
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-3.0.1.min.js",
+    const lineData = data.data.find(
+      (item) =>
+        item.engineName === "合同功率曲线" || item.enginName === "合同功率曲线",
     );
-    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
 
-    // 创建浏览器实例
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
+    if (!scatterData) {
+      throw new Error("scatterData 不存在");
+    }
+
+    // ✅ 2. 颜色数据源
+    const rawColorData =
+      scatterData.colorbar?.length === scatterData.xData.length
+        ? scatterData.colorbar
+        : scatterData.color;
+
+    const uniqueLabels = [...new Set(rawColorData)];
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    const tickvals = uniqueLabels.map((_, i) => i + 1);
+
+    const ticktext = uniqueLabels.map((dateStr) => {
+      const date = new Date(dateStr);
+      if (isNaN(date)) return dateStr; // 防止非法时间🔥
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, "0");
+      return `${y}-${m}`;
     });
 
-    try {
-      const page = await browser.newPage();
-
-      // 提取散点数据和线数据
-      const scatterData = data.data.filter(
-        (item) => item.engineName !== "合同功率曲线",
-      )[0]; // 点数据
-
-      const lineData = data.data.filter(
-        (item) =>
-          item.engineName === "合同功率曲线" ||
-          item.enginName === "合同功率曲线",
-      )[0]; // 线数据
-
-      // 提取唯一时间标签，并计算 tickvals 和 ticktext
-      const uniqueTimeLabels = scatterData.colorbar
-        ? [...new Set(scatterData.colorbar)]
-        : [...new Set(scatterData.color)];
-      const tickvals = uniqueTimeLabels.map((_, index) => index + 1);
-      const ticktext = uniqueTimeLabels.map((dateStr) => {
-        const date = new Date(dateStr);
-        return date.toLocaleDateString("en-CA", {
-          year: "numeric",
-          month: "2-digit",
-        });
-      });
+    const mapping = uniqueLabels.reduce((acc, cur, i) => {
+      acc[cur] = i + 1;
+      return acc;
+    }, {});
 
-      const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
-        acc[curr] = index + 1;
-        return acc;
-      }, {});
-
-      // 计算颜色值映射
-      let colorValues = scatterData.colorbar
-        ? scatterData.colorbar.map((date) => timeMapping[date])
-        : scatterData.color.map((date) => timeMapping[date]);
-
-      // 绘制散点图
-      const scatterTrace = {
-        x: scatterData.xData,
-        y: scatterData.yData,
-        mode: "markers",
-        type: "scattergl", // 使用 scattergl 提高性能
-        text: scatterData.engineName, // 提示文本
-        marker: {
-          color: colorValues,
-          colorscale: [
-            [0, "#F9FDD2"],
-            [0.15, "#E9F6BD"],
-            [0.3, "#C2E3B9"],
-            [0.45, "#8AC8BE"],
-            [0.6, "#5CA8BF"],
-            [0.75, "#407DB3"],
-            [0.9, "#2E4C9A"],
-            [1, "#1B2973"],
-          ],
-          size: new Array(scatterData.xData.length).fill(6), // 点的大小
-        },
-        hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br> 时间: %{customdata}<extra></extra>`,
-        customdata: scatterData.colorbar || scatterData.color, // 将格式化后的时间存入 customdata
-      };
-
-      // 绘制线图
-      let lineTrace = {};
-      if (lineData) {
-        lineTrace = {
-          x: lineData.xData,
-          y: lineData.yData,
-          mode: "lines+markers", // 线和点同时显示
-          type: "scattergl", // 使用 scattergl 类型
-          text: lineData.engineName, // 提示文本
-          line: {
-            color: "red", // 线条颜色
-          },
-        };
-      }
-      // 图表布局
-      const layout = {
-        title: {
-          text: scatterData.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: {
-            text: data.xaixs,
-          },
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true,
+    // ✅ 3. 颜色渐变（安全版）
+    const colors = colorSchemes?.[0]?.colors || [];
+
+    const safePick = (i) => colors[i] || colors[0] || "#1B2973";
+
+    const colorStops = [safePick(0), safePick(4), safePick(8), safePick(12)];
+
+    const colorscale = colorStops.map((c, i) => [
+      i / (colorStops.length - 1),
+      c,
+    ]);
+
+    if (colorscale.length < 2) {
+      colorscale.push([1, safePick(0)]);
+    }
+
+    // ✅ 4. 映射颜色
+    const colorValues = rawColorData.map((v) => mapping[v]);
+
+    // ⚠️ 性能优化
+    const pointCount = scatterData.xData.length;
+    const markerSize = pointCount > 5000 ? 3 : 6;
+
+    // ✅ 5. scatter trace
+    const scatterTrace = {
+      x: scatterData.xData,
+      y: scatterData.yData,
+      type: "scattergl",
+      mode: "markers",
+      name: scatterData.engineName,
+      marker: {
+        color: colorValues,
+        colorscale,
+        size: markerSize,
+        colorbar: {
+          title: { text: scatterData.colorbartitle || "时间" },
+          tickvals,
+          ticktext,
         },
-        yaxis: {
-          title: {
-            text: data.yaixs,
-          },
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true,
+        line: {
+          color: "#fff",
+          width: 0.3,
         },
-        showlegend: false,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-      };
-
-      // 准备 HTML 内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <meta charset="UTF-8">
-          <title>2D 散点图</title>
-          <script>${plotlyContent}</script>
-        </head>
-        <body>
-          <div id="chart" style="width: 100%; height: 600px"></div>
-          <script>
-            const traces = [${JSON.stringify(scatterTrace)}${
-        lineTrace ? `, ${JSON.stringify(lineTrace)}` : ""
-      }];
-            const layout = ${JSON.stringify(layout)};
-            Plotly.newPlot('chart', traces, layout, { responsive: true }).then(() => {
-              window.chartRendered = true; // 确保在图表渲染完成后设置
-              console.log("图表渲染完成");
-            }).catch((error) => {
-              console.error("图表渲染错误:", error); // 捕获渲染错误
-            });
-          </script>
-        </body>
-        </html>
-      `;
-
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
-
-      // 等待图表渲染完成，延长超时时间
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 150000, // 延长到 150 秒
+      },
+      customdata: rawColorData,
+      hovertemplate:
+        `${data.xaixs}: %{x}<br>` +
+        `${data.yaixs}: %{y}<br>` +
+        `时间: %{customdata}<extra></extra>`,
+    };
+
+    // ✅ 6. 合同曲线（优化：避免空对象加入🔥）
+    const traces = [scatterTrace];
+
+    if (lineData?.xData?.length && lineData?.yData?.length) {
+      traces.push({
+        x: lineData.xData,
+        y: lineData.yData,
+        type: "scatter",
+        mode: "lines+markers",
+        name: "合同功率曲线",
+        line: { color: "red" },
+        marker: { color: "red", size: 4 },
       });
+    }
 
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+    // ✅ 7. layout
+    const layout = {
+      title: {
+        text: scatterData.title || "散点图",
+        font: { size: 16 },
+      },
+      xaxis: {
+        title: data.xaixs,
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      yaxis: {
+        title: data.yaixs,
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      showlegend: false,
+      plot_bgcolor: "#e5ecf6",
+      paper_bgcolor: "#e5ecf6",
+    };
+
+    // ✅ 8. 渲染
+    const url = await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
+    });
 
-      // 上传图片到服务器
-      const formData = new FormData();
-      formData.append("file", fs.createReadStream(tempFilePath));
-      // 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("生成2D散点图失败:", error);
-      throw error;
-    } finally {
-      await browser.close();
-    }
+    return url;
   } catch (error) {
-    console.error("生成2D散点图失败:", error);
+    console.error("❌ 生成2D散点图失败:", error);
     throw error;
   }
 };

downLoadServer/src/server/utils/chartsCom/WindRoseChart.js

@@ -1,8 +1,4 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
-import axios from "axios"; // 导入 axios
+import { renderChart } from "../chartService/index.js"; // 用你的统一渲染服务
 import { colorSchemes } from "../colors.js";
 
 export const getWindRoseChart = async (
@@ -12,176 +8,99 @@ export const getWindRoseChart = async (
   analysisTypeCode,
 ) => {
   try {
-    // 获取 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 windRoseList = data.data;
 
-    const windRoseList = data.data; // 确保数据源一致
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_wind_rose_chart_${Date.now()}.jpeg`,
-    );
-
-    // 定义风向的 16 等分
+    // ===== 数据处理 =====
     const windDirections = Array.from({ length: 16 }, (_, i) => i * 22.5);
+
     const windSpeedRanges = new Set();
     const counts = {};
 
-    // 从数据中提取 windSpeedRange 和动态生成 speedLabels
     windRoseList.forEach((engine) => {
       engine.windRoseData.forEach((item) => {
         windSpeedRanges.add(item.windSpeedRange);
       });
     });
 
-    const speedLabels = Array.from(windSpeedRanges).sort(); // 动态范围值
-    const colors = colorSchemes[0].colors; // 生成颜色
+    const speedLabels = Array.from(windSpeedRanges).sort();
+
+    const colors = colorSchemes[0].colors;
     const colorscale = {};
+
     speedLabels.forEach((label, index) => {
       colorscale[label] = colors[(index % colors.length) + 4];
+      counts[label] = Array(windDirections.length).fill(0);
     });
 
-    // 初始化 counts 对象
-    speedLabels.forEach((speedLabel) => {
-      counts[speedLabel] = Array(windDirections.length).fill(0); // 确保初始化为 0
-    });
-
-    // 数据聚合
+    // ===== 数据聚合 =====
     windRoseList.forEach((engine) => {
       engine.windRoseData.forEach((item) => {
         const { windDirection, windSpeedRange } = item;
+
         const index = windDirections.findIndex(
           (dir, i) =>
-            windDirection >= dir && windDirection < windDirections[i + 1],
+            windDirection >= dir &&
+            windDirection < (windDirections[i + 1] ?? 360),
         );
 
-        if (index !== -1 && counts[windSpeedRange]) {
-          counts[windSpeedRange][index] += item.frequency; // 聚合频率
+        if (index !== -1) {
+          counts[windSpeedRange][index] += item.frequency;
         }
       });
     });
 
-    // 构建 traces
-    const traces = speedLabels.map((speedLabel) => {
-      const percentage = counts[speedLabel];
-
-      return {
-        r: percentage,
-        theta: windDirections,
-        name: speedLabel,
-        type: "barpolar",
-        marker: {
-          color: colorscale[speedLabel],
-          line: {
-            color: "white",
-            width: 1,
-          },
+    // ===== traces =====
+    const traces = speedLabels.map((speedLabel) => ({
+      r: counts[speedLabel],
+      theta: windDirections,
+      name: speedLabel,
+      type: "barpolar",
+      marker: {
+        color: colorscale[speedLabel],
+        line: {
+          color: "white",
+          width: 1,
         },
-        hovertemplate: `频率: %{r} <br> 风向: %{theta} <br> <extra></extra>`, // 修改为与 Vue 文件一致
-      };
-    });
+      },
+      hovertemplate: "频率: %{r}<br>风向: %{theta}<extra></extra>",
+    }));
 
-    // 图表布局
+    // ===== layout =====
     const layout = {
       title: {
-        text: `风向玫瑰图 - ${windRoseList[0]?.enginName} `, // 修改为与 Vue 文件一致
-        font: {
-          size: 16,
-          weight: "bold",
-        },
+        text: `风向玫瑰图 - ${windRoseList[0]?.enginName || ""}`,
+        font: { size: 16 },
       },
       plot_bgcolor: "#e5ecf6",
       polar: {
         bgcolor: "#e5ecf6",
         radialaxis: {
-          title: { text: data?.axes?.radial || "频率百分比(%)" }, // 确保与 Vue 文件一致
-          gridcolor: "rgb(255,255,255)",
-          showgrid: true,
-          linecolor: "rgb(255,255,255)",
+          title: {
+            text: data?.axes?.radial || "频率百分比(%)",
+          },
+          gridcolor: "#fff",
         },
         angularaxis: {
-          title: { text: "风向" }, // 确保与 Vue 文件一致
+          title: { text: "风向" },
           tickvals: windDirections,
-          ticktext: windDirections.map((item) => item), // 设置为空字符串以隐藏单位
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          linecolor: "rgb(255,255,255)",
+          ticktext: windDirections,
         },
       },
       showlegend: true,
-      legend: { title: { text: "风速范围" } }, // 确保与 Vue 文件一致
+      legend: {
+        title: { text: "风速范围" },
+      },
     };
 
-    // 使用 Puppeteer 生成图表的截图
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    // ===== 统一渲染（核心！）=====
+    return await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
     });
-    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(
-                  traces,
-                )}, ${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,
-        },
-      );
-      return response?.data?.url;
-    } catch (error) {
-      console.error("生成图表失败:", error);
-    } finally {
-      await browser.close();
-    }
   } catch (error) {
-    console.error("发生错误:", error);
+    console.error("风玫瑰图生成失败:", error);
+    throw error;
   }
 };

downLoadServer/src/server/utils/chartsCom/YewErrorBarChart.js

@@ -1,9 +1,4 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
-import axios from "axios"; // 导入 axios
-import { colorSchemes } from "../colors.js";
+import { renderChart } from "../chartService/index.js";
 
 export const getYewErrorBarChart = async (
   data,
@@ -12,172 +7,85 @@ export const getYewErrorBarChart = async (
   analysisTypeCode,
 ) => {
   try {
-    // 提取机组编号和偏航误差值
-    const xData = data.map((item) => item.engine_name); // 机组编号
-    const yData = data.map((item) => item.yaw_error1); // 偏航误差值
+    // ===== 数据处理 =====
+    const xData = data.map((item) => item.engine_name || "-");
+    const yData = data.map((item) => Number(item.yaw_error1 || 0));
 
-    // 为每个数据点分配颜色
-    const colors = yData.map((value) => {
-      if (value <= 3) {
-        return "#8AC8BE"; // (0, 3] 蓝色
-      } else if (value <= 5) {
-        return "#407DB3"; // (3, 5] 绿色
+    // ===== 按区间拆成多个 trace（关键优化点！）=====
+    const ranges = {
+      low: { name: "(0, 3]", color: "#8AC8BE", x: [], y: [] },
+      mid: { name: "(3, 5]", color: "#407DB3", x: [], y: [] },
+      high: { name: "(5, ∞]", color: "#1B2973", x: [], y: [] },
+    };
+
+    xData.forEach((x, i) => {
+      const y = yData[i];
+
+      if (y <= 3) {
+        ranges.low.x.push(x);
+        ranges.low.y.push(y);
+      } else if (y <= 5) {
+        ranges.mid.x.push(x);
+        ranges.mid.y.push(y);
       } else {
-        return "#1B2973"; // (5, ∞] 红色
+        ranges.high.x.push(x);
+        ranges.high.y.push(y);
       }
     });
 
-    const trace = {
-      x: xData, // 横坐标数据
-      y: yData, // 纵坐标数据
-      type: "bar", // 当前图表类型
+    // ===== traces（每个区间一个 trace）=====
+    const traces = Object.values(ranges).map((range) => ({
+      x: range.x,
+      y: range.y,
+      type: "bar",
+      name: range.name,
       marker: {
-        color: colors, // 每个点的颜色
+        color: range.color,
       },
-      name: "偏航误差值", // 图例名称
-    };
-    // 创建虚拟的 trace 以便显示图例
-    const legendTrace1 = {
-      x: [null],
-      y: [null],
-      name: "(0, 3]",
-      mode: "markers",
-      marker: { color: "#8AC8BE", size: 10 },
-    };
-    const legendTrace2 = {
-      x: [null],
-      y: [null],
-      name: "(3, 5]",
-      mode: "markers",
-      marker: { color: "#407DB3", size: 10 },
-    };
-    const legendTrace3 = {
-      x: [null],
-      y: [null],
-      name: "(5, ∞]",
-      mode: "markers",
-      marker: { color: "#1B2973", size: 10 },
-    };
+      hovertemplate: "机组: %{x}<br>偏航误差: %{y}<extra></extra>",
+    }));
+
+    // ===== layout =====
     const layout = {
       title: {
-        text: "机组静态偏航误差值分布", // 图表标题
-        font: {
-          size: 16, // 设置标题字体大小（默认 16）
-          weight: "bold",
-        },
+        text: "机组静态偏航误差值分布",
+        font: { size: 16 },
       },
       xaxis: {
-        title: {
-          text: "机组",
-        }, // 横坐标标题
-        tickmode: "array",
-        tickvals: xData, // 设置刻度值（机组编号）
-        ticktext: xData, // 设置刻度文本（机组编号）
+        title: { text: "机组" },
         gridcolor: "rgb(255,255,255)",
         tickcolor: "rgb(255,255,255)",
         backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
       yaxis: {
-        title: {
-          text: "静态偏航误差值（度）",
-        }, // 纵坐标标题
+        title: { text: "静态偏航误差值（度）" },
         gridcolor: "rgb(255,255,255)",
         tickcolor: "rgb(255,255,255)",
         backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        zeroline: false,
+        showline: true, // ✅ 显示 X 轴轴线
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
-      margin: {
-        l: 50,
-        r: 50,
-        t: 50,
-        b: 50,
-      },
+      margin: { l: 50, r: 50, t: 50, b: 50 },
       plot_bgcolor: "#e5ecf6",
-      gridcolor: "#fff",
-      bgcolor: "#e5ecf6", // 设置背景颜色
-      autosize: true, // 开启自适应
-      showlegend: true, // 显示图例
+      showlegend: true,
+      barmode: "group", // 或 "stack" 看你需求
     };
 
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_yew_error_bar_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");
-
-    // 使用 Puppeteer 生成图表的截图
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    // ===== 核心统一渲染 =====
+    return await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
     });
-    try {
-      const page = await browser.newPage();
-      const traces = [trace, legendTrace1, legendTrace2, legendTrace3];
-      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(
-                  traces,
-                )}, ${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,
-        },
-      );
-      return response?.data?.url;
-    } catch (error) {
-      console.error("生成图表失败:", error);
-    } finally {
-      await browser.close();
-    }
   } catch (error) {
-    console.error("发生错误:", error);
+    console.error("偏航误差柱状图生成失败:", error);
+    throw error;
   }
 };

downLoadServer/src/server/utils/chartsCom/lineAndChildLine.js

@@ -1,205 +1,119 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
+/*
+ * 多折线 + 子曲线（终极稳定版）
+ */
+import { renderChart } from "../chartService/index.js";
 import { colorSchemes } from "../colors.js";
-import axios from "axios";
 
-/**
- * 生成折线图并上传
- * @param {Object} options - 配置选项
- * @param {string} options.fileAddr - 数据文件地址
- * @param {string[]} options.color1 - 颜色数组1
- * @param {string[]} options.colors - 颜色数组2
- * @returns {Promise<String>} - 返回图片URL
- */
 export const generateLineAndChildLine = async (
   chartData,
   bucketName,
   objectName,
 ) => {
-  try {
-    const colorSchemesItem = colorSchemes[0].colors;
-    // 获取数据
-    // 准备图表数据
-    const data = [];
-    const newData =
-      chartData.analysisTypeCode === "风电机组叶尖速比和风速分析"
-        ? chartData &&
-          chartData.data &&
-          JSON.parse(JSON.stringify(chartData.data)).sort((a, b) => {
-            return a.engineName.localeCompare(b.engineName);
-          })
-        : JSON.parse(JSON.stringify(chartData.data));
+  if (!chartData || !Array.isArray(chartData.data)) {
+    throw new Error("line chart data invalid");
+  }
 
-    newData.forEach((turbine, index) => {
-      const chartConfig = {
-        x: turbine.xData,
-        y: turbine.yData,
-        name: turbine.engineName,
-        mode: "lines",
-        line: {
-          color: colorSchemesItem[index % colorSchemesItem.length],
-        },
-        marker: {
-          color: colorSchemesItem[index % colorSchemesItem.length],
-        },
-        hovertemplate:
-          `${chartData.xaixs}:` +
-          ` %{x} <br> ` +
-          `${chartData.yaixs}:` +
-          "%{y} <br>",
-      };
-      if (chartData.yaixs === "概率密度函数") {
-        chartConfig.line.color = colorSchemesItem[7];
-      }
-      data.push(chartConfig);
-    });
+  const colorSchemesItem = colorSchemes[0].colors || [];
 
-    // 准备布局配置
-    const layout = {
-      title: {
-        text: chartData.title || chartData.data[0].title,
-        font: {
-          size: 16,
-          weight: "bold",
-        },
-      },
-      xaxis: {
-        title: chartData.xaixs || "X轴",
-        gridcolor: "rgb(255,255,255)",
-        tickcolor: "rgb(255,255,255)",
-        backgroundcolor: "#e5ecf6",
-      },
-      yaxis: {
-        title: chartData.yaixs || "Y轴",
-        gridcolor: "rgb(255,255,255)",
-        tickcolor: "rgb(255,255,255)",
-        backgroundcolor: "#e5ecf6",
-      },
-      margin: {
-        l: 50,
-        r: 50,
-        t: 50,
-        b: 50,
-      },
-      plot_bgcolor: "#e5ecf6",
-      gridcolor: "#fff",
-      bgcolor: "#e5ecf6",
-      autosize: true,
-      barmode: "group",
-    };
+  // ✅ 排序（避免深拷贝）
+  let dataset = [...chartData.data];
 
-    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,
-        },
-        marker: { color: "red", size: 4 },
-      });
-    }
-
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_line_chart_${Date.now()}.jpeg`,
+  if (chartData.analysisTypeCode === "风电机组叶尖速比和风速分析") {
+    dataset.sort((a, b) =>
+      (a.engineName || "").localeCompare(b.engineName || ""),
     );
+  }
 
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.min.js",
-    );
-    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
+  // ✅ 主折线
+  const traces = dataset.map((turbine, index) => {
+    const color =
+      chartData.yaixs === "概率密度函数"
+        ? colorSchemesItem[7]
+        : colorSchemesItem[index % colorSchemesItem.length];
 
-    // 创建浏览器实例
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
+    return {
+      x: turbine.xData || [],
+      y: turbine.yData || [],
+      type: "scatter",
+      mode: "lines",
+      name: turbine.engineName || `series-${index}`,
+      line: {
+        color,
+      },
+      marker: {
+        color,
+      },
+      hovertemplate: `${chartData.xaixs || "X"}: %{x}<br>${
+        chartData.yaixs || "Y"
+      }: %{y}<br>`,
+    };
+  });
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+  // ✅ 子曲线（合同曲线）
+  if (
+    Array.isArray(chartData.contract_Cp_curve_yData) &&
+    chartData.contract_Cp_curve_yData.length > 0
+  ) {
+    traces.push({
+      x: chartData.contract_Cp_curve_xData || [],
+      y: chartData.contract_Cp_curve_yData || [],
+      type: "scatter",
+      mode: "lines+markers",
+      name: "合同功率曲线",
+      line: {
+        color: "red",
+        width: 1,
+      },
+      marker: {
+        color: "red",
+        size: 4,
+      },
     });
+  }
 
-    try {
-      const page = await browser.newPage();
-
-      // 创建HTML内容
-      const htmlContent = `
-                <!DOCTYPE html>
-                <html>
-                  <head>
-                    <script>${plotlyContent}</script>
-                    <style>
-                      body { margin: 0; }
-                      #chart { width: 800px; height: 600px; }
-                    </style>
-                  </head>
-                  <body>
-                    <div id="chart"></div>
-                    <script>
-                      window.onload = function() {
-                        const data = ${JSON.stringify(data)};
-                        const layout = ${JSON.stringify(layout)};
-                        Plotly.newPlot('chart', data, layout, {
-                          responsive: true
-                        }).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));
-      formData.append("type", "chart");
-      // 这里假设需要从 chartData 中获取 engineCode 和 analysisTypeCode，根据实际情况调整
-      formData.append("engineCode", chartData.engineCode || "");
-      formData.append("analysisTypeCode", chartData.analysisTypeCode || "");
+  // ✅ layout
+  const layout = {
+    title: {
+      text: chartData.title || chartData?.data?.[0]?.title || "",
+      font: { size: 16 },
+    },
+    xaxis: {
+      title: chartData.xaixs || "X轴",
+      gridcolor: "#fff",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      showline: true, // ✅ 显示 X 轴轴线
+      zeroline: false,
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+    },
+    yaxis: {
+      title: chartData.yaixs || "Y轴",
+      gridcolor: "rgb(255,255,255)",
+      tickcolor: "rgb(255,255,255)",
+      backgroundcolor: "#e5ecf6",
+      showbackground: true,
+      zeroline: false,
+      showline: true, // ✅ 显示 X 轴轴线
+      linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+    },
+    plot_bgcolor: "#e5ecf6",
+    paper_bgcolor: "#e5ecf6",
+    margin: {
+      l: 50,
+      r: 50,
+      t: 60,
+      b: 50,
+    },
+    showlegend: true,
+  };
 
-      // 发送上传请求
-      const response = await axios.post(
-        `${process.env.API_BASE_URL}/examples/upload`,
-        { filePath: tempFilePath, bucketName, objectName },
-      );
-      return response?.data?.url;
-    } finally {
-      await browser.close();
-    }
-  } catch (error) {
-    throw error;
-  }
+  // ✅ 🚀 统一出口
+  return await renderChart({
+    traces,
+    layout,
+    bucketName,
+    objectName,
+  });
 };

downLoadServer/src/server/utils/chartsCom/lineChartsFen.js

@@ -1,198 +1,211 @@
-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";
+import { renderChart } from "../chartService/index.js";
 
 /**
- * 生成折线图并上传
- * @param {Object} data - 图表数据
- * @returns {Promise<String>} - 返回图片URL
+ * 过滤数据（仅当 X 为时间序列且提供了合法起止时间时才按区间筛选）
+ */
+const filterData = (group, startDate, endDate) => {
+  const filteredXData = [];
+  const filteredYData = [];
+  const filteredMedians = group.medians ? { x: [], y: [] } : null;
+
+  const isDate = isDateType(group.xData);
+
+  group.xData.forEach((x, i) => {
+    if (!isDate || isInDateRange(x, startDate, endDate)) {
+      filteredXData.push(x);
+      filteredYData.push(group.yData[i]);
+
+      if (filteredMedians && group.medians?.x[i]) {
+        if (!isDate || isInDateRange(group.medians.x[i], startDate, endDate)) {
+          filteredMedians.x.push(group.medians.x[i]);
+          filteredMedians.y.push(group.medians.y[i]);
+        }
+      }
+    }
+  });
+
+  return {
+    ...group,
+    xData: filteredXData,
+    yData: filteredYData,
+    medians: filteredMedians,
+  };
+};
+
+/**
+ * 不能用 Date.parse(数字)：在 Node/V8 里 Date.parse(0)、Date.parse(10) 常为非 NaN，
+ * 功率(kW) 轴会被误判为“日期”，再与 startDate/endDate 比较会把点全部滤掉 → 空白图。
+ * 与前端 lineChartsFen.vue 行为对齐：数值功率轴不做日期过滤。
+ */
+const isDateType = (xData) => {
+  if (!xData || !xData.length) return false;
+  const first = xData[0];
+  if (typeof first === "string") {
+    const t = Date.parse(first);
+    return !Number.isNaN(t);
+  }
+  if (typeof first === "number" && Number.isFinite(first)) {
+    if (first > 1e11) return true;
+    if (first > 1e9 && first < 1e11) return true;
+    return false;
+  }
+  return false;
+};
+
+const isInDateRange = (timestamp, startDate, endDate) => {
+  if (startDate == null || endDate == null) return true;
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  if (Number.isNaN(+start) || Number.isNaN(+end)) return true;
+  const date = new Date(timestamp);
+  return date >= start && date <= end;
+};
+
+/**
+ * ✅ 折线图生成（接入 chartService），绘制逻辑与 Vue 侧一致：先排序，再直接成图（仅时间轴才按日期筛）
  */
 export const generateLineChart = async (
   data,
   bucketName,
   objectName,
   fieldEngineCode,
+  startDate,
+  endDate,
 ) => {
   try {
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_line_chart_${Date.now()}.jpeg`,
+    const filteredData = data.data.map((group) =>
+      filterData(group, startDate, endDate),
     );
 
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-latest.min.js",
-    );
-    const plotlyContent = await fs.readFile(plotlyPath, "utf-8");
+    const sortedData = [...filteredData].sort((a, b) => {
+      const aIsTarget = a.engineCode === fieldEngineCode;
+      const bIsTarget = b.engineCode === fieldEngineCode;
 
-    // 创建浏览器实例
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
+      if (aIsTarget && !bIsTarget) return 1;
+      if (!aIsTarget && bIsTarget) return -1;
 
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+      return (a.engineName || "").localeCompare(b.engineName || "");
     });
 
-    try {
-      const page = await browser.newPage();
-
-      // 先整体排序：目标 engineCode 放最后，其他按 engineName 升序
-      const sortedData = [...data.data].sort((a, b) => {
-        const aIsTarget = a.engineCode === fieldEngineCode;
-        const bIsTarget = b.engineCode === fieldEngineCode;
-        // 如果 a 是目标、b 不是 => a 排后（返回 1）
-        if (aIsTarget && !bIsTarget) return 1;
-        // 如果 b 是目标、a 不是 => b 排后（返回 -1）
-        if (!aIsTarget && bIsTarget) return -1;
-        // 如果都不是目标项，按 engineName 升序排序
-        return a.engineName.localeCompare(b.engineName);
-      });
-      const finalData = [];
-      sortedData.forEach((turbine) => {
-        const color =
-          turbine.engineCode === fieldEngineCode ? "#406DAB" : "#D3D3D3";
-        const chartConfig = {
-          x: turbine.xData,
-          y: turbine.yData,
+    const buildValidPairs = (xData = [], yData = []) => {
+      const maxLen = Math.min(xData.length, yData.length);
+      const pairs = [];
+      for (let i = 0; i < maxLen; i++) {
+        const x = xData[i];
+        const y = Number(yData[i]);
+        if (!Number.isFinite(y)) continue;
+        if (x === null || x === undefined || x === "") continue;
+        pairs.push({ x, y });
+      }
+      return pairs;
+    };
+
+    const traces = sortedData
+      .map((turbine) => {
+        const isTarget = turbine.engineCode === fieldEngineCode;
+
+        const color = isTarget ? "#406DAB" : "#D3D3D3";
+
+        const validPairs = buildValidPairs(turbine.xData, turbine.yData);
+        if (!validPairs.length) return null;
+
+        const xs = validPairs.map((p) => p.x);
+        const ys = validPairs.map((p) => p.y);
+        const onePoint = validPairs.length === 1;
+
+        return {
+          x: xs,
+          y: ys,
           name: turbine.engineName,
-          mode: "lines",
-          fill: "none",
-          line: { color },
-          marker: { color },
-          hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br>`,
+          type: "scatter",
+          mode: onePoint ? "markers" : "lines",
+          line: { color, width: isTarget ? 2 : 1 },
+          marker: { color, size: onePoint ? 7 : 4 },
+          connectgaps: false,
+          hovertemplate: `${data.xaixs}: %{x}<br>${data.yaixs}: %{y}<extra></extra>`,
         };
-        finalData.push(chartConfig);
-      });
-
-      // 添加合同功率曲线
-      if (
-        data.contract_Cp_curve_yData &&
-        data.contract_Cp_curve_yData.length > 0
-      ) {
-        finalData.push({
-          x: data.contract_Cp_curve_xData,
-          y: data.contract_Cp_curve_yData,
+      })
+      .filter(Boolean);
+
+    if (data.contract_Cp_curve_yData?.length) {
+      const cp = buildValidPairs(
+        data.contract_Cp_curve_xData,
+        data.contract_Cp_curve_yData,
+      );
+      if (cp.length) {
+        traces.push({
+          x: cp.map((p) => p.x),
+          y: cp.map((p) => p.y),
+          type: "scatter",
           mode: "lines+markers",
           name: "合同功率曲线",
-          line: {
-            color: "red",
-            width: 1,
-          },
+          line: { color: "red", width: 1 },
           marker: { color: "red", size: 4 },
         });
       }
+    }
 
-      // 准备布局配置
-      const layout = {
-        title: {
-          text: data.title || "图表",
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: data.xaixs || "X轴",
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        yaxis: {
-          title: data.yaixs || "Y轴",
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        margin: {
-          l: 50,
-          r: 50,
-          t: 50,
-          b: 50,
-        },
-        autosize: true,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-        bgcolor: "#e5ecf6",
-      };
-
-      // 创建HTML内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-          <head>
-            <script>${plotlyContent}</script>
-            <style>
-              body { margin: 0; }
-              #chart { width: 800px; height: 600px; }
-            </style>
-          </head>
-          <body>
-            <div id="chart"></div>
-            <script>
-              window.onload = function() {
-                const data = ${JSON.stringify(finalData)};
-                const layout = ${JSON.stringify(layout)};
-                Plotly.newPlot('chart', data, layout, {
-                  responsive: true
-                }).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));
-      // formData.append("type", "chart");
-      // formData.append("engineCode", data.engineCode);
-      // formData.append("analysisTypeCode", data.analysisTypeCode);
-      // 构造 formData 表单
-      const formData = new FormData();
-      formData.append("filePath", fs.createReadStream(tempFilePath)); // tempFilePath 是本地文件路径
-      formData.append("bucketName", bucketName);
-      formData.append("objectName", objectName);
-      // 删除临时文件
-
-      // 发送上传请求
-      const response = await axios.post(
-        `${process.env.API_BASE_URL}/examples/upload`,
-        { filePath: tempFilePath, bucketName, objectName },
-      );
-      return response?.data?.url;
-    } finally {
-      await browser.close();
+    if (!traces.length) {
+      throw new Error("折线图过滤后无有效数据点");
     }
+
+    const layout = {
+      title: {
+        text: data.title || "图表",
+        font: { size: 16 },
+      },
+      xaxis: {
+        title: data.xaixs || "X轴",
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true,
+        zeroline: false,
+        linecolor: "#ffffff",
+        dtick: data.xaixs === "风速" ? 1 : undefined,
+        range:
+          data.analysisTypeCode === "风电机组风能利用系数分析" &&
+          Array.isArray(data.contract_Cp_curve_xData) &&
+          data.contract_Cp_curve_xData.length
+            ? [
+                0,
+                Math.max(
+                  ...data.contract_Cp_curve_xData
+                    .map(Number)
+                    .filter((val) => !Number.isNaN(val)),
+                ) * 0.9,
+              ]
+            : undefined,
+      },
+      yaxis: {
+        title: data.yaixs || "Y轴",
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        zeroline: false,
+        showline: true,
+        linecolor: "#ffffff",
+        range:
+          data.analysisTypeCode === "风电机组风能利用系数分析"
+            ? [0, 1]
+            : undefined,
+      },
+      margin: { l: 50, r: 50, t: 50, b: 50 },
+      autosize: true,
+      plot_bgcolor: "#e5ecf6",
+      paper_bgcolor: "#e5ecf6",
+    };
+
+    const url = await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
+    });
+
+    return url;
   } catch (error) {
     console.error("生成折线图失败:", error);
     throw error;

downLoadServer/src/server/utils/chartsCom/powerMarkers2DCharts.js

@@ -1,17 +1,5 @@
-/*
- * @Author: your name
- * @Date: 2025-04-28 14:15:23
- * @LastEditTime: 2025-07-09 14:32:04
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/chartsCom/powerMarkers2DCharts.js
- */
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
+import { renderChart } from "../chartService/index.js";
 import { colorSchemes } from "../colors.js";
-import axios from "axios"; // 导入 axios
 
 export const generatepowerMarkers2DCharts = async (
   data,
@@ -20,258 +8,145 @@ export const generatepowerMarkers2DCharts = async (
 ) => {
   try {
     const colorsBar = colorSchemes[0].colors;
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_scatter_chart_${Date.now()}.jpeg`,
-    );
 
-    // 获取 plotly.js 的绝对路径
-    const plotlyPath = path.join(
-      process.cwd(),
-      "src",
-      "public",
-      "js",
-      "plotly-3.0.1.min.js",
+    // ✅ 1. 拆分数据
+    const scatterData = data.data.find(
+      (item) => item.engineName !== "合同功率曲线",
     );
-    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 scatterData = data.data.filter(
-        (item) => item.engineName !== "合同功率曲线",
-      )[0]; // 点数据
 
-      const lineData = data.data.filter(
-        (item) => item.engineName === "合同功率曲线",
-      )[0]; // 线数据
+    const lineData = data.data.find(
+      (item) => item.engineName === "合同功率曲线",
+    );
 
-      // 保存原始颜色和大小
-      const originalColors = [...scatterData.yData];
-      const originalSizes = new Array(scatterData.xData.length).fill(6); // 初始点大小
+    if (!scatterData) {
+      throw new Error("scatterData 不存在");
+    }
 
-      // 如果有 colorbar 数据
-      const uniqueTimeLabels =
-        scatterData.colorbar &&
-        scatterData.colorbar.length === scatterData.xData.length
-          ? [...new Set(scatterData.colorbar)] // 从 colorbar 中提取唯一的标签
-          : [...new Set(scatterData.color)]; // 如果没有 colorbar，使用 data.color
-      const ticktext = uniqueTimeLabels.map((dateStr) => {
-        const date = new Date(dateStr);
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, "0");
-        return `${year}-${month}`; // ✅ 保证格式为 yyyy-MM
-      });
+    // ✅ 2. 时间映射（colorbar 核心逻辑）
+    const rawColorData =
+      scatterData.colorbar?.length === scatterData.xData.length
+        ? scatterData.colorbar
+        : scatterData.color;
 
-      // const ticktext = uniqueTimeLabels.map((dateStr) => {
-      //   const date = new Date(dateStr);
-      //   return date.toLocaleDateString("en-CA", {
-      //     year: "numeric",
-      //     month: "2-digit",
-      //   }); // 格式化为 'yyyy-MM'
-      // }); // 使用格式化后的时间作为 ticktext
-      const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 设置 tick 值
-      const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
-        acc[curr] = index + 1;
-        return acc;
-      }, {});
+    const uniqueTimeLabels = [...new Set(rawColorData)];
 
-      // 获取 colorbar 的最小值和最大值来计算比例值
-      const minValue = Math.min(...tickvals);
-      const maxValue = Math.max(...tickvals);
+    const ticktext = uniqueTimeLabels.map((dateStr) => {
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      return `${year}-${month}`;
+    });
 
-      // 仅取 colorsBar 的前 4 种颜色进行渐变
-      const colorStops = [
-        colorsBar[0],
-        colorsBar[4],
-        colorsBar[8],
-        colorsBar[12],
-      ];
+    const tickvals = uniqueTimeLabels.map((_, index) => index + 1);
 
-      // 计算渐变比例
-      const colors = colorStops.map((color, index) => {
-        const proportion = index / (colorStops.length - 1); // 计算比例值 (0, 1/3, 2/3, 1)
-        return [proportion, color]; // 生成颜色映射
-      });
+    const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
+      acc[curr] = index + 1;
+      return acc;
+    }, {});
 
-      // 确保至少有 2 个颜色，否则使用默认颜色
-      if (colors.length < 2) {
-        colors.push([1, colorStops[colorStops.length - 1] || "#1B2973"]);
-      }
+    // ✅ 3. 颜色渐变（优化容错）
+    const safePick = (i) => colorsBar[i] || colorsBar[0] || "#1B2973";
 
-      // 计算颜色值映射
-      let colorValues = [];
-      if (scatterData.colorbar) {
-        colorValues = scatterData.colorbar.map((date) => timeMapping[date]);
-      } else {
-        colorValues = scatterData.color.map((date) => timeMapping[date]);
-      }
+    const colorStops = [safePick(0), safePick(4), safePick(8), safePick(12)];
 
-      // 绘制散点图
-      const scatterTrace = {
-        x: scatterData.xData,
-        y: scatterData.yData,
-        mode: "markers", // 散点
-        type: "scattergl", // 使用散点图
-        text: scatterData.engineName, // 提示文本
-        marker: {
-          color: colorValues, // 使用时间数据来映射颜色
-          colorscale: colors
-            ? [...colors]
-            : [
-                [0, "#F9FDD2"],
-                [0.15, "#E9F6BD"],
-                [0.3, "#C2E3B9"],
-                [0.45, "#8AC8BE"],
-                [0.6, "#5CA8BF"],
-                [0.75, "#407DB3"],
-                [0.9, "#2E4C9A"],
-                [1, "#1B2973"],
-              ], // 默认颜色渐变
-          colorbar: {
-            title: { text: scatterData.colorbartitle || "月份" }, // 色标标题
-            tickvals: tickvals, // 设置刻度值
-            ticktext: ticktext, // 设置刻度文本
-            tickmode: "array", // 使用数组模式
-            // tickangle: -45, // 可选：调整刻度文本的角度
-          },
-          size: 4, // 点的大小
-          line: {
-            color: "#fff", // 让边框颜色和点颜色相同
-            width: 0.3, // 设置边框宽度
-          },
-        },
-        hovertemplate:
-          `${data.xaixs}: %{x} <br> ` +
-          `${data.yaixs}: %{y} <br> ` +
-          `时间: %{customdata}<extra></extra>`, // 在 hover 中显示格式化后的时间
-        customdata: scatterData.colorbar || scatterData.color, // 将格式化后的时间存入 customdata
-      };
+    const colorscale = colorStops.map((color, index) => {
+      const proportion = index / (colorStops.length - 1);
+      return [proportion, color];
+    });
 
-      // 绘制线图
-      let lineTrace = {};
-      if (lineData) {
-        lineTrace = {
-          x: lineData.xData, // 线数据的 xData
-          y: lineData.yData, // 线数据的 yData
-          mode: "lines+markers", // 线和点同时显示
-          type: "scattergl", // 使用 scattergl 类型
-          text: lineData.engineName, // 提示文本
-          line: {
-            color: "red", // 线条颜色
-          },
-        };
-      }
+    if (colorscale.length < 2) {
+      colorscale.push([1, safePick(0)]);
+    }
 
-      // 图表布局
-      const layout = {
-        title: {
-          text: scatterData.title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: {
-            text: data.xaixs,
-          },
-          gridcolor: "rgb(255,255,255)", // 网格线颜色
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true, // 显示背景
+    // ✅ 4. 映射颜色值
+    const colorValues = rawColorData.map((v) => timeMapping[v]);
+
+    // ✅ 5. scatter trace
+    const scatterTrace = {
+      x: scatterData.xData,
+      y: scatterData.yData,
+      type: "scattergl",
+      mode: "markers",
+      name: scatterData.engineName,
+      marker: {
+        color: colorValues,
+        colorscale,
+        size: 4,
+        colorbar: {
+          title: { text: scatterData.colorbartitle || "月份" },
+          tickvals,
+          ticktext,
+          tickmode: "array",
         },
-        yaxis: {
-          title: { text: data.yaixs },
-          gridcolor: "rgb(255,255,255)", // 网格线颜色
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-          showbackground: true, // 显示背景
+        line: {
+          color: "#fff",
+          width: 0.3,
         },
-        showlegend: false,
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff", // 设置网格线颜色
-      };
-
-      // 准备 HTML 内容
-      const htmlContent = `
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <meta charset="UTF-8">
-          <title>2D 散点图</title>
-          <script>${plotlyContent}</script>
-        </head>
-        <body>
-          <div id="chart" style="width: 100%; height: 600px"></div>
-          <script>
-            const traces = [${JSON.stringify(scatterTrace)}${
-        lineTrace ? `, ${JSON.stringify(lineTrace)}` : ""
-      }];
-            const layout = ${JSON.stringify(layout)};
-            Plotly.newPlot('chart', traces, layout, { responsive: true }).then(() => {
-              window.chartRendered = true; // 确保在图表渲染完成后设置
-              
-            }).catch((error) => {
-              console.error("图表渲染错误:", error); // 捕获渲染错误
-            });
-          </script>
-        </body>
-        </html>
-      `;
-
-      // 设置页面内容
-      await page.setContent(htmlContent, {
-        waitUntil: "networkidle0",
-      });
-
-      // 等待图表渲染完成，延长超时时间
-      await page.waitForFunction(() => window.chartRendered === true, {
-        timeout: 150000, // 延长到 150 秒
+      },
+      customdata: rawColorData,
+      hovertemplate:
+        `${data.xaixs}: %{x}<br>` +
+        `${data.yaixs}: %{y}<br>` +
+        `时间: %{customdata}<extra></extra>`,
+    };
+
+    // ✅ 6. 合同曲线
+    const traces = [scatterTrace];
+
+    if (lineData?.yData?.length) {
+      traces.push({
+        x: lineData.xData,
+        y: lineData.yData,
+        type: "scatter",
+        mode: "lines+markers",
+        name: "合同功率曲线",
+        line: { color: "red" },
+        marker: { color: "red", size: 4 },
       });
+    }
 
-      // 截图并保存到临时文件
-      const chartElement = await page.$("#chart");
-      await chartElement.screenshot({
-        path: tempFilePath,
-        type: "jpeg",
-      });
+    // ✅ 7. layout
+    const layout = {
+      title: {
+        text: scatterData.title || "散点图",
+        font: { size: 16 },
+      },
+      xaxis: {
+        title: data.xaixs,
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      yaxis: {
+        title: data.yaixs,
+        gridcolor: "rgb(255,255,255)",
+        tickcolor: "rgb(255,255,255)",
+        backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
+      },
+      showlegend: false,
+      plot_bgcolor: "#e5ecf6",
+      paper_bgcolor: "#e5ecf6",
+    };
+
+    // ✅ 8. 统一渲染（核心🔥）
+    const url = await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
+    });
 
-      // 上传图片到服务器
-      const formData = new FormData();
-      formData.append("file", fs.createReadStream(tempFilePath));
-      // 发送上传请求
-      //在这里需要传入风场编号-风场编号+分析编号-分析类型-manual-名称.png
-      const response = await axios.post(
-        `${process.env.API_BASE_URL}/examples/upload`,
-        {
-          filePath: tempFilePath,
-          bucketName, //桶名称
-          objectName, //在 MinIO 中的文件名
-        },
-      );
-      // return response.data; // 返回上传结果
-      return response?.data?.url;
-    } catch (error) {
-      throw error;
-    } finally {
-      await browser.close();
-    }
+    return url;
   } catch (error) {
-    console.error("生成2D散点图失败:", error);
+    console.error("❌ 生成2D散点图失败:", error);
     throw error;
   }
 };

downLoadServer/src/server/utils/chartsCom/yawErrorBarSum.js

@@ -1,10 +1,4 @@
-import puppeteer from "puppeteer";
-import fs from "fs-extra";
-import path from "path";
-import FormData from "form-data";
-import axios from "axios"; // 导入 axios
-import { colorSchemes } from "../colors.js";
-import { text } from "stream/consumers";
+import { renderChart } from "../chartService/index.js";
 
 export const getYawErrorBarSumCharts = async (
   data,
@@ -13,156 +7,78 @@ export const getYawErrorBarSumCharts = async (
   analysisTypeCode,
 ) => {
   try {
-    // 提取静态偏航误差值和机组数量
-    let a = [];
-    let b = [];
-    let c = [];
-    data.map((item) => {
-      if (item["[0,3]"] != "0.0") {
-        a.push(item["[0,3]"]);
-      }
-      if (item["(3,5]"] != "0.0") {
-        b.push(item["(3,5]"]);
-      }
-      if (item["(5, )"] != "0.0") {
-        c.push(item["(5, )"]);
-      }
-    });
+    // ===== 数据处理（修复版）=====
+    let countA = 0;
+    let countB = 0;
+    let countC = 0;
 
-    const xData = ["(0,3]", "(3,5]", "(>5]"]; // 偏航误差区间
-    const yData = [a.length, b.length, c.length]; // 各区间的机组数量
+    data.forEach((item) => {
+      const v1 = Number(item["[0,3]"] || 0);
+      const v2 = Number(item["(3,5]"] || 0);
+      const v3 = Number(item["(5, )"] || 0);
 
-    // 每个柱子的颜色
-    const colors = [
-      "#8AC8BE", // (0, 3] 蓝色
-      "#407DB3", // (3, 5] 绿色
-      "#1B2973", // (5, ∞] 红色
-    ];
+      if (v1 !== 0) countA++;
+      if (v2 !== 0) countB++;
+      if (v3 !== 0) countC++;
+    });
+
+    const xData = ["(0,3]", "(3,5]", "(>5]"];
+    const yData = [countA, countB, countC];
 
-    const trace = {
-      x: xData, // 横坐标数据
-      y: yData, // 纵坐标数据
-      type: "bar", // 当前图表类型
-      marker: {
-        color: colors, // 为每个柱子分配不同的颜色
+    // ===== trace =====
+    const traces = [
+      {
+        x: xData,
+        y: yData,
+        type: "bar",
+        marker: {
+          color: ["#8AC8BE", "#407DB3", "#1B2973"],
+        },
+        hovertemplate: "偏航误差区间: %{x}<br>台数: %{y}<extra></extra>",
       },
-      // hovertemplate:
-      //   `偏航误差值:` + ` %{x} <br> ` + `台数:` + "%{y} <br> <extra></extra>",
-    };
+    ];
 
+    // ===== layout =====
     const layout = {
       title: {
         text: "静态偏航误差的绝对值机组台数分布情况",
-        font: {
-          size: 16,
-          weight: "bold",
-        },
-      }, // 图表标题
+        font: { size: 16 },
+      },
       xaxis: {
-        title: { text: "静态偏航误差值（度）" }, // 横坐标标题
+        title: { text: "静态偏航误差值（度）" },
+        gridcolor: "#fff",
         gridcolor: "rgb(255,255,255)",
         tickcolor: "rgb(255,255,255)",
         backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
       yaxis: {
-        title: {
-          text: "台数",
-        }, // 纵坐标标题
+        title: { text: "台数" },
+        gridcolor: "#fff",
         gridcolor: "rgb(255,255,255)",
         tickcolor: "rgb(255,255,255)",
         backgroundcolor: "#e5ecf6",
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
-      margin: {
-        l: 50,
-        r: 50,
-        t: 50,
-        b: 50,
-      },
-      autosize: true, // 开启自适应
-      // showlegend: true, // 显示图例
+      margin: { l: 50, r: 50, t: 50, b: 50 },
       plot_bgcolor: "#e5ecf6",
-      gridcolor: "#fff",
-      bgcolor: "#e5ecf6", // 设置背景颜色
     };
 
-    // 创建临时目录
-    const tempDir = path.join(process.cwd(), "images");
-    await fs.ensureDir(tempDir);
-    const tempFilePath = path.join(
-      tempDir,
-      `temp_yaw_error_bar_sum_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");
-
-    // 使用 Puppeteer 生成图表的截图
-    const browser = await puppeteer.launch({
-      headless: "new",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    // ===== 统一渲染（关键）=====
+    return await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
     });
-    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(
-                  trace,
-                )}], ${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,
-        },
-      );
-      return response.data.url;
-    } catch (error) {
-      console.error("生成图表失败:", error);
-    } finally {
-      await browser.close();
-    }
   } catch (error) {
-    console.error("发生错误:", error);
+    console.error("偏航误差柱状图生成失败:", error);
+    throw error;
   }
 };

downLoadServer/src/server/utils/chartsCom/yawErrorLine.js

@@ -1,17 +1,5 @@
-/*
- * @Author: your name
- * @Date: 2025-05-14 10:49:00
- * @LastEditTime: 2025-07-09 14:33:10
- * @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 { renderChart } from "../chartService/index.js";
 import { colorSchemes } from "../colors.js";
-import axios from "axios";
 
 export const generateYawErrorLine = async (
   chartData,
@@ -19,174 +7,101 @@ export const generateYawErrorLine = async (
   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");
+    const traces = [];
+    const colors = [...colorSchemes[0].colors];
 
-    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>",
-        };
+    // ===== 主数据 =====
+    chartData?.data?.forEach((turbine, index) => {
+      const baseTrace = {
+        x: turbine.xData || [],
+        y: turbine.yData || [],
+        name: turbine.legend || `机组${index + 1}`,
+        type: "scatter", // ✅ 必须加！
+        line: {
+          color: colors[index % colors.length],
+        },
+        marker: {
+          color: colors[index % colors.length],
+        },
+        hovertemplate:
+          `${chartData.xaixs || "X"}: %{x}<br>` +
+          `${chartData.yaixs || "Y"}: %{y}<extra></extra>`,
+      };
 
-        if (chartData.chartType === "line") {
-          chartConfig.mode = "lines+markers"; // 如果是折线图
-          chartConfig.fill = "none";
-        } else if (chartData.chartType === "bar") {
-          chartConfig.fill = "tonexty";
-        }
+      if (chartData.chartType === "line") {
+        baseTrace.mode = "lines+markers";
+      } else if (chartData.chartType === "area") {
+        baseTrace.mode = "lines";
+        baseTrace.fill = "tonexty"; // ✅ 面积图才用
+      }
+
+      traces.push(baseTrace);
+    });
 
-        data.push(chartConfig);
+    // ===== 合同功率曲线 =====
+    if (
+      chartData.contract_Cp_curve_yData?.length &&
+      chartData.contract_Cp_curve_xData?.length
+    ) {
+      traces.push({
+        x: chartData.contract_Cp_curve_xData,
+        y: chartData.contract_Cp_curve_yData,
+        type: "scatter",
+        mode: "lines+markers",
+        name: "合同功率曲线",
+        line: {
+          color: "red",
+          width: 1,
+        },
+        marker: {
+          color: "red",
+          size: 4,
+        },
       });
+    }
 
+    // ===== layout =====
     const layout = {
       title: {
-        text: chartData.data[0].title,
-        font: {
-          size: 16, // 设置标题字体大小（默认 16）
-          weight: "bold",
-        },
+        text: chartData?.data?.[0]?.title || "偏航误差图",
+        font: { size: 16 },
       },
       xaxis: {
+        title: chartData.xaixs || "X轴",
+        gridcolor: "#fff",
         gridcolor: "rgb(255,255,255)",
         tickcolor: "rgb(255,255,255)",
         backgroundcolor: "#e5ecf6",
-        title: chartData.xaixs || "X轴", // 横坐标标题
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
       yaxis: {
+        title: chartData.yaixs || "Y轴",
+        gridcolor: "#fff",
         gridcolor: "rgb(255,255,255)",
         tickcolor: "rgb(255,255,255)",
         backgroundcolor: "#e5ecf6",
-        title: chartData.yaixs || "Y轴", // 纵坐标标题
+        showbackground: true,
+        showline: true, // ✅ 显示 X 轴轴线
+        zeroline: false,
+        linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
       },
-      //   margin: {
-      //     l: 50,
-      //     r: 50,
-      //     t: 50,
-      //     b: 50,
-      //   },
       plot_bgcolor: "#e5ecf6",
-      gridcolor: "#fff",
-      bgcolor: "#e5ecf6", // 设置背景颜色
-      autosize: true, // 开启自适应
-      barmode: chartData.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
+      barmode: chartData.chartType === "bar" ? "stack" : "group",
+      showlegend: true,
     };
 
-    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",
-      // 根据系统改路径
-      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
-
-      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    // ===== 核心：统一渲染 =====
+    return await renderChart({
+      traces,
+      layout,
+      bucketName,
+      objectName,
     });
-
-    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,
-        },
-      );
-
-      return response?.data?.url;
-    } catch (error) {
-      console.error("生成折线图失败:", error);
-      throw error;
-    } finally {
-      await browser.close();
-    }
   } catch (error) {
-    console.error("生成折线图失败:", error);
+    console.error("偏航误差折线图生成失败:", error);
     throw error;
   }
 };

downLoadServer/src/server/utils/colors.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2025-04-09 09:35:33
- * @LastEditTime: 2026-05-14 14:37:30
- * @LastEditors: milo-MacBook-Pro.local
+ * @LastEditTime: 2025-04-09 09:38:09
+ * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /downLoadServer/src/server/utils/colors.js
  */
@@ -11,9 +11,9 @@ export const colorSchemes = [
     label: "默认",
     colors: [
       // "#FFFFDF",
-      // "#DFEDC1",
-      // "#EBF6C1",
-      // "#DBEEBC",
+      "#DFEDC1",
+      "#EBF6C1",
+      "#DBEEBC",
       "#A8D7BE",
       "#8ECAC1",
       "#77BDC2",

downLoadServer/src/server/utils/copyFileCsv.js

@@ -58,6 +58,11 @@ const preloadAllImages = async (chartsImages) => {
   return imageMap;
 };
 
+const isValidImageUrl = (url) => typeof url === "string" && url.trim();
+
+const hasImages = (imageTagData, tag) =>
+  Array.isArray(imageTagData[tag]) && imageTagData[tag].length > 0;
+
 // 生成 Word 文件
 export const copyFileDocx = async (fieldInfo, chartsImages) => {
   try {
@@ -124,7 +129,9 @@ export const copyFileDocx = async (fieldInfo, chartsImages) => {
     const imageTagData = {};
     for (const [tag, urlList] of Object.entries(chartsImages)) {
       if (Array.isArray(urlList)) {
-        imageTagData[tag] = urlList.map((url) => ({ image: url }));
+        imageTagData[tag] = urlList
+          .filter(isValidImageUrl)
+          .map((url) => ({ image: url }));
       } else {
         // console.warn(`⚠️ 无效的 urlList: ${tag}`, urlList);
         imageTagData[tag] = []; // 或 throw error
@@ -153,160 +160,149 @@ export const copyFileDocx = async (fieldInfo, chartsImages) => {
       engineTypeList: chartsImages.engineTypeList,
       dataTime: chartsImages.dataTime,
       "show-zn-techcn-replace-tags-data_integrity_minute-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-data_integrity_minute-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-data_integrity_minute-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-data_integrity_second-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-data_integrity_second-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-data_integrity_second-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-production_indicator_unit-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-production_indicator_unit-generalFiles"
-        ]
-          ? true
-          : false,
-      "show-zn-techcn-replace-tags-yaw_error-generalFiles1": imageTagData[
-        "zn-techcn-replace-tags-yaw_error-generalFiles1"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-yaw_error-diagramRelations": imageTagData[
-        "zn-techcn-replace-tags-yaw_error-diagramRelations"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-fault_all-generalFiles": imageTagData[
-        "zn-techcn-replace-tags-fault_all-generalFiles"
-      ]
-        ? true
-        : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-production_indicator_unit-generalFiles",
+        ),
+      "show-zn-techcn-replace-tags-yaw_error-generalFiles1": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-yaw_error-generalFiles1",
+      ),
+      "show-zn-techcn-replace-tags-yaw_error-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-yaw_error-diagramRelations",
+      ),
+      "show-zn-techcn-replace-tags-fault_all-generalFiles": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-fault_all-generalFiles",
+      ),
       "show-zn-techcn-replace-tags-temperature_large_components_hig-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_large_components_hig-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_large_components_hig-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-temperature_large_components_low-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_large_components_low-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_large_components_low-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-temperature_large_components_adriven-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_large_components_adriven-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_large_components_adriven-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-temperature_large_components_undriven-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_large_components_undriven-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_large_components_undriven-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-temperature_large_components_tem_deviation-diagramRelations":
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_large_components_tem_deviation-diagramRelations"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_large_components_tem_deviation-diagramRelations",
+        ),
       "show-zn-techcn-replace-tags-pitch_generator_speed-diagramRelations":
-        imageTagData[
-          "zn-techcn-replace-tags-pitch_generator_speed-diagramRelations"
-        ]
-          ? true
-          : false,
-      "show-zn-techcn-replace-tags-power_curve-generalFiles": imageTagData[
-        "zn-techcn-replace-tags-power_curve-generalFiles"
-      ]
-        ? true
-        : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-pitch_generator_speed-diagramRelations",
+        ),
+      "show-zn-techcn-replace-tags-power_curve-generalFiles": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-power_curve-generalFiles",
+      ),
       "show-zn-techcn-replace-tags-power_scatter_2D-diagramRelations":
-        imageTagData["zn-techcn-replace-tags-power_scatter_2D-diagramRelations"]
-          ? true
-          : false,
-      "show-zn-techcn-replace-tags-cp-generalFiles": imageTagData[
-        "zn-techcn-replace-tags-cp-generalFiles"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-cp_trend-diagramRelations": imageTagData[
-        "zn-techcn-replace-tags-cp_trend-diagramRelations"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-tsr-generalFiles": imageTagData[
-        "zn-techcn-replace-tags-tsr-generalFiles"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-tsr_trend-diagramRelations": imageTagData[
-        "zn-techcn-replace-tags-tsr_trend-diagramRelations"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-min_pitch-diagramRelations": imageTagData[
-        "zn-techcn-replace-tags-min_pitch-diagramRelations"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-power_curve-generalFiles": imageTagData[
-        "zn-techcn-replace-tags-power_curve-generalFiles"
-      ]
-        ? true
-        : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-power_scatter_2D-diagramRelations",
+        ),
+      "show-zn-techcn-replace-tags-cp-generalFiles": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-cp-generalFiles",
+      ),
+      "show-zn-techcn-replace-tags-cp-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-cp-diagramRelations",
+      ),
+      "show-zn-techcn-replace-tags-cp_trend-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-cp_trend-diagramRelations",
+      ),
+      "show-zn-techcn-replace-tags-tsr-generalFiles": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-tsr-generalFiles",
+      ),
+      "show-zn-techcn-replace-tags-tsr-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-tsr-diagramRelations",
+      ),
+      "show-zn-techcn-replace-tags-tsr_trend-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-tsr_trend-diagramRelations",
+      ),
+      "show-zn-techcn-replace-tags-min_pitch-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-min_pitch-diagramRelations",
+      ),
       "show-zn-techcn-replace-tags-power_scatter_2D-diagramRelations":
-        imageTagData["zn-techcn-replace-tags-power_scatter_2D-diagramRelations"]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-power_scatter_2D-diagramRelations",
+        ),
       // "": imageTagData[""] ? true : false,
       //功率散点图
       "show-zn-techcn-replace-tags-power_scatter-diagramRelations":
-        imageTagData["zn-techcn-replace-tags-power_scatter-diagramRelations"]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-power_scatter-diagramRelations",
+        ),
       "show-zn-techcn-replace-tags-power_scatter":
-        imageTagData["zn-techcn-replace-tags-power_scatter-diagramRelations"] ||
-        imageTagData[
-          "zn-techcn-replace-tags-power_scatter_2D-diagramRelations"
-        ] ||
-        imageTagData["zn-techcn-replace-tags-power_curve-generalFiles"]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-power_scatter-diagramRelations",
+        ) ||
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-power_scatter_2D-diagramRelations",
+        ) ||
+        hasImages(imageTagData, "zn-techcn-replace-tags-power_curve-generalFiles"),
       "show-zn-techcn-replace-tags-fault_all-generalFiles&show-zn-techcn-replace-tags-temperature_large_components_hig-generalFiles":
-        imageTagData["zn-techcn-replace-tags-fault_all-generalFiles"] &&
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_large_components_hig-generalFiles"
-        ]
-          ? true
-          : false,
+        hasImages(imageTagData, "zn-techcn-replace-tags-fault_all-generalFiles") &&
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_large_components_hig-generalFiles",
+        ),
       "show-zn-techcn-replace-tags-yaw_error_density-diagramRelations":
-        imageTagData[
-          "zn-techcn-replace-tags-yaw_error_density-diagramRelations"
-        ]
-          ? true
-          : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-yaw_error_density-diagramRelations",
+        ),
       "show-zn-techcn-replace-tags-temperature_environment-generalFiles":
-        imageTagData[
-          "zn-techcn-replace-tags-temperature_environment-generalFiles"
-        ]
-          ? true
-          : false,
-      "show-zn-techcn-replace-tags-pitch_power-diagramRelations": imageTagData[
-        "zn-techcn-replace-tags-pitch_power-diagramRelations"
-      ]
-        ? true
-        : false,
-      "show-zn-techcn-replace-tags-speed_power-generalFiles": imageTagData[
-        "zn-techcn-replace-tags-speed_power-generalFiles"
-      ]
-        ? true
-        : false,
+        hasImages(
+          imageTagData,
+          "zn-techcn-replace-tags-temperature_environment-generalFiles",
+        ),
+      "show-zn-techcn-replace-tags-pitch_power-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-pitch_power-diagramRelations",
+      ),
+      "show-zn-techcn-replace-tags-speed_power-generalFiles": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-speed_power-generalFiles",
+      ),
+      "show-zn-techcn-replace-tags-speed_power-diagramRelations": hasImages(
+        imageTagData,
+        "zn-techcn-replace-tags-speed_power-diagramRelations",
+      ),
     };
 
     // 渲染 Word 模板

downLoadServer/src/server/utils/copyFileImage.js

@@ -0,0 +1,172 @@
+import axios from "axios";
+// import sharp from "sharp";
+import pLimit from "p-limit";
+import archiver from "archiver";
+import { PassThrough } from "stream";
+
+const limit = pLimit(6);
+const imageCache = new Map();
+const MAX_RETRY = 3;
+
+/**
+ * 下载图片
+ */
+async function downloadImage(url) {
+  const safeUrl = url.replace(/#/g, "%23");
+
+  const res = await axios.get(safeUrl, {
+    responseType: "arraybuffer",
+    timeout: 20000,
+  });
+
+  return Buffer.from(res.data);
+}
+
+/**
+ * 压缩图片
+ */
+// async function compressImage(buffer) {
+//   return sharp(buffer)
+//     .resize({
+//       width: 1200,
+//       withoutEnlargement: true,
+//     })
+//     .webp({
+//       quality: 70,
+//     })
+//     .toBuffer();
+// }
+
+/**
+ * 处理单张图片
+ */
+async function processImage(url) {
+  if (!url) return null;
+
+  if (imageCache.has(url)) {
+    return imageCache.get(url);
+  }
+
+  for (let i = 0; i < MAX_RETRY; i++) {
+    try {
+      const buffer = await downloadImage(url);
+      //   const compressed = await compressImage(buffer);
+
+      imageCache.set(url, buffer);
+
+      return compressed;
+    } catch (err) {
+      if (i === MAX_RETRY - 1) {
+        console.warn("图片处理失败:", url);
+        return null;
+      }
+    }
+  }
+}
+
+/**
+ * 主处理函数
+ */
+export async function processChartsImages({
+  chartsImages,
+  bucketName,
+  objectName,
+}) {
+  console.log(chartsImages, "chartsImages");
+  console.log(bucketName, "bucketName");
+  console.log(objectName, "objectName");
+  if (!chartsImages) {
+    throw new Error("chartsImages不能为空");
+  }
+
+  const tasks = [];
+
+  for (const urls of Object.values(chartsImages)) {
+    if (!Array.isArray(urls)) continue;
+
+    urls.forEach((url) => {
+      tasks.push(limit(() => processImage(url)));
+    });
+  }
+
+  const images = (await Promise.all(tasks)).filter(Boolean);
+
+  if (!images.length) {
+    throw new Error("没有成功处理的图片");
+  }
+
+  const { downloadId, minioUrl } = await createZipStream(
+    images,
+    bucketName,
+    objectName,
+  );
+
+  return {
+    downloadId,
+    url: minioUrl,
+  };
+}
+
+/**
+ * 创建zip并上传MinIO
+ */
+async function createZipStream(images, bucketName, objectName) {
+  const downloadId = `images`;
+  const zipName = `${downloadId}.zip`;
+
+  const archive = archiver("zip", {
+    zlib: { level: 9 },
+  });
+
+  const zipStream = new PassThrough();
+
+  archive.pipe(zipStream);
+
+  images.forEach((buffer, index) => {
+    archive.append(buffer, {
+      name: `image_${index + 1}.webp`,
+    });
+  });
+
+  archive.finalize();
+
+  const minioUrl = await uploadStreamToMinio(
+    zipStream,
+    bucketName,
+    `${objectName}/${zipName}`,
+  );
+
+  return {
+    downloadId,
+    minioUrl,
+  };
+}
+
+/**
+ * 上传流到MinIO
+ */
+async function uploadStreamToMinio(stream, bucketName, objectName) {
+  console.log("开始上传ZIP到 MinIO...");
+
+  const response = await axios.post(
+    `${process.env.API_BASE_URL}/examples/uploadStream`,
+    stream,
+    {
+      headers: {
+        "Content-Type": "application/zip",
+        bucketName,
+        objectName,
+      },
+      maxContentLength: Infinity,
+      maxBodyLength: Infinity,
+    },
+  );
+
+  if (!response?.data?.url) {
+    throw new Error("MinIO 上传失败");
+  }
+
+  console.log("MinIO 上传成功");
+
+  return response.data.url;
+}

downLoadServer/src/server/utils/minioService.js

@@ -1,40 +1,106 @@
-/*
- * @Author: your name
- * @Date: 2025-04-28 14:43:09
- * @LastEditTime: 2025-05-14 13:42:40
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /downLoadServer/src/server/utils/minioService.js
- */
-// src/minioService.js
+// /*
+//  * @Author: your name
+//  * @Date: 2025-04-28 14:43:09
+//  * @LastEditTime: 2026-03-13 14:54:29
+//  * @LastEditors: milo-MacBook-Pro.local
+//  * @Description: In User Settings Edit
+//  * @FilePath: /downLoadServer/src/server/utils/minioService.js
+//  */
+// // src/minioService.js
+// import { Client } from "minio";
+
+// // 创建 MinIO 客户端
+// export const minioClient = new Client({
+//   endPoint: process.env.MINIO_ENDPOINT, // 从环境变量中获取 MinIO 服务器地址
+//   port: parseInt(process.env.MINIO_PORT, 10), // 从环境变量中获取 MinIO 端口
+//   useSSL: false, // 如果使用 HTTPS，请设置为 true
+//   accessKey: process.env.MINIO_ACCESS_KEY, // 从环境变量中获取 MinIO 访问密钥
+//   secretKey: process.env.MINIO_SECRET_KEY, // 从环境变量中获取 MinIO 秘密密钥
+//   // endPoint: "192.168.50.233", // 不需要包含 http://
+//   // port: 6900, // 确保端口正确
+//   // useSSL: false, // 如果使用 HTTPS，请设置为 true
+//   // accessKey: "haH1vePq7unSp4TG1One", // MinIO 访问密钥
+//   // secretKey: "idxO5SAjboUYERpDICgHgBoHX7bcYv355lMQANt6", // MinIO 秘密密钥
+// });
+
+// // 上传文件到 MinIO
+// export const uploadFileToMinIO = async (bucketName, filePath, objectName) => {
+//   try {
+//     // 检查桶是否存在，如果不存在则创建
+//     const bucketExists = await minioClient.bucketExists(bucketName);
+//     if (!bucketExists) {
+//       await minioClient.makeBucket(bucketName, "us-east-1"); // 使用适当的区域
+//       console.log(`Bucket ${bucketName} created successfully.`);
+//     }
+//     // 上传文件
+//     await minioClient.fPutObject(bucketName, objectName, filePath);
+//   } catch (error) {
+//     console.error("Error uploading file to MinIO:", error);
+//   }
+// };
+// src/server/utils/minioService.js
+import dotenv from "dotenv";
 import { Client } from "minio";
 
-// 创建 MinIO 客户端
-const minioClient = new Client({
-  endPoint: process.env.MINIO_ENDPOINT, // 从环境变量中获取 MinIO 服务器地址
-  port: parseInt(process.env.MINIO_PORT, 10), // 从环境变量中获取 MinIO 端口
+// 兜底：避免某些入口未提前加载环境变量
+dotenv.config();
+
+function normalizeEnvValue(value) {
+  if (value == null) return "";
+  // 常见误配：末尾多了逗号/空格（会导致 Authorization 头被解析成“缺字段”）
+  return String(value).trim().replace(/,+$/, "");
+}
+
+function getRequiredEnv(name) {
+  const v = normalizeEnvValue(process.env[name]);
+  if (!v) {
+    throw new Error(
+      `MinIO 配置缺失：环境变量 ${name} 为空。请检查 downLoadServer/.env 是否已加载`,
+    );
+  }
+  return v;
+}
+
+const MINIO_ENDPOINT = getRequiredEnv("MINIO_ENDPOINT");
+const MINIO_PORT_RAW = getRequiredEnv("MINIO_PORT");
+const MINIO_PORT = Number.parseInt(MINIO_PORT_RAW, 10);
+if (!Number.isFinite(MINIO_PORT)) {
+  throw new Error(`MinIO 配置错误：MINIO_PORT 非法 (${MINIO_PORT_RAW})`);
+}
+
+const MINIO_ACCESS_KEY = getRequiredEnv("MINIO_ACCESS_KEY");
+const MINIO_SECRET_KEY = getRequiredEnv("MINIO_SECRET_KEY");
+
+export const minioClient = new Client({
+  endPoint: MINIO_ENDPOINT, // 不要包含 http(s)://
+  port: MINIO_PORT,
   useSSL: false, // 如果使用 HTTPS，请设置为 true
-  accessKey: process.env.MINIO_ACCESS_KEY, // 从环境变量中获取 MinIO 访问密钥
-  secretKey: process.env.MINIO_SECRET_KEY, // 从环境变量中获取 MinIO 秘密密钥
-  // endPoint: "192.168.50.233", // 不需要包含 http://
-  // port: 6900, // 确保端口正确
-  // useSSL: false, // 如果使用 HTTPS，请设置为 true
-  // accessKey: "haH1vePq7unSp4TG1One", // MinIO 访问密钥
-  // secretKey: "idxO5SAjboUYERpDICgHgBoHX7bcYv355lMQANt6", // MinIO 秘密密钥
+  accessKey: MINIO_ACCESS_KEY,
+  secretKey: MINIO_SECRET_KEY,
 });
+/**
+ * 上传 Buffer 到 MinIO
+ * @param {string} bucketName
+ * @param {string} objectName
+ * @param {Buffer} buffer
+ * @returns {string} 返回可访问 URL
+ */
 
-// 上传文件到 MinIO
-export const uploadFileToMinIO = async (bucketName, filePath, objectName) => {
+export async function uploadBufferToMinIO(bucketName, objectName, buffer) {
   try {
-    // 检查桶是否存在，如果不存在则创建
-    const bucketExists = await minioClient.bucketExists(bucketName);
-    if (!bucketExists) {
-      await minioClient.makeBucket(bucketName, "us-east-1"); // 使用适当的区域
-      console.log(`Bucket ${bucketName} created successfully.`);
+    // 检查桶是否存在
+    const exists = await minioClient.bucketExists(bucketName);
+    if (!exists) {
+      await minioClient.makeBucket(bucketName);
     }
-    // 上传文件
-    await minioClient.fPutObject(bucketName, objectName, filePath);
-  } catch (error) {
-    console.error("Error uploading file to MinIO:", error);
+
+    // 上传
+    await minioClient.putObject(bucketName, objectName, buffer);
+
+    // 返回可访问 URL
+    return `http://${MINIO_ENDPOINT}:${MINIO_PORT}/${bucketName}/${objectName}`;
+  } catch (err) {
+    console.error("Upload buffer failed:", err);
+    throw err; // 上传失败直接抛出异常
   }
-};
+}

downLoadServer/src/test.mjs

@@ -17,15 +17,15 @@ const testChartGeneration = async () => {
     console.log("响应数据:", response.data);
     console.log(
       "图表URL:",
-      `http://127.0.0.1:3000${response.data.data.imageUrl}`
+      `http://127.0.0.1:3000${response.data.data.imageUrl}`,
     );
   } catch (error) {
     console.error(
       "测试失败:",
-      error.response ? error.response.data : error.message
+      error.response ? error.response.data : error.message,
     );
   }
 };
 
 // 运行测试
-testChartGeneration();
+// testChartGeneration();