调试静态偏航误差

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 10:27:38
+ * @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,7 +53,7 @@
             </el-table-column>
             <el-table-column prop="yaw_error1" label="误差值">
             </el-table-column>
-            <el-table-column prop="yaw_error1" label="电量损失">
+            <el-table-column prop="powerloss" label="电量损失">
             </el-table-column>
             <el-table-column align="right">
               <template slot="header" slot-scope="scope">
@@ -61,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">
@@ -74,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
@@ -110,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,
@@ -125,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/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轴", // 横坐标标题
         },