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

<template>
  <div>
    <div class="FD">
      <div v-if="TZshow" class="eigenvalue">
        <h5>特征值</h5>
        <p>有效值：{{ this.timeList.Xrms }}</p>
        <p>平均值：{{ this.timeList.mean_value }}</p>
        <p>最大值：{{ this.timeList.max_value }}</p>
        <p>最小值：{{ this.timeList.min_value }}</p>
        <p>峰值：{{ this.timeList.Xp }}</p>
        <p>峰峰值：{{ this.timeList.Xpp }}</p>
        <p>波形因子：{{ this.timeList.Sf }}</p>
        <p>脉冲指标：{{ this.timeList.If }}</p>
        <p>裕度指标：{{ this.timeList.Ce }}</p>
        <p>偏度指标：{{ this.timeList.Cw }}</p>
        <p>峭度指标：{{ this.timeList.Cq }}</p>
      </div>
    </div>
    <!-- ECharts 图表容器 -->

    <div class="line-chart" ref="chart" v-loading="loadingTime"></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,
    },
    loadingTime: {
      type: Boolean,
      default: false,
    },
    ids: {
      type: Array,
      default: () => [],
    },
    timeListTwo: {
      type: Object,
      default: () => ({}),
    },
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    windCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chartInstance: null,
      option: null,
      TZshow: false,
      timeList: {},
    };
  },
  watch: {
    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
    chartData(newData) {
      this.updateChart(newData, this.chartLabels);
    },
    chartLabels(newLabels) {
      this.updateChart(this.chartData, newLabels);
    },
    timeListTwo(newValue) {
      this.timeList = newValue; // 将 timeListTwo 的新值赋给 timeList
      if (this.chartInstance) {
        this.updateChart(this.timeList.y, this.timeList.x); // 更新图表
      }
    },
    // 监听 timeList 的变化
    timeList: {
      handler(newValue) {
        if (this.chartInstance) {
          this.updateChart(newValue.y, newValue.x); // 只在 chartInstance 初始化后更新图表
        }
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initializeChart(); // 延迟2秒后调用
        this.getTime();
      }, 500); // 2000毫秒，即2秒
    });
  },

  methods: {
    initializeChart() {
      const chartDom = this.$refs.chart;
      if (chartDom && !this.chartInstance) {
        this.chartInstance = echarts.init(chartDom); 
      }
      if (this.timeList.y && this.timeList.x) {
        this.updateChart(this.timeList.y, this.timeList.x);
      }
    },

    // 更新图表数据
    updateChart(data, labels) {
      if (!this.chartInstance) return; // Check if chartInstance is available

      const maxX = Math.max(...labels);
      const maxAxisValue = Math.ceil(maxX / 5) * 5;
      const ticks = [];
      for (let i = 0; i <= maxAxisValue; i += 5) {
        ticks.push(i);
      }

      const option = {
        title: {
          text: this.timeList.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(),
            },
            myCustomTool3: {
              show: true,
              title: "特征值",
              icon: `image://${require("@/assets/analyse/10.png")}`,
              onclick: () => this.Show(),
            },
          },
        },
        xAxis: {
          type: "value", 
          name: this.timeList.xaxis, 
          nameLocation: "center", 
          nameTextStyle: {
            fontSize: 14,
            color: "#333",
            padding: [10, 0, 0, 0],
          },
          axisLabel: {
            formatter: (value) => {
              return value;
            },
          },
          axisTick: {
            show: true, 
          },
          axisLine: {
            show: true, 
          },
          data: ticks,
        },

        yAxis: {
          type: "value", 
          name: this.timeList.yaxis,
          // nameLocation: "center",
          nameTextStyle: {
            fontSize: 14,
            color: "#333", 
            padding: [10, 0, 0, 0], 
          },
          axisLabel: {
            formatter: (value) => {
              return value; 
            },
          },
          axisTick: {
            show: true, 
          },
          axisLine: {
            show: true, 
          },
        },

        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            const xValue = params[0].value[0]; 
            const yValue = params[0].value[1]; 
            return `X: ${xValue}<br/>Y: ${yValue}`;
          },
          axisPointer: {
            type: "line", 
          },
        },

        series: [
          {
            name: "数据系列",
            type: "line", 
            data: labels.map((item, index) => [item, data[index]]), 
            symbol: "none", 
            symbolSize: 8, 
            lineStyle: {
              color: "#162961", 
              width: 1, 
            },
            itemStyle: {
              color: "#162961", 
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        ],
      };

      this.chartInstance.setOption(option); 
    },

    getTime() {
      this.$emit("handleLoading", null, true, this.activeIndex);
      const params = {
        ids: this.ids,
        windCode: "SKF001",
        analysisType: "time",
        // windCode: this.windCode,
      };
      axios
        .post("/WJapi/analysis/time", params)
        .then((res) => {
          this.timeList = JSON.parse(res.data);
        })
        .catch((error) => {})
        .finally(() => {
          this.$emit("handleLoading", this.currentRow, false, this.activeIndex);
        });
    },

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

    // 触发下一条
    nextRow() {
      this.$emit("update-next-row", 1, this.activeIndex);
    },

    Show() {
      this.TZshow = !this.TZshow;
    },
  },
};
</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>