🐞 fix(): 解决前端两处问题

一、解决JWT过期导致无法接收消息问题；二、解决前端无法选择查看指定页面图片问题

backend/view/monitor.py

@@ -133,8 +133,8 @@ class BaseWebsocket(WebSocketHandler):
     @classmethod
     def broadcastMessage(cls, message):
         # pprint.pprint(cls.handlers)
-        pprint.pprint(message)
-        print("=======>", cls._clients)
+        # pprint.pprint(message)
+        logger.info(cls._clients)
 
         if not message.get("imei"):
             return False
@@ -225,9 +225,12 @@ class NotifyHandler(BaseWebsocket):
                 else:
                     self.write_message(json.dumps({ 'code': 200, 'data': None, 'msg': 'unkonw message packet, disconnect by server' }))
                     self.handlers[className].remove(self)
+        except jwt.exceptions.InvalidSignatureError as e:
+            logger.error(e)
+            self.write_message(json.dumps({ 'code': 401, 'data': None, 'msg': 'auth failed' }))
         except Exception as e:
             # 认证失败会导致触发异常，这里不能remove(self)，否则会导致on_close方法报错
-            self.write_message(json.dumps({ 'code': 400, 'data': e.args, 'msg': "server error" }))
+            self.write_message(json.dumps({ 'code': 500, 'data': e.args, 'msg': "server error" }))
             logger.error(e)
             traceback.print_exc()
         logger.info(message)
@@ -247,8 +250,8 @@ class NotifyHandler(BaseWebsocket):
 
 class MainHandler(BaseHandler):
     def get(self, *args, **kwargs):
-        print("#############", args)
-        print("/////////////", kwargs)
+        print(args)
+        print(kwargs)
         print(self.request.path)    # 请求路径
         print(self.request.method)  # 请求方法
         print(self.request.host)    # IP地址
@@ -279,8 +282,8 @@ class MainHandler(BaseHandler):
 class WatchHandler(BaseHandler):
     def get(self, *args, **kwargs):
         # 获取手表列表
-        print("#############", args)
-        print("/////////////", kwargs)
+        print(args)
+        print(kwargs)
         print(self.request.path)    # 请求路径
         print(self.request.method)  # 请求方法
         print(self.request.host)    # IP地址

