performance-test/src/views/performance/assetssDetail.vue

<!--
 * @Author: your name
 * @Date: 2024-05-27 09:25:45
 * @LastEditTime: 2025-01-10 15:30:25
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
-->
<template>
  <div class="global-variable" v-loading="loading">
    <!-- <BoxLineCharts></BoxLineCharts> -->
    <!-- <LineCharts></LineCharts> -->
    <!-- 通过json文件绘制新的图表 -->
    <!-- <CreateNewChart></CreateNewChart> -->
    <!-- <HeatmapCharts></HeatmapCharts> -->
    <!-- <WindRoseChart></WindRoseChart> -->
    <!-- <PowerMarkers2DCharts></PowerMarkers2DCharts> -->
    <el-row type="flex" justify="space-between">
      <el-col :span="8">
        <el-button
          type="text"
          style="font-size: 20px"
          icon="el-icon-arrow-left"
          @click="() => $router.push('/home/performance/assetssMag')"
        >
          返回
        </el-button>
      </el-col>
      <el-col :span="8">
        <h2 style="text-align: center">分析历史记录总览</h2>
      </el-col>
      <el-col :span="8">
        <div style="text-align: end; font-size: 16px">
          分析时间：{{
            generalFiles.length > 0
              ? generalFiles[0].createTime
              : diagramRelations.length > 0
              ? diagramRelations[0].createTime
              : "/"
          }}
        </div>
      </el-col>
    </el-row>
    <el-card class="box-card analysisType">
      <el-form
        :model="formInfo"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        inline
        class="demo-ruleForm"
      >
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="分析类型" prop="analysisTypeCode">
              <el-select
                v-model="formInfo.analysisTypeCode"
                size="small"
                @change="handleAnalysisType"
              >
                <el-option
                  v-for="(item, indAns) in analysisTypeList"
                  :key="item.analysisTypeCode + indAns + 'analysisTypeList'"
                  :label="item.analysisTypeName"
                  :value="item.analysisTypeCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机组名称" prop="fieldEngineCode">
              <el-select v-model="formInfo.fieldEngineCode" size="small">
                <el-option
                  v-for="(item, indWind) in windEngineGroupList"
                  :key="item.engineCode + indWind"
                  :label="item.engineName"
                  :value="item.engineCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              class="searchFrom"
              style="display: flex; justify-content: end"
            >
              <el-button type="primary" @click="onSubmit" size="small">
                查询
              </el-button>
              <el-button @click="reset('ruleForm')" size="small">
                重置
              </el-button>
              <el-button
                type="primary"
                @click="downLoadAllTypeFile"
                size="small"
              >
                一键下载分析结果图
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-empty :image-size="200" v-if="flage"></el-empty>
    <div v-else>
      <el-table
        class="box-card"
        v-if="
          this.formInfo.analysisTypeCode === 'yaw_error' &&
          this.csvData.length > 0
        "
        :data="csvData"
        border
        max-height="550"
        style="width: 100%"
        align="center"
      >
        <el-table-column prop="engine_name" label="风机名称"> </el-table-column>
        <el-table-column prop="yaw_error1" label="误差值"> </el-table-column>
      </el-table>
      <template
        v-else-if="formInfo.analysisTypeCode === 'production_indicator'"
      >
        <div>
          <template v-for="itemCsv in productionIndicatorCsvData">
            <el-table
              v-if="Object.keys(itemCsv.data[0]).length > 4"
              :data="itemCsv.data"
              border
              style="width: 100%"
              align="center"
            >
              <el-table-column prop="EPActualTotal" label="实发电量">
              </el-table-column>
              <el-table-column prop="TurbinePowerRate" label="风机能量利用率">
              </el-table-column>
              <el-table-column prop="EPLostStopPercent" label="停机损失百分比">
              </el-table-column>
              <el-table-column prop="EPLostBadPercent" label="欠发损失百分比">
              </el-table-column>
              <el-table-column
                prop="EPLostPerformPercent"
                label="功率曲线未达标损失百分比"
              >
              </el-table-column>
              <el-table-column prop="EPLostLimitPercent" label="限电损失百分比">
              </el-table-column>
              <el-table-column prop="TurbineRunRate" label="风机可利用率">
              </el-table-column>
              <el-table-column prop="mean_width" label="功率水平平均宽度">
              </el-table-column>
              <el-table-column prop="variance_width" label="功率水平方差">
              </el-table-column>
              <el-table-column prop="WindSpeedAvr" label="平均风速">
              </el-table-column>
              <el-table-column prop="Thi" label="利用小时"> </el-table-column>
              <el-table-column prop="Ws" label="功率曲线一致性系数">
              </el-table-column>
            </el-table>
            <el-table
              v-else
              :data="itemCsv.data"
              border
              style="width: 100%"
              align="center"
            >
              <el-table-column prop="Qp" label="风场总发电量">
              </el-table-column>
              <el-table-column prop="Thc" label="风场等效利用小时">
              </el-table-column>
              <el-table-column prop="Rdr" label="风场弃风率"> </el-table-column>
              <el-table-column prop="Qdr" label="风场弃风电量">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </template>
      <template v-else-if="formInfo.analysisTypeCode === 'fault'">
        <div>
          <template v-for="itemCsv in zongFaultCsvData">
            <el-table
              :data="filteredData(itemCsv)"
              border
              style="width: 100%"
              align="center"
            >
              <el-table-column prop="fault_detail" label="故障类型">
              </el-table-column>
              <el-table-column prop="count" sortable label="故障次数（次）">
              </el-table-column>
              <el-table-column
                prop="fault_time_sum"
                sortable
                label="故障时长（秒）"
              >
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入故障类型关键字搜索"
                  />
                </template>
              </el-table-column>
            </el-table>
          </template>
          <template v-for="itemCsv in fenFaultCsvData">
            <el-table
              :data="filteredFenData(itemCsv)"
              border
              style="width: 100%"
              align="center"
            >
              <el-table-column prop="wind_turbine_name" label="风机名称">
              </el-table-column>
              <el-table-column prop="count" sortable label="故障次数（次）">
              </el-table-column>
              <el-table-column
                prop="fault_time"
                sortable
                label="故障时长（秒）"
              >
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="searchFen"
                    size="mini"
                    placeholder="输入风机名称关键字搜索"
                  />
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </template>
      <!-- 需要在这里添加三个分析类型排版布局 ，分析详情中 -->
      <div v-else>
        <el-card class="box-card analysisType" v-if="generalFiles.length > 0">
          <div slot="header" class="clearfix">
            <span style="font-weight: 700; font-size: 16px">
              分析总图{{ fileCheckResult1 }}
            </span>
          </div>
          <el-row class="assetssConent">
            <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
                        :data="
                          powerCurveDom && powerCurveDom.powerCurveTableData
                        "
                        border
                        max-height="500"
                        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'"
                        :inds="`zong${ind}`"
                      ></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>
            <template v-else>
              <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>
            </template>
          </el-row>
        </el-card>
        <el-card
          class="box-card analysisType"
          v-if="diagramRelations.length > 0"
        >
          <div slot="header" class="clearfix">
            <span style="font-weight: 700; font-size: 16px">
              分析分图 {{ fileCheckResult1 }}
            </span>
          </div>
          <el-row class="assetssConent">
            <template
              v-if="
                formInfo.analysisTypeCode === 'power_curve' &&
                generalFiles.length > 0
              "
            >
              <template
                v-if="graphFilesData[0] !== null && graphFilesData.length !== 0"
              >
                <template v-for="(powerCurveDom, ind) in graphFilesData">
                  <el-col
                    :span="12"
                    v-if="
                      powerCurveDom &&
                      formInfo.fieldEngineCode ===
                        powerCurveDom.chartsData.formInfoFieldEngineCode &&
                      powerCurveDom.powerCurveTableData.length > 0
                    "
                  >
                    <div class="left">
                      <!-- <el-button
                        @click="
                          downLoadCsv(
                            powerCurveDom && powerCurveDom.powerCurveTableData
                          )
                        "
                        >导出表格数据</el-button
                      > -->
                      <el-table
                        :data="
                          powerCurveDom && powerCurveDom.powerCurveTableData
                        "
                        border
                        max-height="500"
                        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="
                      powerCurveDom &&
                      formInfo.fieldEngineCode ===
                        powerCurveDom.chartsData.formInfoFieldEngineCode &&
                      powerCurveDom.powerCurveTableData.length > 0
                    "
                    :span="12"
                  >
                    <div class="right">
                      <PlotlyCharts
                        :lineMarkerData="powerCurveDom.chartsData"
                        :comType="'graph'"
                        :inds="`fen${ind}`"
                      ></PlotlyCharts>
                    </div>
                  </el-col>
                  <el-empty v-else description="该机组暂无分图"></el-empty>
                </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"
                :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>
              <el-col
                v-for="(file, index) in diagramRelations"
                :key="index + file.fileAddr + file.createTime + 'png'"
                :span="24"
                :style="{
                  display:
                    getFileType(file.fileAddr) === 'image' ? 'block' : 'none',
                }"
                class="col_content"
              >
                <img
                  :src="file.fileAddr"
                  alt=""
                  style="width: 100%; height: 590px"
                />
              </el-col>
            </template>
          </el-row>
        </el-card>
      </div>
      <el-card
        class="box-card"
        v-for="o in commentDescriptionVos"
        :key="o.commentTypeName"
      >
        <div slot="header" class="clearfix">
          <span style="font-weight: 700; font-size: 16px">{{
            o.commentTypeName
          }}</span>
        </div>
        <div class="text item">
          <div v-html="o.comment"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  analysisDetail,
  queryAnalysisedType,
  queryAnalysisedEngine,
  queryAnalysisTypeConfig,
  queryDownloadFile,
  downloadFile,
} from "@/api/performance";
import CreateNewChart from "./createNewChart.vue";
// import DetailCharts from "./components/DetailCharts.vue";
import BoxLineCharts from "./components/chartsCom/BoxLineCharts";
import HeatmapCharts from "./components/chartsCom/HeatmapCharts.vue";
import WindRoseChart from "./components/chartsCom/WindRoseChart.vue";
import PowerMarkers2DCharts from "./components/chartsCom/powerMarkers2DCharts.vue";
// import JsonMarkerCharts from "./components/JsonMarkerCharts.vue";
import PlotlyCharts from "./components/PlotlyCharts.vue";
import LineCharts from "./components/chartsCom/lineChart.vue";
import { downLoadCsvFile } from "@/utils/common";
import { saveAs } from "file-saver";
import JSZip from "jszip";
import Papa from "papaparse";
import axios from "axios";
export default {
  components: {
    // DetailCharts,
    WindRoseChart,
    // JsonMarkerCharts,
    HeatmapCharts,
    CreateNewChart,
    PlotlyCharts,
    LineCharts,
    BoxLineCharts,
    PowerMarkers2DCharts,
  },
  data() {
    return {
      search: "",
      searchFen: "",
      loadings: [],
      loading: false,
      fileCheckResult: null,
      fileCheckResult1: null,
      analysisTypeList: [],
      windEngineGroupList: [],
      generalFiles: [], //总图数组
      diagramRelations: [], //分图数组
      commentDescriptionVos: [],
      formInfo: {
        fieldEngineCode: null,
        analysisTypeCode: null,
      },
      productionIndicatorCsvData: [],
      productionIndicatorCsvHeader: [],
      csvData: [], // 解析后的数据
      csvHeaders: [], // CSV 表头
      rules: {},
      flage: false,
      csvData: [], // 解析后的数据
      csvHeaders: [], // CSV 表头
      generalFilesData: [],
      graphChartData: {},
      graphFilesData: [],
      powerHtmlZongData: [],
      powerHtmlFenData: [],
      zongFaultCsvHeader: [],
      zongFaultCsvData: [],
      fenFaultCsvHeader: [],
      fenFaultCsvData: [],
    };
  },
  created() {
    //获取分析 分析类型、机组编号 列表
    this.getWindCodeList();
  },
  computed: {
    // 根据搜索关键字过滤数据
    filteredData() {
      return (itemCsv) => {
        // 如果有搜索关键词，则过滤数据
        if (this.search) {
          return itemCsv.data.filter((item) => {
            return item.fault_detail
              .toLowerCase()
              .includes(this.search.toLowerCase());
          });
        }
        // 没有搜索关键词时返回所有数据
        return itemCsv.data;
      };
    },
    filteredFenData() {
      return (itemCsv) => {
        // 如果有搜索关键词，则过滤数据
        if (this.searchFen) {
          return itemCsv.data.filter((item) => {
            return item.wind_turbine_name
              .toLowerCase()
              .includes(this.searchFen.toLowerCase());
          });
        }
        // 没有搜索关键词时返回所有数据
        return itemCsv.data;
      };
    },
  },
  mounted() {
    this.initializeLoading();
    // this.chartsTypeConfig();
  },
  methods: {
    //一键下载所有文件
    async downLoadAllTypeFile() {
      const result = await queryDownloadFile({
        fieldCode: this.$route.query.fieldCode,
        batchCode: this.$route.query.batchCode,
      });
      if (result.code === 200) {
        this.downLoadSingleType(result.data);
      } else {
        this.$message({ type: "error", message: result.msg });
      }
    },
    // 下载单个类型的文件
    // async downLoadSingleType(data) {
    //   if (data && data !== null) {
    //     let totalFiles = data.length;
    //     let completedFiles = 0;

    //     // 检查通知支持情况
    //     if (!("Notification" in window)) {
    //       alert("This browser does not support desktop notifications.");
    //     } else if (Notification.permission !== "granted") {
    //       Notification.requestPermission();
    //     }

    //     this.loading = true;

    //     for (let i = 0; i < data.length; i++) {
    //       try {
    //         const formData = new FormData();
    //         formData.append("batchCode", this.$route.query.batchCode);
    //         formData.append("analysisTypeCode", data[i]);
    //         formData.append("fieldCode", this.$route.query.fieldCode);

    //         // 获取 Blob 对象并提供进度回调
    //         await downloadFile(formData, (percentCompleted) => {
    //           // 更新通知
    //           if (Notification.permission === "granted") {
    //             new Notification(`Downloading file ${data[i]}`, {
    //               body: `Progress: ${percentCompleted}%`,
    //             });
    //           }
    //         }).then((blob) => {
    //           if (blob instanceof Blob) {
    //             // 使用 FileSaver.js 直接保存文件，自动弹出保存对话框
    //             saveAs(blob, `file_${data[i]}.pdf`);

    //             // 更新下载进度
    //             completedFiles += 1;
    //             this.loading = false;
    //             this.$notify({
    //               title: "提示",
    //               message: `已完成 ${completedFiles}/${totalFiles} 文件`,
    //             });
    //           } else {
    //             throw new Error(`返回的数据不是 Blob 对象`);
    //           }
    //         });
    //       } catch (error) {
    //         console.error(`下载文件 ${data[i]} 时发生错误:`, error);
    //         this.loading = false;
    //         return;
    //       }
    //     }

    //     // 完成所有文件下载后的通知
    //     if (Notification.permission === "granted") {
    //       new Notification("所有文件已下载", {
    //         body: `${completedFiles}/${totalFiles} 文件已成功下载`,
    //       });
    //     }
    //   }
    // },
    async downLoadSingleType(data) {
      if (data && data !== null) {
        let totalFiles = data.length;
        let completedFiles = 0;
        if (!("Notification" in window)) {
          alert("This browser does not support desktop notifications.");
        } else if (Notification.permission !== "granted") {
          Notification.requestPermission();
        }
        this.loading = true;
        const zip = new JSZip();
        for (let i = 0; i < data.length; i++) {
          try {
            const formData = new FormData();
            formData.append("batchCode", this.$route.query.batchCode);
            formData.append("analysisTypeCode", data[i]);
            formData.append("fieldCode", this.$route.query.fieldCode);
            // 获取 Blob 对象并提供进度回调
            await downloadFile(formData, (percentCompleted) => {
              // 创建或更新通知
              // if (Notification.permission === "granted") {
              //   new Notification(`Downloading file ${data[i]}`, {
              //     body: `Progress: ${percentCompleted}%`,
              //   });
              // }
            }).then((blob) => {
              if (blob instanceof Blob) {
                zip.file(`file_${data[i]}.zip`, blob);
                // console.log(`文件 ${data[i]} 加入到 ZIP 成功`);
                completedFiles += 1;
                this.loading = false;
                this.$notify({
                  title: "提示",
                  message: `已完成 ${completedFiles}/${totalFiles} 文件`,
                  // duration: 0,
                });
                // console.log(`已完成 ${completedFiles}/${totalFiles} 文件`);
              } else {
                throw new Error(`返回的数据不是 Blob 对象`);
              }
            });
          } catch (error) {
            console.error(`下载文件 ${data[i]} 时发生错误:`, error);
            this.loading = false;
            return;
          }
        }
        // 生成 ZIP 文件并下载
        zip
          .generateAsync({ type: "blob" })
          .then((content) => {
            saveAs(content, "Downloaded_Files.zip");
            // console.log("所有文件已打包并下载成功");
          })
          .catch((error) => {
            console.error("生成 ZIP 文件时发生错误:", error);
          });
      }
    },
    async handleAnalysisType(e) {
      this.csvData = []; // 解析后的数据
      this.csvHeaders = [];
      const resEngineList = await queryAnalysisedEngine({
        batchCode: this.$route.query.batchCode,
        analysisTypeCode: e,
      });
      this.windEngineGroupList = resEngineList.data;
      this.formInfo.fieldEngineCode =
        resEngineList.data !== null && resEngineList.data.length > 0
          ? resEngineList.data[0].engineCode
          : null;
      this.getDetailInfo();
    },
    //分析类型图表样式
    async chartsTypeConfig() {
      const result = await queryAnalysisTypeConfig();
    },
    iframeLoad(index) {
      this.$set(this.loadings, index, false);
    },
    initializeLoading() {
      // 计算总的文件数量，包括分析总图和分析分图
      const totalFiles =
        this.generalFiles.length + this.diagramRelations.length;
      // 初始化 loadings 数组，全部设置为 true，表示加载状态
      this.loadings = new Array(totalFiles).fill(true);
    },
    // 查询
    onSubmit() {
      this.getDetailInfo();
    },

    // 重置
    reset(formName) {
      this.$refs[formName].resetFields();
      this.getWindCodeList();
    },
    async getDetailInfo() {
      const formData = new FormData();
      formData.append("batchCode", this.$route.query.batchCode);
      formData.append("analysisTypeCode", this.formInfo.analysisTypeCode);
      formData.append("fieldEngineCode", this.formInfo.fieldEngineCode);
      this.loading = true;
      //获取详情信息
      try {
        const response = await analysisDetail(formData);
        if (response.data.length === 0 || response.data === null) {
          this.flage = true;
        } 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) ||
          [];
        this.commentDescriptionVos =
          (response.data &&
            response.data.length > 0 &&
            response.data[0].commentDescriptionVos) ||
          [];
        if (
          response.data[0] &&
          response.data[0]?.generalFiles &&
          response.data[0]?.generalFiles[0]?.fileAddr
        ) {
          if (this.formInfo.analysisTypeCode === "yaw_error") {
            const fileUrl = response.data[0]?.generalFiles[0]?.fileAddr;
            this.fetchCsvData("yaw_error", fileUrl);
          } else if (
            this.formInfo.analysisTypeCode === "production_indicator"
          ) {
            response.data[0].generalFiles.map((item) => {
              if (item.fileAddr) {
                this.productionIndicatorCsvHeader = [];
                this.productionIndicatorCsvData = [];
                this.fetchCsvData("production_indicator", item.fileAddr);
              }
            });
          } else if (this.formInfo.analysisTypeCode === "fault") {
            //总图处理
            response.data[0].generalFiles.map((item) => {
              if (item.fileAddr) {
                this.productionIndicatorCsvHeader = [];
                this.productionIndicatorCsvData = [];
                this.fetchCsvData("fault", item.fileAddr);
              }
            });
          }
        }

        this.initializeLoading();
        //有功功率的数据处理
        // 有功功率的数据处理
        if (this.formInfo.analysisTypeCode === "power_curve") {
          try {
            const generalFiles = response.data[0]?.generalFiles || [];

            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;
        }
      } 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--风速
      // yData--实际功率
      // 合同功率曲线[...]---合同功率
      // enginName--风机名称
      // engineTypeName--风机机型
      const contractPowerCurve =
        data && data.data.filter((item) => item.enginName === "合同功率曲线");
      const powerCurveTableData =
        data &&
        data.data.map((item, ind) => {
          if (item.enginName !== "合同功率曲线") {
            const childData = item.xData.map((child, childInd) => {
              // 检查是否所有需要的数据都存在
              if (
                item.yData[childInd] !== undefined &&
                contractPowerCurve[0].yData[childInd] !== undefined
              ) {
                return {
                  xData: child,
                  yData:
                    item.yData[childInd] !== null ? item.yData[childInd] : 0.0,
                  contractPowerCurve: contractPowerCurve[0].yData[childInd],
                  enginName: item.enginName,
                  enginCode: item.enginCode,
                  engineTypeName: data.engineTypeName,
                };
              }
            });

            return childData;
          }
        });

      return powerCurveTableData.flat();
    },
    // 封装的获取 CSV 数据方法
    fetchCsvData(analysisType, url) {
      axios
        .get(url, { responseType: "blob" }) // 确保数据以 blob 格式返回
        .then((response) => {
          const reader = new FileReader();
          reader.onload = (e) => {
            const csvText = e.target.result;
            Papa.parse(csvText, {
              header: true, // 使用 CSV 第一行作为键
              complete: (result) => {
                // 根据分析类型设置不同的数据
                if (analysisType === "yaw_error") {
                  this.csvHeaders = Object.keys(result.data[0]);
                  this.csvData = result.data.filter(
                    (row) => Object.keys(row).length
                  ); // 过滤空行
                } else if (analysisType === "production_indicator") {
                  this.productionIndicatorCsvHeader.push(
                    Object.keys(result.data[0])
                  );
                  this.productionIndicatorCsvData.push({
                    data: result.data
                      .filter((row) => Object.keys(row).length)
                      .slice(0, result.data.length - 1),
                  }); // 过滤空行
                } else if (analysisType === "fault") {
                  if (Object.keys(result.data[0]).includes("fault_detail")) {
                    //总图故障统计展示
                    this.zongFaultCsvHeader.push(Object.keys(result.data[0]));
                    this.zongFaultCsvData.push({
                      data: result.data
                        .filter((row) => Object.keys(row).length)
                        .slice(0, result.data.length - 1),
                    });
                  } 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) => {
                console.error("CSV 解析错误：", error);
              },
            });
          };
          reader.readAsText(response.data); // 读取 blob 数据
        })
        .catch((error) => {
          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 {
        const resAnalysisedType = await queryAnalysisedType({
          batchCode: this.$route.query.batchCode,
        });
        if (resAnalysisedType.data && resAnalysisedType.data.length > 0) {
          const resEngineList = await queryAnalysisedEngine({
            batchCode: this.$route.query.batchCode,
            analysisTypeCode: resAnalysisedType.data[0].analysisTypeCode,
          });
          this.analysisTypeList = resAnalysisedType.data;
          this.windEngineGroupList = resEngineList.data;
          this.formInfo.fieldEngineCode =
            resEngineList.data !== null && resEngineList.data.length > 0
              ? resEngineList.data[0].engineCode
              : null;
          this.formInfo.analysisTypeCode =
            resAnalysisedType.data.length > 0
              ? resAnalysisedType.data[0].analysisTypeCode
              : "";
          this.loading = false;
        }
        this.getDetailInfo();
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },
    getFileType(url) {
      // 使用 URL 对象解析 URL
      // 获取路径名部分
      let pathname = url.split("/").pop();
      // 截取路径名，去除加密乱码字符部分
      const index = pathname.indexOf(".html");
      if (index !== -1) {
        pathname = pathname.slice(0, index + 5); // '.html' 的长度是 5
      } else {
        pathname = pathname.slice(0, pathname.indexOf(".png") + 4); // '.png' 的长度是 4
      }
      // 正则表达式匹配图片扩展名
      const imageExtensions = /\.(png|jpg|jpeg|gif|bmp|svg)$/i;
      // 正则表达式匹配 HTML 扩展名
      const htmlExtensions = /\.html?$/i;

      if (imageExtensions.test(pathname)) {
        return "image";
      } else if (htmlExtensions.test(pathname)) {
        return "html";
      } else {
        return "unknown";
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box-card {
  margin-top: 20px;
}
.imageDetail {
  padding: 80px 100px;
}
.analysisType {
  .assetssConent {
    height: 550px !important;
    .el-col-12 {
      height: 100%;
    }
    .el-col-24 {
      height: 100%;
    }
    iframe {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }
}
::v-deep .gjp .el-skeleton {
  width: 90% !important;
  height: 90% !important;
  margin: 0 auto !important;
}
</style>