图表拖拽

package-lock.json

@@ -14,7 +14,9 @@
         "axios": "^1.6.8",
         "core-js": "^3.8.3",
         "css-minimizer-webpack-plugin": "^7.0.0",
+        "date-fns": "^4.1.0",
         "echarts": "^5.5.1",
+        "echarts-gl": "^2.0.9",
         "el-tree-select": "^3.1.14",
         "element-ui": "^2.15.14",
         "file-saver": "^2.0.5",
@@ -6136,6 +6138,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -7265,6 +7272,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://repo.huaweicloud.com/repository/npm/dayjs/-/dayjs-1.11.13.tgz",
@@ -7890,6 +7907,18 @@
         "zrender": "5.6.0"
       }
     },
+    "node_modules/echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2"
+      }
+    },
     "node_modules/edges-to-adjacency-list": {
       "version": "1.0.0",
       "resolved": "https://repo.huaweicloud.com/repository/npm/edges-to-adjacency-list/-/edges-to-adjacency-list-1.0.0.tgz",

package.json

@@ -14,7 +14,9 @@
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
     "css-minimizer-webpack-plugin": "^7.0.0",
+    "date-fns": "^4.1.0",
     "echarts": "^5.5.1",
+    "echarts-gl": "^2.0.9",
     "el-tree-select": "^3.1.14",
     "element-ui": "^2.15.14",
     "file-saver": "^2.0.5",

src/assets/js/class/chart.js

@@ -5,14 +5,16 @@
  * @params {Number} 纵坐标百分比 y
  * @params {Number} 宽度百分比 width
  * @params {Number} 高度百分比 height
+ * @params {Number} 图表类型 type
  */
 export default class chartClass {
-  constructor({ option, x = 0, y = 0, width = 300, height = 300 }) {
-    this.id = Math.random()
-    this.option = option
-    this.x = x
-    this.y = y
-    this.width = width
-    this.height = height
+  constructor({ type, option, x = 0, y = 0, width = 300, height = 300 }) {
+    this.id = Math.random();
+    this.option = option;
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.type = type;
   }
 }

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

@@ -9,10 +9,10 @@ export const option = {
     },
   },
   grid: {
-    left: "3%",
-    right: "4%",
-    bottom: "3%",
-    containLabel: true,
+    top: "20%",
+    right: "20%",
+    bottom: "10%",
+    containLabel: true, // 包含标签在内
   },
   xAxis: {
     name: "周",

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

@@ -10,16 +10,12 @@ export const option = {
   title: {
     text: "Dynamic Data",
   },
-  //   xAxis: {
-  //     type: "value",
-  //     name: "xlable",
-  //   },
-  //   yAxis: {
-  //     type: "value",
-  //     name: "温度",
-  //   },
+
   grid: {
+    top: "20%",
     right: "20%",
+    bottom: "10%",
+    containLabel: true, // 包含标签在内
   },
   toolbox: {
     feature: {
@@ -31,7 +27,8 @@ export const option = {
   legend: {
     data: ["Evaporation", "Precipitation", "Temperature"],
   },
-  xAxis: [
+  xAxis:
+    // [
     {
       type: "category",
       axisTick: {
@@ -52,55 +49,22 @@ export const option = {
         "Dec",
       ],
     },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      name: "Evaporation",
-      position: "right",
-      alignTicks: true,
-      axisLine: {
-        show: false, // 隐藏蒸发的 Y 轴轴线
-      },
-      axisLabel: {
-        show: false, // 隐藏蒸发的 Y 轴标签
-      },
-      splitLine: {
-        show: false, // 隐藏蒸发的 Y 轴网格线
-      },
-    },
-    {
-      type: "value",
-      name: "Precipitation",
-      position: "right",
-      alignTicks: true,
-      offset: 80,
-      axisLine: {
-        show: false, // 隐藏降水的 Y 轴轴线
-      },
-      axisLabel: {
-        show: false, // 隐藏降水的 Y 轴标签
-      },
-      splitLine: {
-        show: false, // 隐藏降水的 Y 轴网格线
+  // ],
+  yAxis: {
+    type: "value",
+    name: "温度",
+    position: "left",
+    alignTicks: true,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: colors[2],
       },
     },
-    {
-      type: "value",
-      name: "温度",
-      position: "left",
-      alignTicks: true,
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: colors[2],
-        },
-      },
-      axisLabel: {
-        formatter: "{value} °C",
-      },
+    axisLabel: {
+      formatter: "{value} °C",
     },
-  ],
+  },
   series: [
     {
       name: "Evaporation",
@@ -112,7 +76,6 @@ export const option = {
     {
       name: "Precipitation",
       type: "bar",
-      yAxisIndex: 1,
       data: [
         2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
       ],
@@ -120,7 +83,6 @@ export const option = {
     {
       name: "Temperature",
       type: "line",
-      yAxisIndex: 2,
       data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
     },
   ],

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

@@ -1,83 +1,83 @@
 export const option = {
   title: {
-    text: '堆叠区域图'
+    text: "堆叠区域图",
   },
   tooltip: {
-    trigger: 'axis',
+    trigger: "axis",
     axisPointer: {
-      type: 'cross',
+      type: "cross",
       label: {
-        backgroundColor: '#6a7985'
-      }
-    }
+        backgroundColor: "#6a7985",
+      },
+    },
   },
   legend: {
-    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
+    data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
   },
   toolbox: {
     feature: {
-      saveAsImage: {}
-    }
+      saveAsImage: {},
+    },
   },
   grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
+    top: "20%",
+    right: "20%",
+    bottom: "10%",
+    containLabel: true, // 包含标签在内
   },
   xAxis: [
     {
-      type: 'category',
+      type: "category",
       boundaryGap: false,
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-    }
+      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+    },
   ],
   yAxis: [
     {
-      type: 'value'
-    }
+      type: "value",
+    },
   ],
   series: [
     {
-      name: '邮件营销',
-      type: 'line',
-      stack: '总量',
+      name: "邮件营销",
+      type: "line",
+      stack: "总量",
       areaStyle: {},
-      data: [120, 132, 101, 134, 90, 230, 210]
+      data: [120, 132, 101, 134, 90, 230, 210],
     },
     {
-      name: '联盟广告',
-      type: 'line',
-      stack: '总量',
+      name: "联盟广告",
+      type: "line",
+      stack: "总量",
       areaStyle: {},
-      data: [220, 182, 191, 234, 290, 330, 310]
+      data: [220, 182, 191, 234, 290, 330, 310],
     },
     {
-      name: '视频广告',
-      type: 'line',
-      stack: '总量',
+      name: "视频广告",
+      type: "line",
+      stack: "总量",
       areaStyle: {},
-      data: [150, 232, 201, 154, 190, 330, 410]
+      data: [150, 232, 201, 154, 190, 330, 410],
     },
     {
-      name: '直接访问',
-      type: 'line',
-      stack: '总量',
+      name: "直接访问",
+      type: "line",
+      stack: "总量",
       areaStyle: {},
-      data: [320, 332, 301, 334, 390, 330, 320]
+      data: [320, 332, 301, 334, 390, 330, 320],
     },
     {
-      name: '搜索引擎',
-      type: 'line',
-      stack: '总量',
+      name: "搜索引擎",
+      type: "line",
+      stack: "总量",
       label: {
         normal: {
           show: true,
-          position: 'top'
-        }
+          position: "top",
+        },
       },
       areaStyle: {},
-      data: [820, 932, 901, 934, 1290, 1330, 1320]
-    }
-  ]
-}
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+    },
+  ],
+};

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

