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

@@ -37,6 +37,7 @@
               <span><i class="color1"></i>正常</span
               ><span><i class="color2"></i>报警</span
               ><span><i class="color3"></i>危险</span>
+              
             </p>
 
             <h4>诊断步骤：</h4>

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

@@ -62,7 +62,7 @@ export default {
             radius: ["40%", "60%"], // 设置内外半径来形成圆环
             data: [
               { value: 0, name: "正常", itemStyle: { color: "#8AE359" } },
-              { value: 0, name: "一般", itemStyle: { color: "#EECB5F" } },
+              { value: 0, name: "报警", itemStyle: { color: "#EECB5F" } },
               { value: 0, name: "危险", itemStyle: { color: "#F7715F" } },
             ],
             emphasis: {
@@ -114,7 +114,7 @@ export default {
               },
               {
                 value: newResult[2] || 0,
-                name: "一般",
+                name: "报警",
                 itemStyle: { color: "#EECB5F" },
               },
               {

src/views/health/index.vue

@@ -50,28 +50,32 @@
         </div>
         <div class="content">
           <div class="summary" v-if="item.status == '1'" style="color: #28a745">
-            健康
+            <span>100</span>
+            <span>健康</span>
           </div>
           <div
             class="summary"
             v-else-if="item.status == '2'"
             style="color: #ffc107"
           >
-            亚健康
+            <span>84</span>
+            <span>亚健康</span>
           </div>
           <div
             class="summary"
             v-else-if="item.status == '3'"
             style="color: #fd7e14"
           >
-            一般
+            <span>65</span>
+            <span>一般</span>
           </div>
           <div
             class="summary"
             v-else-if="item.status == '4'"
             style="color: #dc3545"
           >
-            故障
+            <span>50</span>
+            <span> 故障 </span>
           </div>
           <div class="summary" v-else>未知状态</div>
 
@@ -112,11 +116,11 @@ export default {
           status: "1",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "1" },
-            { name: "传动系统", val: "2" },
-            { name: "机舱系统", val: "3" },
-            { name: "电网环境", val: "4" },
-            { name: "辅助系统", val: "1" },
+            { name: "发电机组", val: "50" },
+            { name: "传动系统", val: "50" },
+            { name: "机舱系统", val: "50" },
+            { name: "电网环境", val: "50" },
+            { name: "辅助系统", val: "50" },
           ],
         },
         {
@@ -124,35 +128,35 @@ export default {
           status: "2",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "2" },
-            { name: "传动系统", val: "2" },
-            { name: "机舱系统", val: "2" },
-            { name: "电网环境", val: "2" },
-            { name: "辅助系统", val: "2" },
+            { name: "发电机组", val: "50" },
+            { name: "传动系统", val: "50" },
+            { name: "机舱系统", val: "50" },
+            { name: "电网环境", val: "50" },
+            { name: "辅助系统", val: "50" },
           ],
         },
         {
           fanName: "FXX风机-1号", // 风机名称
-          status: "1",
+          status: "3",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "1" },
-            { name: "传动系统", val: "2" },
-            { name: "机舱系统", val: "3" },
-            { name: "电网环境", val: "4" },
-            { name: "辅助系统", val: "1" },
+            { name: "发电机组", val: "50" },
+            { name: "传动系统", val: "50" },
+            { name: "机舱系统", val: "50" },
+            { name: "电网环境", val: "50" },
+            { name: "辅助系统", val: "50" },
           ],
         },
         {
           fanName: "FXX风机-1号", // 风机名称
-          status: "1",
+          status: "4",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "1" },
-            { name: "传动系统", val: "2" },
-            { name: "机舱系统", val: "3" },
-            { name: "电网环境", val: "4" },
-            { name: "辅助系统", val: "1" },
+            { name: "发电机组", val: "50" },
+            { name: "传动系统", val: "50" },
+            { name: "机舱系统", val: "50" },
+            { name: "电网环境", val: "50" },
+            { name: "辅助系统", val: "50" },
           ],
         },
         {
@@ -160,11 +164,11 @@ export default {
           status: "1",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "1" },
-            { name: "传动系统", val: "2" },
-            { name: "机舱系统", val: "3" },
-            { name: "电网环境", val: "4" },
-            { name: "辅助系统", val: "1" },
+            { name: "发电机组", val: "50" },
+            { name: "传动系统", val: "50" },
+            { name: "机舱系统", val: "50" },
+            { name: "电网环境", val: "50" },
+            { name: "辅助系统", val: "50" },
           ],
         },
         {
@@ -172,11 +176,11 @@ export default {
           status: "1",
           systems: [
             // 子系统列表
-            { name: "发电机组", val: "1" },
-            { name: "传动系统", val: "2" },
-            { name: "机舱系统", val: "3" },
-            { name: "电网环境", val: "4" },
-            { name: "辅助系统", val: "1" },
+            { name: "发电机组", val: "50" },
+            { name: "传动系统", val: "50" },
+            { name: "机舱系统", val: "50" },
+            { name: "电网环境", val: "50" },
+            { name: "辅助系统", val: "50" },
           ],
         },
       ],
