生成图表图片

downLoadServer/package.json

@@ -13,6 +13,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.6.8",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^4.19.1",
     "form-data": "^4.0.2",

downLoadServer/src/server/controllers/chartController.js

@@ -1,6 +1,9 @@
 import { successResponse, errorResponse } from "../utils/response.js";
 import { generateBarChart } from "../utils/chartsCom/BarChart.js";
+import { generateLineChart } from "../utils/chartsCom/lineChartsFen.js";
+import { generateLineAndChildLine } from "../utils/chartsCom/lineAndChildLine.js";
 import axios from "axios";
+import e from "express";
 
 export const createBarChart = async (req, res) => {
   try {
@@ -33,10 +36,10 @@ export const createBarChart = async (req, res) => {
       {
         imageUrl: imageUrl,
       },
-      "图表生成成功"
+      "柱状图生成成功"
     );
   } catch (error) {
-    console.error("创建图表失败:", error);
+    console.error("创建柱状图失败:", error);
     if (error.response) {
       errorResponse(
         res,
@@ -44,7 +47,97 @@ export const createBarChart = async (req, res) => {
         error.response.status
       );
     } else {
-      errorResponse(res, "创建图表失败", 500);
+      errorResponse(res, "创建柱状图失败", 500);
+    }
+  }
+};
+
+export const createLineChart = async (req, res) => {
+  try {
+    const { dataUrl } = req.body;
+
+    if (!dataUrl) {
+      return errorResponse(res, "缺少数据URL", 400);
+    }
+
+    // 从URL获取数据
+    const response = await axios.get(dataUrl);
+    const data = response.data;
+
+    // 验证数据格式
+    if (
+      !data ||
+      !data.data ||
+      !data.data[0] ||
+      !data.data[0].xData ||
+      !data.data[0].yData
+    ) {
+      return errorResponse(res, "获取的数据格式不正确", 400);
+    }
+
+    // 生成图表并上传
+    const imageUrl = await generateLineChart(data);
+
+    successResponse(
+      res,
+      {
+        imageUrl: imageUrl,
+      },
+      "折线图生成成功"
+    );
+  } catch (error) {
+    console.error("创建折线图失败:", error);
+    if (error.response) {
+      errorResponse(
+        res,
+        `获取数据失败: ${error.response.status}`,
+        error.response.status
+      );
+    } else {
+      errorResponse(res, "创建折线图失败", 500);
+    }
+  }
+};
+
+export const createLineAndChildLineChart = async (req, res) => {
+  try {
+    const { dataUrl } = req.body; // 从请求体中获取数据URL
+    if (!dataUrl) {
+      return errorResponse(res, "缺少数据URL", 400);
+    }
+    // 从URL获取数据
+    const response = await axios.get(dataUrl);
+    const data = response.data;
+    // 验证数据格式
+    if (
+      !data ||
+      !data.data ||
+      !data.data[0] ||
+      !data.data[0].xData ||
+      !data.data[0].yData
+    ) {
+      return errorResponse(res, "获取的数据格式不正确", 400);
+    } else {
+      // 生成图表并上传
+      const imageUrl = await generateLineAndChildLine(data);
+      successResponse(
+        res,
+        {
+          imageUrl: imageUrl,
+        },
+        "折线图生成成功"
+      );
+    }
+  } catch (error) {
+    console.error("创建LineAndChildLineChart折线图失败:", error);
+    if (error.response) {
+      errorResponse(
+        res,
+        `获取数据失败: ${error.response.status}`,
+        error.response.status
+      );
+    } else {
+      errorResponse(res, "创建LineAndChildLineChart折线图失败", 500);
     }
   }
 };

downLoadServer/src/server/routes/chartRoutes.js

@@ -1,8 +1,14 @@
 import express from "express";
-import { createBarChart } from "../controllers/chartController.js";
+import {
+  createBarChart,
+  createLineChart,
+  createLineAndChildLineChart,
+} from "../controllers/chartController.js";
 
 const router = express.Router();
 
 router.post("/bar", createBarChart);
+router.post("/line", createLineChart);
+router.post("/lineAndChildLine", createLineAndChildLineChart);
 
 export default router;

downLoadServer/src/server/server.js

@@ -6,12 +6,15 @@ 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";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
-
+// 使用 cors 中间件
+app.use(cors());
 // 中间件
 app.use(express.json());
 app.use(logger);
@@ -25,8 +28,8 @@ app.use(
 );
 
 // 路由
-app.use("/api/examples", exampleRoutes);
-app.use("/api/charts", chartRoutes);
+app.use("/examples", exampleRoutes);
+app.use("/chartServer/charts", chartRoutes);
 
 // 错误处理
 app.use(errorHandler);

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

@@ -184,21 +184,22 @@ export const generateBarChart = async (data) => {
       formData.append("engineCode", data.engineCode);
       formData.append("analysisTypeCode", data.analysisTypeCode);
 
-      const uploadResponse = await axios.post(
-        "http://192.168.50.233:6900/upload", //minio 地址上传
-        formData,
-        {
-          headers: {
-            ...formData.getHeaders(),
-          },
-        }
-      );
-
-      // 删除临时文件
+      // const uploadResponse = await axios.post(
+      //   "http://localhost:6900/upload", //minio 地址上传（http://192.168.50.233:6900/upload）
+      //   formData,
+      //   {
+      //     headers: {
+      //       ...formData.getHeaders(),
+      //     },
+      //   }
+      // );
+
+      //删除临时文件;
       await fs.remove(tempFilePath);
 
-      console.log("图表生成并上传成功:", uploadResponse.data.url);
-      return uploadResponse.data.url;
+      // console.log("图表生成并上传成功:", uploadResponse.data.url);
+      // return uploadResponse.data.url;
+      return formData;
     } finally {
       await browser.close();
     }

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

@@ -0,0 +1,206 @@
+import puppeteer from "puppeteer";
+import fs from "fs-extra";
+import path from "path";
+import axios from "axios";
+import FormData from "form-data";
+import { colorSchemes } from "../colors.js";
+
+/**
+ * 生成折线图并上传
+ * @param {Object} options - 配置选项
+ * @param {string} options.fileAddr - 数据文件地址
+ * @param {string[]} options.color1 - 颜色数组1
+ * @param {string[]} options.colors - 颜色数组2
+ * @param {Object[]} options.setUpImgData - 图表设置数据
+ * @returns {Promise<String>} - 返回图片URL
+ */
+export const generateLineAndChildLine = async (options) => {
+  const { fileAddr } = options;
+
+  try {
+    console.log("开始生成折线图...");
+    // 获取数据
+    const resultChartsData = await axios.get(fileAddr);
+    const chartData = resultChartsData.data;
+
+    // 准备图表数据
+    const data = [];
+    chartData.data &&
+      chartData.data.forEach((turbine, index) => {
+        const chartConfig = {
+          x: turbine.xData,
+          y: turbine.yData,
+          name: turbine.engineName,
+          mode: "lines",
+          line: {
+            color: colorSchemes[index % colorSchemes.length],
+          },
+          marker: {
+            color: colorSchemes[index % colorSchemes.length],
+          },
+          hovertemplate:
+            `${chartData.xaixs}:` +
+            ` %{x} <br> ` +
+            `${chartData.yaixs}:` +
+            "%{y} <br>",
+        };
+        if (chartData.yaixs === "概率密度函数") {
+          chartConfig.line.color = colorSchemes[0][12];
+        }
+        data.push(chartConfig);
+      });
+
+    // 准备布局配置
+    const layout = {
+      title: {
+        text: chartData.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",
+    };
+
+    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(), "temp");
+    await fs.ensureDir(tempDir);
+    const tempFilePath = path.join(
+      tempDir,
+      `temp_line_chart_${Date.now()}.png`
+    );
+
+    // 获取 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",
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    });
+
+    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: "png",
+      });
+
+      // 上传图片到服务器
+      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 || "");
+
+      // const uploadResponse = await axios.post(
+      //   "http://localhost:6900/upload",
+      //   formData,
+      //   {
+      //     headers: {
+      //       ...formData.getHeaders(),
+      //     },
+      //   }
+      // );
+
+      // 删除临时文件
+      await fs.remove(tempFilePath);
+      // console.log("折线图生成并上传成功:", uploadResponse.data.url);
+      // return uploadResponse.data.url;
+      return formData;
+    } finally {
+      await browser.close();
+    }
+  } catch (error) {
+    console.error("生成折线图失败:", error);
+    throw error;
+  }
+};

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

