MessageBox列表

src/pages/Index/Index.vue

@@ -70,7 +70,7 @@
     <!-- 主内容区域 -->
     <main class="main-content">
       <router-view v-slot="{ Component }">
-        <keep-alive :exclude="['TubeUserId','EmergencyForm']">
+        <keep-alive :exclude="['TubeUserId', 'EmergencyForm']">
           <component :is="Component" />
         </keep-alive>
       </router-view>
@@ -118,12 +118,19 @@
       class="recent-msg-dialog"
       v-model="showRecentMsgDialog"
       title="最近消息"
-      width="500"
+      width="700"
     >
-      <el-table :data="deviceStore.messageState.messageBoxList">
-        <el-table-column property="time" label="时间" width="200" />
-        <el-table-column property="message" label="消息" width="200" />
-      </el-table>
+      <div class="msg-container">
+        <div
+          class="msg-item"
+          v-for="item in deviceStore.messageState.messageBoxList"
+          :key="item.time"
+          :class="[item.messageLevel]"
+        >
+          <span>{{ formatDate(item.time) }}</span>
+          <span>{{ item.message }}</span>
+        </div>
+      </div>
     </el-dialog>
 
     <InitWarn
@@ -258,7 +265,7 @@ import { getServerInfo } from '../../utils/getServerInfo'
 import { eventBus } from '../../eventBus'
 import { logout } from '@/services/Login/login'
 import { useRunningStore } from '@/store/modules/running'
-// import { formatDate } from '@/utils/formDate'
+import { formatDate } from '@/utils/formDate'
 
 const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规')
 const lineWidth = ref(0)
@@ -744,7 +751,6 @@ onMounted(() => {
       height: 5px;
       background-color: #478ffe;
       transition: all 0.3s ease;
-      /* 添加平滑过渡效果 */
     }
   }
 
@@ -782,7 +788,6 @@ onMounted(() => {
     }
 
     .equipment-status {
-      background-color: #f5f5f5;
       width: 440px;
       height: 44px;
       line-height: $height;
@@ -790,7 +795,23 @@ onMounted(() => {
       border-radius: 10px;
       margin-right: 20px;
       .status-text {
-        font-size: 24px;
+        border-radius: 8px;
+        font-size: 22px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &.Info {
+          color: #333;
+          background-color: #f5f5f5;
+        }
+        &.Warn {
+          color: #fa9d3b;
+          background-color: rgb(239, 230, 220);
+        }
+        &.Error {
+          color: #d81212;
+          background-color: rgb(236, 216, 216);
+        }
       }
     }
     .logout {
@@ -806,4 +827,31 @@ onMounted(() => {
     min-height: 0; // 添加：防止溢出
   }
 }
+.msg-container {
+  max-height: 850px;
+  padding: 4px;
+  overflow-y: auto;
+  .msg-item {
+    padding: 0 10px;
+    height: 45px;
+    line-height: $height;
+    font-size: 22px;
+    display: flex;
+    gap: 10px;
+    &:nth-child(even) {
+      background-color: rgb(250, 250, 250);
+    }
+    &:nth-child(odd) {
+      background-color: #f2f2f2;
+    }
+    &.Warn {
+      color: #fa9d3b;
+      background-color: rgb(239, 230, 220);
+    }
+    &.Error {
+      color: #d81212;
+      background-color: rgb(236, 216, 216);
+    }
+  }
+}
 </style>

src/pages/Index/TestTube/TubeUserId.vue

@@ -282,7 +282,7 @@ const handleKeyPress = (button) => {
 
               .input-field {
                 &.onFocus {
-                  border: solid 2px #333;
+                  // border: solid 2px #333;
                 }
                 width: 100%;
                 height: 36px;