Skip to content

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

✨ feat(): 资源监控页面添加报告导出功能

parent 9f9b222a
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 31 deletions
frontend/src/views/system/components/EvmChart.vue
View file @ cca4da40
......@@ -31,7 +31,7 @@ import { wsNotify } from "@/utils/eventBus.js";
// dataList.push(randomData());
// }
let chart = null
let chart = null;
const seriesData = {
heap_total_size: [],
......@@ -131,12 +131,21 @@ export default {
this.initChart();
});
wsNotify.eventBus.$on("exportImg", () => {
let picInfo = chart.getDataURL({
type: "png",
pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
backgroundColor: "#fff",
}); //获取到的是一串base64信息
wsNotify.eventBus.$emit("exported", { type: "evm", data: picInfo });
});
wsNotify.eventBus.$on("resize", () => {
if (chart) chart.resize()
if (chart) chart.resize();
});
wsNotify.eventBus.$on("clear-evm-chart", () => {
this.setOptions()
this.setOptions();
});
},
beforeDestroy() {
......@@ -159,7 +168,7 @@ export default {
chart.setOption({ series: this.series });
},
handleMessage(data) {
if (!data || data.length == 0) this.cleanData()
if (!data || data.length == 0) this.cleanData();
// 这里面应该增加一个数组长度判断，当超过了多少个之后，弹出数组第一项，防止数组内存溢出
// seriesData[k].shift()
Object.keys(data).forEach((k) => {
......
frontend/src/views/system/components/LvglChart.vue
View file @ cca4da40
......@@ -155,6 +155,15 @@ export default {
this.initChart();
});
wsNotify.eventBus.$on("exportImg", () => {
let picInfo = chart.getDataURL({
type: "png",
pixelRatio: 1.5,
backgroundColor: "#fff",
});
wsNotify.eventBus.$emit("exported", { type: "lvgl", data: picInfo });
});
wsNotify.eventBus.$on("resize", () => {
if (chart) chart.resize()
});
......
frontend/src/views/system/components/SystemChart.vue
View file @ cca4da40
......@@ -103,6 +103,15 @@ export default {
this.initChart();
});
wsNotify.eventBus.$on("exportImg", () => {
let picInfo = chart.getDataURL({
type: "png",
pixelRatio: 1.5,
backgroundColor: "#fff",
});
wsNotify.eventBus.$emit("exported", { type: "system", data: picInfo });
});
wsNotify.eventBus.$on("resize", () => {
if (chart) chart.resize()
});
......
frontend/src/views/system/monitor.vue
View file @ cca4da40
......@@ -399,7 +399,7 @@ import LvglChart from "./components/LvglChart";
import SystemChart from "./components/SystemChart";
import { GridLayout, GridItem } from "vue-grid-layout";
import { wsNotify } from "@/utils/eventBus.js";
import { deepClone } from "@/utils/index"
import { deepClone, download } from "@/utils/index";
import Database from "@/utils/indexedDB";
const dbObject = {
......@@ -422,6 +422,58 @@ const dbObject = {
const indexedDb = Database();
let monitor = new indexedDb(dbObject);
function resetResult() {
return {
systemMax: {},
systemMin: {},
systemAvg: {},
systemFirst: {},
systemLast: {},
evmMax: {},
evmMin: {},
evmAvg: {},
evmFirst: {},
evmLast: {},
lvglMax: {},
lvglMin: {},
lvglAvg: {},
lvglFirst: {},
lvglLast: {},
systemImg: null,
evmImg: null,
lvglImg: null,
imageList: [],
};
}
const result = resetResult();
const system = {
free_size: null,
free_space_size: null,
used_space_size: null,
},
evm = {
heap_map_size: null,
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 {
name: "Monitor",
data() {
......@@ -432,12 +484,22 @@ export default {
device: null,
devices: {},
deviceList: null,
system: {},
system: {
free_size: null,
free_space_size: null,
used_space_size: null,
},
systemList: [],
systemHistory: [],
evmHistory: [],
lvglHistory: [],
evm: {},
evm: {
heap_map_size: null,
heap_total_size: null,
heap_used_size: null,
stack_total_size: null,
stack_used_size: null,
},
evmList: [],
lvgl: {},
lvglList: [],
......@@ -489,33 +551,147 @@ export default {
});
},
getReport() {
wsNotify.eventBus.$emit("exportImg");
monitor
.getAllData((params) => {
return params.imei && params.imei == this.device;
})
.then((res) => {
console.log(res);
// const systemList = [],
// evmList = [],
// lvglList = [];
// res.forEach((item) => {
// systemList.push(item.system);
// evmList.push(item.evm);
// lvglList.push(item.lvgl);
// });
// 最大值 最小值 平均值 第一次 最后一次
const systemList = [],
evmList = [],
lvglList = [];
let appList = [];
res.forEach((item) => {
systemList.push(
Object.assign(
{ ts: Date.parse(item.system.timestamp) },
item.system
)
);
evmList.push(
Object.assign({ ts: Date.parse(item.system.timestamp) }, item.evm)
);
lvglList.push(
Object.assign(
{ ts: Date.parse(item.system.timestamp) },
item.lvgl
)
);
appList = appList.concat(item.image.map((img) => {
if (img.png_detail && img.png_detail.length) {
result.imageList = result.imageList.concat(
img.png_detail.map((p) => {
p.page = item.uri;
return p;
})
);
}
return Object.assign({ ts: Date.parse(item.system.timestamp), ...img })
}));
});
result.appList = appList
Object.keys(evm).forEach((k) => {
result.evmFirst[k] = 0;
result.evmLast[k] = 0;
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.timestamp = this.globalData.system.timestamp
let params = {
templateName: "evue-monitor.json",
dataJson: res,
dataJson: result,
};
return getReport(params);
})
.then((res) => {
if (res.retcode == 0) {
download(res.message.file, res.message.url).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
this.$message.success("success")
}
console.log(res);
})
.catch((err) => {
this.$message.error(err.msg);
// this.$message.error(err.msg);
console.log(err);
});
},
......@@ -667,12 +843,12 @@ export default {
resetData(m) {
wsNotify.eventBus.$emit("resize");
this.evmList = [{ ...this.globalData.evm }];
this.lvglList = [{ ...this.globalData.lvgl }];
this.evmList = [{ ...m.evm }];
this.lvglList = [{ ...m.lvgl }];
this.systemList = [
{
imei: this.globalData.imei,
...this.globalData.system,
imei: m.imei,
...m.system,
},
];
......@@ -682,8 +858,8 @@ export default {
item.highlight = false;
uris.push(item.uri);
});
this.globalData.image &&
this.globalData.image.forEach((item) => {
m.image &&
m.image.forEach((item) => {
if (item.png_uncompressed_size > 0) {
item.highlight = true;
} else {
......@@ -715,16 +891,23 @@ export default {
}
});
if (m) {
if (m.evm) this.evm = m.evm;
if (m.lvgl) this.lvgl = m.lvgl;
if (m.image) this.image = m.image;
if (m.system) this.system = m.system;
if (this.globalData) {
if (this.globalData.evm) this.evm = this.globalData.evm;
if (this.globalData.lvgl) this.lvgl = this.globalData.lvgl;
if (this.globalData.image) this.image = this.globalData.image;
if (this.globalData.system) this.system = this.globalData.system;
}
},
},
mounted() {
this.socket = wsNotify;
wsNotify.eventBus.$on("exported", (res) => {
console.log(res);
if (res.type === "evm") result.evmImg = res.data;
else if (res.type === "lvgl") result.lvglImg = res.data;
else if (res.type === "system") result.systemImg = res.data;
});
wsNotify.eventBus.$on("open", (message) => {
this.sendMsg();
this.$nextTick(() => {
......@@ -745,7 +928,9 @@ export default {
},
destroyed() {
// 页面关闭则销毁该数据库
monitor.deleteDB();
// monitor.deleteDB();
monitor.clearData();
// monitor.close();
},
created() {
monitor
......
tools/build_out/tests/http_interval.py
View file @ cca4da40
'''
Author: your name
Date: 2021-07-22 19:01:41
LastEditTime: 2021-07-24 09:48:09
LastEditTime: 2021-07-26 03:23:07
LastEditors: Please set LastEditors
Description: In User Settings Edit
FilePath: \evm-store\tools\build_out\tests\http_interval.py
......@@ -16,7 +16,7 @@ from threading import Timer, Thread
def send_request(imei):
payload = {
"system": {"free_size": 1769792, "free_space_size": 5156864, "used_space_size": 1134592},
"lvgl": {"total_size": 0, "free_cnt": 0, "free_size": 0, "free_biggest_size": 0, "used_cnt": 0, "used_pct": 0, "frag_pct": 0},
"lvgl": {"total_size": 100, "free_cnt": 50, "free_size": 23, "free_biggest_size": 53, "used_cnt": 78, "used_pct":43, "frag_pct": 76},
"evm": {"heap_total_size": 2097152, "heap_used_size": 575072, "heap_map_size": 8192, "stack_total_size": 102400, "stack_used_size": 1312},
"image": [
{"uri": "evue_launcher", "length": 13515, "png_total_count": 0,
......
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