修改保存数据格式方法

src/utils/indexedDb.js

@@ -207,38 +207,6 @@ export async function storeSetData(db, storeName, key, newFileData, callback) {
   };
 }
 
-// export async function storeSetData(db, storeName, key, newFileData, callback) {
-//   if (!db) {
-//     console.error("数据库未初始化.");
-//     return;
-//   }
-//   const transaction = db.transaction([storeName], "readwrite");
-//   const store = transaction.objectStore(storeName);
-//   const getRequest = store.get(key);
-//   getRequest.onsuccess = () => {
-//     const fileDataArray = getRequest.result ? getRequest.result.data : [];
-//     console.log(fileDataArray, "qiannewFileData");
-//     fileDataArray.push(newFileData);
-//     const putRequest = store.put({
-//       id: key,
-//       data: fileDataArray,
-//     });
-//     putRequest.onsuccess = () => {
-//       if (callback && typeof callback === "function") {
-//         callback();
-//       }
-//     };
-
-//     putRequest.onerror = (event) => {
-//       console.error("在IndexedDB中更新数据出错:", event.target.error);
-//     };
-//   };
-
-//   getRequest.onerror = (event) => {
-//     console.error("从IndexedDB检索数据时出错:", event.target.error);
-//   };
-// }
-// utils/indexedDb.js
 export async function openDB(dbName, version) {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(dbName, version);
@@ -264,10 +232,20 @@ export async function saveData(dbName, key, value) {
   });
 }
 
