update

backend/view/monitor.py

 '''
 Author: your name
 Date: 2021-06-29 19:33:41
-LastEditTime: 2021-07-05 09:26:59
+LastEditTime: 2021-07-05 16:53:48
 LastEditors: Please set LastEditors
 Description: In User Settings Edit
 FilePath: \evm-store\backend\view\monitor.py
@@ -14,7 +14,6 @@ from tornado.websocket import WebSocketHandler, WebSocketClosedError
 import json
 import signal
 import time
-import logging
 import pprint
 import traceback
 import jwt
@@ -22,11 +21,10 @@ from typing import ( Any,)
 from threading import Timer
 from datetime import datetime, timedelta
 from app import config
+from fullstack.log import logger
 from model.monitor import session, Device, User
 from controller.monitor import insert_data, get_monitor_list, get_watch_list
 
-logger = logging.getLogger(__name__)
-
 def datetime2secs(mydate):
     return time.mktime(mydate.timetuple())
 
@@ -81,13 +79,14 @@ def pushmessage(func):
             msg, binary = ret
             try:
                 if isinstance(msg, WebsocketResponse) or isinstance(msg, dict):
-                    self.write(json.dumps(msg), binary)
+                    self.write_message(json.dumps(msg), binary)
                 elif isinstance(msg, str) or isinstance(msg, str):
-                    self.write(msg, binary)
+                    self.write_message(msg, binary)
                 else:
-                    self.write(repr(msg), binary)
+                    self.write_message(repr(msg), binary)
             except WebSocketClosedError as e:
                 logger.error(e)
+                traceback.print_exc()
                 self.on_close()
     return send
 
@@ -109,6 +108,7 @@ class BaseWebsocket(WebSocketHandler):
         if className not in self.handlers:
             self.handlers[className] = set()
         self.handlers[className].add(self)
+        logger.info(self.handlers[className])
         pprint.pprint(self.handlers)
 
     @pushmessage
@@ -118,8 +118,10 @@ class BaseWebsocket(WebSocketHandler):
     def on_close(self):
         className = self.__class__.__name__
         logger.warning("websocket of %s is closed" % className)
-        if className in self.handlers:
-            print("122 ======>", type(self.handlers), type(className), type(self.handlers[className]))
+        if className in self.handlers and self in self.handlers[className]:
+            # 更加健壮的处理是，这里需要增加一个self是否存在的判断
+            # logger.info(self.handlers[className])
+            # logger.info(id(self))
             self.handlers[className].remove(self)
 
     def check_origin(self, origin):
@@ -136,7 +138,7 @@ class BaseWebsocket(WebSocketHandler):
         for item in cls._clients:
             if message.get("imei") in item.get("devices", []):
                 item.get("context").send(json.dumps(message), binary)
-            # print(id(item.get("context")))
+                # item.get("context").write_message(json.dumps(message))
 
         # className = cls.__name__
         # message = json.dumps(message)
@@ -158,9 +160,10 @@ class NotifyHandler(BaseWebsocket):
         super(NotifyHandler, self).open()
 
     def on_message(self, message):
+        try:
             className = self.__class__.__name__
+            logger.info(message)
             message = json.loads(message)
-        try:
             # 判断消息类型
             if message.get("type"):
                 # 获取token值，检验正确与否，获取uuid
@@ -169,7 +172,7 @@ class NotifyHandler(BaseWebsocket):
                 # 认证包，认证不通过，则剔除该连接
                 if message.get("type") == "auth":
                     if not message.get("token"):
-                        self.write(json.dumps({ "code": 400, "data": None, "msg": "token can not be null" }))
+                        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()
@@ -185,7 +188,7 @@ class NotifyHandler(BaseWebsocket):
                         self._clients.append({
                             'uuid': payload.get("data").get("uuid"),
                             'context': self,
-                            'devices': lambda d:d.imei,
+                            'devices': list(map(lambda d:d.imei, devices)),
                             'ts': int(time.time())
                         })
                         self.write_message(json.dumps({ 'code': 200, 'data': None, 'msg': 'auth passed' }))
@@ -203,18 +206,21 @@ class NotifyHandler(BaseWebsocket):
                     self.write_message(json.dumps({ 'code': 200, 'data': None, 'msg': 'unkonw message packet, disconnect by server' }))
                     self.handlers[className].remove(self)
         except Exception as e:
-            self.handlers[className].remove(self)
+            # 认证失败会导致触发异常，这里不能remove(self)，否则会导致on_close方法报错
+            self.write_message(json.dumps({ 'code': 400, 'data': e.args, 'msg': "server error" }))
             logger.error(e)
-
+            traceback.print_exc()
         logger.info(message)
 
     def on_heartbeat(self):
-        className = self.__class__.__name__
         # 心跳定时器，固定间隔扫描连接列表，当连接超时，主动剔除该连接
         for i in range(len(self._clients) - 1, -1, -1):
             if int(time.time()) - self._clients[i].get("ts") > 5:
-                self._clients.remove(self._clients[i])
-                if self.handlers.get(className, None):
+                # self._clients.pop(i)
+                del self._clients[i]
+                className = self.__class__.__name__
+                if self.handlers.get(className, None) and self in self.handlers[className]:
+                    logger.info(self.handlers[className])
                     self.handlers[className].remove(self)
 
         self._timer = Timer(1, self.on_heartbeat)
@@ -231,15 +237,13 @@ class MainHandler(BaseHandler):
         # self.get_query_argument('a', value)
         # self.get_body_argument()
         # self.request.files
-        self.write("Hello, world")
+        self.write(json.dumps({ "msg": "Hello, world" }))
 
     def post(self):
         data = tornado.escape.json_decode(self.request.body)
-        print("=====>", data, type(data))
-        
-        self.write(json.dumps({ 'code': 100, 'msg': 'success' }))
+        self.write(json.dumps({ 'code': 100, 'data': data, 'msg': 'success' }))
 
-        message = {'imei': '12345678900005', 'system': {'free_size': 0}, 'lvgl': {'total_size': 5242880, 'free_cnt': 31, 'free_size': 1279664, 'free_biggest_size': 1205448, 'used_cnt': 832, 'used_pct': 76, 'frag_pct': 6}, 'evm': {'total_size': 2097152, 'free_size': 0, 'gc_usage': 50}, 'image': [{'uri': 'evue_launcher', 'length': 1043, 'png_total_count': 0, 'png_uncompressed_size': 0, 'png_file_size': 0}, {'uri': 'kdgs_1_storyList', 'length': 9608, 'png_total_count': 193, 'png_uncompressed_size': 370884, 'png_file_size': 209807}]}
+        message = {'imei': '12345678900005', 'type': 'report', 'system': {'free_size': 0}, 'lvgl': {'total_size': 5242880, 'free_cnt': 31, 'free_size': 1279664, 'free_biggest_size': 1205448, 'used_cnt': 832, 'used_pct': 76, 'frag_pct': 6}, 'evm': {'total_size': 2097152, 'free_size': 0, 'gc_usage': 50}, 'image': [{'uri': 'evue_launcher', 'length': 1043, 'png_total_count': 0, 'png_uncompressed_size': 0, 'png_file_size': 0}, {'uri': 'kdgs_1_storyList', 'length': 9608, 'png_total_count': 193, 'png_uncompressed_size': 370884, 'png_file_size': 209807}]}
         insert_data(message)
         # 这里不能使用广播，得点对点发送，有此设备的账号才能看到调试信息
         NotifyHandler.broadcastMessage(message)
@@ -303,16 +307,15 @@ class DeviceMessageHandler(BaseHandler):
     def post(self):
         data = tornado.escape.json_decode(self.request.body)
 
-        request = {
+        data.update({ 'request': {
             'host': self.request.remote_ip,
             'path': self.request.path,
             'protocol': self.request.protocol
-        }
-
-        data.update({ 'request': request })
+        } })
 
         insert_data(data)
 
+        data['type'] = 'report'
         data['request'].update({ 'timestamp': datetime.now().strftime("%Y-%m-%d %H:%M:%S") })
         NotifyHandler.broadcastMessage(data)
         self.write(json.dumps({ 'code': 100, 'message': 'success' }))

frontend/src/router/index.js

@@ -238,7 +238,7 @@ export const constantRoutes = [
             path: 'index',
             name: 'Monitor',
             component: () => import('@/views/system/monitor'),
-            meta: { title: 'monitor', icon: 'home' }
+            meta: { title: '资源监视', icon: 'home' }
         }]
     },
     {

frontend/src/utils/eventBus.js

 /*
  * @Author: your name
  * @Date: 2021-07-01 15:02:16
- * @LastEditTime: 2021-07-03 19:50:11
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-05 15:22:36
+ * @LastEditors: your name
  * @Description: In User Settings Edit
  * @FilePath: \evm-store\frontend\src\utils\eventBus.js
  */
-/*
- * @Author: your name
- * @Date: 2021-04-14 14:12:19
- * @LastEditTime: 2021-07-01 01:11:46
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \evm-store\frontend\src\utils\wsNotify.js
- */
 import Vue from "vue";
 import store from "@/store";
 

frontend/src/views/system/chart.vue

 <template>
   <div class="app-container">
-    <el-form :inline="true" :model="form" ref="query" size="mini">
+    <el-form :inline="true" ref="query" size="mini">
       <el-form-item label="设备">
         <el-select
-          v-model="watch_id"
+          v-model="device"
           filterable
           placeholder="请输入设备名称"
           @change="onChange"
@@ -12,7 +12,7 @@
             v-for="(item, index) in watchs"
             :key="index"
             :label="item.imei"
-            :value="item.id"
+            :value="item.imei"
           ></el-option>
         </el-select>
       </el-form-item>
@@ -46,12 +46,8 @@ export default {
       evmList: [],
       lvgl: {},
       lvglList: [],
-      image: [],
+      image: {},
       imageList: [],
-      form: {
-        start: null,
-        end: null,
-      },
     };
   },
   components: {
@@ -59,9 +55,6 @@ export default {
     LvglChart,
   },
   methods: {
-    sendMsg() {
-      this.socket.send("hello,world");
-    },
     fetchData() {
       this.isLoading = true;
       getWatchList()
@@ -69,62 +62,44 @@ export default {
           if (res.code == 200) this.watchs = res.data;
         })
         .catch((err) => {
-          this.$message.warning(err.msg);
+          this.$message.warning(err.msg)
         })
         .finally(() => {
           this.isLoading = false;
         });
     },
     queryData() {
-      let params = {
+      getMonitorData({
         watch: this.watch_id,
-      };
-      if (this.value2 && this.value2.length) {
-        if (this.value2.length > 1) {
-          params.start = Math.ceil(this.value2[0] / 1000);
-          params.end = Math.ceil(this.value2[1] / 1000);
-        } else {
-          params.start = Math.ceil(this.value2[0] / 1000);
-        }
-      }
-      getMonitorData(params)
+      })
         .then((res) => {
           if (res.type == "object") {
             this.evmList = res.data.evm
             this.lvglList = res.data.lvgl
             this.imageList = res.data.image
-          } else {
-            if (params.category == "evm") this.evmList = res.data
-            else if (params.category == "lvgl") this.lvglList = res.data
-            else if (params.category == "image") this.imageList = res.data
           }
         })
         .catch((err) => {
-          this.$message.warning(err.msg);
+          this.$message.warning(err.msg)
         });
     },
-    onChange(res) {
-      if (!res) return null;
-
-      var t = this.watchs.find((item) => {
-        return item.id == res;
-      });
-      if (t) this.device = t.imei;
-
-      // 清空之前数据
-
-      this.processData();
+    onChange() {
+      this.processData()
     },
     onSubmit() {
-      this.queryData();
+      this.queryData()
     },
     onReset(formName) {
-      this.$refs[formName].resetFields();
-      this.fetchData();
+      this.$refs[formName].resetFields()
+      this.fetchData()
     },
     handleMessage(message) {
       if (!this.device) this.device = message.imei;
       this.devices[message.imei] = message;
+      this.watchs.push({
+        imei: message.imei,
+        id: this.watchs.length
+      })
       this.processData()
     },
     processData() {
@@ -139,7 +114,6 @@ export default {
   created() {
     this.socket = wsNotify;
     wsNotify.eventBus.$on("open", (message) => {
-      this.sendMsg();
       this.$nextTick(() => {
         console.log(message);
       });
@@ -155,8 +129,6 @@ export default {
         this.handleMessage(message);
       });
     });
-
-    this.fetchData();
   },
 };
 </script>

frontend/src/views/system/components/EvmChart.vue

@@ -7,6 +7,7 @@ import * as echarts from "echarts";
 require("echarts/theme/macarons"); // echarts theme
 import resize from "./mixins/resize";
 import { getDateTimeString } from "@/utils/utils";
+import { wsNotify } from "@/utils/eventBus.js";
 
 // function randomData() {
 //   now = new Date(+now + oneDay);
@@ -50,7 +51,7 @@ export default {
     },
     height: {
       type: String,
-      default: "350px",
+      default: "270px",
     },
     autoResize: {
       type: Boolean,
@@ -128,6 +129,10 @@ export default {
     this.$nextTick(() => {
       this.initChart();
     });
+
+    wsNotify.eventBus.$on("resize", () => {
+      if (this.chart) this.chart.resize()
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -202,13 +207,13 @@ export default {
             show: false,
           },
         },
-        // grid: {
-        //   left: 10,
-        //   right: 10,
-        //   bottom: 20,
-        //   top: 30,
-        //   containLabel: true,
-        // },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 10,
+          top: 50,
+          containLabel: true,
+        },
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -233,6 +238,11 @@ export default {
         },
         legend: {
           data: this.legendData,
+          selected: {
+            heap_total_size: false,
+            stack_total_size: false,
+            stack_used_size: false,
+          },
         },
         series: this.series,
       });

frontend/src/views/system/components/LvglChart.vue

@@ -7,6 +7,7 @@ import * as echarts from "echarts";
 require("echarts/theme/macarons"); // echarts theme
 import resize from "./mixins/resize";
 import { getDateTimeString } from "@/utils/utils";
+import { wsNotify } from "@/utils/eventBus.js";
 
 const seriesData = {
   frag_pct: [],
@@ -31,7 +32,7 @@ export default {
     },
     height: {
       type: String,
-      default: "350px",
+      default: "270px",
     },
     autoResize: {
       type: Boolean,
@@ -113,7 +114,7 @@ export default {
           data: seriesData.used_cnt,
         },
         {
-          name: "used_pctused_pct",
+          name: "used_pct",
           type: "line",
           showSymbol: false,
           emphasis: {
@@ -152,6 +153,10 @@ export default {
     this.$nextTick(() => {
       this.initChart();
     });
+
+    wsNotify.eventBus.$on("resize", () => {
+      if (this.chart) this.chart.resize()
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -201,10 +206,17 @@ export default {
         title: {
           text: "LVGL",
         },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 10,
+          top: 50,
+          containLabel: true,
+        },
         xAxis: {
           type: "time",
           splitLine: {
-            show: false,
+
           },
           axisLabel: {
             formatter: "{HH}:{mm}:{ss}",
@@ -214,7 +226,7 @@ export default {
           type: "value",
           // boundaryGap: [0, "100%"],
           splitLine: {
-            show: false,
+
           },
         },
         tooltip: {
@@ -227,6 +239,13 @@ export default {
         },
         legend: {
           data: this.legendData,
+          selected: {
+            frag_pct: false,
+            free_biggest_size: false,
+            free_cnt: false,
+            free_size: false,
+            total_size: false,
+          },
         },
         series: this.series,
       });