合并

src/views/health/components/envelopecharts.vue

@@ -6,28 +6,30 @@
         size="small"
         v-model="xiaoval"
         placeholder="请输入查询范围"
+         @input="handleInput"
       ></el-input>
       <span>—</span>
       <el-input
         size="small"
         v-model="daval"
         placeholder="请输入查询范围"
+         @input="handleInput"
       ></el-input>
-      <el-button size="small">确定</el-button>
-      <!-- <div class="eigenvalue">
+      <el-button size="small" @click="chaxun">确定</el-button>
+      <div v-if="TZshow" 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> -->
+        <p>有效值：{{ this.envelopeList.Xrms }}</p>
+        <p>平均值：{{ this.envelopeList.mean_value }}</p>
+        <p>最大值：{{ this.envelopeList.max_value }}</p>
+        <p>最小值：{{ this.envelopeList.min_value }}</p>
+        <p>峰值：{{ this.envelopeList.Xp }}</p>
+        <p>峰峰值：{{ this.envelopeList.Xpp }}</p>
+        <p>波形因子：{{ this.envelopeList.Sf }}</p>
+        <p>脉冲指标：{{ this.envelopeList.If }}</p>
+        <p>裕度指标：{{ this.envelopeList.Ce }}</p>
+        <p>偏度指标：{{ this.envelopeList.Cw }}</p>
+        <p>峭度指标：{{ this.envelopeList.Cq }}</p>
+      </div>
     </div>
 
     <div class="line-chart" ref="chart"></div>
@@ -36,26 +38,19 @@
 
 <script>
 import * as echarts from "echarts"; // 导入 echarts 库
-
+import axios from "axios";
 export default {
   name: "TimedomainCharts", // 组件名称
   props: {
     // 可以通过 props 接收外部传入的数据
-    chartData: {
-      type: Array,
-      required: true,
-    },
-    chartLabels: {
-      type: Array,
-      required: true,
-    },
+
     currentIndex: {
       type: Number,
       default: 0,
     },
-    tableData: {
-      type: Array,
-      default: () => [],
+    envelopeListTwo: {
+      type: Object,
+      default: () => ({}),
     },
   },
   data() {
@@ -64,6 +59,8 @@ export default {
       option: null,
       xiaoval: "",
       daval: "",
+      envelopeList: {},
+      TZshow: false,
     };
   },
   watch: {
@@ -74,26 +71,79 @@ export default {
     chartLabels(newLabels) {
       this.updateChart(this.chartData, newLabels);
     },
+    envelopeListTwo: {
+      handler(newValue) {
+        this.updateChart(newValue.y, newValue.x); // 更新图表
+      },
+      deep: true, // 确保监听对象的深层次变
+    },
+    envelopeList: {
+      handler(newValue) {
+        this.updateChart(newValue.y, newValue.x); // 更新图表
+      },
+      deep: true, // 确保监听对象的深层次变
+    },
   },
   mounted() {
     this.initializeChart();
   },
   methods: {
-    // 初始化图表
+    handleInput() {
+      this.$emit('update:modelValue', {
+        xiaoval: this.xiaoval,
+        daval: this.daval
+      });
+    },
+
+    chaxun() {
+      const params = {
+        ids: [67803],
+        windCode: "SKF001_wave",
+        analysisType: "envelope",
+        fmin: this.xiaoval,
+        fmax: this.daval,
+      };
+      axios
+        .post("/WJapi/analysis/envelope", params)
+        .then((res) => {
+          this.envelopeList = JSON.parse(res.data);
+          const defaultData =
+            this.envelopeList.y || this.envelopeListTwo.y || [];
+          const defaultLabels =
+            this.envelopeList.x || this.envelopeListTwo.x || [];
+          this.updateChart(defaultData, defaultLabels);
+        })
+        .catch((error) => {});
+    },
     initializeChart() {
       // 获取图表容器
       const chartDom = this.$refs.chart;
       // 初始化图表实例
       this.chartInstance = echarts.init(chartDom);
 
-      // 默认图表数据和配置
-      const defaultData = [Math.random() * 300];
-      const defaultLabels = ["2024/1/1"];
+      // 初始化时使用空数据
+      const defaultData = [];
+      const defaultLabels = [];
+
       this.updateChart(defaultData, defaultLabels);
     },
     // 更新图表数据
     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.envelopeList.title || this.envelopeListTwo.title,
+          left: "center",
+        },
         toolbox: {
           feature: {
             dataZoom: { yAxisIndex: "none" },
@@ -115,39 +165,72 @@ export default {
               show: true,
               title: "特征值",
               icon: `image://${require("@/assets/analyse/10.png")}`,
-              onclick: () => alert("自定义按钮被点击！"),
+              onclick: () => this.Show(),
             },
           },
         },
         xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: labels,
+          type: "value", // 使用数值型 x 轴，确保每个 x 值都有展示
+          name: this.envelopeList.xaxis || this.envelopeListTwo.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, // 设置刻度
         },
+
         yAxis: {
           type: "value",
-          boundaryGap: [0, "100%"],
+          name: this.envelopeList.yaxis || this.envelopeListTwo.yaxis,
         },
+
         tooltip: {
           trigger: "axis",
-          position: function (pt) {
-            return [pt[0], "10%"];
+          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", // 显示十字线
           },
         },
+
         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)" },
-              ]),
+            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,
             },
