Skip to content

E
evm-store
Commit e1bc1a28 authored by wanli's avatar wanli
Browse files
Options

✨ feat: 更新监视器

parent 4842c1df
Show whitespace changes
Inline Side-by-side
Showing with 205 additions and 462 deletions
backend/controller/monitor.py
View file @ e1bc1a28
...@@ -10,6 +10,7 @@ import jwt ...@@ -10,6 +10,7 @@ import jwt
import json import json
import time import time
import logging import logging
from copy import deepcopy
from app import config from app import config
from model.monitor import session, System, Lvgl, Evm, Image, Device, Request, User from model.monitor import session, System, Lvgl, Evm, Image, Device, Request, User
...@@ -237,26 +238,31 @@ class MonitorManager(object): ...@@ -237,26 +238,31 @@ class MonitorManager(object):
return None return None
if msg.get("request"): if msg.get("request"):
msg.get("request").update({ "watch": watch_id }) obj = deepcopy(msg.get("request"))
result = Request(**msg.get("request")) obj.update({ "watch": watch_id })
result = Request(**obj)
session.add(result) session.add(result)
session.flush() session.flush()
session.commit() session.commit()
if msg.get("system"): if msg.get("system"):
msg.get("system").update({ "watch": watch_id }) obj = deepcopy(msg.get("system"))
systemResource.post(msg.get("system")) obj.update({ "watch": watch_id })
systemResource.post(obj)
if msg.get("lvgl"): if msg.get("lvgl"):
msg.get("lvgl").update({ "watch": watch_id }) obj = deepcopy(msg.get("lvgl"))
lvglResource.post(msg.get("lvgl")) obj.update({ "watch": watch_id })
lvglResource.post(obj)
if msg.get("evm"): if msg.get("evm"):
msg.get("evm").update({ "watch": watch_id }) obj = deepcopy(msg.get("evm"))
evmResource.post(msg.get("evm")) obj.update({ "watch": watch_id })
evmResource.post(obj)
if msg.get("image"): if msg.get("image"):
imageResource.post_array(msg.get("image"), watch_id) obj = deepcopy(msg.get("image"))
imageResource.post_array(obj, watch_id)
def check_client(self, instance): def check_client(self, instance):
index = -1 index = -1
...@@ -267,7 +273,6 @@ class MonitorManager(object): ...@@ -267,7 +273,6 @@ class MonitorManager(object):
return index return index
def receive_message(self, instance, message): def receive_message(self, instance, message):
print(instance._clients, message)
if message.get("type") and message.get("token"): if message.get("type") and message.get("token"):
# 获取token值，检验正确与否，获取uuid # 获取token值，检验正确与否，获取uuid
payload = jwt.decode(message.get("token"), config['SECRET_KEY'], verify=True, algorithms=['HS256'], options={ 'verify_aud': False }) payload = jwt.decode(message.get("token"), config['SECRET_KEY'], verify=True, algorithms=['HS256'], options={ 'verify_aud': False })
...@@ -297,8 +302,6 @@ class MonitorManager(object): ...@@ -297,8 +302,6 @@ class MonitorManager(object):
return json.dumps({ 'code': 200, 'data': None, 'msg': 'unkonw message packet, disconnect by server' }) return json.dumps({ 'code': 200, 'data': None, 'msg': 'unkonw message packet, disconnect by server' })
def broadcast_message(self, clients, message): def broadcast_message(self, clients, message):
print(clients, message)
if not message.get("imei"): if not message.get("imei"):
return False return False
......
frontend/src/utils/eventBus.js
View file @ e1bc1a28
/*
* @Author: your name
* @Date: 2021-07-01 15:02:16
* @LastEditTime: 2021-08-07 18:29:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \evm-store\frontend\src\utils\eventBus.js
*/
import Vue from "vue"; import Vue from "vue";
// import store from "@/store"; // import store from "@/store";
export let wsNotify = new WebSocket( export let wsNotify = new WebSocket(
`ws://${window.location.hostname}:3000/ws/v1/notify` `ws://localhost:3000/ws/v1/notify`
); );
window.wsNotify = wsNotify; window.wsNotify = wsNotify;
...@@ -19,9 +11,9 @@ wsNotify.eventBus = new Vue(); ...@@ -19,9 +11,9 @@ wsNotify.eventBus = new Vue();
wsNotify.eventBus.$on("reconnect", () => { wsNotify.eventBus.$on("reconnect", () => {
wsNotify = new WebSocket( wsNotify = new WebSocket(
`ws://${window.location.hostname}:3000/ws/v1/notify` `ws://localhost:3000/ws/v1/notify`
); );
}) });
// let timer = null; // let timer = null;
......
frontend/src/views/system/bytecode-tool.vue
View file @ e1bc1a28
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="el-upload__text"> <div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em> 将文件拖到此处，或<em>点击上传</em>
</div> </div>
<div class="el-upload__tip" slot="tip">请选择evue文件</div> <div class="el-upload__tip" slot="tip">请选择文件（目前支持.js/.evue格式）</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
......
frontend/src/views/system/components/EvmChart.vue
View file @ e1bc1a28
...@@ -9,40 +9,15 @@ import resize from "./mixins/resize"; ...@@ -9,40 +9,15 @@ import resize from "./mixins/resize";
import { getDateTimeString } from "@/utils/utils"; import { getDateTimeString } from "@/utils/utils";
import { wsNotify } from "@/utils/eventBus.js"; import { wsNotify } from "@/utils/eventBus.js";
// function randomData() {
// now = new Date(+now + oneDay);
// value = value + Math.random() * 21 - 10;
// return {
// name: "EVM",
// value: [
// [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/") +
// " " +
// [now.getHours(), now.getMinutes() + 1, now.getSeconds()].join(":"),
// Math.round(value),
// ],
// };
// }
// const dataList = [];
// let now = +new Date(1997, 9, 3);
// const oneDay = 24 * 3600 * 1000;
// var value = Math.random() * 1000;
// for (var i = 0; i < 1000; i++) {
// dataList.push(randomData());
// }
let chart = null; let chart = null;
const seriesData = { const seriesData = {
evue_free_size: [], evue_free_size: [],
evue_total_size: [],
evue_used_size: [], evue_used_size: [],
ext_total_size: [],
ext_used_size: [],
heap_total_size: [],
heap_used_size: [], heap_used_size: [],
stack_total_size: [], stack_used_size: [],
stack_used_size: [] ext_used_size: [],
app_size: []
}; };
export default { export default {
......
frontend/src/views/system/components/LvglChart.vue
View file @ e1bc1a28
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons");
import resize from "./mixins/resize"; import resize from "./mixins/resize";
import { getDateTimeString } from "@/utils/utils"; import { getDateTimeString } from "@/utils/utils";
import { wsNotify } from "@/utils/eventBus.js"; import { wsNotify } from "@/utils/eventBus.js";
...@@ -44,96 +44,11 @@ export default { ...@@ -44,96 +44,11 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
dataList: {
type: Array,
required: false,
default: () => [],
},
}, },
data() { data() {
return { return {
series: [ series: [],
{ legendData: Object.keys(seriesData),
name: "frag_pct",
type: "line",
showSymbol: false,
emphasis: {
scale: false,
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.frag_pct,
},
{
name: "free_biggest_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_biggest_size,
},
{
name: "free_cnt",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_cnt,
},
{
name: "free_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_size,
},
{
name: "total_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.total_size,
},
{
name: "used_cnt",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.used_cnt,
},
{
name: "used_pct",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.used_pct,
},
],
legendData: [
"frag_pct",
"free_biggest_size",
"free_cnt",
"free_size",
"total_size",
"used_cnt",
"used_pct",
],
}; };
}, },
watch: { watch: {
...@@ -143,14 +58,23 @@ export default { ...@@ -143,14 +58,23 @@ export default {
this.handleMessage(val); this.handleMessage(val);
}, },
}, },
dataList: {
deep: true,
handler(val) {
if (val.length > 0) this.handleData(val);
},
},
}, },
mounted() { mounted() {
let array = [];
Object.keys(seriesData).forEach((k) => {
array.push({
name: k,
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData[k],
});
});
this.series = array;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(); this.initChart();
}); });
......
frontend/src/views/system/components/SystemChart.vue
View file @ e1bc1a28
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme require("echarts/theme/macarons");
import resize from "./mixins/resize"; import resize from "./mixins/resize";
import { getDateTimeString } from "@/utils/utils"; import { getDateTimeString } from "@/utils/utils";
import { wsNotify } from "@/utils/eventBus.js"; import { wsNotify } from "@/utils/eventBus.js";
...@@ -15,7 +15,7 @@ const seriesData = { ...@@ -15,7 +15,7 @@ const seriesData = {
used_space_size: [], used_space_size: [],
}; };
let chart = null let chart = null;
export default { export default {
mixins: [resize], mixins: [resize],
...@@ -40,47 +40,10 @@ export default { ...@@ -40,47 +40,10 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
dataList: {
type: Array,
required: false,
default: () => [],
},
}, },
data() { data() {
return { return {
series: [ series: [],
{
name: "free_size",
type: "line",
showSymbol: false,
emphasis: {
scale: false,
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_size,
},
{
name: "free_space_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_space_size,
},
{
name: "used_space_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.used_space_size,
},
],
legendData: Object.keys(seriesData), legendData: Object.keys(seriesData),
}; };
}, },
...@@ -91,14 +54,23 @@ export default { ...@@ -91,14 +54,23 @@ export default {
this.handleMessage(val); this.handleMessage(val);
}, },
}, },
dataList: {
deep: true,
handler(val) {
if (val.length > 0) this.handleData(val);
},
},
}, },
mounted() { mounted() {
let array = [];
Object.keys(seriesData).forEach((k) => {
array.push({
name: k,
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData[k],
});
});
this.series = array;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(); this.initChart();
}); });
...@@ -113,13 +85,13 @@ export default { ...@@ -113,13 +85,13 @@ export default {
}); });
wsNotify.eventBus.$on("resize", () => { wsNotify.eventBus.$on("resize", () => {
if (chart) chart.resize() if (chart) chart.resize();
}); });
wsNotify.eventBus.$on("clear-system-chart", () => { wsNotify.eventBus.$on("clear-system-chart", () => {
chart.clear() chart.clear();
this.setOptions() this.setOptions();
}) });
}, },
beforeDestroy() { beforeDestroy() {
if (!chart) { if (!chart) {
...@@ -130,11 +102,11 @@ export default { ...@@ -130,11 +102,11 @@ export default {
}, },
methods: { methods: {
handleData(data) { handleData(data) {
Object.keys(seriesData).forEach(key => { Object.keys(seriesData).forEach((key) => {
seriesData[key] = [] seriesData[key] = [];
}); });
this.series.forEach(item => { this.series.forEach((item) => {
item.data = [] item.data = [];
}); });
// chart.dispose(); // chart.dispose();
chart.setOption({ series: this.series }); chart.setOption({ series: this.series });
...@@ -180,9 +152,7 @@ export default { ...@@ -180,9 +152,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "time", type: "time",
splitLine: { splitLine: {},
},
axisLabel: { axisLabel: {
formatter: "{HH}:{mm}:{ss}", formatter: "{HH}:{mm}:{ss}",
}, },
...@@ -190,9 +160,7 @@ export default { ...@@ -190,9 +160,7 @@ export default {
yAxis: { yAxis: {
type: "value", type: "value",
// boundaryGap: [0, "100%"], // boundaryGap: [0, "100%"],
splitLine: { splitLine: {},
},
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -207,7 +175,7 @@ export default { ...@@ -207,7 +175,7 @@ export default {
selected: { selected: {
free_size: true, free_size: true,
free_space_size: true, free_space_size: true,
used_space_size: false used_space_size: false,
}, },
}, },
series: this.series, series: this.series,
......
frontend/src/views/system/monitor.vue
View file @ e1bc1a28
...@@ -73,25 +73,9 @@ ...@@ -73,25 +73,9 @@
> >
<p class="item-title">SYSTEM</p> <p class="item-title">SYSTEM</p>
<div class="list-element"> <div class="list-element">
<div> <div v-for="(field, index) in Object.keys(system)" :key="index">
<label>host</label> <label>{{ field }}</label>
<p>{{ systemList.host }}</p> <p>{{ system[field] }}</p>
</div>
<div>
<label>timestamp</label>
<p style="font-size: 13px;">{{ systemList.timestamp }}</p>
</div>
<div>
<label>free_size</label>
<p>{{ systemList.free_size }}(KB)</p>
</div>
<div>
<label>free_space_size</label>
<p>{{ systemList.free_space_size }}(KB)</p>
</div>
<div>
<label>used_space_size</label>
<p>{{ systemList.used_space_size }}(KB)</p>
</div> </div>
</div> </div>
</grid-item> </grid-item>
...@@ -109,41 +93,9 @@ ...@@ -109,41 +93,9 @@
> >
<p class="item-title">EVM</p> <p class="item-title">EVM</p>
<div class="list-element"> <div class="list-element">
<div style="background: yellow;"> <div v-for="(field, index) in Object.keys(evm)" :key="index" :style="{background: colors[index]}">
<label>evue_free_size</label> <label>{{ field }}</label>
<p>{{ evmList.evue_free_size }}(KB)</p> <p>{{ evm[field] }}{{ field | retouch }}</p>
</div>
<div style="background: orange;">
<label>evue_total_size</label>
<p>{{ evmList.evue_total_size }}(KB)</p>
</div>
<div style="background: orange;">
<label>evue_used_size</label>
<p>{{ evmList.evue_used_size }}(KB)</p>
</div>
<div style="background: yellowgreen;">
<label>ext_total_size</label>
<p>{{ evmList.ext_total_size }}(KB)</p>
</div>
<div style="background: yellowgreen;">
<label>ext_used_size</label>
<p>{{ evmList.ext_used_size }}(KB)</p>
</div>
<div style="background: paleturquoise;">
<label>heap_total_size</label>
<p>{{ evmList.heap_total_size }}(KB)</p>
</div>
<div style="background: paleturquoise;">
<label>heap_used_size</label>
<p>{{ evmList.heap_used_size }}(KB)</p>
</div>
<div style="background: darksalmon;">
<label>stack_total_size</label>
<p>{{ evmList.stack_total_size }}(KB)</p>
</div>
<div style="background: darksalmon;">
<label>stack_used_size</label>
<p>{{ evmList.stack_used_size }}(KB)</p>
</div> </div>
</div> </div>
</grid-item> </grid-item>
...@@ -161,33 +113,9 @@ ...@@ -161,33 +113,9 @@
> >
<p class="item-title">LVGL</p> <p class="item-title">LVGL</p>
<div class="list-element"> <div class="list-element">
<div> <div v-for="(field, index) in Object.keys(lvgl)" :key="index">
<label>total_size</label> <label>{{ field }}</label>
<p>{{ lvglList.total_size }}</p> <p>{{ lvgl[field] }}{{ field | retouch }}</p>
</div>
<div>
<label>free_cnt</label>
<p>{{ lvglList.free_cnt }}</p>
</div>
<div>
<label>free_size</label>
<p>{{ lvglList.free_size }}(KB)</p>
</div>
<div>
<label>free_biggest_size</label>
<p>{{ lvglList.free_biggest_size }}(KB)</p>
</div>
<div>
<label>used_cnt</label>
<p>{{ lvglList.used_cnt }}</p>
</div>
<div>
<label>used_pct</label>
<p>{{ lvglList.used_pct }}(%)</p>
</div>
<div>
<label>frag_pct</label>
<p>{{ lvglList.frag_pct }}(%)</p>
</div> </div>
</div> </div>
</grid-item> </grid-item>
...@@ -221,29 +149,47 @@ ...@@ -221,29 +149,47 @@
show-overflow-tooltip show-overflow-tooltip
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="length" prop="png_total_count"
min-width="150" label="png_total_count"
min-width="110"
show-overflow-tooltip
></el-table-column>
<el-table-column
label="heap_used_size"
min-width="110"
show-overflow-tooltip show-overflow-tooltip
> >
<template slot-scope="scope" <template slot-scope="scope"
>{{ scope.row.length }}(KB)</template >{{ scope.row.heap_used_size }}(KB)</template
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="png_file_size" label="stack_used_size"
min-width="150" min-width="110"
show-overflow-tooltip show-overflow-tooltip
> >
<template slot-scope="scope" <template slot-scope="scope"
>{{ scope.row.png_file_size }}(KB)</template >{{ scope.row.stack_used_size }}(KB)</template
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="png_total_count" label="ext_used_size"
label="png_total_count" min-width="100"
min-width="150"
show-overflow-tooltip show-overflow-tooltip
></el-table-column> >
<template slot-scope="scope"
>{{ scope.row.ext_used_size }}(KB)</template
>
</el-table-column>
<el-table-column
label="evue file"
min-width="80"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.length }}(KB)</template
>
</el-table-column>
<el-table-column <el-table-column
label="png_uncompressed_size" label="png_uncompressed_size"
min-width="150" min-width="150"
...@@ -253,6 +199,15 @@ ...@@ -253,6 +199,15 @@
>{{ scope.row.png_uncompressed_size }}(KB)</template >{{ scope.row.png_uncompressed_size }}(KB)</template
> >
</el-table-column> </el-table-column>
<el-table-column
label="app_size"
min-width="110"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.app_size }}(KB)</template
>
</el-table-column>
</el-table> </el-table>
</div> </div>
</grid-item> </grid-item>
...@@ -285,8 +240,7 @@ ...@@ -285,8 +240,7 @@
label="origin size" label="origin size"
width="100" width="100"
></el-table-column> ></el-table-column>
<el-table-column prop="ratio" label="ratio" width="100"> <el-table-column prop="ratio" label="ratio" width="100"></el-table-column>
</el-table-column>
</el-table> </el-table>
</div> </div>
</grid-item> </grid-item>
...@@ -302,7 +256,7 @@ ...@@ -302,7 +256,7 @@
@container-resized="containerResizedEvent" @container-resized="containerResizedEvent"
@moved="movedEvent" @moved="movedEvent"
> >
<EvmChart :chartData="evm" :dataList="evmHistory"></EvmChart> <EvmChart :chartData="evm"></EvmChart>
</grid-item> </grid-item>
<grid-item <grid-item
:x="0" :x="0"
...@@ -328,8 +282,7 @@ ...@@ -328,8 +282,7 @@
prop="fileSize" prop="fileSize"
label="应用大小(KB)" label="应用大小(KB)"
></el-table-column> ></el-table-column>
<el-table-column prop="fileCount" label="文件个数" width="100"> <el-table-column prop="fileCount" label="文件个数" width="100"></el-table-column>
</el-table-column>
</el-table> </el-table>
</div> </div>
</grid-item> </grid-item>
...@@ -347,7 +300,6 @@ ...@@ -347,7 +300,6 @@
> >
<SystemChart <SystemChart
:chartData="system" :chartData="system"
:dataList="systemHistory"
></SystemChart> ></SystemChart>
</grid-item> </grid-item>
<grid-item <grid-item
...@@ -362,7 +314,7 @@ ...@@ -362,7 +314,7 @@
@container-resized="containerResizedEvent" @container-resized="containerResizedEvent"
@moved="movedEvent" @moved="movedEvent"
> >
<LvglChart :chartData="lvgl" :dataList="lvglHistory"></LvglChart> <LvglChart :chartData="lvgl"></LvglChart>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
</div> </div>
...@@ -389,8 +341,7 @@ const dbObject = { ...@@ -389,8 +341,7 @@ const dbObject = {
version: 1, // 版本号 version: 1, // 版本号
primaryKey: "id", // 主键 primaryKey: "id", // 主键
keyNames: [ keyNames: [
{ { // 需要存储的数据字段对象
// 需要存储的数据字段对象
key: "system.timestamp", // 字段名 key: "system.timestamp", // 字段名
unique: false, // 当前这条数据是否能重复 (最常用) 默认false unique: false, // 当前这条数据是否能重复 (最常用) 默认false
}, },
...@@ -411,20 +362,40 @@ function isNumber(value) { ...@@ -411,20 +362,40 @@ function isNumber(value) {
function byteToKiloByte(obj) { function byteToKiloByte(obj) {
Object.prototype.toString.call(obj) === "[object Object]" && Object.keys(obj).forEach(k => { Object.prototype.toString.call(obj) === "[object Object]" && Object.keys(obj).forEach(k => {
if (k.indexOf("size") !== -1 && isNumber(obj[k])) { if ((k.indexOf("size") !== -1 || k === "length") && isNumber(obj[k])) {
obj[k] = Math.ceil(obj[k] / 1024) obj[k] = Math.ceil(obj[k] / 1024)
} }
}) })
} }
function calculate(obj, name, list) {
Object.keys(obj).forEach((k) => {
result[name + "First"][k] = 0;
result[name + "Last"][k] = 0;
let first = 0,
last = Date.now();
const t = list.map((item) => {
if (item.ts > first) {
first = item.ts;
result[name + "First"][k] = item[k];
}
if (item.ts < last) {
last = item.ts;
result[name + "Last"][k] = item[k];
}
return item[k];
});
result[name + "Max"][k] = Math.max.apply(null, t);
result[name + "Min"][k] = Math.min.apply(null, t);
result[name + "Avg"][k] = Math.ceil(
t.reduce((prev, curr) => prev + curr) / t.length
);
});
}
function resetResult() { function resetResult() {
return { return {
systemMax: {},
systemMin: {},
systemAvg: {},
systemFirst: {},
systemLast: {},
evmMax: {}, evmMax: {},
evmMin: {}, evmMin: {},
evmAvg: {}, evmAvg: {},
...@@ -437,6 +408,12 @@ function resetResult() { ...@@ -437,6 +408,12 @@ function resetResult() {
lvglFirst: {}, lvglFirst: {},
lvglLast: {}, lvglLast: {},
systemMax: {},
systemMin: {},
systemAvg: {},
systemFirst: {},
systemLast: {},
systemImg: null, systemImg: null,
evmImg: null, evmImg: null,
lvglImg: null, lvglImg: null,
...@@ -448,27 +425,6 @@ function resetResult() { ...@@ -448,27 +425,6 @@ function resetResult() {
// 统计使用 // 统计使用
const result = resetResult(); const result = resetResult();
const system = {
free_size: null,
free_space_size: null,
used_space_size: null,
},
evm = {
heap_total_size: null,
heap_used_size: null,
stack_total_size: null,
stack_used_size: null,
},
lvgl = {
frag_pct: null,
free_biggest_size: null,
free_cnt: null,
free_size: null,
total_size: null,
used_cnt: null,
used_pct: null,
};
export default { export default {
name: "Monitor", name: "Monitor",
data() { data() {
...@@ -477,30 +433,16 @@ export default { ...@@ -477,30 +433,16 @@ export default {
pngList: [], pngList: [],
globalData: null, globalData: null,
device: null, device: null,
devices: {},
deviceList: null, deviceList: null,
system: { system: {
host: null,
timestamp: null,
free_size: null, free_size: null,
free_space_size: null, free_space_size: null,
used_space_size: null, used_space_size: null,
}, },
systemList: {
host: "",
timestamp: "",
free_size: 0,
free_space_size: 0,
used_space_size: 0
},
systemHistory: [],
evmHistory: [],
lvglHistory: [],
evm: { evm: {
heap_total_size: null, app_size: 0,
heap_used_size: null,
stack_total_size: null,
stack_used_size: null,
},
evmList: {
evue_free_size: 0, evue_free_size: 0,
evue_total_size: 0, evue_total_size: 0,
evue_used_size: 0, evue_used_size: 0,
...@@ -511,18 +453,18 @@ export default { ...@@ -511,18 +453,18 @@ export default {
stack_total_size: 0, stack_total_size: 0,
stack_used_size: 0, stack_used_size: 0,
}, },
lvgl: {}, lvgl: {
lvglList: { frag_pct: 0,
total_size: 0, free_biggest_size: 0,
free_cnt: 0, free_cnt: 0,
free_size: 0, free_size: 0,
free_biggest_size: 0, total_size: 0,
used_cnt: 0, used_cnt: 0,
used_pct: 0, used_pct: 0
frag_pct: 0
}, },
image: {}, image: {},
imageList: [], imageList: [],
colors: ["yellow", "yellow", "yellowgreen", "yellowgreen", "orange", "orange", "paleturquoise", "paleturquoise", "paleturquoise", "darksalmon"],
pngShowMode: true, pngShowMode: true,
currentPngList: [], currentPngList: [],
socket: null, socket: null,
...@@ -545,6 +487,15 @@ export default { ...@@ -545,6 +487,15 @@ export default {
filters: { filters: {
byte2kb(val) { byte2kb(val) {
return Math.ceil(val / 1024) return Math.ceil(val / 1024)
},
retouch(key) {
if (key.indexOf("size") > -1) {
return "KB"
} else if (key.indexOf("pct") > -1) {
return "%"
} else {
return ""
}
} }
}, },
components: { components: {
...@@ -628,77 +579,9 @@ export default { ...@@ -628,77 +579,9 @@ export default {
result.appList = appList; result.appList = appList;
Object.keys(evm).forEach((k) => { calculate(this.evm, "evm", evmList);
result.evmFirst[k] = 0; calculate(this.lvgl, "lvgl", lvglList);
result.evmLast[k] = 0; calculate(this.system, "system", systemList);
let first = 0,
last = Date.now();
const t = evmList.map((item) => {
if (item.ts > first) {
first = item.ts;
result.evmFirst[k] = item[k];
}
if (item.ts < last) {
last = item.ts;
result.evmLast[k] = item[k];
}
return item[k];
});
result.evmMax[k] = Math.max.apply(null, t);
result.evmMin[k] = Math.min.apply(null, t);
result.evmAvg[k] = Math.ceil(
t.reduce((prev, curr) => prev + curr) / t.length
);
});
Object.keys(lvgl).forEach((k) => {
result.lvglFirst[k] = 0;
result.lvglLast[k] = 0;
let first = 0,
last = Date.now();
const t = lvglList.map((item) => {
if (item.ts > first) {
first = item.ts;
result.lvglFirst[k] = item[k];
}
if (item.ts < last) {
last = item.ts;
result.lvglLast[k] = item[k];
}
return item[k];
});
result.lvglMax[k] = Math.max.apply(null, t);
result.lvglMin[k] = Math.min.apply(null, t);
result.lvglAvg[k] = Math.ceil(
t.reduce((prev, curr) => prev + curr) / t.length
);
});
Object.keys(system).forEach((k) => {
result.systemFirst[k] = 0;
result.systemLast[k] = 0;
let first = 0,
last = Date.now();
const t = systemList.map((item) => {
if (item.ts > first) {
first = item.ts;
result.systemFirst[k] = item[k];
}
if (item.ts < last) {
last = item.ts;
result.systemLast[k] = item[k];
}
return item[k];
});
result.systemMax[k] = Math.max.apply(null, t);
result.systemMin[k] = Math.min.apply(null, t);
result.systemAvg[k] = Math.ceil(
t.reduce((prev, curr) => prev + curr) / t.length
);
});
result.imei = this.globalData.imei; result.imei = this.globalData.imei;
result.timestamp = this.globalData.system.timestamp; result.timestamp = this.globalData.system.timestamp;
...@@ -787,9 +670,9 @@ export default { ...@@ -787,9 +670,9 @@ export default {
}) })
.then((res) => { .then((res) => {
if (res.type == "object") { if (res.type == "object") {
this.evmList = res.data.evm; this.evm = res.data.evm;
this.lvglList = res.data.lvgl; this.lvgl = res.data.lvgl;
this.imageList = res.data.image; this.image = res.data.image;
} }
}) })
.catch((err) => { .catch((err) => {
...@@ -896,19 +779,14 @@ export default { ...@@ -896,19 +779,14 @@ export default {
// 清空各个表格数据 // 清空各个表格数据
this.imageList = []; this.imageList = [];
this.pngList = []; this.pngList = [];
// this.processData(this.devices[this.device]);
// this.resetData();
}, },
resetData(m) { resetData(m) {
wsNotify.eventBus.$emit("resize"); if (!m) return;
this.evmList = { ...m.evm }; wsNotify.eventBus.$emit("resize");
this.lvglList = { ...m.lvgl };
this.systemList = { imei: m.imei, ...m.system, };
// 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新 // 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
let uris = []; let uris = [], pngSize = 0;
this.imageList.forEach((item) => { this.imageList.forEach((item) => {
item.highlight = false; item.highlight = false;
uris.push(item.uri); uris.push(item.uri);
...@@ -921,33 +799,37 @@ export default { ...@@ -921,33 +799,37 @@ export default {
item.highlight = false; item.highlight = false;
} }
const target = this.imageList.find((img) => img.uri === item.uri); if (m.evm) {
if (target) { item.heap_used_size = m.evm.heap_used_size
target.length = item.length; item.stack_used_size = m.evm.stack_used_size
target.png_total_count = item.png_total_count; item.ext_used_size = m.evm.ext_used_size
target.highlight = item.highlight; } else {
if (item.png_uncompressed_size) { item.heap_used_size = 0;
if (item.png_uncompressed_size !== target.png_uncompressed_size) { item.stack_used_size = 0;
target.png_uncompressed_size = item.png_uncompressed_size; item.ext_used_size = 0;
if (this.pngShowMode) this.pngList = item.png_detail || [];
} }
if (item.png_detail && Array.isArray(item.png_detail)) {
pngSize += item.png_detail.reduce((total, png) => total + png.uncompressed_size, 0)
} }
if ( item.app_size = item.heap_used_size + item.stack_used_size + item.ext_used_size + Math.ceil(pngSize / 1024)
item.png_file_size && item.png_uncompressed_size = Math.ceil(pngSize / 1024)
item.png_file_size !== target.png_file_size
) const target = this.imageList.find((img) => img.uri === item.uri);
target.png_file_size = item.png_file_size; if (target) {
Object.keys(item).forEach(k => target[k] = item[k])
} else { } else {
this.imageList.push(item); this.imageList.push(item);
} }
}); });
if (m) {
if (m.evm) this.evm = m.evm; if (m.evm) this.evm = m.evm;
if (m.lvgl) this.lvgl = m.lvgl; if (m.lvgl) this.lvgl = m.lvgl;
if (m.image) this.image = m.image; if (m.image) this.image = m.image;
if (m.system) this.system = m.system; if (m.system) this.system = m.system;
}
this.evm.app_size = this.evm.heap_used_size + this.evm.stack_used_size + this.evm.ext_used_size + Math.ceil(pngSize / 1024);
if (this.system.timestamp) this.system.timestamp = this.system.timestamp.substring(11, 20);
}, },
}, },
mounted() {}, mounted() {},
...@@ -982,7 +864,6 @@ export default { ...@@ -982,7 +864,6 @@ export default {
else if (res.type === "lvgl") result.lvglImg = res.data; else if (res.type === "lvgl") result.lvglImg = res.data;
else if (res.type === "system") result.systemImg = res.data; else if (res.type === "system") result.systemImg = res.data;
}); });
wsNotify.eventBus.$on("open", (message) => { wsNotify.eventBus.$on("open", (message) => {
this.sendMsg(); this.sendMsg();
this.$nextTick(() => { this.$nextTick(() => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment