Skip to content

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

✨ feat: 资源监视器新增字段以及修改样式

parent 43b4c2f6
Show whitespace changes
Inline Side-by-side
Showing with 208 additions and 689 deletions
frontend/src/views/system/components/EvmChart.vue
View file @ 083183e7
...@@ -34,10 +34,15 @@ import { wsNotify } from "@/utils/eventBus.js"; ...@@ -34,10 +34,15 @@ import { wsNotify } from "@/utils/eventBus.js";
let chart = null; let chart = null;
const seriesData = { const seriesData = {
evue_free_size: [],
evue_total_size: [],
evue_used_size: [],
ext_total_size: [],
ext_used_size: [],
heap_total_size: [], heap_total_size: [],
heap_used_size: [], heap_used_size: [],
stack_total_size: [], stack_total_size: [],
stack_used_size: [], stack_used_size: []
}; };
export default { export default {
...@@ -68,53 +73,7 @@ export default { ...@@ -68,53 +73,7 @@ export default {
return { return {
loading: null, loading: null,
timer: null, timer: null,
series: [ series: [],
{
name: "heap_total_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
scale: false,
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.heap_total_size,
},
{
name: "heap_used_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.heap_used_size,
},
{
name: "stack_total_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.stack_total_size,
},
{
name: "stack_used_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.stack_used_size,
},
],
legendData: Object.keys(seriesData), legendData: Object.keys(seriesData),
}; };
}, },
...@@ -127,6 +86,22 @@ export default { ...@@ -127,6 +86,22 @@ export default {
}, },
}, },
mounted() { mounted() {
let array = []
Object.keys(seriesData).forEach(k => {
array.push({
name: k,
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData[k],
});
});
this.series = array;
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(); this.initChart();
}); });
...@@ -254,9 +229,10 @@ export default { ...@@ -254,9 +229,10 @@ export default {
legend: { legend: {
data: this.legendData, data: this.legendData,
selected: { selected: {
evue_total_size: false,
ext_total_size: false,
heap_total_size: false, heap_total_size: false,
stack_total_size: false, stack_total_size: false,
stack_used_size: false,
}, },
}, },
series: this.series, series: this.series,
......
frontend/src/views/system/components/EvmHistoryChart.vue deleted 100644 → 0
View file @ 43b4c2f6
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";
let chart = null
const seriesData = {
heap_total_size: [],
heap_used_size: [],
stack_total_size: [],
stack_used_size: [],
};
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
autoResize: {
type: Boolean,
default: true,
},
dataList: {
type: Array,
required: false,
default: () => [],
},
},
data() {
return {
loading: null,
series: [
{
name: "heap_total_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
scale: false,
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "heap_used_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "stack_total_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "stack_used_size",
type: "line",
max: "dataMax",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
],
legendData: Object.keys(seriesData),
};
},
watch: {
dataList: {
deep: true,
handler(val) {
if (val.length > 0) this.handleData(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!chart) {
return;
}
chart.clear();
chart.dispose();
},
methods: {
handleData(data) {
Object.keys(seriesData).forEach((key) => {
seriesData[key] = [];
});
this.series.forEach((item) => {
item.data = [];
});
// chart.setOption({ series: this.series });
data.forEach((item) => {
this.handleMessage(item);
});
let temp = Object.assign(this.series);
temp.forEach(item => {
if (Object.prototype.hasOwnProperty.call(seriesData, item.name)) {
item.data = seriesData[item.name]
}
});
this.series = temp;
this.$nextTick(() => {
chart &&
chart.setOption({
series: this.series,
});
});
},
handleMessage(data) {
Object.keys(data).forEach((k) => {
if (this.legendData.includes(k)) {
seriesData[k].push({
name: k,
value: [data.timestamp, data[k]],
});
}
});
},
initChart() {
chart = echarts.init(this.$el, "macarons");
this.setOptions();
},
setOptions() {
chart.setOption({
title: {
text: "EVM",
},
xAxis: {
type: "time",
splitLine: {
show: false,
},
// data: xAxisTitle,
// boundaryGap: false,
// axisTick: {
// show: false,
// },
axisLabel: {
formatter: "{HH}:{mm}:{ss}",
},
},
yAxis: {
type: "value",
scale: true,
splitLine: {
show: false,
},
},
// grid: {
// left: 10,
// right: 10,
// bottom: 20,
// top: 30,
// containLabel: true,
// },
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
animation: false,
},
// formatter: function (params) {
// params = params[0];
// console.log(params);
// var date = new Date(params.name);
// return (
// date.getDate() +
// "/" +
// (date.getMonth() + 1) +
// "/" +
// date.getFullYear() +
// " : " +
// params.value[1]
// );
// },
padding: [5, 10],
},
legend: {
data: this.legendData,
},
series: this.series,
});
},
},
};
</script>
frontend/src/views/system/components/LvglHistoryChart.vue deleted 100644 → 0
View file @ 43b4c2f6
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";
const seriesData = {
frag_pct: [],
free_biggest_size: [],
free_cnt: [],
free_size: [],
total_size: [],
used_cnt: [],
used_pct: [],
};
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "350px",
},
autoResize: {
type: Boolean,
default: true,
},
dataList: {
type: Array,
required: false,
default: () => [],
},
},
data() {
return {
chart: null,
series: [
{
name: "frag_pct",
type: "line",
showSymbol: false,
emphasis: {
scale: false,
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "free_biggest_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "free_cnt",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "free_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "total_size",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "used_cnt",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
{
name: "used_pct",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: [],
},
],
legendData: Object.keys(seriesData),
};
},
watch: {
dataList: {
deep: true,
handler(val) {
if (val.length > 0) this.handleData(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
handleData(data) {
Object.keys(seriesData).forEach(key => {
seriesData[key] = []
});
this.series.forEach(item => {
item.data = []
});
// this.chart.setOption({ series: this.series });
data.forEach((item) => {
this.handleMessage(item);
});
let temp = Object.assign(this.series);
temp.forEach(item => {
if (Object.prototype.hasOwnProperty.call(seriesData, item.name)) {
item.data = seriesData[item.name]
}
});
this.series = temp;
this.$nextTick(() => {
this.chart &&
this.chart.setOption({
series: this.series,
});
});
},
handleMessage(data) {
Object.keys(data).forEach((k) => {
if (this.legendData.includes(k))
seriesData[k].push({
name: k,
value: [data.timestamp, data[k]],
});
});
},
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions();
},
setOptions() {
this.chart.setOption({
title: {
text: "LVGL",
},
xAxis: {
type: "time",
splitLine: {
show: false,
},
axisLabel: {
formatter: "{HH}:{mm}:{ss}",
},
},
yAxis: {
type: "value",
splitLine: {
show: false,
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
animation: false,
},
padding: [5, 10],
},
legend: {
data: this.legendData,
},
series: this.series,
});
},
},
};
</script>
frontend/src/views/system/monitor.vue
View file @ 083183e7
...@@ -72,57 +72,28 @@ ...@@ -72,57 +72,28 @@
@moved="movedEvent" @moved="movedEvent"
> >
<p class="item-title">SYSTEM</p> <p class="item-title">SYSTEM</p>
<el-table <div class="list-element">
element-loading-text="Loading" <div>
:data="systemList" <label>host</label>
size="mini" <p>{{ systemList.host }}</p>
border </div>
stripe <div>
fit <label>timestamp</label>
highlight-current-row <p style="font-size: 13px;">{{ systemList.timestamp }}</p>
> </div>
<el-table-column <div>
prop="host" <label>free_size</label>
label="host" <p>{{ systemList.free_size }}(KB)</p>
min-width="150" </div>
show-overflow-tooltip <div>
></el-table-column> <label>free_space_size</label>
<el-table-column <p>{{ systemList.free_space_size }}(KB)</p>
prop="timestamp" </div>
label="timestamp" <div>
min-width="150" <label>used_space_size</label>
show-overflow-tooltip <p>{{ systemList.used_space_size }}(KB)</p>
></el-table-column> </div>
<el-table-column </div>
prop="free_size"
label="free_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.free_size }}(KB)</template
>
</el-table-column>
<el-table-column
prop="free_space_size"
label="free_space_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.free_space_size }}(KB)</template
>
</el-table-column>
<el-table-column
label="used_space_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.used_space_size }}(KB)</template
>
</el-table-column>
</el-table>
</grid-item> </grid-item>
<grid-item <grid-item
:x="0" :x="0"
...@@ -137,61 +108,44 @@ ...@@ -137,61 +108,44 @@
@moved="movedEvent" @moved="movedEvent"
> >
<p class="item-title">EVM</p> <p class="item-title">EVM</p>
<el-table <div class="list-element">
element-loading-text="Loading" <div style="background: yellow;">
:data="evmList" <label>evue_free_size</label>
size="mini" <p>{{ evmList.evue_free_size | byte2kb }}(KB)</p>
border </div>
stripe <div style="background: orange;">
fit <label>evue_total_size</label>
highlight-current-row <p>{{ evmList.evue_total_size | byte2kb }}(KB)</p>
> </div>
<el-table-column <div style="background: orange;">
label="heap_map_size" <label>evue_used_size</label>
min-width="150" <p>{{ evmList.evue_used_size | byte2kb }}(KB)</p>
show-overflow-tooltip </div>
> <div style="background: yellowgreen;">
<template slot-scope="scope" <label>ext_total_size</label>
>{{ scope.row.heap_map_size }}(KB)</template <p>{{ evmList.ext_total_size | byte2kb }}(KB)</p>
> </div>
</el-table-column> <div style="background: yellowgreen;">
<el-table-column <label>ext_used_size</label>
label="heap_total_size" <p>{{ evmList.ext_used_size | byte2kb }}(KB)</p>
min-width="150" </div>
show-overflow-tooltip <div style="background: paleturquoise;">
> <label>heap_total_size</label>
<template slot-scope="scope" <p>{{ evmList.heap_total_size | byte2kb }}(KB)</p>
>{{ scope.row.heap_total_size }}(KB)</template </div>
> <div style="background: paleturquoise;">
</el-table-column> <label>heap_used_size</label>
<el-table-column <p>{{ evmList.heap_used_size | byte2kb }}(KB)</p>
label="heap_used_size" </div>
min-width="150" <div style="background: darksalmon;">
show-overflow-tooltip <label>stack_total_size</label>
> <p>{{ evmList.stack_total_size | byte2kb }}(KB)</p>
<template slot-scope="scope" </div>
>{{ scope.row.heap_used_size }}(KB)</template <div style="background: darksalmon;">
> <label>stack_used_size</label>
</el-table-column> <p>{{ evmList.stack_used_size | byte2kb }}(KB)</p>
<el-table-column </div>
label="stack_total_size" </div>
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.stack_total_size }}(KB)</template
>
</el-table-column>
<el-table-column
label="stack_used_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.stack_used_size }}(KB)</template
>
</el-table-column>
</el-table>
</grid-item> </grid-item>
<grid-item <grid-item
:x="6" :x="6"
...@@ -206,58 +160,36 @@ ...@@ -206,58 +160,36 @@
@moved="movedEvent" @moved="movedEvent"
> >
<p class="item-title">LVGL</p> <p class="item-title">LVGL</p>
<el-table <div class="list-element">
element-loading-text="Loading" <div>
:data="lvglList" <label>total_size</label>
size="mini" <p>{{ lvglList.total_size }}</p>
border </div>
stripe <div>
fit <label>free_cnt</label>
highlight-current-row <p>{{ lvglList.free_cnt }}</p>
> </div>
<el-table-column <div>
label="total_size" <label>free_size</label>
min-width="100" <p>{{ lvglList.free_size }}(KB)</p>
show-overflow-tooltip </div>
> <div>
<template slot-scope="scope" <label>free_biggest_size</label>
>{{ scope.row.total_size }}(KB)</template <p>{{ lvglList.free_biggest_size }}(KB)</p>
> </div>
</el-table-column> <div>
<el-table-column <label>used_cnt</label>
prop="free_cnt" <p>{{ lvglList.used_cnt }}</p>
label="free_cnt" </div>
min-width="100" <div>
show-overflow-tooltip <label>used_pct</label>
></el-table-column> <p>{{ lvglList.used_pct }}(%)</p>
<el-table-column </div>
label="free_size" <div>
min-width="120" <label>frag_pct</label>
show-overflow-tooltip <p>{{ lvglList.frag_pct }}(%)</p>
> </div>
<template slot-scope="scope" </div>
>{{ scope.row.free_size }}(KB)</template
>
</el-table-column>
<el-table-column label="free_biggest_size" min-width="120">
<template slot-scope="scope"
>{{ scope.row.free_biggest_size }}(KB)</template
>
</el-table-column>
<el-table-column label="used_cnt" min-width="100">
<template slot-scope="scope">{{ scope.row.used_cnt }}</template>
</el-table-column>
<el-table-column label="used_pct" min-width="100">
<template slot-scope="scope"
>{{ scope.row.used_pct }}(%)</template
>
</el-table-column>
<el-table-column label="frag_pct" min-width="100">
<template slot-scope="scope"
>{{ scope.row.frag_pct }}(%)</template
>
</el-table-column>
</el-table>
</grid-item> </grid-item>
<grid-item <grid-item
:x="0" :x="0"
...@@ -361,6 +293,20 @@ ...@@ -361,6 +293,20 @@
<grid-item <grid-item
:x="0" :x="0"
:y="20" :y="20"
:w="12"
:h="7"
i="9"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@container-resized="containerResizedEvent"
@moved="movedEvent"
>
<EvmChart :chartData="evm" :dataList="evmHistory"></EvmChart>
</grid-item>
<grid-item
:x="0"
:y="27"
:w="4" :w="4"
:h="14" :h="14"
i="7" i="7"
...@@ -373,15 +319,23 @@ ...@@ -373,15 +319,23 @@
<div> <div>
<p class="item-title">应用大小</p> <p class="item-title">应用大小</p>
<el-table :data="appList" size="mini" style="width: 100%"> <el-table :data="appList" size="mini" style="width: 100%">
<el-table-column prop="appName" label="应用名称" width="180"></el-table-column> <el-table-column
<el-table-column prop="fileSize" label="应用大小(KB)"></el-table-column> prop="appName"
<el-table-column prop="fileCount" label="文件个数" width="100"> </el-table-column> label="应用名称"
width="180"
></el-table-column>
<el-table-column
prop="fileSize"
label="应用大小(KB)"
></el-table-column>
<el-table-column prop="fileCount" label="文件个数" width="100">
</el-table-column>
</el-table> </el-table>
</div> </div>
</grid-item> </grid-item>
<grid-item <grid-item
:x="4" :x="4"
:y="20" :y="27"
:w="8" :w="8"
:h="7" :h="7"
i="7" i="7"
...@@ -398,7 +352,7 @@ ...@@ -398,7 +352,7 @@
</grid-item> </grid-item>
<grid-item <grid-item
:x="4" :x="4"
:y="27" :y="34"
:w="8" :w="8"
:h="7" :h="7"
i="8" i="8"
...@@ -407,20 +361,6 @@ ...@@ -407,20 +361,6 @@
@resized="resizedEvent" @resized="resizedEvent"
@container-resized="containerResizedEvent" @container-resized="containerResizedEvent"
@moved="movedEvent" @moved="movedEvent"
>
<EvmChart :chartData="evm" :dataList="evmHistory"></EvmChart>
</grid-item>
<grid-item
:x="0"
:y="34"
:w="12"
:h="7"
i="9"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@container-resized="containerResizedEvent"
@moved="movedEvent"
> >
<LvglChart :chartData="lvgl" :dataList="lvglHistory"></LvglChart> <LvglChart :chartData="lvgl" :dataList="lvglHistory"></LvglChart>
</grid-item> </grid-item>
...@@ -532,7 +472,13 @@ export default { ...@@ -532,7 +472,13 @@ export default {
free_space_size: null, free_space_size: null,
used_space_size: null, used_space_size: null,
}, },
systemList: [], systemList: {
host: "",
timestamp: "",
free_size: 0,
free_space_size: 0,
used_space_size: 0
},
systemHistory: [], systemHistory: [],
evmHistory: [], evmHistory: [],
lvglHistory: [], lvglHistory: [],
...@@ -543,9 +489,27 @@ export default { ...@@ -543,9 +489,27 @@ export default {
stack_total_size: null, stack_total_size: null,
stack_used_size: null, stack_used_size: null,
}, },
evmList: [], evmList: {
evue_free_size: 0,
evue_total_size: 0,
evue_used_size: 0,
ext_total_size: 0,
ext_used_size: 0,
heap_total_size: 0,
heap_used_size: 0,
stack_total_size: 0,
stack_used_size: 0,
},
lvgl: {}, lvgl: {},
lvglList: [], lvglList: {
total_size: 0,
free_cnt: 0,
free_size: 0,
free_biggest_size: 0,
used_cnt: 0,
used_pct: 0,
frag_pct: 0
},
image: {}, image: {},
imageList: [], imageList: [],
pngShowMode: true, pngShowMode: true,
...@@ -579,6 +543,11 @@ export default { ...@@ -579,6 +543,11 @@ export default {
appList: [], appList: [],
}; };
}, },
filters: {
byte2kb(val) {
return Math.ceil(val / 1024)
}
},
components: { components: {
GridLayout, GridLayout,
GridItem, GridItem,
...@@ -922,14 +891,14 @@ export default { ...@@ -922,14 +891,14 @@ export default {
// 处理appList // 处理appList
// 一、统计每个页面有多少个资源文件；二、累加每个资源文件的size；三、以表格形式展示统计信息 // 一、统计每个页面有多少个资源文件；二、累加每个资源文件的size；三、以表格形式展示统计信息
if (msg.appList && msg.appList.length) { if (msg.appList && msg.appList.length) {
this.appList = msg.appList.map(item => { this.appList = msg.appList.map((item) => {
item.fileCount = item.files.length item.fileCount = item.files.length;
item.fileSize = item.files.reduce((total, file) => { item.fileSize = item.files.reduce((total, file) => {
return total + file.size; return total + file.size;
}, 0) }, 0);
item.fileSize = item.fileSize / 1024 item.fileSize = item.fileSize / 1024;
return item return item;
}) });
} }
}, },
onSelectChange(res) { onSelectChange(res) {
...@@ -950,14 +919,9 @@ export default { ...@@ -950,14 +919,9 @@ export default {
resetData(m) { resetData(m) {
wsNotify.eventBus.$emit("resize"); wsNotify.eventBus.$emit("resize");
this.evmList = [{ ...m.evm }]; this.evmList = { ...m.evm };
this.lvglList = [{ ...m.lvgl }]; this.lvglList = { ...m.lvgl };
this.systemList = [ this.systemList = { imei: m.imei, ...m.system, };
{
imei: m.imei,
...m.system,
},
];
// 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新 // 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
let uris = []; let uris = [];
...@@ -1063,6 +1027,30 @@ export default { ...@@ -1063,6 +1027,30 @@ export default {
& > div.page-wrapper { & > div.page-wrapper {
margin: 10px 0px; margin: 10px 0px;
} }
div.list-element {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 70px);
& > div {
text-align: center;
border: 1px solid;
margin: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #cce;
& > label {
font-weight: thin;
font-size: 15px;
}
& > p {
height: 20px;
margin: 5px;
font-size: 16px;
}
}
}
} }
.vue-grid-layout { .vue-grid-layout {
......
tools/build_out/views/menu.py
View file @ 083183e7
...@@ -244,7 +244,7 @@ class Create(Resource): ...@@ -244,7 +244,7 @@ class Create(Resource):
try: try:
print("========>", args) print("========>", args)
result, message = signalManager.actionMenuCreate.emit(args) result, message = signalManager.actionMenuCreate.emit(args, jwt={ "uuid": "551EDA6E032F16FE000847ABA4048B56" })
return response_result(message, data=result) return response_result(message, data=result)
except Exception as e: except Exception as e:
# traceback.print_exc() # traceback.print_exc()
......
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