Selaa lähdekoodia

修分析图表

liujiejie 1 kuukausi sitten
vanhempi
commit
bc29450797

+ 12 - 12
src/views/overview/components/fault_all/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:56:55
- * @LastEditTime: 2025-06-10 11:42:55
+ * @LastEditTime: 2025-06-11 09:14:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/fault_all/index.vue
@@ -56,6 +56,7 @@
           <el-table
             max-height="500"
             :key="indCsv + 'indCsv'"
+            :default-sort="{ prop: 'count', order: 'descending' }"
             :data="filteredData(itemCsv)"
             border
             style="width: 100%"
@@ -68,8 +69,11 @@
             <el-table-column
               prop="fault_time_sum"
               sortable
-              label="故障时长()"
+              label="故障时长(小时)"
             >
+              <template slot-scope="scope">
+                {{ Number(scope.row.fault_time_sum).toFixed(2) }}
+              </template>
             </el-table-column>
             <el-table-column align="right">
               <template slot="header" slot-scope="scope">
@@ -303,18 +307,14 @@ export default {
                     this.zongFaultCsvData.push({
                       data: result.data
                         .filter((row) => Object.keys(row).length)
-                        .slice(0, result.data.length - 1),
+                        .slice(0, result.data.length - 1)
+                        .map((item) => ({
+                          ...item,
+                          count: Number(item.count),
+                          fault_time_sum: Number(item.fault_time_sum) / 3600,
+                        })),
                     });
                   }
-                  //  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),
-                  //   });
-                  // }
                 }
               },
               error: (error) => {

+ 23 - 21
src/views/overview/components/fault_unit/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:56:12
- * @LastEditTime: 2025-06-10 16:06:05
+ * @LastEditTime: 2025-06-11 09:12:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/fault_unit/index.vue
@@ -42,20 +42,20 @@
           :faultCounts="
             fenFaultCsvData &&
             fenFaultCsvData[0] &&
-            fenFaultCsvData[0].data.map((item) => item.count)
+            fenFaultCsvData[0].data.map((item) => Number(item.count))
           "
           :faultDurations="
             fenFaultCsvData &&
             fenFaultCsvData[0] &&
-            fenFaultCsvData[0].data.map((item) => item.fault_time)
+            fenFaultCsvData[0].data.map((item) => Number(item.fault_time))
           "
           :fenFaultCsvData="fenFaultCsvData"
         ></FaultUnit>
         <template v-for="itemCsv in fenFaultCsvData">
           <el-table
             max-height="500"
-            :default-sort="{ prop: 'wind_turbine_name' }"
             :data="filteredFenData(itemCsv)"
+            :default-sort="{ prop: 'count', order: 'descending' }"
             border
             style="width: 100%"
             align="center"
@@ -64,7 +64,14 @@
             </el-table-column>
             <el-table-column prop="count" sortable label="故障次数(次)">
             </el-table-column>
-            <el-table-column prop="fault_time" sortable label="故障时长(秒)">
+            <el-table-column
+              prop="fault_time"
+              sortable
+              label="故障时长(小时)"
+            >
+              <template slot-scope="scope">
+                {{ Number(scope.row.fault_time).toFixed(2) }}
+              </template>
             </el-table-column>
             <el-table-column align="right">
               <template slot="header" slot-scope="scope">
@@ -189,20 +196,6 @@ export default {
   },
   computed: {
     // 根据搜索关键字过滤数据
-    filteredData() {
-      return (itemCsv) => {
-        // 如果有搜索关键词,则过滤数据
-        if (this.search) {
-          return itemCsv.data.filter((item) => {
-            return item.wind_turbine_name
-              .toLowerCase()
-              .includes(this.search.toLowerCase());
-          });
-        }
-        // 没有搜索关键词时返回所有数据
-        return itemCsv.data;
-      };
-    },
     filteredFenData() {
       return (itemCsv) => {
         // 如果有搜索关键词,则过滤数据
@@ -214,6 +207,7 @@ export default {
           });
         }
         // 没有搜索关键词时返回所有数据
+        console.log(itemCsv.data);
         return itemCsv.data;
       };
     },
@@ -296,10 +290,18 @@ export default {
                   ) {
                     //分机型故障统计处理
                     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),
+                        .filter((row) => {
+                          return Object.keys(row).length;
+                        })
+                        .slice(0, result.data.length - 1)
+                        .map((item) => ({
+                          ...item,
+                          count: Number(item.count),
+                          fault_time: Number(item.fault_time) / 3600,
+                        })),
                     });
                   }
                 }

+ 1 - 1
src/views/performance/assetssDetail.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2025-02-26 11:33:43
+ * @LastEditTime: 2025-06-11 09:28:09
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue

