部件信息

src/api/maintain.js

@@ -57,7 +57,7 @@ export function getUnitDictConstantsList(data) {
   });
 }
 
-// 新增属性
+// 删除常规字典属性
 export function delUnitDictProperty(data) {
   return request({
     url: "/energy-manage-service/api/unit/dict/delUnitDictProperty",
@@ -66,3 +66,90 @@ export function delUnitDictProperty(data) {
   });
 }
 
+// 编辑常规属性
+export function updateUnitDictProperty(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/dict/updateUnitDictProperty",
+    method: "post",
+    data,
+  });
+}
+
+
+// 查询品牌
+export function getUnitDictBrandModelPage(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/dict/getUnitDictBrandModelPage",
+    method: "post",
+    data,
+  });
+}
+
+
+// 创建品牌
+export function saveUnitDictBrandModel(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/dict/saveUnitDictBrandModel",
+    method: "post",
+    data,
+  });
+}
+
+
+// 删除品牌
+export function delUnitDictBrandModel(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/dict/delUnitDictBrandModel",
+    method: "post",
+    data,
+  });
+}
+
+// 更新品牌
+export function updateUnitDictBrandModel(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/dict/updateUnitDictBrandModel",
+    method: "post",
+    data,
+  });
+}
+
+
+// 调取录入品牌
+export function getBrandModelNameOrModelNumber(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/getBrandModelNameOrModelNumber",
+    method: "post",
+    data,
+  });
+}
+
+
+
+// 调取录入常规
+export function getUnitDictRoutineList(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/getUnitDictRoutineList",
+    method: "post",
+    data,
+  });
+}
+
+
+// 提交部件信息全部
+export function modificationUnit(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/modificationUnit",
+    method: "post",
+    data,
+  });
+}
+
+// 编辑回显接口
+export function getUnitVo(data) {
+  return request({
+    url: "/energy-manage-service/api/unit/getUnitVo",
+    method: "get",
+    data,
+  });
+}

src/views/health/components/charts.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="line-chart" ref="chart"></div>
-</template>
-
-<script>
-import * as echarts from "echarts";
-
-export default {
-  mounted() {
-    this.renderChart();
-    window.addEventListener("resize", this.handleResize); // Resize handler for chart
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", this.handleResize); // Cleanup resize event on component destroy
-  },
-  methods: {
-    renderChart() {
-      const chartDom = this.$refs.chart; // Access chart DOM via ref
-      const myChart = echarts.init(chartDom); // Initialize ECharts instance
-      let option;
-
-      let base = +new Date(1988, 9, 3);
-      let oneDay = 24 * 3600 * 1000;
-      let data = [[base, Math.random() * 300]];
-      for (let i = 1; i < 20000; i++) {
-        let now = new Date((base += oneDay));
-        data.push([
-          +now,
-          Math.round((Math.random() - 0.5) * 20 + data[i - 1][1]),
-        ]);
-      }
-
-      option = {
-        toolbox: {
-          feature: {
-            dataZoom: {
-              yAxisIndex: "none",
-            },
-            restore: {},
-            saveAsImage: {},
-            myCustomTool: {
-              show: true, // 显示自定义按钮
-              title: "上一条", // 按钮标题
-              icon: `image://${require("@/assets/analyse/08.png")}`, // 使用 require 导入图片
-              onclick: function () {
-                const table = this.$refs.singleTable;
-                if (table) {
-                  const nextRow = this.currentRow + 1; // index + 1
-                  this.handleCurrentChange(nextRow);
-                }
-              },
-            },
-            myCustomTool2: {
-              show: true, // 显示自定义按钮
-              title: "下一条", // 按钮标题
-              icon: `image://${require("@/assets/analyse/09.png")}`, // 使用 require 导入图片
-              onclick: function () {
-                // 自定义按钮点击事件
-                alert("自定义按钮被点击！");
-              },
-            },
-            myCustomTool3: {
-              show: true, // 显示自定义按钮
-              title: "特征值", // 按钮标题
-              icon: `image://${require("@/assets/analyse/10.png")}`, // 使用 require 导入图片
-              onclick: function () {
-                // 自定义按钮点击事件
-                alert("自定义按钮被点击！");
-              },
-            },
-          },
-        },
-
-        xAxis: {
-          type: "time",
-          boundaryGap: false,
-          min: data[0][0], // 设置最小值
-          max: data[data.length - 1][0], // 设置最大值
-          name: "时间", // x轴名字
-          nameLocation: "middle", // 名字位置
-          nameGap: 25, // 名字与轴线的间距
-        },
-        yAxis: {
-          type: "value",
-          boundaryGap: [0, "100%"],
-          name: "数值", // y轴名字
-          nameLocation: "middle", // 名字位置
-          nameGap: 50, // 名字与轴线的间距
-        },
-
-        series: [
-          {
-            name: "Fake Data",
-            type: "line",
-            smooth: true,
-            symbol: "none",
-            areaStyle: {},
-            data: data,
-          },
-        ],
-      };
-
-      myChart.setOption(option); // Apply the option to the chart instance
-    },
-    handleResize() {
-      const chartDom = this.$refs.chart;
-      const myChart = echarts.getInstanceByDom(chartDom);
-      if (myChart) {
-        myChart.resize(); // Resize the chart on window resize
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.line-chart {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/health/components/envelopecharts.vue

@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <!-- ECharts 图表容器 -->
+    <div class="section">
+      <el-input
+        size="small"
+        v-model="xiaoval"
+        placeholder="请输入查询范围"
+      ></el-input>
+      <span>—</span>
+      <el-input
+        size="small"
+        v-model="daval"
+        placeholder="请输入查询范围"
+      ></el-input>
+      <el-button size="small">确定</el-button>
+      <!-- <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>
+
+<script>
+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: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: null,
+      xiaoval: "",
+      daval: "",
+    };
+  },
+  watch: {
+    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
+    chartData(newData) {
+      this.updateChart(newData, this.chartLabels);
+    },
+    chartLabels(newLabels) {
+      this.updateChart(this.chartData, newLabels);
+    },
+  },
+  mounted() {
+    this.initializeChart();
+  },
+  methods: {
+    // 初始化图表
+    initializeChart() {
+      // 获取图表容器
+      const chartDom = this.$refs.chart;
+      // 初始化图表实例
+      this.chartInstance = echarts.init(chartDom);
+
+      // 默认图表数据和配置
+      const defaultData = [Math.random() * 300];
+      const defaultLabels = ["2024/1/1"];
+      this.updateChart(defaultData, defaultLabels);
+    },
+    // 更新图表数据
+    updateChart(data, labels) {
+      const option = {
+        toolbox: {
+          feature: {
+            dataZoom: { yAxisIndex: "none" },
+            restore: {},
+            saveAsImage: {},
+            myCustomTool: {
+              show: true,
+              title: "上一条",
+              icon: `image://${require("@/assets/analyse/08.png")}`,
+              onclick: () => this.previousRow(),
+            },
+            myCustomTool2: {
+              show: true,
+              title: "下一条",
+              icon: `image://${require("@/assets/analyse/09.png")}`,
+              onclick: () => this.nextRow(),
+            },
+            myCustomTool3: {
+              show: true,
+              title: "特征值",
+              icon: `image://${require("@/assets/analyse/10.png")}`,
+              onclick: () => alert("自定义按钮被点击！"),
+            },
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: labels,
+        },
+        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: data,
+          },
+        ],
+      };
+
+      // 使用更新的配置更新图表
+      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
+    },
+    nextRow() {
+      let newIndex =
+        this.currentIndex < this.tableData.length - 1
+          ? this.currentIndex + 1
+          : 0;
+      console.log("nextRow newIndex:", newIndex);
+      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.line-chart {
+  width: 100%;
+  height: 250px;
+}
+
+.eigenvalue {
+  position: absolute;
+  top: 60px;
+  right: 0;
+  font-size: 10px;
+  width: 100px;
+  border: 1px solid black;
+  padding: 5px;
+  background: #fff;
+  z-index: 99;
+
+  h5 {
+    line-height: 16px;
+    height: 16px;
+  }
+}
+
+.section {
+  position: relative;
+  display: flex;
+  // line-height: 32px;
+  .el-input {
+    width: 150px;
+  }
+  .el-button {
+    margin-left: 10px;
+  }
+}
+</style>

src/views/health/components/spectrogramcharts.vue

@@ -0,0 +1,191 @@
+<template>
+  <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>
+</template>
+
+<script>
+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: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: null,
+    };
+  },
+  watch: {
+    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
+    chartData(newData) {
+      this.updateChart(newData, this.chartLabels);
+    },
+    chartLabels(newLabels) {
+      this.updateChart(this.chartData, newLabels);
+    },
+  },
+  mounted() {
+    this.initializeChart();
+  },
+  methods: {
+    // 初始化图表
+    initializeChart() {
+      // 获取图表容器
+      const chartDom = this.$refs.chart;
+      // 初始化图表实例
+      this.chartInstance = echarts.init(chartDom);
+
+      // 默认图表数据和配置
+      const defaultData = [Math.random() * 300];
+      const defaultLabels = ["2024/1/1"];
+      this.updateChart(defaultData, defaultLabels);
+    },
+    // 更新图表数据
+    updateChart(data, labels) {
+      const option = {
+        toolbox: {
+          feature: {
+            dataZoom: { yAxisIndex: "none" },
+            restore: {},
+            saveAsImage: {},
+            myCustomTool: {
+              show: true,
+              title: "上一条",
+              icon: `image://${require("@/assets/analyse/08.png")}`,
+              onclick: () => this.previousRow(),
+            },
+            myCustomTool2: {
+              show: true,
+              title: "下一条",
+              icon: `image://${require("@/assets/analyse/09.png")}`,
+              onclick: () => this.nextRow(),
+            },
+            myCustomTool3: {
+              show: true,
+              title: "特征值",
+              icon: `image://${require("@/assets/analyse/10.png")}`,
+              onclick: () => alert("自定义按钮被点击！"),
+            },
+            myCustomTool4: {
+              show: true,
+              title: "待定",
+              icon: `image://${require("@/assets/analyse/10.png")}`,
+              onclick: () => alert("自定义按钮被点击！"),
+            },
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: labels,
+        },
+        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: data,
+          },
+        ],
+      };
+
+      // 使用更新的配置更新图表
+      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
+    },
+    nextRow() {
+      let newIndex =
+        this.currentIndex < this.tableData.length - 1
+          ? this.currentIndex + 1
+          : 0;
+      console.log("nextRow newIndex:", newIndex);
+      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.line-chart {
+  width: 100%;
+  height: 250px;
+}
+
+.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/health/components/tendencycharts.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <!-- ECharts 图表容器 -->
+    <div class="line-chart" ref="chart"></div>
+  </div>
+</template>
+
+<script>
+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)
+    },
+  },
+  data() {
+    return {
+      chartInstance: null, // ECharts instance
+      option: null, // Chart options
+    };
+  },
+  watch: {
+    // Watch for changes in chartData and chartLabels to update the chart
+    chartData(newData) {
+      this.updateChart(newData, this.chartLabels);
+    },
+    chartLabels(newLabels) {
+      this.updateChart(this.chartData, newLabels);
+    },
+  },
+  mounted() {
+    this.initializeChart();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+  },
+  methods: {
+    initializeChart() {
+      const chartDom = this.$refs.chart;
+      this.chartInstance = echarts.init(chartDom);
+      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",
+          // },
+        ],
+      };
+
+      // Apply the updated option to the chart instance
+      this.chartInstance.setOption(option);
+    },
+    // Resize chart to fit container when window size changes
+    handleResize() {
+      if (this.chartInstance) {
+        this.chartInstance.resize();
+      }
+    },
+  },
+};
+</script>
+
+<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 */
+}
+</style>

src/views/health/components/timedomaincharts.vue

