修改updateDataBase保存方法

src/assets/js/constants/echarts-config/bar.js

@@ -51,6 +51,8 @@ export const option = {
       type: "bar",
       barWidth: "60%",
       data: [10, 52, 200, 334, 390, 330, 220],
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       markPoint: {
         data: [
           { type: "max", name: "Max" },

src/utils/vuexIndexedDBPlugin.js

@@ -1,15 +1,162 @@
+// import { saveData, getData } from "@/utils/indexedDb";
+// import { stringify, parse } from "flatted"; // 用于处理循环引用 压缩数据处理
+// import pako from "pako";
+// import { Message } from "element-ui";
+
+// // 通用分片函数
+// const splitIntoChunks = (data, chunkSize) => {
+//   const chunks = [];
+//   for (let i = 0; i < data.length; i += chunkSize) {
+//     chunks.push(data.slice(i, i + chunkSize));
+//   }
+//   return chunks;
+// };
+
+// // 修改后的 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("dragChart_chunk_meta")) {
+//         db.createObjectStore("dragChart_chunk_meta");
+//       }
+//       if (!db.objectStoreNames.contains("dragChart_compressed")) {
+//         db.createObjectStore("dragChart_compressed");
+//       }
+//       if (!db.objectStoreNames.contains("myIndexedDB")) {
+//         db.createObjectStore("myIndexedDB");
+//       }
+//     };
+//   });
+// };
+
+// // vuex 插件
+// const vuexIndexedDBPlugin = (store) => {
+//   const dbName = "vuexDB";
+//   const keyName = "vuexState";
+
+//   // 过滤 Vuex 状态，去掉不可序列化的部分
+//   const filterState = (state) => {
+//     const clonedState = JSON.parse(
+//       JSON.stringify(state, (key, value) => {
+//         // 如果是函数或无法克隆的对象，返回 undefined
+//         if (typeof value === "function") return undefined;
+//         return value;
+//       })
+//     );
+//     return clonedState;
+//   };
+//   // 初始化 IndexedDB 并加载状态
+//   openDB(dbName, 1).then(() => {
+//     getData(dbName, keyName).then((savedState) => {
+//       if (savedState) {
+//         store.replaceState({
+//           ...store.state,
+//           ...savedState,
+//         });
+//       }
+//     });
+//   });
+
+//   // 订阅 Vuex mutations，每次状态变更时保存到 IndexedDB
+//   store.subscribe((mutation, state) => {
+//     if (mutation.type.startsWith("dragChart/")) {
+//       const dragChartState = state.dragChart;
+
+//       try {
+//         const cleanedState = JSON.parse(
+//           JSON.stringify(dragChartState, (key, value) => {
+//             if (
+//               typeof value === "function" ||
+//               value instanceof HTMLElement ||
+//               value === undefined
+//             ) {
+//               return undefined;
+//             }
+//             return value;
+//           })
+//         );
+
+//         // 压缩或分片存储
+//         const chunkSize = 500;
+//         if (
+//           cleanedState.currentChartList &&
+//           Array.isArray(cleanedState.currentChartList)
+//         ) {
+//           const chunks = splitIntoChunks(
+//             cleanedState.currentChartList,
+//             chunkSize
+//           );
+//           chunks.forEach((chunk, index) => {
+//             const chunkKey = `dragChart_chunk_${index}`;
+//             saveData("myIndexedDB", chunkKey, chunk)
+//               .then(() => {
+//                 console.log(`Chunk ${index} saved successfully`);
+//               })
+//               .catch((error) =>
+//                 console.error(`Failed to save chunk ${index}:`, error)
+//               );
+//           });
+
+//           saveData("myIndexedDB", "dragChart_chunk_meta", {
+//             totalChunks: chunks.length,
+//           });
+//         }
+
+//         // 存储压缩的元数据
+//         const compressedData = pako.deflate(stringify(cleanedState), {
+//           to: "string",
+//         });
+//         saveData("myIndexedDB", "dragChart_compressed", compressedData)
+//           .then(() => {
+//             //console.log("Compressed metadata saved")
+//           })
+//           .catch((error) =>
+//             console.error("Failed to save compressed metadata:", error)
+//           );
+//       } catch (error) {
+//         console.error("Error processing dragChart state:", error);
+//         Message({
+//           message: "数据存储已满，请刷新页面进行数据清除" + error,
+//           type: "error",
+//         });
+//       }
+//     }
+//   });
+// };
+
+// export default vuexIndexedDBPlugin;
 import { saveData, getData } from "@/utils/indexedDb";
-import { stringify, parse } from "flatted"; // 用于处理循环引用 压缩数据处理
-import pako from "pako";
 import { Message } from "element-ui";
 
-// 通用分片函数
-const splitIntoChunks = (data, chunkSize) => {
-  const chunks = [];
-  for (let i = 0; i < data.length; i += chunkSize) {
-    chunks.push(data.slice(i, i + chunkSize));
-  }
-  return chunks;
+// 通用的过滤 Vuex 状态，去掉不可序列化的部分
+const filterState = (state) => {
+  const clonedState = JSON.parse(
+    JSON.stringify(state, (key, value) => {
+      // 如果是函数或无法克隆的对象，返回 undefined
+      if (
+        typeof value === "function" ||
+        value instanceof HTMLElement ||
+        value === undefined
+      ) {
+        return undefined;
+      }
+      return value;
+    })
+  );
+  return clonedState;
 };
 
 // 修改后的 openDB 方法
@@ -29,12 +176,6 @@ const openDB = (dbName, version) => {
       const db = event.target.result;
 
       // 创建对象存储（如果不存在）
-      if (!db.objectStoreNames.contains("dragChart_chunk_meta")) {
-        db.createObjectStore("dragChart_chunk_meta");
-      }
-      if (!db.objectStoreNames.contains("dragChart_compressed")) {
-        db.createObjectStore("dragChart_compressed");
-      }
       if (!db.objectStoreNames.contains("myIndexedDB")) {
         db.createObjectStore("myIndexedDB");
       }
@@ -47,17 +188,6 @@ const vuexIndexedDBPlugin = (store) => {
   const dbName = "vuexDB";
   const keyName = "vuexState";
 
-  // 过滤 Vuex 状态，去掉不可序列化的部分
-  const filterState = (state) => {
-    const clonedState = JSON.parse(
-      JSON.stringify(state, (key, value) => {
-        // 如果是函数或无法克隆的对象，返回 undefined
-        if (typeof value === "function") return undefined;
-        return value;
-      })
-    );
-    return clonedState;
-  };
   // 初始化 IndexedDB 并加载状态
   openDB(dbName, 1).then(() => {
     getData(dbName, keyName).then((savedState) => {
@@ -76,60 +206,25 @@ const vuexIndexedDBPlugin = (store) => {
       const dragChartState = state.dragChart;
 
       try {
-        const cleanedState = JSON.parse(
-          JSON.stringify(dragChartState, (key, value) => {
-            if (
-              typeof value === "function" ||
-              value instanceof HTMLElement ||
-              value === undefined
-            ) {
-              return undefined;
-            }
-            return value;
-          })
-        );
-
-        // 压缩或分片存储
-        const chunkSize = 500;
-        if (
-          cleanedState.currentChartList &&
-          Array.isArray(cleanedState.currentChartList)
-        ) {
-          const chunks = splitIntoChunks(
-            cleanedState.currentChartList,
-            chunkSize
-          );
-          chunks.forEach((chunk, index) => {
-            const chunkKey = `dragChart_chunk_${index}`;
-            saveData("myIndexedDB", chunkKey, chunk)
-              .then(() => {
-                console.log(`Chunk ${index} saved successfully`);
-              })
-              .catch((error) =>
-                console.error(`Failed to save chunk ${index}:`, error)
-              );
-          });
-
-          saveData("myIndexedDB", "dragChart_chunk_meta", {
-            totalChunks: chunks.length,
-          });
-        }
+        // 过滤不需要保存的内容
+        const cleanedState = filterState(dragChartState);
 
-        // 存储压缩的元数据
-        const compressedData = pako.deflate(stringify(cleanedState), {
-          to: "string",
-        });
-        saveData("myIndexedDB", "dragChart_compressed", compressedData)
+        // 直接保存整个状态到 IndexedDB
+        saveData("myIndexedDB", keyName, cleanedState)
           .then(() => {
-            //console.log("Compressed metadata saved")
+            console.log("State saved successfully");
           })
-          .catch((error) =>
-            console.error("Failed to save compressed metadata:", error)
-          );
+          .catch((error) => {
+            console.error("Failed to save state:", error);
+            Message({
+              message: "数据存储失败：" + error,
+              type: "error",
+            });
+          });
       } catch (error) {
         console.error("Error processing dragChart state:", error);
         Message({
-          message: "数据存储已满，请刷新页面进行数据清除" + error,
+          message: "数据存储失败，请刷新页面进行数据清除：" + error,
           type: "error",
         });
       }

src/views/ledger/component/windsiteup.vue

@@ -102,6 +102,7 @@ import {
   saveWindFieldResource,
   getWindEngineMillList,
 } from "@/api/ledger.js";
+
 export default {
   props: {
     uploadingPOP: {

src/views/performance/components/custonAsCom/AssociatedFields.vue

@@ -170,7 +170,6 @@ export default {
       tableDataChart2: [],
     };
   },
-  async created() {},
   computed: {
     ...mapState("dragChart", {
       relatedFieldsData: "relatedFieldsData",

src/views/performance/components/custonAsCom/DatabaseTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-10-28 17:43:21
- * @LastEditTime: 2024-12-06 14:11:30
+ * @LastEditTime: 2024-12-26 09:28:12
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/DatabaseTable.vue
@@ -91,6 +91,7 @@
 import axios from "axios";
 import { storeSetData, initDatabase } from "@/utils/indexedDb";
 import { mapMutations, mapState } from "vuex";
+import { format } from "date-fns";
 export default {
   props: {
     dialogVisible: {
@@ -233,7 +234,7 @@ export default {
             fileData: data[key],
             fileId: `${new Date().getTime()}_${key}`, // 添加唯一时间戳和字段标识
             fileOldName: `${key}.xlsx`, // 文件原始名称
-            filename: `${new Date().getTime()}_${key}.xlsx`, // 包含时间戳的文件名
+            filename: `${format(new Date(), "yyyyMMdd-HH:mm:ss")}_${key}.xlsx`, // 包含时间戳的文件名
           }));
         // 初始化数据库
         const database = await initDatabase();

src/views/performance/components/custonAsCom/dataTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-10-28 16:46:38
- * @LastEditTime: 2024-12-25 09:15:05
+ * @LastEditTime: 2024-12-26 09:13:11
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dataTable.vue

src/views/performance/components/custonAsCom/dragChart/components/chart/index.vue

@@ -65,7 +65,9 @@ export default {
   methods: {
     drawChart() {
       if (!this.myChart) {
-        this.myChart = echarts.init(this.$refs.chart, this.theme);
+        this.myChart = echarts.init(this.$refs.chart, this.theme, {
+          renderer: "svg", // 设置渲染方式为SVG
+        });
       }
       this.myChart.setOption(this.option);
     },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-28 10:31:21
- * @LastEditTime: 2024-11-28 13:43:22
+ * @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
@@ -115,6 +115,8 @@ export function handleHeatmapPlotChartLogic(
       {
         type: "heatmap",
         data: formattedData,
+        progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+        progressive: true, // 启用渐进式渲染
         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-11-27 17:09:21
+ * @LastEditTime: 2024-12-26 09:56:13
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/boxPlot.js
@@ -110,6 +110,8 @@ export function handleBoxPlotChartLogic(
     // 添加到 series
     item.option.series.push({
       type: "boxplot",
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       data: boxplotData,
     });
   }

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

@@ -9,6 +9,8 @@ function generateSeriesData(dataSource, xData, yData, labelKey) {
       name: item.label,
       type: labelKey, // 'line' 或 'scatter'
       renderMode: "webgl", // 启用 WebGL 渲染
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       showSymbol: labelKey === "line" ? true : undefined,
       // itemStyle: {
       //   color: colorPalette[ind], // 为风机A的散点设置单独的颜色

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-11-27 14:32:23
+ * @LastEditTime: 2024-12-26 09:57:24
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pareto.js
@@ -37,6 +37,8 @@ function generateSeriesData(dataSource, xData, yData, labelKey) {
       name: item.label,
       type: labelKey, // 'line' 或 'bar'
       renderMode: "webgl", // 启用 WebGL 渲染
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       showBackground: true,
       smooth: labelKey === "line" ? true : undefined,
       lineStyle:

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-11-26 17:31:22
+ * @LastEditTime: 2024-12-26 09:57:53
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/pie.js
@@ -67,6 +67,8 @@ export function handlePieChartLogic(
       name: yItem.label,
       type,
       radius: "60%",
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       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-11-22 14:04:16
+ * @LastEditTime: 2024-12-26 09:58:03
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/radar.js
@@ -123,6 +123,8 @@ export function handleRadarChartLogic(
     item.option.series = [
       {
         type: "radar",
+        progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+        progressive: true, // 启用渐进式渲染
         data: seriesData,
       },
     ];

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-11-26 17:21:35
+ * @LastEditTime: 2024-12-26 09:58:11
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/roseChart.js
@@ -77,6 +77,8 @@ export function handleRoseChartChartLogic(
       name: yitem.label,
       type: "bar",
       coordinateSystem: "polar",
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       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-11-28 10:24:14
+ * @LastEditTime: 2024-12-26 09:58:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/sankeyDiagram.js
@@ -109,6 +109,8 @@ export function handleSankeyDiagramPlotChartLogic(
         emphasis: {
           focus: "adjacency",
         },
+        progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+        progressive: true, // 启用渐进式渲染
         data: uniqueXData,
         links: sankeyDiagramData,
         lineStyle: {

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

@@ -95,6 +95,8 @@ export function handleScatterChartLogic(
           item.Ydata[ind]?.label || "Y"
         }`,
         type: type,
+        progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+        progressive: true, // 启用渐进式渲染
         renderMode: "webgl", // 启用 WebGL 渲染
         data: scatterData, // 生成的散点图数据
         tooltip: {

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-11-27 17:16:20
+ * @LastEditTime: 2024-12-26 09:59:03
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/stackedBar.js
@@ -80,6 +80,8 @@ export function handlestackedBarChartLogic(
         name: item.label,
         type: "bar",
         stack: "d",
+        progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+        progressive: true, // 启用渐进式渲染
         data: item.data.map(
           (data) => parseFloat(data !== null && data[item.label]) || 0
         ), // 将数据转换为数值

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-17 13:50:43
+ * @LastEditTime: 2024-12-26 09:55:59
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/configFn.js
@@ -28,6 +28,8 @@ export const getFormattedSeries = (data, chartType) => {
     series.push({
       name: item.label,
       type: chartType,
+      progressiveThreshold: 3000, // 当数据量超过3000时启用渐进式渲染
+      progressive: true, // 启用渐进式渲染
       data: item.data.map(
         (data) => parseFloat(data !== null && data[item.label]) || 0
       ), // 将数据转换为数值

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

@@ -70,6 +70,7 @@ export default {
             ? [...Object.keys(item.fileData[0])].map((val) => ({
                 label: val,
                 id: item.fileId + val,
+                parentId: item.fileId,
                 fileData: item.fileData,
               }))
             : [],
@@ -99,8 +100,42 @@ export default {
     },
     handleNodeClick(data) {
       this.selectedNodeId = data.id;
-
-      this.updateDataBase(this.$refs.tree.getCheckedNodes());
+      if (
+        this.$refs.tree.getCheckedNodes() &&
+        this.$refs.tree.getCheckedNodes().length > 0
+      ) {
+        let newDatas = [];
+        this.$refs.tree
+          .getCheckedNodes()
+          .filter((obj) => obj.children === undefined)
+          .map((item) => {
+            const index = newDatas.findIndex(
+              (val) => item.parentId === val.parentId
+            );
+            if (index === -1) {
+              newDatas.push({
+                fileData: item.fileData,
+                fileObj: [
+                  { id: item.id, label: item.label, parentId: item.parentId },
+                ],
+                parentId: item.parentId,
+              });
+            } else {
+              newDatas[index].fileObj.push({
+                id: item.id,
+                label: item.label,
+                parentId: item.parentId,
+              });
+            }
+          });
+        console.log(newDatas, "newDatas");
+        // checkData=[{fileData:[],fileObj:[{}],parentId:''}]
+        this.updateDataBase(
+          this.$refs.tree
+            .getCheckedNodes()
+            .filter((obj) => obj.children === undefined)
+        );
+      }
     },
     // 父节点复选框改变时递归设置子节点状态
     handleParentNodeChange(node, isChecked) {

src/views/performance/customAnalysis.vue

@@ -346,20 +346,18 @@ export default {
           this.loading = false;
           return;
         }
-
         // 2. 获取 IndexedDB 数据
         const indexeddbData = await getDataFromIndexedDB();
         const region = this.getRegionData(indexeddbData);
-
         if (!region.length) {
           console.warn("当前选择的列未找到数据");
           this.loading = false;
           return;
         }
         let newDatas = [];
-        if (region[0].length > 400) {
+        if (region[0].length > 500) {
           if (!Number(this.ruleForm.min) || !Number(this.ruleForm.max)) {
-            this.$message.warning("每次最多选择范围在400条内。请输入数据范围");
+            this.$message.warning("每次最多选择范围在500条内。请输入数据范围");
             this.loading = false;
             return;
           }
@@ -367,9 +365,9 @@ export default {
             Number(this.ruleForm.min) - 1,
             Number(this.ruleForm.max) - 1
           );
-          if (newDatas.length > 400) {
+          if (newDatas.length > 500) {
             this.$message.warning(
-              "由于列数据过长，为了保证页面操作流畅，每次最多选择范围在400条内。请分批次选择。"
+              "由于列数据过长，为了保证页面操作流畅，每次最多选择范围在500条内。请分批次选择。"
             );
             this.loading = false;
             return;
@@ -475,7 +473,7 @@ export default {
       }
       resObj.filename =
         format(new Date(), "yyyyMMdd-HH:mm:ss") + resObj.fileOldName;
-      resObj.fileId = new Date().getTime();
+      resObj.fileId = new Date().getTime() + "";
       resObj.fileData = resData.map((item) => {
         const dynamicKeys = this.ruleForm.type.reduce((acc, label) => {
           const fieldName = this.selectedNames.find(