From f6323ae92de6965f947af2b93f70d605ed38e46e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=A5=E5=88=A9=E5=97=B7=E5=97=B7=E5=97=B7=E5=8F=AB?=
 <go3011739322@gmail.com>
Date: Fri, 20 Sep 2024 00:41:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=8D=93=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD=E5=9B=BE=E8=A1=A8=E5=8D=A1=E9=A1=BFbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AndroidPerf.vue      |  36 +-
 src/components/AndroidPerfChart.vue | 695 +++++++++++++++-------------
 src/views/ResultDetail.vue          |  30 ++
 3 files changed, 426 insertions(+), 335 deletions(-)

diff --git a/src/components/AndroidPerf.vue b/src/components/AndroidPerf.vue
index 0cabc927..a7efda54 100644
--- a/src/components/AndroidPerf.vue
+++ b/src/components/AndroidPerf.vue
@@ -38,45 +38,53 @@ const stopPerfmon = () => {
   isStart.value = false;
 };
 const clearPerfmon = () => {
-  sysCpu.value = [];
-  sysMem.value = [];
-  sysNetwork.value = [];
-  procCpu.value = [];
-  procMem.value = [];
-  procFps.value = [];
-  procThread.value = [];
+  // sysCpu.value = [];
+  // sysMem.value = [];
+  // sysNetwork.value = [];
+  // procCpu.value = [];
+  // procMem.value = [];
+  // procFps.value = [];
+  // procThread.value = [];
+  androidPerfChart.value.clearPerf();
 };
 const setData = (data) => {
   if (data.process) {
     if (data.process.cpuInfo) {
-      procCpu.value.push(data.process.cpuInfo);
+      // procCpu.value.push(data.process.cpuInfo);
+      androidPerfChart.value.pushProcCpuData(data.process.cpuInfo)
       androidPerfChart.value.printPerfCpu();
     }
     if (data.process.memInfo) {
-      procMem.value.push(data.process.memInfo);
+      // procMem.value.push(data.process.memInfo);
+      androidPerfChart.value.pushProcMemData(data.process.memInfo);
       androidPerfChart.value.printPerfMem();
     }
     if (data.process.fpsInfo) {
-      procFps.value.push(data.process.fpsInfo);
+      // procFps.value.push(data.process.fpsInfo);
+      androidPerfChart.value.pushProcFPSData(data.process.fpsInfo);
       androidPerfChart.value.printProcFps();
     }
     if (data.process.threadInfo) {
-      procThread.value.push(data.process.threadInfo);
+      // procThread.value.push(data.process.threadInfo);
+      androidPerfChart.value.pushProcThreadData(data.process.threadInfo);
       androidPerfChart.value.printProcThread();
     }
   }
   if (data.system) {
     if (data.system.cpuInfo) {
-      sysCpu.value.push(data.system.cpuInfo);
+      // sysCpu.value.push(data.system.cpuInfo);
+      androidPerfChart.value.pushSysCpuData(data.system.cpuInfo);
       androidPerfChart.value.printCpu();
       androidPerfChart.value.printSingleCpu();
     }
     if (data.system.memInfo) {
-      sysMem.value.push(data.system.memInfo);
+      // sysMem.value.push(data.system.memInfo);
+      androidPerfChart.value.pushSysMemData(data.system.memInfo);
       androidPerfChart.value.printMem();
     }
     if (data.system.networkInfo) {
-      sysNetwork.value.push(data.system.networkInfo);
+      // sysNetwork.value.push(data.system.networkInfo);
+      androidPerfChart.value.pushSysNetworkData(data.system.networkInfo)
       androidPerfChart.value.printNetwork();
     }
   }
diff --git a/src/components/AndroidPerfChart.vue b/src/components/AndroidPerfChart.vue
index 8d1b9dfd..868b5158 100644
--- a/src/components/AndroidPerfChart.vue
+++ b/src/components/AndroidPerfChart.vue
@@ -17,7 +17,7 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import moment from 'moment/moment';
-import { useI18n } from 'vue-i18n';
+import {useI18n} from 'vue-i18n';
 import * as echarts from 'echarts/core';
 import {
   TitleComponent,
@@ -27,9 +27,9 @@ import {
   LegendComponent,
   DataZoomComponent,
 } from 'echarts/components';
-import { LineChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-import { nextTick } from 'vue';
+import {LineChart} from 'echarts/charts';
+import {CanvasRenderer} from 'echarts/renderers';
+import {nextTick} from 'vue';
 
 echarts.use([
   DataZoomComponent,
@@ -42,7 +42,7 @@ echarts.use([
   TooltipComponent,
 ]);
 
-const { t: $t } = useI18n();
+const {t: $t} = useI18n();
 const props = defineProps({
   rid: String,
   cid: Number,
@@ -56,128 +56,17 @@ const props = defineProps({
   procThread: Array,
 });
 
-const getNetworkTimeStamp = () => {
-  const result = [];
-  if (props.sysNetwork.length > 0) {
-    for (const i in props.sysNetwork[0]) {
-      if (i) {
-        props.sysNetwork.map((obj) => {
-          result.push(moment(new Date(obj[i].timeStamp)).format('HH:mm:ss'));
-        });
-        break;
-      }
-    }
-  }
-  return result;
-};
-
-const getNetworkDataGroup = () => {
-  const result = [];
-  if (props.sysNetwork.length > 0) {
-    for (const i in props.sysNetwork[0]) {
-      const tx = [];
-      const rx = [];
-      props.sysNetwork.map((obj) => {
-        tx.push(obj[i].tx);
-        rx.push(obj[i].rx);
-      });
-      result.push({
-        type: 'line',
-        name: `${i}_tx`,
-        data: tx,
-        showSymbol: false,
-        boundaryGap: false,
-      });
-      result.push({
-        type: 'line',
-        name: `${i}_rx`,
-        data: rx,
-        showSymbol: false,
-        boundaryGap: false,
-      });
-    }
-  }
-  return result;
-};
-const getCpuDataGroup = () => {
-  const result = [];
-  if (props.sysCpu.length > 0) {
-    for (const i in props.sysCpu[0].cpu) {
-      if (i !== 'timeStamp') {
-        result.push({
-          type: 'line',
-          name: i,
-          data: props.sysCpu.map((obj) => {
-            if (obj.cpu) {
-              return obj.cpu[i];
-            }
-            return 0;
-          }),
-          showSymbol: false,
-          areaStyle: {},
-          boundaryGap: false,
-        });
-      }
-    }
-  }
-  return result;
-};
-const getCpuDataLegend = () => {
-  const result = [];
-  if (props.sysCpu.length > 0) {
-    for (const i in props.sysCpu[0].cpu) {
-      if (i !== 'timeStamp') {
-        result.push(i);
-      }
-    }
-  }
-  return result;
-};
-const getCpuLegend = () => {
-  const result = [];
-  if (props.sysCpu.length > 0) {
-    for (const i in props.sysCpu[0]) {
-      if (i !== 'cpu') {
-        result.push(i);
-      }
-    }
-  }
-  return result;
-};
-const getCpuGroup = () => {
-  const result = [];
-  if (props.sysCpu.length > 0) {
-    for (const i in props.sysCpu[0]) {
-      if (i !== 'cpu') {
-        result.push({
-          type: 'line',
-          name: i,
-          data: props.sysCpu.map((obj) => {
-            if (obj[i]) {
-              return obj[i].cpuUsage;
-            }
-            return 0;
-          }),
-          showSymbol: false,
-          areaStyle: {},
-          boundaryGap: false,
-        });
-      }
-    }
-  }
-  return result;
-};
 const printSingleCpu = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `sysSingleCpuChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `sysSingleCpuChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `sysSingleCpuChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `sysSingleCpuChart`
+        )
     );
   }
   chart.resize();
@@ -193,7 +82,7 @@ const printSingleCpu = () => {
     tooltip: {
       trigger: 'axis',
       position(pos, params, dom, rect, size) {
-        const obj = { top: 60 };
+        const obj = {top: 60};
         obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
         return obj;
       },
@@ -201,20 +90,18 @@ const printSingleCpu = () => {
     },
     legend: {
       top: '8%',
-      data: getCpuLegend(),
+      data: sysCpuData.SingleCpuDataLegend,
     },
-    grid: { top: '26%' },
+    grid: {top: '26%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
       boundaryGap: false,
       type: 'category',
-      data: props.sysCpu.map((obj) => {
-        return moment(new Date(obj.cpu.timeStamp)).format('HH:mm:ss');
-      }),
+      data: sysCpuData.xAxisData,
     },
     dataZoom: [
       {
@@ -225,22 +112,71 @@ const printSingleCpu = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: `${$t('perf.singleCpu')}(%)`, min: 0 }],
-    series: getCpuGroup(),
+    yAxis: [{name: `${$t('perf.singleCpu')}(%)`, min: 0}],
+    series: sysCpuData.SingleCpuData,
   };
   chart.setOption(option);
 };
+
+let sysCpuData = {
+  xAxisData: [],
+  seriesData: [],
+  CpuDataLegend: [],
+  SingleCpuData: [],
+  SingleCpuDataLegend: [],
+}
+
+const pushSysCpuData = (obj) => {
+  sysCpuData.xAxisData.push(new Date(obj.cpu.timeStamp))
+  if (obj.cpu) {
+    for (const i in obj.cpu) {
+      if (i !== 'timeStamp') {
+        if (sysCpuData[i]) {
+          sysCpuData[i].data.push(obj.cpu[i])
+        } else {
+          sysCpuData[i] = {
+            type: 'line',
+            name: i,
+            data: [obj.cpu[i]],
+            showSymbol: false,
+            areaStyle: {},
+            boundaryGap: false,
+          }
+          sysCpuData.seriesData.push(sysCpuData[i])
+          sysCpuData.CpuDataLegend.push(i)
+        }
+      }
+    }
+  }
+  for (let i in obj) {
+    if (sysCpuData[i]) {
+      sysCpuData[i].data.push(obj[i].cpuUsage)
+    } else {
+      sysCpuData[i] = {
+        type: 'line',
+        name: i,
+        data: [obj[i].cpuUsage],
+        showSymbol: false,
+        areaStyle: {},
+        boundaryGap: false,
+      }
+      sysCpuData.SingleCpuData.push(sysCpuData[i])
+      sysCpuData.SingleCpuDataLegend.push(i)
+    }
+  }
+}
+
 const printCpu = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `sysCpuChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `sysCpuChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `sysCpuChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `sysCpuChart`
+        )
     );
   }
   chart.resize();
@@ -256,7 +192,7 @@ const printCpu = () => {
     tooltip: {
       trigger: 'axis',
       position(pos, params, dom, rect, size) {
-        const obj = { top: 60 };
+        const obj = {top: 60};
         obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
         return obj;
       },
@@ -264,20 +200,18 @@ const printCpu = () => {
     },
     legend: {
       top: '8%',
-      data: getCpuDataLegend(),
+      data: sysCpuData.CpuDataLegend,
     },
-    grid: { top: '28%' },
+    grid: {top: '28%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
       boundaryGap: false,
       type: 'category',
-      data: props.sysCpu.map((obj) => {
-        return moment(new Date(obj.cpu.timeStamp)).format('HH:mm:ss');
-      }),
+      data: sysCpuData.xAxisData,
     },
     dataZoom: [
       {
@@ -288,22 +222,42 @@ const printCpu = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: `${$t('perf.totalCpu')}(%)`, min: 0 }],
-    series: getCpuDataGroup(),
+    yAxis: [{name: `${$t('perf.totalCpu')}(%)`, min: 0}],
+    series: sysCpuData.seriesData,
   };
   chart.setOption(option);
 };
+
+let sysMemData = {
+  xAxisData: [],
+  memBuffersData: [],
+  memCached: [],
+  memFree: [],
+  memTotal: [],
+  swapFree: [],
+  swapTotal: [],
+}
+
+const pushSysMemData = (obj) => {
+  sysMemData.xAxisData.push(new Date(obj.timeStamp))
+  sysMemData.memBuffersData.push(obj.memBuffers)
+  sysMemData.memCached.push(obj.memCached)
+  sysMemData.memCached.push(obj.memFree)
+  sysMemData.memTotal.push(obj.memTotal)
+  sysMemData.swapFree.push(obj.swapFree)
+  sysMemData.swapTotal.push(obj.swapTotal)
+}
 const printMem = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `sysMemChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `sysMemChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `sysMemChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `sysMemChart`
+        )
     );
   }
   chart.resize();
@@ -320,10 +274,10 @@ const printMem = () => {
     tooltip: {
       trigger: 'axis',
     },
-    grid: { top: '30%', left: '20%' },
+    grid: {top: '30%', left: '20%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     legend: {
@@ -340,9 +294,7 @@ const printMem = () => {
     xAxis: {
       boundaryGap: false,
       type: 'category',
-      data: props.sysMem.map((obj) => {
-        return moment(new Date(obj.timeStamp)).format('HH:mm:ss');
-      }),
+      data: sysMemData.xAxisData,
     },
     dataZoom: [
       {
@@ -353,59 +305,47 @@ const printMem = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: `${$t('perf.memUsage')}(b)`, min: 0 }],
+    yAxis: [{name: `${$t('perf.memUsage')}(b)`, min: 0}],
     series: [
       {
         name: 'Mem Buffers',
         type: 'line',
-        data: props.sysMem.map((obj) => {
-          return obj.memBuffers;
-        }),
+        data: sysMemData.memBuffersData,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'Mem Cached',
         type: 'line',
-        data: props.sysMem.map((obj) => {
-          return obj.memCached;
-        }),
+        data: sysMemData.memCached,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'Mem Free',
         type: 'line',
-        data: props.sysMem.map((obj) => {
-          return obj.memFree;
-        }),
+        data: sysMemData.memFree,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'Mem Total',
         type: 'line',
-        data: props.sysMem.map((obj) => {
-          return obj.memTotal;
-        }),
+        data: sysMemData.memTotal,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'Swap Free',
         type: 'line',
-        data: props.sysMem.map((obj) => {
-          return obj.swapFree;
-        }),
+        data: sysMemData.swapFree,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'Swap Total',
         type: 'line',
-        data: props.sysMem.map((obj) => {
-          return obj.swapTotal;
-        }),
+        data: sysMemData.swapTotal,
         showSymbol: false,
         boundaryGap: false,
       },
@@ -413,17 +353,26 @@ const printMem = () => {
   };
   chart.setOption(option);
 };
+
+let procFPSData = {
+  xAxisData: [],
+  seriesData: []
+}
+const pushProcFPSData = (obj) => {
+  procFPSData.xAxisData.push(new Date(obj.timeStamp))
+  procFPSData.seriesData.push(obj.fps)
+}
 const printProcFps = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `sysFpsChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `sysFpsChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `sysFpsChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `sysFpsChart`
+        )
     );
   }
   chart.resize();
@@ -440,16 +389,14 @@ const printProcFps = () => {
     tooltip: {
       trigger: 'axis',
     },
-    grid: { top: '15%' },
+    grid: {top: '15%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
-      data: props.procFps.map((obj) => {
-        return moment(new Date(obj.timeStamp)).format('HH:mm:ss');
-      }),
+      data: procFPSData.xAxisData,
     },
     dataZoom: [
       {
@@ -460,30 +407,38 @@ const printProcFps = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: 'FPS', min: 0 }],
+    yAxis: [{name: 'FPS', min: 0}],
     series: [
       {
         type: 'line',
-        data: props.procFps.map((obj) => {
-          return obj.fps;
-        }),
+        data: procFPSData.seriesData,
         showSymbol: false,
       },
     ],
   };
   chart.setOption(option);
 };