@@ -0,0 +1,220 @@
+import puppeteer from "puppeteer";
+import fs from "fs-extra";
+import path from "path";
+import axios from "axios";
+import FormData from "form-data";
+
+/**
+ * 生成折线图并上传
+ * @param {Object} data - 图表数据
+ * @returns {Promise<String>} - 返回图片URL
+ */
+export const generateLineChart = async (data) => {
+  try {
+    console.log("开始生成折线图...");
+    console.log("数据:", data);
+
+    // 创建临时目录
+    const tempDir = path.join(process.cwd(), "temp");
+    await fs.ensureDir(tempDir);
+    const tempFilePath = path.join(
+      tempDir,
+      `temp_line_chart_${Date.now()}.png`
+    );
+
+    // 获取 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",
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    });
+
+    try {
+      const page = await browser.newPage();
+
+      // 准备图表数据
+      const sortedData = data.data.sort((a, b) => {
+        if (
+          a.engineCode === data.fieldEngineCode &&
+          b.engineCode !== data.fieldEngineCode
+        ) {
+          return 1;
+        }
+        if (
+          a.engineCode !== data.fieldEngineCode &&
+          b.engineCode === data.fieldEngineCode
+        ) {
+          return -1;
+        }
+        return 0;
+      });
+
+      const finalData = [];
+      sortedData.forEach((turbine) => {
+        const color =
+          turbine.engineCode === data.fieldEngineCode ? "#406DAB" : "#D3D3D3";
+        const chartConfig = {
+          x: turbine.xData,
+          y: turbine.yData,
+          name: turbine.engineName,
+          mode: "lines",
+          fill: "none",
+          line: { color },
+          marker: { color },
+          hovertemplate: `${data.xaixs}: %{x} <br> ${data.yaixs}: %{y} <br>`,
+        };
+        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,
+          mode: "lines+markers",
+          name: "合同功率曲线",
+          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",
+      };
+
+      // 设置坐标轴范围
+      const getChartSetUp = (axisTitle) => {
+        return data.setUpImgData?.find((item) => item.text.includes(axisTitle));
+      };
+
+      const xChartSetUp = getChartSetUp(layout.xaxis.title);
+      if (xChartSetUp) {
+        layout.xaxis.dtick = xChartSetUp.dtick;
+        layout.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
+      }
+
+      const yChartSetUp = getChartSetUp(layout.yaxis.title);
+      if (yChartSetUp) {
+        layout.yaxis.dtick = yChartSetUp.dtick;
+        layout.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
+      }
+
+      // 创建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: "png",
+      });
+
+      // 上传图片到服务器
+      const formData = new FormData();
+      formData.append("file", fs.createReadStream(tempFilePath));
+      formData.append("type", "chart");
+      formData.append("engineCode", data.engineCode);
+      formData.append("analysisTypeCode", data.analysisTypeCode);
+
+      // const uploadResponse = await axios.post(
+      //   "http://localhost:6900/upload",
+      //   formData,
+      //   {
+      //     headers: {
+      //       ...formData.getHeaders(),
+      //     },
+      //   }
+      // );
+
+      // 删除临时文件
+      await fs.remove(tempFilePath);
+      // console.log("折线图生成并上传成功:", uploadResponse.data.url);
+      // return uploadResponse.data.url;
+      return formData;
+    } finally {
+      await browser.close();
+    }
+  } catch (error) {
+    console.error("生成折线图失败:", error);
+    throw error;
+  }
+};

