挂架平效果

src/views/screen/components/TimeoutWorkOrderPanel.vue

@@ -3,17 +3,21 @@
     <div class="panel-title">超时工单</div>
     <img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
 
+    <!-- 骨架屏 -->
+    <!-- 实际内容 -->
     <div class="tip-container">
       <div class="tip-image">
         <img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
-        <span class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
+        <div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
+        <span v-else class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
       </div>
       <img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
       <div class="tip-content">
         <div class="col-item">
           <img src="@/assets/images/screen/warning_img.png" width="23" />
           <span>超时工单数</span>
-          <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
+          <div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
+          <span v-else style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
         </div>
       </div>
     </div>
@@ -32,7 +36,7 @@
         </div>
       </div>
     </div> -->
-    <AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" ></AlertList>
+    <AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" :loading="props.loading" ></AlertList>
   </div>
 </template>
 
@@ -52,6 +56,7 @@ interface TimeoutWorkOrders {
 
 // Props定义
 interface Props {
+  loading?: boolean
   timeoutWorkOrders?: TimeoutWorkOrders
   alertDetails?: AlertItem[]
   sourceIndex?: number
@@ -247,5 +252,104 @@ const props = withDefaults(defineProps<Props>(), {
       }
     }
   }
+
+  // 骨架屏样式
+  .skeleton-container {
+    .skeleton-tip-container {
+      position: relative;
+      width: 100%;
+      height: 70px;
+
+      .skeleton-tip-image {
+        position: absolute;
+        top: -5px;
+        right: 10px;
+        z-index: 2;
+
+        .skeleton-circle {
+          width: 80px;
+          height: 80px;
+          background-color: #3a3a3a;
+          border-radius: 50%;
+        }
+
+        .skeleton-number {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          height: 20px;
+          background-color: #3a3a3a;
+          border-radius: 4px;
+        }
+      }
+
+      .skeleton-bg {
+        width: 100%;
+        height: 70px;
+        background-color: #3a3a3a;
+        border-radius: 4px;
+      }
+
+      .skeleton-tip-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 8px 15px;
+
+        .skeleton-col-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .skeleton-icon {
+            width: 23px;
+            height: 23px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-text {
+            flex: 1;
+            height: 16px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+
+          .skeleton-value {
+            width: 40px;
+            height: 18px;
+            background-color: #3a3a3a;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  // 骨架屏动画
+  .skeleton-pulse {
+    animation: skeleton-loading-timeout 1.5s ease-in-out infinite;
+    background-color: #444;
+    border-radius: 4px;
+  }
+
+  @keyframes skeleton-loading-timeout {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 </style>