performance-test/src/views/health/vibration.vue

<template>
  <div class="global-variable">
    <div class="head">
      <div class="headleft">
        <div @click="generate('1')" class="picture">
          <img src="@/assets/analyse/03.png" alt="" />
          <p>时域图</p>
        </div>
        <div @click="generate('2')" class="picture">
          <img src="@/assets/analyse/04.png" alt="" />
          <p>频谱图</p>
        </div>
        <div @click="generate('3')" class="picture">
          <img src="@/assets/analyse/01.png" alt="" />
          <p>包络谱图</p>
        </div>
        <div @click="tendency" class="picture">
          <img src="@/assets/analyse/02.png" alt="" />
          <p>趋势图</p>
        </div>
      </div>
      <div class="headright">
        <img src="@/assets/analyse/07.png" alt="全部缩小" @click="suoxiao" />
        <img src="@/assets/analyse/05.png" alt="全部展开" @click="zhankai" />

        <img src="@/assets/analyse/06.png" alt="全部关闭" @click="guanbi" />
      </div>
    </div>
    <div class="searchbox">
      <p>
        单位：
        <selecttree
          style="width: 180px"
          placeholder="请选择所属公司"
          :list="parentOpt"
          type="1"
          v-model="companyCode"
          @change="parentChange"
          :defaultParentProps="{
            children: 'children',
            label: 'companyName',
            value: 'codeNumber',
          }"
        >
        </selecttree>
      </p>
      <p>
        风机：
        <el-select
          style="width: 150px"
          v-model="unitvalue"
          @change="getchedian"
          placeholder="请选择"
        >
          <el-option
            v-for="item in unitoptions"
            :key="item.engineCode"
            :label="item.engineName"
            :value="item.engineCode"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        测点：
        <el-select v-model="monitoringvalue" clearable placeholder="请选择">
          <el-option
            v-for="item in monitoringoptions"
            :key="item.detectionPointEn"
            :label="item.detectionPointCn"
            :value="item.detectionPointEn"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        时间：
        <el-date-picker
          v-model="timevalue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </p>
      <el-button type="primary" size="small" @click="conditions"
        >查询</el-button
      >
      <el-button size="small" @click="outputFile">导出</el-button>
    </div>
    <div class="main-body">
      <div class="data-map">
        <div
          class="chart-area"
          v-for="(item, index) in fourList"
          :key="item.index"
          @mouseover="setCurrent(item.rowData)"
          @mouseleave="setCurrent(oldCurrentRow)"
        >
          <div class="dialog-actions">
            <p>{{ item.name }}</p>
            <span>
              <i
                class="el-icon-minus"
                @click="lessen(index)"
                style="cursor: pointer; margin-right: 10px"
              ></i>
              <i
                class="el-icon-full-screen"
                @click="amplifier(index)"
                style="cursor: pointer; margin-right: 10px"
              ></i>
              <i
                class="el-icon-close"
                @click="close(index)"
                style="cursor: pointer"
              ></i>
            </span>
          </div>

          <div
            class="subject"
            :class="{
              minimized: item.isMinimized,
            }"
            v-loading="item.loading"
          >
            <!-- {{ item.rowData }} -->
            <p v-if="item.name != '趋势图'">
              测点路径:{{
                getDetectionPointCn(item?.rowData?.mesurePointName)
              }}-{{ item?.rowData?.windTurbineNumber }}
              <span>采样频率: {{ item?.rowData?.samplingFrequency }}(Hz)</span>
              <span
                >发电机转速: {{ item?.rowData?.rotationalSpeed }}(rpm)
              </span>
              <span>采样时间: {{ item?.rowData?.timeStamp }} </span>
              <!-- <span>有效值: {{XrmsValue}} (m/s2)</span> -->
            </p>

            <!-- {{ samplingTime }} -->
            <div v-if="item.name === '时域图'">
              <timedomaincharts
                :timeListTwo="item.timeListTwo"
                :currentIndex="currentIndex"
                :activeIndex="index"
                :tableDataList="tableDataList"
                :ids="[currentRow.id]"
                :currentRow="currentRow"
                :windCode="windCode"
                @update:currentIndex="handleCurrentIndexUpdate"
                @update-previous-row="goToPreviousRow"
                @update-next-row="goToNextRow"
                @handleLoading="handleLoading"
              ></timedomaincharts>
            </div>
            <div v-if="item.name === '频谱图'">
              <spectrogramcharts
                @updateXrms="handleXrmsUpdate"
                :spectrumListTwo="item.spectrumListTwo"
                :currentIndex="currentIndex"
                :tableDataList="tableDataList"
                :activeIndex="index"
                :ids="[currentRow.id]"
                :currentRow="currentRow"
                :windCode="windCode"
                @update:currentIndex="handleCurrentIndexUpdate"
                @update-previous-row="goToPreviousRow"
                @update-next-row="goToNextRow"
                @handleLoading="handleLoading"
              ></spectrogramcharts>
            </div>
            <div v-if="item.name === '包络谱图'">
              <envelopecharts
                @updateXrms="handleXrmsUpdate"
                :envelopeListTwo="item.envelopeListTwo"
                :currentIndex="currentIndex"
                :tableDataList="tableDataList"
                :activeIndex="index"
                :currentRow="currentRow"
                :ids="[currentRow.id]"
                :windCode="windCode"
                @update:currentIndex="handleCurrentIndexUpdate"
                @update-previous-row="goToPreviousRow"
                @update-next-row="goToNextRow"
                @update:modelValue="handleModelUpdate"
                @handleLoading="handleLoading"
              ></envelopecharts>
            </div>
            <div v-if="item.name === '趋势图'">
              <tendencycharts
                :qsList="qsList"
                :activeIndex="index"
              ></tendencycharts>
            </div>
          </div>
        </div>
      </div>
      <div class="data-origin">
        <el-table
          height="600"
          ref="singleTable"
          :data="tableDataList"
          :current-row-key="currentIndex"
          @current-change="handleCurrentChange"
          highlight-current-row
          style="width: 100%"
          :row-class-name="tableRowClassName"
          id="Table1"
        >
          <el-table-column type="index" label="排序" fixed> </el-table-column>
          <el-table-column prop="timeStamp" label="采样时间" width="180px">
          </el-table-column>
          <el-table-column
            prop="mesurePointName"
            label="测点名称"
            width="150px"
          >
            <template slot-scope="scope">
              {{ getDetectionPointCn(scope.row.mesurePointName) }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="companyName" label="场站">
            {{ getCompanyLabel(scope.row.companyCode) }}
            
          </el-table-column> -->
          <el-table-column prop="windTurbineNumber" label="风机" width="120px">
          </el-table-column>

          <el-table-column
            prop="samplingFrequency"
            label="采样频率(Hz)"
            align="center"
            width="120px"
          >
          </el-table-column>
          <el-table-column
            prop="rotationalSpeed"
            label="发电机转速(rpm)"
            align="center"
            width="150px"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
import {
  getSysOrganizationAuthTreeByRoleId,
  windEngineGrouPage,
  queryDetectionDic,
} from "@/api/ledger.js";
import selecttree from "../../components/selecttree.vue";

import envelopecharts from "./components/envelopecharts.vue";
import spectrogramcharts from "./components/spectrogramcharts.vue";
import tendencycharts from "./components/tendencycharts.vue";
import timedomaincharts from "./components/timedomaincharts.vue";
import axios from "axios";
export default {
  components: {
    envelopecharts,
    spectrogramcharts,
    tendencycharts,
    timedomaincharts,
    selecttree,
  },
  data() {
    return {
      chartData: [],
      chartLabels: [],
      unitvale: "",
      company: "",
      companyoptions: [],
      unitvalue: "",
      unitoptions: [],
      monitoringvalue: "",
      monitoringoptions: [
        // {
        //   detectionPointEn: "name",
        //   detectionPointCn: "中文",
        // },
      ],

      fourList: [],
      currentRow: null, // 用于存储当前选中的行
      currentIndex: 0,
      isChartVisible: false,
      parentOpt: [],
      defaultdata: {},
      companyCode: "",
      windCode: "",
      maplist: {},
      timevalue: [], // 绑定 el-date-picker 的值
      startTime: "", // 开始时间
      endTime: "", // 结束时间
      tableDataList: [],

      samplingTime: "", // 采样时间

      timeListTwo: {},
      spectrumList: {},
      envelopeList: {},
      qsList: {},
      CdNamw: "",
      chartsData: {},
      shuju: {},
      spectrumListTwo: {},
      envelopeListTwo: {},
      oldCurrentRow: {},
      XrmsValue: 0, // 默认值
    };
  },

  created() {
    this.GETtree();
  },
  watch: {
    // 监听 timeList 的变化
    currentRow(newVal, oldVal) {
      if (newVal) {
        // console.log(newVal, oldVal);
        this.oldCurrentRow = oldVal;
      } else {
        console.error("currentRow is undefined or null");
      }
    },
  },
  methods: {
    handleXrmsUpdate(value) {
      this.XrmsValue = value; // 更新有效值
    },
    handleLoading(currentRow, loading, activeIndex, params) {
      if (loading) {
        this.$set(this.fourList[activeIndex], "loading", loading);
        return;
      }
      this.$set(this.fourList[activeIndex], "rowData", currentRow);
      this.$set(this.fourList[activeIndex], "loading", false);
    },
    onRowClick(row) {
      this.currentRow = row; // 选中行数据
    },
    getDetectionPointCn(detectionPointEn) {
      const point = this.monitoringoptions?.find(
        (option) => option.detectionPointEn === detectionPointEn
      );
      return point ? point?.detectionPointCn : null; // 如果没有找到对应项，返回 null
    },
    getCompanyLabel(companyCode) {
      const selectedOption = this.parentOpt?.find(
        (option) => option.codeNumber === companyCode
      );
      return selectedOption ? selectedOption.companyName : ""; // Return companyName or empty string if not found
    },
    // 获取风场
    async GETtree() {
      const res = await getSysOrganizationAuthTreeByRoleId();
      const treedata = res.data;
      const processedData = this.processTreeData(treedata);
      this.parentOpt = processedData;
      this.defaultdata = res.data[0];
    },

    parentChange(data) {
      this.maplist = data;
      this.maplistArr = data;
      let paramsData = {
        fieldCode: this.maplist.codeNumber,
        pageNum: 1,
        pageSize: 99,
      };
      this.unitvalue = "";
      // 获取风机
      windEngineGrouPage(paramsData).then((res) => {
        this.unitoptions = res.data.list;
        this.windCode = this.companyCode;
      });

      if (data.codeType === "field") {
        if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
          return;
        }
      } else {
        const dataMapList = data.children;
        dataMapList.forEach((element) => {
          if (
            this.parseCoordinates(element.longitudeAndLatitudeString).length >
              0 &&
            element.codeType === "field"
          ) {
            return;
          }
        });
      }
    },
    processTreeData(treeData) {
      const processedData = [];
      function processNode(node) {
        if (node.codeType === "field") {
          node.companyName = node.fieldName;
        }
        if (node.children && node.children.length > 0) {
          node.children.forEach((child) => {
            processNode(child);
          });
        }
      }
      treeData.forEach((root) => {
        processNode(root);
        processedData.push(root);
      });
      return processedData;
    },
    parseCoordinates(input) {
      if (input && typeof input === "string") {
        return input.split(",").map(Number);
      }
      // debugger;
      return [];
    },
    // 获取测点
    getchedian(value) {
      queryDetectionDic({ engineCodes: value }).then((res) => {
        this.monitoringoptions = res.data;
      });
    },

    handleModelUpdate(data) {
      // 将子组件的值作为查询参数传递给查询接口

      this.xiaoval = data.xiaoval;
      this.daval = data.daval;
    },

    // 上一条数据
    goToPreviousRow(type, activeIndex) {
      if (this.tableDataList.length === 0) return;

      // 更新当前索引，向前循环
      this.currentIndex =
        this.currentIndex === 0
          ? this.tableDataList.length - 1
          : this.currentIndex - 1;

      const currentRow = this.tableDataList[this.currentIndex];
      this.setCurrent(currentRow);

      const params = {
        ids: currentRow.id,
        windCode: this.companyCode,
        // windCode: "SKF001",
      };

      // 根据type加载不同的数据
      if (type === 1) {
        // Type 1: 加载时域数据
        this.$set(this.fourList[activeIndex], "loading", true);
        params.analysisType = "time";
        axios
          .post("/WJapi/analysis/time", params)
          .then((res) => {
            const timeListTwo = JSON.parse(res.data);
            this.$set(this.fourList[activeIndex], "rowData", currentRow);
            this.$set(this.fourList[activeIndex], "timeListTwo", timeListTwo);
          })
          .catch((error) => {
            console.error("Error fetching time domain data:", error);
          })
          .finally(() => {
            this.$set(this.fourList[activeIndex], "loading", false);
          });
      } else if (type === 2) {
        // Type 2: 加载频域数据
        this.$set(this.fourList[activeIndex], "loading", true);
        params.analysisType = "frequency";
        axios
          .post("/WJapi/analysis/frequency", params)
          .then((res) => {
            const spectrumListTwo = JSON.parse(res.data);
            this.$set(this.fourList[activeIndex], "rowData", currentRow);
            this.$set(
              this.fourList[activeIndex],
              "spectrumListTwo",
              spectrumListTwo
            );
          })
          .catch((error) => {
            console.error("Error fetching frequency domain data:", error);
          })
          .finally(() => {
            this.$set(this.fourList[activeIndex], "loading", false);
          });
      } else if (type === 3) {
        // Type 3: 加载包络分析数据
        this.$set(this.fourList[activeIndex], "loading", true);
        params.analysisType = "envelope";
        params.fmin = this.xiaoval; // 最小频率参数
        params.fmax = this.daval; // 最大频率参数
        axios
          .post("/WJapi/analysis/envelope", params)
          .then((res) => {
            const envelopeListTwo = JSON.parse(res.data);
            this.$set(this.fourList[activeIndex], "rowData", currentRow);
            this.$set(
              this.fourList[activeIndex],
              "envelopeListTwo",
              envelopeListTwo
            );
          })
          .catch((error) => {
            console.error("Error fetching envelope analysis data:", error);
          })
          .finally(() => {
            this.$set(this.fourList[activeIndex], "loading", false);
          });
      } else {
        console.warn("Unknown type provided:", type);
      }
    },

    // 下一条数据，向后循环
    goToNextRow(type, activeIndex) {
      if (this.tableDataList.length === 0) return;

      // 更新当前索引
      this.currentIndex =
        this.currentIndex === this.tableDataList.length - 1
          ? 0
          : this.currentIndex + 1;

      const currentRow = this.tableDataList[this.currentIndex];
      this.setCurrent(currentRow);

      const params = {
        ids: currentRow.id,
        // windCode: "SKF001",
        windCode: this.companyCode,
      };

      // 根据type加载不同的数据
      if (type === 1) {
        // Type 1: 加载时域数据
        this.$set(this.fourList[activeIndex], "loading", true);
        params.analysisType = "time";
        axios
          .post("/WJapi/analysis/time", params)
          .then((res) => {
            const timeListTwo = JSON.parse(res.data);
            this.$set(this.fourList[activeIndex], "rowData", currentRow);
            this.$set(this.fourList[activeIndex], "timeListTwo", timeListTwo);
          })
          .catch((error) => {
            console.error("Error fetching time data:", error);
          })
          .finally(() => {
            this.$set(this.fourList[activeIndex], "loading", false);
          });
      } else if (type === 2) {
        // Type 2: 加载频域数据
        this.$set(this.fourList[activeIndex], "loading", true);
        params.analysisType = "frequency";
        axios
          .post("/WJapi/analysis/frequency", params)
          .then((res) => {
            const spectrumListTwo = JSON.parse(res.data);
            this.$set(this.fourList[activeIndex], "rowData", currentRow);
            this.$set(
              this.fourList[activeIndex],
              "spectrumListTwo",
              spectrumListTwo
            );
          })
          .catch((error) => {
            console.error("Error fetching frequency data:", error);
          })
          .finally(() => {
            this.$set(this.fourList[activeIndex], "loading", false);
          });
      } else if (type === 3) {
        // Type 3: 加载包络分析数据
        this.$set(this.fourList[activeIndex], "loading", true);
        params.analysisType = "envelope";
        params.fmin = this.xiaoval; // 最小频率
        params.fmax = this.daval; // 最大频率
        axios
          .post("/WJapi/analysis/envelope", params)
          .then((res) => {
            const envelopeListTwo = JSON.parse(res.data);
            this.$set(this.fourList[activeIndex], "rowData", currentRow);
            this.$set(
              this.fourList[activeIndex],
              "envelopeListTwo",
              envelopeListTwo
            );
          })
          .catch((error) => {
            console.error("Error fetching envelope analysis data:", error);
          })
          .finally(() => {
            this.$set(this.fourList[activeIndex], "loading", false);
          });
      }
    },

    // 更新父组件的 currentIndex
    handleCurrentIndexUpdate(newIndex) {
      this.currentIndex = newIndex;
      this.handleCurrentChange(newIndex);
    },
    tableRowClassName({ row }) {
      if (row === this.currentRow) {
        return "current-row-highlight"; // 自定义的高亮类名
      }
      return "";
    },
    // setCurrent(row) {
    //   this.currentRow = row; // 设置当前行
    // },
    // 当前所在行高亮提示
    setCurrent(row) {
      if (!row) {
        return false;
      }

      this.$refs.singleTable.setCurrentRow(row);
    },
    // 当前单选
    handleCurrentChange(val) {
      this.currentRow = val;
      const index = this.tableDataList.indexOf(val);
      this.currentIndex = index; // 更新当前索引
      console.log(this.currentIndex);
    },

    generate(type) {
      if (!this.currentRow) {
        this.$message.warning("请先选择数据");
        return;
      }
      const nameMap = {
        1: "时域图", // Time Domain Chart
        2: "频谱图", // Spectrogram Chart
        3: "包络谱图", // Envelope Spectrum Chart
      };

      const chartName = nameMap[type];
      if (chartName) {
        const newItem = {
          name: chartName,
          isMinimized: false,
          id: `chart-${Date.now()}`,
        };
        this.fourList.push(newItem);
      }
    },

    tendency() {
      if (this.tableDataList.length === 0) {
        this.$message.warning("数据为空，无法生成图表");
        return;
      }
      const newItem = {
        name: "趋势图",
        isMinimized: false,
        id: `chart-${Date.now()}`,
      };
      const params = {
        ids: this.tableDataList.map((item) => item.id),
        // windCode: "SKF001",
        windCode: this.companyCode,
        analysisType: "trend",
      };

      axios
        .post("/WJapi/analysis/trend", params)
        .then((res) => {
          this.qsList = JSON.parse(res.data);
          this.fourList.push(newItem);
        })
        .catch((error) => {});
    },

    conditions() {
      const params = {
        windCode: this.maplist.codeNumber,
        windTurbineNumberList: [this.unitvalue],
        mesureNameList: [this.monitoringvalue],
        startTime: this.$formatDateTWO(this.timevalue[0]),
        endTime: this.$formatDateTWO(this.timevalue[1]),
      };
      console.log(params, "params");

      // const params = {
      //   endTime: "2024-07-02 00:00:00",
      //   mesureNameList: ["gearbox_input_end_radial_vibration"],
      //   startTime: "2024-07-01 00:00:00",
      //   windCode: "SKF001",
      //   windTurbineNumberList: ["F004"],
      // };
      const areParamsValid = (params) => {
        return (
          params.endTime &&
          params.startTime &&
          params.mesureNameList?.length > 0 &&
          params.windCode &&
          params.windTurbineNumberList?.length > 0
        );
      };

      if (areParamsValid(params)) {
        axios
          .post("/ETLapi/waveData/getMesureData", params)
          .then((res) => {
            this.tableDataList = res.data.datas;
          })
          .catch((error) => {
            console.error("Error:", error);
            // Handle the error here
          });
      } else {
        this.$message({
          message: "请填写全部条件",
          type: "warning",
        });
      }
    },

    // 缩小
    lessen(index) {
      if (!this.fourList[index].isMinimized) {
        this.fourList[index].isMinimized = true;
      }
    },
    // 放大
    amplifier(index) {
      const item = this.fourList[index];
      if (item.isMinimized) {
        item.isMinimized = false;
      }
    },
    // 关闭
    close(index) {
      this.fourList.splice(index, 1);
    },
    zhankai() {
      this.fourList.forEach((item) => {
        item.isMinimized = false;
      });
    },
    suoxiao() {
      this.fourList.forEach((item) => {
        item.isMinimized = true;
      });
    },
    guanbi() {
      this.fourList = [];
    },
    outputFile() {
      var ws1 = XLSX.utils.table_to_book(document.querySelector("#Table1")); //对应要导出的表格id
      var wbOut = XLSX.write(ws1, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbOut], { type: "application/octet-stream" }),
          "demo.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbOut);
      }
      return wbOut;
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  // border-top: 5px solid #088080;
  // border-bottom: 5px solid #088080;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  .headleft {
    display: flex;
    .picture {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin: 0 20px;
      font-size: 12px;
      img {
        width: 50px;
        height: 20px;
      }
    }
  }
  .headright {
    line-height: 38px;
    img {
      width: 20px;
      height: 20px;
      margin: 0 10px;
      cursor: pointer;
    }
  }
}
.searchbox {
  display: flex;
  margin: 20px 0;
  p {
    margin-right: 20px;
  }
  .el-select {
    width: 180px;
  }
}
.dialog-actions {
  text-align: right;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.subject {
  height: 300px;
  transition: all 0.3s ease;
  padding: 0 10px;
  p {
    font-size: 10px;
  }
}

.main-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .data-map {
    width: 60%;
    // height: 620px;
    // overflow-y: auto;
    .chart-area {
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      &:hover {
        box-shadow: 0 2px 4px rgb(8, 128, 128, 0.13),
          0 0 6px rgb(8, 128, 128, 0.11);
        // border: 1px solid #088080;
      }
    }
  }
  .data-map::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }

  .data-origin {
    width: 39%;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
}

.subject.minimized {
  height: 0px; /* Adjust height when minimized */
  overflow: hidden;
}

// ::v-deep .current-row td {
//   background-color: rgba(147, 226, 226, 0.2) !important; /* 高亮的背景颜色 */
//   color: #088080;
//   font-weight: 600;
// }

.el-input__inner {
  width: 340px;
}
</style>