修分析图表

downLoadServer/.env

@@ -1,10 +1,9 @@
-PLOTLY_USERNAME=your-username
-PLOTLY_API_KEY=your-api-key 
 API_BASE_URL=http://127.0.0.1:3000
 MINIO_ENDPOINT=192.168.50.233
 MINIO_PORT=6900
 MINIO_ACCESS_KEY=haH1vePq7unSp4TG1One
 MINIO_SECRET_KEY=idxO5SAjboUYERpDICgHgBoHX7bcYv355lMQANt6
+CHROME_PATH=/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
 #   nginx 配置 minio
 #   env MINIO_ENDPOINT=192.168.50.233;
 #   env MINIO_PORT=6900;

downLoadServer/package.json

@@ -32,6 +32,6 @@
     "plotly.js-dist": "^2.34.0",
     "plotly.js-dist-min": "^2.34.0",
     "plotly.js-with-locales": "^1.31.2",
-    "puppeteer": "^22.6.0"
+    "puppeteer": "^19.11.1"
   }
 }

downLoadServer/src/server/server.js

@@ -1,3 +1,6 @@
+import dotenv from "dotenv";
+// 加载 .env 文件中的环境变量
+dotenv.config();
 import express from "express";
 import { serverConfig } from "./config.js";
 import { logger } from "./middleware/logger.js";
@@ -6,7 +9,6 @@ import exampleRoutes from "./routes/exampleRoutes.js";
 import chartRoutes from "./routes/chartRoutes.js";
 import path from "path";
 import { fileURLToPath } from "url";
-import dotenv from "dotenv";
 // 引入 cors 模块
 import cors from "cors";
 
@@ -42,6 +44,5 @@ export const startServer = () => {
     );
   });
 };
