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

<template>
  <div class="chartsContent">
    <el-card shadow="never" v-if="type === 'LeafRootOutline'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶根轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'LeafRootRelativeOutline'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶根相对平均轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'LeafTipProfile'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶尖轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </div>
      <div class="line-chart" ref="chart"></div>
    </el-card>
    <el-card shadow="never" v-else-if="type === 'LeafTipRelativeProfile'">
      <div slot="header" class="clearfix">
        <h4 style="color: black; font-size: 16px; font-weight: 700">
          叶尖相对平均轮廓拟合图
        </h4>
        <div style="font-size: 12px; color: #666">
          江西大唐国际新能源有限公司\金华山风电场\01#风机 2024/3/1 11:00:00
        </div>
      </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 = {
        color: ["#9CC5AF", "#C9866B", "#709EA6", "#344453", "#B34138"],
        // title: [
        //   {
        //     text: "",
        //     left: "center",
        //     // subtext: '纯属虚构'
        //   },
        //   {
        //     text: "",
        //     // subtext:'实线',
        //     textStyle: {
        //       color: "#c23531",
        //       // }
        //     },
        //     right: 35,
        //     top: 275,
        //     // subtext: '纯属虚构'
        //   },
        //   {
        //     text: "",
        //     right: 3,
        //     top: 280,
        //     textStyle: {
        //       color: "#c23531",
        //       fontSize: 12,
        //     },
        //   },

        //   {
        //     text: "",
        //     textStyle: {
        //       color: "#2f4554",
        //     },
        //     right: 35,
        //     top: 295,
        //     // subtext: '纯属虚构'
        //   },
        //   {
        //     text: "",
        //     textStyle: {
        //       // fontSize:12,
        //       color: "#d48265",
        //     },
        //     right: 0,
        //     top: 219,
        //     // subtext: '纯属虚构'
        //   },
        //   {
        //     text: "",
        //     textStyle: {
        //       color: "#61a0a8",
        //     },
        //     right: 35,
        //     top: 410,
        //     // subtext: '纯属虚构'
        //   },
        //   {
        //     top: 510,
        //     left: 50,
        //     subtextStyle: {
        //       fontWeight: "bold",
        //     },
        //   },
        // ],
        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: [
            1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000,
            2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011,
            2012, 2013, 2014, 2015, 2016,
          ],
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        series: [
          {
            name: "叶片1根部轮廓",
            type: "line",
            showSymbol: false,
            data: [
              1.63, 1.9, 2.16, 2.55, 2.7, 2.69, 2.65, 2.87, 2.9, 3.1, 3.47,
              3.89, 4.54, 5.33, 5.95, 6.44, 6.94, 7.45, 7.61, 8.44, 9.35, 9.58,
              10.06, 10.6, 10.94, 11.49, 11.03, 11.11,
            ],
          },
          {
            name: "叶片2根部轮廓",
            type: "line",
            showSymbol: false,
            lineStyle: {
              //   type: "dashed",
            },
            data: [
              12.84, 13.03, 13.05, 13.89, 13.72, 12.97, 13.21, 14.02, 14.54,
              15.07, 14.94, 14.55, 13.84, 12.7, 12.06, 11.93, 11.6, 10.84,
              10.26, 10.18, 10.21, 9.86, 10.1, 9.96, 10.25, 11.1, 11.08, 10.7,
            ],
          },

          {
            name: "叶片3根部轮廓",
            showSymbol: false,
            lineStyle: {
              //   type: "dotted",
            },
            type: "line",

            data: [
              7.38, 7.73, 7.46, 7.85, 7.68, 7.45, 6.94, 6.7, 5.98, 6.25, 6.28,
              5.74, 5.51, 5.35, 5.25, 5.03, 4.83, 4.57, 4.58, 4.33, 4.6, 4.42,
              4.38, 3.95, 3.82, 3.7, 3.75, 3.71,
            ],
          },
          {
            name: "平均轮廓",
            showSymbol: false,
            type: "line",
            data: [
              "-",
              "-",
              23.55,
              21.24,
              21.26,
              21.32,
              20.88,
              20.23,
              21.2,
              20.36,
              18.28,
              18.93,
              18.85,
              19.19,
              18.79,
              18.1,
              18.06,
              17.88,
              17.38,
              17.06,
              16.04,
              15.98,
              15.17,
              15.17,
              15.16,
              14.77,
              14.91,
              14.76,
            ],
          },
        ],
      };
      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>