10/10

1. 设备管理界面完成
2. 用户管理界面完成
3. 会话列表完成

src/views/index/compontents/areaDevices.vue

@@ -2,32 +2,34 @@
 import {ref} from 'vue';
 import {ElProgress} from 'element-plus';
 
-const list = ref([
-  {
-    areaName: '华东区',
-    num: '3002台',
-    percent: 23,
-  },
-  {
-    areaName: '华北区',
-    num: '8002台',
-    percent: 50,
-  },
-])
+
+const props = defineProps<{
+  total: number,
+  items: Array<{ count: number, name: string, percent: number }>
+}>()
+const list = computed(() => {
+  return props.items.map(item => {
+    return {
+      areaName: item.name,
+      num: item.count,
+      percent: item.percent,
+    }
+  })
+})
 </script>
 
 <template>
   <div class="Box">
     <div class="NavBox">
       <div class="TypeNavBox">区域设备分布</div>
-      <div class="subTypeNavBox">共 12,860 台在线设备</div>
+      <div class="subTypeNavBox">共 {{ props.total }} 台在线设备</div>
     </div>
     <div class="ChartBox">
       <div v-for="(item,index) in list" :key="index" style="margin-bottom: 18px">
         <div class="flex justify-between progressInfo">
           <div>{{ item.areaName }}</div>
           <div class="flex">
-            <div class="num">{{ item.num }}</div>
+            <div class="num">{{ item.num }}台</div>
             <div class="percent">{{ item.percent }}%</div>
           </div>
         </div>