添加上传、下载、查看报告需求

package.json

@@ -17,7 +17,9 @@
     "echarts": "^5.5.0",
     "el-tree-select": "^3.1.14",
     "element-ui": "^2.15.14",
+    "file-saver": "^2.0.5",
     "happypack": "^5.0.1",
+    "jszip": "^3.10.1",
     "ol": "^9.2.3",
     "papaparse": "^5.4.1",
     "plotly.js-dist": "^2.34.0",

src/api/performance.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-06-03 09:29:50
- * @LastEditTime: 2024-09-09 15:52:22
+ * @LastEditTime: 2024-09-24 13:34:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/api/performance。.js
@@ -198,6 +198,9 @@ export function uploadFile(data) {
   return request({
     url: "/energy-manage-service/api/check/upload",
     method: "post",
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
     data,
   });
 }
@@ -218,7 +221,7 @@ export function queryDownloadFile(data) {
     params: data,
   });
 }
-//按分析类型对分析结果下载
+//按分析类型对分析结果下载 (所有分析图表的下载)
 export function downloadFile(data, onProgress) {
   return request({
     url: "/energy-manage-service/analysis/downloadFile",
@@ -238,3 +241,20 @@ export function downloadFile(data, onProgress) {
     },
   }).then((response) => response.data); // 返回数据中的 Blob;
 }
+//保存分析报告上传路径
+export function saveReportBatch(data) {
+  return request({
+    url: "/energy-manage-service/analysisResultReport/saveReportBatch",
+    method: "post",
+    data,
+  });
+}
+//
+
+export function getRportType(data) {
+  return request({
+    url: "/energy-manage-service/analysisResultReport/getRportType",
+    method: "get",
+    params: data,
+  });
+}

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/styles/global.scss

@@ -13,6 +13,7 @@
   color: var(--text-color) !important;
 }
 
+.el-dropdown-menu__item:hover,
 .el-button--primary:hover {
   opacity: 0.7 !important;
   border-color: var(--primary-color) !important;

src/utils/common.js

@@ -1,3 +1,4 @@
+import axios from "axios";
 export const uuid = (len = 16, radix = 10) => {
   const chars =
     "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
@@ -132,7 +133,26 @@ export const hasPermission = (permissionList, routerName) => {
     }
   });
 };
