修改合并 江

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:45:50
- * @LastEditTime: 2025-01-21 16:11:05
+ * @LastEditTime: 2025-01-22 15:28:10
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_all/index.vue
@@ -38,7 +38,9 @@
             v-for="(chantItem, chartInd) in itemCsv.data"
             :key="chartInd + 'chantItem'"
           ></Rader> -->
+          <!-- {{ Object.keys(itemCsv.data[0]).length }} -->
           <el-table
+<<<<<<< HEAD
             v-if="Object.keys(itemCsv.data[0]).length > 4"
             :data="itemCsv.data"
             :key="itemind + 'itemCsv'"
@@ -76,6 +78,9 @@
           </el-table>
           <el-table
             v-else
+=======
+            v-if="Object.keys(itemCsv.data[0]).length <= 4"
+>>>>>>> bde28cebc42d6e697f93ab31156a79a2970d71f8
             :data="itemCsv.data"
             border
             style="width: 100%"
@@ -259,13 +264,12 @@ export default {
                   this.productionIndicatorCsvHeader.push(
                     Object.keys(result.data[0])
                   );
-                  console.log(result.data, "csvvvvv");
                   this.productionIndicatorCsvData.push({
                     data: result.data
                       .filter((row) => Object.keys(row).length)
                       .slice(0, result.data.length - 1),
                   }); // 过滤空行
-                  console.log(this.productionIndicatorCsvData, "csvvvvv");
+                  console.log(this.productionIndicatorCsvData);
                 }
               },
               error: (error) => {

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-01-21 16:11:13
+ * @LastEditTime: 2025-01-22 15:31:16
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_unit/index.vue
@@ -32,12 +32,16 @@
       </el-alert>
       <div v-if="productionIndicatorCsvData.length > 0">
         <template v-for="(itemCsv, itemind) in productionIndicatorCsvData">
-          <Rader
-            :chartData="chantItem"
-            v-for="(chantItem, chartInd) in itemCsv.data"
-            :key="chartInd + 'chantItem'"
-          ></Rader>
+          <div v-if="Object.keys(itemCsv.data[0]).length > 4">
+            <Rader
+              :chartData="chantItem"
+              v-for="(chantItem, chartInd) in itemCsv.data"
+              :key="chartInd + 'chantItem' + itemind"
+            ></Rader>
+          </div>
+
           <el-table
+            :key="chartInd + 'table' + itemind"
             max-height="500"
             v-if="Object.keys(itemCsv.data[0]).length > 4"
             :data="itemCsv.data"
@@ -72,19 +76,6 @@
             <el-table-column prop="Ws" label="功率曲线一致性系数">
             </el-table-column>
           </el-table>
-          <el-table
-            v-else
-            :data="itemCsv.data"
-            border
-            style="width: 100%"
-            align="center"
-          >
-            <el-table-column prop="Qp" label="风场总发电量"> </el-table-column>
-            <el-table-column prop="Thc" label="风场等效利用小时">
-            </el-table-column>
-            <el-table-column prop="Rdr" label="风场弃风率"> </el-table-column>
-            <el-table-column prop="Qdr" label="风场弃风电量"> </el-table-column>
-          </el-table>
         </template>
       </div>
       <el-empty description="暂无分析记录" v-else></el-empty>
@@ -260,11 +251,16 @@ export default {
                 this.productionIndicatorCsvHeader.push(
                   Object.keys(result.data[0])
                 );
+
                 this.productionIndicatorCsvData.push({
                   data: result.data
                     .filter((row) => Object.keys(row).length)
                     .slice(0, result.data.length - 1),
                 }); // 过滤空行
+                console.log(
+                  this.productionIndicatorCsvData,
+                  "this.productionIndicatorCsvData"
+                );
               },
               error: (error) => {
                 console.error("CSV 解析错误：", error);
@@ -321,8 +317,8 @@ export default {
         const resFilter =
           result.data &&
           result.data.filter((items) => items.analysisTypeName === "机组指标");
-        if (resFilter && resFilter[0] && resFilter[0].diagramRelations) {
-          resFilter[0].diagramRelations.map((item) => {
+        if (resFilter && resFilter[0] && resFilter[0].generalFiles) {
+          resFilter[0].generalFiles.map((item) => {
             if (item.fileAddr) {
               this.productionIndicatorCsvHeader = [];
               this.productionIndicatorCsvData = [];

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-22 09:43:49
+ * @LastEditTime: 2025-01-22 14:54:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error/index.vue
@@ -32,8 +32,14 @@
         </div>
       </el-alert>
 
-      <div class="titleCharts">分析总图 :</div>
+      <div class="titleCharts" v-if="zongFaultCsvData.length > 0">
+        分析总图 :
+      </div>
       <div v-if="zongFaultCsvData.length > 0">
+        <yawErrorBarChart
+          :zongFaultCsvData="zongFaultCsvData"
+        ></yawErrorBarChart>
+        <yawErrorBarSum :zongFaultCsvData="zongFaultCsvData"></yawErrorBarSum>
         <template v-for="(itemCsv, indCsv) in zongFaultCsvData">
           <el-table
             :key="indCsv + 'indCsv'"
@@ -47,6 +53,8 @@
             </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
@@ -59,7 +67,6 @@
           </el-table>
         </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">
@@ -72,7 +79,10 @@
           </yawErrorLine>
         </div>
       </div>
-      <el-empty description="暂无分析记录" v-else></el-empty>
+      <el-empty
+        description="暂无分析记录"
+        v-if="zongFaultCsvData.length === 0 && fenFaultCsvData.length === 0"
+      ></el-empty>
       <el-tabs value="first" v-if="isShowDescription">
         <el-tab-pane label="意见描述" name="first">
           <TinymceEditor
@@ -108,6 +118,9 @@ 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 yawErrorBarChart from "@/views/performance/components/chartsCom/YewErrorBarChart.vue";
+
+import yawErrorBarSum from "@/views/performance/components/chartsCom/yawErrorBarSum.vue";
 import {
   analysisDetail,
   queryAnalysisedEngine,
@@ -123,6 +136,8 @@ export default {
     FaultAll,
     TinymceEditor,
     yawErrorLine,
+    yawErrorBarChart,
+    yawErrorBarSum,
   },
   props: {
     initBatchCode: {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-17 19:04:52
- * @LastEditTime: 2025-01-22 09:22:37
+ * @LastEditTime: 2025-01-22 14:09:40
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/3DDrawingChart.vue

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2025-01-20 17:31:39
+ * @LastEditTime: 2025-01-22 12:17:59
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
@@ -172,11 +172,123 @@ export default {
 
         // [trace, normalRangeLine, normalRangeMaxLine],
         [trace],
-        layout,
+        { ...layout, displaylogo: false },
         {
           responsive: true,
+          modeBarButtonsToRemove: [
+            // "pan2d", // 平移按钮
+            "zoom2d", // 缩放按钮
+            // "select2d", // 选择框
+            // "lasso2d", // 套索选择
+            // "resetScale2d", // 重置轴
+            // // "zoomIn", // 放大
+            // // "zoomOut", // 缩小
+            // "home", // 重置
+            // "toImage", // 导出为图片
+            // "hoverClosestCartesian", // 悬浮信息
+            // "zoomIn2d", // 缩放按钮（详细版本）
+            // "zoomOut2d", // 缩放按钮（详细版本）
+            // "autoScale2D",
+            // "plotlylogo2D",
+            // "Produced with Plotly.js(v2.35)", // 删除 Plotly logo
+          ],
+
+          // modeBarButtonsToAdd: [
+          //   {
+          //     name: "保存图片", // 直接写中文翻译
+          //     icon: Plotly.Icons["camera"],
+          //     click: function () {
+          //       console.log("选择框");
+          //       Plotly.downloadImage(gd, {
+          //         format: "png",
+          //         width: 800,
+          //         height: 600,
+          //       });
+          //     },
+          //   },
+          //   {
+          //     name: "选择框", // 直接写中文翻译
+          //     icon: Plotly.Icons["selectbox"],
+          //     click: function () {
+          //       console.log("选择框");
+          //     },
+          //   },
+          //   {
+          //     name: "套索选择", // 直接写中文翻译
+          //     icon: Plotly.Icons.lasso,
+          //     click: function () {
+          //       console.log("套索选择");
+          //     },
+          //   },
+          //   {
+          //     name: "放大", // 直接写中文翻译
+          //     icon: Plotly.Icons["zoom_plus"],
+          //     click: function () {
+          //       console.log("放大", Plotly.Icons);
+          //     },
+          //   },
+          //   {
+          //     name: "缩小", // 直接写中文翻译
+          //     icon: Plotly.Icons["zoom_minus"],
+          //     click: function () {
+          //       console.log("缩小", Plotly.Icons);
+          //     },
+          //   },
+          //   {
+          //     name: "缩放", // 直接写中文翻译
+          //     icon: Plotly.Icons["zoombox"],
+          //     click: function () {
+          //       console.log("缩放", Plotly.Icons);
+          //     },
+          //   },
+          //   {
+          //     name: "平移", // 直接写中文翻译
+          //     icon: Plotly.Icons.pan,
+          //     click: function () {
+          //       console.log("平移");
+          //     },
+          //   },
+          //   {
+          //     name: "还原", // 直接写中文翻译
+          //     icon: Plotly.Icons.home,
+          //     click: function () {
+          //       // 获取图表的 DOM 元素
+          //       var gd = document.getElementById(`bar-chart${this.inds}`);
+          //       Plotly.relayout(gd, {
+          //         "xaxis.range": null,
+          //         "yaxis.range": null,
+          //       });
+          //     },
+          //   },
+          // ], // 这个必须是数组类型
         }
-      );
+      ).then(function (gd) {
+        // 获取工具栏按钮
+        const toolbar = gd.querySelector(".modebar");
+        const buttons = toolbar.querySelectorAll(".modebar-btn");
+
+        // 定义一个映射对象，方便修改按钮提示
+        const titleMap = {
+          "Download plot as a png": "保存图片",
+          Autoscale: "缩放",
+          Pan: "平移",
+          "Zoom out": "放大",
+          "Zoom in": "缩小",
+          "Box Select": "选择框操作",
+          "Lasso Select": "套索选择操作",
+          "Reset axes": "重置操作",
+        };
+
+        // 遍历所有按钮，修改它们的 title
+        buttons.forEach(function (button) {
+          const dataTitle = button.getAttribute("data-title");
+
+          // 如果标题匹配，修改属性值
+          if (titleMap[dataTitle]) {
+            button.setAttribute("data-title", titleMap[dataTitle]);
+          }
+        });
+      });
     },
     // 切换图表类型
     toggleChartType() {

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

@@ -1,20 +1,3 @@
-<!--
- * @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>
     <!-- 图表控制面板 -->
@@ -38,7 +21,7 @@
     <!-- 图表容器 -->
     <div
       v-loading="loading"
-      :id="`bar-chart${inds}`"
+      :id="`bar-chart-sum`"
       style="width: 100%; height: 400px"
     >
       <el-empty v-if="isError" description="请求失败"></el-empty>
@@ -54,15 +37,9 @@ import { myMixin } from "@/mixins/chartRequestMixin";
 
 export default {
   props: {
-    fileAddr: {
-      default: "",
-      type: String,
-    },
-    inds: {
-      type: String,
-      default() {
-        return 0;
-      },
+    zongFaultCsvData: {
+      default: [],
+      type: Array,
     },
   },
   mixins: [myMixin],
@@ -74,18 +51,12 @@ export default {
         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",
-          // },
-        ],
+        data: [],
       },
       chartType: "bar", // 当前图表类型 ('bar' 或 'scatter')
       color1: "#406DAB", // 默认颜色
-      // normalRangeMin: 5, // 最低范围
-      // normalRangeMax: 18, // 最高范围
+      isError: false, // 错误标志
+      loading: true, // 加载标志
     };
   },
   mounted() {
@@ -95,78 +66,72 @@ export default {
       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;
-    //     }
-    //   }
-    // },
-    // 绘制图表
+    getData() {
+      console.log(this.zongFaultCsvData[0].data);
+    },
+    // 为每个数据点返回对应颜色
+    getColor(value) {
+      if (value <= 3) {
+        return "#8AC8BE"; // (0, 3]
+      } else if (value <= 5) {
+        return "#407DB3"; // (3, 5]
+      } else {
+        return "#1B2973"; // (5, ∞]
+      }
+    },
     drawChart() {
-      if (this.chartData.data.length === 0) return;
-      const chartDataset = this.chartData.data[0];
+      const chartDataset = this.zongFaultCsvData[0].data;
+      const xData = chartDataset.map((item) => item.engine_name); // 机组编号
+      const yData = chartDataset.map((item) => item.yaw_error1); // 偏航误差值
+
+      // 为每个数据点分配颜色
+      const colors = yData.map(this.getColor);
+
       const trace = {
-        x: chartDataset.xData, // 横坐标数据
-        y: chartDataset.yData, // 纵坐标数据
+        x: xData, // 横坐标数据
+        y: yData, // 纵坐标数据
         type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
         marker: {
-          color: this.color1, // 柱状图颜色
+          color: colors, // 每个点的颜色
         },
         line: {
           color: this.color1, // 折线图颜色
         },
-        name: chartDataset.title || "数据", // 图例名称
+        name: "偏航误差值", // 图例名称
       };
 
-      // 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", // 虚线
-        },
+      // 创建虚拟的 trace 以便显示图例
+      const legendTrace1 = {
+        x: [null],
+        y: [null],
+        name: "(0, 3]",
+        mode: "markers",
+        marker: { color: "#8AC8BE", size: 10 },
       };
-
-      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 legendTrace2 = {
+        x: [null],
+        y: [null],
+        name: "(3, 5]",
+        mode: "markers",
+        marker: { color: "#407DB3", size: 10 },
+      };
+      const legendTrace3 = {
+        x: [null],
+        y: [null],
+        name: "(5, ∞]",
+        mode: "markers",
+        marker: { color: "#1B2973", size: 10 },
       };
 
       const layout = {
-        title: this.chartData.analysisTypeCode || "图表", // 图表标题
+        title: "机组静态偏航误差值", // 图表标题
         xaxis: {
-          title: this.chartData.xaixs || "X轴", // 横坐标标题
+          title: "机组编号", // 横坐标标题
         },
         yaxis: {
-          title: this.chartData.yaixs || "Y轴", // 纵坐标标题
+          title: "静态偏航误差值（度）", // 纵坐标标题
         },
         margin: {
           l: 50,
@@ -175,14 +140,46 @@ export default {
           b: 50,
         },
         autosize: true, // 开启自适应
+        showlegend: true, // 显示图例
+        legend: {
+          x: 1.05,
+          y: 1,
+        },
+        annotations: [
+          {
+            x: 1.05,
+            y: 4,
+            xref: "paper",
+            yref: "paper",
+            text: "(0, 3] ",
+            showarrow: false,
+            font: { size: 12, color: "#8AC8BE" },
+          },
+          {
+            x: 1.05,
+            y: 3,
+            xref: "paper",
+            yref: "paper",
+            text: "(3, 5] ",
+            showarrow: false,
+            font: { size: 12, color: "#407DB3" },
+          },
+          {
+            x: 1.05,
+            y: 2,
+            xref: "paper",
+            yref: "paper",
+            text: "(5, ∞] ",
+            showarrow: false,
+            font: { size: 12, color: "#1B2973" },
+          },
+        ],
       };
 
       // 渲染图表
       Plotly.newPlot(
-        `bar-chart${this.inds}`,
-
-        // [trace, normalRangeLine, normalRangeMaxLine],
-        [trace],
+        `bar-chart-sum`,
+        [trace, legendTrace1, legendTrace2, legendTrace3],
         layout,
         {
           responsive: true,

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

@@ -0,0 +1,157 @@
+<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-sums`"
+      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: {
+    zongFaultCsvData: {
+      default: [],
+      type: Array,
+    },
+  },
+  mixins: [myMixin],
+  data() {
+    return {
+      chartData: {
+        analysisTypeCode: "",
+        engineCode: "",
+        engineTypeName: "",
+        xaixs: "",
+        yaixs: "",
+        data: [],
+      },
+      chartType: "bar", // 当前图表类型 ('bar' 或 'scatter')
+      color1: "#406DAB", // 默认颜色
+      isError: false, // 错误标志
+      loading: true, // 加载标志
+    };
+  },
+  mounted() {
+    nextTick(() => {
+      this.drawChart();
+      this.isError = false;
+      this.loading = false;
+    });
+  },
+
+  methods: {
+    // 为每个数据点返回对应颜色
+    getColor(value) {
+      if (value <= 3) {
+        return "#8AC8BE"; // (0, 3] 蓝色
+      } else if (value <= 5) {
+        return "#407DB3"; // (3, 5] 绿色
+      } else {
+        return "#1B2973"; // (5, ∞] 红色
+      }
+    },
+    drawChart() {
+      let a = [];
+      let b = [];
+      let c = [];
+      this.zongFaultCsvData[0].data.map((item) => {
+        if (item["[0,3]"] != "0.0") {
+          a.push(item["[0,3]"]);
+        }
+        if (item["(3,5]"] != "0.0") {
+          b.push(item["(3,5]"]);
+        }
+        if (item["(5, )"] != "0.0") {
+          c.push(item["(5, )"]);
+        }
+      });
+      const chartDataset = this.zongFaultCsvData[0].data;
+      const xData = ["(0,3]", "(3,5]", "(>5]"]; // 机组编号
+      const yData = [a.length, b.length, c.length]; // 分别为"(0,3]", "(3,5]", "(>5]的机组有几个
+
+      // 每个柱子的颜色
+      const colors = [
+        "#8AC8BE", // (0, 3] 蓝色
+        "#407DB3", // (3, 5] 绿色
+        "#1B2973", // (5, ∞] 红色
+      ];
+
+      const trace = {
+        x: xData, // 横坐标数据
+        y: yData, // 纵坐标数据
+        type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
+        marker: {
+          color: colors, // 为每个柱子分配不同的颜色
+        },
+        line: {
+          color: this.color1, // 折线图颜色（如果切换到折线图）
+        },
+      };
+
+      const layout = {
+        title: "静态偏航误差的绝对值机组台数分布情况", // 图表标题
+        xaxis: {
+          title: "静态偏航误差值（度）", // 横坐标标题
+        },
+        yaxis: {
+          title: "台数", // 纵坐标标题
+        },
+        margin: {
+          l: 50,
+          r: 50,
+          t: 50,
+          b: 50,
+        },
+        autosize: true, // 开启自适应
+        showlegend: true, // 显示图例
+      };
+
+      // 渲染图表
+      Plotly.newPlot(`bar-chart-sums`, [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/yawErrorLine.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-22 09:42:59
- * @LastEditTime: 2025-01-22 09:59:53
- * @LastEditors: milo-MacBook-Pro.local
+ * @LastEditTime: 2025-01-22 13:59:21
+ * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/yawErrorLine.vue
 -->
@@ -87,16 +87,9 @@ export default {
           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)
-          );
+          this.chartData = JSON.parse(JSON.stringify(resultChartsData.data));
 
           // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
           nextTick(() => {
@@ -114,7 +107,7 @@ export default {
     // 绘制图表
     drawChart() {
       const data = [];
-      console.log(this.chartData, "this.chartData");
+      //   console.log(this.chartData, "this.chartData");
       this.chartData &&
         this.chartData.data &&
         this.chartData.data.forEach((turbine, index) => {
@@ -132,7 +125,7 @@ export default {
           };
 
           if (this.chartType === "line") {
-            chartConfig.mode = "lines"; // 如果是折线图
+            chartConfig.mode = "lines+markers"; // 如果是折线图
           } else if (this.chartType === "bar") {
             chartConfig.type = "bar"; // 如果是柱状图
           }
@@ -141,7 +134,7 @@ export default {
         });
 
       const layout = {
-        title: this.chartData.title,
+        title: this.chartData.data[0].title,
         xaxis: {
           title: this.chartData.xaixs || "X轴", // 横坐标标题
         },