-            data: data,
           },
         ],
       };
@@ -157,20 +240,16 @@ export default {
     },
 
     previousRow() {
-      let newIndex =
-        this.currentIndex > 0
-          ? this.currentIndex - 1
-          : this.tableData.length - 1;
-      console.log("previousRow newIndex:", newIndex);
-      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+      this.$emit("update-previous-row",3);
     },
+
+    // 触发下一条
     nextRow() {
-      let newIndex =
-        this.currentIndex < this.tableData.length - 1
-          ? this.currentIndex + 1
-          : 0;
-      console.log("nextRow newIndex:", newIndex);
-      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+      this.$emit("update-next-row",3);
+    },
+
+    Show() {
+      this.TZshow = !this.TZshow;
     },
   },
 };

src/views/health/components/spectrogramcharts.vue

@@ -1,23 +1,24 @@
 <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 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>
+    <div class="line-chart" ref="chart"></div>
   </div>
 </template>
 
@@ -27,28 +28,20 @@ import * as echarts from "echarts"; // 导入 echarts 库
 export default {
   name: "TimedomainCharts", // 组件名称
   props: {
-    // 可以通过 props 接收外部传入的数据
-    chartData: {
-      type: Array,
-      required: true,
-    },
-    chartLabels: {
-      type: Array,
-      required: true,
-    },
     currentIndex: {
       type: Number,
       default: 0,
     },
-    tableData: {
-      type: Array,
-      default: () => [],
+    spectrumList: {
+      type: Object,
+      default: () => ({}),
     },
   },
   data() {
     return {
       chartInstance: null,
       option: null,
+      TZshow: false,
     };
   },
   watch: {
@@ -59,12 +52,22 @@ export default {
     chartLabels(newLabels) {
       this.updateChart(this.chartData, newLabels);
     },
+    spectrumList: {
+      handler(newValue) {
+        this.updateChart(newValue.y, newValue.x); // 更新图表
+      },
+      deep: true, // 确保监听对象的深层次变化
+    },
   },
+
   mounted() {
-    this.initializeChart();
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.initializeChart(); // 延迟2秒后调用
+      }, 2000); // 2000毫秒，即2秒
+    });
   },
   methods: {
-    // 初始化图表
     initializeChart() {
       // 获取图表容器
       const chartDom = this.$refs.chart;
@@ -72,13 +75,33 @@ export default {
       this.chartInstance = echarts.init(chartDom);
 
       // 默认图表数据和配置
-      const defaultData = [Math.random() * 300];
-      const defaultLabels = ["2024/1/1"];
+      const defaultData = this.spectrumList.y;
+      const defaultLabels = this.spectrumList.x;
       this.updateChart(defaultData, defaultLabels);
     },
     // 更新图表数据
     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" },
@@ -100,68 +123,46 @@ export default {
               show: true,
               title: "特征值",
               icon: `image://${require("@/assets/analyse/10.png")}`,
-              onclick: () => alert("自定义按钮被点击！"),
-            },
-            myCustomTool4: {
-              show: true,
-              title: "待定",
-              icon: `image://${require("@/assets/analyse/10.png")}`,
-              onclick: () => alert("自定义按钮被点击！"),
+              onclick: () => this.Show(),
             },
           },
         },
         xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: labels,