-
+export const downloadPDF = (url, fileName) => {
+  axios({
+    url: url,
+    method: "GET",
+    responseType: "blob", // 将响应类型设置为 blob
+  })
+    .then((response) => {
+      const blob = new Blob([response.data], { type: "application/pdf" });
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = fileName || "download.pdf";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(link.href); // 释放 Blob URL 资源
+    })
+    .catch((error) => {
+      console.error("下载失败:", error);
+    });
+};
 // 后端返回二进制流下载文件
 export const downloadBlob = (blob, fileName = "download") => {
   const reader = new FileReader();

src/views/ledger/component/windsiteup.vue

@@ -8,7 +8,12 @@
     >
       <div class="UPcondition">
         <p>文件类型:</p>
-        <el-select v-model="superior" clearable  @change="handleSelectClick" placeholder="请选择">
+        <el-select
+          v-model="superior"
+          clearable
+          @change="handleSelectClick"
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in superiorOptions"
             :key="item.value"
@@ -143,7 +148,7 @@ export default {
       succeed: {},
       jixingval: "",
       millTypeCodeOptions: [],
-      JXshow:false
+      JXshow: false,
     };
   },
   watch: {
@@ -164,7 +169,6 @@ export default {
     rowStyle() {
       return "text-align:center";
     },
-
     // 下载附件
     download() {
       if (this.AllTemplateurlDR.htPower) {
@@ -249,7 +253,7 @@ export default {
     handleClose() {
       this.superior = "";
       this.fileList = [];
-      this.jixingval=""
+      this.jixingval = "";
       this.globalFileList = null;
       this.$emit("handleClose", false, "uploadingPOP");
     },
@@ -319,7 +323,9 @@ export default {
         .catch((error) => {});
     },
     handleSelectClick(value) {
-      const selectedOption = this.superiorOptions.find(option => option.value === value);
+      const selectedOption = this.superiorOptions.find(
+        (option) => option.value === value
+      );
       if (selectedOption && selectedOption.label === "合同功率曲线") {
         this.JXshow = true;
       } else {

src/views/performance/assetssDetail.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2024-09-23 09:13:06
- * @LastEditors: milo-MacBook-Pro.local
+ * @LastEditTime: 2024-09-25 09:24:33
+ * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
 -->
@@ -173,6 +173,7 @@
                       <PlotlyCharts
                         :lineMarkerData="powerCurveDom.chartsData"
                         :comType="'generalDrawing'"
+                        :inds="`zong${ind}`"
                       ></PlotlyCharts>
                     </div>
                   </el-col>
@@ -289,6 +290,7 @@
                       <PlotlyCharts
                         :lineMarkerData="powerCurveDom.chartsData"
                         :comType="'graph'"
+                        :inds="`fen${ind}`"
                       ></PlotlyCharts>
                     </div>
                   </el-col>
@@ -422,65 +424,76 @@ export default {
         fieldCode: this.$route.query.fieldCode,
         batchCode: this.$route.query.batchCode,
       });
-      result.code === 200
-        ? this.downLoadSingleType(result.data)
-        : this.$message({ type: "error", message: result.msg });
+
+      if (result.code === 200) {
+        this.downLoadSingleType(result.data);
+      } else {
+        this.$message({ type: "error", message: result.msg });
+      }
     },
     // 下载单个类型的文件
     async downLoadSingleType(data) {
-      const zip = new JSZip();
-      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) {
-              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);
+      console.log(data, "执行了前");
+      if (data && data !== null) {
+        console.log(data, "执行了");
+
+        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);
+          });
       }
-      // 生成 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 = []; // 解析后的数据

src/views/performance/assetssMag.vue

@@ -162,38 +162,71 @@
           </template>
         </el-table-column>
         <el-table-column
-          prop="createTime"
-          align="center"
-          label="创建时间"
-          min-width="230"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="errState"
+          prop="reportVos"
           align="center"
           label="报告"
           min-width="120"
         >
           <template slot-scope="scope">
-            <span>
+            <el-dropdown v-if="scope.row.reportVos.length > 0" trigger="click">
+              <el-button type="text" size="small" class="el-dropdown-link">
+                查看报告
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="val in scope.row.reportVos"
+                  class="reportItemVal"
+                >
+                  <div class="reportLeft">
+                    <span>{{ val.reportName }}</span>
+                  </div>
+                  <div class="reportRight">
+                    <el-button
+                      type="text"
+                      size="small"
+                      @click="detailReportAssetss(val)"
+                    >
+                      查看
+                    </el-button>
+                    <el-button
+                      type="text"
+                      size="small"
+                      @click="downLoadeAssetss(val)"
+                    >
+                      下载
+                    </el-button>
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <span v-else>/</span>
+            <!-- <el-button type="text" size="small">
               {{
                 scope.row.errState == 0 && scope.row.analysisState !== -1
                   ? "查看报告"
                   : "/"
-              }}</span
-            >
+              }}
+            </el-button> -->
           </template>
         </el-table-column>
         <el-table-column
+          prop="createTime"
+          align="center"
+          label="创建时间"
+          min-width="230"
+        >
+        </el-table-column>
+
+        <el-table-column
           prop="transition"
           align="center"
           fixed="right"
           label="操作"
-          min-width="220"
+          min-width="300"
         >
           <template slot-scope="scope">
             <el-button
-              @click="upLoadeAssetss(scope.row)"
+              @click="abnormalDialog(scope.row, '上传报告')"
               type="text"
               size="small"
               >上传报告</el-button
@@ -233,23 +266,35 @@
       </div>
     </div>
     <!-- 弹出层 -->
-    <!-- 异常信息 /异常描述-->
+    <!-- 异常信息 /异常描述 /上传报告-->
     <my-dialog
       :visible="dialogVisible"
-      :errorInfo="errorInfo"
       :title="title"
       :rowInfo="rowInfo"
       @confirm="handleConfirm"
+      @getTableList="fetchData"
     >
       <div slot="tableEl">
         <el-empty description="暂无数据"></el-empty>
       </div>
     </my-dialog>
