performance-test/src/views/health/components/spectrogramcharts.vue

<template>
  <div>
    <div class="FD">
      <!-- 光标 -->
      <div v-if="BGshow" class="eigenvalue">
        <el-checkbox-group v-model="checkedGB">
          <el-checkbox v-for="(item, index) in GBcheckList" :key="index" :label="item.val">
            {{ item.val }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 特征值 -->
      <div v-if="PXshow" class="eigenvalue">
        <el-checkbox-group v-model="checkedValues" @change="handleCheckChange">
          <el-checkbox v-for="(item, index) in PXcheckList" :key="index" :label="item.val">
            {{ item.val }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- ECharts 图表容器 -->

    <div class="line-chart" ref="chart"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts"; // 导入 echarts 库

export default {
  name: "TimedomainCharts", // 组件名称
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
    activeIndex: {
      type: Number,
      default: 0,
    },
    ids: {
      type: Array,
      default: () => [],
    },
    spectrumListTwo: {
      type: Object,
      default: () => ({}),
    },
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    windCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chartInstance: null,
      option: null,
      TZshow: false,
      BGshow: false,
      PXshow: false,
      spectrumList: {},

      GBcheckList: [
        { val: "添加光标" },
        { val: "谐波光标" },
        { val: "边带光标" },
        { val: "移动峰值" },
      ],
      PXcheckList: [
        { val: "Fr", checked: false },
        { val: "BPFI", checked: false },
        { val: "BPFO", checked: false },
        { val: "BSF", checked: false },
        { val: "FTF", checked: false },
        { val: "3P", checked: false },
      ],
      Fr: [],
      BPFI: [],
      BPFO: [],
      BSF: [],
      FTF: [],
      B3P: [],

      checkedGB: [],
      checkedValues: [],
    };
  },
  watch: {
    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
    chartData(newData) {
      this.updateChart(newData, this.chartLabels);
    },
    chartLabels(newLabels) {
      this.updateChart(this.chartData, newLabels);
    },
    spectrumListTwo(newValue) {
      this.spectrumList = newValue; // 将 spectrumListTwo 的新值赋给 spectrumList
      if (this.chartInstance) {
        this.updateChart(this.spectrumList.y, this.spectrumList.x); // 更新图表
      }
    },
    spectrumList: {
      handler(newValue) {
        if (!newValue) return;
        console.log(newValue, "newValue");
        if (this.chartInstance) {
          this.updateChart(newValue.y, newValue.x); // 只在 chartInstance 初始化后更新图表
        }
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    
    this.$nextTick(() => {
      setTimeout(() => {
        this.initializeChart(); // 延迟2秒后调用
        this.getTime();
      }, 500); // 500毫秒，即0.5秒
    });
  },

  methods: {
    initializeChart() {
      const chartDom = this.$refs.chart;
      if (chartDom && !this.chartInstance) {
        this.chartInstance = echarts.init(chartDom); // 仅初始化一次
      }

      // 使用 $nextTick 确保数据更新后再渲染图表
      this.$nextTick(() => {
        if (this.chartInstance && this.spectrumList.y && this.spectrumList.x) {
          this.updateChart(this.spectrumList.y, this.spectrumList.x); // 更新图表
        }
      });
    },

    // 更新图表数据
    updateChart(data, labels) {
      if (
        !this.chartInstance ||
        !Array.isArray(labels) ||
        !Array.isArray(data) ||
        labels.length !== data.length
      ) {
        console.error("Invalid data or labels");
        return;
      }

      const createMarkLine = (dataSource, color) => ({
        type: "line",
        markLine: {
          silent: false,
          lineStyle: { color, type: "solid", width: 2 },
          symbol: ["arrow", "none"],
          label: {
            show: true,
            position: "end",
            formatter: ({ data }) => data.val,
          },
          emphasis: {
            lineStyle: { color: "#FF6A00", width: 4 },
            label: {
              show: true,
              formatter: ({ value }) => `特征值: ${value}`,
              color: "#000",
              backgroundColor: "#FFF",
              padding: [2, 4],
              borderRadius: 3,
              fontSize: 12,
            },
          },
          data: dataSource.map(({ Xaxis, val }) => ({ xAxis: Xaxis, val })),
        },
      });

      const markLines = [
        { data: this.Fr, color: "#A633FF" },
        { data: this.BPFI, color: "#23357e" },
        { data: this.BPFO, color: "#42a0ae" },
        { data: this.BSF, color: "#008080" },
        { data: this.FTF, color: "#af254f" },
        { data: this.B3P, color: "#FFD700" },
      ].map(({ data, color }) => createMarkLine(data, color));

      const option = {
        title: { text: this.spectrumList.title, left: "center" },
        toolbox: {
          feature: {
            dataZoom: { yAxisIndex: "none" },
            restore: {},
            saveAsImage: {},
            myCustomTool: {
              show: true,
              title: "上一条",
              icon: `image://${require("@/assets/analyse/08.png")}`,
              onclick: () => this.previousRow(),
            },
            myCustomTool2: {
              show: true,
              title: "下一条",
              icon: `image://${require("@/assets/analyse/09.png")}`,
              onclick: () => this.nextRow(),
            },
            myCustomTool4: {
              show: true,
              title: "光标",
              icon: `image://${require("@/assets/analyse/12.png")}`,
              onclick: () => this.Show("2"),
            },
            myCustomTool5: {
              show: true,
              title: "特征频率",
              icon: `image://${require("@/assets/analyse/13.png")}`,
              onclick: () => this.Show("3"),
            },
          },
        },
        xAxis: {
          type: "value",
          name: this.spectrumList.xaxis,
          nameLocation: "center",
          nameTextStyle: {
            fontSize: 14,
            color: "#333",
            padding: [10, 0, 0, 0],
          },
        },
        yAxis: {
          type: "value",
          name: this.spectrumList.yaxis,
          nameTextStyle: {
            fontSize: 14,
            color: "#333",
            padding: [10, 0, 0, 0],
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: ([
            {
              value: [x, y],
            },
          ]) => `X: ${x}<br/>Y: ${y}`,
          axisPointer: { type: "line" },
        },
        dataZoom: [
          { type: "inside", start: 0, end: 10 },
          {
            type: "slider",
            start: 0,
            end: 10,
            handleSize: "80%",
            showDataShadow: false,
          },
        ],
        series: [
          {
            name: "数据系列",
            type: "line",
            data: labels.map((x, i) => [x, data[i]]),
            symbol: "none",
            lineStyle: { color: "#162961", width: 1 },
            itemStyle: {
              color: "#162961",
              borderColor: "#fff",
              borderWidth: 1,
            },
            large: true,
            progressive: 2000,
          },
          ...markLines,
        ],
      };

      this.chartInstance.setOption(option);
    },

    handleCheckChange() {
      this.PXcheckList.forEach((item) => {
        item.checked = this.checkedValues.includes(item.val);
      });

      // 构建新的特征频率数据
      const newFeatureLines = {
        Fr: this.checkedValues.includes("Fr") ? this.spectrumList.fn_Gen : [],
        BPFI: this.checkedValues.includes("BPFI") ? this.spectrumList.BPFI : [],
        BPFO: this.checkedValues.includes("BPFO") ? this.spectrumList.BPFO : [],
        BSF: this.checkedValues.includes("BSF") ? this.spectrumList.BSF : [],
        FTF: this.checkedValues.includes("FTF") ? this.spectrumList.FTF : [],
        B3P: this.checkedValues.includes("3P")
          ? Array.isArray(this.spectrumList.B3P)
            ? this.spectrumList.B3P
            : [{ Xaxis: this.spectrumList.B3P, val: "3P" }]
          : [],
      };

      // 仅更新 `series`，避免重新渲染整个 ECharts 组件
      if (this.chartInstance) {
        this.chartInstance.setOption(
          {
            series: this.generateSeries(newFeatureLines),
          },
          { replaceMerge: ["series"] }
        );
      }
    },

    generateSeries(featureLines) {
      const createMarkLine = (dataSource, color) => ({
        type: "line",
        markLine: {
          silent: false,
          lineStyle: { color, type: "dashed", width:1 },
          symbol: ["arrow", "none"],
          label: {
            show: true,
            position: "end",
            formatter: ({ data }) => data.val,
          },
          emphasis: {
            lineStyle: { color: "#FF6A00", width: 2 },
            label: {
              show: true,
              formatter: ({ value }) => `特征值: ${value}`,
              color: "#000",
            },
          },
          data: dataSource.map(({ Xaxis, val }) => ({ xAxis: Xaxis, val })),
        },
      });

      const markLines = [
        { data: featureLines.Fr, color: "#A633FF" },
        { data: featureLines.BPFI, color: "#23357e" },
        { data: featureLines.BPFO, color: "#42a0ae" },
        { data: featureLines.BSF, color: "#008080" },
        { data: featureLines.FTF, color: "#af254f" },
        { data: featureLines.B3P, color: "#FFD700" },
      ].map(({ data, color }) => createMarkLine(data, color));

      return [
        {
          name: "数据系列",
          type: "line",
          data: this.spectrumList.x.map((x, i) => [x, this.spectrumList.y[i]]),
          symbol: "none",
          lineStyle: { color: "#162961", width: 1 },
          itemStyle: { color: "#162961", borderColor: "#fff", borderWidth: 1 },
          large: true,
        },
        ...markLines,
      ];
    },

    


    getTime() {
      this.$emit("handleLoading", null, true, this.activeIndex);
      const params = {
        ids: this.ids,
        windCode: this.windCode,
        analysisType: "frequency",
      };
      axios
        .post("/WJapi/analysis/frequency", params)
        .then((res) => {
          console.log(res, "频谱图数据");
          this.spectrumList = { ...JSON.parse(res.data) };
          console.log(this.spectrumList, "频谱图数据1");
          const XrmsValue = this.spectrumList?.Xrms;
          // 通过 $emit 传递 XrmsValue 给父组件
          this.$emit("updateXrms", XrmsValue);
          this.PXcheckList.forEach((item) => {
            if (item.checked) {
              switch (item.val) {
                case "Fr":
                  this.Fr = this.spectrumList.fn_Gen;
                  break;
                case "BPFI":
                  this.BPFI = this.spectrumList.BPFI;
                  break;
                case "BPFO":
                  this.BPFO = this.spectrumList.BPFO;
                  break;
                case "BSF":
                  this.BSF = this.spectrumList.BSF;
                  break;
                case "FTF":
                  this.FTF = this.spectrumList.FTF;
                  break;
                case "3P":
                  this.B3P = Array.isArray(this.spectrumList.B3P)
                    ? this.spectrumList.B3P
                    : [{ Xaxis: this.spectrumList.B3P, val: "3P" }];
                  break;
                default:
                  break;
              }
            }
          });
        })
        .catch((error) => {
          console.error(error);
        })
        .finally(() => {
          this.$emit("handleLoading", this.currentRow, false, this.activeIndex);
        });
    },

    previousRow() {
      this.$emit("update-previous-row", 2, this.activeIndex);
    },

    nextRow() {
      this.$emit("update-next-row", 2, this.activeIndex);
    },

    Show(value) {
      const stateMap = {
        1: { TZshow: true, BGshow: false, PXshow: false },
        2: { TZshow: false, BGshow: true, PXshow: false },
        3: { TZshow: false, BGshow: false, PXshow: true },
      };

      if (stateMap[value]) {
        // Toggle the state for the given value
        this.TZshow = value === "1" ? !this.TZshow : false;
        this.BGshow = value === "2" ? !this.BGshow : false;
        this.PXshow = value === "3" ? !this.PXshow : false;
      }
    },

    // handleCheckChange() {
    //   this.PXcheckList.forEach((item) => {
    //     // 如果 `checkedValues` 里有这个项，则 checked=true，否则 checked=false
    //     item.checked = this.checkedValues.includes(item.val);
    //   });

    //   // 重置数据数组
    //   this.Fr = [];
    //   this.BPFI = [];
    //   this.BPFO = [];
    //   this.BSF = [];
    //   this.FTF = [];
    //   this.B3P = [];

    //   // 找到刚刚被点击的项
    //   const changedItem = this.PXcheckList.find(
    //     (item) => !this.checkedValues.includes(item.val) !== item.checked
    //   );

    //   if (changedItem) {
    //     console.log("当前点击项:", changedItem);
    //     // 根据选中状态赋值
    //     if (this.checkedValues.includes("Fr")) {
    //       this.Fr = this.spectrumList.fn_Gen;
    //     }
    //     if (this.checkedValues.includes("BPFI")) {
    //       this.BPFI = this.spectrumList.BPFI;
    //     }
    //     if (this.checkedValues.includes("BPFO")) {
    //       this.BPFO = this.spectrumList.BPFO;
    //     }
    //     if (this.checkedValues.includes("BSF")) {
    //       this.BSF = this.spectrumList.BSF;
    //     }
    //     if (this.checkedValues.includes("FTF")) {
    //       this.FTF = this.spectrumList.FTF;
    //     }
    //     if (this.checkedValues.includes("3P")) {
    //       this.B3P = Array.isArray(this.spectrumList.B3P)
    //         ? this.spectrumList.B3P
    //         : [{ Xaxis: this.spectrumList.B3P, val: "3P" }];
    //     }
    //     // 更新 ECharts 图表数据
    //     if (this.chartInstance) {
    //       this.updateChart(this.spectrumList.y, this.spectrumList.x);
    //     }
    //   }
    // },

   
  },
};
</script>
<style lang="scss" scoped>
.line-chart {
  width: 100%;
  height: 280px;
}

.FD {
  width: 100%;
  height: 1px;
  position: relative;
}

.eigenvalue {
  position: absolute;
  top: 30px;
  right: 0;
  font-size: 10px;
  width: 100px;
  border: 1px solid black;
  padding: 5px;
  background: #fff;
  z-index: 99;

  h5 {
    line-height: 16px;
    height: 16px;
  }
}
</style>