激光测距仪图表全屏展示

src/views/laserRangeFinder/components/CylinderOfTower.vue

@@ -0,0 +1,252 @@
+<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>

src/views/laserRangeFinder/components/PlotOfFit.vue

@@ -0,0 +1,394 @@
+<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",
+            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",
+            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根部轮廓",
+            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: "平均轮廓",
+            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>

src/views/laserRangeFinder/components/descrBox.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-12-09 16:24:28
- * @LastEditTime: 2024-12-10 11:05:40
+ * @LastEditTime: 2024-12-10 16:19:15
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/laserRangeFinder/components/descrBox.vue
@@ -147,6 +147,7 @@
       @current-change="handleCurrentChange"
       highlight-current-row
       style="width: 100%"
+      :max-height="type === 'init' ? '570' : '900'"
     >
       <el-table-column type="index" label="排序"> </el-table-column>
       <el-table-column prop="address" label="场站"> </el-table-column>
@@ -159,7 +160,9 @@
 </template>
 <script>
 export default {
-  props: {},
+  props: {
+    type: "",
+  },
   data() {
     return {
       currentIndex: 0,
@@ -184,6 +187,41 @@ export default {
           name: "王小虎",
           address: "上海市普陀区金沙江路 1516 弄",
         },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
       ],
       currentRow: null, // 用于存储当前选中的行
       currentIndex: 0,

src/views/laserRangeFinder/components/initCharts.vue

@@ -45,7 +45,10 @@ export default {
         Math.floor(Math.random() * 300),
         Math.floor(Math.random() * 300),
       ];
-      const defaultLabels = ["2024/1/1", "2024/1/2", "2024/1/3"];
+      const defaultLabels = Array.from(
+        { length: 100 },
+        (_, index) => `5:${index + 1}`
+      );
       this.updateChart(defaultData, defaultLabels);
 
       // 保存初始样式
@@ -55,26 +58,6 @@ export default {
         backgroundColor: chartDom.style.backgroundColor,
       };
     },
-    addExitFullScreenButton() {
-      const toolbox = {
-        feature: {
-          dataZoom: { yAxisIndex: "none" },
-          restore: {},
-          saveAsImage: {},
-        },
-      };
-      // 添加退出全屏按钮
-      toolbox.feature.myCustomTool4 = {
-        show: true,
-        title: "退出全屏",
-        icon: `image://${require("@/assets/analyse/exitFullScreen.png")}`, // 替换为你自己的图标路径
-        onclick: () => this.exitFullScreen(),
-      };
-      // 更新工具栏配置
-      this.chartInstance.setOption({
-        toolbox,
-      });
-    },
     // 更新图表数据
     updateChart(data, labels) {
       const option = {
@@ -101,6 +84,12 @@ export default {
               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: {
@@ -120,18 +109,64 @@ export default {
         },
         series: [
           {
-            name: "数据系列",
+            name: "叶根轮廓",
+            type: "line",
+            symbol: "none",
+            sampling: "lttb",
+            itemStyle: {
+              normal: {
+                color: "#3A84FF",
+                lineStyle: {
+                  color: "#3A84FF",
+                  width: 1,
+                },
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "rgba(58,132,255,0)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(58,132,255,0.35)",
+                    },
+                  ]),
+                },
+              },
+            },
+            data: Array.from({ length: 100 }, () =>
+              Math.floor(Math.random() * 300)
+            ),
+          },
+          {
+            name: "叶尖轮廓",
             type: "line",
             symbol: "none",
             sampling: "lttb",
-            itemStyle: { color: "rgb(255, 70, 131)" },
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: "rgb(255, 158, 68)" },
-                { offset: 1, color: "rgb(255, 70, 131)" },
-              ]),
+            itemStyle: {
+              normal: {
+                color: "rgba(255,80,124,1)",
+                lineStyle: {
+                  color: "rgba(255,80,124,1)",
+                  width: 1,
+                },
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "rgba(255,80,124,0)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255,80,124,0.35)",
+                    },
+                  ]),
+                },
+              },
             },
-            data: data,
+            data: Array.from({ length: 100 }, () =>
+              Math.floor(Math.random() * 300)
+            ),
           },
         ],
       };
