合并

src/assets/js/class/chart.js

@@ -17,6 +17,13 @@ export default class chartClass {
     height = 300,
     Xdata = [],
     Ydata = [],
+    BarXdata = [],
+    BarYdata = [],
+    LineXdata = [],
+    LineYdata = [],
+    ScatterXdata = [],
+    ScatterYdata = [],
+    formFilterAlignData = [], //条件过滤字段
   }) {
     this.id = Math.random();
     this.option = option;
@@ -27,5 +34,12 @@ export default class chartClass {
     this.type = type;
     this.Xdata = Xdata;
     this.Ydata = Ydata;
+    this.BarXdata = BarXdata;
+    this.BarYdata = BarYdata;
+    this.LineXdata = LineXdata;
+    this.LineYdata = LineYdata;
+    this.ScatterXdata = ScatterXdata;
+    this.ScatterYdata = ScatterYdata;
+    this.formFilterAlignData = formFilterAlignData;
   }
 }

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

@@ -1,37 +1,28 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:22:48
- * @LastEditTime: 2024-11-20 09:46:14
+ * @LastEditTime: 2024-11-22 14:43:53
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Cp.js
-//  */
-// 风能利用系数图
+ */
+// 风能利用系数图 散点折线图
 // 用途：分析风能利用系数（Cp）与风速或叶尖速比的关系。
 // 适用场景：风机效率优化。
