修改有功功率展示问题

src/views/performance/assetssDetail.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2025-01-07 09:08:35
+ * @LastEditTime: 2025-01-10 14:42:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
@@ -60,7 +60,7 @@
               >
                 <el-option
                   v-for="(item, indAns) in analysisTypeList"
-                  :key="item.analysisTypeCode + indAns"
+                  :key="item.analysisTypeCode + indAns + 'analysisTypeList'"
                   :label="item.analysisTypeName"
                   :value="item.analysisTypeCode"
                 ></el-option>
@@ -315,7 +315,15 @@
                 v-if="graphFilesData[0] !== null && graphFilesData.length !== 0"
               >
                 <template v-for="(powerCurveDom, ind) in graphFilesData">
-                  <el-col :span="12">
+                  <el-col
+                    :span="12"
+                    v-if="
+                      powerCurveDom &&
+                      formInfo.fieldEngineCode ===
+                        powerCurveDom.chartsData.formInfoFieldEngineCode &&
+                      powerCurveDom.powerCurveTableData.length > 0
+                    "
+                  >
                     <div class="left">
                       <!-- <el-button
                         @click="
@@ -351,7 +359,12 @@
                     </div>
                   </el-col>
                   <el-col
-                    v-if="formInfo.analysisTypeCode === 'power_curve'"
+                    v-if="
+                      powerCurveDom &&
+                      formInfo.fieldEngineCode ===
+                        powerCurveDom.chartsData.formInfoFieldEngineCode &&
+                      powerCurveDom.powerCurveTableData.length > 0
+                    "
                     :span="12"
                   >
                     <div class="right">
@@ -362,6 +375,7 @@
                       ></PlotlyCharts>
                     </div>
                   </el-col>
+                  <el-empty v-else description="该机组暂无分图"></el-empty>
                 </template>
               </template>
               <template v-if="powerHtmlFenData.length > 0">

src/views/performance/components/EditAnalysis.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2025-01-07 09:08:52
+ * @LastEditTime: 2025-01-10 14:42:42
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
@@ -278,7 +278,14 @@
               v-if="graphFilesData[0] !== null && graphFilesData.length !== 0"
             >
               <template v-for="(powerCurveDom, ind) in graphFilesData">
-                <el-row>
+                <el-row
+                  v-if="
+                    powerCurveDom &&
+                    form.turbines ===
+                      powerCurveDom.chartsData.formInfoFieldEngineCode &&
+                    powerCurveDom.powerCurveTableData.length > 0
+                  "
+                >
                   <el-col
                     v-loading="htmlLoading"
                     v-if="form.configAnalysis === 'power_curve'"
@@ -324,6 +331,7 @@
                     </div>
                   </el-col>
                 </el-row>
+                <el-empty v-else description="该机组暂无分图"></el-empty>
               </template>
             </template>
           </el-col>

src/views/performance/components/PlotlyCharts.vue

@@ -179,52 +179,170 @@ export default {
       Plotly.newPlot(`power-curve-plot${this.inds}`, data, layout);
     },
     //初始化分图
