fix: bug#12338

src/views/link/DashBoard/components/Cpu.vue

@@ -61,6 +61,13 @@ import {
 } from './tool.ts';
 import { DataType } from '../typings';
 
+const props = defineProps({
+  serviceId: {
+    type: String,
+    default: undefined
+  }
+})
+
 const chartRef = ref<Record<string, any>>({});
 const loading = ref(false);
 const data = ref<DataType>({
@@ -79,7 +86,8 @@ const getCPUEcharts = async (val: any) => {
         const _cpuOptions = {};
         const _cpuXAxis = new Set();
         if (res.result?.length) {
-            res.result.forEach((item: any) => {
+          const filterArray = res.result.filter((item : any) => item.data?.clusterNodeId === props.serviceId)
+          filterArray.forEach((item: any) => {
                 const value = item.data.value;
                 const nodeID = item.data.clusterNodeId;
                 _cpuXAxis.add(
@@ -168,16 +176,14 @@ watch(
     },
     { immediate: true, deep: true },
 );
-watch(
-    () => data.value,
-    (val) => {
-        const { time } = val;
-        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
-            getCPUEcharts(val);
-        }
-    },
-    { immediate: true, deep: true },
-);
+
+watchEffect(() => {
+  const time = data.value.time
+  if (time && Array.isArray(time) && time.length === 2 && time[0] && props.serviceId) {
+    getCPUEcharts(data.value);
+  }
+})
+
 </script>
 
 <style lang="less" scoped>

src/views/link/DashBoard/components/Jvm.vue

@@ -61,6 +61,13 @@ import {
 } from './tool.ts';
 import { DataType } from '../typings';
 
+const props = defineProps({
+  serviceId: {
+    type: String,
+    default: undefined
+  }
+})
+
 const chartRef = ref<Record<string, any>>({});
 const loading = ref(false);
 const data = ref<DataType>({
@@ -79,7 +86,8 @@ const getJVMEcharts = async (val: any) => {
         const _jvmOptions = {};
         const _jvmXAxis = new Set();
         if (res.result?.length) {
-            res.result.forEach((item: any) => {
+          const filterArray = res.result.filter((item : any) => item.data?.clusterNodeId === props.serviceId)
+          filterArray.forEach((item: any) => {
                 const value = item.data.value;
                 const memoryJvmHeapFree = value.memoryJvmHeapFree;
                 const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
@@ -172,16 +180,14 @@ watch(
     },
     { immediate: true, deep: true },
 );
-watch(
-    () => data.value,
-    (val) => {
-        const { time } = val;
-        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
-            getJVMEcharts(val);
-        }
-    },
-    { immediate: true, deep: true },
-);
+
+watchEffect(() => {
+  const time = data.value.time
+  if (time && Array.isArray(time) && time.length === 2 && time[0] && props.serviceId) {
+    getJVMEcharts(data.value);
+  }
+})
+
 </script>
 
 <style lang="less" scoped>

src/views/link/DashBoard/components/Network.vue

@@ -69,6 +69,13 @@ import dayjs from 'dayjs';
 import * as echarts from 'echarts';
 import { DataType } from '../typings.d';
 
+const props = defineProps({
+  serviceId: {
+    type: String,
+    default: undefined
+  }
+})
+
 const chartRef = ref<Record<string, any>>({});
 const loading = ref(false);
 const data = ref<DataType>({
@@ -90,7 +97,8 @@ const getNetworkEcharts = async (val: any) => {
         const _networkOptions = {};
         const _networkXAxis = new Set();
         if (resp.result.length) {
-            resp.result.forEach((item: any) => {
+          const filterArray = resp.result.filter((item : any) => item.data?.clusterNodeId === props.serviceId)
+          filterArray.forEach((item: any) => {
                 const value = item.data.value;
                 const _data: Array<any> = [];
                 const nodeID = item.data.clusterNodeId;
@@ -191,18 +199,14 @@ watch(
     },
     { immediate: true, deep: true },
 );
-watch(
-    () => data.value,
-    (value) => {
-        const {
-            time: { time },
-        } = value;
-        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
-            getNetworkEcharts(value);
-        }
-    },
-    { immediate: true, deep: true },
-);
+
+watchEffect(() => {
+  const time = data.value.time.time
+  if (time && Array.isArray(time) && time.length === 2 && time[0] && props.serviceId) {
+    getNetworkEcharts(data.value);
+  }
+})
+
 </script>
 
 <style lang="less" scoped>

src/views/link/DashBoard/components/TopCard.vue

@@ -60,15 +60,26 @@ const topValues = ref({
     systemUsage: 0,
     systemUsageTotal: 0,
 });
+const wsRef = ref<any>()
+
+const emit = defineEmits(['serviceChange'])
 
 const serverIdChange = (val: string) => {
     serverId.value = val;
 };
 
+const unSub = () => {
+  if (wsRef.value) {
+    wsRef.value.unsubscribe()
+  }
+}
+
 const getData = () => {
     const id = 'operations-statistics-system-info-realTime';
     const topic = '/dashboard/systemMonitor/stats/info/realTime';
-    getWebSocket(id, topic, {
+    unSub()
+
+    wsRef.value = getWebSocket(id, topic, {
         type: 'all',
         serverNodeId: serverId.value,
         interval: '1s',
@@ -118,10 +129,16 @@ onMounted(() => {
       });
     }
 });
+
+onUnmounted(() => {
+  unSub()
+})
+
 watch(
     () => serverId.value,
     (val) => {
         val && getData();
+        emit('serviceChange', val)
     },
 );
 </script>

src/views/link/DashBoard/index.vue

@@ -2,10 +2,10 @@
     <page-container>
         <div>
             <j-row :gutter="[24, 24]">
-                <j-col :span="24"><TopCard /> </j-col>
-                <j-col :span="24"><Network /></j-col>
-                <j-col :span="12"><Cpu /></j-col>
-                <j-col :span="12"><Jvm /></j-col>
+                <j-col :span="24"><TopCard @serviceChange='serviceChange' /> </j-col>
+                <j-col :span="24"><Network :serviceId='serviceId' /></j-col>
+                <j-col :span="12"><Cpu :serviceId='serviceId'/></j-col>
+                <j-col :span="12"><Jvm :serviceId='serviceId'/></j-col>
             </j-row>
         </div>
     </page-container>
@@ -16,6 +16,13 @@ import TopCard from './components/TopCard.vue';
 import Network from './components/Network.vue';
 import Cpu from './components/Cpu.vue';
 import Jvm from './components/Jvm.vue';
+
+const serviceId = ref<string | undefined>()
+
+const serviceChange = (id: string) => {
+  serviceId.value = id
+}
+
 </script>
 
 <style lang="less" scoped></style>

vite.config.ts

@@ -95,7 +95,7 @@ export default defineConfig(({ mode}) => {
                   // target: 'http://192.168.32.226:8844',
                   // target: 'http://192.168.32.244:8881',
                   target: 'http://120.77.179.54:8844', // 120测试
-                //   target: 'http://192.168.33.46:8844', // 本地开发环境
+                  // target: 'http://192.168.33.46:8844', // 本地开发环境
                   ws: 'ws://120.77.179.54:8844',
                   changeOrigin: true,
                   rewrite: (path) => path.replace(/^\/api/, '')