Commit 9f9b222a authored by wanli's avatar wanli

🐞 fix(): 解决资源监视器若干问题

一、解决用户先于设备登录,设备发送消息用户无法接收问题;二、解决用户切换页面再回到资源监视页面,无法接收数据问题;三、解决重新进入页面数据被污染问题;
parent 8bd856c3
'''
Author: your name
Date: 2021-06-29 19:33:41
LastEditTime: 2021-07-24 09:49:30
LastEditTime: 2021-07-25 17:18:11
LastEditors: Please set LastEditors
Description: In User Settings Edit
FilePath: \evm-store\backend\view\monitor.py
......@@ -177,7 +177,7 @@ class NotifyHandler(BaseWebsocket):
self.write_message(json.dumps({ "code": 400, "data": None, "msg": "token can not be null" }))
return
user = session.query(User).filter(User.id == payload.get("data").get("id")).all()
user = session.query(User).filter(User.id == payload.get("data").get("id")).one_or_none()
if not user:
self.write_message(json.dumps({ "code": 400, "data": None, "msg": "user not exists" }))
# self.close()
......@@ -185,7 +185,6 @@ class NotifyHandler(BaseWebsocket):
# 查询该用户可查看设备
devices = session.query(Device).filter(Device.create_by==payload.get("data").get("id")).all()
if len(devices):
self._clients.append({
'uuid': payload.get("data").get("uuid"),
......@@ -198,11 +197,31 @@ class NotifyHandler(BaseWebsocket):
self.write_message(json.dumps({ 'code': 400, 'data': None, 'msg': 'no devices' }))
# self.close()
elif message.get("type") == "heartbeat": # 心跳包
exists_flag = False
# 收到心跳包消息,更新接收数据时间
for c in self._clients:
if c.get("uuid") == payload.get("data").get("uuid"):
c["ts"] = int(time.time())
self.write_message(json.dumps({ 'code': 200, 'data': None, 'msg': 'update session timestamp success' }))
exists_flag = True
if not exists_flag and message.get("token"):
payload = jwt.decode(message.get("token"), config['SECRET_KEY'], verify=True, algorithms=['HS256'], options={ 'verify_aud': False })
user = session.query(User).filter(User.id == payload.get("data").get("id")).one_or_none()
if not user:
self.write_message(json.dumps({ 'code': 402, 'data': None, 'msg': 'user not exists' }))
return
devices = session.query(Device).filter(Device.create_by==payload.get("data").get("id")).all()
if len(devices):
self._clients.append({
'uuid': payload.get("data").get("uuid"),
'context': self,
'devices': list(map(lambda d:d.imei, devices)),
'ts': int(time.time())
})
self.write_message(json.dumps({ 'code': 200, 'data': None, 'msg': 'auth passed' }))
else: # 没有设备,是否断开连接
self.write_message(json.dumps({ 'code': 400, 'data': None, 'msg': 'no devices' }))
else:
self.write_message(json.dumps({ 'code': 200, 'data': None, 'msg': 'unkonw message packet, disconnect by server' }))
self.handlers[className].remove(self)
......@@ -322,9 +341,7 @@ class DeviceMessageHandler(BaseHandler):
# data = tornado.escape.json_decode(self.request.body)
data = str(self.request.body, encoding="ISO-8859-1")
data = json.loads(data)
logger.info(data)
data.get("system", {}).update({
'host': self.request.remote_ip,
'path': self.request.path,
......@@ -332,7 +349,6 @@ class DeviceMessageHandler(BaseHandler):
})
insert_data(data)
data['type'] = 'report'
data['system'].update({ 'timestamp': datetime.now().strftime("%Y-%m-%d %H:%M:%S") })
NotifyHandler.broadcastMessage(data)
......
import request from "@/utils/request";
export function getTemplate(params) {
return request({
url: "/report/reportmanage/templatesList",
method: "get",
params,
});
}
export function getReport(data) {
return request({
url: "/report/reportmanage/pdfGenerate",
method: "post",
data,
});
}
export function getWorkbenckData(params) {
return request({
url: "/api/v1/evm_store/workbench/query",
......
/*
* @Author: your name
* @Date: 2021-07-01 15:02:16
* @LastEditTime: 2021-07-21 16:16:36
* @LastEditTime: 2021-07-25 18:24:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \evm-store\frontend\src\utils\eventBus.js
......@@ -28,7 +28,7 @@ wsNotify.onopen = function (event) {
};
wsNotify.onmessage = function (event) {
var message = JSON.parse(event.data);
const message = JSON.parse(event.data);
wsNotify.eventBus.$emit("message", message);
};
......
......@@ -29,19 +29,26 @@
>
<p class="item-title">DEVICE</p>
<div style="padding: 15px">
<el-select
size="mini"
v-model="device"
@change="onSelectChange"
placeholder="请选择设备"
>
<el-option
v-for="(item, index) in deviceList"
:key="index"
:label="item"
:value="item"
></el-option>
</el-select>
<el-form :inline="true">
<el-form-item label="选择设备">
<el-select
size="mini"
v-model="device"
@change="onSelectChange"
placeholder="请选择设备"
>
<el-option
v-for="(item, index) in deviceList"
:key="index"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源监控报告">
<el-button size="mini" @click="getReport">导出报告</el-button>
</el-form-item>
</el-form>
</div>
</grid-item>
<grid-item
......@@ -245,7 +252,7 @@
@container-resized="containerResizedEvent"
@moved="movedEvent"
>
<div style="width: 100%; height: 100%;overflow-y: auto;">
<div style="width: 100%; height: 100%; overflow-y: auto">
<p class="item-title">APP</p>
<el-table
element-loading-text="Loading"
......@@ -309,13 +316,26 @@
@container-resized="containerResizedEvent"
@moved="movedEvent"
>
<div style="width: 100%; height: 100%;overflow-y: auto;">
<div style="width: 100%; height: 100%; overflow-y: auto">
<el-table :data="pngList" style="width: 100%">
<el-table-column prop="uri" label="uri" min-width="180"></el-table-column>
<el-table-column prop="filesize" label="file size" width="100"></el-table-column>
<el-table-column prop="uncompressed_size" label="origin size" width="100"></el-table-column>
<el-table-column prop="ratio" label="ratio" width="100"> </el-table-column>
</el-table>
<el-table-column
prop="uri"
label="uri"
min-width="180"
></el-table-column>
<el-table-column
prop="filesize"
label="file size"
width="100"
></el-table-column>
<el-table-column
prop="uncompressed_size"
label="origin size"
width="100"
></el-table-column>
<el-table-column prop="ratio" label="ratio" width="100">
</el-table-column>
</el-table>
</div>
</grid-item>
<grid-item
......@@ -368,12 +388,18 @@
</div>
</template>
<script>
import { getWatchList, getMonitorData } from "@/api/index";
import {
getWatchList,
getMonitorData,
getReport,
getTemplate,
} from "@/api/index";
import EvmChart from "./components/EvmChart";
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 Database from "@/utils/indexedDB";
const dbObject = {
......@@ -422,8 +448,6 @@ export default {
system: ["free_size", "free_space_size", "used_space_size"],
lvgl: ["total_size", "free_size", "free_biggest_size"],
evm: [
"total_size",
"free_size",
"heap_map_size",
"heap_total_size",
"heap_used_size",
......@@ -455,6 +479,46 @@ export default {
SystemChart,
},
methods: {
getTemplate() {
getTemplate()
.then((res) => {
console.log(res);
})
.catch((err) => {
this.$message.error(err.msg);
});
},
getReport() {
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);
// });
let params = {
templateName: "evue-monitor.json",
dataJson: res,
};
return getReport(params);
})
.then((res) => {
console.log(res);
})
.catch((err) => {
this.$message.error(err.msg);
console.log(err);
});
},
tableRowClassName({ row }) {
return row.highlight ? "success-row" : "";
},
......@@ -546,6 +610,7 @@ export default {
// 将设备发送过来的消息存储到浏览器中
// 这里可以优化,将所有数据,保存到indexed datebase中
const m = deepClone(msg);
if (monitor.db) monitor.set(msg);
if (!this.deviceList) {
......@@ -566,9 +631,9 @@ export default {
}
// 处理单位
this.processData(msg);
this.processData(m);
this.globalData = msg;
this.resetData();
this.resetData(m);
},
processData(msg) {
if (!msg) return null;
......@@ -590,37 +655,16 @@ export default {
},
onSelectChange(res) {
this.device = res;
monitor
.getAllData((params) => {
return params.imei && params.imei == res;
})
.then((res) => {
console.log(res);
const systemList = [],
evmList = [],
lvglList = [];
res.forEach((item) => {
systemList.push(item.system);
evmList.push(item.evm);
lvglList.push(item.lvgl);
});
wsNotify.eventBus.$emit("clear-system-chart");
wsNotify.eventBus.$emit("clear-evm-chart");
wsNotify.eventBus.$emit("clear-lvgl-chart");
// 清空图表数据
wsNotify.eventBus.$emit("clear-system-chart");
wsNotify.eventBus.$emit("clear-evm-chart");
wsNotify.eventBus.$emit("clear-lvgl-chart");
// this.systemHistory = systemList;
// this.evmHistory = evmList;
// this.lvglHistory = lvglList;
// 清空图表数据
})
.catch((err) => {
console.log(err);
});
// this.processData(this.devices[this.device]);
// this.resetData();
},
resetData() {
resetData(m) {
wsNotify.eventBus.$emit("resize");
this.evmList = [{ ...this.globalData.evm }];
......@@ -628,12 +672,10 @@ export default {
this.systemList = [
{
imei: this.globalData.imei,
...this.globalData.system
...this.globalData.system,
},
];
console.log(this.globalData)
// 这里需要特殊处理下,先判断uri是否存在,不存在则添加,存在则更新
let uris = [];
this.imageList.forEach((item) => {
......@@ -648,7 +690,8 @@ export default {
item.highlight = false;
}
if (item.png_detail && item.png_detail.length) this.pngList = item.png_detail
if (item.png_detail && item.png_detail.length)
this.pngList = item.png_detail;
const target = this.imageList.find((img) => img.uri === item.uri);
if (target) {
......@@ -672,18 +715,37 @@ export default {
}
});
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;
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;
}
},
},
mounted() {},
mounted() {
this.socket = wsNotify;
wsNotify.eventBus.$on("open", (message) => {
this.sendMsg();
this.$nextTick(() => {
console.log(message);
});
// 这里启动一个定时器,10秒钟后,如果没有消息进来,说明当前没有在线设备
});
wsNotify.eventBus.$on("close", (message) => {
this.$nextTick(() => {
console.log(message);
});
});
wsNotify.eventBus.$on("message", (message) => {
this.$nextTick(() => {
this.handleMessage(deepClone(message));
});
});
},
destroyed() {
// 页面关闭则销毁该数据库
monitor.deleteDB()
monitor.deleteDB();
},
created() {
monitor
......@@ -703,25 +765,6 @@ export default {
.catch((err) => {
console.log(err);
});
this.socket = wsNotify;
wsNotify.eventBus.$on("open", (message) => {
this.sendMsg();
this.$nextTick(() => {
console.log(message);
});
// 这里启动一个定时器,10秒钟后,如果没有消息进来,说明当前没有在线设备
});
wsNotify.eventBus.$on("close", (message) => {
this.$nextTick(() => {
console.log(message);
});
});
wsNotify.eventBus.$on("message", (message) => {
this.$nextTick(() => {
this.handleMessage(message);
});
});
},
};
</script>
......
......@@ -30,11 +30,11 @@ module.exports = {
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
// "/api/v1": {
// target: "http://127.0.0.1:3000/",
// changeOrigin: true,
// pathRewrite: {},
// },
"/report": {
target: "http://127.0.0.1:8800/",
changeOrigin: true,
pathRewrite: {},
},
"/api/v1/evm_store": {
target: "http://store.evmiot.com/",
changeOrigin: true,
......
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