-// 加载 .env 文件中的环境变量
-dotenv.config();
+
 export default app;

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2025-04-14 16:09:13
- * @LastEditTime: 2025-05-29 15:30:40
+ * @LastEditTime: 2025-06-10 14:10:40
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /downLoadServer/src/server/utils/chartsCom/3DDrawingChart.js
@@ -37,6 +37,7 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
     // 创建浏览器实例
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 
@@ -154,6 +155,10 @@ export const generate3DDrawingChart = async (data, bucketName, objectName) => {
         staticPlot: false,
         showlegend: true,
         legend: {
+          itemsizing: "constant", // ✅ 统一图例 marker 大小
+          font: {
+            size: 12,
+          },
           marker: {
             size: 10, // 图例中点的大小
           },

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

@@ -33,6 +33,7 @@ export const generateBarChart = async (data, bucketName, objectName) => {
     // 创建浏览器实例
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 

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

@@ -43,6 +43,7 @@ export const generateBoxLineChart = async (data, bucketName, objectName) => {
     // 创建浏览器实例
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 

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

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

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

@@ -118,6 +118,7 @@ export const getFaultAllCharts = async (
     // 使用 Puppeteer 生成图表的截图
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
     try {

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

@@ -118,6 +118,7 @@ export const getFaultUnitCharts = async (
     // 使用 Puppeteer 生成图表的截图
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
     try {

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

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

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

@@ -39,6 +39,7 @@ export const generateHeatmapChart = async (data, bucketName, objectName) => {
     // 创建浏览器实例
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 

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

@@ -102,6 +102,7 @@ export const generatePlotlyCharts = async (
 
     browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 

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

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

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2025-04-14 17:49:33
- * @LastEditTime: 2025-05-21 15:11:06
+ * @LastEditTime: 2025-06-10 14:10:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/downLoadServer/src/server/utils/chartsCom/Time3DChart.js
@@ -41,6 +41,7 @@ export const generateTime3DChart = async (data, bucketName, objectName) => {
     // 创建浏览器实例
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: [
         "--no-sandbox",
         "--disable-setuid-sandbox",
@@ -167,6 +168,10 @@ export const generateTime3DChart = async (data, bucketName, objectName) => {
         staticPlot: false,
         showlegend: true,
         legend: {
+          itemsizing: "constant", // ✅ 统一图例 marker 大小
+          font: {
+            size: 12,
+          },
           marker: {
             size: 10, // 图例中点的大小
           },

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

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

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

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

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

@@ -124,6 +124,7 @@ export const getWindRoseChart = async (
     // 使用 Puppeteer 生成图表的截图
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
     try {

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

@@ -119,6 +119,7 @@ export const getYewErrorBarChart = async (
     // 使用 Puppeteer 生成图表的截图
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
     try {

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

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

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

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

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

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

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

@@ -105,6 +105,7 @@ export const getYawErrorBarSumCharts = async (
     // 使用 Puppeteer 生成图表的截图
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
     try {

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

@@ -115,6 +115,7 @@ export const generateYawErrorLine = async (
     // 使用 Puppeteer 生成图表的截图
     const browser = await puppeteer.launch({
       headless: "new",
+      executablePath: `${process.env.CHROME_PATH}`, // 根据系统改路径
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 

src/components/map/index.vue

@@ -192,7 +192,6 @@ import icon05 from "../../assets/img/icon05.png";
 import icon06 from "../../assets/img/iconFJ.png";
 import defaultIcon from "../../assets/img/iconFJ.png";
 
-
 // import icon01 from "../../assets/img/icon01.png";
 // import icon02 from "../../assets/img/icon02.png";
 // import icon03 from "../../assets/img/icon03.png";

src/store/themes.js

@@ -3,16 +3,17 @@ import { theme } from "tailwindcss/stubs/defaultConfig.stub";
 /*
  * @Author: your name
  * @Date: 2024-05-27 15:09:27
- * @LastEditTime: 2025-03-18 16:51:12
+ * @LastEditTime: 2025-06-10 10:57:45
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/store/themes.js
  */
+import { colorSchemes } from "@/views/overview/js/colors";
 export default {
   namespaced: true,
   state: {
     theme: localStorage.getItem("theme") || "green",
-    themeColor: [],
+    themeColor: [...colorSchemes[0].colors],
   },
   mutations: {
     setTheme(state, theme) {

src/views/overview/components/fault_all/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:56:55
- * @LastEditTime: 2025-05-16 15:08:41
+ * @LastEditTime: 2025-06-10 11:42:55
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/fault_all/index.vue
@@ -33,7 +33,7 @@
           对全场机组各类故障的次数和时长进行统计
         </div>
       </el-alert>
-      <div v-if="zongFaultCsvData.length > 0">
+      <div class="chartsBox" v-if="zongFaultCsvData.length > 0">
         <FaultAll
           :faultTypes="
             zongFaultCsvData &&
@@ -444,6 +444,10 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
+    .chartsBox {
+      height: 100%;
+      overflow-y: scroll;
+    }
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */

src/views/overview/components/fault_unit/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:56:12
- * @LastEditTime: 2025-03-14 18:57:21
+ * @LastEditTime: 2025-06-10 16:06:05
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/fault_unit/index.vue
@@ -32,7 +32,7 @@
           对各个机组故障的总次数和时长进行统计
         </div>
       </el-alert>
-      <div v-if="fenFaultCsvData.length > 0">
+      <div class="chartsBox" v-if="fenFaultCsvData.length > 0">
         <FaultUnit
           :faultTypes="
             fenFaultCsvData &&
@@ -54,12 +54,13 @@
         <template v-for="itemCsv in fenFaultCsvData">
           <el-table
             max-height="500"
+            :default-sort="{ prop: 'wind_turbine_name' }"
             :data="filteredFenData(itemCsv)"
             border
             style="width: 100%"
             align="center"
           >
-            <el-table-column prop="wind_turbine_name" label="风机名称">
+            <el-table-column prop="wind_turbine_name" label="风机名称" sortable>
             </el-table-column>
             <el-table-column prop="count" sortable label="故障次数（次）">
             </el-table-column>
@@ -439,6 +440,10 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
+    .chartsBox {
+      height: 100%;
+      overflow-y: scroll;
+    }
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */

src/views/overview/components/power_curve/index.vue

@@ -24,25 +24,26 @@
         </div>
       </el-alert>
       <!-- 总图 -->
-      <div class="titleCharts">分析总图 :</div>
-      <div v-if="graphFilesData && graphFilesData.length > 0">
-        <template
-          v-for="(powerCurveDom, ind) in generalFilesData"
-          :style="{ marginTop: '50px' }"
-        >
-          <el-row class="charts">
-            <el-col :span="24" :key="ind + 'leftTable'">
-              <div class="leftTable">
-                <el-button
-                  size="small"
-                  @click="
-                    downLoadCsv(
-                      powerCurveDom && powerCurveDom.powerCurveTableData
-                    )
-                  "
-                  >导出功率曲线数据</el-button
-                >
-                <!-- <el-table
+      <div class="chartsBox">
+        <div class="titleCharts">分析总图 :</div>
+        <div v-if="graphFilesData && graphFilesData.length > 0">
+          <template
+            v-for="(powerCurveDom, ind) in generalFilesData"
+            :style="{ marginTop: '50px' }"
+          >
+            <el-row class="charts">
+              <el-col :span="24" :key="ind + 'leftTable'">
+                <div class="leftTable">
+                  <el-button
+                    size="small"
+                    @click="
+                      downLoadCsv(
+                        powerCurveDom && powerCurveDom.powerCurveTableData
+                      )
+                    "
+                    >导出功率曲线数据</el-button
+                  >
+                  <!-- <el-table
                   :data="powerCurveDom.powerCurveTableData"
                   border
                   max-height="500"
@@ -63,54 +64,54 @@
                   >
                   </el-table-column>
                 </el-table> -->
-              </div>
-            </el-col>
-            <el-col :span="24" :key="ind + 'rightTable'">
-              <div class="rightTable">
-                <PlotlyCharts
-                  :setUpImgData="setUpImgData"
-                  :lineMarkerData="powerCurveDom.chartsData"
-                  :comType="'generalDrawing'"
-                  :inds="`${new Date().getTime()}` + `zong${ind}`"
-                ></PlotlyCharts>
-              </div>
-            </el-col>
-          </el-row>
-        </template>
-      </div>
-      <el-empty v-else description="暂无总图"></el-empty>
-      <!-- 分图 -->
-      <div class="titleCharts">分析分图 :</div>
-      <template v-if="graphFilesData && graphFilesData.length > 0">
-        <div
-          class="graphFilesData"
-          v-for="(powerCurveDom, ind) in graphFilesData"
-        >
-          <el-row class="charts">
-            <el-col
-              v-if="
-                powerCurveDom && powerCurveDom.powerCurveTableData.length > 0
-              "
-              :key="ind + 'powerCurveDom' + 'rightTable'"
-              :span="24"
-            >
-              <div class="rightTable">
-                <PlotlyCharts
-                  :setUpImgData="setUpImgData"
-                  :lineMarkerData="powerCurveDom.chartsData"
-                  :comType="'graph'"
-                  :inds="`${new Date().getTime()}` + `fen${ind}`"
-                ></PlotlyCharts>
-              </div>
-            </el-col>
-            <el-col
-              :span="24"
-              :key="ind + 'powerCurveDom' + 'leftTable'"
-              v-if="
-                powerCurveDom && powerCurveDom.powerCurveTableData.length > 0
-              "
-            >
-              <!-- <div class="leftTable">
+                </div>
+              </el-col>
+              <el-col :span="24" :key="ind + 'rightTable'">
+                <div class="rightTable">
+                  <PlotlyCharts
+                    :setUpImgData="setUpImgData"
+                    :lineMarkerData="powerCurveDom.chartsData"
+                    :comType="'generalDrawing'"
+                    :inds="`${new Date().getTime()}` + `zong${ind}`"
+                  ></PlotlyCharts>
+                </div>
+              </el-col>
+            </el-row>
+          </template>
+        </div>
+        <el-empty v-else description="暂无总图"></el-empty>
+        <!-- 分图 -->
+        <div class="titleCharts">分析分图 :</div>
+        <template v-if="graphFilesData && graphFilesData.length > 0">
+          <div
+            class="graphFilesData"
+            v-for="(powerCurveDom, ind) in graphFilesData"
+          >
+            <el-row class="charts">
+              <el-col
+                v-if="
+                  powerCurveDom && powerCurveDom.powerCurveTableData.length > 0
+                "
+                :key="ind + 'powerCurveDom' + 'rightTable'"
+                :span="24"
+              >
+                <div class="rightTable">
+                  <PlotlyCharts
+                    :setUpImgData="setUpImgData"
+                    :lineMarkerData="powerCurveDom.chartsData"
+                    :comType="'graph'"
+                    :inds="`${new Date().getTime()}` + `fen${ind}`"
+                  ></PlotlyCharts>
+                </div>
+              </el-col>
+              <el-col
+                :span="24"
+                :key="ind + 'powerCurveDom' + 'leftTable'"
+                v-if="
+                  powerCurveDom && powerCurveDom.powerCurveTableData.length > 0
+                "
+              >
+                <!-- <div class="leftTable">
                 <el-table
                   :data="powerCurveDom && powerCurveDom.powerCurveTableData"
                   border
@@ -129,16 +130,16 @@
                   </el-table-column>
                 </el-table>
               </div> -->
-            </el-col>
-
-            <el-col v-else :span="24">
-              <el-empty description="暂无分图"></el-empty>
-            </el-col>
-          </el-row>
-        </div>
-      </template>
-      <el-empty v-else description="暂无分图"></el-empty>
+              </el-col>
 
+              <el-col v-else :span="24">
+                <el-empty description="暂无分图"></el-empty>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+        <el-empty v-else description="暂无分图"></el-empty>
+      </div>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"
@@ -547,7 +548,10 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
-
+    .chartsBox {
+      height: 100%;
+      overflow-y: scroll;
+    }
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */

src/views/overview/components/power_scatter_2D/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:10:35
- * @LastEditTime: 2025-04-11 16:50:32
+ * @LastEditTime: 2025-06-10 11:06:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/power_scatter_2D/index.vue
@@ -39,6 +39,7 @@
         keyField="fieldEngineCode"
         :itemSize="600"
         v-slot="{ item, index }"
+        v-if="diagramRelationsDatas && diagramRelationsDatas.length > 0"
       >
         <TwoDMarkersChart1
           :setUpImgData="setUpImgData"
@@ -48,7 +49,7 @@
           :fileAddr="item.fileAddr"
         ></TwoDMarkersChart1>
       </VirtualList>
-
+      <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"

src/views/overview/components/production_indicator_unit/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:44:56
- * @LastEditTime: 2025-04-11 16:51:20
+ * @LastEditTime: 2025-06-10 11:25:46
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_unit/index.vue
@@ -31,7 +31,7 @@
           对风场及机组各项运行指标进行统计，包括应发电量、实发电量、风机能量利用率，有效风速小时数，利用小时等指标。
         </div>
       </el-alert>
-      <div v-if="productionIndicatorCsvData.length > 0">
+      <div v-if="productionIndicatorCsvData.length > 0" class="chartsBox">
         <template v-for="(itemCsv, itemind) in productionIndicatorCsvData">
           <el-table
             :key="'table' + itemind"
@@ -543,6 +543,10 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
+    .chartsBox {
+      height: 100%;
+      overflow-y: scroll;
+    }
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */

src/views/overview/components/temperature_environment/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:09:46
- * @LastEditTime: 2025-06-06 16:31:24
+ * @LastEditTime: 2025-06-10 11:41:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_environment/index.vue
@@ -39,22 +39,18 @@
         分析总图 :
       </div>
       <el-empty description="暂无分图分析记录" v-else></el-empty>
-      <VirtualList
-        :list="[...generalFilesDatas]"
-        keyField="fileAddr"
-        :itemSize="500"
-        v-slot="{ item, index }"
-      >
-        <BarChart
-          :setUpImgData="setUpImgData"
-          :key="`${new Date().getTime()}` + item.batchCode + index"
-          :inds="`${new Date().getTime()}` + index + 'barChart'"
-          :ref="`${new Date().getTime()}` + item.batchCode"
-          :fileAddr="item.fileAddr"
-        >
-        </BarChart>
-      </VirtualList>
-
+      <div class="chartsBox">
+        <div v-for="(item, index) in generalFilesDatas">
+          <BarChart
+            :setUpImgData="setUpImgData"
+            :key="`${new Date().getTime()}` + item.batchCode + index"
+            :inds="`${new Date().getTime()}` + index + 'barChart'"
+            :ref="`${new Date().getTime()}` + item.batchCode"
+            :fileAddr="item.fileAddr"
+          >
+          </BarChart>
+        </div>
+      </div>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"
@@ -337,6 +333,10 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
+    .chartsBox {
+      height: 100%;
+      overflow-y: scroll;
+    }
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */

src/views/overview/components/temperature_large_components_tem_deviation/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 10:03:27
- * @LastEditTime: 2025-02-26 11:23:18
+ * @LastEditTime: 2025-06-10 11:37:14
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_large_components_tem_deviation/index.vue
@@ -51,7 +51,12 @@
         分析分图 :
       </div>
       <el-empty description="暂无分图分析记录" v-else></el-empty>
-      <div v-for="(item, index) in diagramRelationsDatas">
+      <VirtualList
+        :list="[...diagramRelationsDatas]"
+        keyField="fileAddr"
+        :itemSize="500"
+        v-slot="{ item, index }"
+      >
         <GeneratorTemperature
           :setUpImgData="setUpImgData"
           :key="item.fieldEngineCode + index"
@@ -61,7 +66,7 @@
           :fileAddr="item.fileAddr"
         >
         </GeneratorTemperature>
-      </div>
+      </VirtualList>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"

src/views/overview/components/wind_speed_frequency/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:11:34
- * @LastEditTime: 2025-05-13 09:44:37
+ * @LastEditTime: 2025-06-10 11:06:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/wind_speed_frequency/index.vue
@@ -47,21 +47,7 @@
           :fileAddr="item.fileAddr"
         ></BarChart>
       </VirtualList>
-      <!-- <div
-        class="charts"
-        v-if="diagramRelationsDatas && diagramRelationsDatas.length > 0"
-      >
-        <template v-for="(itemChart, indChart) in diagramRelationsDatas">
-          <BarChart
-            :key="itemChart.fieldEngineCode + indChart"
-            :inds="indChart"
-            :ref="itemChart.fieldEngineCode"
-            :fileAddr="itemChart.fileAddr"
-          ></BarChart>
-        </template>
-      </div>
-     
-      -->
+
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
         v-if="isShowDescription"

src/views/overview/components/yaw_error/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:24:14
- * @LastEditTime: 2025-03-21 14:42:04
+ * @LastEditTime: 2025-06-10 11:31:12
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error/index.vue
@@ -32,63 +32,64 @@
           静态偏航误差过大，导致风轮不能精准对风，会造成发电损失，例如10°的静态偏航误差导致2.6%的发电损失，且风速较低的风场往往出现更多的发电损失；此外静态偏航误差过大，不仅会影响机组的功率输出，还会引起叶片气动弹性波动，增加机组的额外载荷。因此，定期检测机组的静态偏航误差，并及时校正，对于改善机组发电性能和机组运行安全都有很重要的意义。
         </div>
       </el-alert>
-
-      <div class="titleCharts" v-if="zongFaultCsvData.length > 0">
-        分析总图 :
-      </div>
-      <div v-if="zongFaultCsvData.length > 0">
-        <yawErrorBarChart
-          :zongFaultCsvData="zongFaultCsvData"
-          :index="`${new Date().getTime()}`"
-        ></yawErrorBarChart>
-        <yawErrorBarSum
-          :zongFaultCsvData="zongFaultCsvData"
-          :index="`${new Date().getTime()}`"
-        ></yawErrorBarSum>
-        <template v-for="(itemCsv, indCsv) in zongFaultCsvData">
-          <el-table
-            :key="indCsv + 'indCsv'"
-            :data="filteredData(itemCsv)"
-            border
-            style="width: 100%"
-            max-height="500"
-            align="center"
-          >
-            <el-table-column prop="engine_name" label="风机名称">
-            </el-table-column>
-            <el-table-column prop="yaw_error1" label="静态偏航误差值（度）">
-            </el-table-column>
-            <el-table-column prop="powerloss" label="电量损失（%）">
-            </el-table-column>
-            <el-table-column align="right">
-              <template slot="header" slot-scope="scope">
-                <el-input
-                  v-model="search"
-                  size="mini"
-                  placeholder="输入风机名称关键字搜索"
-                />
-              </template>
-            </el-table-column>
-          </el-table>
-        </template>
-      </div>
-      <div class="titleCharts">分析分图 :</div>
-      <div v-if="fenFaultCsvData.length > 0">
-        <div v-for="(item, index) in fenFaultCsvData">
-          <yawErrorLine
-            :setUpImgData="setUpImgData"
-            :key="item.fieldEngineCode + index"
-            :index="`${new Date().getTime()}` + index"
-            :ref="item.fieldEngineCode"
-            :fileAddr="item.fileAddr"
-          >
-          </yawErrorLine>
+      <div class="chartsBox">
+        <div class="titleCharts" v-if="zongFaultCsvData.length > 0">
+          分析总图 :
+        </div>
+        <div v-if="zongFaultCsvData.length > 0">
+          <yawErrorBarChart
+            :zongFaultCsvData="zongFaultCsvData"
+            :index="`${new Date().getTime()}`"
+          ></yawErrorBarChart>
+          <yawErrorBarSum
+            :zongFaultCsvData="zongFaultCsvData"
+            :index="`${new Date().getTime()}`"
+          ></yawErrorBarSum>
+          <template v-for="(itemCsv, indCsv) in zongFaultCsvData">
+            <el-table
+              :key="indCsv + 'indCsv'"
+              :data="filteredData(itemCsv)"
+              border
+              style="width: 100%"
+              max-height="500"
+              align="center"
+            >
+              <el-table-column prop="engine_name" label="风机名称">
+              </el-table-column>
+              <el-table-column prop="yaw_error1" label="静态偏航误差值（度）">
+              </el-table-column>
+              <el-table-column prop="powerloss" label="电量损失（%）">
+              </el-table-column>
+              <el-table-column align="right">
+                <template slot="header" slot-scope="scope">
+                  <el-input
+                    v-model="search"
+                    size="mini"
+                    placeholder="输入风机名称关键字搜索"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+          </template>
         </div>
+        <div class="titleCharts">分析分图 :</div>
+        <div v-if="fenFaultCsvData.length > 0">
+          <div v-for="(item, index) in fenFaultCsvData">
+            <yawErrorLine
+              :setUpImgData="setUpImgData"
+              :key="item.fieldEngineCode + index"
+              :index="`${new Date().getTime()}` + index"
+              :ref="item.fieldEngineCode"
+              :fileAddr="item.fileAddr"
+            >
+            </yawErrorLine>
+          </div>
+        </div>
+        <el-empty
+          description="暂无分析记录"
+          v-if="zongFaultCsvData.length === 0 && fenFaultCsvData.length === 0"
+        ></el-empty>
       </div>
-      <el-empty
-        description="暂无分析记录"
-        v-if="zongFaultCsvData.length === 0 && fenFaultCsvData.length === 0"
-      ></el-empty>
       <el-dialog
         v-if="isShowDescription"
         title="添加评论"
@@ -470,6 +471,10 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
+    .chartsBox {
+      height: 100%;
+      overflow-y: scroll;
+    }
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */

src/views/performance/components/chartsCom/3DDrawingChart.vue

@@ -319,6 +319,10 @@ export default {
         staticPlot: false,
         showlegend: true,
         legend: {
+          itemsizing: "constant", // ✅ 统一图例 marker 大小
+          font: {
+            size: 12,
+          },
           marker: {
             size: 10, // 图例中点的大小
           },

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

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div>
     <div ref="chart" style="width: 100%; height: 400px"></div>
   </div>
@@ -50,16 +50,16 @@ export default {
         hovertemplate: `机组:` + ` %{x} <br> ` + `故障次数:` + "%{y} 次<br>",
       };
 
-      // 故障时长的散点图数据（右侧 Y 轴）
-      const scatterFaultDurations = {
-        x: this.faultTypes.slice(0, 10),
-        y: this.faultDurations.slice(0, 10),
-        mode: "markers", // 散点图
-        marker: { color: "#1A295D", size: 10 }, // 红色散点
-        name: "故障时长",
-        yaxis: "y2", // 使用第二个 Y 轴（右侧）
-        hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
-      };
+      // // 故障时长的散点图数据（右侧 Y 轴）
+      // const scatterFaultDurations = {
+      //   x: this.faultTypes.slice(0, 10),
+      //   y: this.faultDurations.slice(0, 10),
+      //   mode: "markers", // 散点图
+      //   marker: { color: "#1A295D", size: 10 }, // 红色散点
+      //   name: "故障时长",
+      //   yaxis: "y2", // 使用第二个 Y 轴（右侧）
+      //   hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
+      // };
 
       // 布局配置，设置双 Y 轴
       const layout = {
@@ -94,20 +94,20 @@ export default {
           tickcolor: "rgb(255,255,255)",
           backgroundcolor: "#e5ecf6",
         },
-        yaxis2: {
-          title: "故障时长(秒)",
-          titlefont: { color: "#1A295D" },
-          tickfont: { color: "#1A295D" },
-          showgrid: false, // 隐藏 Y 轴网格线
-          overlaying: "y", // 在第一个 Y 轴上方绘制
-          side: "right", // 右侧的 Y 轴
-          position: 1, // 调整右侧轴的位置
-          showline: true,
+        // yaxis2: {
+        //   title: "故障时长(秒)",
+        //   titlefont: { color: "#1A295D" },
+        //   tickfont: { color: "#1A295D" },
+        //   showgrid: false, // 隐藏 Y 轴网格线
+        //   overlaying: "y", // 在第一个 Y 轴上方绘制
+        //   side: "right", // 右侧的 Y 轴
+        //   position: 1, // 调整右侧轴的位置
+        //   showline: true,
 
-          // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
-          // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
-          linecolor: "#1A295D", // 设置右侧轴线颜色
-        },
+        //   // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
+        //   // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
+        //   linecolor: "#1A295D", // 设置右侧轴线颜色
+        // },
         plot_bgcolor: "#e5ecf6",
         gridcolor: "#fff",
         bgcolor: "#e5ecf6", // 设置背景颜色
@@ -119,11 +119,7 @@ export default {
       };
 
       // 渲染图表
-      Plotly.newPlot(
-        this.$refs.chart,
-        [scatterFaultCounts, scatterFaultDurations],
-        layout
-      );
+      Plotly.newPlot(this.$refs.chart, [scatterFaultCounts], layout);
     },
   },
 };
@@ -131,4 +127,205 @@ export default {
 
 <style scoped>
 /* 你可以根据需要添加样式 */
+</style> -->
+
+<template>
+  <div>
+    <div ref="chart" style="width: 100%; height: 500px"></div>
+  </div>
+</template>
+
+<script>
+import Plotly from "plotly.js-dist";
+
+export default {
+  name: "faultAll",
+  props: {
+    faultTypes: {
+      type: Array,
+      default: () => [],
+    },
+    faultCounts: {
+      type: Array,
+      default: () => [],
+    },
+    faultDurations: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    faultCounts: {
+      deep: true,
+      handler() {
+        this.renderChart();
+      },
+    },
+  },
+  mounted() {
+    this.renderChart();
+  },
+  methods: {
+    // renderChart() {
+    //   // 步骤 1：归一化 faultCounts 用于 marker.size 显示
+    //   const rawSizes = this.faultCounts;
+    //   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;
+    //   });
+    //   console.log("durationHour", this.faultTypes);
+    //   // 步骤 2：生成每个散点（使用归一化后的 size）
+    //   const data = this.faultTypes.map((name, i) => {
+    //     const durationHour = this.faultDurations.map((s) => {
+    //       // console.log(s, "s");
+    //       return (s / 3600).toFixed(2);
+    //     });
+    //     const count = this.faultCounts[i];
+
+    //     return {
+    //       x: [name],
+    //       y: [durationHour[i]],
+    //       mode: "markers",
+    //       type: "scatter",
+    //       name: name,
+    //       marker: {
+    //         size: normalizedSizes[i],
+    //         sizemode: "area",
+    //         sizeref: 1,
+    //         sizemin: 4,
+    //         showscale: false,
+    //       },
+    //       hovertemplate: `机组: ${name}<br>故障时长: ${durationHour[i]} 小时<br>故障次数: ${count} 次<extra></extra>`,
+    //     };
+    //   });
+
+    //   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", // ✅ 统一图例 marker 大小
+    //       font: {
+    //         size: 12,
+    //       },
+    //     },
+    //   };
+
+    //   Plotly.newPlot(this.$refs.chart, data, layout);
+    // },
+    renderChart() {
+      // 步骤 1：预处理，将数据打包成对象数组以便排序
+      const combined = this.faultTypes.map((name, i) => ({
+        name,
+        count: this.faultCounts[i],
+        durationHour: (this.faultDurations[i] / 3600).toFixed(2),
+      }));
+
+      // 步骤 2：按 name 字符串排序
+      combined.sort((a, b) => a.name.localeCompare(b.name)); // 按字典序排序
+
+      // 步骤 3：归一化故障次数用于散点大小
+      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;
+      });
+
+      // 步骤 4：生成散点图数据
+      const data = 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 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,
+          },
+        },
+      };
+
+      Plotly.newPlot(this.$refs.chart, data, layout);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 可添加样式 */
 </style>

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

@@ -315,6 +315,10 @@ export default {
         staticPlot: false,
         showlegend: true,
         legend: {
+          itemsizing: "constant", // ✅ 统一图例 marker 大小
+          font: {
+            size: 12,
+          },
           marker: {
             size: 10,
           },

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

@@ -166,7 +166,9 @@ export default {
               "%{y} <br>",
           };
           if (this.chartData.yaixs === "概率密度函数") {
-            chartConfig.line.color = this.color1[12];
+            console.log(this.color1[5], this.colors[5], "this.color1");
+            chartConfig.line.color =
+              this.color1.length > 0 ? this.color1[7] : this.colors[7]; // 为每个机组分配不同的颜色
           }
           if (this.chartType === "line") {
             chartConfig.mode = "lines"; // 如果是折线图
@@ -178,7 +180,6 @@ export default {
 
           data.push(chartConfig);
         });
-      console.log(this.chartData, "图表title");
       const layout = {
         title: {
           text: this.chartData.title || this.chartData.data[0].title,

vue.config.js

@@ -126,7 +126,6 @@ module.exports = {
         },
       },
 
-
       // 数据转换亮亮
       "/transDataWeb": {
         // target: "http://192.168.50.241:9000/trans_data_web",//生产
@@ -148,8 +147,8 @@ module.exports = {
       },
       //nodejs 数据库数据
       "/databaseApi": {
-        // target: "http://192.168.50.234:3000",
-        target: "http://106.120.102.238:58880",//这个代理会走两次代理转发
+        target: "http://192.168.50.234:3002",
+        // target: "http://106.120.102.238:58880", //这个代理会走两次代理转发
         changeOrigin: true,
         pathRewrite: {
           "^/databaseApi": "", // 去掉 /databaseApi 前缀
@@ -157,8 +156,9 @@ module.exports = {
       },
       //nodejs 数据库数据
       "/downLoadChart": {
-        target: "http://127.0.0.1:3000",
-        // target: "http://106.120.102.238:58880",
+        // target: "http://127.0.0.1:3000",
+        // target: "http://192.168.50.235:8999", //内网演示
+        target: "http://106.120.102.238:28999/downLoadChart", //外网演示
         changeOrigin: true,
         pathRewrite: {
           "^/downLoadChart": "", // 去掉 /downLoadChart 前缀