修改描述提交bug

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:05:58
- * @LastEditTime: 2025-01-21 15:47:06
- * @LastEditors: bogon
+ * @LastEditTime: 2025-01-22 09:07:14
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/cp/index.vue
 -->
@@ -41,6 +41,7 @@
       >
         分析总图 :
       </div>
+      <el-empty description="暂无分析记录" v-else></el-empty>
       <div v-for="(item, index) in generalFilesDatas">
         <lineAndChildLine
           :key="item.batchCode + index"
@@ -56,6 +57,7 @@
       >
         分析分图 :
       </div>
+      <el-empty description="暂无分析记录" v-else></el-empty>
       <div v-for="(item, index) in diagramRelationsDatas">
         <lineChartsFen
           :key="item.fieldEngineCode + index"

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:08:00
- * @LastEditTime: 2025-01-21 15:53:11
- * @LastEditors: bogon
+ * @LastEditTime: 2025-01-22 09:07:38
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/cp_windspeed/index.vue
 -->
@@ -41,6 +41,7 @@
       >
         分析总图 :
       </div>
+      <el-empty description="暂无分析记录" v-else></el-empty>
       <div v-for="(item, index) in generalFilesDatas">
         <lineAndChildLine
           :key="item.batchCode + index"
@@ -56,6 +57,7 @@
       >
         分析分图 :
       </div>
+      <el-empty description="暂无分析记录" v-else></el-empty>
       <div v-for="(item, index) in diagramRelationsDatas">
         <lineChartsFen
           :key="item.fieldEngineCode + index"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:24:14
- * @LastEditTime: 2025-01-21 16:13:33
+ * @LastEditTime: 2025-01-22 09:43:49
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error/index.vue
@@ -31,28 +31,6 @@
           静态偏航误差过大，导致风轮不能精准对风，会造成发电损失，例如10°的静态偏航误差导致2.6%的发电损失，且风速较低的风场往往出现更多的发电损失；此外静态偏航误差过大，不仅会影响机组的功率输出，还会引起叶片气动弹性波动，增加机组的额外载荷。因此，定期检测机组的静态偏航误差，并及时校正，对于改善机组发电性能和机组运行安全都有很重要的意义。
         </div>
       </el-alert>
-      <div class="titleCharts">分析分图 :</div>
-      <div v-if="zongFaultCsvData.length > 0">
-        <FaultAll
-          :faultTypes="
-            zongFaultCsvData &&
-            zongFaultCsvData[0] &&
-            zongFaultCsvData[0].data.map((item) => item.engine_name)
-          "
-          :faultCounts="
-            zongFaultCsvData &&
-            zongFaultCsvData[0] &&
-            zongFaultCsvData[0].data.map((item) => item.count)
-          "
-          :faultDurations="
-            zongFaultCsvData &&
-            zongFaultCsvData[0] &&
-            zongFaultCsvData[0].data.map((item) => item.fault_time_sum)
-          "
-          :zongFaultCsvData="zongFaultCsvData"
-        ></FaultAll>
-      </div>
-      <el-empty description="暂无分析记录" v-else></el-empty>
 
       <div class="titleCharts">分析总图 :</div>
       <div v-if="zongFaultCsvData.length > 0">
@@ -82,7 +60,19 @@
         </template>
       </div>
       <el-empty description="暂无分析记录" v-else></el-empty>
-
+      <div class="titleCharts">分析分图 :</div>
+      <div v-if="fenFaultCsvData.length > 0">
+        <div v-for="(item, index) in fenFaultCsvData">
+          <yawErrorLine
+            :key="item.fieldEngineCode + index"
+            :index="index"
+            :ref="item.fieldEngineCode"
+            :fileAddr="item.fileAddr"
+          >
+          </yawErrorLine>
+        </div>
+      </div>
+      <el-empty description="暂无分析记录" v-else></el-empty>
       <el-tabs value="first" v-if="isShowDescription">
         <el-tab-pane label="意见描述" name="first">
           <TinymceEditor
@@ -117,6 +107,7 @@ import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
 import FaultAll from "@/views/performance/components/chartsCom/FaultAll.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
