'优化首页骨架屏展示和echarts动画时间'

@@ -69,6 +69,7 @@
             },
             },
           },
           },
         ],
         ],
+        animationDuration: 1500,
       });
       });
     }
     }
   );
   );
@@ -136,6 +137,7 @@
           },
           },
         },
         },
       ],
       ],
+      animationDuration: 1500,
     });
     });
   });
   });
 </script>
 </script>

@@ -56,79 +56,86 @@
     </div>
     </div>
 
 
     <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
     <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
-      <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
-        租户消息量TOP10</h1
-      >
-      <Empty v-if="!tenantTop10.length" />
-      <Descriptions :column="1">
-        <template v-for="(item, index) in tenantTop10" :key="item.name">
-          <DescriptionsItem>
-            <span
-              class="mr-2"
-              style="
-                width: 1.25rem;
-                height: 1.25rem;
-                border: 1px solid;
-                color: #0b55f1;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-              "
-              :style="{
-                color:
-                  index === 0
-                    ? '#f0a16e'
-                    : index === 1
-                    ? '#868585'
-                    : index === 2
-                    ? '#e78739'
-                    : '#4e84f5',
-                backgroundColor:
-                  index === 0 ? '#FAD672' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
-                borderColor:
-                  index === 0
-                    ? '#fdee7d'
-                    : index === 1
-                    ? '#e6e6e5'
-                    : index === 2
-                    ? '#f8c296'
-                    : '#0b55f1;',
-              }"
-              >{{ index + 1 }}</span
-            >
-            <div class="flex justify-between" style="width: 100%">
-              <span>
-                {{ item.name }}
-              </span>
-              <div class="flex w-7/10">
-                <Progress
-                  :showInfo="false"
-                  size="small"
-                  style="width: 70%"
-                  :percent="item.count / 10000"
-                  :strokeWidth="12"
-                  :strokeColor="
+      <Skeleton active :paragraph="{ rows: 10 }" :loading="!tenantTop10.length">
+        <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
+          租户消息量TOP10</h1
+        >
+        <Descriptions :column="1">
+          <template v-for="(item, index) in tenantTop10" :key="item.name">
+            <DescriptionsItem>
+              <span
+                class="mr-2"
+                style="
+                  width: 1.25rem;
+                  height: 1.25rem;
+                  border: 1px solid;
+                  color: #0b55f1;
+                  border-radius: 50%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+                :style="{
+                  color:
                     index === 0
                     index === 0
-                      ? '#ea5b42'
+                      ? '#f0a16e'
                       : index === 1
                       : index === 1
-                      ? '#666'
+                      ? '#868585'
                       : index === 2
                       : index === 2
-                      ? '#e4751a'
-                      : '#b5b6b6'
-                  "
-                />
-                <span
-                  class="ml-2"
-                  :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
-                >
-                  {{ item.count }}
+                      ? '#e78739'
+                      : '#4e84f5',
+                  backgroundColor:
+                    index === 0
+                      ? '#FAD672'
+                      : index === 1
+                      ? '#CBCAC9'
+                      : index === 2
+                      ? '#F1B889'
+                      : '',
+                  borderColor:
+                    index === 0
+                      ? '#fdee7d'
+                      : index === 1
+                      ? '#e6e6e5'
+                      : index === 2
+                      ? '#f8c296'
+                      : '#0b55f1;',
+                }"
+                >{{ index + 1 }}</span
+              >
+              <div class="flex justify-between" style="width: 100%">
+                <span>
+                  {{ item.name }}
                 </span>
                 </span>
+                <div class="flex w-7/10">
+                  <Progress
+                    :showInfo="false"
+                    size="small"
+                    style="width: 70%"
+                    :percent="item.count / 10000"
+                    :strokeWidth="12"
+                    :strokeColor="
+                      index === 0
+                        ? '#ea5b42'
+                        : index === 1
+                        ? '#666'
+                        : index === 2
+                        ? '#e4751a'
+                        : '#b5b6b6'
+                    "
+                  />
+                  <span
+                    class="ml-2"
+                    :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
+                  >
+                    {{ item.count }}
+                  </span>
+                </div>
               </div>
               </div>
-            </div>
-          </DescriptionsItem>
-        </template>
-      </Descriptions>
+            </DescriptionsItem>
+          </template>
+        </Descriptions>
+      </Skeleton>
       <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
       <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
         本月即将过期租户</h1
         本月即将过期租户</h1
       >
       >
@@ -139,7 +146,7 @@
 
 
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, ref, computed, onMounted } from 'vue';
   import { defineComponent, ref, computed, onMounted } from 'vue';
-  import { Card, Anchor, List, Avatar, Empty, Descriptions, Progress } from 'ant-design-vue';
+  import { Card, Anchor, List, Avatar, Descriptions, Progress, Skeleton } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useUserStore } from '/@/store/modules/user';
   import { getEnterPriseDetail } from '/@/api/oem';
   import { getEnterPriseDetail } from '/@/api/oem';
   import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
   import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
@@ -151,7 +158,6 @@
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       Card,
       Card,
-      Empty,
       CardMeta: Card.Meta,
       CardMeta: Card.Meta,
       AnchorLink: Anchor.Link,
       AnchorLink: Anchor.Link,
       List,
       List,
@@ -163,6 +169,7 @@
       Time,
       Time,
       BasicTable,
       BasicTable,
       Progress,
       Progress,
+      Skeleton,
     },
     },
     props: {
     props: {
       role: {
       role: {

@@ -44,7 +44,6 @@
             show: false,
             show: false,
           },
           },
         },
         },
-
         yAxis: {
         yAxis: {
           splitArea: {
           splitArea: {
             show: true,
             show: true,
@@ -71,6 +70,7 @@
             },
             },
           },
           },
         ],
         ],
+        animationDuration: 1500,
       });
       });
     }
     }
   );
   );
@@ -110,7 +110,6 @@
           show: false,
           show: false,
         },
         },
       },
       },
-
       yAxis: {
       yAxis: {
         splitArea: {
         splitArea: {
           show: true,
           show: true,
@@ -137,6 +136,7 @@
           },
           },
         },
         },
       ],
       ],
+      animationDuration: 1500,
     });
     });
   });
   });
 </script>
 </script>