@@ -0,0 +1,188 @@
+<template>
+  <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>
+</template>
+
+<script>
+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: () => [],
+    },
+  },
+  data() {
+    return {
+      chartInstance: null,
+      option: null,
+      
+    };
+  },
+  watch: {
+    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
+    chartData(newData) {
+      this.updateChart(newData, this.chartLabels);
+    },
+    chartLabels(newLabels) {
+      this.updateChart(this.chartData, newLabels);
+    },
+  },
+  mounted() {
+    this.initializeChart();
+  },
+  methods: {
+    // 初始化图表
+    initializeChart() {
+      // 获取图表容器
+      const chartDom = this.$refs.chart;
+      // 初始化图表实例
+      this.chartInstance = echarts.init(chartDom);
+
+      // 默认图表数据和配置
+      const defaultData = [Math.random() * 300];
+      const defaultLabels = ["2024/1/1"];
+      this.updateChart(defaultData, defaultLabels);
+    },
+    // 更新图表数据
+    updateChart(data, labels) {
+      const option = {
+        toolbox: {
+          feature: {
+            dataZoom: { yAxisIndex: "none" },
+            restore: {},
+            saveAsImage: {},
+            myCustomTool: {
+              show: true,
+              title: "上一条",
+              icon: `image://${require("@/assets/analyse/08.png")}`,
+              onclick: () => this.previousRow(),
+            },
+            myCustomTool2: {
+              show: true,
+              title: "下一条",
+              icon: `image://${require("@/assets/analyse/09.png")}`,
+              onclick: () => this.nextRow(),
+            },
+            myCustomTool3: {
+              show: true,
+              title: "特征值",
+              icon: `image://${require("@/assets/analyse/10.png")}`,
+              onclick: () => alert("自定义按钮被点击！"),
+            },
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: labels,
+        },
+        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: data,
+          },
+        ],
+      };
+
+      // 使用更新的配置更新图表
+      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
+    },
+    nextRow() {
+      let newIndex =
+        this.currentIndex < this.tableData.length - 1
+          ? this.currentIndex + 1
+          : 0;
+      console.log("nextRow newIndex:", newIndex);
+      this.$emit("update:currentIndex", newIndex); // 更新父组件的 currentIndex
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.line-chart {
+  width: 100%;
+  height: 250px;
+}
+
+.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/health/vibration copy.vue

@@ -0,0 +1,537 @@
+<template>
+  <div class="global-variable">
+    <div class="head">
+      <div class="headleft">
+        <div @click="generate('1')" class="picture">
+          <img src="@/assets/analyse/03.png" alt="" />
+          <p>时域图</p>
+        </div>
+        <div @click="generate('2')" class="picture">
+          <img src="@/assets/analyse/04.png" alt="" />
+          <p>频谱图</p>
+        </div>
+        <div @click="generate('3')" class="picture">
+          <img src="@/assets/analyse/01.png" alt="" />
+          <p>包络谱图</p>
+        </div>
+        <div @click="tendency" class="picture">
+          <img src="@/assets/analyse/02.png" alt="" />
+          <p>趋势图</p>
+        </div>
+      </div>
+      <div class="headright">
+        <img src="@/assets/analyse/05.png" alt="全部展开" @click="zhankai" />
+        <img src="@/assets/analyse/07.png" alt="全部缩小" @click="suoxiao" />
+        <img src="@/assets/analyse/06.png" alt="全部关闭" @click="guanbi" />
+      </div>
+    </div>
+    <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>
+      </p>
+      <p>
+        风机：
+        <el-select v-model="unitvalue" size="small" placeholder="请选择">
+          <el-option
+            v-for="item in unitoptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </p>
+      <p>
+        测点：
+        <el-select v-model="monitoringvalue" size="small" placeholder="请选择">
+          <el-option
+            v-for="item in monitoringoptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </p>
+      <p>
+        时间：
+        <el-date-picker
+          size="small"
+          v-model="timevalue"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </p>
+      <el-button type="primary" size="small">查询</el-button>
+      <el-button size="small">导出</el-button>
+    </div>
+    <div class="main-body">
+      <div class="data-map">
+        <div
+          class="chart-area"
+          v-for="(item, index) in fourList"
+          :key="item.id"
+        >
+          <div class="dialog-actions">
+            <p>{{ item.name }}</p>
+            <span>
+              <i
+                class="el-icon-minus"
+                @click="lessen(index)"
+                style="cursor: pointer; margin-right: 10px"
+              ></i>
+              <i
+                class="el-icon-full-screen"
+                @click="amplifier(index)"
+                style="cursor: pointer; margin-right: 10px"
+              ></i>
+              <i
+                class="el-icon-close"
+                @click="close(index)"
+                style="cursor: pointer"
+              ></i>
+            </span>
+          </div>
+
+          <div
+            class="subject"
+            :class="{
+              minimized: item.isMinimized,
+            }"
+          >
+            <p>测点路径:</p>
+            <P><span>采样频率:</span><span>采样时间:</span></P>
+            <!-- <div
+              :id="item.id"
+              class="line-chart"
+              style="width: 100%; height: 260px"
+            >
+              <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>
+        </div>
+      </div>
+      <div class="data-origin">
+        <el-table
+          highlight-current-row
+          @current-change="handleCurrentChange"
+          ref="singleTable"
+          :data="tableData"
+          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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import envelopecharts from "./components/envelopecharts.vue";
+import spectrogramcharts from "./components/spectrogramcharts.vue";
+import tendencycharts from "./components/tendencycharts.vue";
+import timedomaincharts from "./components/timedomaincharts.vue";
+
+export default {
+  components: {
+    envelopecharts,
+    spectrogramcharts,
+    tendencycharts,
+    timedomaincharts,
+  },
+  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" },
+      ],
+
+      fourList: [],
+      currentRow: null, // 用于存储当前选中的行
+      currentIndex: 0,
+      isChartVisible: false,
+    };
+  },
+
+  methods: {
+    // 当前所在行高亮提示
+    setCurrent(row) {
+      this.$refs.singleTable.setCurrentRow(row);
+    },
+    // 当前单选
+    handleCurrentChange(val) {
+      this.currentRow = val;
+      const index = this.tableData.indexOf(val);
+      this.currentIndex = index; // 更新当前索引
+    },
+
+    // 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--;
+      } else {
+        this.currentIndex = this.tableData.length - 1;
+      }
+      this.selectRow(chartId);
+    },
+
+    // 下一条
+    nextRow(chartId) {
+      if (this.currentIndex < this.tableData.length - 1) {
+        this.currentIndex++;
+      } else {
+        this.currentIndex = 0;
+      }
+      this.selectRow(chartId);
+    },
+    selectRow(chartId) {
+      const row = this.tableData[this.currentIndex];
+      this.handleCurrentChange(row);
+      this.setCurrent(row);
+      // this.$nextTick(() => {
+      //   this.renderChart(chartId);
+      // });
+    },
+
+    generate(type) {
+      if (!this.currentRow) {
+        this.$message.warning("请先选择数据");
+        return;
+      }
+      const nameMap = {
+        1: "时域图",
+        2: "频谱图",
+        3: "包络谱图",
+      };
+      if (nameMap[type]) {
+        const newItem = {
+          name: nameMap[type],
+          isMinimized: false,
+          id: `chart-${Date.now()}`, // 使用唯一 ID
+        };
+        this.fourList.push(newItem);
+      }
+      // this.$nextTick(() => {
+      //   const newChart = this.fourList[this.fourList.length - 1];
+      //   this.renderChart(newChart.id); // 为新图表渲染数据
+      // });
+    },
+    tendency() {
+      // 判断 tableData 是否为空，若为空则不进行图表生成
+      if (this.tableData.length === 0) {
+        this.$message.warning("数据为空，无法生成图表");
+        return; // 直接返回，不执行后续逻辑
+      }
+
+      // 设置 isChartVisible 为 true，显示 <charts> 组件
+      this.isChartVisible = true;
+
+      const newItem = {
+        name: "趋势图",
+        isMinimized: false,
+        id: `chart-${Date.now()}`, // 唯一 ID
+      };
+      this.fourList.push(newItem); // 将新图表添加到列表
+
+      // this.$nextTick(() => {
+      //   const lastChart = this.fourList[this.fourList.length - 1];
+      //   this.renderChart(lastChart.id); // 渲染最新添加的图表
+      // });
+    },
+
+    // 缩小
+    lessen(index) {
+      if (!this.fourList[index].isMinimized) {
+        this.fourList[index].isMinimized = true;
+      }
+      console.log("1");
+    },
+    // 放大
+    amplifier(index) {
+      const item = this.fourList[index];
+      if (item.isMinimized) {
+        item.isMinimized = false;
+      }
+      console.log("2");
+    },
+    // 关闭
+    close(index) {
+      this.fourList.splice(index, 1);
+      console.log("3");
+    },
+
+    zhankai() {
+      this.fourList.forEach((item) => {
+        item.isMinimized = false;
+      });
+    },
+    suoxiao() {
+      this.fourList.forEach((item) => {
+        item.isMinimized = true;
+      });
+    },
+    guanbi() {
+      this.fourList = [];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.head {
+  border-top: 5px solid #088080;
+  border-bottom: 5px solid #088080;
+  padding: 5px 0;
+  display: flex;
+  justify-content: space-between;
+  .headleft {
+    display: flex;
+    .picture {
+      cursor: pointer;
+      display: inline-block;
+      text-align: center;
+      margin: 0 20px;
+      font-size: 12px;
+      img {
+        width: 50px;
+        height: 20px;
+      }
+    }
+  }
+  .headright {
+    img {
+      width: 20px;
+      height: 20px;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+.searchbox {
+  display: flex;
+  margin: 20px 0;
+  p {
+    margin-right: 20px;
+  }
+  .el-select {
+    width: 180px;
+  }
+}
+.dialog-actions {
+  text-align: right;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.subject {
+  height: 280px;
+  transition: all 0.3s ease;
+  padding: 0 10px;
+  p {
+    font-size: 10px;
+  }
+}
+
+.main-body {
+  display: flex;
+  justify-content: space-between;
+  .data-map {
+    width: 60%;
+    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);
+    }
+  }
+  .data-map::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+  }
+
+  .data-origin {
+    width: 39%;
+
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  }
+}
+
+.subject.minimized {
+  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/health/vibration.vue

@@ -14,7 +14,7 @@
           <img src="@/assets/analyse/01.png" alt="" />
           <p>包络谱图</p>
         </div>
-        <div @click="generate('4')" class="picture">
+        <div @click="tendency" class="picture">
           <img src="@/assets/analyse/02.png" alt="" />
           <p>趋势图</p>
         </div>
@@ -113,37 +113,46 @@
           >
             <p>测点路径:</p>
             <P><span>采样频率:</span><span>采样时间:</span></P>
-            <div
-              :id="item.id"
-              class="line-chart"
-              style="width: 100%; height: 260px"
-            >
-            <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 v-if="item.name === '时域图'">
+              <timedomaincharts
+                :chartData="chartData"
+                :chartLabels="chartLabels"
+                :currentIndex="currentIndex"
+                :tableData="tableData"
+                @update:currentIndex="handleCurrentIndexUpdate"
+              ></timedomaincharts>
+            </div>
+            <div v-if="item.name === '频谱图'">
+              <spectrogramcharts
+                :chartData="chartData"
+                :chartLabels="chartLabels"
+                :currentIndex="currentIndex"
+                :tableData="tableData"
+                @update:currentIndex="handleCurrentIndexUpdate"
+              ></spectrogramcharts>
+            </div>
+            <div v-if="item.name === '包络谱图'">
+              <envelopecharts
+                :chartData="chartData"
+                :chartLabels="chartLabels"
+                :currentIndex="currentIndex"
+                :tableData="tableData"
+                @update:currentIndex="handleCurrentIndexUpdate"
+              ></envelopecharts>
+            </div>
+            <div v-if="item.name === '趋势图'">
+              <tendencycharts></tendencycharts>
             </div>
-          </div>
-        
-            <!-- <charts></charts> -->
           </div>
         </div>
       </div>
       <div class="data-origin">
         <el-table
-          highlight-current-row
-          @current-change="handleCurrentChange"
           ref="singleTable"
           :data="tableData"
+          :current-row-key="currentIndex"
+          @current-change="handleCurrentChange"
+          highlight-current-row
           style="width: 100%"
         >
           <el-table-column type="index" label="排序"> </el-table-column>
@@ -159,11 +168,28 @@
 
 <script>
 import * as echarts from "echarts";
-import Charts from "./components/charts.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";
+
 export default {
-  // components: { Charts },
+  components: {
+    envelopecharts,
+    spectrogramcharts,
+    tendencycharts,
+    timedomaincharts,
+  },
   data() {
     return {
+      chartData: [],
+      chartLabels: [],
+      tableData: [],
+      data: [10, 20, 30, 40], // 假设是图表的数据
+      labels: ["2024/1/1", "2024/1/2", "2024/1/3", "2024/1/4"], // 假设是时间轴数据
+      currentIndex: 0,
+      tableData: [], // 假设是来自父组件的数据
+
       company: "",
       companyoptions: [],
       unitvalue: "",
@@ -178,153 +204,30 @@ export default {
       ],
 
       fourList: [],
-
       currentRow: null, // 用于存储当前选中的行
       currentIndex: 0,
+      isChartVisible: false,
     };
   },
 
   methods: {
-    // 当前所在行高亮提示
+    handleCurrentIndexUpdate(newIndex) {
+      this.currentIndex = newIndex;
+    },
     setCurrent(row) {
-      this.$refs.singleTable.setCurrentRow(row);
+      this.$nextTick(() => {
+        if (this.$refs.singleTable) {
+          this.$refs.singleTable.setCurrentRow(row); // 设置当前行
+        } else {
+          console.warn("Cannot access $refs.singleTable: it's undefined.");
+        }
+      });
     },
-    // 当前单选
     handleCurrentChange(val) {
-      this.currentRow = val;
-      const index = this.tableData.indexOf(val);
+      this.currentRow = val; // 处理当前选中行
+      const index = this.tableData.indexOf(val); // 获取当前选中行的索引
       this.currentIndex = index; // 更新当前索引
-    },
-
-    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--;
-      } else {
-        this.currentIndex = this.tableData.length - 1;
-      }
-      this.selectRow(chartId);
-    },
-
-    // 下一条
-    nextRow(chartId) {
-      if (this.currentIndex < this.tableData.length - 1) {
-        this.currentIndex++;
-      } else {
-        this.currentIndex = 0;
-      }
-      this.selectRow(chartId);
-    },
-    selectRow(chartId) {
-      const row = this.tableData[this.currentIndex];
-      this.handleCurrentChange(row);
-      this.setCurrent(row);
-      this.$nextTick(() => {
-        this.renderChart(chartId);
-      });
+      console.log("currentIndex updated to:", this.currentIndex);
     },
 
     generate(type) {
@@ -332,31 +235,41 @@ export default {
         this.$message.warning("请先选择数据");
         return;
       }
+
       const nameMap = {
-        1: "时域图",
-        2: "频谱图",
-        3: "包络谱图",
-        // 4: "趋势图",
+        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);
-        if (this.fourList.length > 4) {
-          this.fourList.shift();
-        }
       }
-      this.$nextTick(() => {
-        const newChart = this.fourList[this.fourList.length - 1];
-        this.renderChart(newChart.id); // 为新图表渲染数据
-      });
     },
 
- 
+    tendency() {
+      if (this.tableData.length === 0) {
+        this.$message.warning("数据为空，无法生成图表");
+        return;
+      }
+      const newItem = {
+        name: "趋势图",
+        isMinimized: false,
+        id: `chart-${Date.now()}`,
+      };
+      this.fourList.push(newItem);
+    },
+
+
 
+    
     // 缩小
     lessen(index) {
       if (!this.fourList[index].isMinimized) {
@@ -377,7 +290,6 @@ export default {
       this.fourList.splice(index, 1);
       console.log("3");
     },
-
     zhankai() {
       this.fourList.forEach((item) => {
         item.isMinimized = false;
@@ -443,7 +355,6 @@ export default {
   position: relative;
 }
 
-
 .subject {
   height: 280px;
   transition: all 0.3s ease;
@@ -486,23 +397,7 @@ export default {
   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;
-  }
-}
+// .line-chart {
+//   position: relative;
+// }
 </style>

src/views/ledger/componentBJ/fadianji.vue

@@ -3,138 +3,313 @@
     <div class="message">
       <div class="message-DIV">
         <p>润滑油品牌：</p>
-        <el-select clearable v-model="brandvalue" placeholder="请选择">
+        <el-select
+          clearable
+          @change="dynamo"
+          v-model="lubricantBrand"
+          placeholder="请选择"
+        >
           <el-option
-            v-for="item in brandoptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in fdjPP"
+            :key="item"
+            :label="item"
+            :value="item"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
       <div class="message-DIV">
         <p>润滑油型号：</p>
-        <el-select clearable v-model="modelvalue" placeholder="请选择">
+        <el-select
+          :disabled="!lubricantBrand"
+          clearable
+          v-model="lubricantModel"
+          placeholder="请选择"
+          @change="Rhyxinhao"
+        >
           <el-option
-            v-for="item in modeloptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in lubricatingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
 
       <div class="message-DIV">
         <p>极对数：</p>
-        <el-input v-model="polepair" @input="validateNumericInput"></el-input>
+        <el-input v-model="polePairs" @input="validateNumericInput"></el-input>
       </div>
 
       <div class="message-DIV">
         <p>冷却方式：</p>
-        <el-select clearable v-model="cooling" placeholder="请选择">
+        <el-select
+          clearable
+          @change="ONcooling"
+          v-model="coolingMethod"
+          placeholder="请选择"
+        >
           <el-option
-            v-for="item in coolingoptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in fdjLQ"
+            :key="item.keyId"
+            :label="item.valueName"
+            :value="item.keyId"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
 
       <!-- 驱动端 -->
       <div class="message-DIV">
         <p>驱动轴承品牌：</p>
-        <el-select clearable v-model="drivePingPaiValue" placeholder="请选择">
+        <el-select
+          clearable
+          @change="drive"
+          v-model="driveEndBearingBrand"
+          placeholder="请选择"
+        >
           <el-option
-            v-for="item in drivePingPaioptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in fdjZC"
+            :key="item"
+            :label="item"
+            :value="item"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
       <div class="message-DIV">
         <p>驱动轴承型号：</p>
-        <el-select clearable v-model="driveXingHaoValue" placeholder="请选择">
+        <el-select
+          clearable
+          filterable
+          @change="drivemodel"
+          :disabled="!driveEndBearingBrand"
+          v-model="driveEndBearingModel"
+          placeholder="请选择"
+        >
           <el-option
-            v-for="item in driveXingHaooptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
       <!-- 非驱动端 -->
       <div class="message-DIV">
         <p>非驱动轴承品牌：</p>
-        <el-select clearable v-model="nodrivePingPaiValue" placeholder="请选择">
+        <el-select
+          clearable
+          @change="undriven"
+          v-model="nonDriveEndBearingBrand"
+          placeholder="请选择"
+        >
           <el-option
-            v-for="item in nodrivePingPaioptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in fdjZC"
+            :key="item"
+            :label="item"
+            :value="item"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
       <div class="message-DIV">
         <p>非驱动轴承型号：</p>
-        <el-select clearable v-model="nodriveXingHaoValue" placeholder="请选择">
+        <el-select
+          clearable
+          filterable
+          :disabled="!nonDriveEndBearingBrand"
+          v-model="nonDriveEndBearingModel"
+          @change="NOdrivemodel"
+          placeholder="请选择"
+        >
           <el-option
-            v-for="item in nodriveXingHaooptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
           >
-          </el-option
-        ></el-select>
+          </el-option>
+        </el-select>
       </div>
     </div>
   </div>
 </template>
-  
-  <script>
+
+<script>
+import { getBrandModelNameOrModelNumber } from "@/api/maintain";
 export default {
+  props: {
+    fdjPP: {
+      type: Array,
+      required: true,
+    },
+    fdjZC: {
+      type: Array,
+      required: true,
+    },
+    fdjLQ: {
+      type: Array,
+      required: true,
+    },
+    unitDynamoDto: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   data() {
     return {
-      brandvalue: "",
-      brandoptions: [],
-      modelvalue: "",
-      modeloptions: [],
-      polepair: "",
-      cooling: "",
+      
+      form: {},
+      lubricantBrand: "",
+      lubricantModel: "",
+      polePairs: "",
+      coolingMethod: "",
+      driveEndBearingBrand: "", 
+      driveEndBearingModel: "",
+      nonDriveEndBearingBrand: "",
+      nonDriveEndBearingModel: "",
       coolingoptions: [],
-      drivePingPaiValue: "",
-      drivePingPaioptions: [],
-      driveXingHaoValue: "",
-      driveXingHaooptions: [],
-      nodrivePingPaiValue: "",
-      nodrivePingPaioptions: [],
-      nodriveXingHaoValue: "",
-      nodriveXingHaooptions: [],
+      lubricatingXXoptions: [],
+      bearingXXoptions: [],
     };
   },
+  created() {
+    if (this.unitDynamoDto && typeof this.unitDynamoDto === "object") {
+      this.initializeData(this.unitDynamoDto);
+    }
+  },
+  watch: {
+    unitDynamoDto: {
+      immediate: true, // 初始化时触发
+      deep: true, // 深度监听
+      handler(newVal) {
+        if (newVal && typeof newVal === "object") {
+          this.initializeData(newVal);
+        } else {
+          console.warn("unitDynamoDto 为空或无效:", newVal);
+        }
+      },
+    },
+  },
   methods: {
+    initializeData(newVal = {}) {
+      console.log("发电机-unitDynamoDto:", newVal);
+
+      // 确保 newVal 是有效的对象
+      if (!newVal || typeof newVal !== "object" || Array.isArray(newVal)) {
+        console.warn("传入的数据无效，跳过初始化:", newVal);
+        return;
+      }
+
+      // 获取子组件的所有字段
+      const dataFields = Object.keys(this.$data);
+
+      // 遍历接口返回的数据
+      Object.keys(newVal).forEach((key) => {
+        const value = newVal[key];
+
+        // 如果接口返回的数据值是对象或数组，跳过
+        if (typeof value === "object" || Array.isArray(value)) {
+          return;
+        }
+
+        // 如果 key 在子组件的 data 中存在，且是基本类型，则赋值
+        if (dataFields.includes(key)) {
+          this[key] = value;
+        } else {
+          // 如果 key 不在 data 中，动态添加该字段并赋值
+          this.$set(this.form, key, value);
+        }
+      });
+      console.log(this.$data);
+    },
     validateNumericInput(event) {
-      const newValue = this.polepair.replace(/[^0-9]/g, "");
-      if (this.polepair !== newValue) {
+      const newValue = this.polePairs.replace(/[^0-9]/g, "");
+      if (this.polePairs !== newValue) {
         this.$message({
           message: "请输入数字！",
           type: "warning",
         });
       }
-      this.polepair = newValue;
+      this.polePairs = newValue;
+
+      this.$emit("update", { key: "polePairs", value: this.polePairs });
+    },
+    dynamo() {
+      const params = {
+        unitType: 2,
+        manufacture: this.lubricantBrand,
+      };
+
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.lubricatingXXoptions = res.data;
+        this.lubricantModel = "";
+        this.$emit("update", {
+          key: "lubricantBrand",
+          value: this.lubricantBrand,
+        });
+      });
+    },
+    drive() {
+      const params = {
+        unitType: 1,
+        manufacture: this.driveEndBearingBrand,
+      };
+
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.driveEndBearingModel = "";
+        this.$emit("update", {
+          key: "driveEndBearingBrand",
+          value: this.driveEndBearingBrand,
+        });
+      });
+    },
+    undriven() {
+      const params = {
+        unitType: 1,
+        manufacture: this.nonDriveEndBearingBrand,
+      };
+
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.nonDriveEndBearingModel = "";
+        this.$emit("update", {
+          key: "nonDriveEndBearingBrand",
+          value: this.nonDriveEndBearingBrand,
+        });
+      });
+    },
+    // 润滑油型号变更时通知父组件
+    Rhyxinhao() {
+      this.$emit("update", {
+        key: "lubricantModel",
+        value: this.lubricantModel,
+      });
+    },
+    ONcooling() {
+      this.$emit("update", { key: "coolingMethod", value: this.coolingMethod });
+    },
+    drivemodel() {
+      this.$emit("update", {
+        key: "driveEndBearingModel",
+        value: this.driveEndBearingModel,
+      });
+    },
+    NOdrivemodel() {
+      this.$emit("update", {
+        key: "nonDriveEndBearingModel",
+        value: this.nonDriveEndBearingModel,
+      });
     },
   },
 };
 </script>
-  
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
 .message {
   display: flex;
   flex-wrap: wrap;
@@ -147,7 +322,6 @@ export default {
       width: 223px;
     }
     p {
-      //   margin-right: 10px;
       width: 140px;
       line-height: 40px;
       height: 40px;
@@ -155,4 +329,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/ledger/componentBJ/zhuzhou copy.vue

@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <div class="message">
+      <div class="message-DIV">
+        <p>润滑油品牌：</p>
+        <el-select
+          clearable
+          v-model="lubricantBrand"
+          placeholder="请选择"
+          @change="linkage"
+        >
+          <el-option
+            v-for="item in lubricatingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>润滑油型号：</p>
+        <el-select
+          clearable
+          :disabled="!lubricantBrand"
+          v-model="lubricantModel"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in lubricatingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>前轴承品牌：</p>
+        <el-select
+          clearable
+          @change="ZQqian"
+          v-model="frontPingPaiValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>前轴承型号：</p>
+        <el-select
+          clearable
+          filterable
+          :disabled="!frontPingPaiValue"
+          v-model="frontBearingModel"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>后轴承品牌：</p>
+        <el-select
+          clearable
+          @change="ZQhou"
+          v-model="rearBearingBrand"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>后轴承型号：</p>
+        <el-select
+          clearable
+          filterable
+          :disabled="!rearBearingBrand"
+          v-model="rearBearingModel"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+export default {
+  data() {
+    return {
+      lubricantBrand: "",
+      lubricantModel: "",
+      frontPingPaiValue: "",
+      frontBearingModel: "",
+      rearBearingBrand: "",
+      rearBearingModel: "",
+      // 润滑油
+      lubricatingPPoptions: [],
+      lubricatingXXoptions: [],
+      // 轴承
+      bearingPPoptions: [],
+      bearingXXoptions: [],
+    };
+  },
+  methods: {
+    linkage() {
+      const params = {
+        unitType: 2,
+        manufacture: this.lubricantBrand,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.lubricatingXXoptions = res.data;
+        this.lubricantModel = "";
+      });
+    },
+    ZQqian() {
+      const params = {
+        unitType: 1,
+        manufacture: this.frontPingPaiValue,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.frontBearingModel = "";
+      });
+    },
+    ZQhou() {
+      const params = {
+        unitType: 1,
+        manufacture: this.rearBearingBrand,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.rearBearingModel = "";
+      });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.message {
+  display: flex;
+  flex-wrap: wrap;
+  .message-DIV {
+    width: 25%;
+    display: flex;
+    margin-bottom: 20px;
+    justify-content: space-between;
+    p {
+      //   margin-right: 10px;
+      width: 140px;
+      line-height: 40px;
+      height: 40px;
+      text-align: right;
+    }
+  }
+}
+</style>

src/views/ledger/componentBJ/zhuzhou.vue

@@ -1,104 +1,297 @@
 <template>
   <div>
     <div class="message">
+      <!-- 润滑油品牌 -->
       <div class="message-DIV">
         <p>润滑油品牌：</p>
-        <el-select clearable v-model="brandvalue" placeholder="请选择">
+        <el-select
+          clearable
+          v-model="lubricantBrand"
+          placeholder="请选择润滑油品牌"
+          @change="onLubricantBrandChange"
+        >
           <el-option
-            v-for="item in brandoptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option
-        ></el-select>
+            v-for="item in rhyPP"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </div>
+
+      <!-- 润滑油型号 -->
       <div class="message-DIV">
         <p>润滑油型号：</p>
-        <el-select clearable v-model="modelvalue" placeholder="请选择">
+        <el-select
+          clearable
+          :disabled="!lubricantBrand"
+          v-model="lubricantModel"
+          placeholder="请选择润滑油型号"
+          @change="onLubricantModelChange"
+        >
           <el-option
-            v-for="item in modeloptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option
-        ></el-select>
+            v-for="item in lubricantModelOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </div>
+
+      <!-- 前轴承品牌 -->
       <div class="message-DIV">
         <p>前轴承品牌：</p>
-        <el-select clearable v-model="frontPingPaiValue" placeholder="请选择">
+        <el-select
+          clearable
+          v-model="frontBearingBrand"
+          placeholder="请选择前轴承品牌"
+          @change="onFrontBearingBrandChange"
+        >
           <el-option
-            v-for="item in frontPingPaioptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option
-        ></el-select>
+            v-for="item in rhyZC"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </div>
+
+      <!-- 前轴承型号 -->
       <div class="message-DIV">
         <p>前轴承型号：</p>
-        <el-select clearable v-model="frontXingHaoValue" placeholder="请选择">
+        <el-select
+          clearable
+          filterable
+          :disabled="!frontBearingBrand"
+          v-model="frontBearingModel"
+          placeholder="请选择前轴承型号"
+          @change="onFrontBearingModelChange"
+        >
           <el-option
-            v-for="item in frontXingHaooptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option
-        ></el-select>
+            v-for="item in bearingModelOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </div>
+
+      <!-- 后轴承品牌 -->
       <div class="message-DIV">
         <p>后轴承品牌：</p>
-        <el-select clearable v-model="backPingPaiValue" placeholder="请选择">
+        <el-select
+          clearable
+          v-model="rearBearingBrand"
+          placeholder="请选择后轴承品牌"
+          @change="onRearBearingBrandChange"
+        >
           <el-option
-            v-for="item in backPingPaioptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option
-        ></el-select>
+            v-for="item in rhyZC"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </div>
+
+      <!-- 后轴承型号 -->
       <div class="message-DIV">
         <p>后轴承型号：</p>
-        <el-select clearable v-model="backXingHaoValue" placeholder="请选择">
+        <el-select
+          clearable
+          filterable
+          :disabled="!rearBearingBrand"
+          v-model="rearBearingModel"
+          placeholder="请选择后轴承型号"
+          @change="onRearBearingModelChange"
+        >
           <el-option
-            v-for="item in backXingHaooptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-          </el-option
-        ></el-select>
+            v-for="item in bearingModelOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
       </div>
     </div>
   </div>
 </template>
-  
-  <script>
+
+<script>
+import { getBrandModelNameOrModelNumber } from "@/api/maintain";
+
 export default {
+  props: {
+    rhyPP: {
+      type: Array,
+      // required: true,
+      default() {
+        return [];
+      },
+    },
+    rhyZC: {
+      type: Array,
+      // required: true,
+      default() {
+        return [];
+      },
+    },
+    unitBearingsVo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   data() {
     return {
-      brandvalue: "",
-      brandoptions: [],
-      modelvalue: "",
-      modeloptions: [],
-      frontPingPaiValue: "",
-      frontPingPaioptions: [],
-      frontXingHaoValue: "",
-      frontXingHaooptions: [],
-      backXingHaoValue: "",
-      backXingHaooptions: [],
-      backPingPaiValue: "",
-      backPingPaioptions: [],
+      form: {},
+      lubricantBrand: "",
+      lubricantModel: "",
+      frontBearingBrand: "",
+      frontBearingModel: "",
+      rearBearingBrand: "",
+      rearBearingModel: "",
+      lubricantModelOptions: [], // 润滑油型号选项
+      bearingModelOptions: [], // 轴承型号选项
     };
   },
+  created() {
+    if (this.unitBearingsVo && typeof this.unitBearingsVo === "object") {
+      this.initializeData(this.unitBearingsVo);
+    }
+  },
+  watch: {
+    unitBearingsVo: {
+      immediate: true, // 初始化时触发
+      deep: true, // 深度监听
+      handler(newVal) {
+        if (newVal && typeof newVal === "object") {
+          this.initializeData(newVal);
+        } else {
+          console.warn("unitBearingsVo 为空或无效:", newVal);
+        }
+      },
+    },
+  },
+  methods: {
+    initializeData(newVal = {}) {
+      console.log("主轴:", newVal);
+      // 确保 newVal 是有效的对象
+      if (!newVal || typeof newVal !== "object" || Array.isArray(newVal)) {
+        console.warn("传入的数据无效，跳过初始化:", newVal);
+        return;
+      }
+      // 获取子组件的所有字段
+      const dataFields = Object.keys(this.$data);
+
+      // 遍历接口返回的数据
+      Object.keys(newVal).forEach((key) => {
+        const value = newVal[key];
+        // 如果接口返回的数据值是对象或数组，跳过
+        if (typeof value === "object" || Array.isArray(value)) {
+          return;
+        }
+        // 如果 key 在子组件的 data 中存在，且是基本类型，则赋值
+        if (dataFields.includes(key)) {
+          this[key] = value;
+        } else {
+          // 如果 key 不在 data 中，动态添加该字段并赋值
+          this.$set(this.form, key, value);
+        }
+      });
+      console.log(this.$data);
+    },
+
+    /**
+     * 润滑油品牌变更时更新润滑油型号选项并通知父组件
+     */
+    onLubricantBrandChange() {
+      const params = {
+        unitType: 2,
+        manufacture: this.lubricantBrand,
+      };
+
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.lubricantModelOptions = res.data;
+        this.lubricantModel = ""; // 清空已选择的润滑油型号
+        this.$emit("update", {
+          key: "lubricantBrand",
+          value: this.lubricantBrand,
+        });
+      });
+    },
+
+    /**
+     * 润滑油型号变更时通知父组件
+     */
+    onLubricantModelChange() {
+      this.$emit("update", {
+        key: "lubricantModel",
+        value: this.lubricantModel,
+      });
+    },
+
+    /**
+     * 前轴承品牌变更时更新前轴承型号选项并通知父组件
+     */
+    onFrontBearingBrandChange() {
+      const params = {
+        unitType: 1,
+        manufacture: this.frontBearingBrand,
+      };
+
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingModelOptions = res.data;
+        this.frontBearingModel = ""; // 清空已选择的前轴承型号
+        this.$emit("update", {
+          key: "frontBearingBrand",
+          value: this.frontBearingBrand,
+        });
+      });
+    },
+
+    /**
+     * 前轴承型号变更时通知父组件
+     */
+    onFrontBearingModelChange() {
+      this.$emit("update", {
+        key: "frontBearingModel",
+        value: this.frontBearingModel,
+      });
+    },
+
+    /**
+     * 后轴承品牌变更时更新后轴承型号选项并通知父组件
+     */
+    onRearBearingBrandChange() {
+      const params = {
+        unitType: 1,
+        manufacture: this.rearBearingBrand,
+      };
+
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingModelOptions = res.data;
+        this.rearBearingModel = ""; // 清空已选择的后轴承型号
+        this.$emit("update", {
+          key: "rearBearingBrand",
+          value: this.rearBearingBrand,
+        });
+      });
+    },
+
+    /**
+     * 后轴承型号变更时通知父组件
+     */
+    onRearBearingModelChange() {
+      this.$emit("update", {
+        key: "rearBearingModel",
+        value: this.rearBearingModel,
+      });
+    },
+  },
 };
 </script>