-// 实现建议：
-// 使用 ECharts 的折线图或散点图。
 export const option = {
   title: {
     text: "风速与功率输出对比",
-    x: "40%",
-    y: "8%",
   },
   xAxis: {
-    type: "value",
+    type: "category",
     scale: true,
-    max: 30, // 风速最大值为30m/s，视具体数据调整
     axisLabel: {
       show: true,
       interval: "auto",
-      formatter: "{value} m/s", // 风速单位：m/s
+      // formatter: "{value} m/s", // 风速单位：m/s
     },
     show: true,
     name: "风速（m/s）",
-    nameLocation: "center",
-    nameTextStyle: {
-      padding: [20, 0, 0, 0],
-    },
   },
   yAxis: {
     type: "value",
@@ -39,7 +30,7 @@ export const option = {
     axisLabel: {
       show: true,
       interval: "auto",
-      formatter: "{value} kW", // 功率单位：kW
+      formatter: "{value}", // 功率单位：kW
     },
     show: true,
     name: "功率输出（kW）",
@@ -56,7 +47,7 @@ export const option = {
     containLabel: true,
   },
   legend: {
-    top: "90%",
+    top: "bottom",
   },
   toolbox: {
     feature: {
@@ -75,14 +66,11 @@ export const option = {
         let index = params[0];
         return (
           "风机型号:  " +
-          index.seriesName +
-          "</br>" +
-          "风速:&nbsp;" +
-          index.data[0] +
-          " m/s</br>" +
-          "功率输出:&nbsp;&nbsp;" +
-          index.data[1] +
-          " kW</br>"
+            index.seriesName +
+            "</br>" +
+            "风速:&nbsp;" +
+            index.data[0],
+          "功率输出:&nbsp;&nbsp;" + index.data[1]
         );
       }
     },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:13:21
- * @LastEditTime: 2024-11-20 09:47:51
+ * @LastEditTime: 2024-11-25 09:43:16
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Heatmap.js
@@ -9,13 +9,18 @@
 //Heatmap-热力图
 // 风速随时间和风向的分布
 export const option = {
+  title: {
+    text: "风速随时间和风向的分布",
+  },
   tooltip: {
     position: "top",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
-      //   magicType: { show: true, type: ["line", "bar"] },
       restore: { show: true },
       saveAsImage: { show: true },
     },
@@ -31,12 +36,14 @@ export const option = {
     name: "风向",
   },
   visualMap: {
-    min: 0,
-    max: 20, // 风速范围
+    // min: 0,
+    // max: 20, // 风速范围
     calculable: true,
-    orient: "horizontal",
-    left: "center",
-    bottom: "15%",
+    realtime: false,
+    orient: "vertical",
+    right: 20,
+    top: "center",
+    // bottom: "15%",
   },
   series: [
     {

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

@@ -1,6 +1,6 @@
 export const option = {
   title: {
-    text: "Dynamic Data",
+    text: "额定风速间隔数据计数",
   },
   tooltip: {
     trigger: "axis",
@@ -15,8 +15,9 @@ export const option = {
     containLabel: true, // 包含标签在内
   },
   xAxis: {
+    name: "机组",
     type: "category",
-    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    data: ["#11", "#12", "#13", "#14", "#15", "#16", "#17"],
     axisTick: {
       alignWithLabel: true,
     },
@@ -34,10 +35,11 @@ export const option = {
   },
   yAxis: {
     type: "value",
+    name: "总数",
     nameLocation: "middle", // 设置名称位置，可以是 'start', 'middle' 或 'end'
     nameTextStyle: {
-      fontSize: 14, // 文字大小
-      color: "#333", // 文字颜色
+      // fontSize: 14, // 文字大小
+      // color: "#333", // 文字颜色
       padding: [0, 0, 30, 0], // 文字与轴线的距离
     },
   },

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

@@ -33,7 +33,7 @@ export const option = {
     },
   },
   legend: {
-    data: ["Evaporation", "Precipitation", "Temperature"],
+    top: "bottom",
   },
   xAxis:
     // [

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:14:10
- * @LastEditTime: 2024-11-20 09:46:01
+ * @LastEditTime: 2024-11-25 09:49:28
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/boxPlot.js
@@ -9,9 +9,15 @@
 //箱线图-boxPlot
 //不同季节的风速分布
 export const option = {
+  title: {
+    text: "季节的风速分布",
+  },
   tooltip: {
     trigger: "item",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:17:31
- * @LastEditTime: 2024-11-20 09:31:26
+ * @LastEditTime: 2024-11-25 09:43:28
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/hexbin.js
@@ -9,9 +9,15 @@
 // 蜂巢图-Hexbin
 // 风速和风向的联合分布
 export const option = {
+  title: {
+    text: "风速和风向的联合分布",
+  },
   tooltip: {
     trigger: "item",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -21,7 +27,7 @@ export const option = {
     },
   },
   xAxis: {
-    type: "value",
+    type: "category",
     name: "风向 (°)",
   },
   yAxis: {

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:24:20
- * @LastEditTime: 2024-11-19 16:58:13
+ * @LastEditTime: 2024-11-25 09:43:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/histogram.js
@@ -12,6 +12,9 @@
 // 实现建议：
 // 使用 ECharts 的直方图。
 export const option = {
+  title: {
+    text: "风速分布直方图",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -20,6 +23,9 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  legend: {
+    top: "bottom",
+  },
   xAxis: {
     name: "风速范围 (m/s)",
     type: "category",

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

@@ -6,7 +6,7 @@
 // xAxis 为风速，yAxis 为功率。
 export const option = {
   title: {
-    text: "Stacked Line",
+    text: "风速-功率曲线图",
   },
   tooltip: {
     trigger: "axis",
@@ -24,10 +24,10 @@ export const option = {
     },
   },
   xAxis: {
-    type: "value",
+    type: "category",
     name: "风速 (m/s)",
     // boundaryGap: false,
-    // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    data: [5, 20, 35, 25, 10, 5],
   },
   yAxis: {
     name: "功率 (kW)",
@@ -49,14 +49,7 @@ export const option = {
     {
       name: "功率曲线",
       type: "line",
-      data: [
-        [2, 0],
-        [4, 200],
-        [6, 400],
-        [8, 800],
-        [10, 1200],
-        [12, 1500],
-      ], // 风速与功率对应数据
+      data: [300, 22, 249, 345, 234, 56, 73], // 风速与功率对应数据
     },
   ],
 };

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:19:45
- * @LastEditTime: 2024-11-20 09:46:35
+ * @LastEditTime: 2024-11-25 09:44:44
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/pareto.js
@@ -10,12 +10,18 @@
 // 风电场设备故障类型及累积影响
 // 帕累托图通常用于显示数据的分类贡献和累积比例。
 export const option = {
+  title: {
+    text: "设备故障类型及累积",
+  },
   tooltip: {
     trigger: "axis",
     axisPointer: {
       type: "shadow",
     },
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -40,7 +46,6 @@ export const option = {
     {
       type: "value",
       name: "累积百分比 (%)",
-      max: 100,
     },
   ],
   series: [

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

@@ -18,7 +18,7 @@ export const option = {
     },
   },
   legend: {
-    orient: "vertical",
+    top: "bottom",
     left: "left",
     data: ["风速 1-5 m/s", "风速 5-10 m/s", "风速 10-15 m/s", "风速 15+ m/s"],
   },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 11:33:31
- * @LastEditTime: 2024-11-20 09:50:04
+ * @LastEditTime: 2024-11-25 09:45:05
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/radar.js
@@ -9,14 +9,25 @@
 // 雷达图-radar
 // 示例：不同风电场的性能评价
 export const option = {
+  title: {
+    text: "风电场性能",
+  },
   tooltip: {},
   radar: {
     indicator: [
-      { name: "风速", max: 20 },
-      { name: "发电量", max: 5000 },
-      { name: "利用系数", max: 1 },
+      { name: "风速" }, //这个是X轴维度值，类型 对应value 下标
+      { name: "发电量" },
+      { name: "利用系数" },
+      // { name: "玉峰店" }, //这个是X轴维度值，类型 对应value 下标
+      // { name: "朝阳店" },
+      // { name: "大理店" },
     ],
   },
+  legend: {
+    top: "bottom",
+    data: ["风电场 A", "风电场 B"],
+    // data: ["单价", "客单价"],
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -32,11 +43,13 @@ export const option = {
       data: [
         {
           value: [12, 4000, 0.8],
-          name: "风电场 A",
+          name: "风电场 A", //值 机组数据 y轴指标
+          // name: "单价",
         },
         {
           value: [15, 4500, 0.85],
           name: "风电场 B",
+          // name: "客单价",
         },
       ],
     },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:18:07
- * @LastEditTime: 2024-11-19 16:58:24
+ * @LastEditTime: 2024-11-25 09:45:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/roseChart.js
@@ -13,11 +13,17 @@
 // ECharts 的极坐标 + 柱状图。
 // 使用 polar 和 radiusAxis 配置。
 export const option = {
+  title: {
+    text: "风速或风力分布",
+  },
   angleAxis: {
     type: "category",
     data: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"], // 风向
     boundaryGap: false,
   },
+  legend: {
+    top: "bottom",
+  },
   radiusAxis: {},
   polar: {},
   toolbox: {

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

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:20:45
- * @LastEditTime: 2024-11-20 10:18:54
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-20 17:22:11
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/sankeyDiagram.js
  */
@@ -13,6 +13,9 @@ export const option = {
   title: {
     text: "风能转化过程的能量流失情况",
   },
+  legend: {
+    top: "bottom",
+  },
   tooltip: {
     trigger: "item",
     formatter: "{b}: {c}",

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

@@ -1,14 +1,18 @@
 export const option = {
+  title: {
+    text: "风速分布",
+  },
   xAxis: {
     name: "风向 (°)",
-    type: "value",
-    min: 0,
-    max: 360,
+    type: "category",
   },
   yAxis: {
     name: "风速 (m/s)",
     type: "value",
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },
@@ -22,12 +26,12 @@ export const option = {
       name: "风速分布",
       type: "scatter",
       data: [
-        [45, 5, 10],
-        [90, 10, 20],
-        [180, 7, 15],
-        [270, 12, 25],
+        ["145", "5"],
+        ["90", "10"],
+        ["80", "7"],
+        ["270", "12"],
       ], // [风向, 风速, 数据点大小]
-      symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
+      // symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
       renderMode: "webgl", // 启用 WebGL 渲染
     },
   ],

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-19 16:25:10
- * @LastEditTime: 2024-11-19 16:32:28
+ * @LastEditTime: 2024-11-25 09:46:37
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/stackedBar.js
@@ -12,10 +12,16 @@
 // 实现建议：
 // 使用堆叠柱状图。
 export const option = {
+  title: {
+    text: "风机状态",
+  },
   xAxis: {
     type: "category",
     data: ["风机1", "风机2", "风机3", "风机4"], // 风机编号
   },
+  legend: {
+    top: "bottom",
+  },
   toolbox: {
     feature: {
       dataView: { show: true, readOnly: false },

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:16:47
- * @LastEditTime: 2024-11-20 09:47:16
+ * @LastEditTime: 2024-11-25 09:46:47
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/timeSeries.js
@@ -9,6 +9,9 @@
 //时间序列图 timeSeries
 //风速变化趋势
 export const option = {
+  title: {
+    text: "风速变化趋势",
+  },
   tooltip: {
     trigger: "axis",
   },
@@ -20,6 +23,9 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  legend: {
+    top: "bottom",
+  },
   xAxis: {
     type: "category",
     data: ["00:00", "06:00", "12:00", "18:00", "24:00"],

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-20 09:15:50
- * @LastEditTime: 2024-11-20 09:16:16
+ * @LastEditTime: 2024-11-25 09:47:00
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/waterfall.js
@@ -9,6 +9,12 @@
 // 瀑布图-Waterfall
 // 示例：风速到发电量的损耗分析
 export const option = {
+  title: {
+    text: "风速到发电量的损耗分析",
+  },
+  legend: {
+    top: "bottom",
+  },
   xAxis: {
     type: "category",
     data: ["风速", "风轮效率", "发电功率"],

src/store/dragChart.js

@@ -13,8 +13,8 @@ export default {
     currentChartList: [], // 当前文件的当前数据
     originChartList: [], // 当前文件的原始数据
     fileList: [], // 文件列表
-    dataBaseCheckList: {}, //选中数据更新
-    formFilterAlignData: [], //这个是所有图表数据筛选保存字段
+    dataBaseCheckList: [], //选中数据更新
+    // formFilterAlignData: [], //这个是所有图表数据筛选保存字段
   },
   mutations: {
     setUpdateTriggerGetData(state, value) {
@@ -34,7 +34,7 @@ export default {
         currentChartList: [],
         originChartList: [],
         fileList: [],
-        dataBaseCheckList: {},
+        dataBaseCheckList: [],
         triggerGetData: false,
         updateTriggerGetData: false,
         formFilterAlignData: [],
@@ -52,18 +52,17 @@ export default {
     setFormFilterAlignData(state, data) {
       //将数据存储起来用于回显 数据
       // 检查是否已经存在相同的 id
-      const index = state.formFilterAlignData.findIndex(
+      const index = state.curEdit.formFilterAlignData.findIndex(
         (item) => item.id === data.id
       );
       if (index !== -1) {
         // 如果找到相同的 id，直接更新
-        state.formFilterAlignData[index] = {
+        state.curEdit.formFilterAlignData[index] = {
           ...data,
-          // data: [...state.formFilterAlignData[index].data, ...data.data],
         };
       } else {
         // 如果不存在，新增一条数据
-        state.formFilterAlignData.push({ ...data });
+        state.curEdit.formFilterAlignData.push({ ...data });
       }
     },
     // 设置当前编辑的图表

src/views/dataAdministration/vibration/index.vue

@@ -0,0 +1,562 @@
+<!--
+ * @Author: your name
+ * @Date: 2024-11-25 09:28:47
+ * @LastEditTime: 2024-11-25 09:33:01
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/dataAdministration/vibration/index.vue
+-->
+<template>
+  <div class="global-variable" v-loading="loading">
+    <!-- 振动数据操作页面 -->
+    <div class="condition">
+      <el-form
+        :inline="true"
+        ref="ruleForm"
+        :model="formInline"
+        class="demo-form-inline"
+        :rules="rules"
+      >
+        <el-form-item label="风场名称:" prop="fieldName">
+          <el-input
+            size="small"
+            v-model="formInline.fieldName"
+            placeholder="请输入风场名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="状态:" prop="batchState" size="small">
+          <el-select v-model="formInline.batchState" placeholder="请选择状态">
+            <el-option label="启用" value="1"></el-option>
+            <el-option label="停用" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间">
+          <el-date-picker
+            size="small"
+            v-model="formInline.picker"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="onDateChange"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" size="small"
+            >查询</el-button
+          >
+          <el-button @click="reset('ruleForm')" size="small">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-page">
+      <div class="newly">
+        <el-button
+          v-hasPermi="['performance:batchMag:add']"
+          type="primary"
+          @click="newnuedialog"
+          size="small"
+          >新增</el-button
+        >
+      </div>
+      <el-table
+        v-loading="loading"
+        class="center-align-table"
+        :data="tableData"
+        border
+        :cell-style="rowStyle"
+      >
+        <el-table-column
+          prop="fieldName"
+          align="center"
+          min-width="100"
+          label="关联风场"
+        >
+        </el-table-column>
+        <el-table-column
+          align="center"
+          min-width="100"
+          label="批次名称"
+          prop="batchName"
+        >
+        </el-table-column>
+        <!-- <el-table-column align="center" label="批次编号" prop="batchCode">
+          </el-table-column> -->
+
+        <el-table-column
+          prop="batchState"
+          align="center"
+          label="状态"
+          min-width="100"
+        >
+          <template slot-scope="scope">
+            <span>
+              {{
+                scope.row.batchState == 0
+                  ? "禁用"
+                  : scope.row.batchState == 1
+                  ? "启用"
+                  : "/"
+              }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          align="center"
+          min-width="150"
+          label="创建时间"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="transition"
+          align="center"
+          fixed="right"
+          label="操作"
+          min-width="200"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-hasPermi="['performance:batchMag:edit']"
+              @click="compile(scope.row)"
+              type="text"
+              size="small"
+              >编辑</el-button
+            >
+            <el-button
+              v-hasPermi="['performance:batchMag:editState']"
+              v-if="scope.row.batchState == 0"
+              @click="setState(1, scope.row)"
+              type="text"
+              size="small"
+              >启用</el-button
+            >
+            <el-button
+              v-else
+              v-hasPermi="['performance:batchMag:editState']"
+              style="color: #666"
+              @click="setState(0, scope.row)"
+              type="text"
+              size="small"
+              >禁用</el-button
+            >
+
+            <el-button
+              style="color: #f00"
+              @click="deleted(scope.row)"
+              v-hasPermi="['performance:batchMag:delete']"
+              type="text"
+              size="small"
+              :disabled="scope.row.batchState == 1"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-container">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page.sync="formInline.pageNum"
+          layout="total, prev, pager, next"
+          :page-size="formInline.pageSize"
+          :total="formInline.totalSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 弹出层 -->
+    <!-- 新增 /编辑-->
+    <el-dialog
+      :title="title"
+      :visible.sync="nuedialog"
+      width="500px"
+      :before-close="handleCloses"
+    >
+      <div v-loading="loadingView" class="views">
+        <el-form
+          :model="ruleForm"
+          :rules="addUserRules"
+          ref="addUserForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="关联风场:" prop="fieldCode">
+            <el-select
+              :disabled="title === '编辑'"
+              v-model="ruleForm.fieldCode"
+              placeholder="请选择关联风场"
+              style="width: 100%"
+            >
+              <el-option
+                :label="item.fieldName"
+                v-for="item in fieldCodeList"
+                :value="item.codeNumber"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="批次名称"
+            prop="batchName"
+            v-if="title === '编辑'"
+          >
+            <el-input
+              v-model="ruleForm.batchName"
+              placeholder="请输入批次名称"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="cancel('addUserForm')" size="small"
+            >取 消
+          </el-button>
+          <el-button
+            type="primary"
+            @click="submitForm('addUserForm')"
+            size="small"
+          >
+            确 定
+          </el-button>
+        </span>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getBatchMagList,
+  addFieldBatch,
+  updateFieldBatch,
+  queryCodeNum,
+  onOrOffFieldBatch,
+  deleteFieldBatch,
+  createBatchName,
+} from "@/api/performance.js";
+export default {
+  data() {
+    return {
+      loadingView: false,
+      loading: false, //数据加载中
+      rules: {
+        fieldCode: { trigger: "change" },
+        batchState: { trigger: "blur" },
+      },
+      startDate: "",
+      endDate: "",
+      fieldCodeList: [],
+      formInline: {
+        fieldName: undefined,
+        batchState: undefined,
+        picker: [],
+        pageNum: 1,
+        pageSize: 10,
+        totalSize: 0,
+      },
+      tableData: [],
+      // 新增编辑表单
+      ruleForm: {
+        fieldCode: null,
+        batchName: null,
+        batchCode: null,
+      },
+      addUserRules: {
+        batchCode: {
+          required: true,
+          message: "请选择关联风场",
+          trigger: "change",
+        },
+        batchName: [
+          { required: true, message: "请输入批次名称", trigger: "blur" },
+        ],
+      },
+      //修改密码
+      editUserPassword: {
+        oldPWD: "",
+        newPWD: "",
+        userId: "",
+      },
+
+      nuedialog: false,
+      title: "",
+    };
+  },
+  created() {
+    this.getTableList();
+    this.getQueryCodeNumList();
+  },
+
+  methods: {
+    handleCloses(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    onDateChange(date) {
+      if (Array.isArray(date)) {
+        this.startDate = this.$formatDate(date[0]);
+        this.endDate = this.$formatDate(date[1]);
+        if (this.endDate < this.startDate) {
+          this.endDate = this.startDate;
+        }
+      } else {
+        this.startDate = null;
+        this.endDate = null;
+      }
+    },
+    //获取风场列表
+    async getQueryCodeNumList() {
+      this.loading = true;
+      try {
+        const result = await queryCodeNum();
+        this.fieldCodeList = result.data.fieldCodeList;
+        this.loading = false;
+      } catch (error) {
+        console.error(error);
+        this.loading = false;
+      }
+    },
+    //分页数据切换
+    handleCurrentChange(val) {
+      this.formInline.pageNum = val;
+      this.getTableList();
+    },
+    //修改状态
+    setState(state, row) {
+      //启用接口
+      this.loading = true;
+      onOrOffFieldBatch({ batchCode: row.batchCode, batchState: state })
+        .then((res) => {
+          this.$message({
+            message: res.msg,
+            type: "success",
+          });
+          this.loading = false;
+          this.getTableList();
+        })
+        .catch((error) => {
+          this.loading = false;
+        });
+    },
+    async getTableList() {
+      try {
+        this.loading = true;
+        const result = await getBatchMagList({
+          ...this.formInline,
+          picker: undefined,
+          startTime: this.startDate || undefined,
+          endTime: this.endDate || undefined,
+          totalSize: undefined,
+        });
+        this.tableData = result.data.list;
+        this.formInline.totalSize = result.data.totalSize;
+        this.loading = false;
+      } catch (error) {
+        this.$message({
+          type: "error",
+          message: "请检查是否连接网络",
+        });
+      }
+    },
+
+    rowStyle() {
+      return "text-align:center";
+    },
+    // 查询
+    onSubmit() {
+      this.getTableList();
+    },
+    // 重置
+    reset(formName) {
+      this.formInline.picker = [];
+      this.startDate = undefined;
+      this.endDate = undefined;
+      this.$refs[formName].resetFields();
+      this.getTableList();
+    },
+
+    // 新增,编辑确定
+    submitForm(formName) {
+      // this.loading = true;
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loadingView = true;
+          switch (this.title) {
+            case "新增":
+              const obj = this.fieldCodeList.find(
+                (item) => item.codeNumber === this.ruleForm.fieldCode
+              );
+              const form = new FormData();
+              form.append("fieldName", obj.fieldName);
+              createBatchName(form).then((results) => {
+                addFieldBatch({
+                  ...this.ruleForm,
+                  batchName: results.data,
+                  batchCode: undefined,
+                })
+                  .then((res) => {
+                    this.$message({
+                      type: "success",
+                      message: res.msg,
+                    });
+                    // this.loading = false;
+                    this.getTableList();
+                    this.nuedialog = false;
+                    this.loadingView = false;
+                  })
+                  .catch(() => {
+                    this.loadingView = false;
+                    // this.loading = false;
+                  });
+              });
+
+              break;
+            case "编辑":
+              updateFieldBatch({ ...this.ruleForm, fieldCode: undefined })
+                .then((res) => {
+                  this.$message({
+                    type: "success",
+                    message: res.msg,
+                  });
+                  this.getTableList();
+                  this.nuedialog = false;
+                  this.loadingView = false;
+                })
+                .catch(() => {
+                  this.loadingView = false;
+                });
+
+              break;
+          }
+          // this.nuedialog = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    //点击取消
+    cancel(formName) {
+      this.$refs[formName] && this.$refs[formName].resetFields();
+      this.ruleForm = {
+        fieldCode: null,
+        batchCode: null,
+        batchName: null,
+      };
+      this.nuedialog = false;
+      this.loadingView = false;
+    },
+    // 编辑 回显数据
+    async compile(row) {
+      try {
+        // 直接替换整个对象，以确保 Vue 的响应式系统能够检测到变化
+        this.ruleForm = {
+          fieldCode: row.fieldCode,
+          batchCode: row.batchCode,
+          batchName: row.batchName,
+        };
+        this.nuedialog = true;
+        this.title = "编辑";
+      } catch (error) {
+        this.$message.error("获取用户信息失败");
+      }
+    },
+    // 删除
+    deleted(row) {
+      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.loading = true;
+          deleteFieldBatch({ batchCode: row.batchCode })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.loading = false;
+              this.getTableList();
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    // 新增
+    newnuedialog() {
+      this.cancel("addUserForm");
+      this.ruleForm = {
+        batchCode: "",
+        batchName: "",
+        fieldCode: "",
+      };
+      this.nuedialog = true;
+      this.title = "新增";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.general {
+  display: flex;
+  flex-wrap: wrap;
+
+  .condition {
+    width: 50%;
+    display: flex;
+
+    p {
+      width: 100px;
+      text-align: right;
+      line-height: 40px;
+    }
+
+    span {
+      line-height: 40px;
+
+      padding-left: 20px;
+    }
+
+    .el-select {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    .el-input {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.attachment {
+  display: flex;
+  padding-top: 10px;
+
+  p {
+    margin-right: 20px;
+    color: #409eff;
+  }
+}
+
+.addition {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+.demo-ruleForm {
+  .el-form-item {
+    margin-bottom: 25px;
+  }
+}
+</style>

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/config.js

@@ -1,7 +1,7 @@
 export const configApi = [
   {
     label: "图表文本配置", //提示文本
-    value: "title", //组件名
+    value: "chartTitle", //组件名
     icon: "text", //图标
     name: "configText", //tab name
     desc: "标题组件，包含主标题和副标题。",

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

@@ -0,0 +1,54 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 10:42:38
+ * @LastEditTime: 2024-11-22 14:00:39
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/dargChartFIlter.js
+ */
+// 修改后的 calculate 方法
+const calculate = (operator, testValue, conditionValue) => {
+  switch (operator) {
+    case ">":
+      return Number(testValue) > Number(conditionValue);
+    case "<":
+      return Number(testValue) < Number(conditionValue);
+    case "=":
+      return Number(testValue) === Number(conditionValue);
+    default:
+      return false;
+  }
+};
+export const filterData = (filterData, dataList, label) => {
+  const filter = filterData; // 处理第一个条件组
+  const filteredData = dataList.map((item) => {
+    // 如果没有提供 number1 或 filterType1，则默认 condition1 满足
+    if (item !== null) {
+      const condition1 =
+        filter.filterType1 && (filter.number1 !== null || filter.number1 !== "")
+          ? calculate(filter.filterType1, item[label], filter.number1)
+          : true;
+      // 如果没有提供 number2 或 filterType2，则默认 condition2 满足
+      const condition2 =
+        filter.filterType2 && (filter.number2 !== null || filter.number2 !== "")
+          ? calculate(filter.filterType2, item[label], filter.number2)
+          : true;
+      // 根据逻辑关系 (或/且)
+      if (filter.radio === "1") {
+        return condition1 || condition2 ? item : null; // 满足任一条件
+      } else if (filter.radio === "2") {
+        return condition1 && condition2 ? item : null; // 同时满足两个条件
+      } else if (!condition2) {
+        return null;
+      } else if (!condition1) {
+        return null;
+      } else {
+        // 未指定逻辑关系时默认满足条件
+        return item;
+      }
+    } else {
+      return null;
+    }
+  });
+  return filteredData; // 返回包含 null 的数据
+};

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

@@ -0,0 +1,20 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 11:18:08
+ * @LastEditTime: 2024-11-21 15:41:37
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/chartLogic/index.js
+ */
+
+import { handleBarChartLogic } from "./modules/barAndLine";
+import { handleScatterChartLogic } from "./modules/scatter";
+import { handleRadarChartLogic } from "./modules/radar";
+import { handleCpChartLogic } from "./modules/cp";
+
+export {
+  handleBarChartLogic,
+  handleScatterChartLogic,
+  handleRadarChartLogic,
+  handleCpChartLogic,
+};

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

@@ -0,0 +1,103 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 11:18:35
+ * @LastEditTime: 2024-11-22 14:13:07
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/chartLogic/modules/barAndLine.js
+ */
+//柱状图+折线图
+import { filterData } from "../dargChartFIlter";
+import { getFormattedLabels, getFormattedSeries } from "../../configFn";
+export function handleBarChartLogic(
+  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 || [];
+
+        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;
+  }
+
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    name: formLabelAlign.Xlable,
+  };
+  item.option.yAxis = {
+    ...item.option.yAxis,
+    name: formLabelAlign.Ylable,
+  };
+
+  if (item.Ydata[0]?.data?.length > 0) {
+    item.option.series = getFormattedSeries(item.Ydata, type);
+  }
+  if (item.Xdata[0]?.data?.length > 0) {
+    item.option.xAxis = {
+      ...item.option.xAxis,
+      data: item.Xdata[0].data,
+      axisTick: { alignWithLabel: true },
+      axisLabel: {
+        formatter: (value, index) =>
+          value !== null ? getFormattedLabels(index, item.Xdata, value) : "",
+      },
+    };
+    item.option.tooltip = {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: (params) => {
+        const index = params[0]?.dataIndex; // 获取当前数据点索引
+        const content = params
+          .map((param) => `${param.marker}${param.seriesName}: ${param.value}`)
+          .join("<br/>");
+        const customLabels = getFormattedLabels(index, item.Xdata);
+        return `${customLabels}<br/>${content}`;
+      },
+    };
+  }
+}

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

@@ -0,0 +1,108 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-21 15:40:30
+ * @LastEditTime: 2024-11-25 15:18:08
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/cp.js
+ */
+//散点折线图
+import { filterData } from "../dargChartFIlter";
+import { getFormattedLabels, getFormattedSeries } from "../../configFn";
+export function handleCpChartLogic(
+  item,
+  formLabelAlign,
+  formFilterAlign,
+  isFilter,
+  type
+) {
+  // console.log(item, formLabelAlign, formFilterAlign, "cp");
+  // 封装柱状图的具体逻辑
+  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 || [];
+        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.LineXdata = formLabelAlign.LineXdata;
+    item.LineYdata = formLabelAlign.LineYdata;
+    item.ScatterXdata = formLabelAlign.ScatterXdata;
+    item.ScatterYdata = formLabelAlign.ScatterYdata;
+  }
+  //默认数据
+  item.LineXdata = formLabelAlign.LineXdata;
+  item.LineYdata = formLabelAlign.LineYdata;
+  item.ScatterXdata = formLabelAlign.ScatterXdata;
+  item.ScatterYdata = formLabelAlign.ScatterYdata;
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    name: formLabelAlign.Xlable,
+  };
+  item.option.yAxis = {
+    ...item.option.yAxis,
+    name: formLabelAlign.Ylable,
+  };
+
+  if (item.LineYdata[0]?.data?.length > 0) {
+    const res = item.LineYdata?.map((lineItem, ind) => {
+      return {
+        name: lineItem.label,
+        type: "line",
+        renderMode: "webgl", // 启用 WebGL 渲染
+        data: [
+          ...lineItem.data?.map((val, valInd) => {
+            return [
+              item.LineXdata[ind]?.data[valInd][item.LineXdata[ind].label],
+              val[lineItem.label],
+            ];
+          }),
+        ],
+      };
+    });
+    item.option.series = [...res];
+  }
+  // item.option.xAxis = {
+  //   ...item.option.xAxis,
+  //   axisTick: { alignWithLabel: true },
+  // };
+  // item.option.tooltip = {
+  //   trigger: "axis",
+  //   axisPointer: { type: "shadow" },
+  // };
+}

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

@@ -0,0 +1,132 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-21 09:40:55
+ * @LastEditTime: 2024-11-22 14:04:16
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartLogic/modules/radar.js
+ */
+//雷达图
+
+import { filterData } from "../dargChartFIlter";
+
+export function handleRadarChartLogic(
+  item, // 当前编辑项配置
+  formLabelAlign, // 每一项 label 显示
+  formFilterAlign, // 过滤数据筛选
+  isFilter, // 是否是过滤
+  type // 图表类型
+) {
+  // 检查基础数据
+  if (!item || !formLabelAlign) {
+    console.error("handleRadarChartLogic: 缺少必要参数");
+    return;
+  }
+
+  // 数据筛选逻辑
+  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;
+        })
+        .filter((vals) => vals !== null), // 直接过滤掉 null 值
+    }));
+
+    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.map((fitem, ind) => {
+      return {
+        ...fitem,
+        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;
+  }
+
+  // 设置系列（series），对相同纬度的数据值进行求和
+  if (
+    item.Ydata.length > 0 &&
+    item.Ydata[0]?.data?.length > 0 &&
+    item.Xdata.length > 0 &&
+    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,
+      };
+    });
+
+    item.option.series = [
+      {
+        type: "radar",
+        data: seriesData,
+      },
+    ];
+  } else {
+    item.option.series = []; // 无数据时清空系列
+  }
+}

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

@@ -0,0 +1,128 @@
+//散点图+散点折线图
+import { filterData } from "../dargChartFIlter";
+export function handleScatterChartLogic(
+  item, //curEdit编辑项配置
+  formLabelAlign, //每一项label显示
+  formFilterAlign, //过滤数据 数据筛选from
+  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 || [];
+        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;
+  }
+  item.option.xAxis = {
+    ...item.option.xAxis,
+    type: "value",
+    name: formLabelAlign.Xlable,
+  };
+  item.option.yAxis = {
+    ...item.option.yAxis,
+
+    name: formLabelAlign.Ylable,
+  };
+
+  if (item.Ydata[0]?.data?.length > 0 || item.Xdata[0]?.data?.length > 0) {
+    // console.log(item.Xdata, "item.Xdata", item.Ydata);
+    item.option.series = (
+      item.Xdata.length > item.Ydata.length ? item.Xdata : item.Ydata
+    ).map((val, ind) => {
+      const xData = item.Xdata[ind]?.data || [];
+      const yData = item.Ydata[ind]?.data || [];
+
+      const scatterData = xData
+        .map((xItem, idx) => {
+          const yItem = yData[idx];
+          if (!xItem || !yItem) return null; // 如果对应项不存在，则跳过
+          return [
+            Number(
+              xItem[item.Xdata[ind].label] === undefined
+                ? 0
+                : xItem[item.Xdata[ind].label]
+            ) || 0, // 取 X 值
+            Number(
+              yItem[item.Ydata[ind].label] === undefined
+                ? 0
+                : yItem[item.Ydata[ind].label]
+            ) || 0, // 取 Y 值
+          ];
+        })
+        .filter((point) => point !== null); // 过滤掉无效的点
+
+      return {
+        name: `${item.Xdata[ind]?.label || "X"} - ${
+          item.Ydata[ind]?.label || "Y"
+        }`,
+        type: type,
+        renderMode: "webgl", // 启用 WebGL 渲染
+        data: scatterData, // 生成的散点图数据
+        tooltip: {
+          trigger: "item", // 鼠标悬停触发
+          // formatter: (params) => {
+          //   // params.dataIndex: 当前点的索引
+          //   const idx = params.dataIndex;
+          //   const xTooltipData = item.Xdata.map(
+          //     (xItem) =>
+          //       `${xItem.label}: ${
+          //         xItem.data[idx]
+          //           ? Number(xItem.data[idx][xItem.label] || 0)
+          //           : "N/A"
+          //       }`
+          //   ).join("<br>");
+          //   const yTooltipData = item.Ydata.map(
+          //     (yItem) =>
+          //       `${yItem.label}: ${
+          //         yItem.data[idx]
+          //           ? Number(yItem.data[idx][yItem.label]) || 0
+          //           : "N/A"
+          //       }`
+          //   ).join("<br>");
+          //   return `X轴数据:<br>${xTooltipData}<br>Y轴数据:<br>${yTooltipData}`;
+          // },
+        },
+      };
+    });
+  }
+}

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

@@ -0,0 +1,1127 @@
+<template>
+  <div>
+    <el-form
+      label-position="top"
+      :model="formLabelAlign"
+      size="mini"
+      ref="form"
+    >
+      <template v-if="curEdit.type !== 'Cp' && curEdit.type !== 'pareto'">
+        <el-form-item label="纬度标签">
+          <div
+            slot="label"
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <span>纬度标签</span>
+            <el-tooltip
+              content="添加纬度"
+              placement="bottom-start"
+              v-if="curEdit.type === 'scatter' || curEdit.type === 'radar'"
+            >
+              <i
+                @click="
+                  formLabelAlign.Xdata.push({ lable: '', data: [], id: '' })
+                "
+                class="el-icon-circle-plus-outline"
+                style="font-size: 20px"
+              ></i>
+            </el-tooltip>
+          </div>
+          <template v-for="(item, ind) in formLabelAlign.Xdata">
+            <div class="attributeItemData">
+              <el-select
+                style="margin: 5px 0"
+                :key="ind + 'select'"
+                v-model="formLabelAlign.Xdata[ind].id"
+                placeholder="请先进行数据配置"
+                :disabled="disabled"
+                @change="handleXdata('init')"
+              >
+                <el-option
+                  v-for="item in selectData"
+                  :label="item.label"
+                  :value="item.id"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+              <el-tooltip
+                v-if="curEdit.type === 'scatter' || curEdit.type === 'radar'"
+                :content="
+                  formLabelAlign.Xdata.length <= 1
+                    ? '该指标不可删除，最少存在一组指标'
+                    : '删除该指标'
+                "
+                placement="bottom-start"
+              >
+                <el-button
+                  type="text"
+                  :disabled="formLabelAlign.Xdata.length <= 1"
+                  @click="removeXdata(ind, 'init')"
+                >
+                  <i
+                    class="el-icon-delete"
+                    style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                  ></i
+                ></el-button>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-form-item>
+        <el-form-item label="指标值">
+          <div
+            slot="label"
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+            "
+          >
+            <span>指标值</span>
+            <el-tooltip content="添加指标值" placement="bottom-start">
+              <i
+                @click="handleMetrics('init')"
+                class="el-icon-circle-plus-outline"
+                style="font-size: 20px"
+              ></i>
+            </el-tooltip>
+          </div>
+          <template v-for="(item, ind) in formLabelAlign.Ydata">
+            <div class="attributeItemData">
+              <el-select
+                style="margin: 5px 0"
+                :key="ind + 'select' + 'zhibiao'"
+                v-model="formLabelAlign.Ydata[ind].id"
+                placeholder="请先进行数据配置"
+                :disabled="disabled"
+                @change="handleYdata(ind, 'init')"
+              >
+                <el-option
+                  v-for="item in selectData"
+                  :label="item.label"
+                  :value="item.id"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+              <el-tooltip
+                :content="
+                  formLabelAlign.Ydata.length <= 1
+                    ? '该指标不可删除，最少存在一组指标'
+                    : '删除该指标'
+                "
+                placement="bottom-start"
+              >
+                <el-button
+                  type="text"
+                  :disabled="formLabelAlign.Ydata.length <= 1"
+                  @click="removeYdata(ind, 'init')"
+                >
+                  <i
+                    class="el-icon-delete"
+                    style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                  ></i
+                ></el-button>
+              </el-tooltip>
+            </div>
+          </template>
+        </el-form-item>
+      </template>
+
+      <el-form-item v-if="curEdit.type === 'pareto'" label="柱纬度标签">
+        <div
+          slot="label"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span>柱纬度标签</span>
+          <el-tooltip content="添加纬度" placement="bottom-start">
+            <i
+              @click="
+                formLabelAlign.BarXdata.push({ lable: '', data: [], id: '' })
+              "
+              class="el-icon-circle-plus-outline"
+              style="font-size: 20px"
+            ></i>
+          </el-tooltip>
+        </div>
+        <template v-for="(item, ind) in formLabelAlign.BarXdata">
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select'"
+              v-model="formLabelAlign.BarXdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleXdata('bar')"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                formLabelAlign.BarXdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.BarXdata.length <= 1"
+                @click="removeXdata(ind, 'bar')"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item v-if="curEdit.type === 'pareto'" label="柱指标值">
+        <div
+          slot="label"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span>柱指标值</span>
+          <el-tooltip content="添加柱指标值" placement="bottom-start">
+            <i
+              @click="handleMetrics('bar')"
+              class="el-icon-circle-plus-outline"
+              style="font-size: 20px"
+            ></i>
+          </el-tooltip>
+        </div>
+        <template v-for="(item, ind) in formLabelAlign.BarYdata">
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select' + 'zhibiao'"
+              v-model="formLabelAlign.BarYdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleYdata(ind, 'bar')"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                formLabelAlign.BarYdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.BarYdata.length <= 1"
+                @click="removeYdata(ind, 'bar')"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item
+        v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
+        label="线纬度标签"
+      >
+        <div
+          slot="label"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span>线纬度标签</span>
+          <el-tooltip content="添加纬度" placement="bottom-start">
+            <i
+              @click="
+                formLabelAlign.LineXdata.push({ lable: '', data: [], id: '' })
+              "
+              class="el-icon-circle-plus-outline"
+              style="font-size: 20px"
+            ></i>
+          </el-tooltip>
+        </div>
+        <template v-for="(item, ind) in formLabelAlign.LineXdata">
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select'"
+              v-model="formLabelAlign.LineXdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleXdata('line')"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                formLabelAlign.LineXdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.LineXdata.length <= 1"
+                @click="removeXdata(ind, 'line')"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item
+        v-if="curEdit.type === 'pareto' || curEdit.type === 'Cp'"
+        label="线指标值"
+      >
+        <div
+          slot="label"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span>线指标值</span>
+          <el-tooltip content="添加线指标值" placement="bottom-start">
+            <i
+              @click="handleMetrics('line')"
+              class="el-icon-circle-plus-outline"
+              style="font-size: 20px"
+            ></i>
+          </el-tooltip>
+        </div>
+        <template v-for="(item, ind) in formLabelAlign.LineYdata">
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select' + 'zhibiao'"
+              v-model="formLabelAlign.LineYdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleYdata(ind, 'line')"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                formLabelAlign.LineYdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.LineYdata.length <= 1"
+                @click="removeYdata(ind, 'line')"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item v-if="curEdit.type === 'Cp'" label="点纬度标签">
+        <div
+          slot="label"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span>点纬度标签</span>
+          <el-tooltip content="添加纬度" placement="bottom-start">
+            <i
+              @click="
+                formLabelAlign.ScatterXdata.push({
+                  lable: '',
+                  data: [],
+                  id: '',
+                })
+              "
+              class="el-icon-circle-plus-outline"
+              style="font-size: 20px"
+            ></i>
+          </el-tooltip>
+        </div>
+        <template v-for="(item, ind) in formLabelAlign.ScatterXdata">
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select'"
+              v-model="formLabelAlign.ScatterXdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleXdata('scatter')"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                formLabelAlign.ScatterXdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.ScatterXdata.length <= 1"
+                @click="removeXdata(ind, 'scatter')"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item v-if="curEdit.type === 'Cp'" label="点指标值">
+        <div
+          slot="label"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <span>点指标值</span>
+          <el-tooltip content="添加点指标值" placement="bottom-start">
+            <i
+              @click="handleMetrics('scatter')"
+              class="el-icon-circle-plus-outline"
+              style="font-size: 20px"
+            ></i>
+          </el-tooltip>
+        </div>
+        <template v-for="(item, ind) in formLabelAlign.ScatterYdata">
+          <div class="attributeItemData">
+            <el-select
+              style="margin: 5px 0"
+              :key="ind + 'select' + 'zhibiao'"
+              v-model="formLabelAlign.ScatterYdata[ind].id"
+              placeholder="请先进行数据配置"
+              :disabled="disabled"
+              @change="handleYdata(ind, 'scatter')"
+            >
+              <el-option
+                v-for="item in selectData"
+                :label="item.label"
+                :value="item.id"
+                :key="item.id"
+              ></el-option>
+            </el-select>
+            <el-tooltip
+              :content="
+                formLabelAlign.ScatterYdata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
+              "
+              placement="bottom-start"
+            >
+              <el-button
+                type="text"
+                :disabled="formLabelAlign.ScatterYdata.length <= 1"
+                @click="removeYdata(ind, 'scatter')"
+              >
+                <i
+                  class="el-icon-delete"
+                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
+                ></i
+              ></el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item label="标题名称">
+        <el-input v-model="formLabelAlign.text"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="X轴名称"
+        v-if="curEdit.type !== 'pie' && curEdit.type !== 'radar'"
+      >
+        <el-input v-model="formLabelAlign.Xlable"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="Y轴名称"
+        v-if="curEdit.type !== 'pie' && curEdit.type !== 'radar'"
+      >
+        <el-input v-model="formLabelAlign.Ylable"></el-input>
+      </el-form-item>
+    </el-form>
+    <div style="margin: 20px 0">
+      <el-divider style="height: 2px"></el-divider>
+    </div>
+    <el-collapse v-if="formLabelAlign.Ydata[0].data.length > 0">
+      <el-collapse-item
+        v-for="(itemFilter, filterInd) in formLabelAlign.Ydata"
+        :title="itemFilter.label || `数据筛选`"
+        :name="itemFilter.id"
+        :key="itemFilter.id"
+      >
+        <el-form
+          label-position="top"
+          :model="formFilterAlign[filterInd]"
+          size="mini"
+          :ref="`form${filterInd}`"
+        >
+          <el-form-item label="数据筛选">
+            <el-select
+              v-model="formFilterAlign[filterInd].filters"
+              placeholder="请选择数据"
+              multiple
+              collapse-tags
+              class="filterMutiple"
+            >
+              <el-option
+                v-for="(item, index) in itemFilter?.data"
+                :label="
+                  item[itemFilter?.label] ? `${item[itemFilter?.label]} ` : `0`
+                "
+                :value="item[itemFilter?.label]"
+                :key="item[itemFilter?.label] + '' + index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="条件过滤">
+            <el-select placeholder="请选择过滤条件" v-model="value">
+              <el-option label="全部" value="all"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="显示值满足以下条件">
+            <el-select
+              v-model="formFilterAlign[filterInd].filterType1"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="formFilterAlign[filterInd].number1"
+              type="number"
+            ></el-input>
+            <el-radio v-model="formFilterAlign[filterInd].radio" label="1"
+              >或</el-radio
+            >
+            <el-radio v-model="formFilterAlign[filterInd].radio" label="2"
+              >且</el-radio
+            >
+            <el-select
+              v-model="formFilterAlign[filterInd].filterType2"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <el-input
+              v-model="formFilterAlign[filterInd].number2"
+              type="number"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script>
+import { mapState, mapMutations } from "vuex";
+import {
+  handleBarChartLogic,
+  handleScatterChartLogic,
+  handleRadarChartLogic,
+  handleCpChartLogic,
+} from "./chartLogic/index";
+import Vue from "vue";
+export default {
+  name: "title",
+  props: {
+    curEdit: {
+      type: Object,
+      default: () => ({
+        option: {
+          title: { text: "" },
+          xAxis: { name: "" },
+          yAxis: { name: "" },
+        },
+      }),
+    },
+  },
+  data() {
+    return {
+      value: "all",
+      formFilterAlign: [
+        {
+          filters: [],
+          filterType1: "",
+          number1: null,
+          filterType2: "",
+          number2: null,
+          radio: null,
+        },
+      ],
+      options: [
+        {
+          value: "<",
+          label: "小于",
+        },
+        {
+          value: ">",
+          label: "大于",
+        },
+        {
+          value: "=",
+          label: "等于",
+        },
+      ],
+      formLabelAlign: {
+        ScatterXdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        ScatterYdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        LineXdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        LineYdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        BarXdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        BarYdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        Xdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        Ydata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
+        text: "",
+        Xlable: "",
+        Ylable: "",
+      },
+      disabled: true,
+      selectData: [], //可选择的数据
+    };
+  },
+  computed: {
+    ...mapState("dragChart", {
+      currentChartList: "currentChartList",
+      dataBaseCheckList: "dataBaseCheckList",
+    }),
+  },
+
+  watch: {
+    curEdit() {
+      this.changeData();
+    },
+    formLabelAlign: {
+      handler(nval) {
+        this.changeChart("filter");
+      },
+      deep: true,
+    },
+    formFilterAlign: {
+      handler(nval) {
+        this.changeChart("filter");
+      },
+      deep: true,
+    },
+    dataBaseCheckList: {
+      handler(newVal) {
+        this.disabled = newVal.length === 0 ? true : false;
+        this.selectData = newVal;
+      },
+      immediate: true, // 组件加载时立即检查
+      deep: true, // 深度监听
+    },
+  },
+  mounted() {
+    this.changeData();
+  },
+  methods: {
+    ...mapMutations("dragChart", [
+      "updateChart",
+      "setCurEdit",
+      "setFormFilterAlignData",
+    ]),
+    handleMetrics(type) {
+      switch (type) {
+        case "init":
+          this.formLabelAlign.Ydata.push({ lable: "", data: [], id: "" });
+          this.formFilterAlign.push({
+            filters: [],
+            filterType1: "",
+            number1: null,
+            filterType2: "",
+            number2: null,
+            radio: null,
+          });
+          break;
+        case "bar":
+          this.formLabelAlign.BarYdata.push({ lable: "", data: [], id: "" });
+          this.formFilterAlign.push({
+            filters: [],
+            filterType1: "",
+            number1: null,
+            filterType2: "",
+            number2: null,
+            radio: null,
+          });
+          break;
+        case "line":
+          this.formLabelAlign.LineYdata.push({ lable: "", data: [], id: "" });
+          this.formFilterAlign.push({
+            filters: [],
+            filterType1: "",
+            number1: null,
+            filterType2: "",
+            number2: null,
+            radio: null,
+          });
+          break;
+        case "scatter":
+          this.formLabelAlign.ScatterYdata.push({
+            lable: "",
+            data: [],
+            id: "",
+          });
+          this.formFilterAlign.push({
+            filters: [],
+            filterType1: "",
+            number1: null,
+            filterType2: "",
+            number2: null,
+            radio: null,
+          });
+          break;
+      }
+    },
+    //纬度轴 处理整合数据
+    handleXdata(type) {
+      switch (type) {
+        case "init":
+          this.formLabelAlign.Xdata = this.updateAxisData(
+            this.formLabelAlign.Xdata
+          );
+          break;
+        case "bar":
+          this.formLabelAlign.BarXdata = this.updateAxisData(
+            this.formLabelAlign.BarXdata
+          );
+          break;
+        case "line":
+          this.formLabelAlign.LineXdata = this.updateAxisData(
+            this.formLabelAlign.LineXdata
+          );
+          break;
+        case "scatter":
+          this.formLabelAlign.ScatterXdata = this.updateAxisData(
+            this.formLabelAlign.ScatterXdata
+          );
+          break;
+      }
+    },
+    //指标值 处理整合数据
+    handleYdata(ind, type) {
+      switch (type) {
+        case "init":
+          this.formLabelAlign.Ydata = this.updateAxisData(
+            this.formLabelAlign.Ydata
+          );
+          break;
+        case "bar":
+          this.formLabelAlign.BarYdata = this.updateAxisData(
+            this.formLabelAlign.BarYdata
+          );
+          break;
+        case "line":
+          this.formLabelAlign.LineYdata = this.updateAxisData(
+            this.formLabelAlign.LineYdata
+          );
+          break;
+        case "scatter":
+          this.formLabelAlign.ScatterYdata = this.updateAxisData(
+            this.formLabelAlign.ScatterYdata
+          );
+          break;
+      }
+
+      this.formFilterAlign.forEach((item, index) => {
+        if (ind === index) {
+          {
+            item.filters = [];
+            item.filterType1 = "";
+            item.number1 = null;
+            item.filterType2 = "";
+            item.number2 = null;
+            item.radio = null;
+          }
+        }
+      });
+    },
+    updateAxisData(axisData) {
+      axisData.forEach((item, index) => {
+        const selected = this.selectData.find(
+          (val) => (val && val.id) === (item && item.id)
+        );
+        if (selected) {
+          Vue.set(axisData, index, {
+            ...item,
+            label: selected.label || "",
+            data: selected.fileData || [],
+          });
+        }
+      });
+      return axisData;
+    },
+
+    changeData() {
+      if (this.$refs.form) {
+        this.$refs.form.resetFields();
+      }
+      // 图表内容回显图表配置赋值
+      if (this.curEdit && this.curEdit.option) {
+        // 使用 this.$set 替代直接赋值
+        this.$set(this, "formLabelAlign", {
+          text: this.curEdit.option.title?.text || "",
+          Xlable: this.curEdit.option.xAxis?.name || "",
+          Ylable: this.curEdit.option.yAxis?.name || "",
+          Xdata:
+            this.curEdit.Xdata.length > 0
+              ? this.curEdit.Xdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          Ydata:
+            this.curEdit.Ydata.length > 0
+              ? this.curEdit.Ydata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          BarXdata:
+            this.curEdit.BarXdata.length > 0
+              ? this.curEdit.BarXdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          BarYdata:
+            this.curEdit.BarYdata.length > 0
+              ? this.curEdit.BarYdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          LineXdata:
+            this.curEdit.LineXdata.length > 0
+              ? this.curEdit.LineXdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          LineYdata:
+            this.curEdit.LineYdata.length > 0
+              ? this.curEdit.LineYdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          ScatterXdata:
+            this.curEdit.ScatterXdata.length > 0
+              ? this.curEdit.ScatterXdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+          ScatterYdata:
+            this.curEdit.ScatterYdata.length > 0
+              ? this.curEdit.ScatterYdata
+              : [
+                  {
+                    label: "",
+                    data: [],
+                    id: "",
+                  },
+                ],
+        });
+        // 查找是否存在数据
+        const index = this.curEdit.formFilterAlignData.findIndex(
+          (item) => item.id === this.curEdit.id
+        );
+        if (index !== -1) {
+          this.$set(
+            this,
+            "formFilterAlign",
+            this.curEdit.formFilterAlignData[index]?.data
+          );
+        } else {
+          this.$set(this, "formFilterAlign", [
+            {
+              filters: [],
+              filterType1: "",
+              number1: null,
+              filterType2: "",
+              number2: null,
+              radio: null,
+            },
+          ]);
+        }
+      } else {
+        this.$message.warning("请选择一个图表进行编辑");
+      }
+    },
+    //全部数据渲染
+    changeChart(isFilter) {
+      if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
+      const item = JSON.parse(JSON.stringify(this.curEdit));
+
+      if (this.curEdit.type === "scatter" || this.curEdit.type === "radar") {
+        //判断散点选择的是否为number 或可转为number
+        const isAllNumbers = (data) =>
+          data.every((val) =>
+            val.data.every((vals) => {
+              return !isNaN(
+                Number(vals[val.label] == undefined ? 0 : vals[val.label])
+              );
+            })
+          );
+        const isAllNumbersXdata = isAllNumbers(this.formLabelAlign.Xdata);
+        const isAllNumbersYdata = isAllNumbers(this.formLabelAlign.Ydata);
+        if (
+          this.curEdit.type === "scatter" &&
+          (!isAllNumbersXdata || !isAllNumbersYdata)
+        ) {
+          this.$message.warning("请选择数值项进行散点图绘制");
+          return;
+        }
+        if (this.curEdit.type === "radar" && !isAllNumbersYdata) {
+          this.$message.warning("指标值请选择数值项进行散点图绘制");
+          return;
+        }
+      }
+      // 确保标题和坐标轴对象存在
+      item.option.title = item.option.title || {};
+      Object.assign(item.option.title, { text: this.formLabelAlign.text });
+      if (this.curEdit.type === "bar" || this.curEdit.type === "line") {
+        handleBarChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "scatter") {
+        handleScatterChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "radar") {
+        handleRadarChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      } else if (this.curEdit.type === "Cp") {
+        handleCpChartLogic(
+          item,
+          this.formLabelAlign,
+          this.formFilterAlign,
+          isFilter,
+          this.curEdit.type
+        );
+      }
+      //设置仓库
+      this.setFormFilterAlignData({
+        id: this.curEdit.id,
+        data: JSON.parse(JSON.stringify(this.formFilterAlign)),
+      });
+      this.updateChart({
+        ...item,
+        Ydata: this.formLabelAlign.Ydata,
+        formFilterAlignData: this.formFilterAlign,
+      }); // 更新图表
+    },
+    removeYdata(index, type) {
+      switch (type) {
+        case "init":
+          this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项
+          break;
+        case "bar":
+          this.formLabelAlign.BarYdata.splice(index, 1); // 删除当前项
+          break;
+        case "line":
+          this.formLabelAlign.LineYdata.splice(index, 1); // 删除当前项
+          break;
+        case "scatter":
+          this.formLabelAlign.ScatterYdata.splice(index, 1); // 删除当前项
+          break;
+      }
+    },
+    removeXdata(index, type) {
+      switch (type) {
+        case "init":
+          this.formLabelAlign.Xdata.splice(index, 1); // 删除当前项
+          break;
+        case "bar":
+          this.formLabelAlign.BarXdata.splice(index, 1); // 删除当前项
+          break;
+        case "line":
+          this.formLabelAlign.LineXdata.splice(index, 1); // 删除当前项
+          break;
+        case "scatter":
+          this.formLabelAlign.ScatterXdata.splice(index, 1); // 删除当前项
+          break;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+::v-deep .el-form-item {
+  width: 100% !important;
+  margin-bottom: 5px;
+  .el-form-item__label {
+    width: 100% !important;
+  }
+  .attributeItemData {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+.el-divider--horizontal {
+  height: 2px;
+}
+::v-deep .filterMutiple .el-select__tags-text {
+  max-width: 40px !important;
+}
+</style>

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

@@ -1,4 +1,4 @@
 export default {
-  title: () => import(/* webpackChunkName:"" */ './title.vue'),
-  legend: () => import(/* webpackChunkName:"" */ './legend.vue')
-}
+  chartTitle: () => import(/* webpackChunkName:"" */ "./chartTitle.vue"),
+  legend: () => import(/* webpackChunkName:"" */ "./legend.vue"),
+};

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

@@ -1,578 +0,0 @@
-<template>
-  <div>
-    <el-form
-      label-position="top"
-      :model="formLabelAlign"
-      size="mini"
-      ref="form"
-    >
-      <el-form-item label="纬度标签">
-        <div
-          slot="label"
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          "
-        >
-          <span>纬度标签</span>
-          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
-            <i
-              @click="
-                formLabelAlign.Xdata.push({ lable: '', data: [], id: '' })
-              "
-              class="el-icon-circle-plus-outline"
-              style="font-size: 20px"
-            ></i>
-          </el-tooltip> -->
-        </div>
-        <template v-for="(item, ind) in formLabelAlign.Xdata">
-          <el-select
-            style="margin: 5px 0"
-            :key="ind + 'select'"
-            v-model="formLabelAlign.Xdata[ind].id"
-            placeholder="请先进行数据配置"
-            :disabled="disabled"
-            @change="handleXdata"
-          >
-            <el-option
-              v-for="item in selectData"
-              :label="item.label"
-              :value="item.id"
-              :key="item.id"
-            ></el-option>
-          </el-select>
-        </template>
-      </el-form-item>
-      <el-form-item label="指标值">
-        <div
-          slot="label"
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          "
-        >
-          <span>指标值</span>
-          <el-tooltip content="添加指标值" placement="bottom-start">
-            <i
-              @click="handleMetrics"
-              class="el-icon-circle-plus-outline"
-              style="font-size: 20px"
-            ></i>
-          </el-tooltip>
-        </div>
-        <template v-for="(item, ind) in formLabelAlign.Ydata">
-          <div class="attributeItemData">
-            <el-select
-              style="margin: 5px 0"
-              :key="ind + 'select' + 'zhibiao'"
-              v-model="formLabelAlign.Ydata[ind].id"
-              placeholder="请先进行数据配置"
-              :disabled="disabled"
-              @change="handleYdata"
-            >
-              <el-option
-                v-for="item in selectData"
-                :label="item.label"
-                :value="item.id"
-                :key="item.id"
-              ></el-option>
-            </el-select>
-            <el-tooltip
-              :content="
-                formLabelAlign.Ydata.length <= 1
-                  ? '该指标不可删除，最少存在一组指标'
-                  : '删除该指标'
-              "
-              placement="bottom-start"
-            >
-              <el-button
-                type="text"
-                :disabled="formLabelAlign.Ydata.length <= 1"
-                @click="removeYdata(ind)"
-              >
-                <i
-                  class="el-icon-delete"
-                  style="font-size: 16px; color: red; padding: 0 0 0 10px"
-                ></i
-              ></el-button>
-            </el-tooltip>
-          </div>
-        </template>
-      </el-form-item>
-      <el-form-item label="标题名称">
-        <el-input v-model="formLabelAlign.text"></el-input>
-      </el-form-item>
-      <el-form-item
-        label="X轴名称"
-        v-if="curEdit.type !== 'pie' && curEdit.type !== 'radar'"
-      >
-        <el-input v-model="formLabelAlign.Xlable"></el-input>
-      </el-form-item>
-      <el-form-item
-        label="Y轴名称"
-        v-if="curEdit.type !== 'pie' && curEdit.type !== 'radar'"
-      >
-        <el-input v-model="formLabelAlign.Ylable"></el-input>
-      </el-form-item>
-    </el-form>
-    <div style="margin: 20px 0">
-      <el-divider style="height: 2px"></el-divider>
-    </div>
-    <el-collapse v-if="formLabelAlign.Ydata[0].data.length > 0">
-      <el-collapse-item
-        v-for="(itemFilter, filterInd) in formLabelAlign.Ydata"
-        :title="itemFilter.label || `数据筛选`"
-        :name="itemFilter.id"
-        :key="itemFilter.id"
-      >
-        <el-form
-          label-position="top"
-          :model="formFilterAlign[filterInd]"
-          size="mini"
-          :ref="`form${filterInd}`"
-        >
-          <el-form-item label="数据筛选">
-            <el-select
-              v-model="formFilterAlign[filterInd].filters"
-              placeholder="请选择数据"
-              multiple
-              collapse-tags
-            >
-              <!-- <el-option label="全部" value="all"></el-option> -->
-              <el-option
-                v-for="(item, index) in itemFilter.data"
-                :label="
-                  item[itemFilter.label] ? `${item[itemFilter.label]} ` : `0`
-                "
-                :value="item[itemFilter.label]"
-                :key="item[itemFilter.label] + '' + index"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="条件过滤">
-            <el-select placeholder="请选择过滤条件" v-model="value">
-              <el-option label="全部" value="all"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="显示值满足以下条件">
-            <el-select
-              v-model="formFilterAlign[filterInd].filterType1"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-            <el-input
-              v-model="formFilterAlign[filterInd].number1"
-              type="number"
-            ></el-input>
-            <el-radio v-model="formFilterAlign[filterInd].radio" label="1"
-              >或</el-radio
-            >
-            <el-radio v-model="formFilterAlign[filterInd].radio" label="2"
-              >且</el-radio
-            >
-            <el-select
-              v-model="formFilterAlign[filterInd].filterType2"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-            <el-input
-              v-model="formFilterAlign[filterInd].number2"
-              type="number"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script>
-import { mapState, mapMutations } from "vuex";
-import { getFormattedLabels, getFormattedSeries } from "./configFn";
-
-export default {
-  name: "title",
-  props: {
-    curEdit: {
-      type: Object,
-      default: () => ({
-        option: {
-          title: { text: "" },
-          xAxis: { name: "" },
-          yAxis: { name: "" },
-        },
-      }),
-    },
-  },
-  data() {
-    return {
-      value: "all",
-      formFilterAlign: [],
-      options: [
-        {
-          value: "<",
-          label: "小于",
-        },
-        {
-          value: ">",
-          label: "大于",
-        },
-        {
-          value: "=",
-          label: "等于",
-        },
-      ],
-      formLabelAlign: {
-        Xdata: [
-          {
-            label: "",
-            data: [],
-            id: "",
-          },
-        ],
-        Ydata: [
-          {
-            label: "",
-            data: [],
-            id: "",
-          },
-        ],
-        text: "",
-        Xlable: "",
-        Ylable: "",
-      },
-      disabled: true,
-      selectData: [], //可选择的数据
-    };
-  },
-  computed: {
-    ...mapState("dragChart", {
-      currentChartList: "currentChartList",
-      dataBaseCheckList: "dataBaseCheckList",
-      formFilterAlignData: "formFilterAlignData",
-    }),
-  },
-
-  watch: {
-    curEdit() {
-      this.changeData();
-    },
-    formLabelAlign: {
-      handler(nval) {
-        this.changeChart("nofilter");
-      },
-      deep: true,
-    },
-    formFilterAlign: {
-      handler(nval) {
-        this.changeChart("filter");
-      },
-      deep: true,
-    },
-    dataBaseCheckList: {
-      handler(newVal) {
-        this.disabled = !newVal.children?.length;
-
-        this.selectData = newVal.children;
-      },
-      immediate: true, // 组件加载时立即检查
-      deep: true, // 深度监听
-    },
-  },
-  mounted() {
-    this.changeData();
-  },
-  methods: {
-    // 修改后的 filterData 方法
-    filterData(filterData, dataList, label) {
-      const filter = filterData; // 处理第一个条件组
-      const filteredData = dataList.map((item) => {
-        // 如果没有提供 number1 或 filterType1，则默认 condition1 满足
-        if (item !== null) {
-          const condition1 =
-            filter.filterType1 && filter.number1 !== null
-              ? this.calculate(filter.filterType1, item[label], filter.number1)
-              : true;
-          // 如果没有提供 number2 或 filterType2，则默认 condition2 满足
-          const condition2 =
-            filter.filterType2 && filter.number2 !== null
-              ? this.calculate(filter.filterType2, item[label], filter.number2)
-              : true;
-          // 根据逻辑关系 (或/且)
-          if (filter.radio === "1") {
-            return condition1 || condition2 ? item : null; // 满足任一条件
-          } else if (filter.radio === "2") {
-            return condition1 && condition2 ? item : null; // 同时满足两个条件
-          } else if (!condition2) {
-            return null;
-          } else if (!condition1) {
-            return null;
-          } else {
-            // 未指定逻辑关系时默认满足条件
-            return item;
-          }
-        } else {
-          return null;
-        }
-      });
-      return filteredData; // 返回包含 null 的数据
-    },
-
-    // 修改后的 calculate 方法
-    calculate(operator, testValue, conditionValue) {
-      switch (operator) {
-        case ">":
-          return Number(testValue) > Number(conditionValue);
-        case "<":
-          return Number(testValue) < Number(conditionValue);
-        case "=":
-          return Number(testValue) === Number(conditionValue);
-        default:
-          return false;
-      }
-    },
-    handleMetrics() {
-      this.formLabelAlign.Ydata.push({ lable: "", data: [], id: "" });
-      this.formFilterAlign.push({
-        filters: [],
-        filterType1: "",
-        number1: null,
-        filterType2: "",
-        number2: null,
-        radio: null,
-      });
-    },
-    ...mapMutations("dragChart", [
-      "updateChart",
-      "setCurEdit",
-      "setFormFilterAlignData",
-    ]),
-    //纬度轴
-    handleXdata() {
-      this.formLabelAlign.Xdata = this.updateAxisData(
-        this.formLabelAlign.Xdata
-      );
-    },
-    handleYdata() {
-      this.formLabelAlign.Ydata = this.updateAxisData(
-        this.formLabelAlign.Ydata
-      );
-    },
-    updateAxisData(axisData) {
-      return axisData.map((item) => {
-        const selected = this.selectData.find(
-          (val) => (val && val.id) === (item && item.id)
-        );
-        if (selected) {
-          return {
-            ...item,
-            label: selected.label || "",
-            data: selected.fileData || [],
-          };
-        }
-        return item;
-      });
-    },
-    changeData() {
-      if (this.$refs.form) {
-        this.$refs.form.resetFields();
-      }
-
-      if (this.curEdit && this.curEdit.option) {
-        this.formLabelAlign = {
-          text: this.curEdit.option.title?.text || "",
-          Xlable: this.curEdit.option.xAxis?.name || "",
-          Ylable: this.curEdit.option.yAxis?.name || "",
-          Xdata:
-            this.curEdit.Xdata.length > 0
-              ? this.curEdit.Xdata
-              : [
-                  {
-                    label: "",
-                    data: [],
-                    id: "",
-                  },
-                ],
-          Ydata:
-            this.curEdit.Ydata.length > 0
-              ? this.curEdit.Ydata
-              : [
-                  {
-                    label: "",
-                    data: [],
-                    id: "",
-                  },
-                ],
-        };
-        const index = this.formFilterAlignData.findIndex(
-          (item) => item.id === this.curEdit.id
-        );
-        if (index !== -1) {
-          this.formFilterAlign = this.formFilterAlignData[index]?.data;
-        } else {
-          this.formFilterAlign = [
-            {
-              filters: [],
-              filterType1: "",
-              number1: null,
-              filterType2: "",
-              number2: null,
-              radio: null,
-            },
-          ];
-        }
-      } else {
-        this.$message.warning("请选择一个图表进行编辑");
-      }
-    },
-    //全部数据渲染
-    changeChart(isFilter) {
-      if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
-      const item = JSON.parse(JSON.stringify(this.curEdit));
-      // 确保标题和坐标轴对象存在
-      item.option.title = item.option.title || {};
-      Object.assign(item.option.title, { text: this.formLabelAlign.text });
-      if (this.curEdit.type !== "pie" && this.curEdit.type !== "radar") {
-        if (isFilter === "filter") {
-          // 数据筛选逻辑
-          const filterResult = this.formLabelAlign.Ydata.map(
-            (yItem, index) => ({
-              label: yItem.label,
-              id: yItem.id,
-              data: yItem.data.map((val) => {
-                const filters = this.formFilterAlign[index]?.filters || [];
-                return filters.length > 0 && !filters.includes(val[yItem.label])
-                  ? null
-                  : val; // 如果不匹配，返回 null；否则返回原始项
-              }),
-            })
-          );
-          // 条件筛选逻辑
-          const filterList = filterResult.map((filteredItem, index) => {
-            const filter = this.formFilterAlign[index];
-            const { filterType1, filterType2, number1, number2 } = filter;
-            if (
-              !filterType1 &&
-              !filterType2 &&
-              number1 == null &&
-              number2 == null
-            ) {
-              // 如果所有条件为空，直接保留原始数据
-              return {
-                label: filteredItem.label,
-                id: filteredItem.id,
-                data: filteredItem.data,
-              };
-            } else {
-              // 执行条件筛选
-              const filterDatas = this.filterData(
-                filter, //条件项
-                filteredItem.data, //过滤数据其中包含null
-                filteredItem.label //过滤数据其中包含null
-              );
-              return {
-                label: filteredItem.label,
-                id: filteredItem.id,
-                data: [...filterDatas],
-              };
-            }
-          });
-
-          item.Xdata = this.formLabelAlign.Xdata;
-          item.Ydata = filterList;
-        } else {
-          // 未筛选，直接赋值
-          item.Xdata = this.formLabelAlign.Xdata;
-          item.Ydata = this.formLabelAlign.Ydata;
-        }
-        // 配置 xAxis 和 yAxis
-        item.option.xAxis = {
-          ...item.option.xAxis,
-          name: this.formLabelAlign.Xlable,
-        };
-        item.option.yAxis = {
-          ...item.option.yAxis,
-          name: this.formLabelAlign.Ylable,
-        };
-        if (item.Ydata[0]?.data?.length > 0) {
-          item.option.series = getFormattedSeries(
-            item.Ydata,
-            this.curEdit.type
-          );
-        }
-        if (item.Xdata[0]?.data?.length > 0) {
-          item.option.xAxis = {
-            ...item.option.xAxis,
-            data: item.Xdata[0].data,
-            axisTick: { alignWithLabel: true },
-            axisLabel: {
-              formatter: (value, index) =>
-                value !== null
-                  ? getFormattedLabels(index, item.Xdata, value)
-                  : "",
-            },
-          };
-
-          item.option.tooltip = {
-            trigger: "axis",
-            axisPointer: { type: "shadow" },
-            formatter: (params) => {
-              const index = params[0]?.dataIndex; // 获取当前数据点索引
-              const content = params
-                .map(
-                  (param) =>
-                    `${param.marker}${param.seriesName}: ${param.value}`
-                )
-                .join("<br/>");
-              const customLabels = getFormattedLabels(index, item.Xdata);
-              return `${customLabels}<br/>${content}`;
-            },
-          };
-        }
-      }
-      this.setFormFilterAlignData({
-        id: this.curEdit.id,
-        data: JSON.parse(JSON.stringify(this.formFilterAlign)),
-      });
-
-      this.updateChart(item); // 更新图表
-    },
-    removeYdata(index) {
-      this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-::v-deep .el-form-item {
-  width: 100% !important;
-  margin-bottom: 5px;
-  .el-form-item__label {
-    width: 100% !important;
-  }
-  .attributeItemData {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-.el-divider--horizontal {
-  height: 2px;
-}
-</style>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-11-01 10:14:11
- * @LastEditTime: 2024-11-20 09:55:34
+ * @LastEditTime: 2024-11-20 10:21:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -92,7 +92,6 @@ export default {
           type: "line",
           name: "折线图",
         },
-
         {
           type: "Cp",
           name: "散点折线图",

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

@@ -11,7 +11,7 @@
         :filter-node-method="filterNode"
         ref="tree"
         :render-content="renderContent"
-        @node-click="handleNodeClick"
+        @check-change="handleNodeClick"
       />
     </el-card>
   </div>
@@ -77,7 +77,7 @@ export default {
       });
       // 检查选中的节点状态，如果没有选中节点则调用 updateDataBase({})
       if (!this.selectedNodeId) {
-        this.updateDataBase({});
+        this.updateDataBase([]);
       }
     },
     getAllData() {
@@ -99,12 +99,29 @@ export default {
     },
     handleNodeClick(data) {
       this.selectedNodeId = data.id;
-      this.updateDataBase(data);
+
+      this.updateDataBase(this.$refs.tree.getCheckedNodes());
+    },
+    // 父节点复选框改变时递归设置子节点状态
+    handleParentNodeChange(node, isChecked) {
+      // 设置父节点及所有子节点状态
+      this.$refs.tree.setChecked(node, isChecked, true); // true 表示递归操作
     },
     renderContent(h, { node, data }) {
       return h("span", [
+        // 子节点复选框
         node.level > 1
           ? h("span", [
+              h("el-checkbox", {
+                props: {
+                  value: node.checked,
+                },
+                on: {
+                  change: (val) => {
+                    this.$refs.tree.setChecked(node, val);
+                  },
+                },
+              }),
               h("svg-icon", {
                 props: {
                   "icon-class": "fields2",
@@ -114,18 +131,19 @@ export default {
             ])
           : null,
 
+        // 父节点复选框
         node.level === 1
           ? h("span", [
               h(
-                "el-radio",
+                "el-checkbox",
                 {
                   props: {
-                    value: this.selectedNodeId,
-                    label: data.id,
+                    value: node.checked,
+                    indeterminate: node.indeterminate, // 用于半选状态
                   },
                   on: {
-                    input: (val) => {
-                      this.selectedNodeId = val;
+                    change: (val) => {
+                      this.handleParentNodeChange(node, val);
                     },
                   },
                 },