联调有功功率数据,json 正确展示

src/components/map/index.vue

@@ -196,8 +196,8 @@ export default {
         new TileLayer({
           source: new XYZ({
             // url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //本地
-            // url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
-            url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
+            url: "http://192.168.50.235/tiles/{z}/{x}/{y}.png", //内网
+            // url: "http://106.120.102.238:18000/tiles/{z}/{x}/{y}.png", //外网
             //  url: "http://10.96.137.5:9080/tiles/{z}/{x}/{y}.png",
           }),
         }),

src/utils/common.js

@@ -353,6 +353,25 @@ export const creatNewChartsJson = (selectedPoints, fullLayout) => {
   return { newPlotlyData, layout };
 };
 
+export const downLoadCsvFile = (csvContent, fileName) => {
+  // 创建 Blob 对象
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+
+  // 创建下载链接
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.setAttribute("href", url);
+  link.setAttribute("download", `${fileName}.csv`);
+  link.style.visibility = "hidden";
+
+  // 将链接添加到 DOM 并触发点击事件
+  document.body.appendChild(link);
+  link.click();
+
+  // 清除 URL 和移除链接
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
 export default {
   uuid,
   copy,
@@ -369,4 +388,5 @@ export default {
   formatDate,
   downLoadChartsJsonFile,
   creatNewChartsJson,
+  downLoadCsvFile,
 };

src/views/performance/assetssDetail.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2024-09-18 14:11:16
- * @LastEditors: bogon
+ * @LastEditTime: 2024-09-23 09:13:06
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
 -->
@@ -118,47 +118,87 @@
             </span>
           </div>
           <el-row class="assetssConent">
-            <!-- :span="getSpan(index, 'generalFiles')" -->
-            <!-- v-loading="
-              loadings[index + generalFiles.length] &&
-              getFileType(file.fileAddr) === 'html'
-            " -->
-            <template v-if="formInfo.analysisTypeCode === 'power_curve'">
-              <template v-for="(powerCurveDom, ind) in generalFilesData">
-                <el-col :span="12">
-                  <div class="left">
-                    <el-table
-                      :data="
-                        powerCurveDom && powerCurveDom.powerCurveTableData[0]
-                      "
-                      border
-                      max-height="550"
-                      style="width: 100%"
-                      align="center"
-                    >
-                      <el-table-column prop="enginName" label="风机名称">
-                      </el-table-column>
-                      <el-table-column prop="engineTypeName" label="风机机型">
-                      </el-table-column>
-                      <el-table-column prop="xData" label="风速">
-                      </el-table-column>
-                      <el-table-column prop="yData" label="合同功率">
-                      </el-table-column>
-                      <el-table-column
-                        prop="contractPowerCurve"
-                        label="实际功率"
+            <template
+              v-if="
+                formInfo.analysisTypeCode === 'power_curve' &&
+                (generalFilesData.length > 0 || powerHtmlZongData.length > 0)
+              "
+            >
+              <template
+                v-if="
+                  generalFilesData[0] !== null && generalFilesData.length !== 0
+                "
+              >
+                <template
+                  v-for="(powerCurveDom, ind) in generalFilesData"
+                  :style="{ marginTop: '50px' }"
+                >
+                  <el-col :span="12">
+                    <div class="left">
+                      <el-button
+                        @click="
+                          downLoadCsv(
+                            powerCurveDom && powerCurveDom.powerCurveTableData
+                          )
+                        "
+                        >导出表格数据</el-button
                       >
-                      </el-table-column>
-                    </el-table>
-                  </div>
-                </el-col>
-                <el-col :span="12">
-                  <div class="right">
-                    <PlotlyCharts
-                      :lineMarkerData="powerCurveDom.chartsData"
-                      :comType="'generalDrawing'"
-                    ></PlotlyCharts>
-                  </div>
+                      <el-table
+                        :data="
+                          powerCurveDom && powerCurveDom.powerCurveTableData
+                        "
+                        border
+                        max-height="550"
+                        style="width: 100%"
+                        align="center"
+                      >
+                        <el-table-column prop="enginName" label="风机名称">
+                        </el-table-column>
+                        <el-table-column prop="engineTypeName" label="风机机型">
+                        </el-table-column>
+                        <el-table-column prop="xData" label="风速">
+                        </el-table-column>
+                        <el-table-column prop="yData" label="合同功率">
+                        </el-table-column>
+                        <el-table-column
+                          prop="contractPowerCurve"
+                          label="实际功率"
+                        >
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </el-col>
+                  <el-col :span="12">
+                    <div class="right">
+                      <PlotlyCharts
+                        :lineMarkerData="powerCurveDom.chartsData"
+                        :comType="'generalDrawing'"
+                      ></PlotlyCharts>
+                    </div>
+                  </el-col>
+                </template>
+              </template>
+              <template v-if="powerHtmlZongData.length > 0">
+                <el-col
+                  v-for="(file, index) in powerHtmlZongData"
+                  :key="index + file.fileAddr + file.createTime"
+                  :span="24"
+                  class="col_content"
+                  :style="{
+                    marginTop: '50px',
+                    display:
+                      getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
+                  }"
+                >
+                  <iframe
+                    v-if="getFileType(file.fileAddr) === 'html'"
+                    :src="file.fileAddr"
+                    :ref="'iframe' + index"
+                    frameborder="0"
+                    @load="iframeLoad(index + powerHtmlZongData.length)"
+                    width="100%"
+                    height="100%"
+                  ></iframe>
                 </el-col>
               </template>
             </template>
@@ -196,19 +236,87 @@
             </span>
           </div>
           <el-row class="assetssConent">
-            <el-col
-              :span="24"
+            <template
               v-if="
                 formInfo.analysisTypeCode === 'power_curve' &&
-                generalFiles.length > 0 &&
-                graphChartData.data
+                generalFiles.length > 0
               "
             >
-              <PlotlyCharts
-                :lineMarkerData="graphChartData"
-                :comType="'graph'"
-              ></PlotlyCharts>
-            </el-col>
+              <template
+                v-if="graphFilesData[0] !== null && graphFilesData.length !== 0"
+              >
+                <template v-for="(powerCurveDom, ind) in graphFilesData">
+                  <el-col :span="12">
+                    <div class="left">
+                      <!-- <el-button
+                        @click="
+                          downLoadCsv(
+                            powerCurveDom && powerCurveDom.powerCurveTableData
+                          )
+                        "
+                        >导出表格数据</el-button
+                      > -->
+                      <el-table
+                        :data="
+                          powerCurveDom && powerCurveDom.powerCurveTableData
+                        "
+                        border
+                        max-height="550"
+                        style="width: 100%"
+                        align="center"
+                      >
+                        <el-table-column prop="enginName" label="风机名称">
+                        </el-table-column>
+                        <el-table-column prop="engineTypeName" label="风机机型">
+                        </el-table-column>
+                        <el-table-column prop="xData" label="风速">
+                        </el-table-column>
+                        <el-table-column prop="yData" label="合同功率">
+                        </el-table-column>
+                        <el-table-column
+                          prop="contractPowerCurve"
+                          label="实际功率"
+                        >
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </el-col>
+                  <el-col
+                    v-if="formInfo.analysisTypeCode === 'power_curve'"
+                    :span="12"
+                  >
+                    <div class="right">
+                      <PlotlyCharts
+                        :lineMarkerData="powerCurveDom.chartsData"
+                        :comType="'graph'"
+                      ></PlotlyCharts>
+                    </div>
+                  </el-col>
+                </template>
+              </template>
+              <template v-if="powerHtmlFenData.length > 0">
+                <el-col
+                  v-for="(file, index) in powerHtmlFenData"
+                  :key="index + file.fileAddr + file.createTime"
+                  :span="24"
+                  class="col_content"
+                  :style="{
+                    display:
+                      getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
+                  }"
+                >
+                  <iframe
+                    v-if="getFileType(file.fileAddr) === 'html'"
+                    :src="file.fileAddr"
+                    :ref="'iframe' + index"
+                    frameborder="0"
+                    @load="iframeLoad(index + powerHtmlFenData.length)"
+                    width="100%"
+                    height="100%"
+                  ></iframe>
+                </el-col>
+              </template>
+            </template>
             <template v-else>
               <el-col
                 v-for="(file, index) in diagramRelations"
@@ -264,6 +372,7 @@ import CreateNewChart from "./createNewChart.vue";
 import DetailCharts from "./components/DetailCharts.vue";
 import JsonMarkerCharts from "./components/JsonMarkerCharts.vue";
 import PlotlyCharts from "./components/PlotlyCharts.vue";
+import { downLoadCsvFile } from "@/utils/common";
 import { saveAs } from "file-saver";
 import JSZip from "jszip";
 import Papa from "papaparse";
@@ -293,6 +402,9 @@ export default {
       csvHeaders: [], // CSV 表头
       generalFilesData: [],
       graphChartData: {},
+      graphFilesData: [],
+      powerHtmlZongData: [],
+      powerHtmlFenData: [],
     };
   },
   created() {
@@ -359,13 +471,12 @@ export default {
           console.error(`下载文件 ${data[i]} 时发生错误:`, error);
         }
       }
