Skip to content

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

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

parent 43b4c2f6
Hide 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";
let chart = null;
const seriesData = {
evue_free_size: [],
evue_total_size: [],
evue_used_size: [],
ext_total_size: [],
ext_used_size: [],
heap_total_size: [],
heap_used_size: [],
stack_total_size: [],
stack_used_size: [],
stack_used_size: []
};
export default {
......@@ -68,53 +73,7 @@ export default {
return {
loading: null,
timer: null,
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,
},
],
series: [],
legendData: Object.keys(seriesData),
};
},
......@@ -127,6 +86,22 @@ export default {
},
},
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.initChart();
});
......@@ -254,9 +229,10 @@ export default {
legend: {
data: this.legendData,
selected: {
evue_total_size: false,
ext_total_size: false,
heap_total_size: false,
stack_total_size: false,
stack_used_size: false,
},
},
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 @@
@moved="movedEvent"
>
<p class="item-title">SYSTEM</p>
<el-table
element-loading-text="Loading"
:data="systemList"
size="mini"
border
stripe
fit
highlight-current-row
>
<el-table-column
prop="host"
label="host"
min-width="150"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="timestamp"
label="timestamp"
min-width="150"
show-overflow-tooltip
></el-table-column>
<el-table-column
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>
<div class="list-element">
<div>
<label>host</label>
<p>{{ systemList.host }}</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>
</grid-item>
<grid-item
:x="0"
......@@ -137,61 +108,44 @@
@moved="movedEvent"
>
<p class="item-title">EVM</p>
<el-table
element-loading-text="Loading"
:data="evmList"
size="mini"
border
stripe
fit
highlight-current-row
>
<el-table-column
label="heap_map_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.heap_map_size }}(KB)</template
>
</el-table-column>
<el-table-column
label="heap_total_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.heap_total_size }}(KB)</template
>
</el-table-column>
<el-table-column
label="heap_used_size"
min-width="150"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.heap_used_size }}(KB)</template
>
</el-table-column>
<el-table-column
label="stack_total_size"
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>
<div class="list-element">
<div style="background: yellow;">
<label>evue_free_size</label>
<p>{{ evmList.evue_free_size | byte2kb }}(KB)</p>
</div>
<div style="background: orange;">
<label>evue_total_size</label>
<p>{{ evmList.evue_total_size | byte2kb }}(KB)</p>
</div>
<div style="background: orange;">
<label>evue_used_size</label>
<p>{{ evmList.evue_used_size | byte2kb }}(KB)</p>
</div>
<div style="background: yellowgreen;">
<label>ext_total_size</label>
<p>{{ evmList.ext_total_size | byte2kb }}(KB)</p>
</div>
<div style="background: yellowgreen;">
<label>ext_used_size</label>
<p>{{ evmList.ext_used_size | byte2kb }}(KB)</p>
</div>
<div style="background: paleturquoise;">
<label>heap_total_size</label>
<p>{{ evmList.heap_total_size | byte2kb }}(KB)</p>
</div>
<div style="background: paleturquoise;">
<label>heap_used_size</label>
<p>{{ evmList.heap_used_size | byte2kb }}(KB)</p>
</div>
<div style="background: darksalmon;">
<label>stack_total_size</label>
<p>{{ evmList.stack_total_size | byte2kb }}(KB)</p>
</div>
<div style="background: darksalmon;">
<label>stack_used_size</label>
<p>{{ evmList.stack_used_size | byte2kb }}(KB)</p>
</div>
</div>
</grid-item>
<grid-item
:x="6"
......@@ -206,58 +160,36 @@
@moved="movedEvent"
>
<p class="item-title">LVGL</p>
<el-table
element-loading-text="Loading"
:data="lvglList"
size="mini"
border
stripe
fit
highlight-current-row
>
<el-table-column
label="total_size"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ scope.row.total_size }}(KB)</template
>
</el-table-column>
<el-table-column
prop="free_cnt"
label="free_cnt"
min-width="100"
show-overflow-tooltip
></el-table-column>
<el-table-column
label="free_size"
min-width="120"
show-overflow-tooltip
>
<template slot-scope="scope"
>{{ 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>
<div class="list-element">
<div>
<label>total_size</label>
<p>{{ lvglList.total_size }}</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>
</grid-item>
<grid-item
:x="0"
......@@ -361,6 +293,20 @@
<grid-item
:x="0"
: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"
:h="14"
i="7"
......@@ -373,15 +319,23 @@
<div>
<p class="item-title">应用大小</p>
<el-table :data="appList" size="mini" style="width: 100%">
<el-table-column prop="appName" 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-column
prop="appName"
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>
</div>
</grid-item>
<grid-item
:x="4"
:y="20"
:y="27"
:w="8"
:h="7"
i="7"
......@@ -398,7 +352,7 @@
</grid-item>
<grid-item
:x="4"
:y="27"
:y="34"
:w="8"
:h="7"
i="8"
......@@ -407,20 +361,6 @@
@resized="resizedEvent"
@container-resized="containerResizedEvent"
@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>
</grid-item>
......@@ -532,7 +472,13 @@ export default {
free_space_size: null,
used_space_size: null,
},
systemList: [],
systemList: {
host: "",
timestamp: "",
free_size: 0,
free_space_size: 0,
used_space_size: 0
},
systemHistory: [],
evmHistory: [],
lvglHistory: [],
......@@ -543,9 +489,27 @@ export default {
stack_total_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: {},
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: {},
imageList: [],
pngShowMode: true,
......@@ -579,6 +543,11 @@ export default {
appList: [],
};
},
filters: {
byte2kb(val) {
return Math.ceil(val / 1024)
}
},
components: {
GridLayout,
GridItem,
......@@ -922,14 +891,14 @@ export default {
// 处理appList
// 一、统计每个页面有多少个资源文件；二、累加每个资源文件的size；三、以表格形式展示统计信息
if (msg.appList && msg.appList.length) {
this.appList = msg.appList.map(item => {
item.fileCount = item.files.length
this.appList = msg.appList.map((item) => {
item.fileCount = item.files.length;
item.fileSize = item.files.reduce((total, file) => {
return total + file.size;
}, 0)
item.fileSize = item.fileSize / 1024
return item
})
}, 0);
item.fileSize = item.fileSize / 1024;
return item;
});
}
},
onSelectChange(res) {
......@@ -950,14 +919,9 @@ export default {
resetData(m) {
wsNotify.eventBus.$emit("resize");
this.evmList = [{ ...m.evm }];
this.lvglList = [{ ...m.lvgl }];
this.systemList = [
{
imei: m.imei,
...m.system,
},
];
this.evmList = { ...m.evm };
this.lvglList = { ...m.lvgl };
this.systemList = { imei: m.imei, ...m.system, };
// 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
let uris = [];
......@@ -1063,6 +1027,30 @@ export default {
& > div.page-wrapper {
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 {
......
tools/build_out/views/menu.py
View file @ 083183e7
......@@ -244,7 +244,7 @@ class Create(Resource):
try:
print("========>", args)
result, message = signalManager.actionMenuCreate.emit(args)
result, message = signalManager.actionMenuCreate.emit(args, jwt={ "uuid": "551EDA6E032F16FE000847ABA4048B56" })
return response_result(message, data=result)
except Exception as e:
# 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