-    //初始化分图
     initializeEngineCharts() {
       const fentuCharts = this.powerCurveData.turbines.filter(
         (item) =>
           item.enginCode === this.lineMarkerData?.formInfoFieldEngineCode ||
           item.enginName === this.lineMarkerData?.formInfoFieldEngineCode
       );
-      const data = [];
-      const layout = {
-        title:
-          fentuCharts[0].enginName ||
-          fentuCharts[0].enginCode + "风机有功功率曲线分析",
-        plot_bgcolor: this.config.lableConfig.plot_bgcolor,
-        xaxis: this.config.lableConfig.xaxis,
-        yaxis: this.config.lableConfig.yaxis,
-        legend: this.config.lableConfig.legend,
-      };
-      this.powerCurveData.turbines.forEach((turbine, index) => {
+      if (fentuCharts[0]?.enginName || fentuCharts[0]?.enginCode) {
+        const highlightedData = [];
+        const nonHighlightedData = [];
+        const layout = {
+          title:
+            fentuCharts[0]?.enginName ||
+            fentuCharts[0]?.enginCode + "风机有功功率曲线分析",
+          plot_bgcolor: this.config.lableConfig.plot_bgcolor,
+          xaxis: this.config.lableConfig.xaxis,
+          yaxis: this.config.lableConfig.yaxis,
+          legend: this.config.lableConfig.legend,
+        };
+        // 先渲染其他的风机数据
+        this.powerCurveData.turbines.forEach((turbine, index) => {
+          const isHighlighted =
+            turbine?.enginCode ===
+              this.lineMarkerData?.formInfoFieldEngineCode ||
+            turbine?.enginName === this.lineMarkerData?.formInfoFieldEngineCode;
+
+          const trace = {
+            x: turbine.xData,
+            y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
+            mode: "lines",
+            name: turbine.enginName,
+            line: {
+              color: isHighlighted ? "#1c77b3" : "#d3d3d3",
+            },
+          };
+
+          if (isHighlighted) {
+            highlightedData.push(trace); // 高亮的线条放入 highlighedData
+          } else {
+            nonHighlightedData.push(trace); // 非高亮的线条放入 nonHighlightedData
+          }
+        });
+        // 先添加非高亮的风机数据
+        const data = [...nonHighlightedData, ...highlightedData]; // 高亮的风机数据最后添加
+        // 添加合同功率曲线
         data.push({
-          x: turbine.xData,
-          y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
-          mode: "lines",
-          name: turbine.enginName,
+          x: this.powerCurveData.contractPowerCurve[0].xData,
+          y: this.powerCurveData.contractPowerCurve[0].yData,
+          mode: "lines+markers",
+          name: this.powerCurveData.contractPowerCurve[0].enginName,
           line: {
-            color:
-              turbine?.enginCode ===
-                this.lineMarkerData?.formInfoFieldEngineCode ||
-              turbine?.enginName ===
-                this.lineMarkerData?.formInfoFieldEngineCode
-                ? "#1c77b3"
-                : "#d3d3d3",
+            color: "red",
           },
         });
-      });
-
-      data.push({
-        x: this.powerCurveData.contractPowerCurve[0].xData,
-        y: this.powerCurveData.contractPowerCurve[0].yData,
-        mode: "lines+markers",
-        name: this.powerCurveData.contractPowerCurve[0].enginName,
-        line: {
-          color: "red",
-        },
-      });
-      Plotly.newPlot(`chart-${this.inds}`, data, layout);
+        Plotly.newPlot(`chart-${this.inds}`, data, layout);
+      }
     },