downLoadServer/src/server/utils/colors.js

@@ -0,0 +1,280 @@
+/*
+ * @Author: your name
+ * @Date: 2025-04-09 09:35:33
+ * @LastEditTime: 2025-04-09 09:38:09
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /downLoadServer/src/server/utils/colors.js
+ */
+export const colorSchemes = [
+  {
+    label: "默认",
+    colors: [
+      // "#FFFFDF",
+      "#DFEDC1",
+      "#EBF6C1",
+      "#DBEEBC",
+      "#A8D7BE",
+      "#8ECAC1",
+      "#77BDC2",
+      "#64ADC2",
+      "#559ABE",
+      "#4884B7",
+      "#406DAB",
+      "#3856A0",
+      "#314291",
+      "#28357A",
+      "#1A285E",
+    ],
+    // colors: [
+    //   "#6FB99F", // 柔和的蓝绿色
+    //   "#5DA89E",
+    //   "#4C979E",
+    //   "#3B869D",
+    //   "#2D7492",
+    //   "#1F6286",
+
+    //   "#2C1B5E", // 深紫色过渡
+    //   "#27174E",
+    //   "#1F123D",
+    //   "#180C2D",
+    //   "#A76DA8", // 柔和的紫色过渡
+    //   "#95579B",
+    //   "#81408D",
+    //   "#6A297A",
+    //   "#541D67",
+    //   "#3E134E",
+    //   "#985B4A", // 深暖色调
+    //   "#874B3A",
+    //   "#763B2A",
+    //   "#652C1A",
+    // ],
+  },
+  {
+    label: "复古",
+    colors: [
+      "#FFB7A6",
+      "#715219",
+      "#EA7637",
+      "#B6B642",
+      "#FF7F50",
+      "#C83629",
+      "#672064",
+      "#E48179",
+      "#D15D42",
+      "#459BAF",
+      "#FF69B4",
+      "#800080",
+      "#9B3D2F",
+      "#DAA520",
+      "#BC8F8F",
+      "#F5DEB3",
+      "#D2B48C",
+      "#F0E68C",
+      "#FFF8DC",
+      "#FFE4B5",
+      "#C0C0C0",
+      "#6A3D9D",
+      "#9B7D37",
+      "#FDCB6E",
+      "#FF6F61",
+      "#D1A5A0",
+      "#8E5A78",
+      "#CF7555",
+      "#F29B60",
+      "#6F88B3",
+      "#5F3F7E",
+      "#B564A2",
+      "#FF8860",
+      "#B67E5F",
+      "#A67A92",
+      "#8B6B4E",
+      "#9E7F7C",
+      "#DC8F3D",
+      "#C7789E",
+      "#E5A745",
+      "#5C97A3",
+    ],
+  },
+  {
+    label: "淡雅",
+    colors: [
+      "#F1E1C6",
+      "#EA8783",
+      "#F5C380",
+      "#F7E87C",
+      "#D1E4D0",
+      "#62B6F6",
+      "#7FAAF0",
+      "#C49DF9",
+      "#B6A6C5",
+      "#32CD32",
+      "#8B008B",
+      "#FFD700",
+      "#A49BB1",
+      "#A9A9A9",
+      "#B9E9E2",
+      "#FF6347",
+      "#E3B9E6",
+      "#00BFFF",
+      "#FF4500",
+      "#808080",
+      "#D1C4E9",
+      "#B3E5FC",
+      "#F0E68C",
+      "#E8B6C1",
+      "#C8C3D5",
+      "#A9B2D8",
+      "#FFC0CB",
+      "#9ACD32",
+      "#C71585",
+      "#6A5ACD",
+      "#8FBC8F",
+      "#A52A2A",
+      "#D2691E",
+      "#40E0D0",
+      "#00CED1",
+      "#B0E0E6",
+      "#FF1493",
+      "#AFB9D2",
+      "#C2DFFF",
+      "#F4A300",
+    ],
+  },
+  {
+    label: "商务",
+    colors: [
+      "#A6B3C1",
+      "#555555",
+      "#B26F28",
+      "#2B666A",
+      "#4A6D7C",
+      "#615B9B",
+      "#898989",
+      "#9B982F",
+      "#2F3A47",
+      "#A52A2A",
+      "#B8860B",
+      "#6A5ACD",
+      "#1D2329",
+      "#D3D3D3",
+      "#708090",
+      "#2F4F4F",
+      "#556B2F",
+      "#8B4513",
+      "#483D8B",
+      "#00BFFF",
+      "#C71585",
+      "#DDA0DD",
+      "#FF6347",
+      "#8B0000",
+      "#6B8E23",
+      "#B22222",
+      "#A52A2A",
+      "#CD5C5C",
+      "#F4A300",
+      "#FF8C00",
+      "#F0E68C",
+      "#F5F5DC",
+      "#3E8E41",
+      "#6A5ACD",
+      "#708090",
+      "#C0C0C0",
+      "#2F4F4F",
+      "#FFB6C1",
+      "#A8D5BA",
+      "#96C5AE",
+      "#E1C16E",
+    ],
+  },
+  {
+    label: "简洁",
+    colors: [
+      "#F0F6F7",
+      "#ABDEFC",
+      "#F3AC9B",
+      "#A989F7",
+      "#A8D1D5",
+      "#AF65AE",
+      "#423E78",
+      "#E48178",
+      "#5FA9B0",
+      "#F5F5F5",
+      "#FFD700",
+      "#DC143C",
+      "#2B666A",
+      "#FF6347",
+      "#00FA9A",
+      "#FF1493",
+      "#1E90FF",
+      "#FF4500",
+      "#C71585",
+      "#FF8C00",
+      "#9932CC",
+      "#6A5ACD",
+      "#4169E1",
+      "#32CD32",
+      "#FFB6C1",
+      "#D2691E",
+      "#8A2BE2",
+      "#B0C4DE",
+      "#FF69B4",
+      "#20B2AA",
+      "#F0E68C",
+      "#00BFFF",
+      "#F4A300",
+      "#FFD700",
+      "#DCDCDC",
+      "#DC143C",
+      "#B0E0E6",
+      "#A9A9A9",
+      "#FAEBD7",
+      "#8A2BE2",
+    ],
+  },
+  {
+    label: "渐变",
+    colors: [
+      "#F96F4A",
+      "#F78F4F",
+      "#FCB06C",
+      "#FFC475",
+      "#FFE286",
+      "#FDF1A9",
+      "#FBFFBE",
+      "#EEF9A7",
+      "#E4F39E",
+      "#CFEE9E",
+      "#A8DCA2",
+      "#85D0AE",
+      "#60C5A3",
+      "#52A3AE",
+      "#4FA4B5",
+      "#3586BF",
+      "#476CB9",
+      "#7A8FBD",
+      "#A9B8C6",
+      "#93B5D2",
+      "#D2C0C3",
+      "#BDC8D9",
+      "#B5B5B5",
+      "#90B3C3",
+      "#C6A9A1",
+      "#A8B3D0",
+      "#5E6B8D",
+      "#7B85A6",
+      "#A6A7D6",
+      "#3E5667",
+      "#485B72",
+      "#E1A692",
+      "#5E3B6E",
+      "#8D4F3F",
+      "#9F6B48",
+      "#A8C5A8",
+      "#F4A9C0",
+      "#D3C7D7",
+      "#A2A1D0",
+      "#9D7F6F",
+    ],
+  },
+];