+
+let procThreadData = {
+  xAxisData: [],
+  seriesData: []
+}
+const pushProcThreadData = (obj) => {
+  console.log(obj)
+  procThreadData.xAxisData.push(new Date(obj.timestamp))
+  procThreadData.seriesData.push(obj.threadCount)
+}
 const printProcThread = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `procThreadChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `procThreadChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `procThreadChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `procThreadChart`
+        )
     );
   }
   chart.resize();
@@ -500,16 +455,14 @@ const printProcThread = () => {
     tooltip: {
       trigger: 'axis',
     },
-    grid: { top: '15%' },
+    grid: {top: '15%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
-      data: props.procThread.map((obj) => {
-        return moment(new Date(obj.timeStamp)).format('HH:mm:ss');
-      }),
+      data: procThreadData.xAxisData,
     },
     dataZoom: [
       {
@@ -520,30 +473,70 @@ const printProcThread = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: 'Count', min: 0 }],
+    yAxis: [{name: 'Count', min: 0}],
     series: [
       {
         type: 'line',
-        data: props.procThread.map((obj) => {
-          return obj.threadCount;
-        }),
+        data: procThreadData.seriesData,
         showSymbol: false,
       },
     ],
   };
   chart.setOption(option);
 };
+
+let sysNetworkData = {
+  xAxisData: [],
+  seriesData: [],
+  legendData:[]
+}
+
+const pushSysNetworkData = (obj) => {
+  let isAddTime = true;
+  for (const i in obj) {
+    if (isAddTime) {
+      sysNetworkData.xAxisData.push(new Date(obj[i].timeStamp));
+      isAddTime = false;
+    }
+
+    if (sysNetworkData[i + '_rx'] === undefined) {
+      sysNetworkData[i + '_rx'] = {
+        type: 'line',
+        name: i + '_rx',
+        data: [obj[i].rx],
+        showSymbol: false,
+        boundaryGap: false,
+      }
+      sysNetworkData[i + '_tx'] = {
+        type: 'line',
+        name: i + '_tx',
+        data: [obj[i].tx],
+        showSymbol: false,
+        boundaryGap: false,
+      }
+      sysNetworkData.seriesData.push(sysNetworkData[i + '_rx']);
+      sysNetworkData.seriesData.push(sysNetworkData[i + '_tx']);
+
+      sysNetworkData.legendData.push(i + '_rx')
+      sysNetworkData.legendData.push(i + '_tx')
+    } else {
+      sysNetworkData[i + '_rx'].data.push(obj[i].rx)
+      sysNetworkData[i + '_tx'].data.push(obj[i].tx)
+    }
+  }
+}
+
 const printNetwork = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `sysNetworkChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `sysNetworkChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `sysNetworkChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `sysNetworkChart`
