🔨 修改前端逻辑.

orion-visor-ui/src/api/monitor/monitor-host.ts

@@ -176,7 +176,9 @@ export function getMonitorHostOverride(agentKey: string) {
  * 查询监控主机图表
  */
 export function getMonitorHostChart(request: MonitorHostChartRequest) {
-  return axios.post<Array<TimeChartSeries>>('/monitor/monitor-host/chart', request);
+  return axios.post<Array<TimeChartSeries>>('/monitor/monitor-host/chart', request, {
+    timeout: 180000,
+  });
 }
 
 /**

orion-visor-ui/src/components/system/message-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full">
+  <div v-if="render" class="full">
     <!-- 消息分类 -->
     <a-spin class="message-classify-container"
             :hide-icon="true"
@@ -90,6 +90,7 @@
   const classifyCount = ref<Record<string, number>>({});
   const messageList = ref<Array<MessageRecordResponse>>([]);
   const hasMore = ref(true);
+  const render = ref(false);
 
   // 重新加载消息
   const reloadAllMessage = async () => {
@@ -210,8 +211,9 @@
   };
 
   // 加载字典值
-  onMounted(() => {
+  onMounted(async () => {
-    loadKeys(dictKeys);
+    await loadKeys(dictKeys);
+    render.value = true;
   });
 
   // 获取消息

orion-visor-ui/src/store/modules/dict/index.ts

@@ -3,8 +3,28 @@ import type { DictState } from './types';
 import type { Options } from '@/types/global';
 import { defineStore } from 'pinia';
 import { getDictValueList } from '@/api/system/dict-value';
+import { isArray } from '@/utils/is';
 
-export const ALL_OPTION: Options = { label: '全部', value: '' };
+const AllOption: Options = { label: '全部', value: '' };
+
+// 获取拼接的选项
+const getPrependOptions = (perpendOption: boolean | Options | Options[] | RadioOption | RadioOption[]): Options[] => {
+  if (!perpendOption) {
+    return [];
+  }
+  if (perpendOption === true) {
+    // 默认选项
+    return [{ ...AllOption }];
+  } else if (isArray(perpendOption)) {
+    // 数组选项
+    return perpendOption.map(s => {
+      return { ...s } as Options;
+    });
+  } else {
+    // 单一选项
+    return [{ ...perpendOption as Options }];
+  }
+};
 
 export default defineStore('dict', {
   state: (): DictState => ({}),
@@ -27,38 +47,30 @@ export default defineStore('dict', {
     },
 
     // 获取字典选项
-    toOptions(key: string, firstOption: boolean | Record<string, any> = false): Options[] {
+    toOptions(key: string, perpendOption: boolean | Options | Options[] = false): Options[] {
-      if (firstOption === true) {
+      let perpendOptions = getPrependOptions(perpendOption);
-        return [{ ...ALL_OPTION }, ...this.$state[key]];
+      const options = this.$state[key] ?? [];
-      } else if (firstOption) {
+      return [...perpendOptions, ...options];
-        return [{ ...ALL_OPTION, ...firstOption }, ...this.$state[key]];
-      } else {
-        return this.$state[key];
-      }
     },
 
     // 转为 unref 的字典选项
-    toUnrefOptions(key: string, firstOption: boolean | Record<string, any> = false): Options[] {
+    toUnrefOptions(key: string, perpendOption: boolean | Options | Options[] = false): Options[] {
-      return this.toOptions(key, firstOption)
+      return this.toOptions(key, perpendOption)
         .map(s => {
           return { ...s };
         });
     },
 
     // 获取字典选项
-    toRadioOptions(key: string, firstOption: boolean | Record<string, any> = false): RadioOption[] {
+    toRadioOptions(key: string, perpendOption: boolean | RadioOption | RadioOption[] = false): RadioOption[] {
-      if (firstOption === true) {
+      let perpendOptions = getPrependOptions(perpendOption);
-        return [{ ...ALL_OPTION }, ...this.$state[key]] as RadioOption[];
+      const options = this.$state[key] ?? [];
-      } else if (firstOption) {
+      return [...perpendOptions, ...options] as RadioOption[];
-        return [{ ...ALL_OPTION, ...firstOption }, ...this.$state[key]] as RadioOption[];
-      } else {
-        return this.$state[key] as RadioOption[];
-      }
     },
 
     // 转为 unref 的字典选项
-    toUnrefRadioOptions(key: string, firstOption: boolean | Record<string, any> = false): RadioOption[] {
+    toUnrefRadioOptions(key: string, perpendOption: boolean | RadioOption | RadioOption[] = false): RadioOption[] {
-      return this.toRadioOptions(key, firstOption)
+      return this.toRadioOptions(key, perpendOption)
         .map(s => {
           return { ...s };
         });

orion-visor-ui/src/views/monitor/monitor-detail/compoments/metrics-chart.vue

@@ -68,6 +68,11 @@
       },
       backgroundColor: 'transparent',
       animation: false,
+      dataZoom: [{
+        type: 'inside',
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+      }],
       tooltip: {
         trigger: 'axis',
         appendToBody: true,