简柏林 / thingskit-front · Commits

Commit 4cb09fa3767b192f0c422fc9c8ad2d9a518d97c5

Authored by sqy
1 parent 37e1dc00

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

Inline Side-by-side
Showing 3 changed files with 81 additions and 72 deletions
... ... @@ -69,6 +69,7 @@
69 69 },
70 70 },
71 71 ],
  72 + animationDuration: 1500,
72 73 });
73 74 }
74 75 );
... ... @@ -136,6 +137,7 @@
136 137 },
137 138 },
138 139 ],
  140 + animationDuration: 1500,
139 141 });
140 142 });
141 143 </script>
... ...
... ... @@ -56,79 +56,86 @@
56 56 </div>
57 57
58 58 <Card v-else :bordered="false" :bodyStyle="{ padding: 0 }" v-bind="$attrs">
59   - <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
60   - 租户消息量TOP10</h1
61   - >
62   - <Empty v-if="!tenantTop10.length" />
63   - <Descriptions :column="1">
64   - <template v-for="(item, index) in tenantTop10" :key="item.name">
65   - <DescriptionsItem>
66   - <span
67   - class="mr-2"
68   - style="
69   - width: 1.25rem;
70   - height: 1.25rem;
71   - border: 1px solid;
72   - color: #0b55f1;
73   - border-radius: 50%;
74   - display: flex;
75   - align-items: center;
76   - justify-content: center;
77   - "
78   - :style="{
79   - color:
80   - index === 0
81   - ? '#f0a16e'
82   - : index === 1
83   - ? '#868585'
84   - : index === 2
85   - ? '#e78739'
86   - : '#4e84f5',
87   - backgroundColor:
88   - index === 0 ? '#FAD672' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
89   - borderColor:
90   - index === 0
91   - ? '#fdee7d'
92   - : index === 1
93   - ? '#e6e6e5'
94   - : index === 2
95   - ? '#f8c296'
96   - : '#0b55f1;',
97   - }"
98   - >{{ index + 1 }}</span
99   - >
100   - <div class="flex justify-between" style="width: 100%">
101   - <span>
102   - {{ item.name }}
103   - </span>
104   - <div class="flex w-7/10">
105   - <Progress
106   - :showInfo="false"
107   - size="small"
108   - style="width: 70%"
109   - :percent="item.count / 10000"
110   - :strokeWidth="12"
111   - :strokeColor="
  59 + <Skeleton active :paragraph="{ rows: 10 }" :loading="!tenantTop10.length">
  60 + <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
  61 + 租户消息量TOP10</h1
  62 + >
  63 + <Descriptions :column="1">
  64 + <template v-for="(item, index) in tenantTop10" :key="item.name">
  65 + <DescriptionsItem>
  66 + <span
  67 + class="mr-2"
  68 + style="
  69 + width: 1.25rem;
  70 + height: 1.25rem;
  71 + border: 1px solid;
  72 + color: #0b55f1;
  73 + border-radius: 50%;
  74 + display: flex;
  75 + align-items: center;
  76 + justify-content: center;
  77 + "
  78 + :style="{
  79 + color:
112 80 index === 0
113   - ? '#ea5b42'
  81 + ? '#f0a16e'
114 82 : index === 1
115   - ? '#666'
  83 + ? '#868585'
116 84 : index === 2
117   - ? '#e4751a'
118   - : '#b5b6b6'
119   - "
120   - />
121   - <span
122   - class="ml-2"
123   - :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
124   - >
125   - {{ item.count }}
  85 + ? '#e78739'
  86 + : '#4e84f5',
  87 + backgroundColor:
  88 + index === 0
  89 + ? '#FAD672'
  90 + : index === 1
  91 + ? '#CBCAC9'
  92 + : index === 2
  93 + ? '#F1B889'
  94 + : '',
  95 + borderColor:
  96 + index === 0
  97 + ? '#fdee7d'
  98 + : index === 1
  99 + ? '#e6e6e5'
  100 + : index === 2
  101 + ? '#f8c296'
  102 + : '#0b55f1;',
  103 + }"
  104 + >{{ index + 1 }}</span
  105 + >
  106 + <div class="flex justify-between" style="width: 100%">
  107 + <span>
  108 + {{ item.name }}
126 109 </span>
  110 + <div class="flex w-7/10">
  111 + <Progress
  112 + :showInfo="false"
  113 + size="small"
  114 + style="width: 70%"
  115 + :percent="item.count / 10000"
  116 + :strokeWidth="12"
  117 + :strokeColor="
  118 + index === 0
  119 + ? '#ea5b42'
  120 + : index === 1
  121 + ? '#666'
  122 + : index === 2
  123 + ? '#e4751a'
  124 + : '#b5b6b6'
  125 + "
  126 + />
  127 + <span
  128 + class="ml-2"
  129 + :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
  130 + >
  131 + {{ item.count }}
  132 + </span>
  133 + </div>
127 134 </div>
128   - </div>
129   - </DescriptionsItem>
130   - </template>
131   - </Descriptions>
  135 + </DescriptionsItem>
  136 + </template>
  137 + </Descriptions>
  138 + </Skeleton>
132 139 <h1 style="color: rgba(0, 0, 0, 0.85); font-weight: bold; font-size: 16px">
133 140 本月即将过期租户</h1
134 141 >
... ... @@ -139,7 +146,7 @@
139 146
140 147 <script lang="ts">
141 148 import { defineComponent, ref, computed, onMounted } from 'vue';
142   - import { Card, Anchor, List, Avatar, Empty, Descriptions, Progress } from 'ant-design-vue';
  149 + import { Card, Anchor, List, Avatar, Descriptions, Progress, Skeleton } from 'ant-design-vue';
143 150 import { useUserStore } from '/@/store/modules/user';
144 151 import { getEnterPriseDetail } from '/@/api/oem';
145 152 import { notifyMyGetrPageApi } from '/@/api/stationnotification/stationnotifyApi';
... ... @@ -151,7 +158,6 @@
151 158 export default defineComponent({
152 159 components: {
153 160 Card,
154   - Empty,
155 161 CardMeta: Card.Meta,
156 162 AnchorLink: Anchor.Link,
157 163 List,
... ... @@ -163,6 +169,7 @@
163 169 Time,
164 170 BasicTable,
165 171 Progress,
  172 + Skeleton,
166 173 },
167 174 props: {
168 175 role: {
... ...
... ... @@ -44,7 +44,6 @@
44 44 show: false,
45 45 },
46 46 },
47   -
48 47 yAxis: {
49 48 splitArea: {
50 49 show: true,
... ... @@ -71,6 +70,7 @@
71 70 },
72 71 },
73 72 ],
  73 + animationDuration: 1500,
74 74 });
75 75 }
76 76 );
... ... @@ -110,7 +110,6 @@
110 110 show: false,
111 111 },
112 112 },
113   -
114 113 yAxis: {
115 114 splitArea: {
116 115 show: true,
... ... @@ -137,6 +136,7 @@
137 136 },
138 137 },
139 138 ],
  139 + animationDuration: 1500,
140 140 });
141 141 });
142 142 </script>
... ...