+        )
     );
   }
   chart.resize();
@@ -560,14 +553,14 @@ const printNetwork = () => {
     tooltip: {
       trigger: 'axis',
     },
-    grid: { top: '20%', left: '18%' },
+    grid: {top: '20%', left: '18%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
-      data: getNetworkTimeStamp(),
+      data: sysNetworkData.xAxisData,
     },
     dataZoom: [
       {
@@ -578,22 +571,31 @@ const printNetwork = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: `${$t('perf.network')}(b)`, min: 0 }],
-    series: getNetworkDataGroup(),
+    yAxis: [{name: `${$t('perf.network')}(b)`, min: 0}],
+    series: sysNetworkData.seriesData,
   };
   chart.setOption(option);
 };
+
+let procCpuData = {
+  xAxisData: [],
+  seriesData: []
+}
+const pushProcCpuData = (obj) => {
+  procCpuData.xAxisData.push(new Date(obj.timeStamp))
+  procCpuData.seriesData.push(obj.cpuUtilization)
+}
 const printPerfCpu = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `perfCpuChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `perfCpuChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `perfCpuChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `perfCpuChart`
+        )
     );
   }
   chart.resize();
@@ -610,18 +612,16 @@ const printPerfCpu = () => {
       trigger: 'axis',
       valueFormatter: (value) => `${value.toFixed(3)} %`,
     },
-    grid: { top: '15%' },
+    grid: {top: '15%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
       boundaryGap: false,
       type: 'category',
-      data: props.procCpu.map((obj) => {
-        return moment(new Date(obj.timeStamp)).format('HH:mm:ss');
-      }),
+      data: procCpuData.xAxisData,
     },
     dataZoom: [
       {
@@ -632,13 +632,11 @@ const printPerfCpu = () => {
         xAxisIndex: [0, 1],
       },
     ],
-    yAxis: [{ name: `${$t('perf.procCpu')}(%)`, min: 0 }],
+    yAxis: [{name: `${$t('perf.procCpu')}(%)`, min: 0}],
     series: [
       {
         type: 'line',
-        data: props.procCpu.map((obj) => {
-          return obj.cpuUtilization;
-        }),
+        data: procCpuData.seriesData,
         showSymbol: false,
         areaStyle: {},
         boundaryGap: false,
@@ -647,17 +645,30 @@ const printPerfCpu = () => {
   };
   chart.setOption(option);
 };
+
+let procMemData = {
+  xAxisData: [],
+  pssData: [],
+  phyData: [],
+  vmData: []
+}
+const pushProcMemData = (obj) => {
+  procMemData.xAxisData.push(new Date(obj.timeStamp))
+  procMemData.phyData.push(obj.phyRSS)
+  procMemData.vmData.push(obj.vmRSS)
+  procMemData.pssData.push(obj.totalPSS)
+}
 const printPerfMem = () => {
   let chart = echarts.getInstanceByDom(
-    document.getElementById(
-      `${props.rid}-${props.cid}-${props.did}-` + `perfMemChart`
-    )
+      document.getElementById(
+          `${props.rid}-${props.cid}-${props.did}-` + `perfMemChart`
+      )
   );
   if (chart == null) {
     chart = echarts.init(
-      document.getElementById(
-        `${props.rid}-${props.cid}-${props.did}-` + `perfMemChart`
-      )
+        document.getElementById(
+            `${props.rid}-${props.cid}-${props.did}-` + `perfMemChart`
+        )
     );
   }
   chart.resize();
@@ -674,18 +685,16 @@ const printPerfMem = () => {
     tooltip: {
       trigger: 'axis',
     },
-    grid: { top: '20%', left: '20%' },
+    grid: {top: '20%', left: '20%'},
     toolbox: {
       feature: {
-        saveAsImage: { show: true, title: 'Save' },
+        saveAsImage: {show: true, title: 'Save'},
       },
     },
     xAxis: {
       boundaryGap: false,
       type: 'category',
-      data: props.procMem.map((obj) => {
-        return moment(new Date(obj.timeStamp)).format('HH:mm:ss');
-      }),
+      data: procMemData.xAxisData,
     },
     dataZoom: [
       {
@@ -700,32 +709,26 @@ const printPerfMem = () => {
       top: '8%',
       data: ['Phy RSS', 'VM RSS', 'Total PSS'],
     },
-    yAxis: [{ name: `${$t('perf.memUsage')}(kb)`, min: 0 }],
+    yAxis: [{name: `${$t('perf.memUsage')}(kb)`, min: 0}],
     series: [
       {
         name: 'Phy RSS',
         type: 'line',
-        data: props.procMem.map((obj) => {
-          return obj.phyRSS;
-        }),
+        data: procMemData.phyData,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'VM RSS',
         type: 'line',
-        data: props.procMem.map((obj) => {
-          return obj.vmRSS;
-        }),
+        data: procMemData.vmData,
         showSymbol: false,
         boundaryGap: false,
       },
       {
         name: 'Total PSS',
         type: 'line',
-        data: props.procMem.map((obj) => {
-          return obj.totalPSS;
-        }),
+        data: procMemData.pssData,
         showSymbol: false,
         boundaryGap: false,
       },
@@ -733,68 +736,118 @@ const printPerfMem = () => {
   };
   chart.setOption(option);
 };
+
+const clearPerf = () => {
+  procMemData = {
+    xAxisData: [],
+    pssData: [],
+    phyData: [],
+    vmData: []
+  };
+  procCpuData = {
+    xAxisData: [],
+    seriesData: []
+  };
+  sysNetworkData = {
+    xAxisData: [],
+    seriesData: [],
+    legendData:[]
+  };
+  procThreadData = {
+    xAxisData: [],
+    seriesData: []
+  };
+  procFPSData = {
+    xAxisData: [],
+    seriesData: []
+  };
+  sysMemData = {
+    xAxisData: [],
+    memBuffersData: [],
+    memCached: [],
+    memFree: [],
+    memTotal: [],
+    swapFree: [],
+    swapTotal: [],
+  };
+  sysCpuData = {
+    xAxisData: [],
+    seriesData: [],
+    CpuDataLegend: [],
+    SingleCpuData: [],
+    SingleCpuDataLegend: [],
+  };
+}
 defineExpose({
+  pushSysCpuData,
   printCpu,
   printSingleCpu,
+  pushSysMemData,
   printMem,
+  pushSysNetworkData,
   printNetwork,
+  pushProcCpuData,
   printPerfCpu,
+  pushProcMemData,
   printPerfMem,
+  pushProcFPSData,
   printProcFps,
+  pushProcThreadData,
   printProcThread,
+  clearPerf,
 });
 const switchTab = (e) => {
   if (e.index == 1) {
     nextTick(() => {
       const memChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `perfMemChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `perfMemChart`