@@ -1,40 +1,40 @@
 export const option = {
   tooltip: {
-    trigger: 'item',
-    formatter: '{a} <br/>{b}: {c} ({d}%)'
+    trigger: "item",
+    formatter: "{a} <br/>{b}: {c} ({d}%)",
   },
   legend: {
-    orient: 'vertical',
+    orient: "vertical",
     left: 10,
-    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+    data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
   },
   series: [
     {
-      name: '访问来源',
-      type: 'pie',
-      radius: ['50%', '70%'],
+      name: "访问来源",
+      type: "pie",
+      radius: ["50%", "70%"],
       avoidLabelOverlap: false,
       label: {
         show: false,
-        position: 'center'
+        position: "center",
       },
       emphasis: {
         label: {
           show: true,
-          fontSize: '30',
-          fontWeight: 'bold'
-        }
+          fontSize: "30",
+          fontWeight: "bold",
+        },
       },
       labelLine: {
-        show: false
+        show: false,
       },
       data: [
-        { value: 335, name: '直接访问' },
-        { value: 310, name: '邮件营销' },
-        { value: 234, name: '联盟广告' },
-        { value: 135, name: '视频广告' },
-        { value: 1548, name: '搜索引擎' }
-      ]
-    }
-  ]
-}
+        { value: 335, name: "直接访问" },
+        { value: 310, name: "邮件营销" },
+        { value: 234, name: "联盟广告" },
+        { value: 135, name: "视频广告" },
+        { value: 1548, name: "搜索引擎" },
+      ],
+    },
+  ],
+};

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

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 11:33:04
- * @LastEditTime: 2024-11-04 14:32:08
- * @LastEditors: bogon
+ * @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
  */