-
       // 生成 ZIP 文件并下载
       zip
         .generateAsync({ type: "blob" })
         .then((content) => {
           saveAs(content, "Downloaded_Files.zip");
-          console.log("所有文件已打包并下载成功");
+          // console.log("所有文件已打包并下载成功");
         })
         .catch((error) => {
           console.error("生成 ZIP 文件时发生错误:", error);
@@ -447,68 +558,120 @@ export default {
         //有功功率的数据处理
         // 有功功率的数据处理
         if (this.formInfo.analysisTypeCode === "power_curve") {
-          const generalFiles = response.data[0].generalFiles || [];
-          this.generalFilesData = await Promise.all(
-            generalFiles.map(async (item, ind) => {
-              const types = this.getFileType(item.fileAddr);
-              if (types !== "html" && types !== "image") {
-                try {
-                  const resultChartsData = await axios.get(item.fileAddr);
-                  // 更新表格数据
+          try {
+            const generalFiles = response.data[0]?.generalFiles || [];
 
-                  return {
-                    chartsData: {
-                      ...resultChartsData.data,
-                    },
-                    powerCurveTableData: this.creatPowerCurveTableData(
-                      resultChartsData.data
-                    )
-                      .filter((val) => val !== undefined)
-                      .filter(
-                        (item) =>
-                          item[0].enginName === this.formInfo.fieldEngineCode
-                      ),
-                  };
-                } catch (error) {
-                  console.error("Error fetching chart data:", error);
-                  return null; // 如果有错误，返回 null
-                }
-              }
-              // 确保返回一个空对象来替代 undefined
-              return null;
-            })
-          );
-          console.log(this.generalFilesData, "this.generalFilesData");
-          // 过滤掉 null 或者没有 chartsData 的项
-          this.generalFilesData = this.generalFilesData.filter(
-            (item) => item && item.chartsData
-          );
-
-          if (
-            this.generalFilesData.length > 0 &&
-            this.generalFilesData[0].chartsData
-          ) {
-            const grapgFilterData =
-              this.generalFilesData[0].chartsData.data.filter(
-                (item) =>
-                  item.enginName === "合同功率曲线" ||
-                  item.enginName === this.formInfo.fieldEngineCode
-              );
-            this.graphChartData = {
-              ...this.generalFilesData[0].chartsData,
-              data: grapgFilterData,
-            };
-          } else {
-            // 如果没有数据，设置为 null 或其他默认值
-            this.graphChartData = null;
+            this.powerHtmlZongData = [];
+            this.powerHtmlFenData = [];
+            this.generalFilesData = [];
+            this.graphFilesData = [];
+            const generalFilesData = await this.filterJsonData(
+              generalFiles,
+              "总图"
+            );
+            //分图数据
+            const graphChartData = await this.filterJsonData(
+              response.data[0].diagramRelations,
+              "分图"
+            );
+            // 过滤掉 null 或没有 chartsData 的项
+            this.generalFilesData = generalFilesData.filter(
+              (item) => item && item.chartsData
+            );
+            this.graphFilesData = graphChartData.filter(
+              (item) => item && item.chartsData
+            );
+            // // 这是处理分图数据的逻辑如果有数据，处理并设置图表数据
+            // if (
+            //   this.generalFilesData.length > 0 &&
+            //   this.generalFilesData[0]?.chartsData?.data
+            // ) {
+            //   //总图数据
+            //   const grapgFilterData =
+            //     this.generalFilesData[0].chartsData.data.filter(
+            //       (item) =>
+            //         item.enginName === "合同功率曲线" ||
+            //         item.enginName === this.formInfo.fieldEngineCode
+            //     );
+            //   //分图数据
+            //   this.graphChartData = {
+            //     oldData: this.generalFilesData[0].chartsData.data,
+            //     ...this.generalFilesData[0].chartsData,
+            //     data: grapgFilterData,
+            //     formInfoFieldEngineCode: this.formInfo.fieldEngineCode,
+            //   };
+            // } else {
+            //   // 如果没有数据，设置为 null 或其他默认值
+            //   this.graphChartData = null;
+            // }
+          } catch (error) {
+            console.error("Error processing power curve data:", error);
+            this.graphChartData = null; // 处理错误时设置默认值
+          } finally {
+            this.loading = false; // 确保在所有情况下都设置 loading 状态
           }
+        } else {
+          this.loading = false;
         }
-        this.loading = false;
       } catch (error) {
         console.error(error);
         this.loading = false;
       }
     },
+    //有功功率数据处理
+    async filterJsonData(generalFiles, type) {
+      return Promise.all(
+        generalFiles.map(async (item, ind) => {
+          const types = this.getFileType(item.fileAddr);
+          if (types !== "html" && types !== "image") {
+            //就是json 数据
+            try {
+              const resultChartsData = await axios.get(item.fileAddr);
+
+              // 更新表格数据
+              if (type === "总图") {
+                return {
+                  chartsData: {
+                    ...resultChartsData.data,
+                  },
+                  powerCurveTableData: this.creatPowerCurveTableData(
+                    resultChartsData.data
+                  ).filter((val) => val !== undefined),
+                };
+              } else if (type === "分图") {
+                return {
+                  chartsData: {
+                    ...resultChartsData.data,
+
+                    formInfoFieldEngineCode: this.formInfo.fieldEngineCode,
+                  },
+                  powerCurveTableData: this.creatPowerCurveTableData(
+                    resultChartsData.data
+                  )
+                    .filter((val) => val !== undefined)
+                    .filter(
+                      (item) =>
+                        item?.enginName === this.formInfo.fieldEngineCode ||
+                        item?.enginCode === this.formInfo.fieldEngineCode
+                    ),
+                };
+              }
+            } catch (error) {
+              console.error("Error fetching chart data:", error);
+              return null; // 如果有错误，返回 null
+            }
+          } else {
+            if (type === "总图") {
+              this.powerHtmlZongData.push(item);
+            } else if (type === "分图") {
+              this.powerHtmlFenData.push(item);
+            }
+            //html 展示
+            return null; // 返回 null 以确保没有 undefined
+          }
+        })
+      );
+    },
     creatPowerCurveTableData(data) {
       // 风机名称\风机机型\风速\合同功率\实际功率
       // xData--风速
@@ -534,6 +697,7 @@ export default {
                     item.yData[childInd] !== null ? item.yData[childInd] : 0.0,
                   contractPowerCurve: contractPowerCurve[0].yData[childInd],
                   enginName: item.enginName,
+                  enginCode: item.enginCode,
                   engineTypeName: data.engineTypeName,
                 };
               }
@@ -543,7 +707,7 @@ export default {
           }
         });
 
