华电的优化提交

src/App.vue

@@ -45,11 +45,13 @@ body {
 html, body, #app {
   height: 100%;
   overflow: hidden;
+  overflow-y: auto;
 }
 
 .app-wrapper {
   min-height: 100vh;
   overflow: hidden;
+  overflow-y: auto;
 }
 html::-webkit-scrollbar,
 body::-webkit-scrollbar,

src/styles/global.scss

@@ -49,8 +49,8 @@
 
 // 改变振动分析边框色
 .head {
-  border-top: 5px solid var(--primary-color) !important;
-  border-bottom: 5px solid var(--primary-color) !important;
+  // border-top: 5px solid var(--primary-color) !important;
+  border-bottom: 2px solid var(--primary-color) !important;
 }
 
 ::v-deep .current-row td {

src/views/health/components/envelopecharts.vue

@@ -366,11 +366,11 @@ export default {
           text: this.envelopeList.title || this.envelopeListTwo.title,
           left: "center",
         },
-        grid: {
+       grid: {
           left: 60, // 原来是100，适当缩小左右边距
-          right: 60,
-          bottom: 60, // 给推拽条和坐标轴腾出空间
-          top: 60,
+          right: 20,
+          bottom: 90, // 给推拽条和坐标轴腾出空间
+          // top: 60,
         },
         toolbox: {
           feature: {

src/views/health/components/malfunction/Eecharts.vue

@@ -46,7 +46,7 @@ export default {
       if (!this.myChart) {
         this.myChart = echarts.init(this.$refs.chartDom);
       }
-      const colors = ["#81C9EC", "#9CEED5", "#98A0BC", "#C9CDFF"];
+      const colors = ["#1B3A7F", "#02aae9","#A9D598","#008000"];
       const series = this.yData.map((dataArr, idx) => ({
         name: this.yNames[idx] || `系列${idx + 1}`,
         type: "line",

src/views/health/components/malfunction/bearing copy.vue

@@ -1,502 +0,0 @@
-<template>
-  <div>
-    <div class="TopBox">
-      <div class="leftdiv">
-        <h4>轴承状态</h4>
-        <div class="state">
-          <p :style="{ backgroundColor: bearingStateColors.innerRing }">
-            轴承内圈状态
-          </p>
-          <p :style="{ backgroundColor: bearingStateColors.outerRing }">
-            轴承外圈状态
-          </p>
-          <p :style="{ backgroundColor: bearingStateColors.rollingElement }">
-            轴承滚动体状态
-          </p>
-          <p :style="{ backgroundColor: bearingStateColors.cage }">
-            轴承保持架状态
-          </p>
-        </div>
-
-        <p class="PText">
-          <span><i class="color1"></i>正常</span
-          ><span><i class="color2"></i>报警</span
-          ><span><i class="color3"></i>危险</span>
-        </p>
-        <div class="Btn">
-          <el-button type="primary" size="small" @click="automaticDiagnosis"
-            >自动诊断</el-button
-          >
-        </div>
-
-        <h4>诊断步骤：</h4>
-        <p class="minp">1、选择振动测点与起止时间，点击“查询”;</p>
-        <p class="minp">2、对轴承“参数设置”输入相关信息;</p>
-        <p class="minp">3、点击“自动诊断”输出最终轴承状态结果。</p>
-      </div>
-
-      <div class="rightdiv">
-        <el-table
-          ref="multipleTable"
-          :data="tableData"
-          tooltip-effect="dark"
-          style="width: 100%"
-          height="250"
-        >
-          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
-          <el-table-column prop="timeStamp" label="时间" align="center">
-          </el-table-column>
-          <el-table-column
-            prop="samplingFrequency"
-            label="采样频率(Hz)"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rotationalSpeed"
-            label="转速(rpm)"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="innerRingFault"
-            label="轴承内圈故障"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="outerRingFault"
-            label="轴承外圈故障"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rollingElementFault"
-            label="轴承滚动体故障"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="cageFault"
-            label="轴承保持架故障"
-            align="center"
-          >
-          </el-table-column>
-        </el-table>
-        <div class="fenye">
-          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
-
-          <el-pagination
-      @current-change="handleCurrentChange"
-      :current-page="currentPage"
-      layout="total, prev, pager, next, jumper"
-      :total="totalCount"
-      :page-size="10"
-    ></el-pagination>
-        </div>
-      </div>
-    </div>
-    <div class="bottomBox">
-      <div class="BtLeft">
-        <h4>轴承状态趋势图</h4>
-        <el-empty
-          v-if="this.xData.length === 0 || this.yData.length === 0"
-          description="暂无数据"
-          style="padding: 17px 0"
-        ></el-empty>
-        <Eecharts
-          v-else
-          style="height: 250px"
-          :xData="xData"
-          :yData="yData"
-          :yNames="[
-            '轴承内圈状态',
-            '轴承外圈状态',
-            '轴承滚动体状态',
-            '轴承保持架状态',
-          ]"
-          yAxisName="轴承故障状态"
-        ></Eecharts>
-      </div>
-      <div class="BtRight">
-        <h4>参数设置</h4>
-        <div class="BtRightDiv">
-          <p class="BtRightP">
-            发动机到轴承测点转速传动比<span
-              ><el-input v-model="transmissionRatio" size="small"     v-number-only></el-input
-            ></span>
-          </p>
-          <h4>滚动轴承参数输入</h4>
-          <div class="canshu">
-            <p class="BtRightP">
-              <span class="label-text">轴承节圆直径D(mm)</span>
-              <span
-                ><el-input
-                  v-model="bearingPitchDiameter"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">滚动体直径d(mm)</span>
-              <span
-                ><el-input
-                  v-model="rollingElementDiameter"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">滚动体个数Z(个)</span>
-              <span
-                ><el-input v-model="rollingElementCount" size="small"     v-number-only></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">接触角α(°)</span>
-              <span
-                ><el-input v-model="contactAngle" size="small"     v-number-only></el-input
-              ></span>
-            </p>
-          </div>
-          <h4>报警阈值输入</h4>
-          <div class="canshu">
-            <p class="BtRightP">
-              <span class="label-text">振动速度报警阈值(mm/s)</span>
-              <span
-                ><el-input
-                  v-model="vibrationSpeedAlarmThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">振动速度危险阈值(mm/s)</span>
-              <span
-                ><el-input
-                  v-model="vibrationSpeedDangerThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">包络总值报警阈值(gE)</span>
-              <span
-                ><el-input
-                  v-model="envelopeTotalAlarmThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">包络总值危险阈值(gE)</span>
-              <span
-                ><el-input
-                  v-model="envelopeTotalDangerThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Eecharts from "./Eecharts.vue";
-export default {
-  components: { Eecharts },
-  props: {
-    codedata: {
-      type: Array,
-      default: () => [],
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
-    totalPage: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-      // 添加新的数据属性用于绑定输入框的值
-      transmissionRatio: "",
-      bearingPitchDiameter: "",
-      rollingElementDiameter: "",
-      rollingElementCount: "",
-      contactAngle: "",
-      vibrationSpeedAlarmThreshold: "",
-      vibrationSpeedDangerThreshold: "",
-      envelopeTotalAlarmThreshold: "",
-      envelopeTotalDangerThreshold: "",
-      // 分页
-
-      currentPage: 1,
-      total: 1,
-
-      xData: [],
-      yData: [],
-      // 颜色判断
-      bearingStateColors: {
-        innerRing: "#80808057",
-        outerRing: "#80808057",
-        rollingElement: "#80808057",
-        cage: "#80808057",
-      },
-      hasError: false, // 标志是否已经显示过错误提示
-    };
-  },
-  created() {
-    console.log(this.codedata, "11111111111111111111111111");
-
-    // this.tableData = this.codedata;
-  },
-  watch: {
-    codedata: {
-      handler(newVal) {
-        this.tableData = newVal;
-      },
-      immediate: true, // 组件创建时立刻执行一次
-      deep: true, // 如果 codedata 是复杂对象，建议加上
-    },
-  },
-
-  methods: {
-    
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      
-      this.currentPage = val // 子组件内部更新当前页
-      this.$emit('updatePage', this.currentPage) // 通知父组件，把当前页传出去
-    },
-    automaticDiagnosis() {
-      // 验证必填项
-      const requiredFields = [
-        { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
-        { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
-        { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
-        { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
-        { field: this.contactAngle, name: "接触角α(°)" },
-        {
-          field: this.vibrationSpeedAlarmThreshold,
-          name: "振动速度报警阈值(mm/s)",
-        },
-        {
-          field: this.vibrationSpeedDangerThreshold,
-          name: "振动速度危险阈值(mm/s)",
-        },
-        {
-          field: this.envelopeTotalAlarmThreshold,
-          name: "包络总值报警阈值(gE)",
-        },
-        {
-          field: this.envelopeTotalDangerThreshold,
-          name: "包络总值危险阈值(gE)",
-        },
-      ];
-
-      // 记录是否已弹出过错误提示
-      let hasError = false;
-
-      // 只检查必填项的字段是否为空
-      // for (const { field, name } of requiredFields) {
-      //   if (!field && !hasError) {
-      //     // 弹出提示并标记已经出现错误提示
-      //     this.$message.error(`${name} 是必填项`);
-      //     hasError = true;  // 标记已经弹出过错误提示
-      //     return;  // 停止执行后续逻辑
-      //   }
-      // }
-
-      // 如果验证通过，继续执行后续逻辑
-      const newProps = this.tableData.map(() => ({
-        innerRingFault: Math.floor(Math.random() * 3).toString(),
-        outerRingFault: Math.floor(Math.random() * 3).toString(),
-        rollingElementFault: Math.floor(Math.random() * 3).toString(),
-        cageFault: Math.floor(Math.random() * 3).toString(),
-      }));
-
-      this.tableData.forEach((row, index) => {
-        this.$set(this.tableData, index, {
-          ...row,
-          ...newProps[index], // 用每一行自己生成的随机数
-        });
-      });
-
-      // 更新颜色状态
-      const fields = [
-        { key: "innerRingFault", colorKey: "innerRing" },
-        { key: "outerRingFault", colorKey: "outerRing" },
-        { key: "rollingElementFault", colorKey: "rollingElement" },
-        { key: "cageFault", colorKey: "cage" },
-      ];
-
-      fields.forEach(({ key, colorKey }) => {
-        const values = newProps.map((item) => Number(item[key]));
-        const maxVal = Math.max(...values);
-        let color = "#80808057"; // 默认灰色
-        if (maxVal === 0) color = "green"; // 无故障
-        else if (maxVal === 1) color = "yellow"; // 警告
-        else if (maxVal === 2) color = "red"; // 危险
-
-        this.bearingStateColors[colorKey] = color; // 更新颜色
-      });
-
-      // 更新趋势图数据
-      // 更新趋势图数据（用tableData，不是newProps）
-      this.xData = this.tableData.map((item) => item.timeStamp);
-      this.yData = fields.map(({ key }) =>
-        this.tableData.map((item) => Number(item[key]))
-      );
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-h4 {
-  margin-bottom: 5px;
-  font-weight: 600;
-}
-.TopBox {
-  height: 280px;
-  display: flex;
-  justify-content: space-around;
-  .leftdiv {
-    width: 29%;
-
-    .state {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-around;
-      align-content: center;
-      height: 100px;
-      p {
-        width: 150px;
-        height: 40px;
-        background: rgb(227, 227, 227);
-        color: rgb(50, 50, 50);
-        margin-bottom: 10px;
-        text-align: center;
-        align-content: center;
-        font-weight: 600;
-      }
-    }
-    .PText {
-      display: flex;
-      justify-content: space-around;
-      span {
-        display: flex;
-        align-items: center;
-        i {
-          width: 30px;
-          height: 15px;
-          margin-right: 5px;
-        }
-        .color1 {
-          background-color: green;
-        }
-        .color2 {
-          background-color: yellow;
-        }
-        .color3 {
-          background-color: red;
-        }
-      }
-    }
-
-    .Btn {
-      display: flex;
-      justify-content: space-around;
-      margin: 10px 0;
-    }
-    .minp {
-      font-size: 12px;
-    }
-  }
-  .rightdiv {
-    width: 69%;
-    .fenye {
-      display: flex;
-      justify-content: space-between;
-      margin: 5px 0;
-      font-size: 12px;
-      line-height: 30px;
-      span {
-        font-weight: 600;
-      }
-    }
-  }
-}
-
-.bottomBox {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 10px;
-  .BtLeft {
-    border: 1px solid rgb(231, 231, 231);
-    width: 49%;
-    padding: 10px;
-  }
-  .BtRight {
-    width: 49%;
-    border: 1px solid rgb(231, 231, 231);
-    padding: 10px;
-    .BtRightDiv {
-      padding: 0 10px;
-      h4 {
-        font-size: 14px;
-      }
-      .BtRightP {
-        line-height: 30px;
-        font-size: 12px;
-        display: flex;
-        margin-bottom: 5px;
-        width: 50%;
-        span {
-          margin-left: 10px;
-          .el-input {
-            width: 100px;
-          }
-        }
-        .label-text {
-          width: 140px;
-        }
-      }
-      .canshu {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-      }
-    }
-  }
-}
-::v-deep .el-table__cell {
-  padding: 2px 0;
-  font-size: 12px;
-}
-</style>

src/views/health/components/malfunction/bearing.vue

@@ -1,6 +1,48 @@
 <template>
   <div>
     <div class="TopBox">
+      <div class="rightdiv">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="250"
+        >
+          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            prop="timeStamp"
+            label="时间"
+            align="center"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="samplingFrequency"
+            label="采样频率(Hz)"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="rotationalSpeed"
+            label="转速(rpm)"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
+
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="totalCount"
+            :page-size="20"
+            small
+          ></el-pagination>
+        </div>
+      </div>
       <div class="leftdiv">
         <div class="stateBox">
           <h4>轴承状态</h4>
@@ -37,7 +79,6 @@
               <span><i class="color1"></i>正常</span
               ><span><i class="color2"></i>报警</span
               ><span><i class="color3"></i>危险</span>
-              
             </p>
 
             <h4>诊断步骤：</h4>
@@ -47,67 +88,6 @@
           </div>
         </div>
       </div>
-
-      <div class="rightdiv">
-        <el-table
-          ref="multipleTable"
-          :data="tableData"
-          tooltip-effect="dark"
-          style="width: 100%"
-          height="250"
-        >
-          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
-          <el-table-column prop="timeStamp" label="时间" align="center" width="150">
-          </el-table-column>
-          <el-table-column
-            prop="samplingFrequency"
-            label="采样频率(Hz)"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rotationalSpeed"
-            label="转速(rpm)"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="innerRingFault"
-            label="轴承内圈故障"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="outerRingFault"
-            label="轴承外圈故障"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="rollingElementFault"
-            label="轴承滚动体故障"
-            align="center"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="cageFault"
-            label="轴承保持架故障"
-            align="center"
-          >
-          </el-table-column>
-        </el-table>
-        <div class="fenye">
-          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
-
-          <el-pagination
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            layout="total, prev, pager, next, jumper"
-            :total="totalCount"
-            :page-size="10"
-          ></el-pagination>
-        </div>
-      </div>
     </div>
     <div class="bottomBox">
       <div class="BtLeft">
@@ -115,11 +95,11 @@
         <el-empty
           v-if="this.xData.length === 0 || this.yData.length === 0"
           description="暂无数据"
-          style="padding: 17px 0"
+          style="padding: 46px 0"
         ></el-empty>
         <Eecharts
           v-else
-          style="height: 250px"
+          style="height: 300px"
           :xData="xData"
           :yData="yData"
           :yNames="[
@@ -131,106 +111,119 @@
           yAxisName="轴承故障状态"
         ></Eecharts>
       </div>
-      <div class="BtRight">
-        <h4>参数设置</h4>
-        <div class="BtRightDiv">
-          <p class="BtRightP">
-            发动机到轴承测点转速传动比<span
-              ><el-input
-                v-model="transmissionRatio"
-                size="small"
-                v-number-only
-              ></el-input
-            ></span>
-          </p>
-          <h4>滚动轴承参数输入</h4>
-          <div class="canshu">
-            <p class="BtRightP">
-              <span class="label-text">轴承节圆直径D(mm)</span>
-              <span
-                ><el-input
-                  v-model="bearingPitchDiameter"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">滚动体直径d(mm)</span>
-              <span
-                ><el-input
-                  v-model="rollingElementDiameter"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">滚动体个数Z(个)</span>
-              <span
-                ><el-input
-                  v-model="rollingElementCount"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">接触角α(°)</span>
-              <span
-                ><el-input
-                  v-model="contactAngle"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-          </div>
-          <h4>报警阈值输入</h4>
-          <div class="canshu">
-            <p class="BtRightP">
-              <span class="label-text">振动速度报警阈值(mm/s)</span>
-              <span
-                ><el-input
-                  v-model="vibrationSpeedAlarmThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">振动速度危险阈值(mm/s)</span>
-              <span
-                ><el-input
-                  v-model="vibrationSpeedDangerThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
-            <p class="BtRightP">
-              <span class="label-text">包络总值报警阈值(gE)</span>
-              <span
-                ><el-input
-                  v-model="envelopeTotalAlarmThreshold"
-                  size="small"
-                  v-number-only
-                ></el-input
-              ></span>
-            </p>
+
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="50%"
+
+      >
+        <div class="BtRight">
+          <h4>参数设置</h4>
+          <div class="BtRightDiv">
             <p class="BtRightP">
-              <span class="label-text">包络总值危险阈值(gE)</span>
-              <span
+              发电机到轴承测点转速传动比<span
                 ><el-input
-                  v-model="envelopeTotalDangerThreshold"
+                  v-model="transmissionRatio"
                   size="small"
                   v-number-only
                 ></el-input
               ></span>
             </p>
+            <h4>滚动轴承参数输入</h4>
+            <div class="canshu">
+              <p class="BtRightP">
+                <span class="label-text">轴承节圆直径D(mm)</span>
+                <span
+                  ><el-input
+                    v-model="bearingPitchDiameter"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+              <p class="BtRightP">
+                <span class="label-text">滚动体直径d(mm)</span>
+                <span
+                  ><el-input
+                    v-model="rollingElementDiameter"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+              <p class="BtRightP">
+                <span class="label-text">滚动体个数Z(个)</span>
+                <span
+                  ><el-input
+                    v-model="rollingElementCount"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+              <p class="BtRightP">
+                <span class="label-text">接触角α(°)</span>
+                <span
+                  ><el-input
+                    v-model="contactAngle"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+            </div>
+            <h4>报警阈值输入</h4>
+            <div class="canshu">
+              <p class="BtRightP">
+                <span class="label-text">振动速度报警阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedAlarmThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+              <p class="BtRightP">
+                <span class="label-text">振动速度危险阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedDangerThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+              <p class="BtRightP">
+                <span class="label-text">包络总值报警阈值(gE)</span>
+                <span
+                  ><el-input
+                    v-model="envelopeTotalAlarmThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+              <p class="BtRightP">
+                <span class="label-text">包络总值危险阈值(gE)</span>
+                <span
+                  ><el-input
+                    v-model="envelopeTotalDangerThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+            </div>
           </div>
         </div>
-      </div>
+             <div class="dialog-footer">
+          <el-button type="primary" size="small" @click="submit"
+            >确定</el-button
+          >
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -284,6 +277,7 @@ export default {
       },
       hasError: false, // 标志是否已经显示过错误提示
       result: {},
+      dialogVisible: false,
     };
   },
   created() {},
@@ -316,10 +310,11 @@ export default {
       this.currentPage = val; // 子组件内部更新当前页
       this.$emit("updatePage", this.currentPage); // 通知父组件，把当前页传出去
     },
+ 
     automaticDiagnosis() {
-      
-    
-
+      this.dialogVisible = true;
+    },
+    submit() {
       // 验证必填项
       const requiredFields = [
         { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
@@ -418,6 +413,7 @@ export default {
       this.yData = fields.map(({ key }) =>
         this.tableData.map((item) => Number(item[key]))
       );
+      this.dialogVisible = false;
     },
   },
 };
@@ -433,7 +429,7 @@ h4 {
   display: flex;
   justify-content: space-around;
   .leftdiv {
-    width: 39%;
+    width: 50%;
     display: flex;
     justify-content: space-around;
     .stateBox {
@@ -479,13 +475,13 @@ h4 {
             margin-right: 5px;
           }
           .color1 {
-            background-color: #8AE359;
+            background-color: #8ae359;
           }
           .color2 {
-            background-color: #EECB5F  ;
+            background-color: #eecb5f;
           }
           .color3 {
-            background-color: #F7715F;
+            background-color: #f7715f;
           }
         }
       }
@@ -497,12 +493,12 @@ h4 {
     }
   }
   .rightdiv {
-    width: 60%;
+    width: 50%;
     .fenye {
       display: flex;
       justify-content: space-between;
       margin: 5px 0;
-      font-size: 12px;
+      font-size: 11px;
       line-height: 30px;
       span {
         font-weight: 600;
@@ -517,11 +513,11 @@ h4 {
   margin-top: 10px;
   .BtLeft {
     border: 1px solid rgb(231, 231, 231);
-    width: 49%;
+    width: 100%;
     padding: 10px;
   }
   .BtRight {
-    width: 49%;
+
     border: 1px solid rgb(231, 231, 231);
     padding: 10px;
     .BtRightDiv {
@@ -552,6 +548,10 @@ h4 {
       }
     }
   }
+   .dialog-footer {
+    margin-top: 20px;
+    text-align: right;
+  }
 }
 ::v-deep .el-table__cell {
   padding: 2px 0;

src/views/health/components/malfunction/dissymmetry.vue

@@ -1,16 +1,482 @@
 <template>
-  <div>不对称诊断</div>
+  <div>
+    <div class="TopBox">
+      <div class="rightdiv">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="250"
+        >
+          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            prop="timeStamp"
+            label="时间"
+            align="center"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="samplingFrequency"
+            label="采样频率(Hz)"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="rotationalSpeed"
+            label="转速(rpm)"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
+
+          <el-pagination
+            small
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="totalCount"
+            :page-size="20"
+          ></el-pagination>
+        </div>
+      </div>
+
+      <div class="leftdiv">
+        <div class="stateBox">
+          <h4>不对中状态</h4>
+          <div class="state">
+            <p :style="{ backgroundColor: bearingStateColors.innerRing }">
+              不对中
+            </p>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="automaticDiagnosis"
+            class="btn-auto"
+            >自动诊断</el-button
+          >
+        </div>
+
+        <div class="Btn">
+          <div style="height: 200px">
+            <bing :result="result"> </bing>
+          </div>
+
+          <div class="minp">
+            <p class="PText">
+              <span><i class="color1"></i>正常</span
+              ><span><i class="color2"></i>报警</span
+              ><span><i class="color3"></i>危险</span>
+            </p>
+
+            <h4>诊断步骤：</h4>
+            <p>1、选择振动测点与起止时间，点击“查询;</p>
+            <p>2、对不对中“参数设置”输入相关信息;</p>
+            <p>3、点击“自动诊断”输出最终轴承状态结果。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottomBox">
+      <div class="BtLeft">
+        <h4>不对中故障状态趋势图</h4>
+        <el-empty
+          v-if="this.xData.length === 0 || this.yData.length === 0"
+          description="暂无数据"
+          style="padding: 17px 0"
+        ></el-empty>
+        <Eecharts
+          v-else
+          style="height: 250px"
+          :xData="xData"
+          :yData="yData"
+          :yNames="['不对中故障']"
+          yAxisName="不对中故障状态"
+        ></Eecharts>
+      </div>
+
+      <el-dialog title="参数" :visible.sync="dialogVisible" width="50%">
+        <div class="BtRight">
+          <h4>参数设置</h4>
+          <div class="BtRightDiv">
+            <p class="BtRightP">
+              <span>发电机到不对中测点的转速传动比</span>
+
+              <span
+                ><el-input
+                  v-model="transmissionRatio"
+                  size="small"
+                  v-number-only
+                ></el-input
+              ></span>
+            </p>
+
+            <h4>报警阈值输入</h4>
+            <div class="canshu">
+              <p class="BtRightP">
+                <span class="label-text">振动速度报警阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedAlarmThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+
+              <p class="BtRightP">
+                <span class="label-text">振动速度危险阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedDangerThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <el-button type="primary" size="small" @click="submit"
+            >确定</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
+import Eecharts from "./Eecharts.vue";
+import bing from "./bing.vue";
+import { cacheEntryPossiblyAdded } from "plotly.js-dist";
 export default {
+  components: { Eecharts, bing },
+  props: {
+    codedata: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    totalPage: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      // 添加新的数据属性用于绑定输入框的值
+      transmissionRatio: "",
+      bearingPitchDiameter: "",
+      rollingElementDiameter: "",
+      rollingElementCount: "",
+      contactAngle: "",
+      vibrationSpeedAlarmThreshold: "",
+      vibrationSpeedDangerThreshold: "",
+      envelopeTotalAlarmThreshold: "",
+      envelopeTotalDangerThreshold: "",
+      // 分页
 
-}
+      currentPage: 1,
+      total: 1,
+
+      xData: [],
+      yData: [],
+      // 颜色判断
+      bearingStateColors: {
+        innerRing: "#80808057",
+        outerRing: "#80808057",
+        rollingElement: "#80808057",
+        cage: "#80808057",
+      },
+      hasError: false, // 标志是否已经显示过错误提示
+      result: {},
+      dialogVisible: false,
+    };
+  },
+  created() {},
+  watch: {
+    codedata: {
+      handler(newVal) {
+        this.tableData = newVal;
+      },
+      immediate: true, // 组件创建时立刻执行一次
+      deep: true, // 如果 codedata 是复杂对象，建议加上
+    },
+  },
+
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+
+      this.currentPage = val; // 子组件内部更新当前页
+      this.$emit("updatePage", this.currentPage); // 通知父组件，把当前页传出去
+    },
+    automaticDiagnosis() {
+      this.dialogVisible = true;
+    },
+    submit() {
+      // 验证必填项
+      const requiredFields = [
+        { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
+        { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
+        { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
+        { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
+        { field: this.contactAngle, name: "接触角α(°)" },
+        {
+          field: this.vibrationSpeedAlarmThreshold,
+          name: "振动速度报警阈值(mm/s)",
+        },
+        {
+          field: this.vibrationSpeedDangerThreshold,
+          name: "振动速度危险阈值(mm/s)",
+        },
+        {
+          field: this.envelopeTotalAlarmThreshold,
+          name: "包络总值报警阈值(gE)",
+        },
+        {
+          field: this.envelopeTotalDangerThreshold,
+          name: "包络总值危险阈值(gE)",
+        },
+      ];
+
+      // 记录是否已弹出过错误提示
+      let hasError = false;
+
+      // 只检查必填项的字段是否为空
+      // for (const { field, name } of requiredFields) {
+      //   if (!field && !hasError) {
+      //     // 弹出提示并标记已经出现错误提示
+      //     this.$message.error(`${name} 是必填项`);
+      //     hasError = true;  // 标记已经弹出过错误提示
+      //     return;  // 停止执行后续逻辑
+      //   }
+      // }
+
+      // 如果验证通过，继续执行后续逻辑
+      const newProps = this.tableData.map(() => ({
+        innerRingFault: Math.floor(Math.random() * 3).toString(),
+        // outerRingFault: Math.floor(Math.random() * 3).toString(),
+        // rollingElementFault: Math.floor(Math.random() * 3).toString(),
+        // cageFault: Math.floor(Math.random() * 3).toString(),
+      }));
+
+      this.tableData.forEach((row, index) => {
+        this.$set(this.tableData, index, {
+          ...row,
+          ...newProps[index], // 用每一行自己生成的随机数
+        });
+      });
+
+      const faultValues = [
+        ...this.tableData.map((record) => record.innerRingFault),
+        // ...this.tableData.map((record) => record.outerRingFault),
+        // ...this.tableData.map((record) => record.rollingElementFault),
+        // ...this.tableData.map((record) => record.cageFault),
+      ];
+
+      // 统计各个值出现的次数
+      const counter = faultValues.reduce((acc, value) => {
+        acc[value] = (acc[value] || 0) + 1;
+        return acc;
+      }, {});
+
+      // 构造统计结果对象
+      this.result = {
+        1: counter["0"] || 0,
+        2: counter["1"] || 0,
+        3: counter["2"] || 0,
+      };
+
+      // 更新颜色状态
+      const fields = [
+        { key: "innerRingFault", colorKey: "innerRing" },
+        // { key: "outerRingFault", colorKey: "outerRing" },
+        // { key: "rollingElementFault", colorKey: "rollingElement" },
+        // { key: "cageFault", colorKey: "cage" },
+      ];
+
+      fields.forEach(({ key, colorKey }) => {
+        const values = newProps.map((item) => Number(item[key]));
+        const maxVal = Math.max(...values);
+        let color = "#80808057"; // 默认灰色
+        if (maxVal === 0) color = "#8AE359"; // 无故障
+        else if (maxVal === 1) color = "#EECB5F"; // 警告
+        else if (maxVal === 2) color = "#F7715F"; // 危险
+
+        this.bearingStateColors[colorKey] = color; // 更新颜色
+      });
+
+      // 更新趋势图数据
+      // 更新趋势图数据（用tableData，不是newProps）
+      this.xData = this.tableData.map((item) => item.timeStamp);
+      this.yData = fields.map(({ key }) =>
+        this.tableData.map((item) => Number(item[key]))
+      );
+      this.dialogVisible = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-div{
-  height: 300px;
-  background: #677445;;
+h4 {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.TopBox {
+  height: 280px;
+  display: flex;
+  justify-content: space-around;
+  .leftdiv {
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    .stateBox {
+      .state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* 整体居中 */
+        align-items: center;
+        height: 200px;
+        gap: 20px; /* 控制间距 */
+        p {
+          width: 150px;
+          height: 40px;
+          background: rgb(227, 227, 227);
+          color: rgb(50, 50, 50);
+          text-align: center;
+          align-content: center;
+          font-weight: 600;
+        }
+      }
+      .btn-auto {
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    .Btn {
+      width: 50%;
+      display: flex;
+      flex-direction: column; /* 垂直排列 */
+      justify-content: space-between; /* 顶部和底部对齐 */
+      min-height: 100px; /* 确保容器有足够高度 */
+      margin: 10px 0;
+      .PText {
+        display: flex;
+        justify-content: space-around;
+
+        span {
+          display: flex;
+          align-items: center;
+          i {
+            width: 30px;
+            height: 15px;
+            margin-right: 5px;
+          }
+          .color1 {
+            background-color: #8ae359;
+          }
+          .color2 {
+            background-color: #eecb5f;
+          }
+          .color3 {
+            background-color: #f7715f;
+          }
+        }
+      }
+      margin: 10px 0;
+      .minp {
+        font-size: 12px;
+        margin-top: auto; /* 自动推到最底部 */
+      }
+    }
+  }
+  .rightdiv {
+    width: 50%;
+    .fenye {
+      display: flex;
+      justify-content: space-between;
+      margin: 5px 0;
+      font-size: 11px;
+      line-height: 30px;
+      span {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.bottomBox {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+  .BtLeft {
+    border: 1px solid rgb(231, 231, 231);
+    width: 100%;
+    padding: 10px;
+  }
+  .BtRight {
+    // width: 49%;
+    border: 1px solid rgb(231, 231, 231);
+    padding: 10px;
+    .BtRightDiv {
+      padding: 0 10px;
+      h4 {
+        font-size: 14px;
+      }
+      .BtRightP {
+        line-height: 30px;
+        font-size: 12px;
+        display: flex;
+        margin-bottom: 5px;
+        width: 50%;
+        span {
+          margin-left: 10px;
+          .el-input {
+            width: 100px;
+          }
+        }
+        .label-text {
+          width: 140px;
+        }
+      }
+      .canshu {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+    }
+  }
+  .dialog-footer {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+::v-deep .el-table__cell {
+  padding: 2px 0;
+  font-size: 12px;
 }
 </style>

src/views/health/components/malfunction/gear.vue

@@ -1,16 +1,485 @@
 <template>
-  <div>齿轮诊断</div>
+  <div>
+    <div class="TopBox">
+      <div class="rightdiv">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="250"
+        >
+          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            prop="timeStamp"
+            label="时间"
+            align="center"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="samplingFrequency"
+            label="采样频率(Hz)"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="rotationalSpeed"
+            label="转速(rpm)"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
+
+          <el-pagination
+            small
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="totalCount"
+            :page-size="20"
+          ></el-pagination>
+        </div>
+      </div>
+
+      <div class="leftdiv">
+        <div class="stateBox">
+          <h4>齿轮状态</h4>
+          <div class="state">
+            <p :style="{ backgroundColor: bearingStateColors.innerRing }">
+              齿轮磨损
+            </p>
+              <p :style="{ backgroundColor: bearingStateColors.innerRing }">
+              齿轮断齿
+            </p>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="automaticDiagnosis"
+            class="btn-auto"
+            >自动诊断</el-button
+          >
+        </div>
+
+        <div class="Btn">
+          <div style="height: 200px">
+            <bing :result="result"> </bing>
+          </div>
+
+          <div class="minp">
+            <p class="PText">
+              <span><i class="color1"></i>正常</span
+              ><span><i class="color2"></i>报警</span
+              ><span><i class="color3"></i>危险</span>
+            </p>
+
+            <h4>诊断步骤：</h4>
+            <p>1、选择振动测点与起止时间，点击“查询;</p>
+            <p>2、对齿轮“参数设置”输入相关信息;</p>
+            <p>3、点击“自动诊断”输出最终轴承状态结果。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottomBox">
+      <div class="BtLeft">
+        <h4>齿轮故障状态趋势图</h4>
+        <el-empty
+          v-if="this.xData.length === 0 || this.yData.length === 0"
+          description="暂无数据"
+          style="padding: 17px 0"
+        ></el-empty>
+        <Eecharts
+          v-else
+          style="height: 300px"
+          :xData="xData"
+          :yData="yData"
+          :yNames="['齿轮故障']"
+          yAxisName="齿轮故障状态"
+        ></Eecharts>
+      </div>
+
+      <el-dialog title="参数" :visible.sync="dialogVisible" width="50%">
+        <div class="BtRight">
+          <h4>参数设置</h4>
+          <div class="BtRightDiv">
+            <p class="BtRightP">
+              <span>发电机到齿轮测点的转速传动比</span>
+
+              <span
+                ><el-input
+                  v-model="transmissionRatio"
+                  size="small"
+                  v-number-only
+                ></el-input
+              ></span>
+            </p>
+
+            <h4>报警阈值输入</h4>
+            <div class="canshu">
+              <p class="BtRightP">
+                <span class="label-text">振动速度报警阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedAlarmThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+
+              <p class="BtRightP">
+                <span class="label-text">振动速度危险阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedDangerThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <el-button type="primary" size="small" @click="submit"
+            >确定</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
+import Eecharts from "./Eecharts.vue";
+import bing from "./bing.vue";
+import { cacheEntryPossiblyAdded } from "plotly.js-dist";
 export default {
+  components: { Eecharts, bing },
+  props: {
+    codedata: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    totalPage: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      // 添加新的数据属性用于绑定输入框的值
+      transmissionRatio: "",
+      bearingPitchDiameter: "",
+      rollingElementDiameter: "",
+      rollingElementCount: "",
+      contactAngle: "",
+      vibrationSpeedAlarmThreshold: "",
+      vibrationSpeedDangerThreshold: "",
+      envelopeTotalAlarmThreshold: "",
+      envelopeTotalDangerThreshold: "",
+      // 分页
 
-}
+      currentPage: 1,
+      total: 1,
+
+      xData: [],
+      yData: [],
+      // 颜色判断
+      bearingStateColors: {
+        innerRing: "#80808057",
+        outerRing: "#80808057",
+        rollingElement: "#80808057",
+        cage: "#80808057",
+      },
+      hasError: false, // 标志是否已经显示过错误提示
+      result: {},
+      dialogVisible: false,
+    };
+  },
+  created() {},
+  watch: {
+    codedata: {
+      handler(newVal) {
+        this.tableData = newVal;
+      },
+      immediate: true, // 组件创建时立刻执行一次
+      deep: true, // 如果 codedata 是复杂对象，建议加上
+    },
+  },
+
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+
+      this.currentPage = val; // 子组件内部更新当前页
+      this.$emit("updatePage", this.currentPage); // 通知父组件，把当前页传出去
+    },
+    automaticDiagnosis() {
+      this.dialogVisible = true;
+    },
+    submit() {
+      // 验证必填项
+      const requiredFields = [
+        { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
+        { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
+        { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
+        { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
+        { field: this.contactAngle, name: "接触角α(°)" },
+        {
+          field: this.vibrationSpeedAlarmThreshold,
+          name: "振动速度报警阈值(mm/s)",
+        },
+        {
+          field: this.vibrationSpeedDangerThreshold,
+          name: "振动速度危险阈值(mm/s)",
+        },
+        {
+          field: this.envelopeTotalAlarmThreshold,
+          name: "包络总值报警阈值(gE)",
+        },
+        {
+          field: this.envelopeTotalDangerThreshold,
+          name: "包络总值危险阈值(gE)",
+        },
+      ];
+
+      // 记录是否已弹出过错误提示
+      let hasError = false;
+
+      // 只检查必填项的字段是否为空
+      // for (const { field, name } of requiredFields) {
+      //   if (!field && !hasError) {
+      //     // 弹出提示并标记已经出现错误提示
+      //     this.$message.error(`${name} 是必填项`);
+      //     hasError = true;  // 标记已经弹出过错误提示
+      //     return;  // 停止执行后续逻辑
+      //   }
+      // }
+
+      // 如果验证通过，继续执行后续逻辑
+      const newProps = this.tableData.map(() => ({
+        innerRingFault: Math.floor(Math.random() * 3).toString(),
+        outerRingFault: Math.floor(Math.random() * 3).toString(),
+        // rollingElementFault: Math.floor(Math.random() * 3).toString(),
+        // cageFault: Math.floor(Math.random() * 3).toString(),
+      }));
+
+      this.tableData.forEach((row, index) => {
+        this.$set(this.tableData, index, {
+          ...row,
+          ...newProps[index], // 用每一行自己生成的随机数
+        });
+      });
+
+      const faultValues = [
+        ...this.tableData.map((record) => record.innerRingFault),
+        ...this.tableData.map((record) => record.outerRingFault),
+        // ...this.tableData.map((record) => record.rollingElementFault),
+        // ...this.tableData.map((record) => record.cageFault),
+      ];
+
+      // 统计各个值出现的次数
+      const counter = faultValues.reduce((acc, value) => {
+        acc[value] = (acc[value] || 0) + 1;
+        return acc;
+      }, {});
+
+      // 构造统计结果对象
+      this.result = {
+        1: counter["0"] || 0,
+        2: counter["1"] || 0,
+        3: counter["2"] || 0,
+      };
+
+      // 更新颜色状态
+      const fields = [
+        { key: "innerRingFault", colorKey: "innerRing" },
+        { key: "outerRingFault", colorKey: "outerRing" },
+        // { key: "rollingElementFault", colorKey: "rollingElement" },
+        // { key: "cageFault", colorKey: "cage" },
+      ];
+
+      fields.forEach(({ key, colorKey }) => {
+        const values = newProps.map((item) => Number(item[key]));
+        const maxVal = Math.max(...values);
+        let color = "#80808057"; // 默认灰色
+        if (maxVal === 0) color = "#8AE359"; // 无故障
+        else if (maxVal === 1) color = "#EECB5F"; // 警告
+        else if (maxVal === 2) color = "#F7715F"; // 危险
+
+        this.bearingStateColors[colorKey] = color; // 更新颜色
+      });
+
+      // 更新趋势图数据
+      // 更新趋势图数据（用tableData，不是newProps）
+      this.xData = this.tableData.map((item) => item.timeStamp);
+      this.yData = fields.map(({ key }) =>
+        this.tableData.map((item) => Number(item[key]))
+      );
+      this.dialogVisible = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-div{
-  height: 300px;
-  background: #fd5d18;;
+h4 {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.TopBox {
+  height: 280px;
+  display: flex;
+  justify-content: space-around;
+  .leftdiv {
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    .stateBox {
+      .state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* 整体居中 */
+        align-items: center;
+        height: 200px;
+        gap: 20px; /* 控制间距 */
+        p {
+          width: 150px;
+          height: 40px;
+          background: rgb(227, 227, 227);
+          color: rgb(50, 50, 50);
+          text-align: center;
+          align-content: center;
+          font-weight: 600;
+        }
+      }
+      .btn-auto {
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    .Btn {
+      width: 50%;
+      display: flex;
+      flex-direction: column; /* 垂直排列 */
+      justify-content: space-between; /* 顶部和底部对齐 */
+      min-height: 100px; /* 确保容器有足够高度 */
+      margin: 10px 0;
+      .PText {
+        display: flex;
+        justify-content: space-around;
+
+        span {
+          display: flex;
+          align-items: center;
+          i {
+            width: 30px;
+            height: 15px;
+            margin-right: 5px;
+          }
+          .color1 {
+            background-color: #8ae359;
+          }
+          .color2 {
+            background-color: #eecb5f;
+          }
+          .color3 {
+            background-color: #f7715f;
+          }
+        }
+      }
+      margin: 10px 0;
+      .minp {
+        font-size: 12px;
+        margin-top: auto; /* 自动推到最底部 */
+      }
+    }
+  }
+  .rightdiv {
+    width: 50%;
+    .fenye {
+      display: flex;
+      justify-content: space-between;
+      margin: 5px 0;
+      font-size: 11px;
+      line-height: 30px;
+      span {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.bottomBox {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+  .BtLeft {
+    border: 1px solid rgb(231, 231, 231);
+    width: 100%;
+    padding: 10px;
+  }
+  .BtRight {
+    // width: 49%;
+    border: 1px solid rgb(231, 231, 231);
+    padding: 10px;
+    .BtRightDiv {
+      padding: 0 10px;
+      h4 {
+        font-size: 14px;
+      }
+      .BtRightP {
+        line-height: 30px;
+        font-size: 12px;
+        display: flex;
+        margin-bottom: 5px;
+        width: 50%;
+        span {
+          margin-left: 10px;
+          .el-input {
+            width: 100px;
+          }
+        }
+        .label-text {
+          width: 140px;
+        }
+      }
+      .canshu {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+    }
+  }
+  .dialog-footer {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+::v-deep .el-table__cell {
+  padding: 2px 0;
+  font-size: 12px;
 }
 </style>

src/views/health/components/malfunction/loose.vue

@@ -1,16 +1,503 @@
 <template>
-  <div>松动诊断</div>
+  <div>
+    <div class="TopBox">
+      <div class="rightdiv">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="250"
+        >
+          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            prop="timeStamp"
+            label="时间"
+            align="center"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="samplingFrequency"
+            label="采样频率(Hz)"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="rotationalSpeed"
+            label="转速(rpm)"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
+
+          <el-pagination
+            small
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="totalCount"
+            :page-size="20"
+          ></el-pagination>
+        </div>
+      </div>
+
+      <div class="leftdiv">
+        <div class="stateBox">
+          <h4>松动状态</h4>
+          <div class="state">
+            <p :style="{ backgroundColor: bearingStateColors.innerRing }">
+              松动
+            </p>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="automaticDiagnosis"
+            class="btn-auto"
+            >自动诊断</el-button
+          >
+        </div>
+
+        <div class="Btn">
+          <div style="height: 200px">
+            <bing :result="result"> </bing>
+          </div>
+
+          <div class="minp">
+            <p class="PText">
+              <span><i class="color1"></i>正常</span
+              ><span><i class="color2"></i>报警</span
+              ><span><i class="color3"></i>危险</span>
+            </p>
+
+            <h4>诊断步骤：</h4>
+            <p>1、选择振动测点与起止时间，点击“查询;</p>
+            <p>2、对松动“参数设置”输入相关信息;</p>
+            <p>3、点击“自动诊断”输出最终轴承状态结果。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottomBox">
+      <div class="BtLeft">
+        <h4>测点基础信息</h4>
+        <el-empty
+          :image="kfImg"
+          description="功能开发中"
+          style="padding: 48px 0"
+        />
+      </div>
+
+      <div class="BtLeft">
+        <h4>松动故障状态趋势图</h4>
+        <el-empty
+          v-if="this.xData.length === 0 || this.yData.length === 0"
+          description="暂无数据"
+          style="padding: 48px 0"
+        ></el-empty>
+        <Eecharts
+          v-else
+          style="height: 300px"
+          :xData="xData"
+          :yData="yData"
+          :yNames="['松动故障']"
+          yAxisName="松动故障状态"
+        ></Eecharts>
+      </div>
+
+      <el-dialog title="参数" :visible.sync="dialogVisible" width="50%">
+        <div class="BtRight">
+          <h4>参数设置</h4>
+          <div class="BtRightDiv">
+            <p class="BtRightP">
+              <span>发电机到松动测点的转速传动比</span>
+
+              <span
+                ><el-input
+                  v-model="transmissionRatio"
+                  size="small"
+                  v-number-only
+                ></el-input
+              ></span>
+            </p>
+
+            <h4>报警阈值输入</h4>
+            <div class="canshu">
+              <p class="BtRightP">
+                <span class="label-text">振动速度报警阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedAlarmThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+
+              <p class="BtRightP">
+                <span class="label-text">振动速度危险阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedDangerThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <el-button type="primary" size="small" @click="submit"
+            >确定</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
+import kfImg from "@/assets/KF.png";
+import Eecharts from "./Eecharts.vue";
+import bing from "./bing.vue";
+import { cacheEntryPossiblyAdded } from "plotly.js-dist";
 export default {
+  components: { Eecharts, bing },
+  props: {
+    codedata: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    totalPage: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      kfImg: kfImg,
+      tableData: [],
+      // 添加新的数据属性用于绑定输入框的值
+      transmissionRatio: "",
+      bearingPitchDiameter: "",
+      rollingElementDiameter: "",
+      rollingElementCount: "",
+      contactAngle: "",
+      vibrationSpeedAlarmThreshold: "",
+      vibrationSpeedDangerThreshold: "",
+      envelopeTotalAlarmThreshold: "",
+      envelopeTotalDangerThreshold: "",
+      // 分页
 
-}
+      currentPage: 1,
+      total: 1,
+
+      xData: [],
+      yData: [],
+      // 颜色判断
+      bearingStateColors: {
+        innerRing: "#80808057",
+        outerRing: "#80808057",
+        rollingElement: "#80808057",
+        cage: "#80808057",
+      },
+      hasError: false, // 标志是否已经显示过错误提示
+      result: {},
+      dialogVisible: false,
+    };
+  },
+  created() {},
+  watch: {
+    codedata: {
+      handler(newVal) {
+        this.tableData = newVal;
+      },
+      immediate: true, // 组件创建时立刻执行一次
+      deep: true, // 如果 codedata 是复杂对象，建议加上
+    },
+  },
+
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+
+      this.currentPage = val; // 子组件内部更新当前页
+      this.$emit("updatePage", this.currentPage); // 通知父组件，把当前页传出去
+    },
+    automaticDiagnosis() {
+      this.dialogVisible = true;
+    },
+    submit() {
+      // 验证必填项
+      const requiredFields = [
+        { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
+        { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
+        { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
+        { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
+        { field: this.contactAngle, name: "接触角α(°)" },
+        {
+          field: this.vibrationSpeedAlarmThreshold,
+          name: "振动速度报警阈值(mm/s)",
+        },
+        {
+          field: this.vibrationSpeedDangerThreshold,
+          name: "振动速度危险阈值(mm/s)",
+        },
+        {
+          field: this.envelopeTotalAlarmThreshold,
+          name: "包络总值报警阈值(gE)",
+        },
+        {
+          field: this.envelopeTotalDangerThreshold,
+          name: "包络总值危险阈值(gE)",
+        },
+      ];
+
+      // 记录是否已弹出过错误提示
+      let hasError = false;
+
+      // 只检查必填项的字段是否为空
+      // for (const { field, name } of requiredFields) {
+      //   if (!field && !hasError) {
+      //     // 弹出提示并标记已经出现错误提示
+      //     this.$message.error(`${name} 是必填项`);
+      //     hasError = true;  // 标记已经弹出过错误提示
+      //     return;  // 停止执行后续逻辑
+      //   }
+      // }
+
+      // 如果验证通过，继续执行后续逻辑
+      const newProps = this.tableData.map(() => ({
+        innerRingFault: Math.floor(Math.random() * 3).toString(),
+        // outerRingFault: Math.floor(Math.random() * 3).toString(),
+        // rollingElementFault: Math.floor(Math.random() * 3).toString(),
+        // cageFault: Math.floor(Math.random() * 3).toString(),
+      }));
+
+      this.tableData.forEach((row, index) => {
+        this.$set(this.tableData, index, {
+          ...row,
+          ...newProps[index], // 用每一行自己生成的随机数
+        });
+      });
+
+      const faultValues = [
+        ...this.tableData.map((record) => record.innerRingFault),
+        // ...this.tableData.map((record) => record.outerRingFault),
+        // ...this.tableData.map((record) => record.rollingElementFault),
+        // ...this.tableData.map((record) => record.cageFault),
+      ];
+
+      // 统计各个值出现的次数
+      const counter = faultValues.reduce((acc, value) => {
+        acc[value] = (acc[value] || 0) + 1;
+        return acc;
+      }, {});
+
+      // 构造统计结果对象
+      this.result = {
+        1: counter["0"] || 0,
+        2: counter["1"] || 0,
+        3: counter["2"] || 0,
+      };
+
+      // 更新颜色状态
+      const fields = [
+        { key: "innerRingFault", colorKey: "innerRing" },
+        // { key: "outerRingFault", colorKey: "outerRing" },
+        // { key: "rollingElementFault", colorKey: "rollingElement" },
+        // { key: "cageFault", colorKey: "cage" },
+      ];
+
+      fields.forEach(({ key, colorKey }) => {
+        const values = newProps.map((item) => Number(item[key]));
+        const maxVal = Math.max(...values);
+        let color = "#80808057"; // 默认灰色
+        if (maxVal === 0) color = "#8AE359"; // 无故障
+        else if (maxVal === 1) color = "#EECB5F"; // 警告
+        else if (maxVal === 2) color = "#F7715F"; // 危险
+
+        this.bearingStateColors[colorKey] = color; // 更新颜色
+      });
+
+      // 更新趋势图数据
+      // 更新趋势图数据（用tableData，不是newProps）
+      this.xData = this.tableData.map((item) => item.timeStamp);
+      this.yData = fields.map(({ key }) =>
+        this.tableData.map((item) => Number(item[key]))
+      );
+      this.dialogVisible = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-div{
-  height: 300px;
-  background: #7e0505;;
+h4 {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.TopBox {
+  height: 280px;
+  display: flex;
+  justify-content: space-around;
+  .leftdiv {
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    .stateBox {
+      .state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* 整体居中 */
+        align-items: center;
+        height: 200px;
+        gap: 20px; /* 控制间距 */
+        p {
+          width: 150px;
+          height: 40px;
+          background: rgb(227, 227, 227);
+          color: rgb(50, 50, 50);
+          text-align: center;
+          align-content: center;
+          font-weight: 600;
+        }
+      }
+      .btn-auto {
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    .Btn {
+      width: 50%;
+      display: flex;
+      flex-direction: column; /* 垂直排列 */
+      justify-content: space-between; /* 顶部和底部对齐 */
+      min-height: 100px; /* 确保容器有足够高度 */
+      margin: 10px 0;
+      .PText {
+        display: flex;
+        justify-content: space-around;
+
+        span {
+          display: flex;
+          align-items: center;
+          i {
+            width: 30px;
+            height: 15px;
+            margin-right: 5px;
+          }
+          .color1 {
+            background-color: #8ae359;
+          }
+          .color2 {
+            background-color: #eecb5f;
+          }
+          .color3 {
+            background-color: #f7715f;
+          }
+        }
+      }
+      margin: 10px 0;
+      .minp {
+        font-size: 12px;
+        margin-top: auto; /* 自动推到最底部 */
+      }
+    }
+  }
+  .rightdiv {
+    width: 50%;
+    .fenye {
+      display: flex;
+      justify-content: space-between;
+      margin: 5px 0;
+      font-size: 11px;
+      line-height: 30px;
+      span {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.bottomBox {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  .BtLeft {
+    border: 1px solid rgb(231, 231, 231);
+    width: 49.5%;
+    padding: 10px;
+    
+  }
+  .BtRight {
+    // width: 49%;
+    border: 1px solid rgb(231, 231, 231);
+    padding: 10px;
+    .BtRightDiv {
+      padding: 0 10px;
+      h4 {
+        font-size: 14px;
+      }
+      .BtRightP {
+        line-height: 30px;
+        font-size: 12px;
+        display: flex;
+        margin-bottom: 5px;
+        width: 50%;
+        span {
+          margin-left: 10px;
+          .el-input {
+            width: 100px;
+          }
+        }
+        .label-text {
+          width: 140px;
+        }
+      }
+      .canshu {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+    }
+  }
+  .dialog-footer {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+::v-deep .el-table__cell {
+  padding: 2px 0;
+  font-size: 12px;
 }
+.el-empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    box-sizing: border-box;
+    // padding: 40px 0;
+    height: 310px;}
 </style>

src/views/health/components/malfunction/misalignment.vue

@@ -1,16 +1,482 @@
 <template>
-  <div>不平衡诊断</div>
+  <div>
+    <div class="TopBox">
+      <div class="rightdiv">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="250"
+        >
+          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            prop="timeStamp"
+            label="时间"
+            align="center"
+            width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="samplingFrequency"
+            label="采样频率(Hz)"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="rotationalSpeed"
+            label="转速(rpm)"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <p><span>故障状态代码说明:</span>0代表正常，1代表报警，2代表危险</p>
+
+          <el-pagination
+            small
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="totalCount"
+            :page-size="20"
+          ></el-pagination>
+        </div>
+      </div>
+
+      <div class="leftdiv">
+        <div class="stateBox">
+          <h4>不平衡状态</h4>
+          <div class="state">
+            <p :style="{ backgroundColor: bearingStateColors.innerRing }">
+              不平衡
+            </p>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="automaticDiagnosis"
+            class="btn-auto"
+            >自动诊断</el-button
+          >
+        </div>
+
+        <div class="Btn">
+          <div style="height: 200px">
+            <bing :result="result"> </bing>
+          </div>
+
+          <div class="minp">
+            <p class="PText">
+              <span><i class="color1"></i>正常</span
+              ><span><i class="color2"></i>报警</span
+              ><span><i class="color3"></i>危险</span>
+            </p>
+
+            <h4>诊断步骤：</h4>
+            <p>1、选择振动测点与起止时间，点击“查询;</p>
+            <p>2、对不平衡“参数设置”输入相关信息;</p>
+            <p>3、点击“自动诊断”输出最终轴承状态结果。</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottomBox">
+      <div class="BtLeft">
+        <h4>不平衡故障状态趋势图</h4>
+        <el-empty
+          v-if="this.xData.length === 0 || this.yData.length === 0"
+          description="暂无数据"
+          style="padding: 17px 0"
+        ></el-empty>
+        <Eecharts
+          v-else
+          style="height: 300px"
+          :xData="xData"
+          :yData="yData"
+          :yNames="['不平衡故障']"
+          yAxisName="不平衡故障状态"
+        ></Eecharts>
+      </div>
+
+      <el-dialog title="参数" :visible.sync="dialogVisible" width="50%">
+        <div class="BtRight">
+          <h4>参数设置</h4>
+          <div class="BtRightDiv">
+            <p class="BtRightP">
+              <span>发电机到不平衡测点的转速传动比</span>
+
+              <span
+                ><el-input
+                  v-model="transmissionRatio"
+                  size="small"
+                  v-number-only
+                ></el-input
+              ></span>
+            </p>
+
+            <h4>报警阈值输入</h4>
+            <div class="canshu">
+              <p class="BtRightP">
+                <span class="label-text">振动速度报警阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedAlarmThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+
+              <p class="BtRightP">
+                <span class="label-text">振动速度危险阈值(mm/s)</span>
+                <span
+                  ><el-input
+                    v-model="vibrationSpeedDangerThreshold"
+                    size="small"
+                    v-number-only
+                  ></el-input
+                ></span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <el-button type="primary" size="small" @click="submit"
+            >确定</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
+import Eecharts from "./Eecharts.vue";
+import bing from "./bing.vue";
+import { cacheEntryPossiblyAdded } from "plotly.js-dist";
 export default {
+  components: { Eecharts, bing },
+  props: {
+    codedata: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    totalPage: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      // 添加新的数据属性用于绑定输入框的值
+      transmissionRatio: "",
+      bearingPitchDiameter: "",
+      rollingElementDiameter: "",
+      rollingElementCount: "",
+      contactAngle: "",
+      vibrationSpeedAlarmThreshold: "",
+      vibrationSpeedDangerThreshold: "",
+      envelopeTotalAlarmThreshold: "",
+      envelopeTotalDangerThreshold: "",
+      // 分页
 
-}
+      currentPage: 1,
+      total: 1,
+
+      xData: [],
+      yData: [],
+      // 颜色判断
+      bearingStateColors: {
+        innerRing: "#80808057",
+        outerRing: "#80808057",
+        rollingElement: "#80808057",
+        cage: "#80808057",
+      },
+      hasError: false, // 标志是否已经显示过错误提示
+      result: {},
+      dialogVisible: false,
+    };
+  },
+  created() {},
+  watch: {
+    codedata: {
+      handler(newVal) {
+        this.tableData = newVal;
+      },
+      immediate: true, // 组件创建时立刻执行一次
+      deep: true, // 如果 codedata 是复杂对象，建议加上
+    },
+  },
+
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+
+      this.currentPage = val; // 子组件内部更新当前页
+      this.$emit("updatePage", this.currentPage); // 通知父组件，把当前页传出去
+    },
+    automaticDiagnosis() {
+      this.dialogVisible = true;
+    },
+    submit() {
+      // 验证必填项
+      const requiredFields = [
+        { field: this.transmissionRatio, name: "发动机到轴承测点转速传动比" },
+        { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
+        { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
+        { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
+        { field: this.contactAngle, name: "接触角α(°)" },
+        {
+          field: this.vibrationSpeedAlarmThreshold,
+          name: "振动速度报警阈值(mm/s)",
+        },
+        {
+          field: this.vibrationSpeedDangerThreshold,
+          name: "振动速度危险阈值(mm/s)",
+        },
+        {
+          field: this.envelopeTotalAlarmThreshold,
+          name: "包络总值报警阈值(gE)",
+        },
+        {
+          field: this.envelopeTotalDangerThreshold,
+          name: "包络总值危险阈值(gE)",
+        },
+      ];
+
+      // 记录是否已弹出过错误提示
+      let hasError = false;
+
+      // 只检查必填项的字段是否为空
+      // for (const { field, name } of requiredFields) {
+      //   if (!field && !hasError) {
+      //     // 弹出提示并标记已经出现错误提示
+      //     this.$message.error(`${name} 是必填项`);
+      //     hasError = true;  // 标记已经弹出过错误提示
+      //     return;  // 停止执行后续逻辑
+      //   }
+      // }
+
+      // 如果验证通过，继续执行后续逻辑
+      const newProps = this.tableData.map(() => ({
+        innerRingFault: Math.floor(Math.random() * 3).toString(),
+        // outerRingFault: Math.floor(Math.random() * 3).toString(),
+        // rollingElementFault: Math.floor(Math.random() * 3).toString(),
+        // cageFault: Math.floor(Math.random() * 3).toString(),
+      }));
+
+      this.tableData.forEach((row, index) => {
+        this.$set(this.tableData, index, {
+          ...row,
+          ...newProps[index], // 用每一行自己生成的随机数
+        });
+      });
+
+      const faultValues = [
+        ...this.tableData.map((record) => record.innerRingFault),
+        // ...this.tableData.map((record) => record.outerRingFault),
+        // ...this.tableData.map((record) => record.rollingElementFault),
+        // ...this.tableData.map((record) => record.cageFault),
+      ];
+
+      // 统计各个值出现的次数
+      const counter = faultValues.reduce((acc, value) => {
+        acc[value] = (acc[value] || 0) + 1;
+        return acc;
+      }, {});
+
+      // 构造统计结果对象
+      this.result = {
+        1: counter["0"] || 0,
+        2: counter["1"] || 0,
+        3: counter["2"] || 0,
+      };
+
+      // 更新颜色状态
+      const fields = [
+        { key: "innerRingFault", colorKey: "innerRing" },
+        // { key: "outerRingFault", colorKey: "outerRing" },
+        // { key: "rollingElementFault", colorKey: "rollingElement" },
+        // { key: "cageFault", colorKey: "cage" },
+      ];
+
+      fields.forEach(({ key, colorKey }) => {
+        const values = newProps.map((item) => Number(item[key]));
+        const maxVal = Math.max(...values);
+        let color = "#80808057"; // 默认灰色
+        if (maxVal === 0) color = "#8AE359"; // 无故障
+        else if (maxVal === 1) color = "#EECB5F"; // 警告
+        else if (maxVal === 2) color = "#F7715F"; // 危险
+
+        this.bearingStateColors[colorKey] = color; // 更新颜色
+      });
+
+      // 更新趋势图数据
+      // 更新趋势图数据（用tableData，不是newProps）
+      this.xData = this.tableData.map((item) => item.timeStamp);
+      this.yData = fields.map(({ key }) =>
+        this.tableData.map((item) => Number(item[key]))
+      );
+      this.dialogVisible = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-div{
-  height: 300px;
-  background: #16a37e;;
+h4 {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.TopBox {
+  height: 280px;
+  display: flex;
+  justify-content: space-around;
+  .leftdiv {
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    .stateBox {
+      .state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* 整体居中 */
+        align-items: center;
+        height: 200px;
+        gap: 20px; /* 控制间距 */
+        p {
+          width: 150px;
+          height: 40px;
+          background: rgb(227, 227, 227);
+          color: rgb(50, 50, 50);
+          text-align: center;
+          align-content: center;
+          font-weight: 600;
+        }
+      }
+      .btn-auto {
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    .Btn {
+      width: 50%;
+      display: flex;
+      flex-direction: column; /* 垂直排列 */
+      justify-content: space-between; /* 顶部和底部对齐 */
+      min-height: 100px; /* 确保容器有足够高度 */
+      margin: 10px 0;
+      .PText {
+        display: flex;
+        justify-content: space-around;
+
+        span {
+          display: flex;
+          align-items: center;
+          i {
+            width: 30px;
+            height: 15px;
+            margin-right: 5px;
+          }
+          .color1 {
+            background-color: #8ae359;
+          }
+          .color2 {
+            background-color: #eecb5f;
+          }
+          .color3 {
+            background-color: #f7715f;
+          }
+        }
+      }
+      margin: 10px 0;
+      .minp {
+        font-size: 12px;
+        margin-top: auto; /* 自动推到最底部 */
+      }
+    }
+  }
+  .rightdiv {
+    width: 50%;
+    .fenye {
+      display: flex;
+      justify-content: space-between;
+      margin: 5px 0;
+      font-size: 11px;
+      line-height: 30px;
+      span {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.bottomBox {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+  .BtLeft {
+    border: 1px solid rgb(231, 231, 231);
+    width: 100%;
+    padding: 10px;
+  }
+  .BtRight {
+    // width: 49%;
+    border: 1px solid rgb(231, 231, 231);
+    padding: 10px;
+    .BtRightDiv {
+      padding: 0 10px;
+      h4 {
+        font-size: 14px;
+      }
+      .BtRightP {
+        line-height: 30px;
+        font-size: 12px;
+        display: flex;
+        margin-bottom: 5px;
+        width: 50%;
+        span {
+          margin-left: 10px;
+          .el-input {
+            width: 100px;
+          }
+        }
+        .label-text {
+          width: 140px;
+        }
+      }
+      .canshu {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+    }
+  }
+  .dialog-footer {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+::v-deep .el-table__cell {
+  padding: 2px 0;
+  font-size: 12px;
 }
 </style>

src/views/health/components/malfunction/temperature.vue

@@ -1,18 +1,437 @@
 <template>
   <div>
-    温度诊断
+    <div class="TopBox">
+
+          <div class="rightdiv">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="250"
+        >
+          <!-- <el-table-column fixed type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            prop="timeStamp"
+            label="时间"
+            align="center"
+   
+          >
+          </el-table-column>
+
+          <el-table-column prop="" label="部件部件名称" align="center">
+          </el-table-column>
+          <el-table-column
+            prop="innerRingFault"
+            label="温度状态"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <p><span>故障状态代码说明:</span>0代表正常，1代表异常</p>
+
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="totalCount"
+            :page-size="10"
+          ></el-pagination>
+        </div>
+      </div>
+
+      <div class="leftdiv">
+        <div class="stateBox">
+          <h4>温度状态</h4>
+          <div class="state">
+            <p :style="{ backgroundColor: bearingStateColors.innerRing }">
+              主轴承温度
+            </p>
+            <p :style="{ backgroundColor: bearingStateColors.outerRing }">
+              齿轮箱温度
+            </p>
+            <p :style="{ backgroundColor: bearingStateColors.rollingElement }">
+              发电机驱动侧温度
+            </p>
+            <p :style="{ backgroundColor: bearingStateColors.cage }">
+              发电机非驱动侧温度
+            </p>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="automaticDiagnosis"
+            class="btn-auto"
+            >自动诊断</el-button
+          >
+        </div>
+
+        <div class="Btn">
+          <div style="height: 200px">
+            <bing :result="result"> </bing>
+          </div>
+
+          <div class="minp">
+            <p class="PText">
+              <span><i class="color1"></i>正常</span
+              ><span><i class="color2"></i>报警</span
+              ><span><i class="color3"></i>危险</span>
+            </p>
+
+            <h4>诊断步骤：</h4>
+            <p>1、选择振动测点与起止时间，点击“查询”;</p>
+            <p>2、对轴承“参数设置”输入相关信息;</p>
+            <p>3、点击“自动诊断”输出最终轴承状态结果。</p>
+          </div>
+        </div>
+      </div>
+
+  
+    </div>
+    <div class="bottomBox">
+      <div class="tu">
+        <zhexian title="主轴承温度特征值℃" lineType="line" lineColor="#02aae9"></zhexian>
+      </div>
+      <div class="tu">
+        <zhexian  title="驱动侧发电机轴承温度℃"></zhexian>
+      </div>
+      <div class="tu">
+        <zhexian title="齿轮箱油温℃" lineType="line" lineColor="#02aae9"></zhexian>
+      </div>
+      <div class="tu">
+       <zhexian  title="驱动侧非发电机轴承温度℃"></zhexian>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import Eecharts from "./Eecharts.vue";
+import bing from "./bing.vue";
+import { cacheEntryPossiblyAdded } from "plotly.js-dist";
+import Zhexian from "./zhexian.vue";
 export default {
+  components: { Eecharts, bing, Zhexian },
+  props: {
+    codedata: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    totalPage: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      // 添加新的数据属性用于绑定输入框的值
+      transmissionRatio: "",
+      bearingPitchDiameter: "",
+      rollingElementDiameter: "",
+      rollingElementCount: "",
+      contactAngle: "",
+      vibrationSpeedAlarmThreshold: "",
+      vibrationSpeedDangerThreshold: "",
+      envelopeTotalAlarmThreshold: "",
+      envelopeTotalDangerThreshold: "",
+      // 分页
 
-}
+      currentPage: 1,
+      total: 1,
+
+      xData: [],
+      yData: [],
+      // 颜色判断
+      bearingStateColors: {
+        innerRing: "#80808057",
+        outerRing: "#80808057",
+        rollingElement: "#80808057",
+        cage: "#80808057",
+      },
+      hasError: false, // 标志是否已经显示过错误提示
+      result: {},
+    };
+  },
+  created() {},
+  watch: {
+    codedata: {
+      handler(newVal) {
+        this.tableData = newVal;
+      },
+      immediate: true, // 组件创建时立刻执行一次
+      deep: true, // 如果 codedata 是复杂对象，建议加上
+    },
+  },
+
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+
+      this.currentPage = val; // 子组件内部更新当前页
+      this.$emit("updatePage", this.currentPage); // 通知父组件，把当前页传出去
+    },
+    automaticDiagnosis() {
+      // 验证必填项
+      const requiredFields = [
+        { field: this.transmissionRatio, name: "发电机到轴承测点转速传动比" },
+        { field: this.bearingPitchDiameter, name: "轴承节圆直径D(mm)" },
+        { field: this.rollingElementDiameter, name: "滚动体直径d(mm)" },
+        { field: this.rollingElementCount, name: "滚动体个数Z(个)" },
+        { field: this.contactAngle, name: "接触角α(°)" },
+        {
+          field: this.vibrationSpeedAlarmThreshold,
+          name: "振动速度报警阈值(mm/s)",
+        },
+        {
+          field: this.vibrationSpeedDangerThreshold,
+          name: "振动速度危险阈值(mm/s)",
+        },
+        {
+          field: this.envelopeTotalAlarmThreshold,
+          name: "包络总值报警阈值(gE)",
+        },
+        {
+          field: this.envelopeTotalDangerThreshold,
+          name: "包络总值危险阈值(gE)",
+        },
+      ];
+
+      // 记录是否已弹出过错误提示
+      let hasError = false;
+
+      // 只检查必填项的字段是否为空
+      // for (const { field, name } of requiredFields) {
+      //   if (!field && !hasError) {
+      //     // 弹出提示并标记已经出现错误提示
+      //     this.$message.error(`${name} 是必填项`);
+      //     hasError = true;  // 标记已经弹出过错误提示
+      //     return;  // 停止执行后续逻辑
+      //   }
+      // }
+
+      // 如果验证通过，继续执行后续逻辑
+      const newProps = this.tableData.map(() => ({
+        innerRingFault: Math.floor(Math.random() * 2).toString(),
+        // outerRingFault: Math.floor(Math.random() * 3).toString(),
+        // rollingElementFault: Math.floor(Math.random() * 3).toString(),
+        // cageFault: Math.floor(Math.random() * 3).toString(),
+      }));
+
+      this.tableData.forEach((row, index) => {
+        this.$set(this.tableData, index, {
+          ...row,
+          ...newProps[index], // 用每一行自己生成的随机数
+        });
+      });
+
+      const faultValues = [
+        ...this.tableData.map((record) => record.innerRingFault),
+        ...this.tableData.map((record) => record.outerRingFault),
+        ...this.tableData.map((record) => record.rollingElementFault),
+        ...this.tableData.map((record) => record.cageFault),
+      ];
+
+      // 统计各个值出现的次数
+      const counter = faultValues.reduce((acc, value) => {
+        acc[value] = (acc[value] || 0) + 1;
+        return acc;
+      }, {});
+
+      // 构造统计结果对象
+      this.result = {
+        1: counter["0"] || 0,
+        2: counter["1"] || 0,
+        // 3: counter["2"] || 0,
+      };
+
+      // 更新颜色状态
+      const fields = [
+        { key: "innerRingFault", colorKey: "innerRing" },
+        { key: "outerRingFault", colorKey: "outerRing" },
+        { key: "rollingElementFault", colorKey: "rollingElement" },
+        { key: "cageFault", colorKey: "cage" },
+      ];
+
+      fields.forEach(({ key, colorKey }) => {
+        const values = newProps.map((item) => Number(item[key]));
+        const maxVal = Math.max(...values);
+        let color = "#80808057"; // 默认灰色
+        if (maxVal === 0) color = "#8AE359"; // 无故障
+        else if (maxVal === 1) color = "#EECB5F"; // 警告
+        // else if (maxVal === 2) color = "#F7715F"; // 危险
+
+        this.bearingStateColors[colorKey] = color; // 更新颜色
+      });
+
+      // 更新趋势图数据
+      // 更新趋势图数据（用tableData，不是newProps）
+      this.xData = this.tableData.map((item) => item.timeStamp);
+      this.yData = fields.map(({ key }) =>
+        this.tableData.map((item) => Number(item[key]))
+      );
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-div{
-  height: 300px;
-  background: #33a21d9f;;
+h4 {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+.TopBox {
+  height: 280px;
+  display: flex;
+  justify-content: space-around;
+  .leftdiv {
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    .stateBox {
+      .state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center; /* 整体居中 */
+        align-items: center;
+        height: 200px;
+        gap: 20px; /* 控制间距 */
+        p {
+          width: 150px;
+          height: 40px;
+          background: rgb(227, 227, 227);
+          color: rgb(50, 50, 50);
+          text-align: center;
+          align-content: center;
+          font-weight: 600;
+        }
+      }
+      .btn-auto {
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    .Btn {
+      width: 50%;
+      display: flex;
+      flex-direction: column; /* 垂直排列 */
+      justify-content: space-between; /* 顶部和底部对齐 */
+      min-height: 100px; /* 确保容器有足够高度 */
+      margin: 10px 0;
+      .PText {
+        display: flex;
+        justify-content: space-around;
+
+        span {
+          display: flex;
+          align-items: center;
+          i {
+            width: 30px;
+            height: 15px;
+            margin-right: 5px;
+          }
+          .color1 {
+            background-color: #8ae359;
+          }
+          .color2 {
+            background-color: #eecb5f;
+          }
+          .color3 {
+            background-color: #f7715f;
+          }
+        }
+      }
+      margin: 10px 0;
+      .minp {
+        font-size: 12px;
+        margin-top: auto; /* 自动推到最底部 */
+      }
+    }
+  }
+  .rightdiv {
+    width: 50%;
+    .fenye {
+      display: flex;
+      justify-content: space-between;
+      margin: 5px 0;
+      font-size: 12px;
+      line-height: 30px;
+      span {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.bottomBox {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  overflow: hidden;
+  overflow-y: auto;
+  height: 370px;
+  .tu {
+    width: 49%;
+    height: 370px;
+  }
+  // margin-top: 10px;
+  // .BtLeft {
+  //   border: 1px solid rgb(231, 231, 231);
+  //   width: 49%;
+  //   padding: 10px;
+  // }
+  // .BtRight {
+  //   width: 49%;
+  //   border: 1px solid rgb(231, 231, 231);
+  //   padding: 10px;
+  //   .BtRightDiv {
+  //     padding: 0 10px;
+  //     h4 {
+  //       font-size: 14px;
+  //     }
+  //     .BtRightP {
+  //       line-height: 30px;
+  //       font-size: 12px;
+  //       display: flex;
+  //       margin-bottom: 5px;
+  //       width: 50%;
+  //       span {
+  //         margin-left: 10px;
+  //         .el-input {
+  //           width: 100px;
+  //         }
+  //       }
+  //       .label-text {
+  //         width: 140px;
+  //       }
+  //     }
+  //     .canshu {
+  //       display: flex;
+  //       flex-wrap: wrap;
+  //       justify-content: space-between;
+  //     }
+  //   }
+  // }
+}
+::v-deep .el-table__cell {
+  padding: 2px 0;
+  font-size: 12px;
 }
 </style>

src/views/health/components/malfunction/zhexian.vue

@@ -0,0 +1,113 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'LargeAreaChart',
+  props: {
+    title: {
+      type: String,
+      default: 'Large Area Chart'
+    },
+    lineType: {
+      type: String,
+      default: 'line' // 可选：line, bar 等
+    },
+    lineColor: {
+      type: String,
+      default: '#5470C6' // 默认 ECharts 主色
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeUnmount() {
+    if (this.myChart) {
+      this.myChart.dispose()
+    }
+  },
+  methods: {
+    initChart() {
+      this.myChart = echarts.init(this.$refs.chartRef)
+
+      let base = +new Date(2024, 1, 3)
+      let oneDay = 24 * 360 * 100
+      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])
+        ])
+      }
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          position: pt => [pt[0], '10%']
+        },
+        title: {
+          left: 'center',
+          text: this.title
+        },
+        toolbox: {
+          feature: {
+            dataZoom: { yAxisIndex: 'none' },
+            restore: {},
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'time',
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, '100%']
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 20
+          },
+          {
+            start: 0,
+            end: 20
+          }
+        ],
+        series: [
+          {
+            name: '温度',
+            type: this.lineType,
+            smooth: true,
+            symbol: 'none',
+            areaStyle: this.lineType === 'line' ? {} : undefined,
+            itemStyle: {
+              color: this.lineColor
+            },
+            lineStyle: {
+              color: this.lineColor
+            },
+            data
+          }
+        ]
+      }
+
+      this.myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 可以按需添加样式 */
+</style>

src/views/health/components/spectrogramcharts.vue

@@ -333,11 +333,11 @@ export default {
       ].map(({ data, color }) => createMarkLine(data, color));
 
       const option = {
-        grid: {
+       grid: {
           left: 60, // 原来是100，适当缩小左右边距
-          right: 60,
-          bottom: 60, // 给推拽条和坐标轴腾出空间
-          top: 60,
+          right: 20,
+          bottom: 90, // 给推拽条和坐标轴腾出空间
+          // top: 60,
         },
         title: { text: this.spectrumList.title, left: "center" },
         toolbox: {

src/views/health/components/tendencycharts.vue

@@ -113,6 +113,12 @@ export default {
       const labels = data.map((item) => item.time_stamp || "N/A");
 
       const option = {
+            grid: {
+          left: 60, // 原来是100，适当缩小左右边距
+          right: 20,
+          bottom: 90, // 给推拽条和坐标轴腾出空间
+          // top: 60,
+        },
         color: colorPalette, // 设置颜色
         toolbox: {
           feature: {

src/views/health/components/timedomaincharts.vue

@@ -120,9 +120,9 @@ export default {
         },
         grid: {
           left: 60, // 原来是100，适当缩小左右边距
-          right: 60,
-          bottom: 60, // 给推拽条和坐标轴腾出空间
-          top: 60,
+          right: 20,
+          bottom: 90, // 给推拽条和坐标轴腾出空间
+          // top: 60,
         },
         toolbox: {
           feature: {

src/views/health/index.vue

@@ -4,7 +4,7 @@
       <p>
         单位：
         <selecttree
-               size="small"
+          size="small"
           style="width: 180px"
           placeholder="请选择所属公司"
           :list="parentOpt"
@@ -21,20 +21,29 @@
 
       <p>
         时间：
+
         <el-date-picker
-               size="small"
+          v-model="timevalue"
+          size="small"
+          type="month"
+          placeholder="选择月"
+        >
+        </el-date-picker>
+        <!-- <el-date-picker
+          size="small"
           v-model="timevalue"
           type="datetimerange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
         >
-        </el-date-picker>
+        </el-date-picker> -->
       </p>
       <el-button type="primary" size="small" @click="conditions"
         >查询</el-button
       >
     </div>
+    <div class="kuang">
     <div class="main-body">
       <div class="basics" v-for="(item, index) in ListData" :key="item + index">
         <div class="title">
@@ -92,6 +101,9 @@
         </div>
       </div>
     </div>
+
+  </div>
+      <p class="tishi"><span>健康度说明:</span>100-85代表健康，84-70代表亚健康，69-55一代表般，  &lt;55代表故障</p>
   </div>
 </template>
 
@@ -118,11 +130,11 @@ export default {
           status: "1",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "50" },
-            { name: "传动系统", val: "50" },
-            { name: "机舱系统", val: "50" },
-            { name: "电网环境", val: "50" },
-            { name: "辅助系统", val: "50" },
+            { name: "发电机组", val: "100" },
+            { name: "传动系统", val: "100" },
+            { name: "机舱系统", val: "100" },
+            { name: "电网环境", val: "100" },
+            { name: "辅助系统", val: "100" },
           ],
         },
         {
@@ -130,11 +142,11 @@ export default {
           status: "2",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "50" },
-            { name: "传动系统", val: "50" },
-            { name: "机舱系统", val: "50" },
-            { name: "电网环境", val: "50" },
-            { name: "辅助系统", val: "50" },
+            { name: "发电机组", val: "84" },
+            { name: "传动系统", val: "84" },
+            { name: "机舱系统", val: "84" },
+            { name: "电网环境", val: "84" },
+            { name: "辅助系统", val: "84" },
           ],
         },
         {
@@ -142,11 +154,11 @@ export default {
           status: "3",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "50" },
-            { name: "传动系统", val: "50" },
-            { name: "机舱系统", val: "50" },
-            { name: "电网环境", val: "50" },
-            { name: "辅助系统", val: "50" },
+            { name: "发电机组", val: "65" },
+            { name: "传动系统", val: "65" },
+            { name: "机舱系统", val: "65" },
+            { name: "电网环境", val: "65" },
+            { name: "辅助系统", val: "65" },
           ],
         },
         {
@@ -166,11 +178,11 @@ export default {
           status: "1",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "50" },
-            { name: "传动系统", val: "50" },
-            { name: "机舱系统", val: "50" },
-            { name: "电网环境", val: "50" },
-            { name: "辅助系统", val: "50" },
+        { name: "发电机组", val: "100" },
+            { name: "传动系统", val: "100" },
+            { name: "机舱系统", val: "100" },
+            { name: "电网环境", val: "100" },
+            { name: "辅助系统", val: "100" },
           ],
         },
         {
@@ -178,11 +190,11 @@ export default {
           status: "1",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "50" },
-            { name: "传动系统", val: "50" },
-            { name: "机舱系统", val: "50" },
-            { name: "电网环境", val: "50" },
-            { name: "辅助系统", val: "50" },
+           { name: "发电机组", val: "100" },
+            { name: "传动系统", val: "100" },
+            { name: "机舱系统", val: "100" },
+            { name: "电网环境", val: "100" },
+            { name: "辅助系统", val: "100" },
           ],
         },
       ],
@@ -259,8 +271,8 @@ export default {
   justify-content: space-evenly; /* 均匀分布 */
   gap: 10px;
 
-  height: min-content;
-  max-height: 700px;
+  // height: min-content;
+  // max-height: 700px;
   overflow: hidden;
   overflow-y: auto;
   .basics {
@@ -378,4 +390,14 @@ export default {
 .jia {
   color: var(--header-bg);
 }
+.kuang{
+  // height: min-content;
+height: 680px;
+}
+.tishi{
+  font-size: 12px;
+  span{
+    font-weight: 800;
+  }
+}
 </style>

src/views/health/malfunction copy.vue

@@ -0,0 +1,419 @@
+<template>
+  <div class="global-variable">
+    <div class="head">
+      <ul>
+        <li
+          v-for="(item, index) in menuItems"
+          :key="index"
+          @click="activeTab = item.component"
+          :class="{ active: activeTab === item.component }"
+        >
+          <span class="Simg"><img :src="item.icon" :alt="item.name" /></span>
+          <span>{{ item.name }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="searchbox">
+      <p>
+        单位：
+        <selecttree
+               size="small"
+          style="width: 180px"
+          placeholder="请选择所属公司"
+          :list="parentOpt"
+          type="1"
+          v-model="companyCode"
+          @change="parentChange"
+          :defaultParentProps="{
+            children: 'children',
+            label: 'companyName',
+            value: 'codeNumber',
+          }"
+        >
+        </selecttree>
+      </p>
+      <p>
+        风机：
+        <el-select
+               size="small"
+          style="width: 150px"
+          v-model="unitvalue"
+          @change="getchedian"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in unitoptions"
+            :key="item.engineCode"
+            :label="item.engineName"
+            :value="item.engineCode"
+          >
+          </el-option>
+        </el-select>
+      </p>
+      <p>
+        测点：
+        <el-select v-model="monitoringvalue"         size="small" clearable placeholder="请选择">
+          <el-option
+            v-for="item in monitoringoptions"
+            :key="item.detectionPointEn"
+            :label="item.detectionPointCn"
+            :value="item.detectionPointEn"
+          >
+          </el-option>
+        </el-select>
+      </p>
+      <p>
+        采样频率：
+        <el-select v-model="frequencyvalue"        size="small"  clearable placeholder="请选择">
+          <el-option
+            v-for="item in frequencyoptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+      </p>
+      <p>
+        时间：
+        <el-date-picker
+               size="small"
+          v-model="timevalue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </p>
+      <el-button type="primary" size="small" @click="conditions(1)"
+        >查询</el-button
+      >
+      <!-- <el-button type="primary" size="small">自动诊断</el-button> -->
+    </div>
+
+    <div class="main-body">
+      <keep-alive>
+        <component
+          :is="activeTab"
+          :codedata="codedata"
+          :totalCount="totalCount"
+          :totalPage="totalPage"
+          @updatePage="handlePageChange"
+        />
+      </keep-alive>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import * as FileSaver from "file-saver";
+import * as XLSX from "xlsx";
+import {
+  getSysOrganizationAuthTreeByRoleId,
+  windEngineGrouPage,
+  queryDetectionDic,
+} from "@/api/ledger.js";
+import selecttree from "../../components/selecttree.vue";
+import Bearing from "./components/malfunction/bearing.vue";
+import Dissymmetry from "./components/malfunction/dissymmetry.vue";
+import Gear from "./components/malfunction/gear.vue";
+import Loose from "./components/malfunction/loose.vue";
+import Misalignment from "./components/malfunction/misalignment.vue";
+import Temperature from "./components/malfunction/temperature.vue";
+import axios from "axios";
+export default {
+  components: {
+    selecttree,
+    Bearing,
+    Dissymmetry,
+    Gear,
+    Loose,
+    Misalignment,
+    Temperature,
+  },
+  data() {
+    return {
+      activeTab: "Bearing", // 默认显示轴承诊断
+      menuItems: [
+        {
+          name: "轴承诊断",
+          icon: require("@/assets/img/ZC.png"),
+          component: "Bearing",
+        },
+        {
+          name: "齿轮诊断",
+          icon: require("@/assets/img/SZ.png"),
+          component: "Gear",
+        },
+        {
+          name: "不对中诊断",
+          icon: require("@/assets/img/DZ.png"),
+          component: "Dissymmetry",
+        },
+        {
+          name: "不平衡诊断",
+          icon: require("@/assets/img/DC.png"),
+          component: "Misalignment",
+        },
+        {
+          name: "松动诊断",
+          icon: require("@/assets/img/SD.png"),
+          component: "Loose",
+        },
+        {
+          name: "温度诊断",
+          icon: require("@/assets/img/WD.png"),
+          component: "Temperature",
+        },
+      ],
+      unitvalue: "",
+      unitoptions: [],
+      companyCode: "",
+      parentOpt: [],
+      timevalue: [],
+      startTime: "",
+      endTime: "",
+      monitoringvalue: "",
+      monitoringoptions: [],
+
+      frequencyvalue: "",
+      frequencyoptions: [],
+
+      codedata: [],
+      totalCount: 0,
+      totalPage: 0,
+      page: "",
+    };
+  },
+  created() {
+    this.GETtree();
+  },
+  methods: {
+    async GETtree() {
+      const res = await getSysOrganizationAuthTreeByRoleId();
+      const treedata = res.data;
+      const processedData = this.processTreeData(treedata);
+      this.parentOpt = processedData;
+      this.defaultdata = res.data[0];
+    },
+    // 获取所属单位
+    parentChange(data) {
+      this.maplist = data;
+      this.maplistArr = data;
+
+      // 1. 检查关键数据
+      if (!this.maplist?.codeNumber) {
+        console.error("codeNumber 不存在！");
+        return;
+      }
+
+      // 2. 发起第一个请求
+      let paramsData = {
+        fieldCode: this.maplist.codeNumber,
+        pageNum: 1,
+        pageSize: 99,
+      };
+      this.unitvalue = "";
+
+      windEngineGrouPage(paramsData)
+        .then((res) => {
+          this.unitoptions = res.data.list;
+          this.windCode = this.companyCode;
+        })
+        .catch((err) => {
+          console.error("windEngineGrouPage 失败:", err);
+        });
+
+      // 3. 解析坐标逻辑（避免 return 终止函数）
+      let shouldSkip = false;
+      try {
+        if (data.codeType === "field") {
+          if (
+            this.parseCoordinates(data.longitudeAndLatitudeString).length > 0
+          ) {
+            shouldSkip = true;
+          }
+        } else {
+          data.children?.forEach((element) => {
+            if (
+              element.codeType === "field" &&
+              this.parseCoordinates(element.longitudeAndLatitudeString).length >
+                0
+            ) {
+              shouldSkip = true;
+            }
+          });
+        }
+      } catch (err) {
+        console.error("解析坐标出错:", err);
+      }
+
+      if (shouldSkip) {
+        console.log("坐标已存在，跳过部分逻辑");
+      }
+
+      // 4. 确保第二个请求执行
+      axios
+        .get(
+          `/ETLapi/waveData/getAllSamplingFrequency/${this.maplist.codeNumber}`
+        )
+
+        .then((res) => {
+          this.frequencyoptions = res.data.datas;
+        })
+        .catch((err) => {
+          console.error("第二个请求失败:", err);
+        });
+    },
+    processTreeData(treeData) {
+      const processedData = [];
+      function processNode(node) {
+        if (node.codeType === "field") {
+          node.companyName = node.fieldName;
+        }
+        if (node.children && node.children.length > 0) {
+          node.children.forEach((child) => {
+            processNode(child);
+          });
+        }
+      }
+      treeData.forEach((root) => {
+        processNode(root);
+        processedData.push(root);
+      });
+      return processedData;
+    },
+    parseCoordinates(input) {
+      if (input && typeof input === "string") {
+        return input.split(",").map(Number);
+      }
+      return [];
+    },
+    // 风机
+    getchedian(value) {
+      queryDetectionDic({ engineCodes: value }).then((res) => {
+        this.monitoringoptions = res.data;
+      });
+    },
+    handlePageChange(page) {
+      console.log(`接收到的当前页: ${page}`);
+      // 更新当前页
+      this.conditions(page); // 调用条件方法时传递页码
+    },
+    conditions(page) {
+      const params = {
+        samplingFrequency: this.frequencyvalue,
+        windCode: this.maplist.codeNumber,
+        windTurbineNumberList: [this.unitvalue],
+        mesureNameList: [this.monitoringvalue],
+        startTime: this.$formatDateTWO(this.timevalue[0]),
+        endTime: this.$formatDateTWO(this.timevalue[1]),
+        pageNo: page,
+        pageSize: 20,
+      };
+
+      axios.post(`/ETLapi/waveData/getMesureDataWithSF`, params).then((res) => {
+        this.codedata = res.data.datas;
+        this.totalCount = res.data.totalCount;
+        this.totalPage = res.data.totalPage;
+      });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.global-variable {
+  padding: 10px;
+}
+.head {
+  padding: 5px 0;
+  display: flex;
+  justify-content: space-between;
+
+  ul {
+    display: flex;
+    width: 500px;
+    height: 65px;
+    justify-content: space-between;
+    li {
+      cursor: pointer;
+      padding: 8px 12px 0 12px;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:hover {
+        background-color: #f0f0f0;
+      }
+
+      &.active {
+        background-color: #e6f7ff;
+        border-bottom: 2px solid var(--header-bg);
+
+        span {
+          color: var(--header-bg);
+          font-weight: bold;
+        }
+      }
+
+      .Simg {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+
+      span {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        text-align: center;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+.searchbox {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  p {
+    margin-right: 10px;
+    margin-bottom: 0;
+    //margin-top: 10px;
+    display: flex;
+    align-items: center;
+
+    .el-select,
+    .el-date-picker {
+      margin-left: 10px;
+    }
+  }
+
+  .el-select {
+    width: 180px;
+  }
+}
+.main-body {
+  margin-top: 10px;
+  // border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px;
+  background: #fff;
+}
+
+.el-range-editor.el-input__inner {
+  width: 370px;
+}
+</style>

src/views/health/malfunction.vue

@@ -1,24 +1,23 @@
 <template>
   <div class="global-variable">
-    <div class="head">
-      <ul>
-        <li
-          v-for="(item, index) in menuItems"
-          :key="index"
-          @click="activeTab = item.component"
-          :class="{ active: activeTab === item.component }"
-        >
-          <span class="Simg"><img :src="item.icon" :alt="item.name" /></span>
-          <span>{{ item.name }}</span>
-        </li>
-      </ul>
-    </div>
+    <!-- tab 切换 -->
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane
+        v-for="item in menuItems"
+        :key="item.component"
+        :label="item.name"
+        :name="item.component"
+      >
+
+      </el-tab-pane>
+    </el-tabs>
 
+    <!-- 查询条件 -->
     <div class="searchbox">
       <p>
         单位：
         <selecttree
-               size="small"
+          size="small"
           style="width: 180px"
           placeholder="请选择所属公司"
           :list="parentOpt"
@@ -30,13 +29,12 @@
             label: 'companyName',
             value: 'codeNumber',
           }"
-        >
-        </selecttree>
+        />
       </p>
       <p>
         风机：
         <el-select
-               size="small"
+          size="small"
           style="width: 150px"
           v-model="unitvalue"
           @change="getchedian"
@@ -47,52 +45,56 @@
             :key="item.engineCode"
             :label="item.engineName"
             :value="item.engineCode"
-          >
-          </el-option>
+          />
         </el-select>
       </p>
       <p>
         测点：
-        <el-select v-model="monitoringvalue"         size="small" clearable placeholder="请选择">
+        <el-select
+          v-model="monitoringvalue"
+          size="small"
+          clearable
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in monitoringoptions"
             :key="item.detectionPointEn"
             :label="item.detectionPointCn"
             :value="item.detectionPointEn"
-          >
-          </el-option>
+          />
         </el-select>
       </p>
       <p>
-        频率：
-        <el-select v-model="frequencyvalue"        size="small"  clearable placeholder="请选择">
+        采样频率：
+        <el-select
+          v-model="frequencyvalue"
+          size="small"
+          clearable
+          placeholder="请选择"
+        >
           <el-option
             v-for="item in frequencyoptions"
             :key="item"
             :label="item"
             :value="item"
-          >
-          </el-option>
+          />
         </el-select>
       </p>
       <p>
         时间：
         <el-date-picker
-               size="small"
+          size="small"
           v-model="timevalue"
           type="datetimerange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-        >
-        </el-date-picker>
+        />
       </p>
-      <el-button type="primary" size="small" @click="conditions(1)"
-        >查询</el-button
-      >
-      <!-- <el-button type="primary" size="small">自动诊断</el-button> -->
+      <el-button type="primary" size="small" @click="conditions(1)">查询</el-button>
     </div>
 
+    <!-- 动态组件内容 -->
     <div class="main-body">
       <keep-alive>
         <component
@@ -106,23 +108,24 @@
     </div>
   </div>
 </template>
-  
-  <script>
-import * as FileSaver from "file-saver";
-import * as XLSX from "xlsx";
+
+<script>
+import * as FileSaver from 'file-saver'
+import * as XLSX from 'xlsx'
 import {
   getSysOrganizationAuthTreeByRoleId,
   windEngineGrouPage,
   queryDetectionDic,
-} from "@/api/ledger.js";
-import selecttree from "../../components/selecttree.vue";
-import Bearing from "./components/malfunction/bearing.vue";
-import Dissymmetry from "./components/malfunction/dissymmetry.vue";
-import Gear from "./components/malfunction/gear.vue";
-import Loose from "./components/malfunction/loose.vue";
-import Misalignment from "./components/malfunction/misalignment.vue";
-import Temperature from "./components/malfunction/temperature.vue";
-import axios from "axios";
+} from '@/api/ledger.js'
+import selecttree from '../../components/selecttree.vue'
+import Bearing from './components/malfunction/bearing.vue'
+import Dissymmetry from './components/malfunction/dissymmetry.vue'
+import Gear from './components/malfunction/gear.vue'
+import Loose from './components/malfunction/loose.vue'
+import Misalignment from './components/malfunction/misalignment.vue'
+import Temperature from './components/malfunction/temperature.vue'
+import axios from 'axios'
+
 export default {
   components: {
     selecttree,
@@ -135,172 +138,168 @@ export default {
   },
   data() {
     return {
-      activeTab: "Bearing", // 默认显示轴承诊断
+      activeTab: 'Bearing',
+      activeName: 'Bearing', // el-tabs 控制当前 tab
+
       menuItems: [
         {
-          name: "轴承诊断",
-          icon: require("@/assets/img/ZC.png"),
-          component: "Bearing",
+          name: '轴承诊断',
+          icon: require('@/assets/img/ZC.png'),
+          component: 'Bearing',
         },
         {
-          name: "齿轮诊断",
-          icon: require("@/assets/img/SZ.png"),
-          component: "Gear",
+          name: '齿轮诊断',
+          icon: require('@/assets/img/SZ.png'),
+          component: 'Gear',
         },
         {
-          name: "不对中诊断",
-          icon: require("@/assets/img/DZ.png"),
-          component: "Dissymmetry",
+          name: '不对中诊断',
+          icon: require('@/assets/img/DZ.png'),
+          component: 'Dissymmetry',
         },
         {
-          name: "不平衡诊断",
-          icon: require("@/assets/img/DC.png"),
-          component: "Misalignment",
+          name: '不平衡诊断',
+          icon: require('@/assets/img/DC.png'),
+          component: 'Misalignment',
         },
         {
-          name: "松动诊断",
-          icon: require("@/assets/img/SD.png"),
-          component: "Loose",
+          name: '松动诊断',
+          icon: require('@/assets/img/SD.png'),
+          component: 'Loose',
         },
         {
-          name: "温度诊断",
-          icon: require("@/assets/img/WD.png"),
-          component: "Temperature",
+          name: '温度诊断',
+          icon: require('@/assets/img/WD.png'),
+          component: 'Temperature',
         },
       ],
-      unitvalue: "",
+
+      unitvalue: '',
       unitoptions: [],
-      companyCode: "",
+      companyCode: '',
       parentOpt: [],
       timevalue: [],
-      startTime: "",
-      endTime: "",
-      monitoringvalue: "",
+      startTime: '',
+      endTime: '',
+      monitoringvalue: '',
       monitoringoptions: [],
-
-      frequencyvalue: "",
+      frequencyvalue: '',
       frequencyoptions: [],
-
       codedata: [],
       totalCount: 0,
       totalPage: 0,
-      page: "",
-    };
+      page: '',
+    }
   },
   created() {
-    this.GETtree();
+    this.GETtree()
   },
   methods: {
+    handleClick(tab) {
+      this.activeTab = tab.name
+    },
     async GETtree() {
-      const res = await getSysOrganizationAuthTreeByRoleId();
-      const treedata = res.data;
-      const processedData = this.processTreeData(treedata);
-      this.parentOpt = processedData;
-      this.defaultdata = res.data[0];
+      const res = await getSysOrganizationAuthTreeByRoleId()
+      const treedata = res.data
+      const processedData = this.processTreeData(treedata)
+      this.parentOpt = processedData
+      this.defaultdata = res.data[0]
     },
-    // 获取所属单位
     parentChange(data) {
-      this.maplist = data;
-      this.maplistArr = data;
+      this.maplist = data
+      this.maplistArr = data
 
-      // 1. 检查关键数据
       if (!this.maplist?.codeNumber) {
-        console.error("codeNumber 不存在！");
-        return;
+        console.error('codeNumber 不存在！')
+        return
       }
 
-      // 2. 发起第一个请求
-      let paramsData = {
+      const paramsData = {
         fieldCode: this.maplist.codeNumber,
         pageNum: 1,
         pageSize: 99,
-      };
-      this.unitvalue = "";
+      }
+
+      this.unitvalue = ''
 
       windEngineGrouPage(paramsData)
         .then((res) => {
-          this.unitoptions = res.data.list;
-          this.windCode = this.companyCode;
+          this.unitoptions = res.data.list
+          this.windCode = this.companyCode
         })
         .catch((err) => {
-          console.error("windEngineGrouPage 失败:", err);
-        });
+          console.error('windEngineGrouPage 失败:', err)
+        })
 
-      // 3. 解析坐标逻辑（避免 return 终止函数）
-      let shouldSkip = false;
+      let shouldSkip = false
       try {
-        if (data.codeType === "field") {
+        if (data.codeType === 'field') {
           if (
             this.parseCoordinates(data.longitudeAndLatitudeString).length > 0
           ) {
-            shouldSkip = true;
+            shouldSkip = true
           }
         } else {
           data.children?.forEach((element) => {
             if (
-              element.codeType === "field" &&
+              element.codeType === 'field' &&
               this.parseCoordinates(element.longitudeAndLatitudeString).length >
                 0
             ) {
-              shouldSkip = true;
+              shouldSkip = true
             }
-          });
+          })
         }
       } catch (err) {
-        console.error("解析坐标出错:", err);
+        console.error('解析坐标出错:', err)
       }
 
       if (shouldSkip) {
-        console.log("坐标已存在，跳过部分逻辑");
+        console.log('坐标已存在，跳过部分逻辑')
       }
 
-      // 4. 确保第二个请求执行
       axios
         .get(
           `/ETLapi/waveData/getAllSamplingFrequency/${this.maplist.codeNumber}`
         )
-
         .then((res) => {
-          this.frequencyoptions = res.data.datas;
+          this.frequencyoptions = res.data.datas
         })
         .catch((err) => {
-          console.error("第二个请求失败:", err);
-        });
+          console.error('第二个请求失败:', err)
+        })
     },
     processTreeData(treeData) {
-      const processedData = [];
+      const processedData = []
       function processNode(node) {
-        if (node.codeType === "field") {
-          node.companyName = node.fieldName;
+        if (node.codeType === 'field') {
+          node.companyName = node.fieldName
         }
         if (node.children && node.children.length > 0) {
           node.children.forEach((child) => {
-            processNode(child);
-          });
+            processNode(child)
+          })
         }
       }
       treeData.forEach((root) => {
-        processNode(root);
-        processedData.push(root);
-      });
-      return processedData;
+        processNode(root)
+        processedData.push(root)
+      })
+      return processedData
     },
     parseCoordinates(input) {
-      if (input && typeof input === "string") {
-        return input.split(",").map(Number);
+      if (input && typeof input === 'string') {
+        return input.split(',').map(Number)
       }
-      return [];
+      return []
     },
-    // 风机
     getchedian(value) {
       queryDetectionDic({ engineCodes: value }).then((res) => {
-        this.monitoringoptions = res.data;
-      });
+        this.monitoringoptions = res.data
+      })
     },
     handlePageChange(page) {
-      console.log(`接收到的当前页: ${page}`);
-      // 更新当前页
-      this.conditions(page); // 调用条件方法时传递页码
+      this.conditions(page)
     },
     conditions(page) {
       const params = {
@@ -311,17 +310,17 @@ export default {
         startTime: this.$formatDateTWO(this.timevalue[0]),
         endTime: this.$formatDateTWO(this.timevalue[1]),
         pageNo: page,
-        pageSize: 10,
-      };
+        pageSize: 20,
+      }
 
       axios.post(`/ETLapi/waveData/getMesureDataWithSF`, params).then((res) => {
-        this.codedata = res.data.datas;
-        this.totalCount = res.data.totalCount;
-        this.totalPage = res.data.totalPage;
-      });
+        this.codedata = res.data.datas
+        this.totalCount = res.data.totalCount
+        this.totalPage = res.data.totalPage
+      })
     },
   },
-};
+}
 </script>
   
   <style lang="scss" scoped>

src/views/home/components/MenuHD.vue

@@ -301,7 +301,7 @@ export default {
 
 ::v-deep.mt-3 {
   margin-top: 0px !important;
-  padding-left: 20px;
+  //padding-left: 20px;
 }
 .stop-animation,
 .active-animation {
@@ -382,16 +382,16 @@ export default {
 
 </style>
 
-<style>
+<style >
 .el-menu--popup {
-      min-width: 120px !important;
-      width: 120px !important;
+  min-width: 120px !important;
+  width: 100% !important;
+}
 
-    }
-    .el-menu--popup .el-menu-item {
-      width: 100% !important;
-      min-width: unset !important;
-      text-align: center;
-      padding: 0 5px !important;
-    }
+.el-menu--popup .el-menu-item {
+  width: 100% !important;
+  min-width: unset !important;
+  text-align: center;
+  padding: 0 5px !important;
+}
 </style>