+          type: "value",
+          name: this.spectrumList.xaxis || "",
+          min: 0,
+          max: maxAxisValue,
+          interval: 200, // 每 200 显示一个刻度
+          data: ticks, // 设置刻度数据
         },
         yAxis: {
           type: "value",
-          boundaryGap: [0, "100%"],
-        },
-        tooltip: {
-          trigger: "axis",
-          position: function (pt) {
-            return [pt[0], "10%"];
-          },
+          name: this.spectrumList.yaxis || "",
         },
         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: data,
+            symbol: "none", // 隐藏数据点
+            data: labels.map((item, index) => [item, data[index]]),
           },
         ],
       };
 
-      // 使用更新的配置更新图表
       this.chartInstance.setOption(option);
     },
 
     previousRow() {
-      let newIndex =
-        this.currentIndex > 0
-          ? this.currentIndex - 1
-          : this.tableData.length - 1;
-      console.log("previousRow newIndex:", newIndex);
-      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+      this.$emit("update-previous-row", 2);
     },
+
+    // 触发下一条
     nextRow() {
-      let newIndex =
-        this.currentIndex < this.tableData.length - 1
-          ? this.currentIndex + 1
-          : 0;
-      console.log("nextRow newIndex:", newIndex);
-      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+      this.$emit("update-next-row",2);
+    },
+
+    Show() {
+      this.TZshow = !this.TZshow;
     },
   },
 };
@@ -172,10 +173,15 @@ export default {
   width: 100%;
   height: 250px;
 }