-      return powerCurveTableData;
+      return powerCurveTableData.flat();
     },
     getCsvData(url) {
       // 使用 axios 获取 CSV 文件
@@ -572,6 +736,28 @@ export default {
           console.error("无法获取 CSV 文件：", error);
         });
     },
+    downLoadCsv(tableDatas) {
+      const headers = ["风机名称", "风机机型", "风速", "合同功率", "实际功率"]; // CSV 文件的标题
+      const data = tableDatas.map((item) => {
+        return [
+          item.enginName,
+          item.engineTypeName,
+          item.xData,
+          item.yData,
+          item.contractPowerCurve,
+        ];
+      });
+      // 将标题和数据组合成 CSV 格式
+      const csvContent = [
+        headers.join(","),
+        ...data.map((row) => row.join(",")),
+      ].join("\n");
+      const fileName = this.windEngineGroupList.filter(
+        (item) => item.engineCode === this.formInfo.fieldEngineCode
+      );
+      downLoadCsvFile(csvContent, "风机有功功率数据");
+      // downLoadCsvFile(csvContent, fileName[0].engineName);
+    },
     async getWindCodeList() {
       this.loading = true;
       try {

src/views/performance/assetssMag.vue

@@ -169,6 +169,22 @@
         >
         </el-table-column>
         <el-table-column
+          prop="errState"
+          align="center"
+          label="报告"
+          min-width="120"
+        >
+          <template slot-scope="scope">
+            <span>
+              {{
+                scope.row.errState == 0 && scope.row.analysisState !== -1
+                  ? "查看报告"
+                  : "/"
+              }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
           prop="transition"
           align="center"
           fixed="right"
@@ -177,6 +193,12 @@
         >
           <template slot-scope="scope">
             <el-button
+              @click="upLoadeAssetss(scope.row)"
+              type="text"
+              size="small"
+              >上传报告</el-button
+            >
+            <el-button
               @click="handleAssetss(scope.row)"
               type="text"
               size="small"
@@ -261,6 +283,7 @@ export default {
     this.getTableList();
   },
   methods: {
+    upLoadeAssetss(row) {},
     async HandleOnOffAuto(row) {
       try {
         const form = new FormData();

src/views/performance/batchMag.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:23:37
- * @LastEditTime: 2024-07-15 11:31:41
+ * @LastEditTime: 2024-09-18 17:04:20
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/batchMag.vue
@@ -29,7 +29,7 @@
             <el-option label="停用" value="0"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="分析时间">
+        <el-form-item label="创建时间">
           <el-date-picker
             size="small"
             v-model="formInline.picker"

src/views/performance/components/EditAnalysis.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2024-09-18 14:11:06
+ * @LastEditTime: 2024-09-20 14:46:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
@@ -65,52 +65,8 @@
       description="暂无分析任何数据,无法进行手动分析描述"
     ></el-empty>
     <el-card v-if="!noData" shadow="always" class="box-card">
-      <el-row>
+      <el-row class="assetssConent">
         <!-- {{ generalFilesData }} -->
-        <template v-for="(powerCurveDom, ind) in generalFilesData">
-          <el-col
-            :span="12"
-            v-if="
-              form.configAnalysis === 'power_curve'
-              // ||
-              // form.configAnalysis === 'cp'
-            "
-            ><div class="left">
-              <el-button>导出csv文件</el-button>
-
-              <el-table
-                :data="powerCurveDom && powerCurveDom.powerCurveTableData[0]"
-                border
-                max-height="550"
-                style="width: 100%"
-                align="center"
-              >
-                <el-table-column prop="enginName" label="风机名称">
-                </el-table-column>
-                <el-table-column prop="engineTypeName" label="风机机型">
-                </el-table-column>
-                <el-table-column prop="xData" label="风速"> </el-table-column>
-                <el-table-column prop="yData" label="合同功率">
-                </el-table-column>
-                <el-table-column prop="contractPowerCurve" label="实际功率">
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-col>
-          <el-col
-            v-loading="htmlLoading"
-            v-if="form.configAnalysis === 'power_curve'"
-            :span="12"
-          >
-            <div class="right">
-              <PlotlyCharts
-                :lineMarkerData="powerCurveDom.chartsData"
-                :comType="'generalDrawing'"
-              ></PlotlyCharts>
-            </div>
-          </el-col>
-        </template>
-
         <el-col
           :span="24"
           v-if="form.configAnalysis === 'yaw_error' && this.csvData.length > 0"
@@ -196,103 +152,320 @@
         </el-col>
 
         <!-- 其他类型展示的 图表 ，只展示图表不必要展示表格 -->
-        <!-- <el-col v-loading="htmlLoading" v-else :span="24">
-          <div class="right">
-            <PlotlyCharts></PlotlyCharts>
-          </div>
-        </el-col> -->
-        <el-col
-          :span="12"
-          v-if="
-            form.configAnalysis !== 'yaw_error' &&
-            form.configAnalysis !== 'power_curve'
-          "
-          ><div class="left">
-            <div>
-              <span>机组名称：</span>
-              <el-select
-                v-model="engineCode"
-                placeholder="请选择机组名称"
-                size="small"
-                clearable
-                @change="handleEngineCode"
-              >
-                <el-option
-                  v-for="(item, indWind) in windEngineGroupList"
-                  :key="item.engineCode + indWind"
-                  :label="item.engineName"
-                  :value="item.engineCode"
-                ></el-option>
-              </el-select>
-            </div>
-            <div>
-              1.额定容量：{{
-                windDetail.ratedCapacity ? windDetail.ratedCapacity : 0
-              }}
-              <span> (kW)</span>
-            </div>
-            <div>2.风机编号:{{ windDetail.engineCode }}</div>
-            <div>3.经度（Longitude）：{{ windDetail.longitude }}</div>
-            <div>4.维度（Dimensionality）：{{ windDetail.latitude }}</div>
-            <div>
-              5.海拔高度（Altitude）：{{
-                windDetail.elevationHeight ? windDetail.elevationHeight : 0
-              }}
-              <span>(米)</span>
-            </div>
-            <div>6.风机名称：{{ windDetail.engineName }}</div>
-            <div>
-              7.是否标杆（Benchmarking or not）：{{
-                windDetail.sightcing == 1 ? "是" : "否"
-              }}
-            </div>
-            <div>8.风场编号：{{ windDetail.fieldCode }}</div>
-            <div>
-              9.轮毂高度：{{ windDetail.hubHeight ? windDetail.hubHeight : 0 }}
-              <span>(米)</span>
+
+        <template v-if="form.configAnalysis === 'power_curve'">
+          <el-col :span="24">
+            <div
+              style="font-weight: 700; font-size: 16px"
+              v-if="generalFilesData.length > 0 || powerHtmlZongData.length > 0"
+            >
+              分析总图:
             </div>
-            <div>10.机型编号：{{ windDetail.millTypeCode }}</div>
-            <div>
-              11.切入风速：{{
-                windDetail.ratedCutInWindspeed
-                  ? windDetail.ratedCutInWindspeed
-                  : 0
-              }}<span>(m/s)</span>
+          </el-col>
+          <template
+            v-if="generalFilesData[0] !== null && generalFilesData.length !== 0"
+          >
+            <template v-for="(powerCurveDom, ind) in generalFilesData">
+              <el-col
+                :span="12"
+                v-if="
+                  form.configAnalysis === 'power_curve'
+                  // ||
+                  // form.configAnalysis === 'cp'
+                "
+                ><div class="left">
+                  <el-button
+                    @click="
+                      downLoadCsv(
+                        powerCurveDom && powerCurveDom.powerCurveTableData
+                      )
+                    "
+                    >导出表格数据</el-button
+                  >
+
+                  <el-table
+                    :data="powerCurveDom && powerCurveDom.powerCurveTableData"
+                    border
+                    max-height="550"
+                    style="width: 100%"
+                    align="center"
+                  >
+                    <el-table-column prop="enginName" label="风机名称">
+                    </el-table-column>
+                    <el-table-column prop="engineTypeName" label="风机机型">
+                    </el-table-column>
+                    <el-table-column prop="xData" label="风速">
+                    </el-table-column>
+                    <el-table-column prop="yData" label="合同功率">
+                    </el-table-column>
+                    <el-table-column prop="contractPowerCurve" label="实际功率">
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </el-col>
+              <el-col
+                v-loading="htmlLoading"
+                v-if="form.configAnalysis === 'power_curve'"
+                :span="12"
+              >
+                <div class="right">
+                  <PlotlyCharts
+                    :lineMarkerData="powerCurveDom.chartsData"
+                    :comType="'generalDrawing'"
+                  ></PlotlyCharts>
+                </div>
+              </el-col>
+            </template>
+          </template>
+          <template v-if="powerHtmlZongData.length > 0">
+            <el-col
+              v-for="(file, index) in powerHtmlZongData"
+              :key="index + file.fileAddr + file.createTime"
+              :span="24"
+              class="col_content"
+              :style="{
+                display:
+                  getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
+              }"
+            >
+              <iframe
+                v-if="getFileType(file.fileAddr) === 'html'"
+                :src="file.fileAddr"
+                :ref="'iframe' + index"
+                frameborder="0"
+                @load="iframeLoad(index + powerHtmlZongData.length)"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </el-col>
+          </template>
+          <el-col :span="24">
+            <div
+              style="font-weight: 700; font-size: 16px"
+              v-if="graphFilesData.length > 0 || powerHtmlFenData.length > 0"
+            >
+              分析分图:
             </div>
-            <div>
-              12.切出风速：{{
-                windDetail.ratedCutOutWindspeed
-                  ? windDetail.ratedCutOutWindspeed
-                  : 0
-              }}<span>(m/s)</span>
+          </el-col>
+          <template
+            v-if="graphFilesData[0] !== null && graphFilesData.length !== 0"
+          >
+            <template v-for="(powerCurveDom, ind) in graphFilesData">
+              <el-col
+                v-loading="htmlLoading"
+                v-if="form.configAnalysis === 'power_curve'"
+                :span="12"
+              >
+                <div class="left">
+                  <el-table
+                    :data="powerCurveDom && powerCurveDom.powerCurveTableData"
+                    border
+                    max-height="550"
+                    style="width: 100%"
+                    align="center"
+                  >
+                    <el-table-column prop="enginName" label="风机名称">
+                    </el-table-column>
+                    <el-table-column prop="engineTypeName" label="风机机型">
+                    </el-table-column>
+                    <el-table-column prop="xData" label="风速">
+                    </el-table-column>
+                    <el-table-column prop="yData" label="合同功率">
+                    </el-table-column>
+                    <el-table-column prop="contractPowerCurve" label="实际功率">
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </el-col>
+              <el-col
+                v-loading="htmlLoading"
+                v-if="form.configAnalysis === 'power_curve'"
+                :span="12"
+              >
+                <div class="right">
+                  <PlotlyCharts
+                    :lineMarkerData="powerCurveDom.chartsData"
+                    :comType="'graph'"
+                  ></PlotlyCharts>
+                </div>
+              </el-col>
+            </template>
+          </template>
+          <template v-if="powerHtmlFenData.length > 0">
+            <el-col
+              v-for="(file, index) in powerHtmlFenData"
+              :key="index + file.fileAddr + file.createTime"
+              :span="24"
+              class="col_content"
+              :style="{
+                display:
+                  getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
+              }"
+            >
+              <iframe
+                v-if="getFileType(file.fileAddr) === 'html'"
+                :src="file.fileAddr"
+                :ref="'iframe' + index"
+                frameborder="0"
+                @load="iframeLoad(index + powerHtmlFenData.length)"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </el-col>
+          </template>
+        </template>
+        <template v-else>
+          <!-- <el-col :span="24" v-if="form.configAnalysis !== 'yaw_error'"> -->
+          <!-- <div class="left">
+              <div>
+                <span>机组名称：</span>
+                <el-select
+                  v-model="engineCode"
+                  placeholder="请选择机组名称"
+                  size="small"
+                  clearable
+                  @change="handleEngineCode"
+                >
+                  <el-option
+                    v-for="(item, indWind) in windEngineGroupList"
+                    :key="item.engineCode + indWind"
+                    :label="item.engineName"
+                    :value="item.engineCode"
+                  ></el-option>
+                </el-select>
+              </div>
+              <div>
+                1.额定容量：{{
+                  windDetail.ratedCapacity ? windDetail.ratedCapacity : 0
+                }}
+                <span> (kW)</span>
+              </div>
+              <div>2.风机编号:{{ windDetail.engineCode }}</div>
+              <div>3.经度（Longitude）：{{ windDetail.longitude }}</div>
+              <div>4.维度（Dimensionality）：{{ windDetail.latitude }}</div>
+              <div>
+                5.海拔高度（Altitude）：{{
+                  windDetail.elevationHeight ? windDetail.elevationHeight : 0
+                }}
+                <span>(米)</span>
+              </div>
+              <div>6.风机名称：{{ windDetail.engineName }}</div>
+              <div>
+                7.是否标杆（Benchmarking or not）：{{
+                  windDetail.sightcing == 1 ? "是" : "否"
+                }}
+              </div>
+              <div>8.风场编号：{{ windDetail.fieldCode }}</div>
+              <div>
+                9.轮毂高度：{{
+                  windDetail.hubHeight ? windDetail.hubHeight : 0
+                }}
+                <span>(米)</span>
+              </div>
+              <div>10.机型编号：{{ windDetail.millTypeCode }}</div>
+              <div>
+                11.切入风速：{{
+                  windDetail.ratedCutInWindspeed
+                    ? windDetail.ratedCutInWindspeed
+                    : 0
+                }}<span>(m/s)</span>
+              </div>
+              <div>
+                12.切出风速：{{
+                  windDetail.ratedCutOutWindspeed
+                    ? windDetail.ratedCutOutWindspeed
+                    : 0
+                }}<span>(m/s)</span>
+              </div>
+            </div> -->
+          <!-- </el-col> -->
+          <template
+            v-if="
+              form.configAnalysis !== 'yaw_error' &&
+              form.configAnalysis !== 'power_curve'
+            "
+          >
+            <el-col :span="24">
+              <div
+                style="font-weight: 700; font-size: 16px"
+                v-if="generalFiles.length > 0"
+              >
+                分析总图:
+              </div>
+            </el-col>
+            <el-col
+              v-for="(file, index) in generalFiles"
+              :key="index + file.fileAddr + file.createTime"
+              :span="24"
+              class="col_content"
+              :style="{
+                display:
+                  getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
+              }"
+            >
+              <iframe
+                v-if="getFileType(file.fileAddr) === 'html'"
+                :src="file.fileAddr"
+                :ref="'iframe' + index"
+                frameborder="0"
+                @load="iframeLoad(index + generalFiles.length)"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </el-col>
+            <el-col :span="24">
+              <div
+                style="font-weight: 700; font-size: 16px"
+                v-if="diagramRelations.length > 0"
+              >
+                分析分图:
+              </div>
+            </el-col>
+            <el-col
+              v-for="(file, index) in diagramRelations"
+              :key="index + file.fileAddr + file.createTime"
+              :span="24"
+              :style="{
+                display:
+                  getFileType(file.fileAddr) === 'html' ? 'block' : 'none',
+              }"
+              class="col_content"
+            >
+              <iframe
+                v-if="getFileType(file.fileAddr) === 'html'"
+                :src="file.fileAddr"
+                :ref="'iframe' + index + diagramRelations.length"
+                frameborder="0"
+                width="100%"
+                height="100%"
+                @load="iframeLoad(index + diagramRelations.length)"
+              ></iframe>
+            </el-col>
+          </template>
+
+          <!-- <el-col
+            :span="12"
+            v-loading="htmlLoading"
+            v-if="form.configAnalysis !== 'yaw_error'"
+          >
+            <div class="right">
+              <iframe
+                v-if="htmlLoading"
+                :src="windDetail.elevationHeight"
+                frameborder="0"
+                @load="iframeLoad"
+                width="100%"
+                height="100%"
+              ></iframe>
+              <img
+                v-else
+                style="width: 100%"
+                src="../../../assets/img/loadingError.webp"
+                alt=""
+              />
             </div>
-          </div>
-        </el-col>
-        <el-col
-          :span="12"
-          v-loading="htmlLoading"
-          v-if="
-            form.configAnalysis !== 'yaw_error' &&
-            form.configAnalysis !== 'power_curve'
-          "
-        >
-          <div class="right">
-            <iframe
-              v-if="htmlLoading"
-              :src="windDetail.elevationHeight"
-              frameborder="0"
-              @load="iframeLoad"
-              width="100%"
-              height="100%"
-            ></iframe>
-            <img
-              v-else
-              style="width: 100%"
-              src="../../../assets/img/loadingError.webp"
-              alt=""
-            />
-          </div>
-        </el-col>
+          </el-col> -->
+        </template>
       </el-row>
     </el-card>
     <el-empty :image-size="200" v-if="flage"></el-empty>
@@ -366,6 +539,7 @@ import {
 import { getWindEngineGroup } from "@/api/ledger";
 import TinymceEditor from "@/components/Tinymce.vue";
 import PlotlyCharts from "./PlotlyCharts.vue";
+import { downLoadCsvFile } from "@/utils/common";
 import Papa from "papaparse";
 import axios from "axios";
 export default {
@@ -391,6 +565,8 @@ export default {
           trigger: "blur",
         },
       },
+      generalFiles: [], //总图数组
+      diagramRelations: [], //分图数组
       value4: "",
       value1: "",
       form: {
@@ -414,6 +590,9 @@ export default {
       tabIndex: 2,
       powerCurveTableData: [],
       generalFilesData: [],
+      graphFilesData: [],
+      powerHtmlZongData: [],
+      powerHtmlFenData: [],
     };
   },
   created() {
@@ -505,6 +684,19 @@ export default {
         } else {
           this.flage = false;
         }
+        this.generalFiles = [];
+        this.generalFiles =
+          (response.data &&
+            response.data.length > 0 &&
+            response.data[0].generalFiles) ||
+          [];
+
+        this.diagramRelations = [];
+        this.diagramRelations =
+          (response.data &&
+            response.data.length > 0 &&
+            response.data[0].diagramRelations) ||
+          [];
         if (
           response.data.length > 0 &&
           response.data[0].commentTypeRelations &&
@@ -524,41 +716,99 @@ export default {
         }
         //有功功率的数据处理
         if (this.form.configAnalysis === "power_curve") {
-          const generalFiles = response.data[0].generalFiles || [];
-          const generalFilesData = await Promise.all(
-            generalFiles.map(async (item, ind) => {
-              const types = this.getFileType(item.fileAddr);
-
-              if (types !== "html" && types !== "image") {
-                const resultChartsData = await axios.get(item.fileAddr);
-                // 更新表格数据
+          try {
+            this.generalFilesData = [];
+            this.graphFilesData = [];
+            const generalFiles = response.data[0]?.generalFiles || [];
+            this.powerHtmlZongData = [];
+            this.powerHtmlFenData = [];
+            // 处理 generalFiles 并获取每个文件的数据
+            const generalFilesData = await this.filterJsonData(
+              generalFiles,
+              "总图"
+            );
+            //分图数据
+            const graphChartData = await this.filterJsonData(
+              response.data[0].diagramRelations,
+              "分图"
+            );
+            // 过滤掉 null 或没有 chartsData 的项
+            this.generalFilesData = generalFilesData.filter(
+              (item) => item && item.chartsData
+            );
+            this.graphFilesData = graphChartData.filter(
+              (item) => item && item.chartsData
+            );
+          } catch (error) {
+            console.error("Error processing power curve data:", error);
+          } finally {
+            // 无论请求成功与否，都设置 loading = false
+            this.loading = false;
+          }
+        } else {
+          // 如果 configAnalysis 不是 "power_curve"，直接设置 loading = false
+          this.loading = false;
+        }
+      } catch (error) {
+        console.error(error);
+        this.loading = false;
+      }
+    },
+    async filterJsonData(generalFiles, type) {
+      return Promise.all(
+        generalFiles.map(async (item, ind) => {
+          const types = this.getFileType(item.fileAddr);
+          if (types !== "html" && types !== "image") {
+            try {
+              const resultChartsData = await axios.get(item.fileAddr);
+              // 更新表格数据，并返回数据对象
+              if (type === "总图") {
+                return {
+                  chartsData: {
+                    ...resultChartsData.data,
+                  },
+                  powerCurveTableData: this.creatPowerCurveTableData(
+                    resultChartsData.data
+                  ).filter((val) => val !== undefined),
+                  // .filter(
+                  //   (item) => item[0]?.enginCode === this.form.turbines
+                  // ),
+                };
+              } else if (type === "分图") {
                 return {
                   chartsData: {
                     ...resultChartsData.data,
+                    formInfoFieldEngineCode: this.form.turbines,
                   },
                   powerCurveTableData: this.creatPowerCurveTableData(
                     resultChartsData.data
                   )
                     .filter((val) => val !== undefined)
-                    .filter((item) => item[0].enginName === this.form.turbines),
+                    .filter(
+                      (item) =>
+                        item?.enginName === this.form.turbines ||
+                        item?.enginCode === this.form.turbines
+                    ),
                 };
               }
-              // 确保总是返回一个对象，即使条件不满足
-              return {}; // 或者返回 null
-            })
-          );
-
-          // 在 await 之后进行过滤，过滤掉没有 chartsData 的项
-          this.generalFilesData = generalFilesData.filter(
-            (item) => item && item.chartsData
-          );
-        }
-
-        this.loading = false;
-      } catch (error) {
-        console.error(error);
-        this.loading = false;
-      }
+            } catch (error) {
+              console.error(
+                `Error fetching chart data for file: ${item.fileAddr}`,
+                error
+              );
+              return null; // 如果出错，返回 null 以避免中断
+            }
+          } else {
+            if (type === "总图") {
+              this.powerHtmlZongData.push(item);
+            } else if (type === "分图") {
+              this.powerHtmlFenData.push(item);
+            }
+          }
+          // 如果文件类型不匹配，返回一个空对象
+          return null;
+        })
+      );
     },
     getFileType(url) {
       // 使用 URL 对象解析 URL
@@ -591,6 +841,7 @@ export default {
       // 合同功率曲线[...]---合同功率
       // enginName--风机名称
       // engineTypeName--风机机型
+
       const contractPowerCurve =
         data && data.data.filter((item) => item.enginName === "合同功率曲线");
       const powerCurveTableData =
@@ -609,6 +860,7 @@ export default {
                     item.yData[childInd] !== null ? item.yData[childInd] : 0.0,
                   contractPowerCurve: contractPowerCurve[0].yData[childInd],
                   enginName: item.enginName,
+                  enginCode: item.enginCode,
                   engineTypeName: data.engineTypeName,
                 };
               }
@@ -617,8 +869,11 @@ export default {
             return childData;
           }
         });
-
-      return powerCurveTableData;
+      // console.log(
+      //   powerCurveTableData.flat(),
+      //   "powerCurveTableDatapowerCurveTableData"
+      // );
+      return powerCurveTableData.flat();
     },
     getCsvData(url) {
       // 使用 axios 获取 CSV 文件
@@ -647,6 +902,25 @@ export default {
           console.error("无法获取 CSV 文件：", error);
         });
     },