+import yawErrorLine from "@/views/performance/components/chartsCom/yawErrorLine.vue";
 import {
   analysisDetail,
   queryAnalysisedEngine,
@@ -131,6 +122,7 @@ export default {
     FilterChart,
     FaultAll,
     TinymceEditor,
+    yawErrorLine,
   },
   props: {
     initBatchCode: {
@@ -263,12 +255,12 @@ export default {
                     });
                   } else {
                     //分
-                    this.fenFaultCsvHeader.push(Object.keys(result.data[0]));
-                    this.fenFaultCsvData.push({
-                      data: result.data
-                        .filter((row) => Object.keys(row).length)
-                        .slice(0, result.data.length - 1),
-                    });
+                    // this.fenFaultCsvHeader.push(Object.keys(result.data[0]));
+                    // this.fenFaultCsvData.push({
+                    //   data: result.data
+                    //     .filter((row) => Object.keys(row).length)
+                    //     .slice(0, result.data.length - 1),
+                    // });
                   }
                 }
               },
@@ -339,13 +331,17 @@ export default {
           this.zongFaultCsvData = [];
         }
         if (result.data && result.data[0] && result.data[0].diagramRelations) {
-          result.data[0].diagramRelations.map((item) => {
-            if (item.fileAddr) {
-              this.fenFaultCsvHeader = [];
-              this.fenFaultCsvData = [];
-              this.fetchCsvData("yaw_error", item.fileAddr);
-            }
-          });
+          this.fenFaultCsvData =
+            result.data[0].diagramRelations.filter((item) =>
+              item.fileAddr.endsWith(".json")
+            ) || [];
+          // result.data[0].diagramRelations.map((item) => {
+          //   if (item.fileAddr) {
+          //     this.fenFaultCsvHeader = [];
+          //     this.fenFaultCsvData = [];
+          //     this.fetchCsvData("yaw_error", item.fileAddr);
+          //   }
+          // });
         } else {
           this.fenFaultCsvHeader = [];
           this.fenFaultCsvData = [];

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-17 19:04:52
- * @LastEditTime: 2025-01-20 16:27:38
+ * @LastEditTime: 2025-01-22 09:22:37
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/3DDrawingChart.vue
@@ -187,19 +187,32 @@ export default {
         scene: {
           xaxis: {
             title: this.chartData.xaixs, // X 轴标题
+            gridcolor: "rgb(255,255,255)", // 网格线颜色
+            tickcolor: "rgb(255,255,255)",
+            backgroundcolor: "#e5ecf6",
+            showbackground: true, // 显示背景
           },
           yaxis: {
             title: this.chartData.yaixs, // Y 轴标题
+            gridcolor: "rgb(255,255,255)", // 网格线颜色
+            tickcolor: "rgb(255,255,255)",
+            backgroundcolor: "#e5ecf6",
+            showbackground: true, // 显示背景
           },
           zaxis: {
             title: this.chartData.zaixs, // Z 轴标题
+            gridcolor: "rgb(255,255,255)", // 网格线颜色
+            tickcolor: "rgb(255,255,255)",
+            backgroundcolor: "#e5ecf6",
+            showbackground: true, // 显示背景
           },
           aspectratio: {
             x: 1.5, // X 轴比例
             y: 2, // Y 轴比例
             z: 2, // Z 轴比例（可根据需要调整）
           },
-
+          plot_bgcolor: "#e5ecf6",
+          gridcolor: "#fff", // 设置网格线颜色
           camera: {
             eye: {
               x: 2, // 眼睛的位置

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:51
- * @LastEditTime: 2025-01-20 17:50:11
+ * @LastEditTime: 2025-01-21 19:04:09
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxLineCharts.vue
@@ -161,7 +161,7 @@ export default {
     <div
       v-loading="loading"
       :id="`plotDivBox-${index}`"
-      style="width: 100%; height: 550px"
+      style="width: 100%; height: 450px"
     >
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
@@ -227,10 +227,10 @@ export default {
         },
 
         line: {
-          color: "#64ADC2", // 设置箱线图边框颜色
+          color: "#C7C7C7", // 设置箱线图边框颜色
         },
         boxpoints: "none", // 不显示散点
-        fillcolor: "#64adc28a", // 设置箱线图填充颜色，带透明度
+        fillcolor: "#E9E9E9", // 设置箱线图填充颜色，带透明度
         name: chartData.title, // 设置图例名称
       };
 

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:36:31
- * @LastEditTime: 2025-01-16 17:55:25
+ * @LastEditTime: 2025-01-21 18:55:00
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxMarkersCharts.vue
@@ -17,7 +17,11 @@
  -->
 <template>
   <div>
-    <div v-loading="loading" ref="plotlyChart" style="width: 100%; height: 600px">
+    <div
+      v-loading="loading"
+      ref="plotlyChart"
+      style="width: 100%; height: 450px"
+    >
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
   </div>
@@ -51,19 +55,19 @@ export default {
     async getData() {
       if (this.fileAddr !== "") {
         try {
-          this.loading=true
+          this.loading = true;
           this.cancelToken = axios.CancelToken.source();
-          console.log(this.cancelToken)
+          console.log(this.cancelToken);
           const resultChartsData = await axios.get(this.fileAddr, {
-            cancelToken: this.cancelToken.token
+            cancelToken: this.cancelToken.token,
           });
           this.chartData = resultChartsData.data;
           this.drawBoxPlot();
-          this.isError = false
-          this.loading = false
+          this.isError = false;
+          this.loading = false;
         } catch (error) {
-          this.isError = true
-          this.loading = false
+          this.isError = true;
+          this.loading = false;
         }
       }
     },

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

@@ -3,11 +3,13 @@
     <div :id="`chart-${inds}`" style="width: 100%; height: 450px"></div>
   </div>
 </template>
+
 <script>
 import { nextTick } from "vue"; // 导入 nextTick
 import { allTypesDatas } from "@/utils/allTypesOfAnalysisData.js";
 import Plotly from "plotly.js-dist";
 import axios from "axios";
+
 export default {
   props: {
     inds: {
@@ -30,14 +32,13 @@ export default {
           x: [],
           y: [],
           type: "heatmap",
-          colorscale: "Viridis", //分钟scads
           colorscale: [
-            [0, "#FCFED4"], // 0% - 50%，保持 "#FCFED4"
-            [0.5, "#FCFED4"], // 50%，结束 "#FCFED4"
-            [0.5, "#5BA8BF"], // 50%-85%，开始 "#C4E4B9"
-            [0.85, "#5BA8BF"], // 85%，结束 "#C4E4B9"
-            [0.85, "#18276E"], // 85%-100%，开始 "#5BA8BF"
-            [1, "#18276E"], // 100%，结束 "#5BA8BF"
+            [0, "#FCFED4"], // 0% - 50%
+            [0.5, "#FCFED4"], // 50%
+            [0.5, "#5BA8BF"], // 50% - 85%
+            [0.85, "#5BA8BF"], // 85%
+            [0.85, "#18276E"], // 85% - 100%
+            [1, "#18276E"], // 100%
           ],
           showscale: true, // 显示色带（可选）
           hoverongaps: false,
@@ -46,7 +47,6 @@ export default {
     };
   },
   mounted() {
-    // this.getData();
     if (this.fileAddr) {
       this.getData();
     }
@@ -66,11 +66,9 @@ export default {
           this.initData[0].x = this.chartData.data[0].xData;
           this.initData[0].y = this.chartData.data[0].yData;
           this.initData[0].z = this.chartData.data[0].ZData;
-          // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
+
           nextTick(() => {
             this.initcharts();
-            // this.isError = false;
-            // this.loading = false;
           });
         } catch (error) {
           console.error("Error loading data:", error);
@@ -79,97 +77,50 @@ export default {
         }
       }
     },
-    initcharts() {
-      const lineDatas = allTypesDatas.filter(
-        (item) =>
-          item.analysisTypeCode === "data_integrity_second" ||
-          item.analysisTypeCode === "data_integrity_minute"
-      )[0];
 
-      // 生成 annotations 数据
+    initcharts() {
+      // 使用统一的颜色范围
+      const trace = {
+        type: "heatmap",
+        x: this.initData[0].x,
+        y: this.initData[0].y,
+        z: this.initData[0].z,
+        colorscale: this.initData[0].colorscale, // 使用新的颜色范围
+        text: this.initData[0].z.map((row) =>
+          row.map((value) => value.toString())
+        ),
+        hoverinfo: "text", // Hover时显示文本
+        showscale: true, // 显示颜色条
+        texttemplate: "%{text}", // 在热图块上显示z值
+        xgap: 2, // 设置水平方向格子之间的间距
+        ygap: 2, // 设置垂直方向格子之间的间距
+      };
 
       const layout = {
-        ...lineDatas.lableConfig,
         showlegend: false,
-        shapes: this.createShapesBorder(
-          this.initData[0].y.length,
-          this.initData[0].x.length + 1,
-          1,
-          "white",
-          0
-        ),
-        // annotations: this.createAnnotations(this.initData[0].z),
-        margin: {
-          l: 100,
-          r: 100,
-          t: 100,
-          b: 100,
-        },
         autosize: true,
-        yaxis: {
-          type: "category",
-          tickvals: this.initData[0].y, // 确保 Y 轴的值和你的数据匹配
-          ticktext: this.initData[0].y,
-          showticks: false,
-          showgrid: true,
-          showline: false, // 隐藏 y 轴的轴线
-        },
         xaxis: {
+          title: this.chartData.xaixs,
           tickvals: this.initData[0].x,
           ticktext: this.initData[0].x,
-          showticks: false,
-          showgrid: true,
-          showline: false, // 隐藏 y 轴的轴线
+          tickmode: "array",
         },
-        plot_bgcolor: "white", // 背景颜色设置为白色，确保背景和网格线一致
+        yaxis: {
+          tickmode: "array",
+          title: this.chartData.yaixs,
+          tickvals: this.initData[0].y,
+          ticktext: this.initData[0].y,
+        },
+        plot_bgcolor: "white",
         gridcolor: "#d3d3d3", // 设置网格线颜色
       };
-      Plotly.newPlot(`chart-${this.inds}`, this.initData, layout, {
+
+      Plotly.newPlot(`chart-${this.inds}`, [trace], layout, {
         responsive: true,
       });
     },
-    createAnnotations(zData) {
-      const annotations = [];
-      for (let row = 0; row < zData.length; row++) {
-        for (let col = 0; col < zData[row].length; col++) {
-          if (!isNaN(zData[row][col])) {
-            // 确保值不是 NaN
-            annotations.push({
-              x: this.initData[0].x[col],
-              y: this.initData[0].y[row],
-              text: zData[row][col].toString(),
-              showarrow: false,
-              font: {
-                size: 10,
-                color: "black",
-              },
-              align: "center",
-            });
-          }
-        }
-      }
-      return annotations;
-    },
-    createShapesBorder(rows, cols, borderWidth, borderColor, offset) {
-      var shapes = [];
-      for (var row = 0; row < rows; row++) {
-        for (var col = 0; col < cols; col++) {
-          shapes.push({
-            type: "rect",
-            x0: col - 0.5 + offset,
-            x1: col + 0.5 + offset,
-            y0: row - 0.5 + offset,
-            y1: row + 0.5 + offset,
-            line: {
-              color: borderColor,
-              width: borderWidth,
-            },
-          });
-        }
-      }
-      return shapes;
-    },
   },
 };
 </script>
+
 <style scoped></style>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-17 17:22:04
- * @LastEditTime: 2025-01-17 17:23:46
+ * @LastEditTime: 2025-01-22 09:20:14
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
@@ -51,7 +51,7 @@ export default {
     },
     index: {
       type: Number,
-    }
+    },
   },
   data() {
     return {
@@ -70,19 +70,19 @@ export default {
     async getData() {
       if (this.fileAddr !== "") {
         try {
-          this.loading = true
+          this.loading = true;
           this.cancelToken = axios.CancelToken.source();
-          console.log(this.cancelToken)
+          console.log(this.cancelToken);
           const resultChartsData = await axios.get(this.fileAddr, {
-            cancelToken: this.cancelToken.token
+            cancelToken: this.cancelToken.token,
           });
           this.chartData = resultChartsData.data;
           this.drawChart();
-          this.isError = false
-          this.loading = false
+          this.isError = false;
+          this.loading = false;
         } catch (error) {
-          this.isError = true
-          this.loading = false
+          this.isError = true;
+          this.loading = false;
         }
       }
     },
@@ -153,11 +153,30 @@ export default {
         title: data.title,
         xaxis: {
           title: this.chartData.xaixs,
+          showline: false, // 隐藏x轴轴线
+          zeroline: false, // 隐藏零轴
+          gridcolor: "#fff", // 设置x轴网格线颜色
+          gridcolor: "rgb(255,255,255)", // 网格线颜色
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+          showbackground: true, // 显示背景
         },
         yaxis: {
+          showline: false, // 隐藏x轴轴线
+          zeroline: false, // 隐藏零轴
+          gridcolor: "#fff", // 设置x轴网格线颜色
           title: this.chartData.yaixs,
+          line: {
+            show: false,
+          },
+          gridcolor: "rgb(255,255,255)", // 网格线颜色
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+          showbackground: true, // 显示背景
         },
         showlegend: false,
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff", // 设置网格线颜色
       };
       const config = {
         modeBarButtonsToAdd: [

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

@@ -170,11 +170,23 @@ export default {
         title: data.title,
         xaxis: {
           title: this.chartData.xaixs,
+          gridcolor: "rgb(255,255,255)", // 网格线颜色
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+          showbackground: true, // 显示背景
         },
         yaxis: {
           title: this.chartData.yaixs,
+          gridcolor: "rgb(255,255,255)", // 网格线颜色
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+          showbackground: true, // 显示背景
         },
         showlegend: false,
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff", // 设置网格线颜色
+        // plot_bgcolor: "rad",
+        // gridcolor: "#d3d3d3", // 设置网格线颜色
       };
       const config = {
         modeBarButtonsToAdd: [

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

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <div v-loading="loading" :id="`plotDiv-${inds}`" style="width: 100%; height: 550px">
+    <div
+      v-loading="loading"
+      :id="`plotDiv-${inds}`"
+      style="width: 100%; height: 450px"
+    >
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
   </div>
@@ -47,20 +51,20 @@ export default {
     async getData() {
       if (this.fileAddr !== "") {
         try {
-          this.loading = true
+          this.loading = true;
           this.cancelToken = axios.CancelToken.source();
-          console.log(this.cancelToken)
+          console.log(this.cancelToken);
           const resultChartsData = await axios.get(this.fileAddr, {
-            cancelToken: this.cancelToken.token
+            cancelToken: this.cancelToken.token,
           });
-          console.log(resultChartsData)
+          console.log(resultChartsData);
           this.chartData = resultChartsData.data;
           this.renderChart();
-          this.isError = false
-          this.loading = false
+          this.isError = false;
+          this.loading = false;
         } catch (error) {
-          this.isError = true
-          this.loading = false
+          this.isError = true;
+          this.loading = false;
         }
       }
     },

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

@@ -0,0 +1,207 @@
+<!--
+ * @Author: your name
+ * @Date: 2025-01-22 10:10:46
+ * @LastEditTime: 2025-01-22 10:12:02
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/YewErrorBarChart.vue
+-->
+<!--
+ * @Author: your name
+ * @Date: 2024-09-11 14:30:17
+ * @LastEditTime: 2025-01-20 17:31:39
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
+-->
+
+<template>
+  <div>
+    <!-- 图表控制面板 -->
+    <div style="display: flex; align-items: center">
+      <div style="margin-right: 20px; display: flex; align-items: center">
+        <el-color-picker
+          size="small"
+          v-model="color1"
+          show-alpha
+          @change="updateChartColor"
+        ></el-color-picker>
+        <span style="margin-left: 10px">自定义颜色</span>
+      </div>
+      <div>
+        <el-button size="small" @click="toggleChartType">
+          切换为{{ chartType === "bar" ? "折线图" : "柱状图" }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 图表容器 -->
+    <div
+      v-loading="loading"
+      :id="`bar-chart${inds}`"
+      style="width: 100%; height: 400px"
+    >
+      <el-empty v-if="isError" description="请求失败"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+import { nextTick } from "vue"; // 导入 nextTick
+import Plotly from "plotly.js-dist";
+import axios from "axios";
+import { myMixin } from "@/mixins/chartRequestMixin";
+
+export default {
+  props: {
+    fileAddr: {
+      default: "",
+      type: String,
+    },
+    inds: {
+      type: String,
+      default() {
+        return 0;
+      },
+    },
+  },
+  mixins: [myMixin],
+  data() {
+    return {
+      chartData: {
+        analysisTypeCode: "",
+        engineCode: "",
+        engineTypeName: "",
+        xaixs: "",
+        yaixs: "",
+        data: [
+          // {
+          //   xData: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
+          //   yData: [10, 20, 30, 40, 50],
+          //   title: "数据集1",
+          // },
+        ],
+      },
+      chartType: "bar", // 当前图表类型 ('bar' 或 'scatter')
+      color1: "#406DAB", // 默认颜色
+      // normalRangeMin: 5, // 最低范围
+      // normalRangeMax: 18, // 最高范围
+    };
+  },
+  mounted() {
+    nextTick(() => {
+      this.drawChart();
+      this.isError = false;
+      this.loading = false;
+    });
+  },
+  methods: {
+    // async getData() {
+    //   if (this.fileAddr !== "") {
+    //     try {
+    //       this.loading = true;
+    //       this.cancelToken = axios.CancelToken.source();
+    //       const resultChartsData = await axios.get(this.fileAddr, {
+    //         cancelToken: this.cancelToken.token,
+    //       });
+    //       this.chartData = resultChartsData.data;
+    //       // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
+    //       nextTick(() => {
+    //         this.drawChart();
+    //         this.isError = false;
+    //         this.loading = false;
+    //       });
+    //     } catch (error) {
+    //       console.error("Error loading data:", error);
+    //       this.isError = true;
+    //       this.loading = false;
+    //     }
+    //   }
+    // },
+    // 绘制图表
+    drawChart() {
+      if (this.chartData.data.length === 0) return;
+      const chartDataset = this.chartData.data[0];
+      const trace = {
+        x: chartDataset.xData, // 横坐标数据
+        y: chartDataset.yData, // 纵坐标数据
+        type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
+        marker: {
+          color: this.color1, // 柱状图颜色
+        },
+        line: {
+          color: this.color1, // 折线图颜色
+        },
+        name: chartDataset.title || "数据", // 图例名称
+      };
+
+      // Normal Range Lines
+      const normalRangeLine = {
+        x: chartDataset.xData, // 横坐标数据
+        y: Array(chartDataset.xData.length).fill(this.normalRangeMin), // 最低值线
+        mode: "lines",
+        name: "LCL", // 图例名称（最低范围）
+        line: {
+          color: "red",
+          width: 2,
+          dash: "dash", // 虚线
+        },
+      };
+
+      const normalRangeMaxLine = {
+        x: chartDataset.xData, // 横坐标数据
+        y: Array(chartDataset.xData.length).fill(this.normalRangeMax), // 最高值线
+        mode: "lines",
+        name: "UCL", // 图例名称（最高范围）
+        line: {
+          color: "red",
+          width: 2,
+          dash: "dash", // 虚线
+        },
+      };
+
+      const layout = {
+        title: this.chartData.analysisTypeCode || "图表", // 图表标题
+        xaxis: {
+          title: this.chartData.xaixs || "X轴", // 横坐标标题
+        },
+        yaxis: {
+          title: this.chartData.yaixs || "Y轴", // 纵坐标标题
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          t: 50,
+          b: 50,
+        },
+        autosize: true, // 开启自适应
+      };
+
+      // 渲染图表
+      Plotly.newPlot(
+        `bar-chart${this.inds}`,
+
+        // [trace, normalRangeLine, normalRangeMaxLine],
+        [trace],
+        layout,
+        {
+          responsive: true,
+        }
+      );
+    },
+    // 切换图表类型
+    toggleChartType() {
+      this.chartType = this.chartType === "bar" ? "scatter" : "bar";
+      this.drawChart();
+    },
+    // 更新图表颜色
+    updateChartColor() {
+      this.drawChart();
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 样式可以根据需求自定义 */
+</style>

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

@@ -88,7 +88,9 @@ export default {
           const resultChartsData = await axios.get(this.fileAddr, {
             cancelToken: this.cancelToken.token,
           });
+          console.log("resultChartsData.data", resultChartsData);
           this.chartData = resultChartsData.data;
+
           // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
           nextTick(() => {
             this.drawChart();
@@ -105,28 +107,31 @@ export default {
     // 绘制图表
     drawChart() {
       const data = [];
-      this.chartData.data.forEach((turbine, index) => {
-        // 判断图表类型，根据类型调整绘制方式
-        const chartConfig = {
-          x: turbine.xData, // X 数据
-          y: turbine.yData, // Y 数据
-          name: turbine.engineName, // 使用机组名称
-          line: {
-            color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
-          },
-          marker: {
-            color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
-          },
-        };
+      console.log(this.chartData, "this.chartData");
+      this.chartData &&
+        this.chartData.data &&
+        this.chartData.data.forEach((turbine, index) => {
+          // 判断图表类型，根据类型调整绘制方式
+          const chartConfig = {
+            x: turbine.xData, // X 数据
+            y: turbine.yData, // Y 数据
+            name: turbine.engineName, // 使用机组名称
+            line: {
+              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
+            },
+            marker: {
+              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
+            },
+          };
 
-        if (this.chartType === "line") {
-          chartConfig.mode = "lines"; // 如果是折线图
-        } else if (this.chartType === "bar") {
-          chartConfig.type = "bar"; // 如果是柱状图
-        }
+          if (this.chartType === "line") {
+            chartConfig.mode = "lines"; // 如果是折线图
+          } else if (this.chartType === "bar") {
+            chartConfig.type = "bar"; // 如果是柱状图
+          }
 
-        data.push(chartConfig);
-      });
+          data.push(chartConfig);
+        });
 
       const layout = {
         title: this.chartData.title,

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-01-17 12:31:47
+ * @LastEditTime: 2025-01-22 09:21:52
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -147,7 +147,12 @@ export default {
     <template>
       <div style="display: flex; align-items: center; margin-top: 20px">
         <div style="margin-right: 20px; display: flex; align-items: center">
-          <el-color-picker size="small" v-model="color1" show-alpha @change="updateChartColor"></el-color-picker>
+          <el-color-picker
+            size="small"
+            v-model="color1"
+            show-alpha
+            @change="updateChartColor"
+          ></el-color-picker>
           <span style="margin-left: 10px">自定义颜色</span>
         </div>
       </div>
@@ -191,20 +196,20 @@ export default {
     async getData() {
       if (this.fileAddr !== "") {
         try {
-          this.loading = true
+          this.loading = true;
           this.cancelToken = axios.CancelToken.source();
-          console.log(this.cancelToken)
+          console.log(this.cancelToken);
           const resultChartsData = await axios.get(this.fileAddr, {
-            cancelToken: this.cancelToken.token
+            cancelToken: this.cancelToken.token,
           });
-          console.log(resultChartsData)
+          console.log(resultChartsData);
           this.chartData = resultChartsData.data;
           this.drawChart();
-          this.isError = false
-          this.loading = false
+          this.isError = false;
+          this.loading = false;
         } catch (error) {
-          this.isError = true
-          this.loading = false
+          this.isError = true;
+          this.loading = false;
         }
       }
     },
@@ -239,19 +244,19 @@ export default {
             color: data.yData, // 根据 yData 设置颜色
             colorscale: this.color1
               ? [
-                [0, "#F9FDD2"], // 颜色从 this.color1 开始
-                [1, this.color1], // 结束颜色为其他颜色
-              ]
+                  [0, "#F9FDD2"], // 颜色从 this.color1 开始
+                  [1, this.color1], // 结束颜色为其他颜色
+                ]
               : [
-                [0, "#F9FDD2"],
-                [0.15, "#E9F6BD"],
-                [0.3, "#C2E3B9"],
-                [0.45, "#8AC8BE"],
-                [0.6, "#5CA8BF"],
-                [0.75, "#407DB3"],
-                [0.9, "#2E4C9A"],
-                [1, "#1B2973"],
-              ],
+                  [0, "#F9FDD2"],
+                  [0.15, "#E9F6BD"],
+                  [0.3, "#C2E3B9"],
+                  [0.45, "#8AC8BE"],
+                  [0.6, "#5CA8BF"],
+                  [0.75, "#407DB3"],
+                  [0.9, "#2E4C9A"],
+                  [1, "#1B2973"],
+                ],
             colorbar: {
               title: data.colorbartitle, // 色标标题
             },
@@ -278,11 +283,21 @@ export default {
         title: data.title,
         xaxis: {
           title: this.chartData.xaixs,
+          gridcolor: "rgb(255,255,255)", // 网格线颜色
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+          showbackground: true, // 显示背景
         },
         yaxis: {
           title: this.chartData.yaixs,
+          gridcolor: "rgb(255,255,255)", // 网格线颜色
+          tickcolor: "rgb(255,255,255)",
+          backgroundcolor: "#e5ecf6",
+          showbackground: true, // 显示背景
         },
         showlegend: false,
+        plot_bgcolor: "#e5ecf6",
+        gridcolor: "#fff", // 设置网格线颜色
       };
 
       const config = {

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

@@ -0,0 +1,198 @@
+<!--
+ * @Author: your name
+ * @Date: 2025-01-22 09:42:59
+ * @LastEditTime: 2025-01-22 09:59:53
+ * @LastEditors: milo-MacBook-Pro.local
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/yawErrorLine.vue
+-->
+<template>
+  <div>
+    <!-- 图表控制面板 总图-->
+    <div style="display: flex; align-items: center">
+      <div>
+        <el-button size="small" @click="toggleChartType">
+          切换为{{ chartType === "line" ? "柱状图" : "折线图" }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 图表容器 -->
+    <div
+      v-loading="loading"
+      :id="`bar-chart${index}`"
+      style="width: 100%; height: 400px"
+    >
+      <el-empty v-if="isError" description="请求失败"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+import { nextTick } from "vue"; // 导入 nextTick
+import Plotly from "plotly.js-dist";
+import axios from "axios";
+import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
+
+export default {
+  props: {
+    fileAddr: {
+      type: String,
+      default: "",
+    },
+    index: {
+      type: Number,
+      default() {
+        return 0;
+      },
+    },
+  },
+  mixins: [myMixin],
+  data() {
+    return {
+      chartData: {},
+      chartType: "line", // 默认图表类型是折线图
+      color1: "#406DAB", // 默认颜色
+      loading: false,
+      isError: false,
+      colors: [
+        "#DFEDC1",
+        "#DBEEBC",
+        "#A8D7BE",
+        "#8ECAC1",
+        "#77BDC2",
+        "#64ADC2",
+        "#559ABE",
+        "#4884B7",
+        "#406DAB",
+        "#3856A0",
+        "#314291",
+        "#28357A",
+        "#1A285E",
+      ],
+    };
+  },
+  mounted() {
+    if (this.fileAddr) {
+      this.getData();
+    }
+  },
+  methods: {
+    // 获取数据
+    async getData() {
+      if (this.fileAddr !== "") {
+        try {
+          this.loading = true;
+          this.cancelToken = axios.CancelToken.source();
+          const resultChartsData = await axios.get(this.fileAddr, {
+            cancelToken: this.cancelToken.token,
+          });
+          // 处理数据中的 NaN 值
+          const handleNaN = (key, value) => {
+            // 检查是否为 NaN，若是则返回 null，其他值保持不变
+            return typeof value === "number" && isNaN(value) ? null : value;
+          };
+
+          // 使用 JSON.stringify 和 replacer 来处理 NaN 值
+          this.chartData = JSON.parse(
+            JSON.stringify(resultChartsData.data, handleNaN)
+          );
+
+          // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
+          nextTick(() => {
+            this.drawChart();
+            this.isError = false;
+            this.loading = false;
+          });
+        } catch (error) {
+          console.error("Error loading data:", error);
+          this.isError = true;
+          this.loading = false;
+        }
+      }
+    },
+    // 绘制图表
+    drawChart() {
+      const data = [];
+      console.log(this.chartData, "this.chartData");
+      this.chartData &&
+        this.chartData.data &&
+        this.chartData.data.forEach((turbine, index) => {
+          // 判断图表类型，根据类型调整绘制方式
+          const chartConfig = {
+            x: turbine.xData, // X 数据
+            y: turbine.yData, // Y 数据
+            name: turbine.engineName, // 使用机组名称
+            line: {
+              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
+            },
+            marker: {
+              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
+            },
+          };
+
+          if (this.chartType === "line") {
+            chartConfig.mode = "lines"; // 如果是折线图
+          } else if (this.chartType === "bar") {
+            chartConfig.type = "bar"; // 如果是柱状图
+          }
+
+          data.push(chartConfig);
+        });
+
+      const layout = {
+        title: this.chartData.title,
+        xaxis: {
+          title: this.chartData.xaixs || "X轴", // 横坐标标题
+        },
+        yaxis: {
+          title: this.chartData.yaixs || "Y轴", // 纵坐标标题
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          t: 50,
+          b: 50,
+        },
+        autosize: true, // 开启自适应
+        barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
+      };
+      if (
+        this.chartData.contract_Cp_curve_yData &&
+        this.chartData.contract_Cp_curve_yData.length > 0
+      ) {
+        data.push({
+          x: this.chartData.contract_Cp_curve_xData,
+          y: this.chartData.contract_Cp_curve_yData,
+          mode: "lines+markers",
+          name: "合同功率曲线",
+          line: {
+            color: "red",
+            width: 1, // 设置线条的宽度为1
+          },
+          marker: { color: "red", size: 4 },
+        });
+      }
+      // 使用 Plotly.react 来更新图表
+      Plotly.react(`bar-chart${this.index}`, data, layout, {
+        responsive: true,
+      });
+    },
+
+    // 切换图表类型
+    toggleChartType() {
+      this.chartType = this.chartType === "line" ? "bar" : "line"; // 切换图表类型
+      this.drawChart(); // 重新绘制图表
+    },
+
+    // 更新图表颜色
+    updateChartColor() {
+      this.drawChart(); // 更新颜色后重新绘制图表
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 样式可以根据需求自定义 */
+</style>