@@ -51,7 +51,7 @@ export const option = {
         [7.08, 5.82],
         [5.02, 5.68],
       ],
-      type: "scatter",
+      type: "scatterGL",
     },
   ],
 };

src/main.js

@@ -25,6 +25,7 @@ import qs from "qs";
 import dataV from "@jiaminghi/data-view";
 import permission from "./directives/permission"; // 导入自定义指令
 import lazyLoad from "./directives/lazyLoad";
+import "echarts-gl";
 Vue.use(dataV);
 Vue.prototype.$qs = qs;
 // Vue.prototype.$tinymce = tinymce;

src/store/dragChart.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2024-11-04 10:06:23
- * @LastEditTime: 2024-11-05 14:51:36
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-07 16:01:46
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/store/dragChart.js
  */
@@ -17,6 +17,7 @@ export default {
     currentChartList: [], // 当前文件的当前数据
     originChartList: [], // 当前文件的原始数据
     fileList: [], // 文件列表
+    dataBaseCheckList: {},
   },
   mutations: {
     // 设置当前编辑的图表
@@ -28,7 +29,10 @@ export default {
     addChart(state, data) {
       state.currentChartList.push(data);
     },
-
+    //更新数据配置当前选中数据
+    updateDataBase(state, data) {
+      state.dataBaseCheckList = data;
+    },
     // 更新图表
     updateChart(state, data) {
       if (state.currentChartList[data.index]) {

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

@@ -0,0 +1,192 @@
+<!--
+ * @Author: your name
+ * @Date: 2024-11-06 14:48:36
+ * @LastEditTime: 2024-11-06 16:57:25
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/custonAsCom/AssociatedFields.vue
+-->
+<template>
+  <div class="associtedFieldsContent">
+    <el-row type="flex" class="row-bg" justify="end">
+      <el-button type="primary" @click="drawer = true">新建关联</el-button>
+    </el-row>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="date" label="关联表1" width="300">
+      </el-table-column>
+      <el-table-column prop="name" label="关联表2" width="300">
+      </el-table-column>
+      <el-table-column prop="address" label="关联字段"></el-table-column>
+    </el-table>
+    <el-drawer
+      title="新建关联"
+      :visible.sync="drawer"
+      direction="rtl"
+      :before-close="handleClose"
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>关联图表1</span>
+        </div>
+        <el-select
+          v-model="dataChart1"
+          placeholder="请选择"
+          @change="handleSelectData1"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <el-table
+          ref="multipleTable"
+          :data="tableDataChart1"
+          tooltip-effect="dark"
+          style="width: 100%; margin-top: 20px"
+          @selection-change="handleSelectionChange1"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column label="字段">
+            <template slot-scope="scope">{{ scope.row.label }}</template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>关联图表2</span>
+        </div>
+        <el-select
+          v-model="dataChart2"
+          placeholder="请选择"
+          @change="handleSelectData2"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <el-table
+          ref="multipleTable"
+          :data="tableDataChart2"
+          tooltip-effect="dark"
+          style="width: 100%; margin-top: 20px"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column label="字段">
+            <template slot-scope="scope">{{ scope.row.label }}</template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <el-row type="flex" class="row-bg" justify="center">
+        <el-button type="primary" @click="submitAssociated" style="width: 200px"
+          >确定关联</el-button
+        >
+      </el-row>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import {
+  getDataFromIndexedDB,
+  checkObjectStoreExists,
+} from "@/utils/indexedDb";
+export default {
+  data() {
+    return {
+      tableData: [],
+      drawer: false,
+      options: [],
+      dataChart1: [],
+      dataChart2: [],
+      tableDataChart1: [],
+      tableDataChart2: [],
+      multipleSelection1: [],
+      multipleSelection2: [],
+    };
+  },
+  async created() {
+    //判断indexedDb中是否存在这个数据表
+    checkObjectStoreExists("FileDataDB", "files")
+      .then((exists) => {
+        if (exists) {
+          console.log("对象存储 'files' 存在！");
+          this.getIndexDbData();
+        } else {
+          this.loading = false;
+          console.log("对象存储 'files' 不存在！");
+        }
+      })
+      .catch((error) => {
+        console.error("检查对象存储时出错:", error);
+      });
+  },
+  methods: {
+    submitAssociated() {
+      console.log(
+        this.multipleSelection2,
+        this.multipleSelection1,
+        "multipleSelection2"
+      );
+    },
+    //select 选择
+    handleSelectData1() {
+      const obj = this.options.find((item) => item.id === this.dataChart1);
+      this.tableDataChart1 = obj.children;
+    },
+    handleSelectData2() {
+      const obj = this.options.find((item) => item.id === this.dataChart2);
+      this.tableDataChart2 = obj.children;
+    },
+    //表格选择
+    handleSelectionChange1(val) {
+      this.multipleSelection1 = val;
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection2 = val;
+    },
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+
+    async getIndexDbData() {
+      const jsonData = await getDataFromIndexedDB();
+
+      this.options = jsonData.map((item) => {
+        return {
+          label: item.filename,
+          fileOldName: item.fileOldName,
+          id: item.fileId,
+          children: [...Object.keys(item.fileData[0])].map((val) => ({
+            label: val,
+            id: item.fileId + val,
+            fileData: item.fileData,
+          })),
+        };
+      });
+      console.log(jsonData, "this.data");
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.row-bg {
+  margin: 10px 0;
+}
+.box-card {
+  width: 90%;
+  margin: 0 auto;
+  margin-bottom: 20px;
+}
+</style>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-10-28 17:43:21
- * @LastEditTime: 2024-10-29 10:42:19
+ * @LastEditTime: 2024-11-06 14:05:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/DatabaseTable.vue
@@ -21,6 +21,7 @@
           :model="formLabelAlign"
           :rules="rules"
           ref="ruleForm"
+          size="small"
         >
           <el-form-item label="主机名IP地址：" prop="IP">
             <el-input v-model="formLabelAlign.IP"></el-input>
@@ -236,6 +237,9 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+::v-deep .el-form-item--small.el-form-item {
+  margin-bottom: 18px;
+}
 .row-bg {
   margin-top: 50px;
 }

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

@@ -2,36 +2,87 @@
   <div>
     <el-form
       label-position="top"
-      label-width="80px"
       :model="formLabelAlign"
       size="mini"
       ref="form"
     >
-      <el-form-item label="Y轴数据">
-        <el-select
+      <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"
+          >
+            <el-option
+              v-for="item in selectData"
+              :label="item.label"
+              :value="item.id"
+              :key="item.id"
+            ></el-option>
+          </el-select>
+        </template>
+        <!-- <el-select
+          style="margin: 5px 0"
           v-model="formLabelAlign.Ydata"
           placeholder="请先进行数据配置"
-          :disabled="true"
+          :disabled="disabled"
         >
-          <el-option label="区域一" value="shanghai"></el-option>
-        </el-select>
+          <el-option
+            v-for="item in selectData"
+            :label="item.label"
+            :value="item.id"
+            :key="item.id"
+          ></el-option>
+        </el-select> -->
       </el-form-item>
-      <el-form-item label="X轴数据">
+      <el-form-item label="指标值">
         <el-select
-          v-model="formLabelAlign.Xdata"
+          v-model="formLabelAlign.Ydata"
           placeholder="请先进行数据配置"
-          :disabled="true"
+          :disabled="disabled"
         >
-          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option
+            v-for="item in selectData"
+            :label="item.label"
+            :value="item.id"
+            :key="item.id"
+          ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="标题名称">
         <el-input v-model="formLabelAlign.text"></el-input>
       </el-form-item>
-      <el-form-item label="X轴名称">
+      <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轴名称">
+      <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>
@@ -57,29 +108,55 @@ export default {
   data() {
     return {
       formLabelAlign: {
-        Xdata: "",
+        Xdata: [
+          {
+            label: "",
+            data: [],
+            id: "",
+          },
+        ],
         Ydata: "",
+        // Ydata: [
+        //   {
+        //     label: "",
+        //     data: [],
+        //   },
+        // ],
         text: "",
         Xlable: "",
         Ylable: "",
       },
+      disabled: true,
+      selectData: [], //可选择的数据
     };
   },
   computed: {
     ...mapState("dragChart", {
       currentChartList: "currentChartList",
+      dataBaseCheckList: "dataBaseCheckList",
     }),
   },
   watch: {
-    curEdit(newVal) {
+    curEdit() {
+      console.log(this.curEdit, "curEdit");
       this.changeData();
     },
     formLabelAlign: {
-      handler() {
+      handler(nval) {
+        console.log(nval, "nval");
         this.changeChart();
       },
       deep: true,
     },
+    dataBaseCheckList: {
+      handler(newVal) {
+        this.disabled = !newVal.children?.length;
+
+        this.selectData = newVal.children;
+      },
+      immediate: true, // 组件加载时立即检查
+      deep: true, // 深度监听
+    },
   },
   mounted() {
     this.changeData();
@@ -88,9 +165,7 @@ export default {
     ...mapMutations("dragChart", ["updateChart"]),
     changeData() {
       this.$refs.form.resetFields();
-
       if (this.curEdit && this.curEdit.option) {
-        console.log("curEdit.option 存在", this.curEdit.option);
         this.formLabelAlign = {
           ...this.formLabelAlign,
           text: this.curEdit.option.title?.text || "",
@@ -105,14 +180,14 @@ export default {
       if (!this.curEdit || !this.curEdit.option) return; // 确保 curEdit 和 option 存在
       const item = JSON.parse(JSON.stringify(this.curEdit));
 
+      // 确保 title, xAxis, yAxis 存在
       item.option.title = item.option.title || {};
       item.option.xAxis = item.option.xAxis || {};
       item.option.yAxis = item.option.yAxis || {};
-
+      // 更新标题和坐标轴名称
       Object.assign(item.option.title, { text: this.formLabelAlign.text });
       Object.assign(item.option.xAxis, { name: this.formLabelAlign.Xlable });
       Object.assign(item.option.yAxis, { name: this.formLabelAlign.Ylable });
-
       this.updateChart(item); // 更新图表
     },
   },
@@ -120,7 +195,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.el-form-item {
+::v-deep .el-form-item {
+  width: 100% !important;
   margin-bottom: 5px;
+  .el-form-item__label {
+    width: 100% !important;
+  }
 }
 </style>

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2024-11-01 10:14:11
- * @LastEditTime: 2024-11-04 16:57:16
- * @LastEditors: bogon
+ * @LastEditTime: 2024-11-08 10:26:34
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue
 -->
@@ -24,7 +24,7 @@
       @onRulerScroll="handleScroll"
     >
       <div class="canvas-wrapper" ref="canvas">
-        <template v-if="IsCanvasPrepared">
+        <template v-if="IsCanvasPrepared && currentChartList.length > 0">
           <vue-draggable-resizable
             v-for="(item, index) in currentChartList"
             :key="item.id"
@@ -59,6 +59,7 @@
             </div>
           </vue-draggable-resizable>
         </template>
+        <el-empty v-else :image-size="200" description="暂无图表"></el-empty>
       </div>
     </vue-ruler-tool>
   </div>
@@ -171,10 +172,12 @@ export default {
       nodes[index].style.opacity = 0;
     },
     appendChart(type) {
+      console.log("type  修改", type);
       const config = require(`@/assets/js/constants/echarts-config/${type}.js`);
       this.addChart(
         new ChartClass({
           option: config.option,
+          type,
         })
       );
     },
@@ -200,9 +203,11 @@ export default {
     },
 
     handleImportConfig(option) {
+      console.log(this.addChartType, "type");
       this.addChart(
         new ChartClass({
           option: new Function("return " + option)() /* eslint-disable-line */,
+          type: this.addChartType,
         })
       );
     },

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

@@ -1,35 +1,30 @@
-<!--
- * @Author: your name
- * @Date: 2024-11-01 10:17:39
- * @LastEditTime: 2024-11-04 15:24:11
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/custonAsCom/dragChart/components/chartsData.vue
--->
 <template>
   <div class="chartContiner">
     <el-card shadow="never" class="card">
       <h6>数据配置</h6>
-      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
-      </el-input>
+      <el-input placeholder="输入关键字进行过滤" v-model="filterText" />
       <el-tree
         class="filter-tree"
         :data="data"
         :props="defaultProps"
         default-expand-all
+        node-key="id"
         :filter-node-method="filterNode"
         ref="tree"
         :render-content="renderContent"
-      >
-      </el-tree>
+        @node-click="handleNodeClick"
+      />
     </el-card>
   </div>
 </template>
+
 <script>
 import {
   getDataFromIndexedDB,
   checkObjectStoreExists,
 } from "@/utils/indexedDb";
+import { mapMutations } from "vuex";
+import { constructNow } from "date-fns";
 export default {
   data() {
     return {
@@ -37,8 +32,9 @@ export default {
         children: "children",
         label: "label",
       },
-      filterText: "", // 初始化 filterText
+      filterText: "",
       data: [],
+      selectedNodeId: null, // 存储当前选中的节点 ID
     };
   },
   watch: {
@@ -47,7 +43,6 @@ export default {
     },
   },
   async created() {
-    //判断indexedDb中是否存在这个数据表
     checkObjectStoreExists("FileDataDB", "files")
       .then((exists) => {
         if (exists) {
@@ -63,59 +58,72 @@ export default {
       });
   },
   methods: {
+    ...mapMutations("dragChart", ["updateDataBase"]),
     async getIndexDbData() {
       const jsonData = await getDataFromIndexedDB();
       this.data = jsonData.map((item) => {
         return {
           label: item.filename,
+          fileOldName: item.fileOldName,
           id: item.fileId,
           children: [...Object.keys(item.fileData[0])].map((val) => ({
             label: val,
             id: item.fileId + val,
+            fileData: item.fileData,
           })),
         };
       });
+      // 检查选中的节点状态，如果没有选中节点则调用 updateDataBase({})
+      if (!this.selectedNodeId) {
+        this.updateDataBase({});
+      }
     },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
+    handleNodeClick(data) {
+      this.selectedNodeId = data.id;
+      this.updateDataBase(data);
+    },
     renderContent(h, { node, data }) {
       return h("span", [
-        // 检查是否为子节点，如果是，则显示 checkbox
-        node.level === 1
-          ? h("el-checkbox", {
-              props: {
-                value: node.checked,
-                // disabled: node.disabled,
-              },
-              on: {
-                change: (val) => {
-                  this.$refs.tree.setChecked(node, val);
+        node.level > 1
+          ? h("span", [
+              h("svg-icon", {
+                props: {
+                  "icon-class": "fields2",
                 },
-              },
-            })
-          : null, // 父节点不显示 checkbox
+                style: { margin: "0 10px" },
+              }),
+            ])
+          : null,
 
-        node.level > 1
-          ? h("svg-icon", {
-              props: {
-                "icon-class": "fields2", // 设置自定义组件的属性
-              },
-              style: { margin: "0 10px" }, // 设置边距
-            })
-          : h("svg-icon", {
-              props: {
-                "icon-class": "baseData", // 设置自定义组件的属性
-              },
-              style: { margin: "0 10px" }, // 设置边距
-            }),
-        h("span", data.label),
+        node.level === 1
+          ? h("span", [
+              h(
+                "el-radio",
+                {
+                  props: {
+                    value: this.selectedNodeId,
+                    label: data.id,
+                  },
+                  on: {
+                    input: (val) => {
+                      this.selectedNodeId = val;
+                    },
+                  },
+                },
+                [data.label]
+              ),
+            ])
+          : h("span", data.label),
       ]);
     },
   },
 };
 </script>
+
 <style scoped lang="scss">
 .chartContiner {
   background-color: skyblue;
@@ -125,5 +133,11 @@ export default {
     height: 100%;
     border-radius: 0 !important;
   }
+  ::v-deep .el-radio {
+    margin: 0;
+    .el-radio__label {
+      // padding: 0;
+    }
+  }
 }
 </style>

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

@@ -32,6 +32,7 @@ import {
   storeSetData,
   initDatabase,
 } from "@/utils/indexedDb";
+import { format } from "date-fns";
 export default {
   name: "LuckySheetDemo",
   data() {
@@ -46,9 +47,13 @@ export default {
   methods: {
     async initSheetData() {
       const jsonData = await getDataFromIndexedDB();
+      console.log(
+        [...jsonData].filter((item) => item.fileId == this.$route.query.id)[0],
+        "this.$route.query.id"
+      );
       this.sheetName = [...jsonData].filter(
         (item) => item.fileId == this.$route.query.id
-      )[0].filename;
+      )[0].fileOldName;
       // 1. 动态提取表头
       const headers = Object.keys(
         [...jsonData].filter((item) => item.fileId == this.$route.query.id)[0]
@@ -162,8 +167,9 @@ export default {
         .then((database) => {
           // 调用 storeSetData 方法
           let fileData = {
-            filename: this.sheetName,
+            filename: format(new Date(), "yyyyMMdd-HH:mm:ss") + this.sheetName,
             fileData: JSON.parse(this.sheetData),
+            fileOldName: this.sheetName,
             fileId: new Date().getTime(),
           };
           storeSetData(database, "files", "fileDataArray", fileData, () => {

src/views/performance/customAnalysis.vue

@@ -9,7 +9,7 @@
     >
       <el-tab-pane name="import">
         <template #label>
-          <el-popover :visible="showPopover" placement="right" trigger="click">
+          <el-popover :visible="showPopover" placement="right" trigger="hover">
             <div>
               <el-upload
                 action=""
@@ -52,22 +52,76 @@
 
       <el-tab-pane name="chart" class="chartsTab">
         <span slot="label" class="iconFont">
-          <svg-icon icon-class="table(1)" style="width: 30px; height: 30px" />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="自定义图表"
+            placement="right"
+          >
+            <span>
+              <svg-icon
+                icon-class="table(1)"
+                style="width: 30px; height: 30px"
+              />
+            </span>
+          </el-tooltip>
         </span>
         <DragChart></DragChart>
       </el-tab-pane>
       <el-tab-pane name="table">
         <span slot="label" class="iconFont">
-          <svg-icon icon-class="table(3)" style="width: 30px; height: 30px" />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="数据表格"
+            placement="right"
+          >
+            <span>
+              <svg-icon
+                icon-class="table(3)"
+                style="width: 30px; height: 30px"
+              />
+            </span>
+          </el-tooltip>
         </span>
         <DataTable ref="dataTableRef"></DataTable>
       </el-tab-pane>
       <el-tab-pane name="compute">
         <span slot="label" class="iconFont" @click.stop="dialogVisible = true">
-          <svg-icon icon-class="compute(1)" style="width: 30px; height: 30px" />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="自定义算法调用"
+            placement="right"
+          >
+            <span>
+              <svg-icon
+                icon-class="compute(1)"
+                style="width: 30px; height: 30px"
+              />
+            </span>
+          </el-tooltip>
         </span>
         计算器弹出框
       </el-tab-pane>
+      <el-tab-pane name="associatedFields">
+        <span slot="label" class="iconFont">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="数据关联"
+            placement="right"
+          >
+            <span>
+              <svg-icon
+                icon-class="associatedFields"
+                style="width: 30px; height: 30px"
+              />
+            </span>
+          </el-tooltip>
+        </span>
+        <AssociatedFields></AssociatedFields>
+      </el-tab-pane>
     </el-tabs>
     <el-dialog
       title="数据列表特征计算函数"
@@ -92,13 +146,20 @@
             <el-option label="区域二" value="beijing"></el-option>
           </el-select>
         </el-form-item>
-
         <el-form-item label="选择特征值计算：" prop="type">
           <el-checkbox-group v-model="ruleForm.type">
             <el-checkbox label="有效值" name="type"></el-checkbox>
             <el-checkbox label="平均值" name="type"></el-checkbox>
             <el-checkbox label="最大值" name="type"></el-checkbox>
+            <el-checkbox label="最小值" name="type"></el-checkbox>
             <el-checkbox label="峰值" name="type"></el-checkbox>
+            <el-checkbox label="峰峰值" name="type"></el-checkbox>
+            <el-checkbox label="峰值指标" name="type"></el-checkbox>
+            <el-checkbox label="峰度指标" name="type"></el-checkbox>
+            <el-checkbox label="歪度指标" name="type"></el-checkbox>
+            <el-checkbox label="裕度指标" name="type"></el-checkbox>
+            <el-checkbox label="脉冲指标" name="type"></el-checkbox>
+            <el-checkbox label="波形指标" name="type"></el-checkbox>
           </el-checkbox-group>
         </el-form-item>
       </el-form>
@@ -120,14 +181,17 @@
 import DataTable from "./components/custonAsCom/dataTable.vue";
 import DatabaseTable from "./components/custonAsCom/DatabaseTable.vue";
 import DragChart from "./components/custonAsCom/dragChart/index.vue";
+import AssociatedFields from "./components/custonAsCom/AssociatedFields.vue";
 import Papa from "papaparse";
 import * as XLSX from "xlsx";
 import { storeSetData } from "@/utils/indexedDb";
+import { format } from "date-fns";
 export default {
   components: {
     DataTable,
     DatabaseTable,
     DragChart,
+    AssociatedFields,
   },
   data() {
     return {
@@ -231,7 +295,8 @@ export default {
           complete: (results) => {
             // 可以进一步处理解析后的数据
             const fileData = {
-              filename: file.name,
+              filename: format(new Date(), "yyyyMMdd-HH:mm:ss") + file.name,
+              fileOldName: file.name,
               fileData: results.data,
               fileId: new Date().getTime(),
             };
@@ -253,8 +318,10 @@ export default {
               workbook.Sheets[sheetName]
             );
             const fileData = {
-              filename: file.name,
+              filename: format(new Date(), "yyyyMMdd-HH:mm:ss") + file.name,
               fileData: sheetData,
+              fileOldName: file.name,
+              fileId: new Date().getTime(),
             };
             if (sheetData.length > 0) {
               this.storeData(fileData);