+    downLoadCsv(tableDatas) {
+      const headers = ["风机名称", "风机机型", "风速", "合同功率", "实际功率"]; // CSV 文件的标题
+      const data = tableDatas.map((item) => {
+        return [
+          item.enginName,
+          item.engineTypeName,
+          item.xData,
+          item.yData,
+          item.contractPowerCurve,
+        ];
+      });
+      // 将标题和数据组合成 CSV 格式
+      const csvContent = [
+        headers.join(","),
+        ...data.map((row) => row.join(",")),
+      ].join("\n");
+
+      downLoadCsvFile(csvContent, "风机有功功率数据");
+    },
     mergeData(arr, brr) {
       // 创建一个新的结果数组
       const result = [];
@@ -851,4 +1125,7 @@ export default {
 .abalysisType {
   margin-top: 30px;
 }
+.col_content {
+  height: 500px;
+}
 </style>

src/views/performance/components/PlotlyCharts.vue

@@ -4,16 +4,11 @@
     <div
       v-if="comType === 'generalDrawing'"
       id="power-curve-plot"
-      style="width: 100%; height: 500px"
+      style="width: 100%; height: 550px"
     ></div>
     <!-- 分图组件  -->
     <template v-else-if="comType === 'graph'">
-      <div
-        v-for="(engine, index) in powerCurveData.turbines"
-        :key="'chart-' + index"
-        :id="'chart-' + index"
-        style="width: 100%; height: 500px"
-      ></div>
+      <div id="chart-" style="width: 100%; height: 550px"></div>
     </template>
   </div>
 </template>
@@ -56,6 +51,7 @@ export default {
             gridcolor: "rgb(255,255,255)",
             showgrid: true,
             zeroline: false,
+
             tickcolor: "rgb(255,255,255)",
           },
           legend: {
@@ -132,38 +128,6 @@ export default {
       }
     },
   },
-  // mounted() {
-  //   console.log("====================================");
-  //   console.log(this.lineMarkerData, "this.lineMarkerData");
-  //   console.log("====================================");
-  //   this.powerCurveData.turbines =
-  //     this.lineMarkerData.data &&
-  //     this.lineMarkerData.data.length > 0 &&
-  //     this.lineMarkerData.data.filter(
-  //       (item) => item.enginName !== "合同功率曲线"
-  //     );
-  //   this.powerCurveData.contractPowerCurve =
-  //     this.lineMarkerData.data &&
-  //     this.lineMarkerData.data.length > 0 &&
-  //     this.lineMarkerData.data.filter(
-  //       (item) => item.enginName === "合同功率曲线"
-  //     );
-  //   if (
-  //     this.comType === "generalDrawing" &&
-  //     this.lineMarkerData &&
-  //     this.lineMarkerData.data
-  //   ) {
-  //     this.renderPlot();
-  //   } else if (
-  //     this.comType === "graph" &&
-  //     this.lineMarkerData &&
-  //     this.lineMarkerData.data
-  //   ) {
-  //     this.$nextTick(() => {
-  //       this.initializeEngineCharts();
-  //     });
-  //   }
-  // },
   methods: {
     updateCharts() {
       this.powerCurveData.turbines =
@@ -219,82 +183,49 @@ export default {
     //初始化分图
     //初始化分图
     initializeEngineCharts() {
-      this.powerCurveData.turbines.forEach((engine, index) => {
-        const layout = {
-          title: engine.enginName + "风机",
-          plot_bgcolor: "#e5ecf6", // Chart background color
-          xaxis: {
-            title: "风速(m/s)",
-            // range: [0, 26],
-            tickmode: "linear",
-            gridcolor: "rgb(255,255,255)",
-            showgrid: true,
-            zeroline: false,
-            tickcolor: "rgb(255,255,255)",
-            dtick: 1,
-            tickangle: -45,
-          },
-          yaxis: {
-            title: "功率(kW)",
-            gridcolor: "rgb(255,255,255)",
-            showgrid: true,
-            zeroline: false,
-            tickcolor: "rgb(255,255,255)",
-          },
-          legend: {
-            orientation: "h",
-            xanchor: "center",
-            x: 0.5,
-            y: -0.2,
-          },
-          shapes: [],
-          editable: true,
-        };
-        const plotlyData = this.powerCurveData.turbines.map((eng, i) => ({
-          x: eng.xData,
-          y: eng.yData,
+      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) => {
+        data.push({
+          x: turbine.xData,
+          y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
           mode: "lines",
-          name: eng.enginName,
-          line: {
-            color: "#1c77b3",
-          },
-        }));
-        plotlyData.push({
-          x: this.powerCurveData.contractPowerCurve[0].xData,
-          y: this.powerCurveData.contractPowerCurve[0].yData,
-          mode: "lines+markers",
-          name: this.powerCurveData.contractPowerCurve[0].enginName,
+          name: turbine.enginName,
           line: {
-            color: "#c1c1c1",
+            color:
+              turbine?.enginCode ===
+                this.lineMarkerData?.formInfoFieldEngineCode ||
+              turbine?.enginName ===
+                this.lineMarkerData?.formInfoFieldEngineCode
+                ? "#1c77b3"
+                : "#d3d3d3",
           },
         });
-        const config = {
-          // modeBarButtonsToAdd: this.modeBarButtons,
-          modeBarButtonsToRemove: [
-            // "selectbox",
-            "lasso",
-            // "zoombox",
-            // "pan",
-            // "autoscale",
-            // "zoom2d",
-            // "pan2d",
-            // "select2d",
-          ],
-          displaylogo: false,
-          // scrollZoom: true,
-          editable: true,
-        };
-        console.log(plotlyData, "plotlyData");
-        Plotly.newPlot(`chart-${index}`, plotlyData, layout, config).then(
-          (gd) => {
-            // 初始化 _undoStack
-            // 生成图片方法
-            // Plotly.toImage(gd, { format: "png" }).then((dataUrl) => {
-            //   this.imageDataUri.push(dataUrl);
-            // });
-          }
-        );
       });
+
+      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-", data, layout);
     },
   },
 };

src/views/performance/components/analysisEvent.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2024-08-06 16:25:51
+ * @LastEditTime: 2024-09-19 16:39:40
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
@@ -920,7 +920,7 @@ export default {
             type: "warning",
             message: "当前风场没有风机，无法进行分析",
           });
-          this.$router.push("/home/performance/assetssMag");
+          // this.$router.push("/home/performance/assetssMag");
         }
         this.form.powerFarmID = this.$route.query.fieldEngineCode;
         this.form.dataBatchNum = this.$route.query.batchCode;

vue.config.js

@@ -65,9 +65,9 @@ module.exports = {
     proxy: {
       "/api": {
         // target: "http://192.168.5.4:16200", // 石月
-        target: "http://192.168.50.235:16200", //内网
+        // target: "http://192.168.50.235:16200", //内网
         // target: "http://192.168.5.15:16200",
-        // target: "http://106.120.102.238:18000/api", //外网
+        target: "http://192.168.50.235:16300", //外网
         //  target: "http://10.96.137.5",
         changeOrigin: true,
         pathRewrite: {