数据筛选条件筛选

src/store/dragChart.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 10:06:23
- * @LastEditTime: 2024-11-15 09:17:48
+ * @LastEditTime: 2024-11-18 15:27:25
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/store/dragChart.js
@@ -20,7 +20,8 @@ export default {
     currentChartList: [], // 当前文件的当前数据
     originChartList: [], // 当前文件的原始数据
     fileList: [], // 文件列表
-    dataBaseCheckList: {},
+    dataBaseCheckList: {}, //选中数据更新
+    formFilterAlignData: [], //这个是所有图表数据筛选保存字段
   },
   mutations: {
     setUpdateTriggerGetData(state, value) {
@@ -44,6 +45,7 @@ export default {
         triggerGetData: false,
         updateTriggerGetData: false,
         relatedFieldsData: [], //关联字段表
+        formFilterAlign: [],
       };
 
       // 遍历重置每个字段
@@ -51,6 +53,24 @@ export default {
         state[key] = resetState[key];
       });
     },
+    //编辑数据筛选字段
+    setFormFilterAlignData(state, data) {
+      //将数据存储起来用于回显 数据
+      // 检查是否已经存在相同的 id
+      const index = state.formFilterAlignData.findIndex(
+        (item) => item.id === data.id
+      );
+      if (index !== -1) {
+        // 如果找到相同的 id，直接更新
+        state.formFilterAlignData[index] = {
+          ...data,
+          // data: [...state.formFilterAlignData[index].data, ...data.data],
+        };
+      } else {
+        // 如果不存在，新增一条数据
+        state.formFilterAlignData.push({ ...data });
+      }
+    },
     // 设置当前编辑的图表
     setCurEdit(state, data) {
       state.curEdit = data;

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

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-12 09:27:50
- * @LastEditTime: 2024-11-12 17:33:26
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-19 15:30:26
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/configFn.js
  */
@@ -13,7 +13,8 @@ export const getFormattedLabels = (index, lableData) => {
   lableData.forEach((item) => {
     if (item.data[index] !== undefined) {
       const labelValue = item.data[index][item.label];
-      labels.push(`${item.label}: ${labelValue}`);
+      // labels.push(`${item.label}: ${labelValue}`);//展示label
+      labels.push(`${labelValue}`); //不展示label
     }
   });
 
@@ -27,7 +28,9 @@ export const getFormattedSeries = (data, chartType) => {
     series.push({
       name: item.label,
       type: chartType,
-      data: item.data.map((data) => parseFloat(data[item.label]) || 0), // 将数据转换为数值
+      data: item.data.map(
+        (data) => parseFloat(data !== null && data[item.label]) || 0
+      ), // 将数据转换为数值
     });
   });
   return series;

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

@@ -56,9 +56,7 @@
           <span>指标值</span>
           <el-tooltip content="添加指标值" placement="bottom-start">
             <i
-              @click="
-                formLabelAlign.Ydata.push({ lable: '', data: [], id: '' })
-              "
+              @click="handleMetrics"
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
@@ -83,13 +81,15 @@
             </el-select>
             <el-tooltip
               :content="
-                ind === 0 ? '该指标不可删除，最少存在一组指标' : '删除该指标'
+                formLabelAlign.Ydata.length <= 1
+                  ? '该指标不可删除，最少存在一组指标'
+                  : '删除该指标'
               "
               placement="bottom-start"
             >
               <el-button
                 type="text"
-                :disabled="ind === 0"
+                :disabled="formLabelAlign.Ydata.length <= 1"
                 @click="removeYdata(ind)"
               >
                 <i
@@ -120,7 +120,7 @@
     <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 v-if="formLabelAlign.Ydata[0].data.length > 0">
       <el-collapse-item
         v-for="(itemFilter, filterInd) in formLabelAlign.Ydata"
         :title="itemFilter.label || `数据筛选`"
@@ -131,22 +131,22 @@
           label-position="top"
           :model="formFilterAlign[filterInd]"
           size="mini"
-          ref="form"
+          :ref="`form${filterInd}`"
         >
           <el-form-item label="数据筛选">
             <el-select
-              v-model="formFilterAlign[filterInd].filter"
+              v-model="formFilterAlign[filterInd].filters"
               placeholder="请选择数据"
               multiple
               collapse-tags
             >
-              <el-option label="全部" value="all"></el-option>
+              <!-- <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] + '' + index"
+                :value="item[itemFilter.label]"
                 :key="item[itemFilter.label] + '' + index"
               >
               </el-option>
@@ -157,7 +157,7 @@
               <el-option label="全部" value="all"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="显示值满足一下条件">
+          <el-form-item label="显示值满足以下条件">
             <el-select
               v-model="formFilterAlign[filterInd].filterType1"
               placeholder="请选择"
@@ -171,13 +171,13 @@
               </el-option>
             </el-select>
             <el-input
-              v-model="formLabelAlign[filterInd].number1"
+              v-model="formFilterAlign[filterInd].number1"
               type="number"
             ></el-input>
-            <el-radio v-model="formLabelAlign[filterInd].radio" label="1"
+            <el-radio v-model="formFilterAlign[filterInd].radio" label="1"
               >或</el-radio
             >
-            <el-radio v-model="formLabelAlign[filterInd].radio" label="2"
+            <el-radio v-model="formFilterAlign[filterInd].radio" label="2"
               >且</el-radio
             >
             <el-select
@@ -193,19 +193,19 @@
               </el-option>
             </el-select>
             <el-input