src/api/performance.js

@@ -1,12 +1,13 @@
 /*
  * @Author: your name
  * @Date: 2024-06-03 09:29:50
- * @LastEditTime: 2025-04-02 14:39:07
+ * @LastEditTime: 2025-04-08 15:50:24
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/api/performance。.js
  */
 import request from "@/utils/request";
+
 //编辑自动分析
 export function configEdit(data) {
   return request({

src/views/performance/assetssMag.vue

@@ -56,6 +56,8 @@
           <el-button @click="handleAutoAsstessList" size="small"
             >查看自动分析列表</el-button
           >
+          <el-button @click="handleDownLoadChart" size="small">下载</el-button>
+          <!-- /downLoadChart -->
         </el-form-item>
       </el-form>
     </div>
@@ -466,6 +468,7 @@ import {
   queryCodeNum,
   editPriority,
 } from "@/api/performance";
+import axios from "axios";
 export default {
   components: {
     MyDialog,
@@ -537,15 +540,19 @@ export default {
     window.addEventListener("message", this.handleMessage); //江
   },
   methods: {
+    async handleDownLoadChart() {
+      const res = await axios.post("/downLoadChart/chartServer/charts/bar", {
+        dataUrl:
+          "http://192.168.50.233:6900/wof039800012/WOF039800012-WOB000001/wind_speed_frequency/manual/wind_Speed_Frequency%2303.json",
+      });
+      console.log(res, "res linechart");
+    },
     //自动分析列表页面跳转
     handleAutoAsstessList() {
       window.open(
         this.$router.resolve({ path: "/home/performance/autoAssetss" }).href,
         "_blank"
       );
-      // this.$router.push({
-      //   path: "/home/performance/autoAssetss",
-      // });
     },
     // 创建分析时请求
     async addRuleFormSubmit() {

src/views/performance/components/chartsCom/lineChartsFen.vue

@@ -19,7 +19,6 @@
     </div>
   </div>
 </template>
-
 <script>
 import { nextTick } from "vue"; // 导入 nextTick
 import Plotly from "plotly.js-dist";

vue.config.js

@@ -66,8 +66,8 @@ module.exports = {
         // target: "http://192.168.5.4:16200", // 石月
         // target: "http://192.168.50.235:16200", // 内网
         // target: "http://192.168.5.15:16200",
-        // target: "http://192.168.50.235:16500", //演示环境
-        target: "http://106.120.102.238:26500", //外网演示环境
+        target: "http://192.168.50.235:16500", //演示环境
+        // target: "http://106.120.102.238:26500", //外网演示环境
         // target: "http://106.120.102.238:16700", // 外网16700  生产16600
         // target: "http://10.96.137.5",
         changeOrigin: true,
@@ -141,6 +141,15 @@ module.exports = {
           "^/databaseApi": "", // 去掉 /databaseApi 前缀
         },
       },
+      //nodejs 数据库数据
+      "/downLoadChart": {
+        target: "http://127.0.0.1:3000",
+        // target: "http://106.120.102.238:58880",//这个代理会走两次代理转发
+        changeOrigin: true,
+        pathRewrite: {
+          "^/downLoadChart": "", // 去掉 /downLoadChart 前缀
+        },
+      },
     },
   },