简柏林 / thingskit-front · Commits

Commit ffcca869d3a74082d1c9513110f55ce1da3db4e5

Authored by fengwotao
1 parent 37a51c15

styles:优化首页设备数量统计图表为栅格布局

Inline Side-by-side
Showing 1 changed file with 65 additions and 80 deletions
@@ -213,34 +213,38 @@ @@ -213,34 +213,38 @@
213 style="color: #666; width: 50%" 213 style="color: #666; width: 50%"
214 title="设备数量统计" 214 title="设备数量统计"
215 > 215 >
216 - <div class="flex container ml-4">  
217 - <div class="mr-4 flex chart-top"> 216 + <a-row type="flex" justify="space-between" align="middle">
  217 + <a-col :span="12">
218 <PieChartDeviceSub 218 <PieChartDeviceSub
219 v-if="seriesData.length > 0" 219 v-if="seriesData.length > 0"
220 :legendData="legendData" 220 :legendData="legendData"
221 :seriesData="seriesData" 221 :seriesData="seriesData"
222 :isCircle="false" 222 :isCircle="false"
223 - />  
224 - </div>  
225 - <div class="ml-20 flex justify-evenly right-text">  
226 - <div class="text flex items-center">  
227 - <span class="left-icon-d-color"></span>  
228 - 直连设备：  
229 - <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span  
230 - >个  
231 - </div>  
232 - <div class="text flex items-center">  
233 - <span class="left-icon-g-color"></span>  
234 - 网关设备： <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span  
235 - >个  
236 - </div>  
237 - <div class="text flex items-center">  
238 - <span class="left-icon-s-color"></span>  
239 - 网关子设备：<span class="bold-text">{{ growCardList?.deviceInfo?.sensor ?? 0 }}</span  
240 - >个  
241 - </div>  
242 - </div>  
243 - </div> 223 + /></a-col>
  224 + <a-col :span="12">
  225 + <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
  226 + <a-col :offset="8" class="flex items-center">
  227 + <span class="left-icon-d-color"></span>
  228 + 直连设备：
  229 + <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span
  230 + >个</a-col
  231 + >
  232 + <a-col :offset="8" class="flex items-center">
  233 + <span class="left-icon-g-color"></span>
  234 + 网关设备：
  235 + <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span
  236 + >个</a-col
  237 + >
  238 + <a-col :offset="8" class="flex items-center">
  239 + <span class="left-icon-s-color"></span>
  240 + 网关子设备：<span class="bold-text">{{
  241 + growCardList?.deviceInfo?.sensor ?? 0
  242 + }}</span
  243 + >个</a-col
  244 + >
  245 + </a-row>
  246 + </a-col>
  247 + </a-row>
244 </Card> 248 </Card>
245 <Card 249 <Card
246 size="small" 250 size="small"
@@ -248,33 +252,37 @@ @@ -248,33 +252,37 @@
248 style="color: #666; width: 50%" 252 style="color: #666; width: 50%"
249 title="设备状态统计" 253 title="设备状态统计"
250 > 254 >
251 - <div class="flex container ml-4">  
252 - <div class="mr-4 flex chart-top-status">  
253 - <PieChartDeviceStatus  
254 - v-if="seriesStatusData.length > 0"  
255 - :seriesStatusData="seriesStatusData"  
256 - />  
257 - <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>  
258 - </div>  
259 - <div class="ml-20 flex justify-evenly right-text">  
260 - <div class="text flex items-center">  
261 - <span class="right-icon-d-color"></span>  
262 - 待激活设备：  
263 - <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span  
264 - >个 255 + <a-row type="flex" justify="space-between" align="middle">
  256 + <a-col :span="12">
  257 + <div>
  258 + <PieChartDeviceStatus
  259 + v-if="seriesStatusData.length > 0"
  260 + :seriesStatusData="seriesStatusData"
  261 + />
  262 + <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
265 </div> 263 </div>
266 - <div class="text flex items-center">  
267 - <span class="right-icon-g-color"></span>  
268 - 在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span  
269 - >个  
270 - </div>  
271 - <div class="text flex items-center">  
272 - <span class="right-icon-s-color"></span>  
273 - 离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span  
274 - >个  
275 - </div>  
276 - </div>  
277 - </div> 264 + </a-col>
  265 + <a-col :span="12">
  266 + <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
  267 + <a-col :offset="8" class="flex items-center">
  268 + <span class="right-icon-d-color"></span>
  269 + 待激活设备：
  270 + <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span
  271 + >个</a-col
  272 + >
  273 + <a-col :offset="8" class="flex items-center">
  274 + <span class="right-icon-g-color"></span>
  275 + 在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span
  276 + >个</a-col
  277 + >
  278 + <a-col :offset="8" class="flex items-center">
  279 + <span class="right-icon-s-color"></span>
  280 + 离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span
  281 + >个</a-col
  282 + >
  283 + </a-row>
  284 + </a-col>
  285 + </a-row>
278 </Card> 286 </Card>
279 </div> 287 </div>
280 </div> 288 </div>
@@ -340,13 +348,6 @@ @@ -340,13 +348,6 @@
340 }); 348 });
341 </script> 349 </script>
342 <style lang="less"> 350 <style lang="less">
343 - .right-text {  
344 - width: 40%;  
345 - flex-direction: column;  
346 - height: 240px;  
347 - margin: 10px 0 10px 50px;  
348 - }  
349 -  
350 .text { 351 .text {
351 color: #333; 352 color: #333;
352 display: flex; 353 display: flex;
@@ -357,39 +358,23 @@ @@ -357,39 +358,23 @@
357 font-weight: bold; 358 font-weight: bold;
358 } 359 }
359 360
360 - .chart-top {  
361 - width: 60%;  
362 - height: 300px;  
363 - align-items: center;  
364 - margin-top: -30px;  
365 - }  
366 -  
367 - .container {  
368 - width: 100%;  
369 - }  
370 -  
371 - .chart-top-status {  
372 - width: 100%;  
373 - height: 300px;  
374 - align-items: center;  
375 - margin-top: -40px;  
376 - }  
377 -  
378 .base-left-icon-color { 361 .base-left-icon-color {
379 border-radius: 50%; 362 border-radius: 50%;
380 - width: 10px;  
381 - height: 10px; 363 + width: 0.75rem;
  364 + height: 0.75rem;
  365 + display: block;
382 position: relative; 366 position: relative;
383 - right: 10px; 367 + right: 0.5rem;
384 } 368 }
  369 +
385 .left-icon-d-color :extend(.base-left-icon-color) { 370 .left-icon-d-color :extend(.base-left-icon-color) {
386 - background-color: #5c7bd9; 371 + background-color: #5c7bd9 !important;
387 } 372 }
388 .left-icon-g-color :extend(.base-left-icon-color) { 373 .left-icon-g-color :extend(.base-left-icon-color) {
389 - background-color: #91cc75; 374 + background-color: #91cc75 !important;
390 } 375 }
391 .left-icon-s-color :extend(.base-left-icon-color) { 376 .left-icon-s-color :extend(.base-left-icon-color) {
392 - background-color: #fac859; 377 + background-color: #fac859 !important;
393 } 378 }
394 .right-icon-d-color :extend(.base-left-icon-color) { 379 .right-icon-d-color :extend(.base-left-icon-color) {
395 background-color: #5c7bd9; 380 background-color: #5c7bd9;