添加服务器地区筛选按钮

itbaima-monitor-web/src/component/ClientDetails.vue

@@ -6,16 +6,10 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import {cpuNameToImage, fitToRightByteUnit, osNameToIcon, percentageToStatus, rename} from "@/tools";
 import RuntimeHistroy from "@/component/RuntimeHistroy.vue";
 import {Delete} from "@element-plus/icons-vue";
+import {useStore} from "@/store";
 
-const locations = [
+const store = useStore()
-  {name: 'cn', desc: '中国大陆'},
+const locations = store.locations
-  {name: 'hk', desc: '香港'},
-  {name: 'jp', desc: '日本'},
-  {name: 'us', desc: '美国'},
-  {name: 'sg', desc: '新加坡'},
-  {name: 'kr', desc: '韩国'},
-  {name: 'de', desc: '德国'}
-]
 
 const props = defineProps({
   id: Number,
@@ -80,8 +74,10 @@ function deleteClient() {
 setInterval(() => {
   if(props.show && details.runtime) {
     get(`/api/monitor/runtime-now?clientId=${props.id}`, data => {
-      details.runtime.list.splice(0, 1)
+      if(details.runtime.list[0].timestamp !== data.timestamp) {
-      details.runtime.list.push(data)
+        details.runtime.list.splice(0, 1)
+        details.runtime.list.push(data)
+      }
     })
   }
 }, 10000)

itbaima-monitor-web/src/store/index.js

@@ -7,7 +7,16 @@ export const useStore = defineStore('general', {
                 role: '',
                 username: '',
                 email: ''
-            }
+            }, locations: [
+                {name: 'cn', desc: '中国大陆'},
+                {name: 'hk', desc: '香港'},
+                {name: 'jp', desc: '日本'},
+                {name: 'us', desc: '美国'},
+                {name: 'sg', desc: '新加坡'},
+                {name: 'kr', desc: '韩国'},
+                {name: 'de', desc: '德国'}
+            ]
+
         }
     },
     getters: {

itbaima-monitor-web/src/views/main/Manage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import PreviewCard from "@/component/PreviewCard.vue";
 import {get} from "@/net";
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import ClientDetails from "@/component/ClientDetails.vue";
 import {Plus} from "@element-plus/icons-vue";
 import RegisterCard from "@/component/RegisterCard.vue";
@@ -11,6 +11,8 @@ import {useStore} from "@/store";
 const store = useStore()
 const route = useRoute()
 const list = ref([])
+const checkedNodes = ref([])
+const locations = store.locations
 
 const detail = reactive({
   show: false,
@@ -26,6 +28,14 @@ const register = reactive({
 })
 const refreshToken = () => get('/api/monitor/register', code => register.token = code)
 
+const clientList = computed(() => {
+  if(checkedNodes.value.length === 0) {
+    return list.value
+  } else {
+    return list.value.filter(item => checkedNodes.value.indexOf(item.location) >= 0)
+  }
+})
+
 const updateList = () => {
   if(route.name === 'manage')
   get('/api/monitor/list', data => list.value = data)
@@ -47,8 +57,16 @@ updateList()
       </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">
-      <preview-card :update="updateList" :data="item" v-for="item in list"
+      <preview-card :update="updateList" :data="item" v-for="item in clientList"
                     @click="displayClientDetails(item.id)"/>
     </div>
     <el-drawer size="520" :show-close="false" v-model="detail.show"
@@ -64,6 +82,10 @@ updateList()
 </template>
 
 <style scoped>
+:deep(.el-checkbox-group .el-checkbox) {
+  margin-right: 10px;
+}
+
 :deep(.el-drawer) {
   margin: 10px;
   height: calc(100% - 20px);