振动分析

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

@@ -0,0 +1,140 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:22:48
+ * @LastEditTime: 2024-11-20 09:46:14
+ * @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",
+    scale: true,
+    max: 30, // 风速最大值为30m/s，视具体数据调整
+    axisLabel: {
+      show: true,
+      interval: "auto",
+      formatter: "{value} m/s", // 风速单位：m/s
+    },
+    show: true,
+    name: "风速（m/s）",
+    nameLocation: "center",
+    nameTextStyle: {
+      padding: [20, 0, 0, 0],
+    },
+  },
+  yAxis: {
+    type: "value",
+    scale: true,
+    axisLabel: {
+      show: true,
+      interval: "auto",
+      formatter: "{value} kW", // 功率单位：kW
+    },
+    show: true,
+    name: "功率输出（kW）",
+    nameLocation: "center",
+    nameTextStyle: {
+      padding: [0, 0, 30, 0],
+    },
+  },
+  grid: {
+    left: "15%",
+    right: "15%",
+    bottom: "15%",
+    top: "15%",
+    containLabel: true,
+  },
+  legend: {
+    top: "90%",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  tooltip: {
+    show: true,
+    trigger: "axis",
+    formatter: function (params) {
+      let type = params[0].componentSubType;
+      if (type === "scatter") {
+        let index = params[0];
+        return (
+          "风机型号:  " +
+          index.seriesName +
+          "</br>" +
+          "风速:&nbsp;" +
+          index.data[0] +
+          " m/s</br>" +
+          "功率输出:&nbsp;&nbsp;" +
+          index.data[1] +
+          " kW</br>"
+        );
+      }
+    },
+  },
+  series: [
+    {
+      name: "风机A（型号1）",
+      type: "line",
+      data: [
+        [0, 0],
+        [30, 120], // 假设风速为30 m/s时功率输出为120 kW
+      ],
+      lineStyle: { color: "#144464" }, // 折线颜色
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+    {
+      name: "风机B（型号2）",
+      type: "line",
+      data: [
+        [0, 0],
+        [30, 100], // 假设风速为30 m/s时功率输出为100 kW
+      ],
+      lineStyle: { color: "#e4641c" }, // 折线颜色
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+    {
+      name: "风机A 散点",
+      symbolSize: 8,
+      color: "#348ccc",
+      data: [
+        [3, 2], // 风速为3 m/s时的功率输出为2 kW
+        [6, 5], // 风速为6 m/s时的功率输出为5 kW
+        [9, 12], // 风速为9 m/s时的功率输出为12 kW
+        [15, 35], // 风速为15 m/s时的功率输出为35 kW
+        [18, 60], // 风速为18 m/s时的功率输出为60 kW
+      ],
+      type: "scatter",
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+    {
+      name: "风机B 散点",
+      symbolSize: 10,
+      color: "#e4bc2c",
+      data: [
+        [4, 3], // 风速为4 m/s时的功率输出为3 kW
+        [8, 8], // 风速为8 m/s时的功率输出为8 kW
+        [12, 20], // 风速为12 m/s时的功率输出为20 kW
+        [16, 50], // 风速为16 m/s时的功率输出为50 kW
+        [20, 80], // 风速为20 m/s时的功率输出为80 kW
+      ],
+      type: "scatter",
+      renderMode: "webgl", // 启用 WebGL 渲染
+    },
+  ],
+};

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

@@ -0,0 +1,55 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:13:21
+ * @LastEditTime: 2024-11-20 09:47:51
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/Heatmap.js
+ */
+//Heatmap-热力图
+// 风速随时间和风向的分布
+export const option = {
+  tooltip: {
+    position: "top",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      //   magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: ["00:00", "01:00", "02:00", "03:00"], // 时间
+    name: "时间",
+  },
+  yAxis: {
+    type: "category",
+    data: ["0°", "90°", "180°", "270°"], // 风向
+    name: "风向",
+  },
+  visualMap: {
+    min: 0,
+    max: 20, // 风速范围
+    calculable: true,
+    orient: "horizontal",
+    left: "center",
+    bottom: "15%",
+  },
+  series: [
+    {
+      name: "风速",
+      type: "heatmap",
+      data: [
+        [0, 0, 5],
+        [1, 0, 10],
+        [2, 0, 15],
+        [0, 1, 7],
+        [1, 1, 8],
+        [2, 1, 12],
+      ], // [x, y, 风速值]
+    },
+  ],
+};

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

@@ -21,11 +21,26 @@ export const option = {
       alignWithLabel: true,
     },
   },
-
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  legend: {
+    top: "bottom",
+  },
   yAxis: {
     type: "value",
+    nameLocation: "middle", // 设置名称位置，可以是 'start', 'middle' 或 'end'
+    nameTextStyle: {
+      fontSize: 14, // 文字大小
+      color: "#333", // 文字颜色
+      padding: [0, 0, 30, 0], // 文字与轴线的距离
+    },
   },
-
   series: [
     {
       name: "Direct",

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

@@ -24,6 +24,14 @@ export const option = {
       saveAsImage: { show: true },
     },
   },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
   legend: {
     data: ["Evaporation", "Precipitation", "Temperature"],
   },

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

@@ -0,0 +1,44 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:14:10
+ * @LastEditTime: 2024-11-20 09:46:01
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/boxPlot.js
+ */
+//箱线图-boxPlot
+//不同季节的风速分布
+export const option = {
+  tooltip: {
+    trigger: "item",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: ["春季", "夏季", "秋季", "冬季"],
+    name: "季节",
+  },
+  yAxis: {
+    type: "value",
+    name: "风速 (m/s)",
+  },
+  series: [
+    {
+      name: "风速分布",
+      type: "boxplot",
+      data: [
+        [1.5, 5, 7, 12, 20], // 最小值, Q1, 中位数, Q3, 最大值
+        [2, 6, 8, 14, 22],
+        [1, 4, 6, 10, 18],
+        [0.5, 3, 5, 8, 15],
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,51 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:17:31
+ * @LastEditTime: 2024-11-20 09:31:26
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/hexbin.js
+ */
+// 蜂巢图-Hexbin
+// 风速和风向的联合分布
+export const option = {
+  tooltip: {
+    trigger: "item",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "value",
+    name: "风向 (°)",
+  },
+  yAxis: {
+    type: "value",
+    name: "风速 (m/s)",
+  },
+  series: [
+    {
+      name: "风速分布",
+      type: "scatter",
+      data: [
+        [45, 5],
+        [90, 10],
+        [180, 7],
+        [270, 12],
+        [50, 8],
+        [100, 11],
+        [190, 9],
+        [280, 14],
+      ],
+      symbolSize: 5,
+      emphasis: {
+        focus: "series",
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,42 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:24:20
+ * @LastEditTime: 2024-11-19 16:58:13
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/histogram.js
+ */
+// 风速分布直方图
+// 用途：显示不同风速范围内的频率分布。
+// 适用场景：风速频率统计、资源分布分析。
+// 实现建议：
+// 使用 ECharts 的直方图。
+export const option = {
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    name: "风速范围 (m/s)",
+    type: "category",
+    data: ["0-2", "2-4", "4-6", "6-8", "8-10", ">10"],
+  },
+  yAxis: {
+    name: "频率 (%)",
+    type: "value",
+  },
+  series: [
+    {
+      name: "风速分布",
+      type: "bar",
+      data: [5, 20, 35, 25, 10, 5], // 每个风速范围的频率
+    },
+  ],
+  tooltip: {
+    trigger: "axis",
+  },
+};

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

@@ -1,3 +1,9 @@
+// 风速-功率曲线图
+// 用途：展示风速与风机输出功率之间的关系。
+// 适用场景：风机性能评估、功率曲线优化。
+// 实现建议：
+// 使用 ECharts 的折线图。
+// xAxis 为风速，yAxis 为功率。
 export const option = {
   title: {
     text: "Stacked Line",
@@ -6,21 +12,32 @@ export const option = {
     trigger: "axis",
   },
   legend: {
-    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
+    top: "bottom",
+    // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
   },
-
   toolbox: {
     feature: {
-      saveAsImage: {},
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
     },
   },
   xAxis: {
-    type: "category",
-    boundaryGap: false,
-    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    type: "value",
+    name: "风速 (m/s)",
+    // boundaryGap: false,
+    // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
   },
   yAxis: {
+    name: "功率 (kW)",
     type: "value",
+    nameLocation: "middle", // 设置名称位置，可以是 'start', 'middle' 或 'end'
+    nameTextStyle: {
+      fontSize: 14, // 文字大小
+      color: "#333", // 文字颜色
+      padding: [0, 0, 30, 0], // 文字与轴线的距离
+    },
   },
   grid: {
     top: "20%",
@@ -30,34 +47,16 @@ export const option = {
   },
   series: [
     {
-      name: "Email",
-      type: "line",
-      stack: "Total",
-      data: [120, 132, 101, 134, 90, 230, 210],
-    },
-    {
-      name: "Union Ads",
-      type: "line",
-      stack: "Total",
-      data: [220, 182, 191, 234, 290, 330, 310],
-    },
-    {
-      name: "Video Ads",
-      type: "line",
-      stack: "Total",
-      data: [150, 232, 201, 154, 190, 330, 410],
-    },
-    {
-      name: "Direct",
-      type: "line",
-      stack: "Total",
-      data: [320, 332, 301, 334, 390, 330, 320],
-    },
-    {
-      name: "Search Engine",
+      name: "功率曲线",
       type: "line",
-      stack: "Total",
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      data: [
+        [2, 0],
+        [4, 200],
+        [6, 400],
+        [8, 800],
+        [10, 1200],
+        [12, 1500],
+      ], // 风速与功率对应数据
     },
   ],
 };

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

@@ -0,0 +1,66 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:19:45
+ * @LastEditTime: 2024-11-20 09:46:35
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/pareto.js
+ */
+// 帕累托图-pareto
+// 风电场设备故障类型及累积影响
+// 帕累托图通常用于显示数据的分类贡献和累积比例。
+export const option = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  grid: {
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: ["变压器故障", "叶片破损", "发电机故障", "控制系统故障", "其他"],
+    name: "故障类型",
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "故障频率",
+    },
+    {
+      type: "value",
+      name: "累积百分比 (%)",
+      max: 100,
+    },
+  ],
+  series: [
+    {
+      name: "故障频率",
+      type: "bar",
+      data: [50, 30, 10, 5, 5],
+      itemStyle: {
+        color: "#5793f3",
+      },
+    },
+    {
+      name: "累积百分比",
+      type: "line",
+      yAxisIndex: 1,
+      data: [50, 80, 90, 95, 100],
+      smooth: true,
+      lineStyle: {
+        color: "#d14a61",
+      },
+    },
+  ],
+};

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

@@ -1,40 +1,45 @@
+// 风电场发电量来源占比
+// 饼图用于显示不同类别占比，直观展现数据的构成情况。
 export const option = {
+  title: {
+    text: "风电场发电量来源占比",
+    left: "center",
+  },
   tooltip: {
     trigger: "item",
-    formatter: "{a} <br/>{b}: {c} ({d}%)",
+    formatter: "{b}: {c} MWh ({d}%)",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
   },
   legend: {
     orient: "vertical",
-    left: 10,
-    data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
+    left: "left",
+    data: ["风速 1-5 m/s", "风速 5-10 m/s", "风速 10-15 m/s", "风速 15+ m/s"],
   },
   series: [
     {
-      name: "访问来源",
+      name: "发电量占比",
       type: "pie",
-      radius: ["50%", "70%"],
-      avoidLabelOverlap: false,
-      label: {
-        show: false,
-        position: "center",
-      },
+      radius: "60%",
+      data: [
+        { value: 300, name: "风速 1-5 m/s" },
+        { value: 500, name: "风速 5-10 m/s" },
+        { value: 400, name: "风速 10-15 m/s" },
+        { value: 200, name: "风速 15+ m/s" },
+      ],
       emphasis: {
-        label: {
-          show: true,
-          fontSize: "30",
-          fontWeight: "bold",
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
         },
       },
-      labelLine: {
-        show: false,
-      },
-      data: [
-        { value: 335, name: "直接访问" },
-        { value: 310, name: "邮件营销" },
-        { value: 234, name: "联盟广告" },
-        { value: 135, name: "视频广告" },
-        { value: 1548, name: "搜索引擎" },
-      ],
     },
   ],
 };

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

@@ -1,41 +1,42 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 11:33:31
- * @LastEditTime: 2024-11-04 11:34:44
+ * @LastEditTime: 2024-11-20 09:50:04
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/assets/js/constants/echarts-config/radar.js
  */
+// 雷达图-radar
+// 示例：不同风电场的性能评价
 export const option = {
-  title: {
-    text: "Basic Radar Chart",
-  },
-  legend: {
-    data: ["Allocated Budget", "Actual Spending"],
-  },
+  tooltip: {},
   radar: {
-    // shape: 'circle',
     indicator: [
-      { name: "Sales", max: 6500 },
-      { name: "Administration", max: 16000 },
-      { name: "Information Technology", max: 30000 },
-      { name: "Customer Support", max: 38000 },
-      { name: "Development", max: 52000 },
-      { name: "Marketing", max: 25000 },
+      { name: "风速", max: 20 },
+      { name: "发电量", max: 5000 },
+      { name: "利用系数", max: 1 },
     ],
   },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
   series: [
     {
-      name: "Budget vs spending",
+      name: "风电场性能",
       type: "radar",
       data: [
         {
-          value: [4200, 3000, 20000, 35000, 50000, 18000],
-          name: "Allocated Budget",
+          value: [12, 4000, 0.8],
+          name: "风电场 A",
         },
         {
-          value: [5000, 14000, 28000, 26000, 42000, 21000],
-          name: "Actual Spending",
+          value: [15, 4500, 0.85],
+          name: "风电场 B",
         },
       ],
     },

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

@@ -0,0 +1,42 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:18:07
+ * @LastEditTime: 2024-11-19 16:58:24
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/roseChart.js
+ */
+// 风玫瑰图（Wind Rose Chart）
+// 用途：显示不同方向的风速或风力分布。
+// 适用场景：风场选址、风资源评估。
+// 实现建议：
+// ECharts 的极坐标 + 柱状图。
+// 使用 polar 和 radiusAxis 配置。
+export const option = {
+  angleAxis: {
+    type: "category",
+    data: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"], // 风向
+    boundaryGap: false,
+  },
+  radiusAxis: {},
+  polar: {},
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      data: [15, 25, 30, 20, 10, 5, 8, 12], // 风速数据
+      coordinateSystem: "polar",
+      name: "风速",
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};

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

@@ -0,0 +1,58 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:20:45
+ * @LastEditTime: 2024-11-20 10:18:54
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/sankeyDiagram.js
+ */
+// 流图-sankeyDiagram
+// 示例：风能转化过程的能量流 -流图用于分析风能利用效率及能量流失情况。
+// 流图用于显示能量或资源在不同阶段的流动和分配。
+export const option = {
+  title: {
+    text: "风能转化过程的能量流失情况",
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{b}: {c}",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      // magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  series: [
+    {
+      type: "sankey",
+      layout: "none",
+      emphasis: {
+        focus: "adjacency",
+      },
+      data: [
+        { name: "风能" },
+        { name: "风轮" },
+        { name: "发电机" },
+        { name: "电网" },
+        { name: "损耗" },
+      ],
+      links: [
+        { source: "风能", target: "风轮", value: 100 },
+        { source: "风轮", target: "发电机", value: 70 },
+        { source: "发电机", target: "电网", value: 60 },
+        { source: "风轮", target: "损耗", value: 30 },
+        { source: "发电机", target: "损耗", value: 10 },
+      ],
+      lineStyle: {
+        color: "gradient",
+        curveness: 0.5,
+      },
+      label: {
+        color: "#333",
+      },
+    },
+  ],
+};

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

@@ -1,57 +1,37 @@
-/*
- * @Author: your name
- * @Date: 2024-11-04 11:33:04
- * @LastEditTime: 2024-11-06 10:44:57
- * @LastEditors: milo-MacBook-Pro.local
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/assets/js/constants/echarts-config/scatter.js
- */
 export const option = {
-  title: {
-    text: "Dynamic Data",
-  },
   xAxis: {
+    name: "风向 (°)",
     type: "value",
-    name: "xlable",
+    min: 0,
+    max: 360,
   },
   yAxis: {
+    name: "风速 (m/s)",
     type: "value",
-    name: "温度",
   },
-  grid: {
-    top: "20%",
-    right: "20%",
-    bottom: "10%",
-    containLabel: true, // 包含标签在内
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
   },
   series: [
     {
-      symbolSize: 20,
+      name: "风速分布",
+      type: "scatter",
       data: [
-        [10.0, 8.04],
-        [8.07, 6.95],
-        [13.0, 7.58],
-        [9.05, 8.81],
-        [11.0, 8.33],
-        [14.0, 7.66],
-        [13.4, 6.81],
-        [10.0, 6.33],
-        [14.0, 8.96],
-        [12.5, 6.82],
-        [9.15, 7.2],
-        [11.5, 7.2],
-        [3.03, 4.23],
-        [12.2, 7.83],
-        [2.02, 4.47],
-        [1.05, 3.33],
-        [4.05, 4.96],
-        [6.03, 7.24],
-        [12.0, 6.26],
-        [12.0, 8.84],
-        [7.08, 5.82],
-        [5.02, 5.68],
-      ],
-      type: "scatterGL",
+        [45, 5, 10],
+        [90, 10, 20],
+        [180, 7, 15],
+        [270, 12, 25],
+      ], // [风向, 风速, 数据点大小]
+      symbolSize: (data) => data[2], // 根据大小调整气泡尺寸
+      renderMode: "webgl", // 启用 WebGL 渲染
     },
   ],
+  tooltip: {
+    trigger: "item",
+  },
 };

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

@@ -0,0 +1,54 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-19 16:25:10
+ * @LastEditTime: 2024-11-19 16:32:28
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/stackedBar.js
+ */
+// 风机状态堆叠柱状图
+// 用途：显示风机在不同状态（运行、停机、故障）下的时间分布。
+// 适用场景：风机运行监控。
+// 实现建议：
+// 使用堆叠柱状图。
+export const option = {
+  xAxis: {
+    type: "category",
+    data: ["风机1", "风机2", "风机3", "风机4"], // 风机编号
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  yAxis: {
+    name: "时间 (小时)",
+    type: "value",
+  },
+  series: [
+    {
+      name: "运行",
+      type: "bar",
+      stack: "总量",
+      data: [10, 15, 20, 25],
+    },
+    {
+      name: "停机",
+      type: "bar",
+      stack: "总量",
+      data: [5, 5, 4, 6],
+    },
+    {
+      name: "故障",
+      type: "bar",
+      stack: "总量",
+      data: [1, 0, 2, 3],
+    },
+  ],
+  tooltip: {
+    trigger: "axis",
+  },
+};

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

@@ -0,0 +1,39 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:16:47
+ * @LastEditTime: 2024-11-20 09:47:16
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/timeSeries.js
+ */
+//时间序列图 timeSeries
+//风速变化趋势
+export const option = {
+  tooltip: {
+    trigger: "axis",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  xAxis: {
+    type: "category",
+    data: ["00:00", "06:00", "12:00", "18:00", "24:00"],
+    name: "时间",
+  },
+  yAxis: {
+    type: "value",
+    name: "风速 (m/s)",
+  },
+  series: [
+    {
+      name: "风速",
+      type: "line",
+      data: [5, 7, 10, 8, 6],
+    },
+  ],
+};

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

@@ -0,0 +1,40 @@
+/*
+ * @Author: your name
+ * @Date: 2024-11-20 09:15:50
+ * @LastEditTime: 2024-11-20 09:16:16
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/assets/js/constants/echarts-config/waterfall.js
+ */
+// 瀑布图-Waterfall
+// 示例：风速到发电量的损耗分析
+export const option = {
+  xAxis: {
+    type: "category",
+    data: ["风速", "风轮效率", "发电功率"],
+    name: "阶段",
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      magicType: { show: true, type: ["line", "bar"] },
+      restore: { show: true },
+      saveAsImage: { show: true },
+    },
+  },
+  yAxis: {
+    type: "value",
+    name: "能量 (kWh)",
+  },
+  series: [
+    {
+      name: "能量损耗",
+      type: "bar",
+      stack: "total",
+      data: [1000, -200, -300], // 每阶段能量值
+      itemStyle: {
+        color: (params) => (params.value < 0 ? "#d14a61" : "#5793f3"),
+      },
+    },
+  ],
+};

src/assets/js/constants/index.js

@@ -1,27 +1,62 @@
 export const charts = [
   {
-    name: "折线图",
+    type: "bar",
+    name: "直方图",
+  },
+  {
+    type: "scatter",
+    name: "散点图",
+  },
+  {
     type: "line",
+    name: "折线图",
   },
   {
-    name: "柱状图",
-    type: "bar",
+    type: "radar",
+    name: "雷达图",
   },
   {
-    name: "饼图",
     type: "pie",
+    name: "饼图",
   },
-
   {
-    type: "scatter",
-    name: "散点图",
+    type: "roseChart",
+    name: "玫瑰图",
   },
   {
-    type: "barandline",
-    name: "柱状折线图",
+    type: "Cp",
+    name: "散点折线图",
   },
   {
-    type: "radar",
-    name: "雷达图",
+    type: "stackedBar",
+    name: "堆叠柱状图",
+  },
+  {
+    type: "pareto",
+    name: "帕累托图",
+  },
+  {
+    type: "sankeyDiagram",
+    name: "流图",
+  },
+  // {
+  //   type: "hexbin",
+  //   name: "蜂巢图",
+  // },
+  // {
+  //   type: "timeSeries",
+  //   name: "时间序列图",
+  // },
+  {
+    type: "waterfall",
+    name: "瀑布图",
+  },
+  {
+    type: "boxPlot",
+    name: "箱线图",
+  },
+  {
+    type: "Heatmap",
+    name: "热力图",
   },
 ];

src/icons/svg/Cp.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732005845039" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21396" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#ffffff" p-id="21397" data-spm-anchor-id="a313x.search_index.0.i11.6c813a81Ph1dIF" class="selected"></path><path d="M921.6 921.6H102.4V102.4h33.8944v780.356267H921.6V921.6zM547.84 367.9232a68.266667 68.266667 0 1 0 136.4992 0 68.266667 68.266667 0 0 0-136.533333 0z" fill="#57a0c6" p-id="21398" data-spm-anchor-id="a313x.search_index.0.i12.6c813a81Ph1dIF" class=""></path><path d="M620.7488 733.2864a68.266667 68.266667 0 1 1-136.533333-0.068267 68.266667 68.266667 0 0 1 136.533333 0.068267z" fill="#57a0c6" p-id="21399" data-spm-anchor-id="a313x.search_index.0.i13.6c813a81Ph1dIF" class=""></path><path d="M876.782933 107.349333a17.066667 17.066667 0 0 1 9.659734 22.1184c-80.657067 205.5168-157.9008 347.784533-263.031467 457.386667-105.198933 109.806933-237.1584 185.617067-424.8576 260.5056a17.066667 17.066667 0 0 1-12.629333-31.709867c185.5488-74.069333 312.4224-147.626667 412.8768-252.381866 100.522667-104.891733 175.786667-242.312533 255.863466-446.2592a17.066667 17.066667 0 0 1 22.1184-9.659734z" fill="#bfbfbf" p-id="21400" data-spm-anchor-id="a313x.search_index.0.i14.6c813a81Ph1dIF" class="selected"></path><path d="M221.730133 690.722133a68.266667 68.266667 0 1 0 136.533334 0 68.266667 68.266667 0 0 0-136.533334 0zM784.9984 307.0976a68.266667 68.266667 0 1 0 136.533333 0 68.266667 68.266667 0 0 0-136.533333 0z" fill="#eeb173" p-id="21401" data-spm-anchor-id="a313x.search_index.0.i15.6c813a81Ph1dIF" class=""></path></svg>

src/icons/svg/Heatmap.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732066930220" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53854" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="53855"></path><path d="M944 928v16H79.84v-16z" fill="#E6E6E6" p-id="53856"></path><path d="M128 128h144v144H128zM128 544h144v144H128zM544 336h144v144h-144zM544 752h144v144h-144z" fill="#BF444C" opacity=".95" p-id="53857"></path><path d="M336 128h144v144h-144zM336 544h144v144h-144z" fill="#EAC392" opacity=".95" p-id="53858"></path><path d="M544 128h144v144h-144zM544 544h144v144h-144zM752 336h144v144h-144zM752 752h144v144h-144zM128 336h144v144H128zM128 752h144v144H128z" fill="#F0D99C" opacity=".95" p-id="53859"></path><path d="M752 128h144v144h-144zM752 544h144v144h-144zM336 336h144v144h-144zM336 752h144v144h-144z" fill="#DE987C" opacity=".95" p-id="53860"></path></svg>

src/icons/svg/histogram.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732005686328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11713" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M229.333333 341.333333v480h-160V341.333333h160z m181.333334-106.666666v586.666666h-160V234.666667h160z m362.666666 53.333333v533.333333h-160V288h160z m181.333334 138.666667v394.666666h-160V426.666667h160z" fill="#001E59" fill-opacity=".3" p-id="11714"></path><path d="M981.333333 864v32H42.666667v-32h938.666666zM592 128v693.333333h-160V128h160z" fill="#00102F" fill-opacity=".75" p-id="11715"></path></svg>

src/icons/svg/waterfall.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732066795849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40610" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M623.995259 111.995259h99.991704v497.000297h-99.991704z" fill="#0BCC93" p-id="40611"></path><path d="M247.99763 288.995556h99.991703v491.008h-99.991703z" fill="#4ABCFA" p-id="40612"></path><path d="M811.994074 111.009185h99.991704v355.991704H811.994074z" fill="#9387FD" p-id="40613"></path><path d="M435.996444 288.995556h99.991704v283.003259h-99.991704z" fill="#3B64E9" p-id="40614"></path><path d="M152.007111 111.995259v759.99763h759.99763v40.011852H111.995259V111.995259z" fill="#D1DDF8" p-id="40615"></path></svg>

src/store/dragChart.js

@@ -1,13 +1,6 @@
-/*
- * @Author: your name
- * @Date: 2024-11-04 10:06:23
- * @LastEditTime: 2024-11-14 16:02:22
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/store/dragChart.js
- */
 import { SCALE } from "@/assets/js/constants/config.js";
 import { Message } from "element-ui";
+import { clearAllDataFromIndexedDB } from "@/utils/indexedDb";
 const _ = require("lodash");
 
 export default {
@@ -20,7 +13,8 @@ export default {
     currentChartList: [], // 当前文件的当前数据
     originChartList: [], // 当前文件的原始数据
     fileList: [], // 文件列表
-    dataBaseCheckList: {},
+    dataBaseCheckList: {}, //选中数据更新
+    formFilterAlignData: [], //这个是所有图表数据筛选保存字段
   },
   mutations: {
     setUpdateTriggerGetData(state, value) {
@@ -41,13 +35,37 @@ export default {
         originChartList: [],
         fileList: [],
         dataBaseCheckList: {},
+        triggerGetData: false,
+        updateTriggerGetData: false,
+        formFilterAlignData: [],
+        relatedFieldsData: [], //关联字段表
+        formFilterAlign: [],
       };
-
+      //清空indexeddb 数据库
+      // clearAllDataFromIndexedDB();
       // 遍历重置每个字段
       Object.keys(resetState).forEach((key) => {
         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/utils/indexedDb.js

@@ -100,6 +100,14 @@ export async function clearAllDataFromIndexedDB() {
 
     versionRequest.onsuccess = (event) => {
       const db = event.target.result;
+
+      // 检查对象存储是否存在
+      if (!db.objectStoreNames.contains("files")) {
+        console.log("Object store 'files' does not exist. No action needed.");
+        db.close();
+        return resolve();
+      }
+
       const currentVersion = db.version;
       db.close();
 

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

@@ -1,9 +1,14 @@
 <template>
-  <div class="associtedFieldsContent">
+  <div class="global-variable">
     <el-row type="flex" class="row-bg" justify="end">
       <el-button type="primary" @click="handleDrawer">新建关联</el-button>
     </el-row>
-    <el-table :data="relatedFieldsData || []" border style="width: 100%">
+    <el-table
+      height="600"
+      :data="relatedFieldsData || []"
+      border
+      style="width: 100%"
+    >
       <el-table-column prop="tableFileName1" label="关联表1"> </el-table-column>
       <el-table-column prop="tableFileName2" label="关联表2"> </el-table-column>
       <el-table-column prop="tableFileName1" label="表1关联字段" align="center">
@@ -360,6 +365,10 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+// ::v-deep .global-variable {
+//   height: 100% !important;
+//   overflow: scroll !important;
+// }
 .row-bg {
   margin: 10px 0;
 }

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

@@ -1,13 +1,13 @@
 <!--
  * @Author: your name
  * @Date: 2024-10-28 16:46:38
- * @LastEditTime: 2024-11-14 15:55:59
+ * @LastEditTime: 2024-11-15 09:59:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dataTable.vue
 -->
 <template>
-  <div class="dataTableContent" v-loading="loading">
+  <div class="global-variable" v-loading="loading">
     <el-tabs
       v-if="tabData.length > 0"
       v-model="activeName"
@@ -130,7 +130,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.dataTableContent {
+.global-variable {
   .tabsBox {
     margin: 0 15px;
     ::v-deep .el-tabs__item {

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

@@ -16,7 +16,7 @@
           "
         >
           <span>纬度标签</span>
-          <el-tooltip content="添加纬度" placement="bottom-start">
+          <!-- <el-tooltip content="添加纬度" placement="bottom-start">
             <i
               @click="
                 formLabelAlign.Xdata.push({ lable: '', data: [], id: '' })
@@ -24,7 +24,7 @@
               class="el-icon-circle-plus-outline"
               style="font-size: 20px"
             ></i>
-          </el-tooltip>
+          </el-tooltip> -->
         </div>
         <template v-for="(item, ind) in formLabelAlign.Xdata">
           <el-select
@@ -56,30 +56,49 @@
           <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>
           </el-tooltip>
         </div>
         <template v-for="(item, ind) in formLabelAlign.Ydata">
-          <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>
+          <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="标题名称">
@@ -98,12 +117,95 @@
         <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: {
@@ -120,6 +222,22 @@ export default {
   },
   data() {
     return {
+      value: "all",
+      formFilterAlign: [],
+      options: [
+        {
+          value: "<",
+          label: "小于",
+        },
+        {
+          value: ">",
+          label: "大于",
+        },
+        {
+          value: "=",
+          label: "等于",
+        },
+      ],
       formLabelAlign: {
         Xdata: [
           {
@@ -147,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,
     },
@@ -175,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(
@@ -189,24 +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() {
-      this.$refs.form.resetFields();
+      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 || "",
@@ -231,73 +420,145 @@ 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); // 更新图表
     },
+    removeYdata(index) {
+      this.formLabelAlign.Ydata.splice(index, 1); // 删除当前项
+    },
   },
 };
 </script>
-
 <style scoped lang="scss">
 ::v-deep .el-form-item {
   width: 100% !important;
@@ -305,5 +566,13 @@ export default {
   .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-13 10:17:18
+ * @LastEditTime: 2024-11-20 09:55:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
@@ -82,7 +82,7 @@ export default {
       svgIcon: [
         {
           type: "bar",
-          name: "柱状图",
+          name: "直方图",
         },
         {
           type: "scatter",
@@ -92,9 +92,38 @@ export default {
           type: "line",
           name: "折线图",
         },
+
+        {
+          type: "Cp",
+          name: "散点折线图",
+        },
+        {
+          type: "stackedBar",
+          name: "堆叠柱状图",
+        },
+        {
+          type: "pareto",
+          name: "帕累托图",
+        },
         {
-          type: "barandline",
-          name: "柱状折线图",
+          type: "sankeyDiagram",
+          name: "流图",
+        },
+        // {
+        //   type: "hexbin",
+        //   name: "蜂巢图",
+        // },
+        // {
+        //   type: "timeSeries",
+        //   name: "时间序列图",
+        // },
+        {
+          type: "waterfall",
+          name: "瀑布图",
+        },
+        {
+          type: "boxPlot",
+          name: "箱线图",
         },
         {
           type: "radar",
@@ -104,6 +133,14 @@ export default {
           type: "pie",
           name: "饼图",
         },
+        {
+          type: "roseChart",
+          name: "玫瑰图",
+        },
+        {
+          type: "Heatmap",
+          name: "热力图",
+        },
       ],
     };
   },
@@ -166,6 +203,7 @@ export default {
 }
 ::v-deep .el-divider--horizontal {
   margin: 5px 0;
+  height: 2px;
 }
 ::v-deep .el-form--label-top .el-form-item__label {
   padding: 0;

src/views/performance/customAnalysis.vue

@@ -146,6 +146,25 @@
             <el-option label="区域二" value="beijing"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="选择数据范围：">
+          <div class="demo-input-suffix">
+            <el-input
+              size="small"
+              type="number"
+              placeholder="最小值"
+              v-model="ruleForm.min"
+            >
+            </el-input>
+            <el-col class="line" :span="2">-</el-col>
+            <el-input
+              size="small"
+              type="number"
+              placeholder="最大值"
+              v-model="ruleForm.max"
+            >
+            </el-input>
+          </div>
+        </el-form-item>
         <el-form-item label="选择特征值计算：" prop="type">
           <el-checkbox-group v-model="ruleForm.type">
             <el-checkbox label="有效值" name="type"></el-checkbox>
@@ -204,6 +223,8 @@ export default {
       ruleForm: {
         region: "",
         type: [],
+        min: null,
+        max: null,
       },
       rules: {
         region: [
@@ -394,6 +415,21 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .el-tab-pane {
+    height: 100%;
+    overflow: scroll !important;
+  }
+  .demo-input-suffix {
+    display: flex;
+    .line {
+      display: flex;
+      justify-content: center;
+    }
+  }
+  .el-input--small {
+    // font-size: 13px;
+    width: 190px !important;
+  }
 }
 .uploadBoxContent {
   margin: 5px;