@@ -249,7 +253,7 @@ export default {
 .main-body {
   margin: 0 auto;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 300px); /* 严格保持300px宽度 */
+  grid-template-columns: repeat(auto-fill, 280px); /* 严格保持300px宽度 */
   justify-content: space-evenly; /* 均匀分布 */
   gap: 10px;
 
@@ -258,7 +262,7 @@ export default {
   overflow: hidden;
   overflow-y: auto;
   .basics {
-    width: 300px; /* 固定宽度 */
+    width: 280px; /* 固定宽度 */
     display: flex;
     flex-direction: column;
     margin-bottom: 20px;
@@ -272,7 +276,7 @@ export default {
 
       display: flex;
       align-items: center; // 垂直居中
-    //   justify-content: center; // 水平居中
+      //   justify-content: center; // 水平居中
 
       span {
         display: inline-block;
@@ -296,13 +300,27 @@ export default {
       width: 100%;
       gap: 8px;
       .summary {
-        width: 90px;
+        width: 70px;
         display: flex;
-        align-items: center;
+        flex-direction: column; // 垂直排列
+        align-items: center; // 居中对齐
         justify-content: center;
         font-weight: bold;
-        font-size: 1.3em;
+
+        span {
+          display: block;
+          text-align: center;
+          line-height: 1.3;
+          &:first-child {
+            font-size: 1.6em; // 更大的字体
+            margin-bottom: 4px;
+          }
+          &:last-child {
+            font-size: 0.8em; // 稍小一点
+          }
+        }
       }
+
       .health {
         flex: 1;
         display: flex;
@@ -335,6 +353,7 @@ export default {
         }
         li span {
           &:last-child {
+            color: var(--header-bg);
             // Status color classes
             &.health-1 {
               color: #28a745;

src/views/health/malfunction.vue

@@ -92,7 +92,13 @@
 
     <div class="main-body">
       <keep-alive>
-        <component :is="activeTab" :codedata="codedata" :totalCount="totalCount"  :totalPage="totalPage" @updatePage="handlePageChange" />
+        <component
+          :is="activeTab"
+          :codedata="codedata"
+          :totalCount="totalCount"
+          :totalPage="totalPage"
+          @updatePage="handlePageChange"
+        />
       </keep-alive>
     </div>
   </div>
@@ -174,7 +180,7 @@ export default {
 
       codedata: [],
       totalCount: 0,
-      totalPage:0,
+      totalPage: 0,
       page: "",
     };
   },
@@ -291,7 +297,7 @@ export default {
     handlePageChange(page) {
       console.log(`接收到的当前页: ${page}`);
       // 更新当前页
-      this.conditions(page);  // 调用条件方法时传递页码
+      this.conditions(page); // 调用条件方法时传递页码
     },
     conditions(page) {
       const params = {
@@ -301,14 +307,14 @@ export default {
         mesureNameList: [this.monitoringvalue],
         startTime: this.$formatDateTWO(this.timevalue[0]),
         endTime: this.$formatDateTWO(this.timevalue[1]),
-        pageNo:page,
+        pageNo: page,
         pageSize: 10,
       };
 
       axios.post(`/ETLapi/waveData/getMesureDataWithSF`, params).then((res) => {
         this.codedata = res.data.datas;
         this.totalCount = res.data.totalCount;
-        this.totalPage=res.data.totalPage
+        this.totalPage = res.data.totalPage;
       });
     },
   },
@@ -375,12 +381,13 @@ export default {
 }
 .searchbox {
   display: flex;
-  margin: 10px 0;
+  margin-bottom: 10px;
   align-items: center;
-
+  flex-wrap: wrap;
   p {
-    margin-right: 20px;
+    margin-right: 10px;
     margin-bottom: 0;
+    margin-top: 10px;
     display: flex;
     align-items: center;
 
@@ -396,9 +403,13 @@ export default {
 }
 .main-body {
   margin-top: 10px;
-  border: 1px solid #ebeef5;
+  // border: 1px solid #ebeef5;
   border-radius: 4px;
   padding: 10px;
   background: #fff;
 }
+
+.el-range-editor.el-input__inner {
+  width: 370px;
+}
 </style>