-  
-  <style lang="scss" scoped>
+
+<style lang="scss" scoped>
 .message {
   display: flex;
   flex-wrap: wrap;
@@ -108,7 +301,6 @@ export default {
     margin-bottom: 20px;
     justify-content: space-between;
     p {
-      //   margin-right: 10px;
       width: 140px;
       line-height: 40px;
       height: 40px;
@@ -116,4 +308,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/ledger/data.js

@@ -0,0 +1,74 @@
+const data = {
+  runhuayou: "",
+  runhuayouType: "",
+  // 轴
+  unitGearboxStructureDtoList: [
+    {
+      bearingBrand: "",
+      bearingModel: "",
+      gearRingTeethCount: "",
+      gearboxCode: "",
+      gearboxStructure: 0,
+      id: 0,
+      largeGearTeethCount: "",
+      planetWheelCount: "",
+      planetWheelTeethCount: "",
+      planetaryGearGrade: 0,
+      smallGearTeethCount: "",
+      sunWheelBearingBrand: "",
+      sunWheelBearingModel: "",
+      sunWheelTeethCount: "",
+    },
+    {
+      bearingBrand: "",
+      bearingModel: "",
+      gearRingTeethCount: "",
+      gearboxCode: "",
+      gearboxStructure: 0,
+      id: 0,
+      largeGearTeethCount: "",
+      planetWheelCount: "",
+      planetWheelTeethCount: "",
+      planetaryGearGrade: 1,
+      smallGearTeethCount: "",
+      sunWheelBearingBrand: "",
+      sunWheelBearingModel: "",
+      sunWheelTeethCount: "",
+    },
+    {
+      bearingBrand: "",
+      bearingModel: "",
+      gearRingTeethCount: "",
+      gearboxCode: "",
+      gearboxStructure: 0,
+      id: 0,
+      largeGearTeethCount: "",
+      planetWheelCount: "",
+      planetWheelTeethCount: "",
+      planetaryGearGrade: 2,
+      smallGearTeethCount: "",
+      sunWheelBearingBrand: "",
+      sunWheelBearingModel: "",
+      sunWheelTeethCount: "",
+    },
+  ],
+  // 结构
+  unitGearboxStructureDtoList: [
+    {
+      // bearingBrand: "",
+      // bearingModel: "",
+      // gearRingTeethCount: "",
+      // gearboxCode: "",
+      // gearboxStructure: 0,
+      // id: 0,
+      // largeGearTeethCount: "",
+      // planetWheelCount: "",
+      // planetWheelTeethCount: "",
+      // planetaryGearGrade: 0,
+      // smallGearTeethCount: "",
+      // sunWheelBearingBrand: "",
+      // sunWheelBearingModel: "",
+      // sunWheelTeethCount: "",
+    },
+  ],
+};

src/views/ledger/maintain.vue

@@ -12,18 +12,27 @@
     </div>
     <div class="assemblyList">
       <el-table :data="tableData" border style="width: 100%">
-        <el-table-column prop="unitModuleName" label="部件模块">
+        <el-table-column prop="unitModuleName" align="center" label="部件模块">
         </el-table-column>
-        <el-table-column prop="contentsName" label="部件名称">
+        <el-table-column prop="contentsName" align="center " label="部件名称  ">
         </el-table-column>
-        <el-table-column prop="contentsType" label="部件编码">
+        <el-table-column
+          prop="associatedFunctionTypeName"
+          align="center"
+          label="部件类型 "
+        >
+        </el-table-column>
+        <el-table-column prop="contentsType" align="center" label="部件编码">
+        </el-table-column>
+        <el-table-column prop="createTime" align="center" label="创建时间" >
+        </el-table-column>
+        <el-table-column prop="updateTime" align="center" label="维护时间" >
         </el-table-column>
-        <el-table-column prop="updateTime" label="维护时间"> </el-table-column>
-        <el-table-column fixed="right" label="操作">
+        <el-table-column fixed="right" align="center" label="操作" >
           <template slot-scope="scope">
-            <el-button @click="handleClick(scope.row)" type="text" size="small"
+            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small"
               >编辑</el-button
-            >
+            > -->
             <el-button
               v-if="scope.row.associatedFunctionType === 1"
               @click="ONallocation(scope.row)"
@@ -44,6 +53,16 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page.sync="pageNum"
+        :page-size="pageSize"
+        layout="total, prev, pager, next"
+        :total="total"
+        class="fenye"
+      >
+      </el-pagination>
     </div>
 
     <el-dialog
@@ -101,16 +120,34 @@
     <el-drawer
       title="新增"
       :visible.sync="drawer"
-      size="22%"
+      size="23%"
       :with-header="true"
+      @close="handleClose"
       class="drawers"
     >
       <div class="drawersDIV">
-        <el-input size="small " v-model="drawervalue"></el-input>
+        <el-input
+          size="small "
+          placeholder="请输入品牌"
+          v-model="brandvalue"
+        ></el-input>
+        <span>-</span>
+        <el-input
+          size="small "
+          placeholder="请输入型号"
+          v-model="modelvalue"
+        ></el-input>
+        <el-button
+          size="small"
+          type="primary"
+          style="margin-left: 5px"
+          @click="fetchData"
+          >查询</el-button
+        >
         <el-button size="small" @click="newtype('1')">新增</el-button>
-        <el-table :data="tableData" border style="width: 100%">
-          <el-table-column prop="date" label="品牌"> </el-table-column>
-          <el-table-column prop="name" label="型号"> </el-table-column>
+        <el-table :data="relevanceData" border style="width: 100%">
+          <el-table-column prop="manufacture" label="品牌"> </el-table-column>
+          <el-table-column prop="modelNumber" label="型号"> </el-table-column>
           <el-table-column fixed="right" label="操作" width="100">
             <template slot-scope="scope">
               <el-button
@@ -119,10 +156,24 @@
                 size="small"
                 >编辑</el-button
               >
-              <el-button type="text" size="small">删除</el-button>
+              <el-button type="text" @click="DELpingpai(scope.row)" size="small"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
+
+        <el-pagination
+          @size-change="drawerhandleSizeChange"
+          @current-change="drawerhandleCurrentChange"
+          :current-page.sync="pageNum"
+          :page-size="pageSize"
+          :pager-count="5"
+          layout="prev, pager, next"
+          :total="drawertotal"
+          class="fenye"
+        >
+        </el-pagination>
       </div>
     </el-drawer>
 
@@ -144,7 +195,7 @@
       </p>
 
       <div class="button-container">
-        <el-button class="but" size="small" type="primary" @click="submit('2')">
+        <el-button class="but" size="small" type="primary" @click="Glsubmit">
           确定
         </el-button>
       </div>
@@ -158,16 +209,18 @@
       class="drawers"
     >
       <div class="drawersDIV">
-        <el-input size="small" v-model="drawervalue"></el-input>
-        <el-button size="small" @click="newtype('2')">新增</el-button>
+        <el-button
+          style="margin-bottom: 10px"
+          size="small"
+          @click="newtype('2')"
+          >新增</el-button
+        >
         <el-table :data="nothaveData" border style="width: 100%">
-          <el-table-column prop="contentsName" label="型号"> </el-table-column>
+          <el-table-column prop="contentsName" label="属性名称">
+          </el-table-column>
           <el-table-column fixed="right" label="操作" width="100">
             <template slot-scope="scope">
-              <el-button
-                @click="handleClick(scope.row)"
-                type="text"
-                size="small"
+              <el-button @click="compile(scope.row)" type="text" size="small"
                 >编辑</el-button
               >
               <el-button type="text" @click="DELshuxing(scope.row)" size="small"
@@ -186,15 +239,10 @@
       :before-close="handleClose"
     >
       <p class="maintain">
-        类型：<span class="one"
+        名称：<span class="one"
           ><el-input v-model="bujianval" size="small"></el-input></span
         ><span class="Sptwo">
-          <el-button
-            class="but"
-            size="small"
-            type="primary"
-            @click="submit('1')"
-          >
+          <el-button class="but" size="small" type="primary" @click="submit">
             确定
           </el-button></span
         >
@@ -212,8 +260,13 @@ import {
   createUnitDictProperty,
   getUnitDictConstantsList,
   delUnitDictProperty,
+  updateUnitDictProperty,
+  saveUnitDictBrandModel,
+  getUnitDictBrandModelPage,
+  delUnitDictBrandModel,
+  updateUnitDictBrandModel,
 } from "@/api/maintain.js";
-import { log } from "plotly.js-dist";
+
 export default {
   data() {
     return {
@@ -237,12 +290,42 @@ export default {
       rowList: {},
       bujianval: "",
       nothaveData: [],
+      editType: "",
+      currentRow: "",
+      compilerow: {},
+      total: 0,
+      drawertotal: 0,
+      pageNum: 1,
+      pageSize: 10,
+      relevanceData: [],
+      drawerList: {},
+      brandvalue: "",
+      modelvalue: "",
+      pprow: {},
     };
   },
   created() {
     this.GETquery();
+    this.GETmokuai();
   },
   methods: {
+    load() {
+      this.$message.success("加载下一页");
+      this.tableData = this.tableData.concat(exampleData);
+      //此时也可以调用接口，然后做数组的拼接
+    },
+    // 查询
+    GETquery() {
+      const params = {
+        contentsName: this.nameOfparts,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+      };
+      getUnitDictConstantsPage(params).then((res) => {
+        this.tableData = res.data.list;
+        this.total = res.data.totalSize;
+      });
+    },
     // 获取属性
     GETmokuai() {
       getDictList({ dictType: 3 }).then((res) => {
@@ -255,8 +338,14 @@ export default {
         this.functionoptions = res.data;
       });
     },
+    // 打开新增
+    newly() {
+      this.dialogVisible = true;
+    },
+
     // 新增属性
     handleConfirm() {
+      // 构建 params 对象
       const params = {
         associatedFunctionType: this.functionvalue,
         contentsDictKey: this.namevalue,
@@ -267,43 +356,89 @@ export default {
         parentId: 0,
       };
 
+      // 验证 params 中的字段是否为空
+      if (
+        !params.associatedFunctionType ||
+        !params.contentsDictKey ||
+        !params.contentsName ||
+        !params.unitModule
+      ) {
+        this.$message({
+          message: "请确保所有字段都已填写！",
+          type: "warning",
+        });
+        return; // 阻止提交
+      }
+
+      // 提交数据
       createUnitDict(params).then((res) => {
-        if (res.status == true) {
+        if (res.status === true) {
           this.$message({
             message: "恭喜你，这是一条成功消息",
             type: "success",
           });
           this.dialogVisible = false;
           this.GETquery();
+          this.handleClose();
         }
       });
     },
-    // 查询
-    GETquery() {
-      const params = {
-        contentsName: this.nameOfparts,
-        pageNum: 1,
-        pageSize: 10,
-      };
-      getUnitDictConstantsPage(params).then((res) => {
-        this.tableData = res.data.list;
-      });
-    },
-    // 删除属性
+
+    // 删除
     ONdelete(row) {
-      const params = {
-        contentsType: row.contentsType,
-        id: row.id,
-      };
-      delUnitDict(params).then((res) => {
-        this.tableData = this.tableData.filter((item) => item.id !== row.id);
-        this.$message({
-          type: "success",
-          message: "删除成功!",
+      this.$confirm(
+        `确定要删除该项吗？（部件模块：${row.unitModuleName}，部件名称：${row.contentsName}）`,
+        "删除确认",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          // Proceed with deletion after confirmation
+          const params = {
+            contentsType: row.contentsType,
+            id: row.id,
+          };
+          delUnitDict(params).then((res) => {
+            if (res.status === true) {
+              this.tableData = this.tableData.filter(
+                (item) => item.id !== row.id
+              );
+              this.GETquery();
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+            } else {
+              this.$message({
+                type: "error",
+                message: "删除失败，请稍后再试。",
+              });
+            }
+          });
+        })
+        .catch(() => {
+          // User canceled the deletion
+          this.$message({
+            type: "info",
+            message: "删除已取消。",
+          });
         });
-      });
     },
-    // 非关联
+
+    // 分页
+    handleSizeChange(pageSize) {
+      this.pageSize = pageSize; // 更新每页显示条数
+      this.GETquery(); // 重新获取数据
+    },
+    handleCurrentChange(pageNum) {
+      this.pageNum = pageNum; // 更新当前页
+      this.GETquery(); // 重新获取数据
+    },
+
+    // 常用类型
     ONallocation(row) {
       this.rowList = row;
       this.notdrawer = true;
@@ -314,15 +449,55 @@ export default {
       });
     },
 
-    submit(type) {
-      if (type === "1") {
-        const params = {
+    // 删除常用
+    DELshuxing(row) {
+      const params = {
+        updateBy: row.updateBy,
+        id: row.id,
+      };
+      delUnitDictProperty(params).then((res) => {
+        this.nothaveData = this.nothaveData.filter(
+          (item) => item.id !== row.id
+        );
+      });
+    },
+
+    // 编辑常用
+    compile(row) {
+      this.maintainVisible = true;
+      this.bujianval = row.contentsName;
+      this.compilerow = row;
+      this.editType = "edit"; // 设置编辑模式
+    },
+    // 提交
+    submit() {
+      const params = {
+        contentsName: this.bujianval,
+        contentsType: this.rowList.contentsType,
+        parentId: this.rowList.id,
+        unitModule: this.rowList.unitModule,
+        contentsDictKey: 0,
+      };
+      console.log(params, "1");
+
+      if (this.editType === "edit") {
+        // 编辑操作
+        const updateParams = {
           contentsName: this.bujianval,
-          contentsType: this.rowList.contentsType,
-          parentId: this.rowList.id,
-          unitModule: this.rowList.unitModule,
-          contentsDictKey: 0,
+          id: this.compilerow.id, // 编辑时需要传递项的 ID
+          updateBy: 0, // 更新人的 ID（如果需要）
         };
+        console.log(updateParams, "2");
+        updateUnitDictProperty(updateParams).then((res) => {
+          this.maintainVisible = false;
+          getUnitDictConstantsList({
+            contentsType: this.rowList.contentsType,
+          }).then((res) => {
+            this.nothaveData = res.data;
+          });
+        });
+      } else {
+        // 新增操作
         createUnitDictProperty(params).then((res) => {
           this.maintainVisible = false;
           getUnitDictConstantsList({
@@ -331,38 +506,167 @@ export default {
             this.nothaveData = res.data;
           });
         });
-      } else if (type === "2") {
-        this.relevanceVisible = false;
       }
+      this.handleClose();
     },
+    // 品牌
 
-    DELshuxing(row) {
+
+    drawerhandleSizeChange(newSize) {
+      this.pageSize = newSize;
+      this.fetchData(); 
+    },
+
+    drawerhandleCurrentChange(newPage) {
+      this.pageNum = newPage;
+      this.fetchData(); 
+    },
+
+    fetchData() {
       const params = {
-        updateBy: row.updateBy,
-        id: row.id,
+        contentsDictKey: this.drawerList.contentsDictKey,
+        manufacture: this.brandvalue,
+        modelNumber: this.modelvalue,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
       };
-      delUnitDictProperty(params).then((res) => {
-        this.nothaveData = this.nothaveData.filter(
-          (item) => item.id !== row.id
-        );
+      getUnitDictBrandModelPage(params).then((res) => {
+        this.relevanceData = res.data.list;
+        this.drawertotal = res.data.totalSize;
       });
     },
 
     ONbrand(row) {
       this.drawer = true;
-      console.log("row", row);
+      this.drawerList = row;
+      console.log(row);
+      this.fetchData();
     },
 
-    newly() {
-      this.dialogVisible = true;
-      this.GETmokuai();
+    // 提交品牌
+    Glsubmit() {
+      const params = {
+        manufacture: this.brand,
+        modelNumber: this.guige,
+        unitType: this.drawerList ? this.drawerList.contentsDictKey : "", // 确保 this.drawerList 存在
+      };
+
+      if (!params.manufacture || !params.modelNumber || !params.unitType) {
+        this.$message({
+          message: "请确保所有字段都已填写！",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (this.editType === "edit") {
+        // Edit operation
+        const updateParams = {
+          id: this.pprow.id, // The ID of the item being edited
+          manufacture: params.manufacture,
+          modelNumber: params.modelNumber,
+          unitType: params.unitType,
+        };
+        updateUnitDictBrandModel(updateParams).then((res) => {
+          if (res.status === true) {
+            this.$message({
+              message: "更新成功！",
+              type: "success",
+            });
+            this.notdrawer = false;
+            this.handleClose();
+            this.editType = null; // Reset editType after a successful edit
+            if (this.drawerList) {
+              this.ONbrand(this.drawerList);
+            } else {
+              this.$message({
+                message: "未选择有效的部件信息，无法更新相关数据。",
+                type: "error",
+              });
+            }
+          }
+        });
+      } else {
+        // New entry
+        saveUnitDictBrandModel(params).then((res) => {
+          if (res.status === true) {
+            this.$message({
+              message: "恭喜你，这是一条成功消息",
+              type: "success",
+            });
+            this.notdrawer = false;
+            this.handleClose();
+            if (this.drawerList) {
+              this.ONbrand(this.drawerList);
+            } else {
+              this.$message({
+                message: "未选择有效的部件信息，无法更新相关数据。",
+                type: "error",
+              });
+            }
+          }
+        });
+      }
+    },
+
+    //删除品牌
+    DELpingpai(row) {
+      this.$confirm("确定删除该品牌吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delUnitDictBrandModel({ id: row.id }).then((res) => {
+            if (res.status === true) {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.relevanceData = this.relevanceData.filter(
+                (item) => item.id !== row.id
+              );
+            } else {
+              this.$message({
+                type: "error",
+                message: "删除失败，请重试！",
+              });
+            }
+          });
+        })
+        .catch(() => {
+          // 用户点击了"取消"
+          this.$message({
+            type: "info",
+            message: "已取消删除操作",
+          });
+        });
+    },
+
+    handleClick(row) {
+      this.pprow = row;
+      this.relevanceVisible = true;
+      this.brand = row.manufacture;
+      this.guige = row.modelNumber;
+      this.editType = "edit"; // 设置编辑模式
     },
 
+    // 清空选项
     handleClose() {
+      this.modulevalue = "";
+      this.namevalue = "";
+      this.functionvalue = "";
+      this.bujianval = "";
+      this.brand = "";
+      this.guige = "";
+      this.brandvalue = "";
+      this.modelvalue = "";
       this.dialogVisible = false;
+      this.maintainVisible = false;
+      this.relevanceVisible = false;
+      this.drawer = false;
     },
 
-    handleClick() {},
     newtype(type) {
       if (type === "1") {
         this.relevanceVisible = true;
@@ -394,10 +698,14 @@ export default {
 .assemblyList {
   margin: 20px 0;
 }
+.fenye {
+  margin: 20px auto;
+  text-align: center;
+}
 .button-container {
   display: flex;
-  justify-content: center; /* Center the button horizontally */
-  margin-top: 20px; /* Add some space above the button */
+  justify-content: center;
+  margin-top: 20px;
   .but {
     width: 100px;
   }
@@ -408,8 +716,8 @@ export default {
     margin-bottom: 20px;
   }
   .el-input {
-    width: 220px;
-    margin-right: 20px;
+    width: 100px;
+    // margin-right: 20px;
     margin-bottom: 20px;
   }
 }

src/views/ledger/milltype.vue

@@ -144,6 +144,15 @@
               size="small"
               >停用</el-button
             >
+
+            <el-button
+              style="color: #666"
+              @click="ONunit(scope.row)"
+              type="text"
+              size="small"
+              >部件信息</el-button
+            >
+
             <el-button
               style="color: #f00"
               @click="deleted(scope.row)"
@@ -388,14 +397,15 @@ import {
 export default {
   data() {
     var validateMachineTypeCode = (rule, value, callback) => {
-    const regex = /^[a-zA-Z0-9./\\-]+$/;
-    if (!value) {
-      callback(new Error('请输入机型型号'));
-    } else if (!regex.test(value)) {
-      callback(new Error('只能输入数字，字母，小数点，斜杠，横杠'));
-    } else {
-      callback();
-    }};
+      const regex = /^[a-zA-Z0-9./\\-]+$/;
+      if (!value) {
+        callback(new Error("请输入机型型号"));
+      } else if (!regex.test(value)) {
+        callback(new Error("只能输入数字，字母，小数点，斜杠，横杠"));
+      } else {
+        callback();
+      }
+    };
     return {
       loading: false,
       tableData: [],
@@ -426,8 +436,8 @@ export default {
       curvedMotionTypeOptions: [],
       rules: {
         machineTypeCode: [
-        { required: true, message: '请输入机型型号', trigger: 'blur' },
-        { validator: validateMachineTypeCode, trigger: 'blur' }
+          { required: true, message: "请输入机型型号", trigger: "blur" },
+          { validator: validateMachineTypeCode, trigger: "blur" },
         ],
         manufacturerName: [
           { required: true, message: "请输入厂商名称", trigger: "blur" },
@@ -457,7 +467,6 @@ export default {
       globalFileList: [],
       AllTemplateurl: "",
       rowmillTypeCode: "",
-
       nuedialog: false,
       unusualdialog: false,
       draught: false,
@@ -564,11 +573,10 @@ export default {
           objectdata.millTypeCode = this.detail.millTypeCode;
         }
 
-      
         const API = !this.isEdit
           ? createEngineMill(objectdata) //新增
           : updateWindEngineMill(objectdata); //编辑
-          console.log(this.isEdit,API,'APIAPI');
+        console.log(this.isEdit, API, "APIAPI");
         API.then((res) => {
           this.nuedialog = false;
           this.onSubmit();
@@ -783,6 +791,16 @@ export default {
       console.log(fileList);
       this.globalFileList = fileList.raw;
     },
+
+    ONunit(row) {
+      this.$router.push({
+        path: "/home/ledger/modules",
+        query: {
+          curvedMotionType: row.curvedMotionType,
+          millTypeCode: row.millTypeCode,
+        },
+      });
+    },
   },
 };
 </script>

src/views/ledger/modules copy.vue

@@ -0,0 +1,1211 @@
+<template>
+  <div class="global-variable">
+    <h2 class="TitleH2">主轴</h2>
+    <!-- <div class="message">
+      <div class="message-DIV">
+        <p>润滑油品牌：</p>
+        <el-select
+          clearable
+          v-model="lubricantBrand"
+          placeholder="请选择"
+          @change="linkage"
+        >
+          <el-option
+            v-for="item in lubricatingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>润滑油型号：</p>
+        <el-select
+          clearable
+          :disabled="!lubricantBrand"
+          v-model="lubricantModel"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in lubricatingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>前轴承品牌：</p>
+        <el-select
+          clearable
+          @change="ZQqian"
+          v-model="frontPingPaiValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>前轴承型号：</p>
+        <el-select
+          clearable
+          filterable
+          :disabled="!frontPingPaiValue"
+          v-model="frontBearingModel"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>后轴承品牌：</p>
+        <el-select
+          clearable
+          @change="ZQhou"
+          v-model="rearBearingBrand"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>后轴承型号：</p>
+        <el-select
+          clearable
+          filterable
+          :disabled="!rearBearingBrand"
+          v-model="rearBearingModel"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+    </div> -->
+<zhuzhou ></zhuzhou>
+    <div v-if="clxShow">
+      <h2 class="TitleH2">齿轮箱</h2>
+      <div class="CLX">
+        <div class="message">
+          <div class="message-DIV">
+            <p>润滑油品牌：</p>
+            <el-select
+              clearable
+              v-model="brandvalue"
+              placeholder="请选择"
+              @change="handleBrandChange"
+            >
+              <el-option
+                v-for="item in lubricatingPPoptions"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </div>
+
+          <div class="message-DIV">
+            <p>润滑油型号：</p>
+            <el-select
+              clearable
+              v-model="modelvalue"
+              placeholder="请选择"
+              :disabled="!brandvalue"
+            >
+              <el-option
+                v-for="item in lubricatingXXoptions"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <!-- LLS -->
+        <!-- <p class="locationP">
+      <i @click="addLSS" class="el-icon-plus"></i>
+      <i v-if="lssList.length > 1" @click="delLSS" class="el-icon-minus"></i>
+    </p> -->
+        <div class="message">
+          <p class="caption">
+            <span class="capSpan1">LSS低速轴</span>
+          </p>
+          <div
+            v-for="(item, index) in lssList"
+            :key="index"
+            class="message-BOX"
+          >
+            <div class="message-DIV">
+              <p>{{ index === 0 ? "低速轴承品牌：" : "低速轴承2/品牌：" }}</p>
+              <el-select
+                clearable
+                v-model="item.lssPPvalue"
+                placeholder="请选择"
+                @change="LSSslow(item)"
+              >
+                <el-option
+                  v-for="option in bearingPPoptions"
+                  :key="option"
+                  :label="option"
+                  :value="option"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>{{ index === 0 ? "低速轴承型号：" : "低速轴承2/型号：" }}</p>
+              <el-select
+                clearable
+                v-model="item.lssXXvalue"
+                placeholder="请选择"
+                :disabled="!item.lssPPvalue"
+              >
+                <el-option
+                  v-for="option in bearingXXoptions"
+                  :key="option"
+                  :label="option"
+                  :value="option"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+
+        <!-- 行星轮 -->
+        <p class="locationP">
+          <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" :key="index" class="message">
+          <p class="caption">
+            <span class="capSpan1">{{ `${levelNames[index]}行星轮结构` }}</span>
+          </p>
+          <div class="message-BOX">
+            <div class="message-DIV">
+              <p>行星轮轴承品牌：</p>
+              <el-select
+                clearable
+                v-model="item.xxlPPvalue"
+                placeholder="请选择"
+                @change="XXLzhoucheng(item)"
+              >
+                <el-option
+                  v-for="item in bearingPPoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option
+              ></el-select>
+            </div>
+            <div class="message-DIV">
+              <p>行星轮轴承型号：</p>
+              <el-select
+                clearable
+                v-model="item.xxlxhvalue"
+                :disabled="!item.xxlPPvalue"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingXXoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option
+              ></el-select>
+            </div>
+          </div>
+
+          <div class="message-DIV">
+            <p>齿圈齿数：</p>
+            <el-input
+              v-model="item.gearring"
+              @input="validateInput($event, index, 'gearring')"
+            ></el-input>
+          </div>
+          <div class="message-DIV">
+            <p>太阳轮齿数：</p>
+            <el-input
+              v-model="item.suntooth"
+              @input="validateInput($event, index, 'suntooth')"
+            ></el-input>
+          </div>
+
+          <div class="message-DIV">
+            <p>行星轮个数：</p>
+            <el-input
+              v-model="item.planetnumber"
+              @input="validateInput($event, index, 'planetnumber')"
+            ></el-input>
+          </div>
+          <div class="message-DIV">
+            <p>行星轮齿数：</p>
+            <el-input
+              v-model="item.planetooth"
+              @input="validateInput($event, index, 'planetooth')"
+            ></el-input>
+          </div>
+
+          <div class="message-BOX">
+            <div class="message-DIV">
+              <p>太阳轮轴承品牌：</p>
+              <el-select
+                clearable
+                v-model="item.tyPPvalue"
+                placeholder="请选择"
+                @change="TYLzhoucheng(item)"
+              >
+                <el-option
+                  v-for="item in bearingPPoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option
+              ></el-select>
+            </div>
+            <div class="message-DIV">
+              <p>太阳轮轴承型号：</p>
+              <el-select
+                clearable
+                v-model="item.tyxhvalue"
+                :disabled="!item.tyPPvalue"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingXXoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option
+              ></el-select>
+            </div>
+          </div>
+        </div>
+
+        <!-- 平行轮 -->
+        <p class="locationP">
+          <i @click="addparallel" class="el-icon-plus"></i>
+          <i
+            v-if="parallel.length > 1"
+            @click="delparallel"
+            class="el-icon-minus"
+          ></i>
+        </p>
+        <div
+          v-for="(item, index) in parallel"
+          :key="`parallel-${index}`"
+          class="message"
+        >
+          <p class="caption">
+            <span class="capSpan1">{{ `${levelNames[index]}平行轮结构` }}</span>
+          </p>
+          <div class="message-DIV">
+            <p>大齿轮齿数</p>
+            <el-input
+              v-model="item.big"
+              @input="validateInput($event, index, 'big')"
+            ></el-input>
+          </div>
+          <div class="message-DIV">
+            <p>小齿轮齿数</p>
+            <el-input
+              v-model="item.little"
+              @input="validateInput($event, index, 'little')"
+            ></el-input>
+          </div>
+        </div>
+
+        <!-- 低速中间轴 -->
+        <p class="locationP">
+          <i @click="addslowly" class="el-icon-plus"></i>
+          <i
+            v-if="slowly.length > 1"
+            @click="delslowly"
+            class="el-icon-minus"
+          ></i>
+        </p>
+        <div class="message">
+          <p class="caption">
+            <span class="capSpan1">低速中间轴</span>
+          </p>
+
+          <div v-for="(item, index) in slowly" :key="index" class="message-BOX">
+            <div class="message-DIV">
+              <p>轴承-RS品牌：</p>
+              <el-select
+                clearable
+                @change="DSrs(item)"
+                v-model="item.rsBrand"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingPPoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>轴承-RS型号：</p>
+              <el-select
+                clearable
+                :disabled="!item.rsBrand"
+                v-model="item.rsModel"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingXXoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>轴承-GS品牌：</p>
+              <el-select
+                clearable
+                @change="DSgs(item)"
+                v-model="item.gsBrand"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingPPoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>轴承-GS型号：</p>
+              <el-select
+                clearable
+                :disabled="!item.gsBrand"
+                v-model="item.gsModel"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingXXoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>齿圈齿数：</p>
+              <el-input
+                v-model="item.gearring"
+                @input="(event) => validateInput(event, index, 'gearring')"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+
+        <!-- 高速轴 -->
+        <!-- <p class="locationP">
+      <i @click="addhigh" class="el-icon-plus"></i>
+      <i v-if="high.length > 1" @click="delhigh" class="el-icon-minus"></i>
+    </p> -->
+        <div class="message">
+          <p class="caption">
+            <span class="capSpan1">高速轴</span>
+          </p>
+
+          <div v-for="(item, index) in high" :key="index" class="message-BOX">
+            <div class="message-DIV">
+              <p>轴承-RS品牌：</p>
+              <el-select
+                clearable
+                @change="GSrs(item)"
+                v-model="item.rsBrand"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingPPoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>轴承-RS型号：</p>
+              <el-select
+                clearable
+                :disabled="!item.rsBrand"
+                v-model="item.rsModel"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingXXoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>轴承-GS品牌：</p>
+              <el-select
+                clearable
+                @click="GSgs(item)"
+                v-model="item.gsBrand"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingPPoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>轴承-GS型号：</p>
+              <el-select
+                clearable
+                :disabled="!item.gsBrand"
+                v-model="item.gsModel"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in bearingXXoptions"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="message-DIV">
+              <p>齿圈齿数：</p>
+              <el-input
+                v-model="item.gearring"
+                @input="(event) => validateInput(event, index, 'gearring')"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <h2 class="TitleH2">发电机</h2>
+
+    <div class="message">
+      <div class="message-DIV">
+        <p>润滑油品牌：</p>
+        <el-select
+          clearable
+          @change="dynamo"
+          v-model="brandvalue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in lubricatingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>润滑油型号：</p>
+        <el-select
+          :disabled="!brandvalue"
+          clearable
+          v-model="modelvalue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in lubricatingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+
+      <div class="message-DIV">
+        <p>极对数：</p>
+        <el-input v-model="polepair" @input="validateNumericInput"></el-input>
+      </div>
+
+      <div class="message-DIV">
+        <p>冷却方式：</p>
+        <el-select clearable v-model="cooling" placeholder="请选择">
+          <el-option
+            v-for="item in coolingoptions"
+            :key="item.keyId"
+            :label="item.valueName"
+            :value="item.valueName"
+          >
+          </el-option
+        ></el-select>
+      </div>
+
+      <!-- 驱动端 -->
+      <div class="message-DIV">
+        <p>驱动轴承品牌：</p>
+        <el-select
+          clearable
+          @change="drive"
+          v-model="drivePingPaiValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>驱动轴承型号：</p>
+        <el-select
+          clearable
+          filterable
+          :disabled="!drivePingPaiValue"
+          v-model="driveXingHaoValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <!-- 非驱动端 -->
+      <div class="message-DIV">
+        <p>非驱动轴承品牌：</p>
+        <el-select
+          clearable
+          @change="undriven"
+          v-model="nodrivePingPaiValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingPPoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+      <div class="message-DIV">
+        <p>非驱动轴承型号：</p>
+        <el-select
+          clearable
+          filterable
+          :disabled="!nodrivePingPaiValue"
+          v-model="nodriveXingHaoValue"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in bearingXXoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option
+        ></el-select>
+      </div>
+    </div>
+    <el-button @click="submit">提交</el-button>
+  </div>
+</template>
+
+<script>
+import {
+  getBrandModelNameOrModelNumber,
+  getUnitDictRoutineList,
+} from "@/api/maintain";
+import Chilunxiang from "./componentBJ/chilunxiang.vue";
+import Fadianji from "./componentBJ/fadianji.vue";
+import zhuzhou from "./componentBJ/zhuzhou.vue";
+export default {
+  components: { zhuzhou, Chilunxiang, Fadianji },
+  data() {
+    return {
+      clxShow: true,
+      curvedMotionType: null,
+      // ZC
+      lubricantBrand: "",
+      lubricantModel: "",
+      frontPingPaiValue: "",
+      frontBearingModel: "",
+      rearBearingBrand: "",
+      rearBearingModel: "",
+      // 润滑油
+      lubricatingPPoptions: [],
+      lubricatingXXoptions: [],
+      // 轴承
+      bearingPPoptions: [],
+      bearingXXoptions: [],
+      // CLX
+      brandvalue: "",
+      modelvalue: "",
+      lssList: [{ lssPPvalue: "", lssXXvalue: "" }],
+      xxlPPvalue: "",
+      xxlxhvalue: "",
+      tyPPvalue: "",
+      tyxhvalue: "",
+      planets: [
+        {
+          planetnumber: "",
+          planetooth: "",
+          suntooth: "",
+          gearring: "",
+          xxlPPvalue: "",
+          xxlxhvalue: "",
+          tyPPvalue: "",
+          tyxhvalue: "",
+        },
+      ],
+      levelNames: ["一级", "二级", "三级"],
+      parallel: [{ big: "", little: "" }],
+      slowly: [
+        {
+          gearring: "",
+          rsBrand: null,
+          rsModel: null,
+          gsBrand: null,
+          gsModel: null,
+        },
+      ],
+      high: [
+        {
+          gearring: "",
+          rsBrand: null,
+          rsModel: null,
+          gsBrand: null,
+          gsModel: null,
+        },
+      ],
+      // FDJ
+      brandvalue: "",
+      modelvalue: "",
+      polepair: "",
+      cooling: "",
+      drivePingPaiValue: "",
+      driveXingHaoValue: "",
+      nodrivePingPaiValue: "",
+      nodriveXingHaoValue: "",
+      coolingoptions: [],
+    };
+  },
+  created() {
+    this.GETbrand();
+    this.curvedMotionType = this.$route.query.curvedMotionType;
+    if (this.curvedMotionType == "2") {
+      this.clxShow = false;
+    }
+  },
+  methods: {
+    validateNumericInput(event) {
+      const newValue = this.polepair.replace(/[^0-9]/g, "");
+      if (this.polepair !== newValue) {
+        this.$message({
+          message: "请输入数字！",
+          type: "warning",
+        });
+      }
+      this.polepair = newValue;
+    },
+    GETbrand() {
+      const params = {
+        unitType: 1,
+      };
+      const params2 = {
+        unitType: 2,
+      };
+      const params3 = {
+        contentsType: "UDTC00031",
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingPPoptions = res.data;
+      });
+      getBrandModelNameOrModelNumber(params2).then((res) => {
+        this.lubricatingPPoptions = res.data;
+      });
+      getUnitDictRoutineList(params3).then((res) => {
+        this.coolingoptions = res.data;
+      });
+    },
+    linkage() {
+      const params = {
+        unitType: 2,
+        manufacture: this.lubricantBrand,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.lubricatingXXoptions = res.data;
+        this.lubricantModel = "";
+      });
+    },
+    ZQqian() {
+      const params = {
+        unitType: 1,
+        manufacture: this.frontPingPaiValue,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.frontBearingModel = "";
+      });
+    },
+    ZQhou() {
+      const params = {
+        unitType: 1,
+        manufacture: this.rearBearingBrand,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.rearBearingModel = "";
+      });
+    },
+    dynamo() {
+      const params = {
+        unitType: 2,
+        manufacture: this.brandvalue,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.lubricatingXXoptions = res.data;
+        this.modelvalue = "";
+      });
+    },
+    drive() {
+      const params = {
+        unitType: 1,
+        manufacture: this.drivePingPaiValue,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.driveXingHaoValue = "";
+      });
+    },
+    undriven() {
+      const params = {
+        unitType: 1,
+        manufacture: this.nodrivePingPaiValue,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.nodriveXingHaoValue = "";
+      });
+    },
+    //.........................................................................
+    handleBrandChange() {
+      const params = {
+        unitType: 2,
+        manufacture: this.brandvalue,
+      };
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        this.modelvalue = "";
+      });
+    },
+    LSSslow(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.lssPPvalue,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.lssXXvalue = "";
+      });
+    },
+    XXLzhoucheng(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.xxlPPvalue,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.xxlxhvalue = "";
+      });
+    },
+    TYLzhoucheng(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.tyPPvalue,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.tyxhvalue = "";
+      });
+    },
+
+    DSrs(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.rsBrand,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.rsModel = "";
+      });
+    },
+    DSgs(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.gsBrand,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.gsModel = "";
+      });
+    },
+    GSrs(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.rsBrand,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.rsModel = "";
+      });
+    },
+
+    GSgs(item) {
+      const params = {
+        unitType: 1,
+        manufacture: item.gsBrand,
+      };
+      console.log(params);
+      getBrandModelNameOrModelNumber(params).then((res) => {
+        this.bearingXXoptions = res.data;
+        item.gsModel = "";
+      });
+    },
+    addPlanet() {
+      if (this.planets.length < 3) {
+        // 深拷贝默认值并推入 planets 数组
+        const defaultPlanet = {
+          planetnumber: "",
+          planetooth: "",
+          suntooth: "",
+          gearring: "",
+          xxlPPvalue: "", // 行星轮轴承品牌
+          xxlxhvalue: "", // 行星轮轴承型号
+          tyPPvalue: "", // 太阳轮轴承品牌
+          tyxhvalue: "", // 太阳轮轴承型号
+        };
+        this.planets.push({ ...defaultPlanet });
+      }
+    },
+
+    delPlanet() {
+      if (this.planets.length > 1) {
+        this.planets.pop();
+      }
+    },
+    validateInput(value, index, field) {
+      const validValue = value.replace(/[^0-9]/g, "");
+      if (this.planets[index]) {
+        this.planets[index][field] = validValue;
+      }
+      if (this.parallel[index]) {
+        this.parallel[index][field] = validValue;
+      }
+      if (this.slowly[index]) {
+        this.slowly[index][field] = validValue;
+      }
+      if (this.high[index]) {
+        this.high[index][field] = validValue;
+      }
+      if (validValue !== value) {
+        this.$message({
+          message: "只能输入数字",
+          type: "warning",
+          duration: 2000,
+        });
+      }
+    },
+    addparallel() {
+      if (this.parallel.length < 3) {
+        this.parallel.push({ big: "", little: "" });
+      }
+    },
+    delparallel() {
+      if (this.parallel.length > 1) {
+        this.parallel.pop();
+      }
+    },
+
+    addLSS() {
+      if (this.lssList.length < 2) {
+        this.lssList.push({ brandvalue: "", modelvalue: "" });
+      }
+    },
+    delLSS() {
+      if (this.lssList.length > 1) {
+        this.lssList.pop();
+      }
+    },
+    addslowly() {
+      if (this.slowly.length >= 2) {
+        // Optionally provide feedback if the limit is reached
+        this.$message({
+          type: "warning",
+          message: "只能添加最多两项!",
+        });
+        return; // Exit the function if the limit is reached
+      }
+
+      // Add a new item to the array
+      this.slowly.push({
+        gearring: "",
+        rsBrand: "",
+        rsModel: "",
+        gsBrand: "",
+        gsModel: "",
+      });
+    },
+
+    delslowly() {
+      if (this.slowly.length > 1) {
+        this.slowly.pop();
+      }
+    },
+    addhigh() {
+      if (this.high.length < 2) {
+        this.high.push({
+          gearring: "",
+          rsBrand: null,
+          rsModel: null,
+          gsBrand: null,
+          gsModel: null,
+        });
+      }
+    },
+    delhigh() {
+      if (this.high.length > 1) {
+        this.high.pop();
+      }
+    },
+
+    submit() {
+      const params = {
+        // 主轴
+        unitBearingsDto: {
+          lubricantBrand: this.lubricantBrand,
+          lubricantModel: this.lubricantModel,
+          frontBearingBrand: this.frontPingPaiValue,
+          frontBearingModel: this.frontBearingModel,
+          rearBearingBrand: this.rearBearingBrand,
+          rearBearingModel: this.rearBearingModel,
+          code: "",
+          id: 0,
+        },
+        // 齿轮箱
+        unitGearDto: {
+          unitGearDto: {
+            code: "",
+            id: 0,
+            lubricantBrand: "",
+            lubricantModel: "",
+            unitGearboxBearingsDtoList: [
+              {
+                bearingBrand: "",
+                bearingGsBrand: "",
+                bearingGsModel: "",
+                bearingModel: "",
+                bearingRsBrand: "",
+                bearingRsModel: "",
+                gearRingTeethCount: "",
+                gearboxBearingLevel: "",
+                gearboxBearingNumber: "",
+                gearboxCode: "",
+                id: 0,
+                parallelWheelGrade: 0,
+              },
+            ],
+            unitGearboxStructureDtoList: [
+              {
+                bearingBrand: "",
+                bearingModel: "",
+                gearRingTeethCount: "",
+                gearboxCode: "",
+                gearboxStructure: 0,
+                id: 0,
+                largeGearTeethCount: "",
+                planetWheelCount: "",
+                planetWheelTeethCount: "",
+                planetaryGearGrade: 0,
+                smallGearTeethCount: "",
+                sunWheelBearingBrand: "",
+                sunWheelBearingModel: "",
+                sunWheelTeethCount: "",
+              },
+            ],
+          },
+        },
+        // 发电机
+        unitDynamoDto: {
+          lubricantBrand: this.brandvalue,
+          lubricantModel: this.modelvalue,
+          driveEndBearingBrand: this.drivePingPaiValue,
+          driveEndBearingModel: this.driveXingHaoValue,
+          nonDriveEndBearingBrand: this.nodrivePingPaiValue,
+          nonDriveEndBearingModel: this.nodriveXingHaoValue,
+          polePairs: this.polepair,
+          coolingMethod: this.cooling,
+          id: 0,
+        },
+      };
+      console.log(params);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.TitleH2 {
+  font-weight: 800;
+  font-size: 28px;
+  margin: 20px 0;
+}
+
+.message {
+  display: flex;
+  flex-wrap: wrap;
+
+  .message-DIV {
+    width: 25%;
+    display: flex;
+    margin-bottom: 20px;
+    justify-content: space-between;
+    .el-input {
+      width: 223px;
+    }
+    p {
+      width: 140px;
+      line-height: 40px;
+      height: 40px;
+      text-align: right;
+    }
+  }
+}
+
+.CLX {
+  .message {
+    display: flex;
+    flex-wrap: wrap;
+    .message-BOX {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .message-DIV {
+        width: 25%;
+        display: flex;
+
+        margin-bottom: 20px;
+        justify-content: space-between;
+        p {
+          width: 140px;
+          line-height: 40px;
+          height: 40px;
+          text-align: right;
+        }
+        .el-input {
+          width: 223px;
+        }
+      }
+    }
+    .message-DIV {
+      width: 25%;
+      display: flex;
+      margin-bottom: 20px;
+      justify-content: space-between;
+      p {
+        width: 140px;
+        line-height: 40px;
+        height: 40px;
+        text-align: right;
+      }
+      .el-input {
+        width: 223px;
+      }
+    }
+    .caption {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      margin-bottom: 20px;
+      .el-icon-plus:before {
+        font-size: 20px;
+      }
+      .capSpan1 {
+        background: rgb(101, 101, 101);
+        width: 140px;
+        padding-left: 10px;
+      }
+    }
+  }
+  .locationP {
+    text-align: right;
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+</style>

src/views/ledger/modules.vue

@@ -1,36 +1,278 @@
 <template>
   <div class="global-variable">
     <h2 class="TitleH2">主轴</h2>
-    <zhuzhou></zhuzhou>
-    <h2 class="TitleH2">齿轮箱</h2>
-   <chilunxiang> </chilunxiang>
-   <h2 class="TitleH2">发电机</h2>
-   <fadianji></fadianji>
+    <zhuzhou
+      v-if="bearingBrandOptions.length > 0 && lubricantBrandOptions.length > 0"
+      :rhyPP="lubricantBrandOptions"
+      :rhyZC="bearingBrandOptions"
+      :unitBearingsVo="unitBearingsVo"
+      @update="handleUpdate('unitBearingsDto', $event)"
+    ></zhuzhou>
+    <div v-if="clxShow">
+      <h2 class="TitleH2">齿轮箱</h2>
+      <Chilunxiang
+        v-if="
+          bearingBrandOptions.length > 0 && lubricantBrandOptions.length > 0
+        "
+        :clxPP="lubricantBrandOptions"
+        :clxZC="bearingBrandOptions"
+        :unitGearDto="unitGearDto"
+        @update="handleUpdate('unitGearDto', $event)"
+      ></Chilunxiang>
+    </div>
+
+    <h2 class="TitleH2">发电机</h2>
+    <Fadianji
+      v-if="bearingBrandOptions.length > 0 && lubricantBrandOptions.length > 0"
+      :fdjPP="lubricantBrandOptions"
+      :fdjZC="bearingBrandOptions"
+      :unitDynamoDto="unitDynamoDto"
+      :fdjLQ="coolingoptions"
+      @update="handleUpdate('unitDynamoDto', $event)"
+    ></Fadianji>
+
+    <el-button @click="ALLsubmit">提交</el-button>
   </div>
 </template>
 
 <script>
-import Chilunxiang from './componentBJ/chilunxiang.vue';
-import Fadianji from './componentBJ/fadianji.vue';
+import {
+  getBrandModelNameOrModelNumber,
+  getUnitDictRoutineList,
+  modificationUnit,
+  getUnitVo,
+} from "@/api/maintain";
+import Chilunxiang from "./componentBJ/chilunxiang.vue";
+import Fadianji from "./componentBJ/fadianji.vue";
 import zhuzhou from "./componentBJ/zhuzhou.vue";
+import router from "@/router";
+
 export default {
-  components: { zhuzhou ,Chilunxiang, Fadianji},
-  data(){
-    return{
-      plankoptions:[],
-      plankvalue:"",
- 
+  components: { zhuzhou, Chilunxiang, Fadianji },
+  data() {
+    return {
+      clxShow: true,
+      // 润滑油选项
+      lubricantBrandOptions: [],
+      // 轴承选项
+      bearingBrandOptions: [],
+      // 主轴的
+      unitBearingsVo: {},
+      // 发电机
+      unitDynamoDto: {},
+      // 齿轮箱
+      unitGearDto: {},
+      // 冷却选项
+      coolingOptions: [],
+      // 存储不同子组件的状态
+      formData: {
+        millTypeCode: "",
+        // 主轴
+        unitBearingsDto: {
+          code: "",
+          id: "",
+        },
+        // 齿轮箱
+        unitGearDto: {
+          code: "",
+          id: "",
+          lubricantBrand: "",
+          lubricantModel: "",
+          unitGearboxBearingsDtoList: [{ id: "" }],
+          // 齿轮箱结构集合
+          unitGearboxStructureDtoList: [{ id: "" }],
+        },
+        //发电机
+        unitDynamoDto: {
+          id: "",
+        },
+      },
+      submittedData: null,
+      allParams: {},
+      coolingoptions: null,
+    };
+  },
+  created() {
+    this.curvedMotionType = this.$route.query.curvedMotionType;
+    this.formData.millTypeCode = this.$route.query.millTypeCode;
+    if (this.curvedMotionType == "2") {
+      this.clxShow = false;
     }
-  }
+    this.GETbrand(); // 加载品牌和型号数据
+    this.GETecho();
+  },
+  methods: {
+    // 获取品牌和型号数据
+    GETbrand() {
+      const params = { unitType: 1 };
+      const params2 = { unitType: 2 };
+      const params3 = { contentsType: "UDTC00031" };
+      getBrandModelNameOrModelNumber(params)
+        .then((res) => {
+          // 确保数据有效
+          if (res && res.data) {
+            this.bearingBrandOptions = res.data;
+          } else {
+            console.error("获取轴承品牌失败:", res);
+          }
+        })
+        .catch((error) => {
+          console.error("获取轴承品牌请求失败:", error);
+        });
+
+      getBrandModelNameOrModelNumber(params2)
+        .then((res) => {
+          // 确保数据有效
+          if (res && res.data) {
+            this.lubricantBrandOptions = res.data;
+          } else {
+            console.error("获取润滑油品牌失败:", res);
+          }
+        })
+        .catch((error) => {
+          console.error("获取润滑油品牌请求失败:", error);
+        });
+
+      getUnitDictRoutineList(params3)
+        .then((res) => {
+          // 确保数据有效
+          if (res && res.data) {
+            this.coolingoptions = res.data;
+          } else {
+            console.error("获取冷却选项失败:", res);
+          }
+        })
+        .catch((error) => {
+          console.error("获取冷却选项请求失败:", error);
+        });
+    },
+
+    GETecho() {
+      getUnitVo({ millTypeCode: this.formData.millTypeCode }).then((res) => {
+        console.log(res.data.unitDynamoVo, "============");
+
+        if (res.data.unitBearingsVo != null) {
+          // 主轴
+          this.formData.unitBearingsDto.code = res.data.unitBearingsVo.code;
+          this.formData.unitBearingsDto.id = res.data.unitBearingsVo.id;
+        }
+
+        if (res.data.unitGearVo) {
+          const unitGearVo = res.data.unitGearVo;
+
+          // 齿轮箱基本信息
+          this.formData.unitGearDto.code = unitGearVo.code || "";
+          this.formData.unitGearDto.id = unitGearVo.id || "";
+          // 齿轮箱轴承集合（确保列表存在且是数组）
+          if (Array.isArray(unitGearVo.unitGearboxBearingsList)) {
+            this.formData.unitGearDto.unitGearboxBearingsDtoList =
+              unitGearVo.unitGearboxBearingsList.map((item) => ({
+                id: item.id || "",
+              }));
+          }
+
+          // 齿轮箱结构集合（确保列表存在且是数组）
+          if (Array.isArray(unitGearVo.unitGearboxStructureList)) {
+            this.formData.unitGearDto.unitGearboxStructureDtoList =
+              unitGearVo.unitGearboxStructureList.map((item) => ({
+                id: item.id || "",
+              }));
+          }
+        }
+
+        if (res.data.unitDynamoVo != null) {
+          // 齿轮箱
+          this.formData.unitDynamoDto.id = res.data.unitDynamoVo.id;
+        }
+        this.unitBearingsVo = res.data.unitBearingsVo;
+        this.unitDynamoDto = res.data.unitDynamoVo;
+        this.unitGearDto = res.data.unitGearVo;
+      });
+    },
+
+    /**
+     * 处理子组件传来的更新事件
+     * @param {Object} payload 子组件发送的数据
+     * @param {String} payload.key 要更新的字段
+     * @param {String} payload.value 字段的新值
+     */
+
+    handleUpdate(componentName, { key, value }) {
+      if (key && key.includes(".")) {
+        // 如果 key 包含路径，解析并更新对应路径
+        const keys = key.split("."); // 分割路径
+        let target = this.formData;
+
+        // 遍历路径逐层深入
+        for (let i = 0; i < keys.length - 1; i++) {
+          const keyPart = keys[i];
+          if (keyPart.includes("[")) {
+            const [arrayKey, index] = keyPart.split(/[\[\]]/).filter(Boolean);
+            target = target[arrayKey][index]; // 数组元素访问
+          } else {
+            target = target[keyPart]; // 对象访问
+          }
+        }
+
+        // 最后一层赋值
+        const lastKey = keys[keys.length - 1];
+        this.$set(target, lastKey, value); // 使用 $set 确保响应式更新
+        console.log("更新后的数据:", this.formData);
+      } else if (this.formData[componentName]) {
+        // 如果是直接指定 componentName 更新
+        this.$set(this.formData[componentName], key, value);
+        console.log("更新后的数据:", this.formData);
+      } else {
+        console.error("无效的组件名称或 key");
+      }
+    },
+
+    ALLsubmit() {
+      // 轴
+      console.log(this.formData.unitGearDto);
+      const unitGearboxBearingsDtoList =
+        this.formData.unitGearDto.unitGearboxBearingsDtoList.map(
+          ({ uniqueKey, ...rest }) => rest
+        );
+      console.log(unitGearboxBearingsDtoList);
+      this.formData.unitGearDto.unitGearboxBearingsDtoList =
+        unitGearboxBearingsDtoList;
+      // 结构
+      const unitGearboxStructureDtoList =
+        this.formData.unitGearDto.unitGearboxStructureDtoList.map(
+          ({ uniqueKey, ...rest }) => rest
+        );
+      console.log(unitGearboxStructureDtoList);
+      // 汇总所有子组件的数据
+      this.formData.unitGearDto.unitGearboxStructureDtoList =
+        unitGearboxStructureDtoList;
+      this.allParams = { ...this.formData };
+      // 发送到后端或执行其他操作
+      this.submitToBackend(this.allParams);
+    },
+
+    /**
+     * 模拟发送数据到后端
+     * @param {Object} params 提交的所有参数
+     */
+    submitToBackend(params) {
+      modificationUnit(params).then((res) => {
+        if (res.code == 200)
+          this.$router.push({
+            path: "/home/ledger/milltype",
+          });
+      });
+
+      // 你可以调用后台 API，例如：axios.post('/api/submit', params);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-
-
 .TitleH2 {
   font-weight: 800;
   font-size: 28px;
   margin: 20px 0;
 }
-</style>
+</style>

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:16600", //外网
+        target: "http://106.120.102.238:16700", //外网  16600   16700
         //  target: "http://10.96.137.5",
         changeOrigin: true,
         pathRewrite: {