12.13振动分析全部代码

src/views/health/components/envelopecharts.vue

@@ -6,19 +6,19 @@
         size="small"
         v-model="xiaoval"
         placeholder="请输入查询范围"
-         @input="handleInput"
+        @input="handleInput"
       ></el-input>
       <span>—</span>
       <el-input
         size="small"
         v-model="daval"
         placeholder="请输入查询范围"
-         @input="handleInput"
+        @input="handleInput"
       ></el-input>
       <el-button size="small" @click="chaxun">确定</el-button>
       <div v-if="TZshow" class="eigenvalue">
         <h5>特征值</h5>
-        <p>有效值：{{ this.envelopeList.Xrms }}</p>
+        <p>有效值：{{ this.Xrms }}</p>
         <p>平均值：{{ this.envelopeList.mean_value }}</p>
         <p>最大值：{{ this.envelopeList.max_value }}</p>
         <p>最小值：{{ this.envelopeList.min_value }}</p>
@@ -48,10 +48,27 @@ export default {
       type: Number,
       default: 0,
     },
+    ids: {
+      type: Array,
+      default: () => [],
+    },
+    activeIndex: {
+      type: Number,
+      default: 0,
+    },
     envelopeListTwo: {
       type: Object,
       default: () => ({}),
     },
+    currentRow: {
+      type: Object,
+      default: () => ({}),
+    },
+    
+    windCode: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -89,16 +106,18 @@ export default {
   },
   methods: {
     handleInput() {
-      this.$emit('update:modelValue', {
+      this.$emit("update:modelValue", {
         xiaoval: this.xiaoval,
-        daval: this.daval
+        daval: this.daval,
       });
     },
 
     chaxun() {
+      this.$emit("handleLoading", null, true, this.activeIndex);
       const params = {
-        ids: [67803],
-        windCode: "SKF001_wave",
+        ids: this.ids,
+        windCode: "SKF001",
+        // windCode: this.windCode,
         analysisType: "envelope",
         fmin: this.xiaoval,
         fmax: this.daval,
@@ -113,7 +132,10 @@ export default {
             this.envelopeList.x || this.envelopeListTwo.x || [];
           this.updateChart(defaultData, defaultLabels);
         })
-        .catch((error) => {});
+        .catch((error) => {})
+        .finally(() => {
+          this.$emit("handleLoading", this.currentRow, false, this.activeIndex);
+        });
     },
     initializeChart() {
       // 获取图表容器
@@ -240,12 +262,12 @@ export default {
     },
 
     previousRow() {
-      this.$emit("update-previous-row",3);
+      this.$emit("update-previous-row", 3, this.activeIndex);
     },
 
     // 触发下一条
     nextRow() {
-      this.$emit("update-next-row",3);
+      this.$emit("update-next-row", 3, this.activeIndex);
     },
 
     Show() {
@@ -258,7 +280,7 @@ export default {
 <style lang="scss" scoped>
 .line-chart {
   width: 100%;
-  height: 250px;
+  height: 300px;
 }
 
 .eigenvalue {

src/views/health/components/spectrogramcharts copyy.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div class="FD">
+      <div v-if="TZshow" class="eigenvalue">
+        <h5>特征值</h5>
+        <p>有效值：{{ this.spectrumList.Xrms }}</p>
+        <p>平均值：{{ this.spectrumList.mean_value }}</p>
+        <p>最大值：{{ this.spectrumList.max_value }}</p>
+        <p>最小值：{{ this.spectrumList.min_value }}</p>
+        <p>峰值：{{ this.spectrumList.Xp }}</p>
+        <p>峰峰值：{{ this.spectrumList.Xpp }}</p>
+        <p>波形因子：{{ this.spectrumList.fs }}</p>
+        <p>脉冲指标：{{ this.spectrumList.If }}</p>
+        <p>裕度指标：{{ this.spectrumList.Ce }}</p>
+        <p>偏度指标：{{ this.spectrumList.Cw }}</p>
+        <p>峭度指标：{{ this.spectrumList.Cq }}</p>
+      </div>
+    </div>
+    <!-- ECharts 图表容器 -->
+
+    <div class="line-chart" ref="chart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts"; // 导入 echarts 库
+
+export default {
+  name: "TimedomainCharts", // 组件名称
+  props: {
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+    spectrumList: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: null,
+      TZshow: false,
+      chartInitialized: false, 
+    };
+  },
+  watch: {
+    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
+    chartData(newData) {
+      this.updateChart(newData, this.chartLabels);
+    },
+    chartLabels(newLabels) {
+      this.updateChart(this.chartData, newLabels);
+    },
+    spectrumList: {
+    handler(newValue) {
+      if (this.chartInstance) {
+        this.updateChart(newValue.y, newValue.x); // Update chart only if chartInstance is not null
+      }
+    },
+    deep: true, // Ensure deep watch for nested changes
+  },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.initializeChart(); // 延迟2秒后调用
+      }, 2000); // 2000毫秒，即2秒
+    });
+  },
+  methods: {
+    initializeChart() {
+    // Ensure initialization only happens once
+    if (!this.chartInitialized) {
+      const chartDom = this.$refs.chart;
+      this.chartInstance = echarts.init(chartDom);
+      const defaultData = this.spectrumList.y;
+      const defaultLabels = this.spectrumList.x;
+      this.updateChart(defaultData, defaultLabels);
+      this.chartInitialized = true; // Set flag to true
+    }
+  },
+    // 更新图表数据
+    updateChart(data, labels) {
+      if (!Array.isArray(data) || !Array.isArray(labels)) {
+        console.error("Invalid data or labels passed to updateChart");
+        return;
+      }
+
+      const maxX = Math.max(...labels); // Safe as labels is now verified
+      // 将最大值取整为 2 的倍数
+      const maxAxisValue = Math.ceil(maxX / 200) * 200;
+
+      // 生成刻度，步长为 200
+      const ticks = [];
+      for (let i = 0; i <= maxAxisValue; i += 200) {
+        ticks.push(i);
+      }
+
+      // Chart option configuration
+      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(),
+            },
+            myCustomTool3: {
+              show: true,
+              title: "特征值",
+              icon: `image://${require("@/assets/analyse/10.png")}`,
+              onclick: () => this.Show(),
+            },
+          },
+        },
+        tooltip: {
+      trigger: 'axis',  // Trigger tooltip when hovering over the axis
+      axisPointer: {
+        type: 'cross',  // Cross-line pointer style
+        label: {
+          backgroundColor: '#6a7985', // Tooltip label background color
+        },
+      },
+    },
+        xAxis: {
+          type: "value",
+          name: this.spectrumList.xaxis || "",
+          min: 0,
+          max: maxAxisValue,
+          interval: 200, // 每 200 显示一个刻度
+          data: ticks, // 设置刻度数据
+        },
+        yAxis: {
+          type: "value",
+          name: this.spectrumList.yaxis || "",
+        },
+        series: [
+          {
+            name: "数据系列",
+            type: "line",
+            symbol: "none", // 隐藏数据点
+            data: labels.map((item, index) => [item, data[index]]),
+          },
+        ],
+      };
+
+      this.chartInstance.setOption(option);
+    },
+
+    previousRow() {
+      this.$emit("update-previous-row", 2);
+    },
+
+    // 触发下一条
+    nextRow() {
+      this.$emit("update-next-row",2);
+    },
+
+    Show() {
+      this.TZshow = !this.TZshow;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.line-chart {
+  width: 100%;
+  height: 250px;
+}
+.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>

src/views/health/components/spectrogramcharts.vue

@@ -9,7 +9,7 @@
         <p>最小值：{{ this.spectrumList.min_value }}</p>
         <p>峰值：{{ this.spectrumList.Xp }}</p>
         <p>峰峰值：{{ this.spectrumList.Xpp }}</p>
-        <p>波形因子：{{ this.spectrumList.fs }}</p>
+        <p>波形因子：{{ this.spectrumList.Sf }}</p>
         <p>脉冲指标：{{ this.spectrumList.If }}</p>
         <p>裕度指标：{{ this.spectrumList.Ce }}</p>
         <p>偏度指标：{{ this.spectrumList.Cw }}</p>
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import axios from "axios";
 import * as echarts from "echarts"; // 导入 echarts 库
 
 export default {
@@ -32,16 +33,34 @@ export default {
       type: Number,
       default: 0,
     },
-    spectrumList: {
+    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,
+      spectrumList: {},
     };
   },
   watch: {
@@ -52,54 +71,72 @@ export default {
     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 的变化
     spectrumList: {
       handler(newValue) {
-        this.updateChart(newValue.y, newValue.x); // 更新图表
+        if (this.chartInstance) {
+          this.updateChart(newValue.y, newValue.x); // 只在 chartInstance 初始化后更新图表
+        }
       },
-      deep: true, // 确保监听对象的深层次变化
+      deep: true, // 深度监听
     },
   },
-
   mounted() {
     this.$nextTick(() => {
       setTimeout(() => {
         this.initializeChart(); // 延迟2秒后调用
+        this.getTime();
       }, 2000); // 2000毫秒，即2秒
     });
   },
+
   methods: {
     initializeChart() {
-      // 获取图表容器
       const chartDom = this.$refs.chart;
-      // 初始化图表实例
-      this.chartInstance = echarts.init(chartDom);
+      if (chartDom && !this.chartInstance) {
+        this.chartInstance = echarts.init(chartDom); // Initialize chart only once
+      }
 
-      // 默认图表数据和配置
-      const defaultData = this.spectrumList.y;
-      const defaultLabels = this.spectrumList.x;
-      this.updateChart(defaultData, defaultLabels);
+      // Update the chart with the initial data if available
+      this.$nextTick(() => {
+        if (this.chartInstance) {
+          this.updateChart(this.spectrumList.y, this.spectrumList.x); // 更新图表
+        }
+      });
     },
+
     // 更新图表数据
     updateChart(data, labels) {
-      if (!Array.isArray(data) || !Array.isArray(labels)) {
-        console.error("Invalid data or labels passed to updateChart");
+      if (!this.chartInstance || !labels || !data) return; // Check if chartInstance, labels, or data are not available
+
+      // Ensure labels is an array
+      if (!Array.isArray(labels)) {
+        console.error("Labels are not an array");
         return;
       }
 
-      const maxX = Math.max(...labels); // Safe as labels is now verified
-      // 将最大值取整为 2 的倍数
-      const maxAxisValue = Math.ceil(maxX / 200) * 200;
+      // Ensure data and labels have the same length
+      if (labels.length !== data.length) {
+        console.error("Data and labels length mismatch");
+        return;
+      }
 
-      // 生成刻度，步长为 200
+      const maxX = Math.max(...labels);
+      const maxAxisValue = Math.ceil(maxX / 5) * 5;
       const ticks = [];
-      for (let i = 0; i <= maxAxisValue; i += 200) {
+      for (let i = 0; i <= maxAxisValue; i += 5) {
         ticks.push(i);
       }
 
-      // Chart option configuration
       const option = {
         title: {
-          text: this.spectrumList.title || "",
+          text: this.spectrumList.title,
           left: "center",
         },
         toolbox: {
@@ -128,39 +165,120 @@ export default {
           },
         },
         xAxis: {
-          type: "value",
-          name: this.spectrumList.xaxis || "",
-          min: 0,
-          max: maxAxisValue,
-          interval: 200, // 每 200 显示一个刻度
-          data: ticks, // 设置刻度数据
+          type: "value", // Use numeric x-axis
+          name: this.spectrumList.xaxis, // Set X-axis title
+          nameLocation: "center", // Title position
+          nameTextStyle: {
+            fontSize: 14,
+            color: "#333", // Title color
+            padding: [10, 0, 0, 0], // Padding for title
+          },
+          axisLabel: {
+            formatter: (value) => {
+              return value; // Show values without formatting
+            },
+          },
+          axisTick: {
+            show: true, // Show tick marks
+          },
+          axisLine: {
+            show: true, // Show axis line
+          },
+          data: ticks, // Set tick values
         },
+
         yAxis: {
-          type: "value",
-          name: this.spectrumList.yaxis || "",
+          type: "value", // Y-axis type as numeric
+          name: this.spectrumList.yaxis, // Set Y-axis title
+          nameTextStyle: {
+            fontSize: 14,
+            color: "#333", // Title color
+            padding: [10, 0, 0, 0], // Padding for title
+          },
+          axisLabel: {
+            formatter: (value) => {
+              return value; // Show values without formatting
+            },
+          },
+          axisTick: {
+            show: true, // Show tick marks
+          },
+          axisLine: {
+            show: true, // Show axis line
+          },
+        },
+
+        tooltip: {
+          trigger: "axis",
+          formatter: (params) => {
+            const xValue = params[0].value[0]; // Get x value
+            const yValue = params[0].value[1]; // Get y value
+            return `X: ${xValue}<br/>Y: ${yValue}`;
+          },
+          axisPointer: {
+            type: "line", // Crosshair line
+          },
         },
+
         series: [
           {
             name: "数据系列",
-            type: "line",
-            symbol: "none", // 隐藏数据点
-            data: labels.map((item, index) => [item, data[index]]),
+            type: "line", // Line chart
+            data: labels.map((item, index) => [item, data[index]]), // Map x, y values
+            symbol: "none", // No symbols at data points
+            symbolSize: 8, // Set data point size
+            lineStyle: {
+              color: "rgb(75, 192, 192)", // Line color
+              width: 2, // Line width
+            },
+            itemStyle: {
+              color: "rgb(75, 192, 192)", // Data point color
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
           },
         ],
       };
 
-      this.chartInstance.setOption(option);
+      this.chartInstance.setOption(option); // Update the chart with the new option
+    },
+
+    getTime() {
+      this.$emit("handleLoading", null, true, this.activeIndex);
+      const params = {
+        ids: this.ids,
+        windCode: "SKF001",
+        // windCode: this.windCode,
+        analysisType: "frequency",
+      };
+      axios
+        .post("/WJapi/analysis/frequency", params)
+        .then((res) => {
+          const parsedData = JSON.parse(res.data);
+          // 使用 $set 或者扩展运算符确保 Vue 检测到变化
+          this.spectrumList = { ...parsedData }; // 或者 this.$set(this, 'spectrumList', parsedData);
+          this.$nextTick(() => {
+            if (this.chartInstance) {
+              this.updateChart(this.spectrumList.y, this.spectrumList.x); // 更新图表
+            }
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+        })
+        .finally(() => {
+          this.$emit("handleLoading", this.currentRow, false, this.activeIndex);
+        });
     },
 
     previousRow() {
-      this.$emit("update-previous-row", 2);
+      this.$emit("update-previous-row", 2, this.activeIndex);
     },
 
     // 触发下一条
     nextRow() {
-      this.$emit("update-next-row",2);
+      this.$emit("update-next-row", 2, this.activeIndex);
     },
-
     Show() {
       this.TZshow = !this.TZshow;
     },
@@ -171,7 +289,7 @@ export default {
 <style lang="scss" scoped>
 .line-chart {
   width: 100%;
-  height: 250px;
+  height: 300px;
 }
 .FD {
   width: 100%;

src/views/health/components/tendencycharts.vue

@@ -15,6 +15,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    activeIndex: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -132,7 +136,8 @@ export default {
     series: fieldsToShow.map((field) => ({
       name: fieldNameMap[field] || field,
       type: "line",
-      smooth: true,
+
+      symbol: "none", 
       data: data.map((item) => item[field] || 0),
     })),
   };
@@ -155,6 +160,6 @@ export default {
 <style scoped>
 .line-chart {
   width: 100%; /* Ensures the chart container takes full width */
-  height: 260px; /* Ensures the chart container takes full height of its parent */
+  height: 300px; /* Ensures the chart container takes full height of its parent */
 }
 </style>

src/views/health/components/timedomaincharts copy.vue

@@ -52,144 +52,165 @@ export default {
     chartLabels(newLabels) {
       this.updateChart(this.chartData, newLabels);
     },
+    timeList: {
+      handler(newValue) {
+        if (this.chartInstance) {
+          this.updateChart(newValue.y, newValue.x); // Only update if chartInstance is initialized
+        }
+      },
+      deep: true, // Ensure we watch deep changes in the object
+    },
   },
-
   mounted() {
     this.$nextTick(() => {
-      this.initializeChart();
+      setTimeout(() => {
+        this.initializeChart(); // 延迟2秒后调用
+      }, 2000); // 2000毫秒，即2秒
     });
   },
+
   methods: {
     initializeChart() {
-      // 获取图表容器
-      const chartDom = this.$refs.chart;
-      // 初始化图表实例
-      this.chartInstance = echarts.init(chartDom);
-
-      // 默认图表数据和配置
-      const defaultData = this.timeList.y;
-      const defaultLabels = this.timeList.x;
-      this.updateChart(defaultData, defaultLabels);
-    },
+    const chartDom = this.$refs.chart;
+    if (chartDom && !this.chartInstance) {
+      this.chartInstance = echarts.init(chartDom); // Initialize chart only once
+    }
+
+    // Update the chart with the initial data if available
+    if (this.timeList.y && this.timeList.x) {
+      this.updateChart(this.timeList.y, this.timeList.x);
+    }
+  },
+
     // 更新图表数据
     updateChart(data, labels) {
-      // 获取 x 数组中的最大值
-      const maxX = Math.max(...labels);
-      // 计算最大值的下一个 5 的倍数
-      const maxAxisValue = Math.ceil(maxX / 5) * 5;
-
-      // 生成从 0 到 maxAxisValue 的刻度数组，间隔为 5
-      const ticks = [];
-      for (let i = 0; i <= maxAxisValue; i += 5) {
-        ticks.push(i);
-      }
-      const option = {
-        title: {
-          text: this.timeList.title,
-          left: "center",
+  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(),
         },
-        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(),
-            },
-          },
+        myCustomTool2: {
+          show: true,
+          title: "下一条",
+          icon: `image://${require("@/assets/analyse/09.png")}`,
+          onclick: () => this.nextRow(),
         },
-        xAxis: {
-          type: "value", // 使用数值型 x 轴，确保每个 x 值都有展示
-          name: this.timeList.xaxis, // 设置 X 轴标题
-          nameLocation: "center", // 标题位置：可选 "start" | "center" | "end"
-          nameTextStyle: {
-            fontSize: 14,
-            color: "#333", // 标题颜色
-            padding: [10, 0, 0, 0], // 上、右、下、左的间距
-          },
-          min: 0, // X 轴最小值
-          max: maxAxisValue, // X 轴最大值为计算的最大值
-          interval: 5, // X 轴每 5 个单位显示一个刻度
-          axisLabel: {
-            formatter: (value) => {
-              // 格式化显示刻度为 5 的倍数
-              return value;
-            },
-          },
-          axisTick: {
-            show: true, // 显示刻度线
-          },
-          axisLine: {
-            show: true, // 显示轴线
-          },
-          data: ticks, // 设置刻度
+        myCustomTool3: {
+          show: true,
+          title: "特征值",
+          icon: `image://${require("@/assets/analyse/10.png")}`,
+          onclick: () => this.Show(),
         },
-
-        yAxis: {
-          type: "value",
-          name: this.timeList.yaxis,
+      },
+    },
+    xAxis: {
+      type: "value", // Use numeric x-axis
+      name: this.timeList.xaxis, // Set X-axis title
+      nameLocation: "center", // Title position
+      nameTextStyle: {
+        fontSize: 14,
+        color: "#333", // Title color
+        padding: [10, 0, 0, 0], // Padding for title
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value; // Show values without formatting
         },
+      },
+      axisTick: {
+        show: true, // Show tick marks
+      },
+      axisLine: {
+        show: true, // Show axis line
+      },
+      data: ticks, // Set tick values
+    },
 
-        tooltip: {
-          trigger: "axis",
-          formatter: (params) => {
-            // 获取原始的 x 数值和对应的 y 值
-            const xValue = params[0].value[0]; // 获取原始的 x 数值
-            const yValue = params[0].value[1]; // 获取对应的 y 数值
-            return `X: ${xValue}<br/>Y: ${yValue}`; // 显示原始的 x 和 y 值
-          },
-          axisPointer: {
-            type: "line", // 显示十字线
-          },
+    yAxis: {
+      type: "value", // Y-axis type as numeric
+      name: this.timeList.yaxis, // Set Y-axis title
+      // nameLocation: "center",
+      nameTextStyle: {
+        fontSize: 14,
+        color: "#333", // Title color
+        padding: [10, 0, 0, 0], // Padding for title
+      },
+      axisLabel: {
+        formatter: (value) => {
+          return value; // Show values without formatting
         },
+      },
+      axisTick: {
+        show: true, // Show tick marks
+      },
+      axisLine: {
+        show: true, // Show axis line
+      },
+    },
 
-        series: [
-          {
-            name: "数据系列",
-            type: "line", // 折线图
-            data: labels.map((item, index) => [item, data[index]]), // 修改为 [x, y] 数组
-            smooth: true,
-            symbol: "none", // 数据点的样式
-            symbolSize: 8, // 数据点的大小
-            lineStyle: {
-              color: "rgb(75, 192, 192)", // 折线颜色
-              width: 2, // 线条宽度
-            },
-            itemStyle: {
-              color: "rgb(75, 192, 192)", // 数据点颜色
-              borderColor: "#fff",
-              borderWidth: 2,
-            },
-          },
-        ],
-      };
-
-      // 使用更新的配置更新图表
-      this.chartInstance.setOption(option);
+    tooltip: {
+      trigger: "axis",
+      formatter: (params) => {
+        const xValue = params[0].value[0]; // Get x value
+        const yValue = params[0].value[1]; // Get y value
+        return `X: ${xValue}<br/>Y: ${yValue}`;
+      },
+      axisPointer: {
+        type: "line", // Crosshair line
+      },
     },
 
+    series: [
+      {
+        name: "数据系列",
+        type: "line", // Line chart
+        data: labels.map((item, index) => [item, data[index]]), // Map x, y values
+        symbol: "none", // No symbols at data points
+        symbolSize: 8, // Set data point size
+        lineStyle: {
+          color: "rgb(75, 192, 192)", // Line color
+          width: 2, // Line width
+        },
+        itemStyle: {
+          color: "rgb(75, 192, 192)", // Data point color
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+      },
+    ],
+  };
+
+  this.chartInstance.setOption(option); // Update the chart with the new option
+},
+
+
     previousRow() {
-      this.$emit("update-previous-row");
+      this.$emit("update-previous-row", 1);
     },
 
     // 触发下一条
     nextRow() {
-      this.$emit("update-next-row");
+      this.$emit("update-next-row", 1);
     },
 
     Show() {

src/views/health/components/timedomaincharts.vue

@@ -18,11 +18,12 @@
     </div>
     <!-- ECharts 图表容器 -->
 
-    <div class="line-chart" ref="chart"></div>
+    <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 {
@@ -32,16 +33,37 @@ export default {
       type: Number,
       default: 0,
     },
-    timeList: {
+    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: {
@@ -52,47 +74,55 @@ export default {
     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) {
-        this.updateChart(newValue.y, newValue.x); // 更新图表
+        if (this.chartInstance) {
+          this.updateChart(newValue.y, newValue.x); // 只在 chartInstance 初始化后更新图表
+        }
       },
-      deep: true, // 确保监听对象的深层次变化
-      
+      deep: true, // 深度监听
     },
-
   },
   mounted() {
-  this.$nextTick(() => {
-    setTimeout(() => {
-      this.initializeChart(); // 延迟2秒后调用
-    }, 2000); // 2000毫秒，即2秒
-  });
-},
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.initializeChart(); // 延迟2秒后调用
+        this.getTime();
+      }, 500); // 2000毫秒，即2秒
+    });
+  },
 
   methods: {
     initializeChart() {
-      // 获取图表容器
       const chartDom = this.$refs.chart;
-      // 初始化图表实例
-      this.chartInstance = echarts.init(chartDom);
+      if (chartDom && !this.chartInstance) {
+        this.chartInstance = echarts.init(chartDom); // Initialize chart only once
+      }
 
-      // 默认图表数据和配置
-      const defaultData = this.timeList.y;
-      const defaultLabels = this.timeList.x;
-      this.updateChart(defaultData, defaultLabels);
+      // Update the chart with the initial data if available
+      if (this.timeList.y && this.timeList.x) {
+        this.updateChart(this.timeList.y, this.timeList.x);
+      }
     },
+
     // 更新图表数据
     updateChart(data, labels) {
-      // 获取 x 数组中的最大值
+      if (!this.chartInstance) return; // Check if chartInstance is available
+
       const maxX = Math.max(...labels);
-      // 计算最大值的下一个 5 的倍数
       const maxAxisValue = Math.ceil(maxX / 5) * 5;
-
-      // 生成从 0 到 maxAxisValue 的刻度数组，间隔为 5
       const ticks = [];
       for (let i = 0; i <= maxAxisValue; i += 5) {
         ticks.push(i);
       }
+
       const option = {
         title: {
           text: this.timeList.title,
@@ -124,64 +154,75 @@ export default {
           },
         },
         xAxis: {
-          type: "value", // 使用数值型 x 轴，确保每个 x 值都有展示
-          name: this.timeList.xaxis, // 设置 X 轴标题
-          nameLocation: "center", // 标题位置：可选 "start" | "center" | "end"
+          type: "value", // Use numeric x-axis
+          name: this.timeList.xaxis, // Set X-axis title
+          nameLocation: "center", // Title position
           nameTextStyle: {
             fontSize: 14,
-            color: "#333", // 标题颜色
-            padding: [10, 0, 0, 0], // 上、右、下、左的间距
+            color: "#333", // Title color
+            padding: [10, 0, 0, 0], // Padding for title
           },
-          // min: 0, // X 轴最小值
-          // max: maxAxisValue, // X 轴最大值为计算的最大值
-          // interval: 5, // X 轴每 5 个单位显示一个刻度
           axisLabel: {
             formatter: (value) => {
-              // 格式化显示刻度为 5 的倍数
-              return value;
+              return value; // Show values without formatting
             },
           },
           axisTick: {
-            show: true, // 显示刻度线
+            show: true, // Show tick marks
           },
           axisLine: {
-            show: true, // 显示轴线
+            show: true, // Show axis line
           },
-          data: ticks, // 设置刻度
+          data: ticks, // Set tick values
         },
 
         yAxis: {
-          type: "value",
-          name: this.timeList.yaxis,
+          type: "value", // Y-axis type as numeric
+          name: this.timeList.yaxis, // Set Y-axis title
+          // nameLocation: "center",
+          nameTextStyle: {
+            fontSize: 14,
+            color: "#333", // Title color
+            padding: [10, 0, 0, 0], // Padding for title
+          },
+          axisLabel: {
+            formatter: (value) => {
+              return value; // Show values without formatting
+            },
+          },
+          axisTick: {
+            show: true, // Show tick marks
+          },
+          axisLine: {
+            show: true, // Show axis line
+          },
         },
 
         tooltip: {
           trigger: "axis",
           formatter: (params) => {
-            // 获取原始的 x 数值和对应的 y 值
-            const xValue = params[0].value[0]; // 获取原始的 x 数值
-            const yValue = params[0].value[1]; // 获取对应的 y 数值
-            return `X: ${xValue}<br/>Y: ${yValue}`; // 显示原始的 x 和 y 值
+            const xValue = params[0].value[0]; // Get x value
+            const yValue = params[0].value[1]; // Get y value
+            return `X: ${xValue}<br/>Y: ${yValue}`;
           },
           axisPointer: {
-            type: "line", // 显示十字线
+            type: "line", // Crosshair line
           },
         },
 
         series: [
           {
             name: "数据系列",
-            type: "line", // 折线图
-            data: labels.map((item, index) => [item, data[index]]), // 修改为 [x, y] 数组
-            // smooth: true,
-            symbol: "none", // 数据点的样式
-            symbolSize: 8, // 数据点的大小
+            type: "line", // Line chart
+            data: labels.map((item, index) => [item, data[index]]), // Map x, y values
+            symbol: "none", // No symbols at data points
+            symbolSize: 8, // Set data point size
             lineStyle: {
-              color: "rgb(75, 192, 192)", // 折线颜色
-              width: 2, // 线条宽度
+              color: "rgb(75, 192, 192)", // Line color
+              width: 2, // Line width
             },
             itemStyle: {
-              color: "rgb(75, 192, 192)", // 数据点颜色
+              color: "rgb(75, 192, 192)", // Data point color
               borderColor: "#fff",
               borderWidth: 2,
             },
@@ -189,17 +230,35 @@ export default {
         ],
       };
 
-      // 使用更新的配置更新图表
-      this.chartInstance.setOption(option);
+      this.chartInstance.setOption(option); // Update the chart with the new 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.$emit("update-previous-row", 1, this.activeIndex);
     },
 
     // 触发下一条
     nextRow() {
-      this.$emit("update-next-row",1);
+      this.$emit("update-next-row", 1, this.activeIndex);
     },
 
     Show() {

src/views/health/vibration copy.vue

@@ -28,36 +28,51 @@
     <div class="searchbox">
       <p>
         单位：
-        <el-select v-model="company" size="small" placeholder="请选择">
-          <el-option
-            v-for="item in companyoptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option>
-        </el-select>
+        <selecttree
+          style="width: 220px"
+          placeholder="请选择上级单位"
+          :list="parentOpt"
+          type="1"
+          v-model="companyCode"
+          @change="parentChange"
+          :defaultParentProps="{
+            children: 'children',
+            label: 'companyName',
+            value: 'codeNumber',
+          }"
+        >
+        </selecttree>
       </p>
       <p>
         风机：
-        <el-select v-model="unitvalue" size="small" placeholder="请选择">
+        <el-select
+          v-model="unitvalue"
+          @change="getchedian"
+          size="small"
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in unitoptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            :key="item.engineCode"
+            :label="item.engineName"
+            :value="item.engineCode"
           >
           </el-option>
         </el-select>
       </p>
       <p>
         测点：
-        <el-select v-model="monitoringvalue" size="small" placeholder="请选择">
+        <el-select
+          v-model="monitoringvalue"
+          size="small"
+          clearable
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in monitoringoptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            :key="item.detectionPointEn"
+            :label="item.detectionPointCn"
+            :value="item.detectionPointEn"
           >
           </el-option>
         </el-select>
@@ -74,7 +89,9 @@
         >
         </el-date-picker>
       </p>
-      <el-button type="primary" size="small">查询</el-button>
+      <el-button type="primary" size="small" @click="conditions"
+        >查询</el-button
+      >
       <el-button size="small">导出</el-button>
     </div>
     <div class="main-body">
@@ -82,7 +99,7 @@
         <div
           class="chart-area"
           v-for="(item, index) in fourList"
-          :key="item.id"
+          :key="item.index"
         >
           <div class="dialog-actions">
             <p>{{ item.name }}</p>
@@ -112,52 +129,67 @@
             }"
           >
             <p>测点路径:</p>
-            <P><span>采样频率:</span><span>采样时间:</span></P>
-            <!-- <div
-              :id="item.id"
-              class="line-chart"
-              style="width: 100%; height: 260px"
+            <P
+              ><span>采样频率:</span><span>采样时间:{{ samplingTime }}</span></P
             >
-              <div class="eigenvalue">
-                <h5>特征值</h5>
-                <p>有效值：</p>
-                <p>平均值：</p>
-                <p>最大值：</p>
-                <p>最小值：</p>
-                <p>峰值：</p>
-                <p>峰峰值：</p>
-                <p>波形因子：</p>
-                <p>脉冲指标：</p>
-                <p>裕度指标：</p>
-                <p>偏度指标：</p>
-                <p>峭度指标：</p>
-              </div>
-            </div> -->
-
-            <!-- 时域图 -->
-            <timedomaincharts></timedomaincharts>
-            <!-- 频谱图 -->
-            <!-- <spectrogramcharts></spectrogramcharts> -->
-            <!-- 包络图 -->
-            <!-- <envelopecharts></envelopecharts> -->
-            <!-- 趋势图 -->
-            <!-- <tendencycharts></tendencycharts> -->
+            <div v-if="item.name === '时域图'">
+              <timedomaincharts
+                :timeList="timeList"
+                :currentIndex="currentIndex"
+                :tableDataList="tableDataList"
+                @update:currentIndex="handleCurrentIndexUpdate"
+                @update-previous-row="goToPreviousRow"
+                @update-next-row="goToNextRow"
+              ></timedomaincharts>
+            </div>
+            <div v-if="item.name === '频谱图'">
+              <spectrogramcharts
+                :spectrumList="spectrumList"
+                :currentIndex="currentIndex"
+                :tableDataList="tableDataList"
+                @update:currentIndex="handleCurrentIndexUpdate"
+                @update-previous-row="goToPreviousRow"
+                @update-next-row="goToNextRow"
+              ></spectrogramcharts>
+            </div>
+            <div v-if="item.name === '包络谱图'">
+              <envelopecharts
+                :envelopeListTwo="envelopeListTwo"
+                :currentIndex="currentIndex"
+                :tableDataList="tableDataList"
+                @update:currentIndex="handleCurrentIndexUpdate"
+                @update-previous-row="goToPreviousRow"
+                @update-next-row="goToNextRow"
+                @update:modelValue="handleModelUpdate"
+              ></envelopecharts>
+            </div>
+            <div v-if="item.name === '趋势图'">
+              <tendencycharts :qsList="qsList"></tendencycharts>
+            </div>
           </div>
         </div>
       </div>
       <div class="data-origin">
         <el-table
-          highlight-current-row
-          @current-change="handleCurrentChange"
           ref="singleTable"
-          :data="tableData"
+          :data="tableDataList"
+          :current-row-key="currentIndex"
+          @current-change="handleCurrentChange"
+          highlight-current-row
           style="width: 100%"
         >
           <el-table-column type="index" label="排序"> </el-table-column>
-          <el-table-column prop="name" label="时间"> </el-table-column>
-          <el-table-column prop="address" label="测点名称"> </el-table-column>
-          <el-table-column prop="address" label="场站"> </el-table-column>
-          <el-table-column prop="address" label="风机"> </el-table-column>
+          <el-table-column prop="timeStamp" label="时间"> </el-table-column>
+          <el-table-column prop="mesurePointName" label="测点名称">
+            <template slot-scope="scope">
+              {{ getDetectionPointCn(scope.row.mesurePointName) }}
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="companyName" label="场站">
+            {{ getCompanyLabel(scope.row.companyCode) }}
+          </el-table-column> -->
+          <el-table-column prop="windTurbineNumber" label="风机" width="80px">
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -165,182 +197,289 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
+import {
+  getSysOrganizationAuthTreeByRoleId,
+  windEngineGrouPage,
+  queryDetectionDic,
+} from "@/api/ledger.js";
+import selecttree from "../../components/selecttree.vue";
+
 import envelopecharts from "./components/envelopecharts.vue";
 import spectrogramcharts from "./components/spectrogramcharts.vue";
 import tendencycharts from "./components/tendencycharts.vue";
 import timedomaincharts from "./components/timedomaincharts.vue";
-
+import axios from "axios";
 export default {
   components: {
     envelopecharts,
     spectrogramcharts,
     tendencycharts,
     timedomaincharts,
+    selecttree,
   },
   data() {
     return {
-      company: "",
-      companyoptions: [],
       unitvalue: "",
       unitoptions: [],
       monitoringvalue: "",
-      monitoringoptions: [],
-      timevalue: "",
-      tableData: [
-        { name: "2024-11-01", address: "Location A" },
-        { name: "2024-11-02", address: "Location B" },
-        { name: "2024-11-03", address: "Location C" },
+      monitoringoptions: [
+        // {
+        //   detectionPointEn: "name",
+        //   detectionPointCn: "中文",
+        // },
       ],
-
       fourList: [],
       currentRow: null, // 用于存储当前选中的行
       currentIndex: 0,
       isChartVisible: false,
+      parentOpt: [],
+      defaultdata: {},
+      companyCode: "",
+      maplist: {},
+      timevalue: [], // 绑定 el-date-picker 的值
+      startTime: "", // 开始时间
+      endTime: "", // 结束时间
+      tableDataList: [
+        // { ids: 1, mesurePointName: "name" },
+        // { ids: 2, mesurePointName: "22" },
+        // { ids: 3, mesurePointName: "22" },
+      ],
+      samplingTime: "", // 采样时间
+      timeList: {},
+      spectrumList: {},
+      envelopeList: {},
+      qsList: {},
+      envelopeListTwo: {},
     };
   },
 
+  created() {
+    this.GETtree();
+  },
+  watch: {
+    // 监听 timeList 的变化
+    timeList(newTimeList) {
+      if (newTimeList && newTimeList.length > 0) {
+        // 当 timeList 不为空时，触发 ECharts 图表生成
+        this.generateChart(1); // 或者根据具体逻辑来生成对应的图表
+      }
+    },
+  },
+
   methods: {
-    // 当前所在行高亮提示
-    setCurrent(row) {
-      this.$refs.singleTable.setCurrentRow(row);
+    getDetectionPointCn(detectionPointEn) {
+      const point = this.monitoringoptions?.find(
+        (option) => option.detectionPointEn === detectionPointEn
+      );
+      return point ? point?.detectionPointCn : null; // 如果没有找到对应项，返回 null
     },
-    // 当前单选
-    handleCurrentChange(val) {
-      this.currentRow = val;
-      const index = this.tableData.indexOf(val);
-      this.currentIndex = index; // 更新当前索引
+
+    // 获取风场
+    async GETtree() {
+      const res = await getSysOrganizationAuthTreeByRoleId();
+      const treedata = res.data;
+      const processedData = this.processTreeData(treedata);
+      this.parentOpt = processedData;
+      this.defaultdata = res.data[0];
     },
 
-    // renderChart(containerId, data = []) {
-    //   // 获取特定的图表容器
-    //   const chartDom = document.getElementById(containerId);
-    //   if (!chartDom) {
-    //     console.error(`Container with id ${containerId} not found`);
-    //     return;
-    //   }
-
-    //   // 检查是否已经存在 ECharts 实例，如果存在则销毁它
-    //   if (chartDom.__echarts_instance__) {
-    //     echarts.dispose(chartDom);
-    //   }
-
-    //   // 初始化 ECharts 实例
-    //   const myChart = echarts.init(chartDom);
-
-    //   // 定义默认的数据
-    //   let base = +new Date(1968, 9, 3);
-    //   let oneDay = 24 * 3600 * 1000;
-    //   let date = [];
-    //   let defaultData = [Math.random() * 300];
-    //   for (let i = 1; i < 200; i++) {
-    //     const now = new Date((base += oneDay));
-    //     date.push(
-    //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
-    //     );
-    //     defaultData.push(
-    //       Math.round((Math.random() - 0.5) * 20 + defaultData[i - 1])
-    //     );
-    //   }
-
-    //   // 使用传入的数据或默认数据
-    //   const chartData = data.length > 0 ? data : defaultData;
-
-    //   // 配置选项
-    //   const option = {
-    //     toolbox: {
-    //       feature: {
-    //         dataZoom: { yAxisIndex: "none" },
-    //         restore: {},
-    //         saveAsImage: {},
-    //         myCustomTool: {
-    //           show: true,
-    //           title: "上一条",
-    //           icon: `image://${require("@/assets/analyse/08.png")}`,
-    //           onclick: () => this.previousRow(containerId), // 传递当前图表的 ID
-    //         },
-    //         myCustomTool2: {
-    //           show: true,
-    //           title: "下一条",
-    //           icon: `image://${require("@/assets/analyse/09.png")}`,
-    //           onclick: () => this.nextRow(containerId), // 传递当前图表的 ID
-    //         },
-    //         myCustomTool3: {
-    //           show: true,
-    //           title: "特征值",
-    //           icon: `image://${require("@/assets/analyse/10.png")}`,
-    //           onclick: () => alert("自定义按钮被点击！"),
-    //         },
-    //       },
-    //     },
-    //     xAxis: {
-    //       type: "category",
-    //       boundaryGap: false,
-    //       data: date,
-    //     },
-    //     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: { 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)" },
-    //           ]),
-    //         },
-    //         data: chartData,
-    //       },
-    //     ],
-    //   };
-
-    //   // 设置图表选项
-    //   myChart.setOption(option);
-
-    //   // 监听窗口大小变化，调整图表大小
-    //   window.addEventListener("resize", () => {
-    //     myChart.resize();
-    //   });
-    // },
-
-    // 上一条
-    previousRow(chartId) {
-      if (this.currentIndex > 0) {
-        this.currentIndex--;
+    parentChange(data) {
+      this.maplist = data;
+      this.maplistArr = data;
+      let paramsData = {
+        fieldCode: this.maplist.codeNumber,
+        pageNum: 1,
+        pageSize: 99,
+      };
+      this.unitvalue = "";
+      // 获取风机
+      windEngineGrouPage(paramsData).then((res) => {
+        this.unitoptions = res.data.list;
+      });
+
+      console.log(data, "parentChange");
+      if (data.codeType === "field") {
+        if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
+          return;
+        }
       } else {
-        this.currentIndex = this.tableData.length - 1;
+        const dataMapList = data.children;
+        dataMapList.forEach((element) => {
+          console.log(element);
+          if (
+            this.parseCoordinates(element.longitudeAndLatitudeString).length >
+              0 &&
+            element.codeType === "field"
+          ) {
+            return;
+          }
+        });
       }
-      this.selectRow(chartId);
     },
+    processTreeData(treeData) {
+      const processedData = [];
+      function processNode(node) {
+        if (node.codeType === "field") {
+          node.companyName = node.fieldName;
+        }
+        if (node.children && node.children.length > 0) {
+          node.children.forEach((child) => {
+            processNode(child);
+          });
+        }
+      }
+      treeData.forEach((root) => {
+        processNode(root);
+        processedData.push(root);
+      });
+      return processedData;
+    },
+    parseCoordinates(input) {
+      if (input && typeof input === "string") {
+        return input.split(",").map(Number);
+      }
+      // debugger;
+      return [];
+    },
+    // 获取测点
+    getchedian(value) {
+      queryDetectionDic({ engineCodes: value }).then((res) => {
+        this.monitoringoptions = res.data;
+      });
+    },
+
+    handleModelUpdate(data) {
+      // 将子组件的值作为查询参数传递给查询接口
+      data;
+      this.xiaoval = data.xiaoval;
+      this.daval = data.daval;
+    },
+
+    // 上一条数据
+    goToPreviousRow(type) {
+      if (this.tableDataList.length === 0) return;
+      this.currentIndex =
+        this.currentIndex === 0
+          ? this.tableDataList.length - 1
+          : this.currentIndex - 1;
+
+      const currentRow = this.tableDataList[this.currentIndex];
+      this.setCurrent(currentRow);
 
-    // 下一条
-    nextRow(chartId) {
-      if (this.currentIndex < this.tableData.length - 1) {
-        this.currentIndex++;
+      const params = {
+        ids: currentRow.id,
+        windCode: "SKF001",
+      };
+
+      if (type === 1) {
+        // For type 1, fetch time domain data
+        params.analysisType = "time";
+        axios
+          .post("/WJapi/analysis/time", params)
+          .then((res) => {
+            this.timeList = JSON.parse(res.data);
+            console.log("Time List Data:", this.timeList);
+          })
+          .catch((error) => {
+            console.error("Error fetching time domain data:", error);
+          });
+      } else if (type === 2) {
+        // For type 2, fetch frequency domain data
+        params.analysisType = "frequency";
+        axios
+          .post("/WJapi/analysis/frequency", params)
+          .then((res) => {
+            this.spectrumList = JSON.parse(res.data);
+            console.log("Spectrum Data:", this.spectrumList);
+          })
+          .catch((error) => {
+            console.error("Error fetching frequency domain data:", error);
+          });
+      } else if (type === 3) {
+        // For type 3, fetch envelope analysis data
+        params.analysisType = "envelope";
+        params.fmin = this.xiaoval; // 最小频率参数
+        params.fmax = this.daval; // 最大频率参数
+        axios
+          .post("/WJapi/analysis/envelope", params)
+          .then((res) => {
+            this.envelopeListTwo = JSON.parse(res.data);
+            console.log("Envelope Analysis Data:", this.envelopeListTwo);
+          })
+          .catch((error) => {
+            console.error("Error fetching envelope analysis data:", error);
+          });
       } else {
-        this.currentIndex = 0;
+        console.warn("Unknown type provided:", type);
       }
-      this.selectRow(chartId);
     },
-    selectRow(chartId) {
-      const row = this.tableData[this.currentIndex];
-      this.handleCurrentChange(row);
-      this.setCurrent(row);
-      // this.$nextTick(() => {
-      //   this.renderChart(chartId);
-      // });
+
+    // 下一条数据，向后循环
+    goToNextRow(type) {
+      if (this.tableDataList.length === 0) return;
+      this.currentIndex =
+        this.currentIndex === this.tableDataList.length - 1
+          ? 0
+          : this.currentIndex + 1;
+      const currentRow = this.tableDataList[this.currentIndex];
+      this.setCurrent(currentRow);
+      const params = {
+        ids: currentRow.id,
+        windCode: "SKF001",
+      };
+
+      if (type === 1) {
+        // For type 1, fetch time domain data
+        params.analysisType = "time";
+        axios
+          .post("/WJapi/analysis/time", params)
+          .then((res) => {
+            this.timeList = JSON.parse(res.data);
+            console.log("Time List Data:", this.timeList);
+          })
+          .catch((error) => {});
+      } else if (type === 2) {
+        // For type 2, fetch frequency domain data
+        params.analysisType = "frequency";
+        axios
+          .post("/WJapi/analysis/frequency", params)
+          .then((res) => {
+            this.spectrumList = JSON.parse(res.data);
+            console.log("Spectrum Data:", this.spectrumList);
+          })
+          .catch((error) => {});
+      } else if (type === 3) {
+        // Type 3: 获取包络分析数据
+        params.analysisType = "envelope";
+        params.fmin = this.xiaoval; // 最小频率参数
+        params.fmax = this.daval; // 最大频率参数
+        axios
+          .post("/WJapi/analysis/envelope", params)
+          .then((res) => {
+            this.envelopeListTwo = JSON.parse(res.data);
+            console.log("Envelope Analysis Data:", this.envelopeListTwo);
+          })
+          .catch((error) => {
+            console.error("Error fetching envelope analysis data:", error);
+          });
+      }
+    },
+
+    // 更新父组件的 currentIndex
+    handleCurrentIndexUpdate(newIndex) {
+      this.currentIndex = newIndex;
+      this.handleCurrentChange(newIndex);
+    },
+    // 当前所在行高亮提示
+    setCurrent(row) {
+      this.$refs.singleTable.setCurrentRow(row);
+    },
+    // 当前单选
+    handleCurrentChange(val) {
+      this.currentRow = val;
+      const index = this.tableDataList.indexOf(val);
+      this.currentIndex = index; // 更新当前索引
+      console.log(this.currentIndex);
     },
 
     generate(type) {
@@ -349,44 +488,124 @@ export default {
         return;
       }
       const nameMap = {
-        1: "时域图",
-        2: "频谱图",
-        3: "包络谱图",
+        1: "时域图", // Time Domain Chart
+        2: "频谱图", // Spectrogram Chart
+        3: "包络谱图", // Envelope Spectrum Chart
       };
-      if (nameMap[type]) {
+
+      const chartName = nameMap[type];
+      if (chartName) {
         const newItem = {
-          name: nameMap[type],
+          name: chartName,
           isMinimized: false,
-          id: `chart-${Date.now()}`, // 使用唯一 ID
+          id: `chart-${Date.now()}`,
         };
         this.fourList.push(newItem);
       }
-      // this.$nextTick(() => {
-      //   const newChart = this.fourList[this.fourList.length - 1];
-      //   this.renderChart(newChart.id); // 为新图表渲染数据
-      // });
+
+      // API call for specific types
+      if (type === "1") {
+        // Time Domain Chart
+        const params = {
+          ids: [this.currentRow.id],
+          // ids: [      67803],
+          windCode: "SKF001",
+          analysisType: "time",
+        };
+        axios
+          .post("/WJapi/analysis/time", params)
+          .then((res) => {
+            this.timeList = JSON.parse(res.data);
+            console.log("Time List Data:", this.timeList);
+          })
+          .catch((error) => {});
+      } else if (type === "2") {
+        // Spectrogram Chart
+        const params = {
+          ids: [this.currentRow.id],
+
+          windCode: "SKF001",
+          analysisType: "frequency",
+        };
+        axios
+          .post("/WJapi/analysis/frequency", params)
+          .then((res) => {
+            this.spectrumList = JSON.parse(res.data);
+            console.log("Spectrum Data:", this.spectrumList);
+          })
+          .catch((error) => {});
+      }
     },
+
     tendency() {
-      // 判断 tableData 是否为空，若为空则不进行图表生成
-      if (this.tableData.length === 0) {
+      if (this.tableDataList.length === 0) {
         this.$message.warning("数据为空，无法生成图表");
-        return; // 直接返回，不执行后续逻辑
+        return;
       }
-
-      // 设置 isChartVisible 为 true，显示 <charts> 组件
-      this.isChartVisible = true;
-
       const newItem = {
         name: "趋势图",
         isMinimized: false,
-        id: `chart-${Date.now()}`, // 唯一 ID
+        id: `chart-${Date.now()}`,
+      };
+      const params = {
+        ids: this.tableDataList.map((item) => item.id),
+        windCode: "SKF001",
+        analysisType: "trend",
+      };
+
+      axios
+        .post("/WJapi/analysis/trend", params)
+        .then((res) => {
+          this.qsList = JSON.parse(res.data);
+          this.fourList.push(newItem);
+          console.log(res, "-------------------");
+        })
+        .catch((error) => {});
+    },
+
+    conditions() {
+      // const params = {
+      //   windCode: this.maplist.codeNumber,
+      //   windTurbineNumberList: this.unitvalue,
+      //   mesureNameList: this.monitoringvalue,
+      //   startTime: this.$formatDateTWO(this.timevalue[0]),
+      //   endTime: this.$formatDateTWO(this.timevalue[1]),
+      // };
+
+      const params = {
+        endTime: "2024-07-02 00:00:00",
+        mesureNameList: ["gearbox_input_end_radial_vibration"],
+        startTime: "2024-07-01 00:00:00",
+        windCode: "SKF001",
+        windTurbineNumberList: ["F004"],
+      };
+      const areParamsValid = (params) => {
+        return (
+          params.endTime &&
+          params.startTime &&
+          params.mesureNameList?.length > 0 &&
+          params.windCode &&
+          params.windTurbineNumberList?.length > 0
+        );
       };
-      this.fourList.push(newItem); // 将新图表添加到列表
 
-      // this.$nextTick(() => {
-      //   const lastChart = this.fourList[this.fourList.length - 1];
-      //   this.renderChart(lastChart.id); // 渲染最新添加的图表
-      // });
+      if (areParamsValid(params)) {
+        axios
+          .post("/WZLapi/waveData/getMesureData", params)
+          .then((res) => {
+            this.tableDataList = res.data.datas;
+            console.log(this.tableDataList, "-----------------");
+          })
+          .catch((error) => {
+            console.error("Error:", error);
+            // Handle the error here
+          });
+      } else {
+        this.$message({
+          message: "请填写全部条件",
+          type: "warning",
+        });
+      }
     },
 
     // 缩小
@@ -409,7 +628,6 @@ export default {
       this.fourList.splice(index, 1);
       console.log("3");
     },
-
     zhankai() {
       this.fourList.forEach((item) => {
         item.isMinimized = false;
@@ -476,7 +694,7 @@ export default {
 }
 
 .subject {
-  height: 280px;
+  height: 300px;
   transition: all 0.3s ease;
   padding: 0 10px;
   p {
@@ -487,10 +705,11 @@ export default {
 .main-body {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
   .data-map {
     width: 60%;
-    height: 620px;
-    overflow-y: auto;
+    // height: 620px;
+    // overflow-y: auto;
     .chart-area {
       margin-bottom: 10px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
@@ -511,27 +730,4 @@ export default {
   height: 0px; /* Adjust height when minimized */
   overflow: hidden;
 }
-
-#main {
-  width: 100%;
-  height: 280px;
-}
-
-.line-chart {
-  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/ledger/modules.vue

@@ -2,6 +2,7 @@
   <div class="global-variable">
     <h2 class="TitleH2">主轴</h2>
     <zhuzhou
+      v-if="bearingBrandOptions.length > 0 && lubricantBrandOptions.length > 0"
       :rhyPP="lubricantBrandOptions"
       :rhyZC="bearingBrandOptions"
       :unitBearingsVo="unitBearingsVo"
@@ -10,6 +11,9 @@
     <div v-if="clxShow">
       <h2 class="TitleH2">齿轮箱</h2>
       <Chilunxiang
+        v-if="
+          bearingBrandOptions.length > 0 && lubricantBrandOptions.length > 0
+        "
         :clxPP="lubricantBrandOptions"
         :clxZC="bearingBrandOptions"
         :unitGearDto="unitGearDto"
@@ -19,6 +23,7 @@
 
     <h2 class="TitleH2">发电机</h2>
     <Fadianji
+      v-if="bearingBrandOptions.length > 0 && lubricantBrandOptions.length > 0"
       :fdjPP="lubricantBrandOptions"
       :fdjZC="bearingBrandOptions"
       :unitDynamoDto="unitDynamoDto"
@@ -104,15 +109,17 @@ export default {
       const params3 = { contentsType: "UDTC00031" };
       getBrandModelNameOrModelNumber(params)
         .then((res) => {
-          // 确保数据有效
           if (res && res.data) {
-            this.bearingBrandOptions = res.data;
+            // 确保数据有效且为数组
+            this.bearingBrandOptions = Array.isArray(res.data) ? res.data : [];
           } else {
             console.error("获取轴承品牌失败:", res);
+            this.bearingBrandOptions = [];
           }
         })
         .catch((error) => {
           console.error("获取轴承品牌请求失败:", error);
+          this.bearingBrandOptions = [];
         });
 
       getBrandModelNameOrModelNumber(params2)

vue.config.js

@@ -63,10 +63,10 @@ module.exports = {
     // contentBase: path.join(__dirname, "public"),
     proxy: {
       "/api": {
-        target: "http://192.168.5.4:16200", // 石月
+        // target: "http://192.168.5.4:16200", // 石月
         // target: "http://192.168.50.235:16200", // 内网
         // target: "http://192.168.5.15:16200",
-        // target: "http://106.120.102.238:16700", // 外网  16600   16700
+        target: "http://106.120.102.238:16700", // 外网  16600   16700
         // target: "http://10.96.137.5",
         changeOrigin: true,
         pathRewrite: {
@@ -87,7 +87,8 @@ module.exports = {
       },
          // 文佳
          "/WJapi": {
-          target: "http://192.168.5.28:8888", // WZLapi 目标地址
+          // target: "http://192.168.50.235:8888", // WZLapi 内网 目标地址
+          target: "http://106.120.102.238:18888", // WZLapi 内网 目标地址
           changeOrigin: true,
           pathRewrite: {
             "^/WJapi": "", // 去掉 /WZLapi 前缀