+.FD {
+  width: 100%;
+  height: 1px;
+  position: relative;
+}
 
 .eigenvalue {
   position: absolute;
-  top: 0;
+  top: 30px;
   right: 0;
   font-size: 10px;
   width: 100px;

src/views/health/components/tendencycharts.vue

@@ -11,27 +11,16 @@ import * as echarts from "echarts"; // Import echarts library
 export default {
   name: "TimedomainCharts", // Component name
   props: {
-    chartData: {
-      type: Array,
-      required: true, // Data for chart (Y-axis values)
-    },
-    chartLabels: {
-      type: Array,
-      required: true, // Labels for X-axis (timestamps or categories)
-    },
-    currentIndex: {
-      type: Number,
-      default: 0, // Index for the current data set
-    },
-    tableData: {
-      type: Array,
-      default: () => [], // Optional: additional table data (for chart tooltip)
+    qsList: {
+      type: Object,
+      default: () => ({}),
     },
   },
   data() {
     return {
       chartInstance: null, // ECharts instance
       option: null, // Chart options
+      data: [],
     };
   },
   watch: {
@@ -50,6 +39,9 @@ export default {
   beforeDestroy() {
     window.removeEventListener("resize", this.handleResize);
   },
+  created() {
+    console.log(this.qsList.data, "111111111111111111111");
+  },
   methods: {
     initializeChart() {
       const chartDom = this.$refs.chart;
@@ -57,37 +49,99 @@ export default {
       this.updateChart();
     },
     // Update the chart with new data
-    updateChart(data, labels) {
-      const option = {
-        toolbox: {
-          feature: {
-            dataZoom: { yAxisIndex: "none" },
-            restore: {},
-            saveAsImage: {},
-          },
-        },
-        xAxis: {
-          type: "category",
-          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-        },
-        yAxis: {
-          type: "value",
-        },
-        tooltip: {
-          trigger: "axis",
-          position: (pt) => [pt[0], "10%"],
-        },
-        series: [
-          // {
-          //   data: [150, 230, 224, 218, 135, 147, 260],
-          //   type: "line",
-          // },
-        ],
-      };
+    updateChart() {
+  const fieldsToShow = [
+    "Ce",
+    "Cf",
+    "Cq",
+    "Cw",
+    "If",
+    "Max",
+    "Mean",
+    "Min",
+    "Sf",
+    "Xp",
+    "Xrms",
+    "fs",
+  ];
+
+  const fieldNameMap = {
+    Ce: "裕度指标",
+    Cf: "峰值指标",
+    Cq: "峭度指标",
+    Cw: "偏度指标",
+    If: "脉冲指标",
+    Max: "最大值",
+    Mean: "平均值",
+    Min: "最小值",
+    Sf: "波形指标",
+    Xp: "峰值",
+    Xrms: "有效值",
+    fs: "采样频率",
+  };
+
+  const colorPalette = [
+    "#5470C6", // 蓝色
+    "#91CC75", // 绿色
+    "#EE6666", // 红色
+    "#73C0DE", // 青色
+    "#FAC858", // 黄色
+    "#9A60B4", // 紫色
+    "#3BA272", // 深绿
+    "#FC8452", // 橙色
+    "#73B9BC", // 蓝绿
+    "#EA7CCC", // 粉色
+    "#FF9F7F", // 浅橙
+    "#FFD700", // 金黄色
+  ];
+
+  const data = this.qsList?.data || [];
+  if (data.length === 0) {
+    console.warn("No data available to render the chart");
+    return;
+  }
+
+  const labels = data.map((item) => item.time_stamp || "N/A");
 
-      // Apply the updated option to the chart instance
-      this.chartInstance.setOption(option);
+  const option = {
+    color: colorPalette, // 设置颜色
+    toolbox: {
+      feature: {
+        dataZoom: { yAxisIndex: "none" },
+        restore: {},
+        saveAsImage: {},
+      },
     },
+    xAxis: {
+      type: "category",
+      data: labels,
+      name: "时间戳",
+    },
+    yAxis: {
+      type: "value",
+      name: "数值",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      data: fieldsToShow.map((field) => fieldNameMap[field] || field),
+      bottom: 0,
+      orient: "horizontal",
+    },
+    series: fieldsToShow.map((field) => ({
+      name: fieldNameMap[field] || field,
+      type: "line",
+      smooth: true,
+      data: data.map((item) => item[field] || 0),
+    })),
+  };
+
+  this.chartInstance.setOption(option);
+},
+
+
+
     // Resize chart to fit container when window size changes
     handleResize() {
       if (this.chartInstance) {

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

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <div class="FD">
+      <div v-if="TZshow" class="eigenvalue">
+        <h5>特征值</h5>
+        <p>有效值：{{ this.timeList.Xrms }}</p>
+        <p>平均值：{{ this.timeList.mean_value }}</p>
+        <p>最大值：{{ this.timeList.max_value }}</p>
+        <p>最小值：{{ this.timeList.min_value }}</p>
+        <p>峰值：{{ this.timeList.Xp }}</p>
+        <p>峰峰值：{{ this.timeList.Xpp }}</p>
+        <p>波形因子：{{ this.timeList.Sf }}</p>
+        <p>脉冲指标：{{ this.timeList.If }}</p>
+        <p>裕度指标：{{ this.timeList.Ce }}</p>
+        <p>偏度指标：{{ this.timeList.Cw }}</p>
+        <p>峭度指标：{{ this.timeList.Cq }}</p>
+      </div>
+    </div>
+    <!-- ECharts 图表容器 -->
+
+    <div class="line-chart" ref="chart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts"; // 导入 echarts 库
+
+export default {
+  name: "TimedomainCharts", // 组件名称
+  props: {
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+    timeList: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: null,
+      TZshow: false,
+    };
+  },
+  watch: {
+    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
+    chartData(newData) {
+      this.updateChart(newData, this.chartLabels);
+    },
+    chartLabels(newLabels) {
+      this.updateChart(this.chartData, newLabels);
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initializeChart();
+    });
+  },
+  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);
+    },
+    // 更新图表数据
+    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",
+        },
+        toolbox: {
+          feature: {
+            dataZoom: { yAxisIndex: "none" },
+            restore: {},
+            saveAsImage: {},
+            myCustomTool: {
+              show: true,
+              title: "上一条",
+              icon: `image://${require("@/assets/analyse/08.png")}`,
+              onclick: () => this.previousRow(),
+            },
+            myCustomTool2: {
+              show: true,
+              title: "下一条",
+              icon: `image://${require("@/assets/analyse/09.png")}`,
+              onclick: () => this.nextRow(),
+            },
+            myCustomTool3: {
+              show: true,
+              title: "特征值",
+              icon: `image://${require("@/assets/analyse/10.png")}`,
+              onclick: () => this.Show(),
+            },
+          },
+        },
+        xAxis: {
+          type: "value", // 使用数值型 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, // 设置刻度
+        },
+
+        yAxis: {
+          type: "value",
+          name: this.timeList.yaxis,
+        },
+
+        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", // 显示十字线
+          },
+        },
+
+        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);
+    },
+
+    previousRow() {
+      this.$emit("update-previous-row");
+    },
+
+    // 触发下一条
+    nextRow() {
+      this.$emit("update-next-row");
+    },
+
+    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/timedomaincharts.vue

@@ -52,13 +52,23 @@ export default {
     chartLabels(newLabels) {
       this.updateChart(this.chartData, newLabels);
     },
-  },
+    timeList: {
+      handler(newValue) {
+        this.updateChart(newValue.y, newValue.x); // 更新图表
+      },
+      deep: true, // 确保监听对象的深层次变化
+      
+    },
 
-  mounted() {
-    this.$nextTick(() => {
-      this.initializeChart();
-    });
   },
+  mounted() {
+  this.$nextTick(() => {
+    setTimeout(() => {
+      this.initializeChart(); // 延迟2秒后调用
+    }, 2000); // 2000毫秒，即2秒
+  });
+},
+
   methods: {
     initializeChart() {
       // 获取图表容器
@@ -73,6 +83,16 @@ export default {
     },
     // 更新图表数据
     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,
@@ -104,34 +124,56 @@ export default {
           },
         },
         xAxis: {
-          type: "category",
-          name: this.timeList.xaxis, // 设置X轴标题
+          type: "value", // 使用数值型 x 轴，确保每个 x 值都有展示
+          name: this.timeList.xaxis, // 设置 X 轴标题
           nameLocation: "center", // 标题位置：可选 "start" | "center" | "end"
           nameTextStyle: {
             fontSize: 14,
             color: "#333", // 标题颜色
             padding: [10, 0, 0, 0], // 上、右、下、左的间距
           },
-          data: labels, // 横坐标数据
-          boundaryGap: false, // 坐标轴是否留白
-          position: "bottom", // 确保X轴在底部
+          // min: 0, // X 轴最小值
+          // max: maxAxisValue, // X 轴最大值为计算的最大值
+          // interval: 5, // X 轴每 5 个单位显示一个刻度
+          axisLabel: {
+            formatter: (value) => {
+              // 格式化显示刻度为 5 的倍数
+              return value;
+            },
+          },
+          axisTick: {
+            show: true, // 显示刻度线
+          },
+          axisLine: {
+            show: true, // 显示轴线
+          },
+          data: ticks, // 设置刻度
         },
 
         yAxis: {
           type: "value",
           name: this.timeList.yaxis,
         },
+
         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", // 显示十字线
           },
         },
+
         series: [
           {
             name: "数据系列",
             type: "line", // 折线图
-            data: data, // 数据
+            data: labels.map((item, index) => [item, data[index]]), // 修改为 [x, y] 数组
+            // smooth: true,
             symbol: "none", // 数据点的样式
             symbolSize: 8, // 数据点的大小
             lineStyle: {
@@ -152,13 +194,13 @@ export default {
     },
 
     previousRow() {
-   
+      this.$emit("update-previous-row",1);
     },
 
+    // 触发下一条
     nextRow() {
-     
+      this.$emit("update-next-row",1);
     },
- 
 
     Show() {
       this.TZshow = !this.TZshow;

src/views/health/vibration.vue

@@ -62,7 +62,12 @@
       </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.detectionPointEn"
@@ -94,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>
@@ -123,35 +128,43 @@
               minimized: item.isMinimized,
             }"
           >
-            <p>测点路径:{{}}</p>
-            <P><span>采样频率:</span><span>采样时间:</span></P>
+            <p>测点路径:</p>
+            <P
+              ><span>采样频率:</span><span>采样时间:{{ samplingTime }}</span></P
+            >
             <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
-                :chartData="chartData"
-                :chartLabels="chartLabels"
+                :spectrumList="spectrumList"
                 :currentIndex="currentIndex"
-                :tableData="tableData"
+                :tableDataList="tableDataList"
                 @update:currentIndex="handleCurrentIndexUpdate"
+                @update-previous-row="goToPreviousRow"
+                @update-next-row="goToNextRow"
               ></spectrogramcharts>
             </div>
             <div v-if="item.name === '包络谱图'">
               <envelopecharts
-                :chartData="chartData"
-                :chartLabels="chartLabels"
+                :envelopeListTwo="envelopeListTwo"
                 :currentIndex="currentIndex"
-                :tableData="tableData"
+                :tableDataList="tableDataList"
                 @update:currentIndex="handleCurrentIndexUpdate"
+                @update-previous-row="goToPreviousRow"
+                @update-next-row="goToNextRow"
+                @update:modelValue="handleModelUpdate"
               ></envelopecharts>
             </div>
             <div v-if="item.name === '趋势图'">
-              <tendencycharts></tendencycharts>
+              <tendencycharts :qsList="qsList"></tendencycharts>
             </div>
           </div>
         </div>
@@ -168,10 +181,11 @@
           <el-table-column type="index" 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="address" label="场站">
-            {{ this.companyCode }}
-          </el-table-column>
+          <el-table-column prop="address" label="场站"> </el-table-column>
           <el-table-column prop="windTurbineNumber" label="风机" width="80px">
           </el-table-column>
         </el-table>
@@ -207,20 +221,18 @@ export default {
     return {
       chartData: [],
       chartLabels: [],
-      tableData: [],
-      data: [10, 20, 30, 40], // 假设是图表的数据
-      labels: ["2024/1/1", "2024/1/2", "2024/1/3", "2024/1/4"], // 假设是时间轴数据
-
-      tableData: [], // 假设是来自父组件的数据
 
       company: "",
       companyoptions: [],
       unitvalue: "",
       unitoptions: [],
       monitoringvalue: "",
-      monitoringoptions: [],
-
-      tableData: [],
+      monitoringoptions: [
+        {
+          detectionPointEn: "name",
+          detectionPointCn: "中文",
+        },
+      ],
 
       fourList: [],
       currentRow: null, // 用于存储当前选中的行
@@ -233,16 +245,47 @@ export default {
       timevalue: [], // 绑定 el-date-picker 的值
       startTime: "", // 开始时间
       endTime: "", // 结束时间
-      tableDataList: [],
+      tableDataList: [
+        { ids: 1, mesurePointName: "name" },
+        { ids: 2, mesurePointName: "22" },
+        { ids: 3, mesurePointName: "22" },
+      ],
+
+      samplingTime: "", // 采样时间
 
       timeList: {},
+      spectrumList: {},
+      envelopeList: {},
+      qsList: {},
+      CdNamw: "",
+      chartsData: {},
+      shuju: {},
+      envelopeListTwo: {},
     };
   },
-
+  computed: {},
   created() {
-    this.GETtree();
+    // this.GETtree();
   },
+  watch: {
+    // 监听 timeList 的变化
+    timeList(newTimeList) {
+      if (newTimeList && newTimeList.length > 0) {
+        // 当 timeList 不为空时，触发 ECharts 图表生成
+        this.generateChart(1); // 或者根据具体逻辑来生成对应的图表
+      }
+    },
+  },
+
   methods: {
+    getDetectionPointCn(detectionPointEn) {
+      console.log(detectionPointEn, this.monitoringoptions);
+      const point = this.monitoringoptions?.find(
+        (option) => option.detectionPointEn === detectionPointEn
+      );
+      console.log(point?.detectionPointCn);
+      return point ? point?.detectionPointCn : null; // 如果没有找到对应项，返回 null
+    },
     // 获取风场
     async GETtree() {
       const res = await getSysOrganizationAuthTreeByRoleId();
@@ -313,15 +356,119 @@ export default {
     // 获取测点
     getchedian(value) {
       queryDetectionDic({ engineCodes: value }).then((res) => {
-        this.monitoringoptions = res.data;
+        // this.monitoringoptions = res.data;
       });
     },
-// 更新父组件的 currentIndex
+
+    handleModelUpdate(data) {
+      // 将子组件的值作为查询参数传递给查询接口
+      const { xiaoval, daval } = 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);
+
+  const params = {
+    ids: currentRow.id,
+    windCode: "SKF001_wave",
+  };
+
+  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 {
+    console.warn("Unknown type provided:", type);
+  }
+},
+
+
+    // 下一条数据，向后循环
+    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_wave",
+      };
+
+      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) => {});
+      }
+    },
+
+    // 更新父组件的 currentIndex
     handleCurrentIndexUpdate(newIndex) {
       this.currentIndex = newIndex;
-      this.setCurrentRowData(newIndex)
+      this.handleCurrentChange(newIndex);
     },
-
     // 当前所在行高亮提示
     setCurrent(row) {
       this.$refs.singleTable.setCurrentRow(row);
@@ -329,17 +476,17 @@ export default {
     // 当前单选
     handleCurrentChange(val) {
       this.currentRow = val;
-      const index = this.tableData.indexOf(val);
+
+      const index = this.tableDataList.indexOf(val);
       this.currentIndex = index; // 更新当前索引
+      console.log(this.currentIndex);
     },
 
-
     generate(type) {
       if (!this.currentRow) {
         this.$message.warning("请先选择数据");
         return;
       }
-
       const nameMap = {
         1: "时域图", // Time Domain Chart
         2: "频谱图", // Spectrogram Chart
@@ -355,23 +502,58 @@ export default {
         };
         this.fourList.push(newItem);
       }
-      const params = {
-        ids: [67803],
-        windCode: "SKF001_wave",
-        analysisType: "time",
-      };
 
-      axios
-        .post("/WJapi/analysis/time", params)
-        .then((res) => {
-          this.timeList = JSON.parse(res.data);
-          console.log(this.timeList);
-        })
-        .catch((error) => {});
+      // API call for specific types
+      if (type === "1") {
+        // Time Domain Chart
+        const params = {
+          ids: this.tableDataList.map((item) => item.id),
+          windCode: "SKF001_wave",
+          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: [67803],
+          windCode: "SKF001_wave",
+          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") {
+      //   // Envelope Spectrum Chart
+      //   const params = {
+      //     ids: [67803],
+      //     windCode: "SKF001_wave",
+      //     analysisType: "envelope",
+      //     fmin: "5",
+      //     fmax: "20",
+      //   };
+      //   axios
+      //     .post("/WJapi/analysis/envelope", params)
+      //     .then((res) => {
+      //       this.envelopeList = JSON.parse(res.data);
+      //       console.log("Envelope Spectrum Data:", this.envelopeList);
+      //     })
+      //     .catch((error) => {});
+      // }
     },
 
     tendency() {
-      if (this.tableData.length === 0) {
+      if (this.tableDataList.length === 0) {
         this.$message.warning("数据为空，无法生成图表");
         return;
       }
@@ -380,17 +562,31 @@ export default {
         isMinimized: false,
         id: `chart-${Date.now()}`,
       };
-      this.fourList.push(newItem);
+      const params = {
+        ids: this.tableDataList.map((item) => item.id),
+        windCode: "SKF001_wave",
+        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) => {});
     },
 
-    //   // const params = {
-    //   //   windCode: this.maplist.codeNumber,
-    //   //   windTurbineNumberList: this.unitvalue,
-    //   //   mesureNameList: this.monitoringvalue,
-    //   //   startTime: this.$formatDateTWO(this.timevalue[0]),
-    //   //   endTime: this.$formatDateTWO(this.timevalue[1]),
-    //   // };
     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"],
@@ -497,7 +693,7 @@ export default {
 }
 
 .subject {
-  height: 280px;
+  height: 300px;
   transition: all 0.3s ease;
   padding: 0 10px;
   p {
@@ -510,8 +706,8 @@ export default {
   justify-content: space-between;
   .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);

src/views/ledger/componentBJ/chilunxiang.vue

@@ -94,7 +94,7 @@
       <i @click="addPlanet" class="el-icon-plus"></i>
       <i v-if="planets.length > 1" @click="delPlanet" class="el-icon-minus"></i>
     </p>
-    <div v-for="(item, index) in planets .length > 0 ? planets : [{}]" :key="index" class="message">
+    <div v-for="(item, index) in planets.length > 0 ? planets : [{}] " :key="index" class="message">
       <p class="caption">
         <span class="capSpan1">{{ `${levelNames[index]}行星轮结构` }}</span>
       </p>
@@ -247,7 +247,7 @@
       ></i>
     </p>
     <div
-      v-for="(item, index) in parallel.length > 0 ? length : [{}]"
+      v-for="(item, index) in parallel.length > 0 ? parallel : [{}]"
       :key="`parallel-${index}`"
       class="message"
     >

vue.config.js

@@ -63,8 +63,8 @@ module.exports = {
     // contentBase: path.join(__dirname, "public"),
     proxy: {
       "/api": {
-        // target: "http://192.168.5.4:16200", // 石月
-        target: "http://192.168.50.235: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://10.96.137.5",
@@ -72,9 +72,9 @@ module.exports = {
         pathRewrite: {
           "^/api": "", // 去掉 /api 前缀
         },
-        onProxyReq(proxyReq, req, res) {
-          console.log("Proxying /api request to:", proxyReq.path); // 打印代理请求路径
-        },
+        // onProxyReq(proxyReq, req, res) {
+        //   console.log("Proxying /api request to:", proxyReq.path); // 打印代理请求路径
+        // },
       },
       // 未知量
       "/WZLapi": {