+    <!-- 查看报告详情 -->
+    <el-dialog
+      title="PDF 预览"
+      :visible.sync="dialogReportVisible"
+      width="80%"
+      class="pdfDialog"
+    >
+      <div class="pdf-container" ref="viewer">
+        <iframe :src="pdfUrl" width="100%" height="100%"></iframe>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import MyDialog from "./components/dialogCom.vue";
+import { downloadPDF } from "@/utils/common";
 import { getAnalysisResultList, onOffAutoAnalysis } from "@/api/performance";
 export default {
   components: {
@@ -277,13 +322,27 @@ export default {
       tableData: [],
       rowInfo: {},
       title: "",
+      viewerInstance: null, // PDF 文件 URL
+      dialogReportVisible: false,
+      pdfUrl: "",
     };
   },
   created() {
     this.getTableList();
   },
   methods: {
-    upLoadeAssetss(row) {},
+    //查看pdf 文件
+    detailReportAssetss(row) {
+      console.log(row.reportAddr);
+      this.dialogReportVisible = true;
+      this.pdfUrl = row.reportAddr;
+    },
+
+    //下载pdf 文件
+    downLoadeAssetss(row) {
+      downloadPDF(row.reportAddr, row.reportName);
+    },
+
     async HandleOnOffAuto(row) {
       try {
         const form = new FormData();
@@ -345,6 +404,10 @@ export default {
       } else if (title === "异常描述") {
         this.errorInfo = "";
         this.rowInfo = { ...row };
+      } else if (title === "上传报告") {
+        this.errorInfo = "";
+        this.rowInfo = {};
+        this.rowInfo.batchCode = row.batchCode;
       }
       this.title = title;
     },
@@ -387,6 +450,7 @@ export default {
     },
     async fetchData() {
       try {
+        console.log("更新 表格");
         const result = await getAnalysisResultList({
           ...this.formInline,
           totalSize: undefined,
@@ -503,4 +567,29 @@ export default {
   background-size: 1.25em 1.25em;
   animation: striped-flow 3s linear infinite;
 }
+.reportItemVal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .reportLeft {
+    margin-right: 50px;
+  }
+}
+::v-deep .pdfDialog .el-dialog {
+  height: 90% !important;
+  margin: 0 auto !important;
+  .el-dialog__body {
+    height: 100% !important;
+    .pdf-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 90% !important;
+    }
+  }
+}
+
+canvas {
+  border: 1px solid #dcdfe6;
+}
 </style>

src/views/performance/components/EditAnalysis.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2024-09-20 14:46:38
+ * @LastEditTime: 2024-09-25 09:22:19
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
@@ -156,7 +156,7 @@
         <template v-if="form.configAnalysis === 'power_curve'">
           <el-col :span="24">
             <div
-              style="font-weight: 700; font-size: 16px"
+              style="font-weight: 700; font-size: 16px; margin: 20px 0"
               v-if="generalFilesData.length > 0 || powerHtmlZongData.length > 0"
             >
               分析总图:
@@ -166,55 +166,64 @@
             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-row>
+                <el-col
+                  :key="ind + 'zongleftCharts'"
+                  :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>
+                    <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
+                  :key="ind + 'zongrightCharts'"
+                  v-loading="htmlLoading"
+                  v-if="form.configAnalysis === 'power_curve'"
+                  :span="12"
+                >
+                  <div class="right">
+                    <PlotlyCharts
+                      :ref="`charts-${ind}`"
+                      :inds="`zong${ind}`"
+                      :lineMarkerData="powerCurveDom.chartsData"
+                      :comType="'generalDrawing'"
+                    ></PlotlyCharts>
+                  </div>
+                </el-col>
+              </el-row>
             </template>
           </template>
           <template v-if="powerHtmlZongData.length > 0">
@@ -241,7 +250,7 @@
           </template>
           <el-col :span="24">
             <div
-              style="font-weight: 700; font-size: 16px"
+              style="font-weight: 700; font-size: 16px; margin: 20px 0"
               v-if="graphFilesData.length > 0 || powerHtmlFenData.length > 0"
             >
               分析分图:
@@ -251,44 +260,50 @@
             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>
+              <el-row>
+                <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'"
+                      :ind="`fen${ind}`"
+                    ></PlotlyCharts>
+                  </div>
+                </el-col>
+              </el-row>
             </template>
           </template>
           <template v-if="powerHtmlFenData.length > 0">

src/views/performance/components/PlotlyCharts.vue

@@ -3,12 +3,12 @@
     <!-- 总图组件 -->
     <div
       v-if="comType === 'generalDrawing'"
-      id="power-curve-plot"
+      :id="`power-curve-plot${inds}`"
       style="width: 100%; height: 550px"
     ></div>
     <!-- 分图组件  -->
     <template v-else-if="comType === 'graph'">
-      <div id="chart-" style="width: 100%; height: 550px"></div>
+      <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
     </template>
   </div>
 </template>
@@ -20,6 +20,7 @@ export default {
   props: {
     lineMarkerData: Object,
     comType: String,
+    inds: String,
   },
   name: "PowerCurvePlot",
   data() {
@@ -130,6 +131,7 @@ export default {
   },
   methods: {
     updateCharts() {
+      console.log(this.inds, this.lineMarkerData.data, "图表组件数据");
       this.powerCurveData.turbines =
         this.lineMarkerData.data?.filter(
           (item) => item.enginName !== "合同功率曲线"
@@ -178,7 +180,7 @@ export default {
         yaxis: this.config.lableConfig.yaxis,
         legend: this.config.lableConfig.legend,
       };
-      Plotly.newPlot("power-curve-plot", data, layout);
+      Plotly.newPlot(`power-curve-plot${this.inds}`, data, layout);
     },
     //初始化分图
     //初始化分图
@@ -225,7 +227,7 @@ export default {
           color: "red",
         },
       });
-      Plotly.newPlot("chart-", data, layout);
+      Plotly.newPlot(`chart-${this.inds}`, data, layout);
     },
   },
 };

src/views/performance/components/dialogCom.vue

@@ -3,7 +3,9 @@
     :visible.sync="dialogVisible"
     :title="title"
     :before-close="handleCloses"
-    :width="title === '异常详情' ? '750px' : '1120px'"
+    :width="
+      title === '异常详情' ? '750px' : title === '异常描述' ? '1120px' : '500px'
+    "
   >
     <!-- 根据 emptyFlag 和 title 显示不同的内容 -->
     <!-- <slot v-if="emptyFlag" name="tableEl"></slot> -->
@@ -12,21 +14,85 @@
       ref="abnormalDetailRef"
       :batchCode="rowInfo.batchCode"
     ></abnormal-detail>
-
     <div class="dialogBox" v-if="title === '异常详情'">
       <el-card shadow="always">
         <i class="el-icon-warning"></i> {{ errorInfo }}
       </el-card>
     </div>
-    <div slot="footer" v-if="title === '异常详情'" class="dialog-footer">
+    <div v-if="title === '上传报告'">
+      <el-upload
+        class="upload-demo"
+        action=""
+        multiple
+        :http-request="customUpload"
+        :on-remove="handleRemove"
+        :on-change="handleChange"
+        :before-upload="checkFileType"
+        :show-file-list="false"
+        :file-list="fileList"
+      >
+        <el-button size="small" type="primary">选择文件</el-button>
+        <!-- <div slot="tip" class="el-upload__tip">只能上传pdf文件</div> -->
+      </el-upload>
+      <div>
+        <span style="color: red">展示文件列表区域(双击修改文件名称)：</span>
+        <ul style="margin-top: 10px">
+          <li v-for="(file, index) in fileList" :key="index">
+            <el-select
+              size="small"
+              v-model="file.reportType"
+              placeholder="请选择文件类型"
+            >
+              <el-option
+                v-for="item in rportTypeList"
+                :key="item.reportType"
+                :label="item.reportTypeName"
+                :value="item.reportType"
+              >
+              </el-option>
+            </el-select>
+            <!-- 双击切换编辑状态 -->
+            <span v-if="editIndex !== index" @dblclick="editFileName(index)">
+              {{ file.name }}
+            </span>
+
+            <!-- 输入框模式 -->
+            <el-input
+              style="width: 150px"
+              v-if="editIndex === index"
+              placeholder="请输入文件名"
+              size="small"
+              v-model="file.name"
+              @blur="validateAndSaveFileName(file)"
+              @keydown.enter="validateAndSaveFileName(file)"
+              clearable
+            ></el-input>
+
+            <!-- 移除文件按钮 -->
+            <el-button size="mini" type="text" @click="removeFile(index)">
+              移除
+            </el-button>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div
+      slot="footer"
+      v-if="title === '异常详情' || title === '上传报告'"
+      class="dialog-footer"
+    >
       <el-button @click="handleClose">取消</el-button>
+      <el-button v-if="title === '上传报告'" @click="handleUpload">
+        确定上传
+      </el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
 import AbnormalDetail from "./abnormalDetail.vue";
-
+import { uploadFile, saveReportBatch, getRportType } from "@/api/performance";
 export default {
   components: {
     AbnormalDetail,
@@ -35,16 +101,25 @@ export default {
     title: String,
     visible: Boolean, // 控制对话框显示隐藏
     errorInfo: String,
-    rowInfo: Object,
+    rowInfo: {
+      type: Object,
+      default: () => ({}), // Set default value as an empty object
+    },
   },
   data() {
     return {
       dialogVisible: this.visible,
       emptyFlag: false,
       batchCode: "",
+      input: "",
+      fileList: [], // 文件列表
+      editIndex: -1, // 当前处于编辑状态的文件索引
+      rportTypeList: [], //文件类型
     };
   },
-
+  created() {
+    this.getfileRportType();
+  },
   watch: {
     visible(newVal) {
       this.dialogVisible = newVal;
@@ -52,20 +127,140 @@ export default {
     },
     rowInfo: {
       handler(newVal, oldVal) {
-        this.batchCode = newVal.batchCode;
+        if (newVal && newVal.batchCode) {
+          this.batchCode = newVal.batchCode;
+        } else {
+          console.warn("rowInfo or batchCode is undefined");
+        }
       },
       deep: true,
       immediate: true,
     },
   },
   methods: {
+    async getfileRportType() {
+      try {
+        const res = await getRportType();
+        console.log(res.data, "res");
+        this.rportTypeList = res.data;
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    async handleUpload() {
+      if (this.fileList.length > 0) {
+        try {
+          const results = await this.uploadFiles();
+          const fileDatas = results.map((item, ind) => {
+            return {
+              reportName: this.fileList[ind].name,
+              reportAddr: item.data,
+              batchCode: this.batchCode,
+              reportType: this.fileList[ind].reportType
+                ? this.fileList[ind].reportType
+                : null,
+            };
+          });
+          const reportTypes = new Set();
+          let hasDuplicates = false;
+
+          fileDatas.forEach((item) => {
+            if (reportTypes.has(item.reportType)) {
+              hasDuplicates = true;
+            } else {
+              reportTypes.add(item.reportType);
+            }
+          });
+          const nullFileDatas = fileDatas.filter(
+            (item) => item.reportType === null
+          );
+          if (nullFileDatas.length > 0) {
+            this.$message.warning("请检查是否选择了文件类型");
+          } else {
+            if (hasDuplicates) {
+              this.$message.warning("不可选择的相同文件类型，请重新选择！");
+            } else {
+              const res = await saveReportBatch(fileDatas);
+              if (res.code === 200) {
+                this.$message.success("保存成功");
+                this.fileList = [];
+                this.$emit("getTableList");
+                this.handleClose();
+              } else {
+                this.$message.error(res.msg + "上传失败请重新上传");
+              }
+            }
+          }
+        } catch (err) {
+          console.error("error");
+        }
+      } else {
+        this.$message.warning("请选择上传文件");
+      }
+    },
+    //调用单个上传接口
+    uploadFiles() {
+      return Promise.all(
+        this.fileList.map((item) => {
+          const form = new FormData();
+          form.append("file", item.raw);
+          return uploadFile(form);
+        })
+      );
+    },
+    // 进入编辑模式
+    editFileName(index) {
+      this.editIndex = index;
+    },
+    //判断上传文件类型
+    checkFileType(file) {
+      const isPdf =
+        file.type === "application/pdf" || file.name.endsWith(".pdf");
+      if (!isPdf) {
+        this.$message.error("只能上传PDF文件");
+      }
+      return isPdf;
+    },
+    //判断修改文件名称是否以.pdf 后缀
+    validateAndSaveFileName(file) {
+      console.log(file.name.trim().endsWith(".pdf"), "file .pdf");
+      if (file.name.trim().endsWith(".pdf")) {
+        this.saveFileName(file);
+      } else {
+        this.$message.error("文件名必须以 .pdf 结尾");
+      }
+    },
+    // 保存文件名并退出编辑模式
+    saveFileName() {
+      this.editIndex = -1; // 退出编辑模式
+    },
+    removeFile(index) {
+      // const fileToRemove = this.fileList[index];
+      this.fileList.splice(index, 1);
+    },
+    // 自定义上传方法
+    customUpload(file) {
+      const formData = new FormData();
+      formData.append("file", file);
+      // 使用 axios 自定义上传逻辑
+    },
+    // 移除文件时的处理
+    handleRemove(file, fileList) {
+      this.fileList = fileList;
+    },
+    // 文件变化时的处理
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
     handleClose() {
+      this.fileList = [];
       this.$emit("confirm");
     },
     handleCloses(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
+          this.fileList = [];
           this.$emit("confirm");
         })
         .catch((_) => {});

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://192.168.50.235:16300", //外网 生产环境
+        target: "http://192.168.50.235:16300", //外网 生产环境
         //  target: "http://10.96.137.5",
         changeOrigin: true,
         pathRewrite: {