+
+    // initializeEngineCharts() {
+    //   console.log(this.lineMarkerData, "enginName");
+    //   const fentuCharts = this.powerCurveData.turbines.filter(
+    //     (item) =>
+    //       item.enginCode === this.lineMarkerData?.formInfoFieldEngineCode ||
+    //       item.enginName === this.lineMarkerData?.formInfoFieldEngineCode
+    //   );
+    //   const data = [];
+    //   const layout = {
+    //     title:
+    //       fentuCharts[0]?.enginName ||
+    //       fentuCharts[0]?.enginCode + "风机有功功率曲线分析",
+    //     plot_bgcolor: this.config.lableConfig.plot_bgcolor,
+    //     xaxis: this.config.lableConfig.xaxis,
+    //     yaxis: this.config.lableConfig.yaxis,
+    //     legend: this.config.lableConfig.legend,
+    //   };
+
+    //   // 先渲染其他的风机数据
+    //   this.powerCurveData.turbines.forEach((turbine, index) => {
+    //     const isHighlighted =
+    //       turbine?.enginCode === this.lineMarkerData?.formInfoFieldEngineCode ||
+    //       turbine?.enginName === this.lineMarkerData?.formInfoFieldEngineCode;
+
+    //     // 这里将高亮的风机与其他风机分开
+    //     data.push({
+    //       x: turbine.xData,
+    //       y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
+    //       mode: "lines",
+    //       name: turbine.enginName,
+    //       line: {
+    //         color: isHighlighted ? "#1c77b3" : "#d3d3d3", // 高亮的线条使用指定颜色
+    //       },
+    //     });
+    //   });
+
+    //   // 将高亮的风机放在最后，确保它显示在其他线条上面
+    //   const highlightedData = data.filter(
+    //     (item) => item.line.color === "#1c77b3"
+    //   );
+    //   const nonHighlightedData = data.filter(
+    //     (item) => item.line.color !== "#1c77b3"
+    //   );
+
+    //   // 把高亮的线条放在数据的最后
+    //   data.length = 0;
+    //   data.push(...nonHighlightedData, ...highlightedData); // 将非高亮的线条先添加，最后添加高亮线条
+
+    //   // 添加合同功率曲线
+    //   data.push({
+    //     x: this.powerCurveData.contractPowerCurve[0].xData,
+    //     y: this.powerCurveData.contractPowerCurve[0].yData,
+    //     mode: "lines+markers",
+    //     name: this.powerCurveData.contractPowerCurve[0].enginName,
+    //     line: {
+    //       color: "red",
+    //     },
+    //   });
+
+    //   Plotly.newPlot(`chart-${this.inds}`, data, layout);
+    // },
+
+    // initializeEngineCharts() {
+    //   console.log(this.lineMarkerData, "enginName");
+    //   const fentuCharts = this.powerCurveData.turbines.filter(
+    //     (item) =>
+    //       item.enginCode === this.lineMarkerData?.formInfoFieldEngineCode ||
+    //       item.enginName === this.lineMarkerData?.formInfoFieldEngineCode
+    //   );
+    //   const data = [];
+    //   const layout = {
+    //     title:
+    //       fentuCharts[0]?.enginName ||
+    //       fentuCharts[0]?.enginCode + "风机有功功率曲线分析",
+    //     plot_bgcolor: this.config.lableConfig.plot_bgcolor,
+    //     xaxis: this.config.lableConfig.xaxis,
+    //     yaxis: this.config.lableConfig.yaxis,
+    //     legend: this.config.lableConfig.legend,
+    //   };
+    //   this.powerCurveData.turbines.forEach((turbine, index) => {
+    //     const isHighlighted =
+    //       turbine?.enginCode === this.lineMarkerData?.formInfoFieldEngineCode ||
+    //       turbine?.enginName === this.lineMarkerData?.formInfoFieldEngineCode;
+
+    //     data.push({
+    //       x: turbine.xData,
+    //       y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
+    //       mode: "lines",
+    //       name: turbine.enginName,
+    //       line: {
+    //         color: isHighlighted ? "#1c77b3" : "#d3d3d3", // 如果是高亮的线条，设置为指定颜色
+    //         // 使用 layer 属性来控制堆叠顺序
+    //         layer: isHighlighted ? "above traces" : "below traces", // 高亮线条显示在其他线条上面
+    //       },
+    //     });
+    //   });
+    //   data.push({
+    //     x: this.powerCurveData.contractPowerCurve[0].xData,
+    //     y: this.powerCurveData.contractPowerCurve[0].yData,
+    //     mode: "lines+markers",
+    //     name: this.powerCurveData.contractPowerCurve[0].enginName,
+    //     line: {
+    //       color: "red",
+    //     },
+    //   });
+    //   Plotly.newPlot(`chart-${this.inds}`, data, layout);
+    // },
   },
 };
 </script>

src/views/performance/components/analysisEvent.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2025-01-07 11:06:17
+ * @LastEditTime: 2025-01-10 11:15:52
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
@@ -53,8 +53,8 @@
                     >全选</el-checkbox
                   >
                   <el-option
-                    v-for="item in analysisTypeList"
-                    :key="item.typeCode"
+                    v-for="(item, indsanal) in analysisTypeList"
+                    :key="item.typeCode + indsanal + 'analysisTypeList'"
                     :label="item.typeName"
                     :value="item.typeCode"
                   ></el-option>
@@ -100,8 +100,8 @@
                   @change="handleScada"
                 >
                   <el-option
-                    v-for="TranItem in transferTypeData"
-                    :key="TranItem.transferType"
+                    v-for="(TranItem, indTran) in transferTypeData"
+                    :key="TranItem.transferType + TranItem + 'transferTypeData'"
                     :label="TranItem.transferTypeName"
                     :value="TranItem.transferType"
                   ></el-option>