fix: 设备诊断

src/pages/device/Instance/Detail/Diagnose/Message/index.tsx

@@ -45,13 +45,14 @@ export const DiagnoseMessageModel = model<{
 const Message = observer(() => {
   const [subscribeTopic] = useSendWebsocketMessage();
   const DiagnoseFormRef = useRef<{ save: any }>();
+  const diagnoseRef = useRef<any>();
 
   const metadata = JSON.parse(InstanceModel.detail?.metadata || '{}');
 
   const subscribeLog = () => {
     const id = `device-debug-${InstanceModel.detail?.id}`;
     const topic = `/debug/device/${InstanceModel.detail?.id}/trace`;
-    subscribeTopic!(id, topic, {})
+    diagnoseRef.current = subscribeTopic!(id, topic, {})
       ?.pipe(map((res) => res.payload))
       .subscribe((payload: any) => {
         if (payload.type === 'log') {
@@ -120,9 +121,13 @@ const Message = observer(() => {
 
   useEffect(() => {
     if (DiagnoseStatusModel.state === 'success') {
-      DiagnoseStatusModel.dialogList = [];
       subscribeLog();
     }
+    return () => {
+      if (diagnoseRef.current) {
+        diagnoseRef.current.unsubscribe();
+      }
+    };
   }, [DiagnoseStatusModel.state]);
 
   const _form = useMemo(

src/pages/device/Instance/Detail/Diagnose/index.tsx

@@ -8,7 +8,6 @@ import { InstanceModel } from '@/pages/device/Instance';
 import { observer } from '@formily/reactive-react';
 import {
   DiagnoseStatusModel,
-  DiagnoseStatusModelInit,
   headerColorMap,
   headerDescMap,
   headerImgMap,
@@ -31,6 +30,29 @@ const Diagnose = observer(() => {
   };
 
   useEffect(() => {
+    DiagnoseStatusModel.list = [];
+    DiagnoseStatusModel.count = 0;
+    DiagnoseStatusModel.percent = 0;
+    DiagnoseStatusModel.status = 'loading';
+    DiagnoseStatusModel.state = 'loading';
+    DiagnoseStatusModel.flag = false;
+    DiagnoseStatusModel.logList = [];
+    DiagnoseStatusModel.dialogList = [];
+    DiagnoseStatusModel.allDialogList = [];
+    DiagnoseStatusModel.message = {
+      up: {
+        text: '上行消息诊断中',
+        status: 'loading',
+      },
+      down: {
+        text: '下行消息诊断中',
+        status: 'loading',
+      },
+    };
+    DiagnoseMessageModel.inputs = [];
+    DiagnoseMessageModel.data = { type: 'function' };
+    DiagnoseMessageModel.input = {};
+    DiagnoseMessageModel._inputs = {};
     setCurrent('status');
     const provider = InstanceModel.detail?.accessProvider;
     if (provider === 'fixed-media' || provider === 'gb28181-2016') {
@@ -45,17 +67,8 @@ const Diagnose = observer(() => {
       setProviderType('network');
     }
     DiagnoseStatusModel.state = 'loading';
-    return () => {
-      console.log('ren');
-      Object.keys(DiagnoseStatusModelInit).map((key) => {
-        DiagnoseStatusModel[key] = DiagnoseStatusModelInit[key];
-      });
-      DiagnoseMessageModel.inputs = [];
-      DiagnoseMessageModel.data = { type: 'function' };
-      DiagnoseMessageModel.input = {};
-      DiagnoseMessageModel._inputs = {};
-    };
-  }, []); // InstanceModel.active
+    return () => {};
+  }, [InstanceModel.active]);
 
   const activeStyle = {
     background: '#FFFFFF',

src/pages/link/DashBoard/index.tsx

@@ -235,6 +235,16 @@ export default () => {
     }
   };
 
+  const networkValueRender = (value: number) => {
+    if (value >= 1024 && value < 1024 * 1024) {
+      return `${Number((value / 1024).toFixed(2))}M`;
+    } else if (value >= 1024 * 1024) {
+      return `${Number((value / 1024 / 1024).toFixed(2))}KB`;
+    } else {
+      return `${value}B`;
+    }
+  };
+
   const handleNetworkOptions = (data: Record<string, any>, xAxis: string[]) => {
     setNetworkOptions({
       xAxis: {
@@ -244,7 +254,7 @@ export default () => {
       },
       tooltip: {
         trigger: 'axis',
-        valueFormatter: (value) => `${value}M`,
+        valueFormatter: (value) => networkValueRender(Number(value)),
       },
       yAxis: {
         type: 'value',
@@ -258,7 +268,7 @@ export default () => {
       color: ['#979AFF'],
       series: Object.keys(data).length
         ? Object.keys(data).map((key) => ({
-            data: data[key]._data.map((item: number) => Number((item / 1024 / 1024).toFixed(2))),
+            data: data[key]._data, //.map((item: number) => Number((item / 1024 / 1024).toFixed(2))),
             name: key,
             type: 'line',
             smooth: true,