performance-test/src/views/performance/customAnalysis.vue

<template>
  <div class="content">
    <el-tabs
      ref="tabs"
      tab-position="left"
      :active-name="activeName"
      style="height: 100%"
      @tab-click="handleClick"
    >
      <el-tab-pane name="import">
        <template #label>
          <el-popover :visible="showPopover" placement="right" trigger="hover">
            <div>
              <el-upload
                action=""
                class="upload-demo"
                :http-request="customUpload"
                :on-change="handleChange"
                :before-upload="checkFileType"
                :show-file-list="false"
              >
                <div class="uploadBoxContent">
                  <svg-icon
                    icon-class="table(2)"
                    style="width: 40px; height: 40px; margin-right: 10px"
                  />
                  <span>导入CSV/EXCRL文件</span>
                </div>
              </el-upload>
            </div>
            <div class="uploadBoxContent" @click="showDatabaseTable = true">
              <svg-icon
                icon-class="datasql"
                style="width: 40px; height: 30px; margin-right: 10px"
              />
              <span>数据库导入</span>
            </div>
            <div
              class="iconFont"
              style="width: 100%; height: 100%"
              slot="reference"
              @click.stop="handleImportClick"
            >
              <svg-icon
                icon-class="import(1)"
                style="width: 30px; height: 30px"
              />
            </div>
          </el-popover>
        </template>
      </el-tab-pane>

      <el-tab-pane name="chart" class="chartsTab">
        <span slot="label" class="iconFont">
          <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">
          <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">
          <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="数据列表特征计算函数"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm"
      >
        <el-form-item label="选择数据列表：" prop="region">
          <el-select
            v-model="ruleForm.region"
            placeholder="请选择活动区域"
            size="small"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <DatabaseTable
      :dialogVisible="showDatabaseTable"
      @closeDialog="showDatabaseTable = false"
    ></DatabaseTable>
  </div>
</template>

<script>
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";
import { mapMutations, mapState } from "vuex";
export default {
  components: {
    DataTable,
    DatabaseTable,
    DragChart,
    AssociatedFields,
  },
  data() {
    return {
      db: null,
      activeName: "chart",
      showDatabaseTable: false,
      showPopover: false, // 控制 popover 的显示状态
      dialogVisible: false, //计算函数对话框状态
      ruleForm: {
        region: "",
        type: [],
      },
      rules: {
        region: [
          {
            required: true,
            message: "请至少选择一个数据列表！",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个特征值进行计算！",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("dragChart", {
      updateTriggerGetData: "updateTriggerGetData",
    }),
  },
  watch: {
    updateTriggerGetData: function (newVal) {
      if (newVal) {
        console.log(newVal, "newVal dataTable");
        this.setUpdateTriggerGetData(false);
        this.$refs.dataTableRef.getIndexDbData();
        // 重置 triggerGetData 状态为 false
      }
    },
  },
  methods: {
    ...mapMutations("dragChart", [
      "setTriggerGetData",
      "setUpdateTriggerGetData",
    ]),
    async initDB() {
      return new Promise((resolve, reject) => {
        const request = indexedDB.open("FileDataDB", 2); // 使用较高版本
        request.onupgradeneeded = (event) => {
          const db = event.target.result;
          console.log("升级数据库，创建对象存储。");

          // 检查是否存在对象存储
          if (!db.objectStoreNames.contains("files")) {
            db.createObjectStore("files", { keyPath: "id" });
          }
        };
        request.onsuccess = (event) => {
          this.db = event.target.result;
          console.log("数据库已成功初始化。");
          resolve();
        };
        request.onerror = (event) => {
          console.error("数据库初始化失败:", event.target.error);
          reject(event.target.error);
        };
      });
    },
    async storeData(newFileData) {
      await storeSetData(this.db, "files", "fileDataArray", newFileData, () => {
        this.setTriggerGetData(true);
        this.$refs.dataTableRef.getIndexDbData();
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleImportClick() {
      // 点击 import 标签时切换 popover 的显示状态
      this.showPopover = !this.showPopover; // 切换显示状态
    },
    handleClick(tab) {
      if (tab.name === "import") {
        // 如果点击的是 import 标签，则显示 popover
        this.showPopover = true;
      } else {
        // 其他标签时，改变 activeName
        this.activeName = tab.name;
      }
    },
    // 自定义上传方法
    customUpload(file) {
      const formData = new FormData();
      formData.append("file", file);
      // 使用 axios 自定义上传逻辑
    },
    // 文件变化时的处理
    handleChange(file) {
      if (file && file.name.endsWith(".csv")) {
        Papa.parse(file.raw, {
          header: true,
          complete: (results) => {
            // 可以进一步处理解析后的数据
            const fileData = {
              filename: format(new Date(), "yyyyMMdd-HH:mm:ss") + file.name,
              fileOldName: file.name,
              fileData: results.data,
              fileId: new Date().getTime(),
            };
            if (results.data.length > 0) {
              this.storeData(fileData);
            }
          },
          error: (error) => {
            console.error("Error parsing CSV:", error);
          },
        });
      } else {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });
          workbook.SheetNames.forEach((sheetName) => {
            const sheetData = XLSX.utils.sheet_to_json(
              workbook.Sheets[sheetName]
            );
            const fileData = {
              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);
            }
            // console.log("Parsed Excel Sheet Data:", sheetData);
            // 可以进一步处理解析后的数据
          });
        };
        reader.readAsArrayBuffer(file.raw);
      }
    },
    //判断上传文件类型
    checkFileType(file) {
      const isPdf =
        file.type === "text/csv" ||
        file.name.endsWith(".csv") ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.name.endsWith(".xlsx");
      if (!isPdf) {
        this.$message.error("只能上传csv文件或xlsx文件");
      }
      return isPdf;
    },
  },
  async mounted() {
    await this.initDB(); // 初始化数据库
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 88vh;
  ::v-deep .el-tabs__active-bar {
    // height: 50px !important;
    transition: transform 0.3s ease; // 添加过渡效果
  }
  ::v-deep .el-tabs--left .el-tabs__item {
    height: 55px;
    line-height: 55px;
  }
  ::v-deep .el-tabs__item {
    padding: 0;
  }
  .popover-footer {
    text-align: right;
  }
  .iconFont {
    padding: 0 20px;
  }

  ::v-deep .el-tabs__content {
    height: 100% !important;
  }
  .chartsTab {
    width: 100%;
    height: 100%;
  }
}
.uploadBoxContent {
  margin: 5px;
  display: flex;
  flex-direction: 1;
  align-items: center;
  cursor: pointer;
}
</style>