+          )
       );
       memChart.resize();
       const cpuChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `perfCpuChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `perfCpuChart`
+          )
       );
       cpuChart.resize();
       const fpsChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `sysFpsChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `sysFpsChart`
+          )
       );
       fpsChart.resize();
       const threadChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `procThreadChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `procThreadChart`
+          )
       );
       threadChart.resize();
     });
   } else {
     nextTick(() => {
       const memChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `sysMemChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `sysMemChart`
+          )
       );
       memChart.resize();
       const cpuChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `sysSingleCpuChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `sysSingleCpuChart`
+          )
       );
       cpuChart.resize();
       const cpuChart2 = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `sysCpuChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `sysCpuChart`
+          )
       );
       cpuChart2.resize();
       const networkChart = echarts.getInstanceByDom(
-        document.getElementById(
-          `${props.rid}-${props.cid}-${props.did}-` + `sysNetworkChart`
-        )
+          document.getElementById(
+              `${props.rid}-${props.cid}-${props.did}-` + `sysNetworkChart`
+          )
       );
       networkChart.resize();
     });
@@ -804,54 +857,54 @@ const switchTab = (e) => {
 
 <template>
   <el-tabs
-    style="margin-top: 10px"
-    stretch
-    type="border-card"
-    @tab-click="switchTab"
+      style="margin-top: 10px"
+      stretch
+      type="border-card"
+      @tab-click="switchTab"
   >
     <el-tab-pane label="System PerfMon">
       <el-row :gutter="10">
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'sysSingleCpuChart'"
-              v-loading="sysCpu.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'sysSingleCpuChart'"
+                v-loading="sysCpu.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'sysCpuChart'"
-              v-loading="sysCpu.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'sysCpuChart'"
+                v-loading="sysCpu.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'sysMemChart'"
-              v-loading="sysMem.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'sysMemChart'"
+                v-loading="sysMem.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'sysNetworkChart'"
-              v-loading="sysNetwork.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'sysNetworkChart'"
+                v-loading="sysNetwork.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
@@ -862,44 +915,44 @@ const switchTab = (e) => {
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'perfCpuChart'"
-              v-loading="procCpu.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'perfCpuChart'"
+                v-loading="procCpu.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'perfMemChart'"
-              v-loading="procMem.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'perfMemChart'"
+                v-loading="procMem.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'sysFpsChart'"
-              v-loading="procFps.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'sysFpsChart'"
+                v-loading="procFps.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card style="margin-top: 10px">
             <div
-              :id="rid + '-' + cid + '-' + did + '-' + 'procThreadChart'"
-              v-loading="procThread.length === 0"
-              :element-loading-text="$t('perf.emptyData')"
-              element-loading-spinner="el-icon-box"
-              style="width: 100%; height: 350px"
+                :id="rid + '-' + cid + '-' + did + '-' + 'procThreadChart'"
+                v-loading="procThread.length === 0"
+                :element-loading-text="$t('perf.emptyData')"
+                element-loading-spinner="el-icon-box"
+                style="width: 100%; height: 350px"
             ></div>
           </el-card>
         </el-col>
diff --git a/src/views/ResultDetail.vue b/src/views/ResultDetail.vue
index ee2fbdb8..56d35da0 100644
--- a/src/views/ResultDetail.vue
+++ b/src/views/ResultDetail.vue
@@ -227,6 +227,36 @@ const getPerform = () => {
 
       if (lastDevice.value.platform === 1) {
         const key = `${route.params.resultId}-${caseId.value}-${deviceId.value}-androidPerfChart`;
+        for (const i in resp.data) {
+          const r = JSON.parse(resp.data[i].log);
+          if (!r.type){
+            if (r.process) {
+              if (r.process.cpuInfo) {
+                androidPerfChartMap[key].pushProcCpuData(r.process.cpuInfo);
+              }
+              if (r.process.memInfo) {
+                androidPerfChartMap[key].pushProcMemData(r.process.memInfo);
+              }
+              if (r.process.fpsInfo) {
+                androidPerfChartMap[key].pushProcFPSData(r.process.fpsInfo);
+              }
+              if (r.process.threadInfo) {
+                androidPerfChartMap[key].pushProcThreadData(r.process.threadInfo);
+              }
+            }
+            if (r.system) {
+              if (r.system.cpuInfo) {
+                androidPerfChartMap[key].pushSysCpuData(r.system.cpuInfo);
+              }
+              if (r.system.memInfo) {
+                androidPerfChartMap[key].pushSysMemData(r.system.memInfo);
+              }
+              if (r.system.networkInfo) {
+                androidPerfChartMap[key].pushSysNetworkData(r.system.networkInfo);
+              }
+            }
+          }
+        }
         androidPerfChartMap[key].printPerfCpu();
         androidPerfChartMap[key].printPerfMem();
         androidPerfChartMap[key].printProcFps();