frontend/src/utils/eventBus.js

 /*
  * @Author: your name
  * @Date: 2021-07-01 15:02:16
- * @LastEditTime: 2021-07-25 18:24:48
+ * @LastEditTime: 2021-07-28 10:42:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \evm-store\frontend\src\utils\eventBus.js
@@ -9,7 +9,7 @@
 import Vue from "vue";
 import store from "@/store";
 
-export const wsNotify = new WebSocket(
+export let wsNotify = new WebSocket(
   `ws://${window.location.hostname}:3000/ws/v1/notify`
 );
 
@@ -17,6 +17,12 @@ window.wsNotify = wsNotify;
 
 wsNotify.eventBus = new Vue();
 
+wsNotify.eventBus.$on("reconnect", () => {
+  wsNotify = new WebSocket(
+    `ws://${window.location.hostname}:3000/ws/v1/notify`
+  );
+})
+
 let timer = null;
 
 wsNotify.onopen = function (event) {

frontend/src/views/system/login.vue

@@ -161,7 +161,12 @@ export default {
         });
     },
   },
-  created() {},
+  created() {
+    if (this.$route.query.action && this.$route.query.action === "refresh") {
+      // 刷新的目的是为了让websocket重新连接
+      window.location.reload()
+    }
+  },
   mounted() {},
   beforeMount() {},
 };

frontend/src/views/system/monitor.vue

@@ -261,6 +261,7 @@
               border
               fit
               :row-class-name="tableRowClassName"
+              @row-click="onTableRowClick"
             >
               <el-table-column
                 prop="uri"
@@ -420,7 +421,8 @@ const dbObject = {
   ],
 };
 
-const indexedDb = Database(), jsonFile = "evue-monitor.json";
+const indexedDb = Database(),
+  jsonFile = "evue-monitor.json";
 let monitor = new indexedDb(dbObject);
 
 function resetResult() {
@@ -506,6 +508,7 @@ export default {
       lvglList: [],
       image: {},
       imageList: [],
+      currentPngList: [],
       socket: null,
       form: {
         system: ["free_size", "free_space_size", "used_space_size"],
@@ -542,6 +545,9 @@ export default {
     SystemChart,
   },
   methods: {
+    onTableRowClick(row) {
+      this.pngList = this.currentPngList[row.uri]
+    },
     getTemplate() {
       getTemplate()
         .then((res) => {
@@ -552,6 +558,14 @@ export default {
         });
     },
     getReport() {
+      setTemplate({ templateName: jsonFile })
+        .then((res) => {
+          console.log(res.msg);
+        })
+        .catch((err) => {
+          console.error(err.msg);
+        });
+
       wsNotify.eventBus.$emit("exportImg");
       monitor
         .getAllData((params) => {
@@ -786,6 +800,12 @@ export default {
       this.socket.send(message);
     },
     handleMessage(msg) {
+      if (msg.code === 401) {
+        this.$store.dispatch("user/removeRole");
+        this.$store.dispatch("user/removeToken");
+        // this.$router.push("/login?action=refresh");
+        wsNotify.$emit("reconnect")
+      }
       if (msg.type !== "report" || !msg.imei) return null;
 
       // 将设备发送过来的消息存储到浏览器中
@@ -813,6 +833,13 @@ export default {
       }
 
       this.globalData = msg;
+      deepClone(msg).image.forEach(item => {
+        if (item.png_detail && item.png_detail.length) {
+          this.currentPngList[item.uri] = item.png_detail
+        } else {
+          this.currentPngList[item.uri] = []
+        }
+      })
       this.resetData(m);
     },
     processData(msg) {
@@ -858,8 +885,8 @@ export default {
       wsNotify.eventBus.$emit("clear-lvgl-chart");
 
       // 清空各个表格数据
-      this.imageList = []
-      this.pngList = []
+      this.imageList = [];
+      this.pngList = [];
 
       // this.processData(this.devices[this.device]);
       // this.resetData();
@@ -926,7 +953,6 @@ export default {
   mounted() {
     this.socket = wsNotify;
     wsNotify.eventBus.$on("exported", (res) => {
-      console.log(res);
       if (res.type === "evm") result.evmImg = res.data;
       else if (res.type === "lvgl") result.lvglImg = res.data;
       else if (res.type === "system") result.systemImg = res.data;
@@ -972,14 +998,8 @@ export default {
         }
       })
       .catch((err) => {
-        console.log(err);
+        console.error(err);
       });
-
-    setTemplate({ templateName: jsonFile }).then(res => {
-      console.log(res.msg)
-    }).catch(err => {
-      console.log(err.msg)
-    })
   },
 };
 </script>

tools/build_out/controllers/menu.py

+'''
+Author: your name
+Date: 2021-07-27 16:19:06
+LastEditTime: 2021-07-28 09:28:49
+LastEditors: your name
+Description: In User Settings Edit
+FilePath: \evm-store\tools\build_out\controllers\menu.py
+'''
 #!/usr/bin/env python
 # -*- coding: utf_8 -*-
 
@@ -11,11 +19,14 @@ class MenuResource(object):
     def __init__(self):
         super().__init__()
 
-
     def Treelist(self, params={}, jwt={}):
         filters = [MenuModel.is_delete==False]
-        result = MenuModel.query.filter(*filters).first()
+        result = MenuModel.query.filter(*filters).all()
         if result:
+            data = []
+            for item in result:
+                t = item.dict()
+                data.append(t)
             return result, ResponseCode.HTTP_SUCCESS
         return None, ResponseCode.HTTP_NOT_FOUND
 

tools/build_out/models/base.py

+'''
+Author: your name
+Date: 2021-07-15 09:33:39
+LastEditTime: 2021-07-28 09:38:58
+LastEditors: your name
+Description: In User Settings Edit
+FilePath: \evm-store\tools\build_out\models\base.py
+'''
 #!/usr/bin/env python
 # -*- coding: utf_8 -*-
 
@@ -23,6 +31,7 @@ class PrimaryModel(BaseModel):
     __abstract__ = True
     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
     uuid = db.Column(db.String(64), primary_key=False, default=generate_uuid)
+    sort = db.Column(db.Integer, default=0)
 
 class AutoBaseModel(BaseModel):
     __abstract__ = True

tools/build_out/models/menu.py

+'''
+Author: your name
+Date: 2021-07-27 16:19:06
+LastEditTime: 2021-07-28 09:23:23
+LastEditors: your name
+Description: In User Settings Edit
+FilePath: \evm-store\tools\build_out\models\menu.py
+'''
 #!/usr/bin/env python
 # -*- coding: utf_8 -*-
 
+import copy
 from application.app import db, ma
 from .base import PrimaryModel 
 from marshmallow import Schema, fields, INCLUDE, EXCLUDE
@@ -9,11 +18,11 @@ class MenuModel(PrimaryModel):
     __tablename__ = 'evm_menu'
 
     name = db.Column(db.String(100), nullable = True)
-    parentId = db.Column(db.String(100), nullable = True)
+    parent_id = db.Column(db.Integer, default=0, nullable = True)
     path = db.Column(db.String(100), nullable = True)
     disabled = db.Column(db.Boolean, nullable = True, default = False)
     fixed = db.Column(db.Boolean, nullable = False, default = False)
-    hasChildren = db.Column(db.Boolean, nullable = True, default = False)
+    has_children = db.Column(db.Boolean, nullable = True, default = False)
     icon = db.Column(db.String(100), nullable = True, default = '')
 
     # __table_args__ = (
@@ -22,11 +31,11 @@ class MenuModel(PrimaryModel):
 
     def __init__(self, name, parentId, path, disabled=False, fixed=False, hasChildren=False, icon=''):
         self.name = name
-        self.parentId = parentId
+        self.parent_id = parentId
         self.path = path
         self.disabled = disabled
         self.fixed = fixed
-        self.hasChildren = hasChildren
+        self.has_children = hasChildren
         self.icon = icon
 
     def __repr__(self):
@@ -34,11 +43,88 @@ class MenuModel(PrimaryModel):
 
     def to_dict(self):
         return {
+            'id': self.id,
             'name': self.name,
-            'parentId': self.parentId,
+            'parentId': self.parent_id,
             'path': self.path,
             'disabled': self.disabled,
             'fixed': self.fixed,
-            'hasChildren': self.hasChildren,
+            'hasChildren': self.has_children,
             'icon': self.icon,
+            'sort': self.sort,
+            'remark': self.remark,
+            'deleted': self.is_delete,
+            'createUser': self.create_by,
+            'updateUser': self.update_by,
+            'createTime': self.create_at.strftime("%Y-%m-%d %H:%M:%S") if self.create_at else None,
+            "updateTime": self.update_at.strftime("%Y-%m-%d %H:%M:%S") if self.update_at else None,
         }
+
+class TreeMenuNode:
+    """树形菜单节点"""
+
+    def __init__(self, pk, title, code, icon_class, url, order, child, parent):
+        self.pk = pk
+        self.title = title
+        self.code = code
+        self.icon_class = icon_class
+        self.url = url
+        self.order = order
+        self.child = child
+        self.parent = parent
+
+    def count(self):
+        if not self.child:
+            return 0
+        return len(self.child)
+
+
+class HandleTreeMenu:
+    """处理树形侧边栏菜单"""
+
+    def __init__(self, menus):
+        self.menus = menus
+        self.tree_menu = []
+
+    def __iter__(self):
+        if self.tree_menu:
+            return iter(self.tree_menu)
+        return iter([])
+
+    @staticmethod
+    def get_complete_menu_structure(_menu_list):
+        """得到完整的菜单结构"""
+        menu_list = copy.copy(_menu_list)
+        for menu in menu_list:
+            if menu.parent and menu.parent not in menu_list:
+                menu_list.append(menu.parent)
+                menu_list.extend(HandleTreeMenu.get_complete_menu_structure(menu_list))
+        return menu_list
+
+    def convert_to_tree(self):
+        """转换BaseQuery为MenuTree结构"""
+        complete_menu = HandleTreeMenu.get_complete_menu_structure(self.menus)
+        # 所有顶级菜单
+        top_menu = [menu for menu in complete_menu if not menu.parent]
+        for menu in top_menu:
+            current_menu = TreeMenuNode(menu.pk, menu.title, menu.code, menu.icon_class, menu.url, menu.order, [], None)
+            current_menu = self._recursive_menu(menu, current_menu)
+            self.tree_menu.append(current_menu)
+
+    def _recursive_menu(self, base_menu, base_tree_menu):
+        """由上往下递归菜单得到所有菜单并转换为TreeMenuNode格式"""
+        complete_menu = HandleTreeMenu.get_complete_menu_structure(self.menus)
+        child_menu = [menu for menu in complete_menu if menu.parent == base_menu]  # 父节点为base_menu的子节点
+
+        for menu in child_menu:
+            current_menu = TreeMenuNode(menu.pk, menu.title, menu.code, menu.icon_class, menu.url, menu.order, [], base_tree_menu)
+            current_menu = self._recursive_menu(menu, current_menu)
+            base_tree_menu.child.append(current_menu)
+        return base_tree_menu
+
+if __name__ == '__main__':
+    # 使用方法
+    menus = MenuModel.query.all()  # 这里是直接在数据库里面查询出来的, 用户私有权限表
+    tree_menu = HandleTreeMenu(menus)# 创建一个对象
+    tree_menu.convert_to_tree() # 执行转换方法
+    print(tree_menu.tree_menu) # 得到已经转换的菜单

tools/build_out/tests/http_interval.py

@@ -93,7 +93,7 @@ def send_request(imei):
             'png_file_size': random.randint(0, 10000)
         })
 
-        r = requests.post("http://store.evmiot.com/api/v1/evm_store/monitor", data=json.dumps(payload))
+        r = requests.post("http://localhost:3000/api/v1/evm_store/monitor", data=json.dumps(payload))
 
         print(r.status_code)
         print(r.json())