Skip to content

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

update

parent d286cb0a
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 82 deletions
frontend/src/views/system/chart.vue
View file @ ce5ae648
......@@ -25,14 +25,12 @@
</el-form>
<LineChart :chartData="evm" :dataList="evmList"></LineChart>
<LvglChart :chartData="lvgl"></LvglChart>
<ImageChart :chartData="image"></ImageChart>
</div>
</template>
<script>
import { getWatchList, getMonitorData } from "@/api/index";
import LineChart from "./components/EvmChart";
import LvglChart from "./components/LvglChart";
import ImageChart from "./components/ImageChart";
import { wsNotify } from "@/utils/eventBus.js";
export default {
name: "AppChart",
......@@ -59,7 +57,6 @@ export default {
components: {
LineChart,
LvglChart,
ImageChart,
},
methods: {
sendMsg() {
......
frontend/src/views/system/components/EvmChart.vue
View file @ ce5ae648
......@@ -113,12 +113,7 @@ export default {
data: seriesData.stack_used_size,
},
],
legendData: [
"heap_total_size",
"heap_used_size",
"stack_total_size",
"stack_used_size",
],
legendData: Object.keys(seriesData),
};
},
watch: {
......@@ -229,13 +224,14 @@ export default {
// show: false,
// },
axisLabel: {
formatter: "{hh}:{mm}:{ss}",
formatter: "{HH}:{mm}:{ss}",
},
},
yAxis: {
type: "value",
scale: true,
boundaryGap: [0, "100%"],
// boundaryGap: [0, "100%"],
// splitNumber: 10,
splitLine: {
show: false,
},
......
frontend/src/views/system/components/EvmHistoryChart.vue
View file @ ce5ae648
......@@ -7,6 +7,8 @@ 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: [],
......@@ -42,7 +44,6 @@ export default {
data() {
return {
loading: null,
chart: null,
series: [
{
name: "heap_total_size",
......@@ -54,7 +55,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.heap_total_size,
data: [],
},
{
name: "heap_used_size",
......@@ -65,7 +66,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.heap_used_size,
data: [],
},
{
name: "stack_total_size",
......@@ -76,7 +77,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.stack_total_size,
data: [],
},
{
name: "stack_used_size",
......@@ -87,15 +88,10 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.stack_used_size,
data: [],
},
],
legendData: [
"heap_total_size",
"heap_used_size",
"stack_total_size",
"stack_used_size",
],
legendData: Object.keys(seriesData),
};
},
watch: {
......@@ -112,25 +108,40 @@ export default {
});
},
beforeDestroy() {
if (!this.chart) {
if (!chart) {
return;
}
this.chart.dispose();
this.chart = null;
chart.clear();
chart.dispose();
},
methods: {
handleData(data) {
Object.keys(seriesData).forEach((key) => {
seriesData[key] = [];
});
// this.series.forEach((item) => {
// item.data = [];
// });
// this.chart.setOption({ series: this.series });
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) => {
......@@ -141,20 +152,13 @@ export default {
});
}
});
this.$nextTick(() => {
this.chart &&
this.chart.setOption({
series: this.series,
});
});
},
initChart() {
this.chart = echarts.init(this.$el, "macarons");
chart = echarts.init(this.$el, "macarons");
this.setOptions();
},
setOptions() {
this.chart.setOption({
chart.setOption({
title: {
text: "EVM",
},
......@@ -169,13 +173,12 @@ export default {
// show: false,
// },
axisLabel: {
formatter: "{hh}:{mm}:{ss}",
formatter: "{HH}:{mm}:{ss}",
},
},
yAxis: {
type: "value",
scale: true,
boundaryGap: [0, "100%"],
splitLine: {
show: false,
},
......
frontend/src/views/system/components/LvglChart.vue
View file @ ce5ae648
......@@ -207,12 +207,12 @@ export default {
show: false,
},
axisLabel: {
formatter: "{hh}:{mm}:{ss}",
formatter: "{HH}:{mm}:{ss}",
},
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
// boundaryGap: [0, "100%"],
splitLine: {
show: false,
},
......
frontend/src/views/system/components/LvglHistoryChart.vue
View file @ ce5ae648
......@@ -6,7 +6,6 @@
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";
import { getDateTimeString } from "@/utils/utils";
const seriesData = {
frag_pct: [],
......@@ -56,7 +55,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.frag_pct,
data: [],
},
{
name: "free_biggest_size",
......@@ -66,7 +65,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_biggest_size,
data: [],
},
{
name: "free_cnt",
......@@ -76,7 +75,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_cnt,
data: [],
},
{
name: "free_size",
......@@ -86,7 +85,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.free_size,
data: [],
},
{
name: "total_size",
......@@ -96,7 +95,7 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.total_size,
data: [],
},
{
name: "used_cnt",
......@@ -106,28 +105,20 @@ export default {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.used_cnt,
data: [],
},
{
name: "used_pctused_pct",
name: "used_pct",
type: "line",
showSymbol: false,
emphasis: {
focus: "series",
blurScope: "coordinateSystem",
},
data: seriesData.used_pctused_pct,
data: [],
},
],
legendData: [
"frag_pct",
"free_biggest_size",
"free_cnt",
"free_size",
"total_size",
"used_cnt",
"used_pctused_pct",
],
legendData: Object.keys(seriesData),
};
},
watch: {
......@@ -158,22 +149,19 @@ export default {
this.series.forEach(item => {
item.data = []
});
this.chart.setOption({ series: this.series });
// this.chart.setOption({ series: this.series });
data.forEach((item) => {
this.handleMessage(item);
});
},
handleMessage(data) {
Object.keys(data).forEach((k) => {
var t = getDateTimeString(new Date());
if (k == "timestamp") t = data[k];
if (this.legendData.includes(k))
seriesData[k].push({
name: k,
value: [t, data[k]],
});
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 &&
......@@ -182,6 +170,15 @@ export default {
});
});
},
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();
......@@ -197,12 +194,11 @@ export default {
show: false,
},
axisLabel: {
formatter: "{hh}:{mm}:{ss}",
formatter: "{HH}:{mm}:{ss}",
},
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
splitLine: {
show: false,
},
......
frontend/src/views/system/history.vue
View file @ ce5ae648
......@@ -37,8 +37,8 @@
>
<el-form-item><el-button @click="onReset">重置</el-button></el-form-item>
</el-form>
<EvmHistoryChart :dataList="[]"></EvmHistoryChart>
<LvglHistoryChart :dataList="[]"></LvglHistoryChart>
<EvmHistoryChart :dataList="evmList"></EvmHistoryChart>
<LvglHistoryChart :dataList="lvglList"></LvglHistoryChart>
</div>
</template>
<script>
......@@ -100,6 +100,12 @@ export default {
},
methods: {
fetchData() {
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
let params = {
watch: this.watch_id,
};
......@@ -113,6 +119,7 @@ export default {
}
getMonitorData(params)
.then((res) => {
console.log("====>", res.type);
if (res.type == "object") {
this.evmList = res.data.evm;
this.lvglList = res.data.lvgl;
......@@ -125,6 +132,9 @@ export default {
})
.catch((err) => {
this.$message.warning(err.msg);
})
.finally(() => {
loading.close();
});
},
fetchSelectData() {
......@@ -132,7 +142,6 @@ export default {
getWatchList()
.then((res) => {
if (res.code == 200) this.watchs = res.data;
console.log(this.watchs);
})
.catch((err) => {
this.$message.warning(err.msg);
......
frontend/src/views/system/monitor.vue
View file @ ce5ae648
......@@ -306,7 +306,17 @@ export default {
this.lvgl = [{ ...msg.lvgl }];
this.evm = [{ ...msg.evm }];
this.request = [{ ...msg.request }];
this.image = msg.image;
// 这里需要特殊处理下，先判断uri是否存在，不存在则添加，存在则更新
let uris = [];
this.image.forEach((img) => {
uris.push(img.uri)
});
msg.image.forEach((item) => {
if (!uris.includes(item.uri)) {
this.image.push(item)
}
});
// this.image = msg.image;
},
onSelectChange(res) {
this.device = res;
......@@ -316,22 +326,22 @@ export default {
},
mounted() {},
created() {
this.socket = wsNotify
this.socket = wsNotify;
wsNotify.eventBus.$on("open", (message) => {
this.sendMsg();
this.$nextTick(() => {
console.log(message)
console.log(message);
});
});
wsNotify.eventBus.$on("close", (message) => {
this.$nextTick(() => {
console.log(message)
console.log(message);
});
});
wsNotify.eventBus.$on("message", (message) => {
this.$nextTick(() => {
console.log(message)
this.handleMessage(message)
console.log(message);
this.handleMessage(message);
});
});
// this.initWebSocket();
......
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