+// export async function getData(dbName, key) {
+//   const db = await openDB(dbName, 1);
+//   return new Promise((resolve, reject) => {
+//     const transaction = db.transaction(["vuexData"], "readonly");
+//     const store = transaction.objectStore("vuexData");
+//     const request = store.get(key);
+//     request.onsuccess = () => resolve(request.result?.value || null);
+//     request.onerror = (event) => reject(event.target.error);
+//   });
+// }
 export async function getData(dbName, key) {
   const db = await openDB(dbName, 1);
   return new Promise((resolve, reject) => {
-    const transaction = db.transaction(["vuexData"], "readonly");
+    const transaction = db.transaction(["vuexData"], "readonly"); // 确保使用 vuexData 作为对象存储名
     const store = transaction.objectStore("vuexData");
     const request = store.get(key);
     request.onsuccess = () => resolve(request.result?.value || null);

src/utils/vuexIndexedDBPlugin.js

@@ -159,7 +159,29 @@ const filterState = (state) => {
   return clonedState;
 };
 
-// 修改后的 openDB 方法
+// // 修改后的 openDB 方法
+// const openDB = (dbName, version) => {
+//   return new Promise((resolve, reject) => {
+//     const request = indexedDB.open(dbName, version);
+
+//     request.onsuccess = () => {
+//       resolve(request.result);
+//     };
+
+//     request.onerror = (error) => {
+//       reject(error);
+//     };
+
+//     request.onupgradeneeded = (event) => {
+//       const db = event.target.result;
+
+//       // 创建对象存储（如果不存在）
+//       if (!db.objectStoreNames.contains("myIndexedDB")) {
+//         db.createObjectStore("myIndexedDB");
+//       }
+//     };
+//   });
+// };
 const openDB = (dbName, version) => {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(dbName, version);
@@ -175,9 +197,9 @@ const openDB = (dbName, version) => {
     request.onupgradeneeded = (event) => {
       const db = event.target.result;
 
-      // 创建对象存储（如果不存在）
-      if (!db.objectStoreNames.contains("myIndexedDB")) {
-        db.createObjectStore("myIndexedDB");
+      // 创建对象存储，确保名称为 vuexData（与getData中的名称一致）
+      if (!db.objectStoreNames.contains("vuexData")) {
+        db.createObjectStore("vuexData");
       }
     };
   });
@@ -210,7 +232,7 @@ const vuexIndexedDBPlugin = (store) => {
         const cleanedState = filterState(dragChartState);
 
         // 直接保存整个状态到 IndexedDB
-        saveData("myIndexedDB", keyName, cleanedState)
+        saveData("vuexData", keyName, cleanedState)
           .then(() => {
             console.log("State saved successfully");
           })

src/views/performance/assetssDetail.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2024-12-24 10:49:20
+ * @LastEditTime: 2024-12-27 14:23:21
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
@@ -119,6 +119,73 @@
         <el-table-column prop="engine_name" label="风机名称"> </el-table-column>
         <el-table-column prop="yaw_error1" label="误差值"> </el-table-column>
       </el-table>
+      <el-table
+        v-else-if="formInfo.analysisTypeCode === 'production_indicator'"
+        :data="productionIndicatorCsvData"
+        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-column
+          v-if="
+            formInfo.fieldEngineCode !== '' && formInfo.fieldEngineCode !== null
+          "
+          prop="Qp"
+          label="风场总发电量"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="
+            formInfo.fieldEngineCode !== '' && formInfo.fieldEngineCode !== null
+          "
+          prop="Thc"
+          label="风场等效利用小时"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="
+            formInfo.fieldEngineCode !== '' && formInfo.fieldEngineCode !== null
+          "
+          prop="Rdr"
+          label="风场弃风率"
+        >
+        </el-table-column>
+        <el-table-column
+          v-if="
+            formInfo.fieldEngineCode !== '' && formInfo.fieldEngineCode !== null
+          "
+          prop="Qdr"
+          label="风场弃风电量"
+        >
+        </el-table-column>
+      </el-table>
+
       <!-- 需要在这里添加三个分析类型排版布局 ，分析详情中 -->
       <div v-else>
         <el-card class="box-card analysisType" v-if="generalFiles.length > 0">
@@ -421,6 +488,8 @@ export default {
         fieldEngineCode: null,
         analysisTypeCode: null,
       },
+      productionIndicatorCsvData: [],
+      productionIndicatorCsvHeader: [],
       csvData: [], // 解析后的数据
       csvHeaders: [], // CSV 表头
       rules: {},
@@ -644,9 +713,16 @@ export default {
             response.data.length > 0 &&
             response.data[0].commentDescriptionVos) ||
           [];
+        // if (this.formInfo.analysisTypeCode === "yaw_error") {
+        //   this.getCsvData(response.data[0].generalFiles[0].fileAddr);
+        // }
+        const fileUrl = response.data[0].generalFiles[0].fileAddr;
         if (this.formInfo.analysisTypeCode === "yaw_error") {
-          this.getCsvData(response.data[0].generalFiles[0].fileAddr);
+          this.fetchCsvData("yaw_error", fileUrl);
+        } else if (this.formInfo.analysisTypeCode === "production_indicator") {
+          this.fetchCsvData("production_indicator", fileUrl);
         }
+
         this.initializeLoading();
         //有功功率的数据处理
         // 有功功率的数据处理
@@ -802,8 +878,8 @@ export default {
 
       return powerCurveTableData.flat();
     },
-    getCsvData(url) {
-      // 使用 axios 获取 CSV 文件
+    // 封装的获取 CSV 数据方法
+    fetchCsvData(analysisType, url) {
       axios
         .get(url, { responseType: "blob" }) // 确保数据以 blob 格式返回
         .then((response) => {
@@ -813,10 +889,25 @@ export default {
             Papa.parse(csvText, {
               header: true, // 使用 CSV 第一行作为键
               complete: (result) => {
-                this.csvHeaders = Object.keys(result.data[0]);
-                this.csvData = result.data.filter(
-                  (row) => Object.keys(row).length
-                ); // 过滤空行
+                // 根据分析类型设置不同的数据
+                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 = Object.keys(
+                    result.data[0]
+                  );
+                  this.productionIndicatorCsvData = result.data.filter(
+                    (row) => Object.keys(row).length
+                  ); // 过滤空行
+                  console.log(
+                    this.productionIndicatorCsvHeader,
+                    result.data,
+                    "result.data"
+                  );
+                }
               },
               error: (error) => {
                 console.error("CSV 解析错误：", error);

src/views/performance/components/EditAnalysis.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2024-12-24 10:48:23
+ * @LastEditTime: 2024-12-27 14:13:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
@@ -86,51 +86,64 @@
             </el-table>
           </div>
         </el-col>
-        <el-col
-          :span="24"
-          v-if="form.configAnalysis === '发电效能评价数字化指标分析'"
+        <el-col :span="24" v-if="form.configAnalysis === 'production_indicator'"
           ><div class="left">
             <el-table
-              :data="tableData"
+              :data="productionIndicatorCsvData"
               border
               style="width: 100%"
               align="center"
             >
-              <el-table-column prop="date" label="风电机组可利用率">
+              <el-table-column prop="EPActualTotal" label="实发电量">
+              </el-table-column>
+              <el-table-column prop="TurbinePowerRate" label="风机能量利用率">
               </el-table-column>
-              <el-table-column prop="name" label="能量利用率">
+              <el-table-column prop="EPLostStopPercent" label="停机损失百分比">
               </el-table-column>
-              <el-table-column prop="name" label="应发电量"> </el-table-column>
-              <el-table-column prop="name" label="实发电量"> </el-table-column>
-              <el-table-column prop="name" label="停机损失电量">
+              <el-table-column prop="EPLostBadPercent" label="欠发损失百分比">
               </el-table-column>
-              <el-table-column prop="name" label="停机损失电量百分比">
+              <el-table-column
+                prop="EPLostPerformPercent"
+                label="功率曲线未达标损失百分比"
+              >
               </el-table-column>
-              <el-table-column prop="name" label="欠发损失电量">
+              <el-table-column prop="EPLostLimitPercent" label="限电损失百分比">
               </el-table-column>
-              <el-table-column prop="name" label="欠发损失电量百分比">
+              <el-table-column prop="TurbineRunRate" label="风机可利用率">
               </el-table-column>
-              <el-table-column prop="name" label="限电损失电量">
+              <el-table-column prop="mean_width" label="功率水平平均宽度">
               </el-table-column>
-              <el-table-column prop="name" label="限电损失电量百分比">
+              <el-table-column prop="variance_width" label="功率水平方差">
               </el-table-column>
-              <el-table-column prop="name" label="功率曲线未达标损失电量">
+              <el-table-column prop="WindSpeedAvr" label="平均风速">
               </el-table-column>
-              <el-table-column prop="name" label="功率曲线未达标损失电量百分比">
+              <el-table-column prop="Thi" label="利用小时"> </el-table-column>
+              <el-table-column prop="Ws" label="功率曲线一致性系数">
               </el-table-column>
               <el-table-column
-                prop="name"
-                label="功率散点不同水平功率带分布宽度"
+                v-if="form.turbines !== '' && form.turbines !== null"
+                prop="Qp"
+                label="风场总发电量"
               >
               </el-table-column>
               <el-table-column
-                prop="name"
-                label="功率散点水平平均功率带分布平均宽度"
+                v-if="form.turbines !== '' && form.turbines !== null"
+                prop="Thc"
+                label="风场等效利用小时"
               >
               </el-table-column>
-              <el-table-column prop="name" label="功率散点分布异常特征值">
+              <el-table-column
+                v-if="form.turbines !== '' && form.turbines !== null"
+                prop="Rdr"
+                label="风场弃风率"
+              >
+              </el-table-column>
+              <el-table-column
+                v-if="form.turbines !== '' && form.turbines !== null"
+                prop="Qdr"
+                label="风场弃风电量"
+              >
               </el-table-column>
-              <el-table-column prop="name" label="平均风速"> </el-table-column>
             </el-table>
           </div>
         </el-col>
@@ -406,7 +419,8 @@
           <template
             v-if="
               form.configAnalysis !== 'yaw_error' &&
-              form.configAnalysis !== 'power_curve'
+              form.configAnalysis !== 'power_curve' &&
+              form.configAnalysis !== 'production_indicator'
             "
           >
             <el-col :span="24">
@@ -438,7 +452,6 @@
                 ></iframe>
               </el-col>
             </template>
-
             <el-col :span="24">
               <div
                 style="font-weight: 700; font-size: 16px"
@@ -565,6 +578,8 @@ export default {
       flage: false,
       csvData: [], // 解析后的数据
       csvHeaders: [], // CSV 表头
+      productionIndicatorCsvData: [],
+      productionIndicatorCsvHeader: [],
       rules: {
         commentTypeName: {
           required: true,
@@ -614,6 +629,7 @@ export default {
   created() {
     //获取分析 分析类型、机组编号 列表
     // this.getWindCodeList();
+    console.log(this.form.configAnalysis, "1111this.form.configAnalysis");
   },
   methods: {
     iframeLoad() {
@@ -691,6 +707,7 @@ export default {
       formData.append("batchCode", this.$route.query.batchCode);
       formData.append("analysisTypeCode", this.form.configAnalysis);
       formData.append("fieldEngineCode", this.form.turbines);
+
       //获取详情信息
       this.loading = true;
       try {
@@ -727,9 +744,14 @@ export default {
               ? this.editableTabs[0].commentTypeCode
               : "";
         }
+        console.log(this.form.configAnalysis, "this.form.configAnalysis");
+        const fileUrl = response.data[0].generalFiles[0].fileAddr;
         if (this.form.configAnalysis === "yaw_error") {
-          this.getCsvData(response.data[0].generalFiles[0].fileAddr);
+          this.fetchCsvData("yaw_error", fileUrl);
+        } else if (this.form.configAnalysis === "production_indicator") {
+          this.fetchCsvData("production_indicator", fileUrl);
         }
+
         //有功功率的数据处理
         if (this.form.configAnalysis === "power_curve") {
           try {
@@ -891,8 +913,8 @@ export default {
       // );
       return powerCurveTableData.flat();
     },
-    getCsvData(url) {
-      // 使用 axios 获取 CSV 文件
+    // 封装的获取 CSV 数据方法
+    fetchCsvData(analysisType, url) {
       axios
         .get(url, { responseType: "blob" }) // 确保数据以 blob 格式返回
         .then((response) => {
@@ -902,10 +924,25 @@ export default {
             Papa.parse(csvText, {
               header: true, // 使用 CSV 第一行作为键
               complete: (result) => {
-                this.csvHeaders = Object.keys(result.data[0]);
-                this.csvData = result.data.filter(
-                  (row) => Object.keys(row).length
-                ); // 过滤空行
+                // 根据分析类型设置不同的数据
+                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 = Object.keys(
+                    result.data[0]
+                  );
+                  this.productionIndicatorCsvData = result.data.filter(
+                    (row) => Object.keys(row).length
+                  ); // 过滤空行
+                  console.log(
+                    this.productionIndicatorCsvHeader,
+                    result.data,
+                    "result.data"
+                  );
+                }
               },
               error: (error) => {
                 console.error("CSV 解析错误：", error);
@@ -918,6 +955,34 @@ export default {
           console.error("无法获取 CSV 文件：", error);
         });
     },
+
+    // getCsvData(url) {
+    //   // 使用 axios 获取 CSV 文件
+    //   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) => {
+    //             this.csvHeaders = Object.keys(result.data[0]);
+    //             this.csvData = result.data.filter(
+    //               (row) => Object.keys(row).length
+    //             ); // 过滤空行
+    //           },
+    //           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) => {
@@ -969,6 +1034,7 @@ export default {
     //修改赋值
     async getWindCodeList() {
       this.loading = true;
+      console.log(this.form.configAnalysis, "this.form.configAnalysis");
       try {
         const resAnalysisedType = await queryAnalysisedType({
           batchCode: this.$route.query.batchCode,

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/Heatmap.js

@@ -1,12 +1,134 @@
-/*
- * @Author: your name
- * @Date: 2024-11-28 10:31:21
- * @LastEditTime: 2024-12-26 09:56:47
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/Heatmap.js
- */
+// /*
+//  * @Author: your name
+//  * @Date: 2024-11-28 10:31:21
+//  * @LastEditTime: 2024-12-26 17:26:25
+//  * @LastEditors: bogon
+//  * @Description: In User Settings Edit
+//  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/Heatmap.js
+//  */
+// import { filterData } from "../dargChartFIlter";
+// export function handleHeatmapPlotChartLogic(
+//   item,
+//   formLabelAlign,
+//   formFilterAlign,
+//   isFilter,
+//   type
+// ) {
+//   // 数据筛选逻辑
+//   if (isFilter === "filter") {
+//     const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
+//       label: yItem.label,
+//       id: yItem.id,
+//       data: yItem.data.map((val) => {
+//         const filters = formFilterAlign[index]?.filters || [];
+//         // 排除 null 数据和不符合筛选条件的数据
+//         return val === null ||
+//           (filters.length > 0 && !filters.includes(val[yItem.label]))
+//           ? null
+//           : val;
+//       }),
+//     }));
+//     // 条件筛选逻辑
+//     const filterList = filterResult.map((filteredItem, index) => {
+//       const filter = formFilterAlign[index];
+//       const { filterType1, filterType2, number1, number2 } = filter;
+
+//       if (
+//         (number1 === null || number1 === "") &&
+//         (number2 === null || number2 === "")
+//       ) {
+//         return {
+//           label: filteredItem.label,
+//           id: filteredItem.id,
+//           data: filteredItem.data,
+//         };
+//       } else {
+//         const filterDatas = filterData(
+//           filter,
+//           filteredItem.data,
+//           filteredItem.label
+//         );
+//         return {
+//           label: filteredItem.label,
+//           id: filteredItem.id,
+//           data: [...filterDatas],
+//         };
+//       }
+//     });
+//     item.Xdata = formLabelAlign.Xdata;
+//     item.Ydata = filterList;
+//   } else {
+//     item.Xdata = formLabelAlign.Xdata;
+//     item.Ydata = formLabelAlign.Ydata;
+//   }
+//   // 生成数据
+//   if (
+//     item.Xdata.length > 1 &&
+//     item.Xdata[1]?.data?.length > 0 &&
+//     item.Ydata.length > 0 &&
+//     item.Ydata[0]?.data?.length > 0
+//   ) {
+//     // 初始化 series 数据
+//     item.option.series = [];
+//     const xAxisData = item.Xdata[0].data
+//       .map((xitem) => xitem[item.Xdata[0].label])
+//       .filter((val) => val !== null && val !== "" && val !== undefined);
+//     const yAxisData = item.Xdata[1].data
+//       .map((xitem) => xitem[item.Xdata[1].label])
+//       .filter((val) => val !== null && val !== "" && val !== undefined);
+//     // 设置 x 和 y 轴标签
+//     item.option.xAxis = {
+//       ...item.option.xAxis,
+//       name: formLabelAlign.Xlable,
+//       data: xAxisData,
+//     };
+//     item.option.yAxis = {
+//       ...item.option.yAxis,
+//       name: formLabelAlign.Ylable,
+//       data: yAxisData,
+//     };
+//     // 初始化热力图数据
+//     const data1 = [];
+//     for (let z = 0; z < xAxisData.length; z++) {
+//       for (let i = 0; i < yAxisData.length; i++) {
+//         // 在 Ydata[0].data 中查找匹配的值
+//         const matchedValue = item.Ydata[0].data.find(
+//           (yval) =>
+//             yval !== null &&
+//             yval[item.Xdata[0].label] === xAxisData[z] &&
+//             yval[item.Xdata[1].label] === yAxisData[i]
+//         );
+//         // 如果找到匹配值，则取 Ydata[0].label 的值，否则为 null
+//         const value = matchedValue ? matchedValue[item.Ydata[0].label] : null;
+//         // 将值推入 data1
+//         data1.push([i, z, value]);
+//       }
+//     }
+//     // 转换数据结构（如有必要）
+//     const formattedData = data1.map((item) => [
+//       item[1],
+//       item[0],
+//       item[2] || "-",
+//     ]);
+
+//     item.option.series = [
+//       {
+//         type: "heatmap",
+//         data: formattedData,
+//         progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+//         progressive: true, // 启用渐进式渲染
+//         emphasis: {
+//           itemStyle: {
+//             shadowBlur: 10,
+//             shadowColor: "rgba(0, 0, 0, 0.5)",
+//           },
+//         },
+//       },
+//     ];
+//   }
+// }
 import { filterData } from "../dargChartFIlter";
+
 export function handleHeatmapPlotChartLogic(
   item,
   formLabelAlign,
@@ -14,6 +136,7 @@ export function handleHeatmapPlotChartLogic(
   isFilter,
   type
 ) {
+  console.log("1");
   // 数据筛选逻辑
   if (isFilter === "filter") {
     const filterResult = formLabelAlign.Ydata.map((yItem, index) => ({
@@ -28,10 +151,11 @@ export function handleHeatmapPlotChartLogic(
           : val;
       }),
     }));
+    console.log("2");
     // 条件筛选逻辑
     const filterList = filterResult.map((filteredItem, index) => {
-      const filter = formFilterAlign[index];
-      const { filterType1, filterType2, number1, number2 } = filter;
+      const { filterType1, filterType2, number1, number2 } =
+        formFilterAlign[index];
 
       if (
         (number1 === null || number1 === "") &&
@@ -44,7 +168,7 @@ export function handleHeatmapPlotChartLogic(
         };
       } else {
         const filterDatas = filterData(
-          filter,
+          formFilterAlign[index],
           filteredItem.data,
           filteredItem.label
         );
@@ -55,12 +179,14 @@ export function handleHeatmapPlotChartLogic(
         };
       }
     });
+
     item.Xdata = formLabelAlign.Xdata;
     item.Ydata = filterList;
   } else {
     item.Xdata = formLabelAlign.Xdata;
     item.Ydata = formLabelAlign.Ydata;
   }
+  console.log(item.Xdata, item.Ydata, "3");
   // 生成数据
   if (
     item.Xdata.length > 1 &&
@@ -70,53 +196,59 @@ export function handleHeatmapPlotChartLogic(
   ) {
     // 初始化 series 数据
     item.option.series = [];
-    const xAxisData = item.Xdata[0].data
-      .map((xitem) => xitem[item.Xdata[0].label])
-      .filter((val) => val !== null && val !== "" && val !== undefined);
-    const yAxisData = item.Xdata[1].data
-      .map((xitem) => xitem[item.Xdata[1].label])
-      .filter((val) => val !== null && val !== "" && val !== undefined);
-    // 设置 x 和 y 轴标签
+
+    // 提取 X 和 Y 轴数据
+    // 提取 X轴 和 Y轴 数据
+    const xAxisData = item.Xdata[0].data.map(
+      (xItem) => xItem[item.Xdata[0].label]
+    );
+    const yAxisData = item.Xdata[1].data.map(
+      (yItem) => yItem[item.Xdata[1].label]
+    );
+    console.log("4");
+    // 设置 ECharts 的 x 和 y 轴
     item.option.xAxis = {
       ...item.option.xAxis,
+      type: "category",
       name: formLabelAlign.Xlable,
       data: xAxisData,
     };
+
     item.option.yAxis = {
       ...item.option.yAxis,
+      type: "category",
       name: formLabelAlign.Ylable,
       data: yAxisData,
     };
-    // 初始化热力图数据
-    const data1 = [];
-    for (let z = 0; z < xAxisData.length; z++) {
-      for (let i = 0; i < yAxisData.length; i++) {
-        // 在 Ydata[0].data 中查找匹配的值
-        const matchedValue = item.Ydata[0].data.find(
-          (yval) =>
-            yval !== null &&
-            yval[item.Xdata[0].label] === xAxisData[z] &&
-            yval[item.Xdata[1].label] === yAxisData[i]
-        );
-        // 如果找到匹配值，则取 Ydata[0].label 的值，否则为 null
-        const value = matchedValue ? matchedValue[item.Ydata[0].label] : null;
-        // 将值推入 data1
-        data1.push([i, z, value]);
+    // 设置 x 和 y 轴标签
+    // 准备热力图数据
+    const heatmapData = [];
+
+    // 遍历每个 SalesID 和 PrdctID 的组合
+    for (let i = 0; i < yAxisData.length; i++) {
+      for (let j = 0; j < xAxisData.length; j++) {
+        // 找到对应的 Amount 值
+        const amountValue =
+          item.Ydata[0].data[j] && item.Ydata[0].data[i]
+            ? item.Ydata[0].data[j][item.Ydata[0].label]
+            : null;
+
+        // 如果找到有效值，则将其加入热力图数据中
+        if (amountValue !== null || amountValue !== undefined) {
+          heatmapData.push([i, j, amountValue]); // [yIndex, xIndex, value]
+        }
       }
     }
-    // 转换数据结构（如有必要）
-    const formattedData = data1.map((item) => [
-      item[1],
-      item[0],
-      item[2] || "-",
-    ]);
+    console.log(heatmapData, "heatmapData");
 
+    // 生成热力图数据
     item.option.series = [
       {
         type: "heatmap",
-        data: formattedData,
+        data: heatmapData,
         progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
         progressive: true, // 启用渐进式渲染
+        renderMode: "webgl", // 启用 WebGL 渲染
         emphasis: {
           itemStyle: {
             shadowBlur: 10,

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/boxPlot.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-27 15:20:57
- * @LastEditTime: 2024-12-26 09:56:13
+ * @LastEditTime: 2024-12-27 15:11:52
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/boxPlot.js
@@ -112,6 +112,7 @@ export function handleBoxPlotChartLogic(
       type: "boxplot",
       progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
       progressive: true, // 启用渐进式渲染
+      renderMode: "webgl", // 启用 WebGL 渲染
       data: boxplotData,
     });
   }

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pareto.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-27 09:59:10
- * @LastEditTime: 2024-12-26 09:57:24
+ * @LastEditTime: 2024-12-26 15:54:13
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pareto.js
@@ -77,8 +77,8 @@ function generateSeriesData(dataSource, xData, yData, labelKey) {
           }
           // 返回有效的散点数据
           return [
-            xData[ind]?.data[valInd][xData[ind].label], // x轴数据
-            val[item.label], // y轴数据
+            String(xData[ind]?.data[valInd][xData[ind].label]), // x轴数据
+            String(val[item.label]), // y轴数据
           ];
         })
         .filter(Boolean), // 使用 filter 去除 null 值

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pie.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-26 16:33:45
- * @LastEditTime: 2024-12-26 09:57:53
+ * @LastEditTime: 2024-12-27 15:12:21
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pie.js
@@ -69,6 +69,7 @@ export function handlePieChartLogic(
       radius: "60%",
       progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
       progressive: true, // 启用渐进式渲染
+      renderMode: "webgl", // 启用 WebGL 渲染
       data:
         yItem.data &&
         yItem.data.map((val, valIndex) => {

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/radar.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-21 09:40:55
- * @LastEditTime: 2024-12-26 09:58:03
+ * @LastEditTime: 2024-12-27 15:12:28
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/radar.js
@@ -73,27 +73,13 @@ export function handleRadarChartLogic(
         data: fitem.data.filter((fval) => fval !== null),
       };
     });
-    console.log(filterList, item.Ydata, "filterList");
   } else {
     item.Xdata = formLabelAlign.Xdata;
     item.Ydata = formLabelAlign.Ydata;
   }
-
-  // 设置纬度（indicator）并去重
-  if (item.Xdata.length > 0 && item.Xdata[0].data?.length > 0) {
-    const radarIndicators = Array.from(
-      new Set(
-        item.Xdata.flatMap((xItem) =>
-          xItem.data.map((xVal) => xVal[xItem.label])
-        )
-      )
-    )
-      .filter((name) => name !== undefined) // 过滤掉 undefined
-      .map((name) => ({ name }));
-
-    item.option.radar.indicator = radarIndicators;
-  }
-
+  item.option.radar.indicator = item.Xdata[0].data.map((items) => ({
+    name: items[item.Xdata[0].label],
+  }));
   // 设置系列（series），对相同纬度的数据值进行求和
   if (
     item.Ydata.length > 0 &&
@@ -102,33 +88,39 @@ export function handleRadarChartLogic(
     item.Xdata[0]?.data?.length > 0
   ) {
     const seriesData = item.Ydata.map((yItem) => {
-      const summedValues = item.option.radar.indicator.map((indicator) => {
-        const filteredValues = yItem.data.filter(
-          (yVal) => yVal[item.Xdata[0].label] === indicator.name
-        );
-
-        // 跳过 null 和非数字值
-        return filteredValues.reduce((sum, val) => {
-          const numericValue = Number(val[yItem.label]);
-          return !isNaN(numericValue) ? sum + numericValue : sum;
-        }, 0);
-      });
-
       return {
         name: yItem.label,
-        value: summedValues,
+        value: yItem.data.map((yObj) =>
+          !isNaN(Number(yObj[yItem.label])) ? Number(yObj[yItem.label]) : 0
+        ),
       };
     });
-
+    console.log(seriesData, "seriesData");
     item.option.series = [
       {
         type: "radar",
         progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
         progressive: true, // 启用渐进式渲染
         data: seriesData,
+        renderMode: "webgl", // 启用 WebGL 渲染
       },
     ];
   } else {
     item.option.series = []; // 无数据时清空系列
   }
+  item.option.tooltip = {
+    trigger: "item", // 鼠标悬停时触发 tooltip
+    axisPointer: {
+      type: "shadow", // 使用阴影指示
+    },
+    formatter: function (params) {
+      // 获取当前鼠标悬停项对应的维度名称和数据值
+      const indicatorName = params.seriesName; // 获取 series 的名称
+      const indicatorIndex = params.dataIndex; // 获取当前维度的索引
+      const value = params.value[indicatorIndex]; // 获取当前维度的值
+
+      // 返回自定义 tooltip 内容
+      return `${params.name}: ${value}`; // 只显示当前维度的值
+    },
+  };
 }

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/roseChart.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-26 16:33:38
- * @LastEditTime: 2024-12-26 09:58:11
+ * @LastEditTime: 2024-12-27 15:12:41
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/roseChart.js
@@ -79,6 +79,7 @@ export function handleRoseChartChartLogic(
       coordinateSystem: "polar",
       progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
       progressive: true, // 启用渐进式渲染
+      renderMode: "webgl", // 启用 WebGL 渲染
       data:
         yitem.data &&
         yitem.data.map((val) => {

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/sankeyDiagram.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-27 17:15:51
- * @LastEditTime: 2024-12-26 09:58:23
+ * @LastEditTime: 2024-12-27 15:12:49
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/sankeyDiagram.js
@@ -65,7 +65,7 @@ export function handleSankeyDiagramPlotChartLogic(
   console.log(item.Xdata, item.Ydata, "item.Xdata,item.Ydata");
   // 设置 X 轴
   const xData = formLabelAlign.Xdata.flatMap((item) =>
-    item.data.map((val) => val[item.label])
+    item.data.map((val) => val[item.label] + "")
   ).filter((val) => val !== null && val !== undefined && val !== ""); // 排除 null 和 undefined
   // 对 xData 去重并转换为 [{name: ''}, {name: ''}] 的格式
   const uniqueXData = [...new Set(xData)].map((name) => ({ name }));
@@ -95,8 +95,8 @@ export function handleSankeyDiagramPlotChartLogic(
         );
         // 检查所有值是否有效
         sankeyDiagramData.push({
-          source: values[0],
-          target: values[1],
+          source: String(values[0]),
+          target: String(values[1]),
           value: values[2],
         });
       }
@@ -111,6 +111,7 @@ export function handleSankeyDiagramPlotChartLogic(
         },
         progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
         progressive: true, // 启用渐进式渲染
+        renderMode: "webgl", // 启用 WebGL 渲染
         data: uniqueXData,
         links: sankeyDiagramData,
         lineStyle: {

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/stackedBar.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-27 09:36:28
- * @LastEditTime: 2024-12-26 09:59:03
+ * @LastEditTime: 2024-12-27 15:13:05
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/stackedBar.js
@@ -82,6 +82,7 @@ export function handlestackedBarChartLogic(
         stack: "d",
         progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
         progressive: true, // 启用渐进式渲染
+        renderMode: "webgl", // 启用 WebGL 渲染
         data: item.data.map(
           (data) => parseFloat(data !== null && data[item.label]) || 0
         ), // 将数据转换为数值

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartTitle.vue

@@ -22,7 +22,7 @@
               placement="bottom-start"
               v-if="
                 curEdit.type === 'scatter' ||
-                curEdit.type === 'radar' ||
+                // curEdit.type === 'radar' ||
                 curEdit.type === 'sankeyDiagram' ||
                 curEdit.type === 'Heatmap'
               "
@@ -74,7 +74,7 @@
               <el-tooltip
                 v-if="
                   curEdit.type === 'scatter' ||
-                  curEdit.type === 'radar' ||
+                  // curEdit.type === 'radar' ||
                   curEdit.type === 'sankeyDiagram' ||
                   curEdit.type === 'Heatmap'
                 "
@@ -195,15 +195,19 @@
           "
         >
           <span>线纬度标签</span>
-          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
+          <el-tooltip
+            content="添加纬度"
+            placement="bottom-start"
+            v-if="curEdit.type === 'Cp'"
+          >
             <i
               @click="
-                formLabelAlign.LineXdata.push({ lable: '', data: [], id: '' })
+                formLabelAlign.LineXdata.push({ label: '', data: [], id: '' })
               "
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip> -->
+          </el-tooltip>
         </div>
         <template v-for="(item, ind) in formLabelAlign.LineXdata">
           <div class="attributeItemData">
@@ -222,11 +226,12 @@
                 :key="item.id + ind"
               ></el-option>
             </el-select>
-            <!-- <el-tooltip
+            <el-tooltip
+              v-if="curEdit.type === 'Cp'"
               :content="
                 formLabelAlign.LineXdata.length <= 1
-                  ? '该指标不可删除，最少存在一组指标'
-                  : '删除该指标'
+                  ? '该维度不可删除，最少存在一组指标'
+                  : '删除该维度指标'
               "
               placement="bottom-start"
             >
@@ -240,7 +245,7 @@
                   style="font-size: 16px; color: red; padding: 0 0 0 10px"
                 ></i
               ></el-button>
-            </el-tooltip> -->
+            </el-tooltip>
           </div>
         </template>
       </el-form-item>
@@ -326,7 +331,7 @@
           >
             <i
               @click="
-                formLabelAlign.BarXdata.push({ lable: '', data: [], id: '' })
+                formLabelAlign.BarXdata.push({ label: '', data: [], id: '' })
               "
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
@@ -449,7 +454,7 @@
             <i
               @click="
                 formLabelAlign.ScatterXdata.push({
-                  lable: '',
+                  label: '',
                   data: [],
                   id: '',
                 })
@@ -714,6 +719,7 @@ export default {
   data() {
     return {
       value: "all",
+      checkList: [],
       formFilterAlign: [
         {
           filters: [],
@@ -856,7 +862,12 @@ export default {
     dataBaseCheckList: {
       handler(newVal) {
         this.disabled = newVal.length === 0 ? true : false;
-        this.selectData = newVal;
+        const objData = newVal.map((item) => item.fileObj);
+
+        const flattenedArray = objData.reduce((acc, subArray) => {
+          return acc.concat(subArray);
+        }, []);
+        this.selectData = flattenedArray;
       },
       immediate: true, // 组件加载时立即检查
       deep: true, // 深度监听
@@ -882,7 +893,7 @@ export default {
             );
             return;
           }
-          this.formLabelAlign.Xdata.push({ lable: "", data: [], id: "" });
+          this.formLabelAlign.Xdata.push({ label: "", data: [], id: "" });
           break;
       }
     },
@@ -900,7 +911,7 @@ export default {
             return;
           }
 
-          this.formLabelAlign.Ydata.push({ lable: "", data: [], id: "" });
+          this.formLabelAlign.Ydata.push({ label: "", data: [], id: "" });
           this.formFilterAlign.push({
             filters: [],
             filterType1: "",
@@ -911,7 +922,7 @@ export default {
           });
           break;
         case "bar":
-          this.formLabelAlign.BarYdata.push({ lable: "", data: [], id: "" });
+          this.formLabelAlign.BarYdata.push({ label: "", data: [], id: "" });
           this.formFilterAlign.push({
             filters: [],
             filterType1: "",
@@ -922,7 +933,7 @@ export default {
           });
           break;
         case "line":
-          this.formLabelAlign.LineYdata.push({ lable: "", data: [], id: "" });
+          this.formLabelAlign.LineYdata.push({ label: "", data: [], id: "" });
           this.formFilterAlign.push({
             filters: [],
             filterType1: "",
@@ -934,7 +945,7 @@ export default {
           break;
         case "scatter":
           this.formLabelAlign.ScatterYdata.push({
-            lable: "",
+            label: "",
             data: [],
             id: "",
           });
@@ -1014,10 +1025,19 @@ export default {
     },
     updateAxisData(axisData) {
       axisData.forEach((item, index) => {
-        const selected = this.selectData.find(
+        let selected = this.selectData.find(
           (val) => (val && val.id) === (item && item.id)
         );
+
         if (selected) {
+          this.dataBaseCheckList.map((baseItem) => {
+            if (selected.parentId === baseItem.parentId) {
+              selected.fileData = baseItem.fileData.map((baseObj) => ({
+                [selected.label]: baseObj[selected.label],
+              }));
+            }
+          });
+          console.log(selected, "dataBaseCheckList updateAxisData");
           Vue.set(axisData, index, {
             ...item,
             label: selected.label || "",
@@ -1035,7 +1055,6 @@ export default {
           break;
         case "bar":
           this.formLabelAlign.BarYdata.splice(index, 1); // 删除当前项
-
           break;
         case "line":
           this.formLabelAlign.LineYdata.splice(index, 1); // 删除当前项

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/configFn.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-12 09:27:50
- * @LastEditTime: 2024-12-26 09:55:59
+ * @LastEditTime: 2024-12-27 15:11:28
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/configFn.js
@@ -30,6 +30,7 @@ export const getFormattedSeries = (data, chartType) => {
       type: chartType,
       progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
       progressive: true, // 启用渐进式渲染
+      renderMode: "webgl", // 启用 WebGL 渲染
       data: item.data.map(
         (data) => parseFloat(data !== null && data[item.label]) || 0
       ), // 将数据转换为数值

src/views/performance/components/custonAsCom/dragChart/components/chartsData.vue

@@ -128,13 +128,12 @@ export default {
               });
             }
           });
-        console.log(newDatas, "newDatas");
-        // checkData=[{fileData:[],fileObj:[{}],parentId:''}]
-        this.updateDataBase(
-          this.$refs.tree
-            .getCheckedNodes()
-            .filter((obj) => obj.children === undefined)
-        );
+        // this.updateDataBase(
+        //   this.$refs.tree
+        //     .getCheckedNodes()
+        //     .filter((obj) => obj.children === undefined)
+        // );
+        this.updateDataBase(newDatas);
       }
     },
     // 父节点复选框改变时递归设置子节点状态

vue.config.js

@@ -82,18 +82,17 @@ module.exports = {
           "^/WZLapi": "", // 去掉 /WZLapi 前缀
         },
       },
-         // 文佳
-         "/WJapi": {
-          // target: "http://192.168.50.235:8888", // WZLapi 内网 目标地址
-          target: "http://106.120.102.238:18888", // WZLapi 内网 目标地址
-          changeOrigin: true,
-          pathRewrite: {
-            "^/WJapi": "", // 去掉 /WZLapi 前缀
-          },
-          onProxyReq(proxyReq, req, res) {
-            console.log("Proxying /sAlgorithm request to:", proxyReq.path); // 打印代理请求路径
-          },
-        
+      // 文佳
+      "/WJapi": {
+        // target: "http://192.168.50.235:8888", // WZLapi 内网 目标地址
+        target: "http://106.120.102.238:18888", // WZLapi 内网 目标地址
+        changeOrigin: true,
+        pathRewrite: {
+          "^/WJapi": "", // 去掉 /WZLapi 前缀
+        },
+        onProxyReq(proxyReq, req, res) {
+          console.log("Proxying /sAlgorithm request to:", proxyReq.path); // 打印代理请求路径
+        },
       },
       // 数据转换亮亮
       "/transDataWeb": {