performance-test/src/views/laserRangeFinder/components/CylinderOfTower.vue

<template>
  <div class="chartsContent">
    <el-card shadow="never" v-if="type === 'Waveformdiagram'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          塔筒振动波形图
        </h4>
        <div style="font-size: 12px; color: #666">
          测点路径:江西大唐国际新能源有限公司\、金华山风电场\01#风机\塔筒振动
        </div>
        <div style="font-size: 12px; color: #666">
          采样频率(Hz):2560 有效值(m/s2):8.32 叶轮转速(r/min):15.3
          采样时间:2024//3/10 12:34:33
        </div>
      </div>
      <div class="line-chart" ref="chart"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'spectrogram'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          塔筒振动频谱图
        </h4>
      </div>
      <div class="line-chart" ref="chart"></div>
    </el-card>
  </div>
</template>

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

export default {
  props: {
    type: {
      default: "",
    },
  },
  data() {
    return {
      currentIndex: 0, // 默认索引
      tableData: [], // 数据
      originalChartStyle: {}, // 用于存储原始样式
    };
  },
  mounted() {
    this.initializeChart();
    // 监听键盘事件
    window.addEventListener("keydown", this.handleKeyDown);
  },
  destroyed() {
    // 移除键盘事件监听
    window.removeEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    // 初始化图表
    initializeChart() {
      const chartDom = this.$refs.chart;
      this.chartInstance = echarts.init(chartDom);
      const defaultData = [
        Math.floor(Math.random() * 300),
        Math.floor(Math.random() * 300),
        Math.floor(Math.random() * 300),
      ];
      const defaultLabels = ["2024/1/1", "2024/1/2", "2024/1/3"];
      this.updateChart(defaultData, defaultLabels);

      // 保存初始样式
      this.originalChartStyle = {
        width: chartDom.style.width,
        height: chartDom.style.height,
        backgroundColor: chartDom.style.backgroundColor,
      };
    },
    // 更新图表数据
    updateChart(data, labels) {
      const defaultData = Array.from({ length: 5000 }, () =>
        Math.floor(Math.random() * 300)
      );
      const defaultLabels = Array.from(
        { length: 5000 },
        (_, index) => `2024/1/${index + 1}`
      );
      const option = {
        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/fullScreen.png")}`,
              onclick: () => this.fullScreen(),
            },
            myCustomTool4: {
              show: true,
              title: "退出全屏",
              icon: `image://${require("@/assets/analyse/exitFullScreen.png")}`, // 替换为你自己的图标路径
              onclick: () => this.exitFullScreen(),
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: defaultLabels,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        series: [
          {
            name: "",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              normal: {
                color: "#3070B7",
                lineStyle: {
                  color: "#3070B7",
                  width: 1,
                },
              },
            },
            data: defaultData,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    previousRow() {
      let newIndex =
        this.currentIndex > 0
          ? this.currentIndex - 1
          : this.tableData.length - 1;
      this.$emit("update:currentIndex", newIndex);
    },
    nextRow() {
      console.log("下一条");
      let newIndex =
        this.currentIndex < this.tableData.length - 1
          ? this.currentIndex + 1
          : 0;
      this.$emit("update:currentIndex", newIndex);
    },
    toggleFullScreen() {
      const chartDom = this.$refs.chart;
      if (screenfull.isEnabled) {
        screenfull.toggle(chartDom);
      }
    },
    fullScreen() {
      const chartDom = this.$refs.chart;
      if (screenfull.isEnabled) {
        // 设置全屏样式
        chartDom.style.position = "absolute";
        chartDom.style.top = 0;
        chartDom.style.left = 0;
        chartDom.style.width = "100vw";
        chartDom.style.height = "100vh";
        chartDom.style.backgroundColor = "#ffffff";

        // 进入全屏
        screenfull.request(chartDom);
        this.chartInstance.resize();

        // 监听全屏变化
        screenfull.on("change", this.handleFullScreenChange);
      }
    },
    exitFullScreen() {
      const chartDom = this.$refs.chart;
      if (screenfull.isEnabled) {
        screenfull.exit();
        // 监听全屏变化
        screenfull.on("change", this.handleFullScreenChange);
      }
    },
    // 处理全屏变化的回调
    handleFullScreenChange() {
      const chartDom = this.$refs.chart;
      if (!screenfull.isFullscreen) {
        // 退出全屏时恢复样式
        chartDom.style.position = this.originalChartStyle.position || "";
        chartDom.style.top = this.originalChartStyle.top || "";
        chartDom.style.left = this.originalChartStyle.left || "";
        chartDom.style.width = this.originalChartStyle.width || "100%";
        chartDom.style.height = this.originalChartStyle.height || "250px";
        chartDom.style.backgroundColor =
          this.originalChartStyle.backgroundColor || "#fff";

        // 调整图表尺寸
        this.chartInstance.resize();

        // 可选：移除事件监听（如果不再需要）
        screenfull.off("change", this.handleFullScreenChange);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  width: 100%;
  height: 250px;
  position: relative;
}
.line-chart {
  width: 100%;
  height: 250px;
  background-color: #fff;
  position: relative;
}

.eigenvalue {
  position: absolute;
  top: 0;
  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>