-              v-model="formLabelAlign[filterInd].number2"
+              v-model="formFilterAlign[filterInd].number2"
               type="number"
             ></el-input>
           </el-form-item>
         </el-form>
       </el-collapse-item>
-    </el-collapse> -->
+    </el-collapse>
   </div>
 </template>
 <script>
 import { mapState, mapMutations } from "vuex";
 import { getFormattedLabels, getFormattedSeries } from "./configFn";
-import { all } from "axios";
+
 export default {
   name: "title",
   props: {
@@ -226,15 +226,15 @@ export default {
       formFilterAlign: [],
       options: [
         {
-          value: "1",
+          value: "<",
           label: "小于",
         },
         {
-          value: "2",
+          value: ">",
           label: "大于",
         },
         {
-          value: "3",
+          value: "=",
           label: "等于",
         },
       ],
@@ -265,17 +265,23 @@ export default {
     ...mapState("dragChart", {
       currentChartList: "currentChartList",
       dataBaseCheckList: "dataBaseCheckList",
+      formFilterAlignData: "formFilterAlignData",
     }),
   },
+
   watch: {
     curEdit() {
-      console.log("title-watch-curEdit");
       this.changeData();
     },
     formLabelAlign: {
       handler(nval) {
-        console.log("title-watch-formLabelAlign");
-        this.changeChart();
+        this.changeChart("nofilter");
+      },
+      deep: true,
+    },
+    formFilterAlign: {
+      handler(nval) {
+        this.changeChart("filter");
       },
       deep: true,
     },
@@ -293,7 +299,70 @@ export default {
     this.changeData();
   },
   methods: {
-    ...mapMutations("dragChart", ["updateChart", "setCurEdit"]),
+    // 修改后的 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(
@@ -307,27 +376,26 @@ export default {
     },
     updateAxisData(axisData) {
       return axisData.map((item) => {
-        const selected = this.selectData.find((val) => val.id === item.id);
+        const selected = this.selectData.find(
+          (val) => (val && val.id) === (item && item.id)
+        );
         if (selected) {
           return {
             ...item,
-            label: selected.label,
+            label: selected.label || "",
             data: selected.fileData || [],
           };
         }
         return item;
       });
     },
-
     changeData() {
       if (this.$refs.form) {
         this.$refs.form.resetFields();
       }
 
       if (this.curEdit && this.curEdit.option) {
-        console.log(this.curEdit, "title-changeData-this.curEdit");
         this.formLabelAlign = {
-          // ...this.formLabelAlign,
           text: this.curEdit.option.title?.text || "",
           Xlable: this.curEdit.option.xAxis?.name || "",
           Ylable: this.curEdit.option.yAxis?.name || "",
@@ -352,67 +420,136 @@ export default {
                   },
                 ],
         };
+        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 {
-        console.log("curEdit.option 不存在", this.curEdit);
+        this.$message.warning("请选择一个图表进行编辑");
       }
     },
     //全部数据渲染
-    changeChart() {
-      if (!this.curEdit || !this.curEdit.option) return; // 确保 curEdit 和 option 存在
+    changeChart(isFilter) {
+      if (!this.curEdit?.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
-      // 确保 title, xAxis, yAxis 存在
+      // 确保标题和坐标轴对象存在
       item.option.title = item.option.title || {};
-      // 更新标题和坐标轴名称
       Object.assign(item.option.title, { text: this.formLabelAlign.text });
-      //判断图表类型进行值设置
       if (this.curEdit.type !== "pie" && this.curEdit.type !== "radar") {
-        item.option.xAxis = item.option.xAxis || {};
-        item.option.yAxis = item.option.yAxis || {};
-        item.Xdata = this.formLabelAlign.Xdata;
-        item.Ydata = this.formLabelAlign.Ydata;
-        Object.assign(item.option.xAxis, { name: this.formLabelAlign.Xlable });
-        Object.assign(item.option.yAxis, { name: this.formLabelAlign.Ylable });
-        console.log(item, "title-changeChart-this.curEdit");
-        if (item.Ydata[0].data.length > 0) {
+        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) {
-          console.log(item.Xdata, "item.Xdata");
+        if (item.Xdata[0]?.data?.length > 0) {
           item.option.xAxis = {
-            name: item.Xlable,
+            ...item.option.xAxis,
             data: item.Xdata[0].data,
-            axisTick: {
-              alignWithLabel: true,
-            },
+            axisTick: { alignWithLabel: true },
             axisLabel: {
-              formatter: (value, index) => {
-                // 格式化标签内容
-                return getFormattedLabels(index, item.Xdata);
-              },
+              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; // 获取当前数据点的索引
-              // 默认 tooltip 内容
-              let content = params
-                .map((param) => {
-                  return `${param.marker}${param.seriesName}: ${param.value}`;
-                })
+              const index = params[0]?.dataIndex; // 获取当前数据点索引
+              const content = params
+                .map(
+                  (param) =>
+                    `${param.marker}${param.seriesName}: ${param.value}`
+                )
                 .join("<br/>");
-              // 获取自定义的标签信息
               const customLabels = getFormattedLabels(index, item.Xdata);
-              // 合并 tooltip 内容和自定义标签
               return `${customLabels}<br/>${content}`;
             },
           };
         }
       }
+      this.setFormFilterAlignData({
+        id: this.curEdit.id,
+        data: JSON.parse(JSON.stringify(this.formFilterAlign)),
+      });
 
       this.updateChart(item); // 更新图表
     },