From 7d5ac186eecf9eca7b4823dc99d79cf8ec7e53cf Mon Sep 17 00:00:00 2001
From: nagocoler <nagocoler@qq.com>
Date: Wed, 13 Dec 2023 16:09:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=8D=E5=8A=A1=E5=99=A8?=
 =?UTF-8?q?=E5=9C=B0=E5=8C=BA=E7=AD=9B=E9=80=89=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 itbaima-monitor-web/src/views/main/Manage.vue | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/itbaima-monitor-web/src/views/main/Manage.vue b/itbaima-monitor-web/src/views/main/Manage.vue
index b9ded02..1a57ad9 100644
--- a/itbaima-monitor-web/src/views/main/Manage.vue
+++ b/itbaima-monitor-web/src/views/main/Manage.vue
@@ -1,11 +1,22 @@
 <script setup>
 import PreviewCard from "@/component/PreviewCard.vue";
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {get} from "@/net";
 import ClientDetails from "@/component/ClientDetails.vue";
 import RegisterCard from "@/component/RegisterCard.vue";
 import {Plus} from "@element-plus/icons-vue";
 
+const locations = [
+  {name: 'cn', desc: '中国大陆'},
+  {name: 'hk', desc: '香港'},
+  {name: 'jp', desc: '日本'},
+  {name: 'us', desc: '美国'},
+  {name: 'sg', desc: '新加坡'},
+  {name: 'kr', desc: '韩国'},
+  {name: 'de', desc: '德国'}
+]
+const checkedNodes = ref([])
+
 const list = ref([])
 
 const updateList = () => get('/api/monitor/list', data => list.value = data)
@@ -21,6 +32,14 @@ const displayClientDetails = (id) => {
   detail.id = id
 }
 
+const clientList = computed(() => {
+  if(checkedNodes.value.length === 0) {
+    return list.value
+  } else {
+    return list.value.filter(item => checkedNodes.value.indexOf(item.location) >= 0)
+  }
+})
+
 const register = reactive({
   show: false,
   token: ''
@@ -41,8 +60,16 @@ const refreshToken = () => get('/api/monitor/register', token => register.token
       </div>
     </div>
     <el-divider style="margin: 10px 0"/>
+    <div style="margin-bottom: 20px">
+      <el-checkbox-group v-model="checkedNodes">
+        <el-checkbox v-for="node in locations" :key="node" :label="node.name" border>
+          <span :class="`flag-icon flag-icon-${node.name}`"></span>
+          <span style="font-size: 13px;margin-left: 10px">{{node.desc}}</span>
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
     <div class="card-list" v-if="list.length">
-      <preview-card v-for="item in list" :data="item" :update="updateList"
+      <preview-card v-for="item in clientList" :data="item" :update="updateList"
                     @click="displayClientDetails(item.id)"/>
     </div>
     <el-empty description="还没有任何主机哦，点击右上角添加一个吧" v-else/>
@@ -58,6 +85,10 @@ const refreshToken = () => get('/api/monitor/register', token => register.token
 </template>
 
 <style scoped>
+:deep(.el-checkbox-group .el-checkbox) {
+  margin-right: 10px;
+}
+
 :deep(.el-drawer) {
   margin: 10px;
   height: calc(100% - 20px);