+ 3 - 3
src/views/performance/components/chartsCom/FaultAll.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-15 14:24:59
- * @LastEditTime: 2025-05-16 11:14:32
+ * @LastEditTime: 2025-06-11 09:28:37
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultAll.vue
@@ -81,7 +81,7 @@ export default {
         name: "故障时长",
         yaxis: "y2", // 使用第二个 Y 轴(右侧)
         hovertemplate:
-          `故障类型:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟 <br>",
+          `故障类型:` + ` %{x} <br> ` + `故障时长:` + "%{y} 小时 <br>",
       };
 
       // 布局配置,设置双 Y 轴
@@ -115,7 +115,7 @@ export default {
           backgroundcolor: "#e5ecf6",
         },
         yaxis2: {
-          title: "故障时长 (分钟)",
+          title: "故障时长 (小时)",
           titlefont: { color: "#1A295D" },
           tickfont: { color: "#1A295D" },
           overlaying: "y", // 在第一个 Y 轴上方绘制

+ 1 - 209
src/views/performance/components/chartsCom/FaultUnit.vue

@@ -1,134 +1,3 @@
-<!-- <template>
-  <div>
-    <div ref="chart" style="width: 100%; height: 400px"></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: [],
-    }, // 故障时长
-    fenFaultCsvData: {
-      type: Array,
-      default: [],
-    },
-  },
-  watch: {
-    faultCounts: {
-      deep: true,
-      handler(v) {
-        this.renderChart();
-      },
-    },
-  },
-  mounted() {
-    this.renderChart();
-  },
-  methods: {
-    renderChart() {
-      // 故障次数的散点图数据(左侧 Y 轴)
-      const scatterFaultCounts = {
-        x: this.faultTypes.slice(0, 10),
-        y: this.faultCounts.slice(0, 10),
-        mode: "markers", // 散点图
-        marker: { color: "#64ADC2", size: 10 }, // 蓝色散点
-        name: "故障次数",
-        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 = {
-        title: {
-          text: "机组故障次数与时长分析Top10",
-          font: {
-            size: 16,
-            weight: "bold",
-          },
-        },
-        xaxis: {
-          title: "故障机组",
-          tickangle: 30,
-          tickmode: "array",
-          tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
-          ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
-          tickfont: { size: 12 },
-          type: "category", // 让 Y 轴按类别均匀分布
-          // categoryorder: "category ascending", // 按类别字母顺序排列
-          gridcolor: "rgb(255,255,255)",
-          tickcolor: "rgb(255,255,255)",
-          backgroundcolor: "#e5ecf6",
-        },
-        yaxis: {
-          title: "故障次数",
-          titlefont: { color: "#64ADC2" },
-          tickfont: { color: "#64ADC2" },
-          side: "left", // 左侧的 Y 轴
-          showline: true,
-          linecolor: "#64ADC2",
-          gridcolor: "rgb(255,255,255)",
-          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,
-
-        //   // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
-        //   // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
-        //   linecolor: "#1A295D", // 设置右侧轴线颜色
-        // },
-        plot_bgcolor: "#e5ecf6",
-        gridcolor: "#fff",
-        bgcolor: "#e5ecf6", // 设置背景颜色
-        showlegend: false, // 显示图例
-        margin: {
-          t: 80, // 上边距
-          b: 150, // 下边距,给 X 轴标签更多空间
-        },
-      };
-
-      // 渲染图表
-      Plotly.newPlot(this.$refs.chart, [scatterFaultCounts], layout);
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* 你可以根据需要添加样式 */
-</style> -->
-
 <template>
   <div>
     <div ref="chart" style="width: 100%; height: 500px"></div>
@@ -166,89 +35,12 @@ export default {
     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),
+        durationHour: this.faultDurations[i],
       }));
 
       // 步骤 2:按 name 字符串排序

+ 2 - 2
src/views/performance/components/chartsCom/TwoDMarkersChart1.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-04-27 15:23:06
+ * @LastEditTime: 2025-06-11 09:19:56
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -251,7 +251,7 @@ export default {
               tickvals: tickvals, // 设置刻度值
               ticktext: ticktext, // 设置刻度文本
               tickmode: "array", // 使用数组模式
-              tickangle: -45, // 可选:调整刻度文本的角度
+              // tickangle: -45, // 可选:调整刻度文本的角度
             },
             size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
           },

+ 2 - 2
src/views/performance/components/chartsCom/powerMarkers2DCharts.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-04-28 14:16:16
+ * @LastEditTime: 2025-06-11 09:20:53
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -260,7 +260,7 @@ export default {
               tickvals: tickvals, // 设置刻度值
               ticktext: ticktext, // 设置刻度文本
               tickmode: "array", // 使用数组模式
-              tickangle: -45, // 可选:调整刻度文本的角度
+              // tickangle: -45, // 可选:调整刻度文本的角度
             },
             size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
           },