@@ -145,6 +180,7 @@ export default {
       this.$emit("update:currentIndex", newIndex);
     },
     nextRow() {
+      console.log("下一条");
       let newIndex =
         this.currentIndex < this.tableData.length - 1
           ? this.currentIndex + 1
@@ -167,8 +203,7 @@ export default {
         chartDom.style.width = "100vw";
         chartDom.style.height = "100vh";
         chartDom.style.backgroundColor = "#ffffff";
-        // 在工具栏添加退出全屏按钮
-        this.addExitFullScreenButton();
+
         // 进入全屏
         screenfull.request(chartDom);
         this.chartInstance.resize();
@@ -185,7 +220,6 @@ export default {
         screenfull.on("change", this.handleFullScreenChange);
       }
     },
-
     // 处理全屏变化的回调
     handleFullScreenChange() {
       const chartDom = this.$refs.chart;

src/views/laserRangeFinder/index.vue

@@ -9,7 +9,12 @@
               <el-button type="primary" @click.stop="onSubmit" size="small">
                 查询
               </el-button>
-              <el-button type="primary" @click.stop="onSubmit" size="small">
+              <el-button
+                v-if="tabActiveName === 'list'"
+                type="primary"
+                @click.stop="onSubmit"
+                size="small"
+              >
                 导出
               </el-button>
             </div>
@@ -72,8 +77,8 @@
     </div>
     <div class="main-body">
       <div class="data-map">
-        <el-tabs type="border-card">
-          <el-tab-pane>
+        <el-tabs type="border-card" v-model="tabActiveName">
+          <el-tab-pane label="原始图" name="init">
             <span slot="label">
               <img
                 style="width: 30px; height: 20px; display: inline-block"
@@ -90,17 +95,20 @@
                 ></el-empty>
                 <div v-else>
                   <InitCharts></InitCharts>
+                  <CylinderOfTower type="Waveformdiagram"></CylinderOfTower>
+                  <CylinderOfTower type="spectrogram"></CylinderOfTower>
                 </div>
               </div>
               <div class="right">
                 <DescrBox
+                  type="init"
                   ref="initTable"
                   @handleCurrentChange="handleCurrentChange"
                 ></DescrBox>
               </div>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="拟合图">
+          <el-tab-pane label="拟合图" name="copy">
             <span slot="label">
               <img
                 style="width: 25px; height: 20px; display: inline-block"
@@ -115,17 +123,23 @@
                   :image-size="200"
                   v-if="currentRow === null"
                 ></el-empty>
-                <div v-else>拟合图</div>
+                <div v-else>
+                  <PlotOfFit type="LeafRootOutline"></PlotOfFit>
+                  <PlotOfFit type="LeafRootRelativeOutline"></PlotOfFit>
+                  <PlotOfFit type="LeafTipProfile"></PlotOfFit>
+                  <PlotOfFit type="LeafTipRelativeProfile"></PlotOfFit>
+                </div>
               </div>
               <div class="right">
                 <DescrBox
+                  type="copy"
                   ref="copyTable"
                   @handleCurrentChange="handleCurrentChange"
                 ></DescrBox>
               </div>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="数据列表">
+          <el-tab-pane label="数据列表" name="list">
             <span slot="label">
               <img
                 style="width: 20px; height: 20px; display: inline-block"
@@ -155,10 +169,13 @@ import DescrBox from "./components/descrBox.vue";
 import selecttree from "../../components/selecttree.vue";
 import MultilevelTable from "./components/MultilevelTable.vue";
 import InitCharts from "./components/initCharts.vue";
+import CylinderOfTower from "./components/CylinderOfTower.vue";
+import PlotOfFit from "./components/PlotOfFit.vue";
 export default {
   data() {
     return {
       activeNames: ["1"],
+      tabActiveName: "init",
       formInline: {
         companyCode: "", //单位
         unitvalue: "", //风机
@@ -190,9 +207,11 @@ export default {
   },
   components: {
     DescrBox,
+    PlotOfFit,
     MultilevelTable,
     selecttree,
     InitCharts,
+    CylinderOfTower,
   },
   created() {
     this.GETtree();