feat：两个设备数据实时显示

chat/consumers.py

@@ -75,7 +75,7 @@ class ChatConsumer(AsyncWebsocketConsumer):
         message = dict(event["message"])
 
         # Send message to WebSocket
-        await self.send(text_data=json.dumps({"message": [message], "column": list(message.keys())}))
+        await self.send(text_data=json.dumps({"message": [message]}))
         # await self.send(bytes_data=message)
 
 

frontend/src/components/DevicePerformanceTabel.vue

+<template>
+  <el-table :data="tableData" class="w-full">
+    <el-table-column v-for="(_, key) in tableData[0]" :label="key" :prop="key" width="150" />
+  </el-table>
+</template>
+
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+type propsType = {
+  groupName: string
+}
+const props = defineProps<propsType>()
+
+type tableDataType = Record<string, string>[]
+const tableData = ref<tableDataType>([{}]);
+
+onMounted(() => {
+  let table_websocket = new WebSocket(
+    'ws://' + window.location.host + '/ws/chat/' + props.groupName! + '/'
+  )
+
+  table_websocket.onmessage = (e) => {
+    // console.log(e.data);
+    let data = JSON.parse(e.data).message
+    for (const [key, value] of Object.entries(data[0] as Record<string, string>)) {
+      tableData.value[0][key] = value
+    }
+  }
+
+  table_websocket.onclose = (e) => {
+    console.error('Table socket closed unexpectedly', e);
+  }
+})
+</script>

frontend/src/components/Test.vue

-<script setup lang="ts">
-import { ref } from 'vue';
-
-
-const test = ref('test')
-
-</script>
-
-
-<template>
-
-<h1> {{ test }} </h1>
-
-<br>
-
-</template>
\ No newline at end of file

frontend/src/views/Chat.vue

 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
-import { ElScrollbar, ElInput, ElButton, ElTable } from 'element-plus';
+import { ElScrollbar, ElInput, ElButton } from 'element-plus';
+import  DevicePerformanceTable  from '@/components/DevicePerformanceTabel'
 
 const innerRef = ref<HTMLDivElement>();
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
@@ -35,8 +36,8 @@ onMounted(() => {
   );
 
   chatSocket.onmessage = (e) => {
-    console.log(e);
-    console.log(e.data)
+    // console.log(e);
+    // console.log(e.data)
     // // 接收到的是字节流数据（ArrayBuffer）
     // const byteArray = new Uint8Array(e.data);
     // // 将字节流转换为字符串或其他格式进行处理
@@ -51,29 +52,6 @@ onMounted(() => {
   };
 })
 
-// =========================================================
-
-type tableColumnType = string[]
-type tableDataType = Map<string, string>[]
-const tableColumn = ref<tableColumnType>([]);
-const tableData = ref<tableDataType>([]);
-
-onMounted(() => {
-  let table_websocket = new WebSocket(
-    'ws://' + window.location.host + '/ws/chat/table/'
-  )
-
-  table_websocket.onmessage = (e) => {
-    // console.log(e.data);
-    tableColumn.value = JSON.parse(e.data).column
-    tableData.value = JSON.parse(e.data).message
-  }
-
-  table_websocket.onclose = (e) => {
-    console.error('Table socket closed unexpectedly', e);
-  }
-})
-
 </script>
 
 <template>
@@ -88,11 +66,9 @@ onMounted(() => {
 
   <el-input v-model="input" placeholder="Please input" @keyup.enter="send"></el-input>
   <el-button @click="send">Send</el-button>
-  <br/>
 
-  <el-table :data="tableData" class="w-full">
-    <el-table-column v-for="item in tableColumn" :label="item" :prop="item" width="100"/>
-  </el-table>
+  <device-performance-table group-name="acu7m5" mt-5 />
+  <device-performance-table group-name="hwf" mt-5/>
 </template>
 
 <style scoped>

frontend/vite.config.ts.timestamp-1693012103983-a44e5ed33aab5.mjs

+// vite.config.ts
+import { defineConfig } from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/vite/dist/node/index.js";
+import vue from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import legacy from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/@vitejs/plugin-legacy/dist/index.mjs";
+import UnoCSS from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/unocss/dist/vite.mjs";
+import { resolve } from "path";
+import process from "process";
+function pathResolve(dir) {
+  return resolve(process.cwd(), ".", dir);
+}
+var vite_config_default = defineConfig({
+  resolve: {
+    alias: {
+      "@": pathResolve("src")
+    },
+    extensions: [".ts", ".js", ".vue"]
+    // 使用路径别名时想要省略的后缀名，可以自己 增减
+  },
+  plugins: [
+    legacy({
+      targets: ["defaults", "not IE 11"]
+    }),
+    vue(),
+    UnoCSS()
+  ],
+  base: "./",
+  server: {
+    host: "0.0.0.0"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJXOlxcXFx3b3JrXFxcXE5ldENvcGlsb3RcXFxcdGVzdFxcXFx2dWVfZGphbmdvXFxcXGZyb250ZW5kXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJXOlxcXFx3b3JrXFxcXE5ldENvcGlsb3RcXFxcdGVzdFxcXFx2dWVfZGphbmdvXFxcXGZyb250ZW5kXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9XOi93b3JrL05ldENvcGlsb3QvdGVzdC92dWVfZGphbmdvL2Zyb250ZW5kL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCB2dWUgZnJvbSAnQHZpdGVqcy9wbHVnaW4tdnVlJ1xuaW1wb3J0IGxlZ2FjeSBmcm9tICdAdml0ZWpzL3BsdWdpbi1sZWdhY3knXG5pbXBvcnQgVW5vQ1NTIGZyb20gJ3Vub2Nzcy92aXRlJ1xuaW1wb3J0IHsgcmVzb2x2ZSB9IGZyb20gJ3BhdGgnXG5pbXBvcnQgcHJvY2VzcyBmcm9tICdwcm9jZXNzJ1xuXG5mdW5jdGlvbiBwYXRoUmVzb2x2ZShkaXI6IHN0cmluZyk6IHN0cmluZyB7XG4gIHJldHVybiByZXNvbHZlKHByb2Nlc3MuY3dkKCksICcuJywgZGlyKVxufTtcblxuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiB7XG4gICAgICBcIkBcIjogcGF0aFJlc29sdmUoJ3NyYycpXG4gICAgfSxcbiAgICBleHRlbnNpb25zOiBbJy50cycsICcuanMnLCAnLnZ1ZSddIC8vIFx1NEY3Rlx1NzUyOFx1OERFRlx1NUY4NFx1NTIyQlx1NTQwRFx1NjVGNlx1NjBGM1x1ODk4MVx1NzcwMVx1NzU2NVx1NzY4NFx1NTQwRVx1N0YwMFx1NTQwRFx1RkYwQ1x1NTNFRlx1NEVFNVx1ODFFQVx1NURGMSBcdTU4OUVcdTUxQ0ZcbiAgfSxcbiAgcGx1Z2luczogW1xuICAgIGxlZ2FjeSh7XG4gICAgICB0YXJnZXRzOiBbJ2RlZmF1bHRzJywgJ25vdCBJRSAxMSddLFxuICAgIH0pLFxuICAgIHZ1ZSgpLFxuICAgIFVub0NTUygpXG4gIF0sXG4gIGJhc2U6ICAnLi8nLFxuICBzZXJ2ZXI6IHtcbiAgICBob3N0OiAnMC4wLjAuMCcsXG4gIH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQStULFNBQVMsb0JBQW9CO0FBQzVWLE9BQU8sU0FBUztBQUNoQixPQUFPLFlBQVk7QUFDbkIsT0FBTyxZQUFZO0FBQ25CLFNBQVMsZUFBZTtBQUN4QixPQUFPLGFBQWE7QUFFcEIsU0FBUyxZQUFZLEtBQXFCO0FBQ3hDLFNBQU8sUUFBUSxRQUFRLElBQUksR0FBRyxLQUFLLEdBQUc7QUFDeEM7QUFJQSxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxLQUFLLFlBQVksS0FBSztBQUFBLElBQ3hCO0FBQUEsSUFDQSxZQUFZLENBQUMsT0FBTyxPQUFPLE1BQU07QUFBQTtBQUFBLEVBQ25DO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxTQUFTLENBQUMsWUFBWSxXQUFXO0FBQUEsSUFDbkMsQ0FBQztBQUFBLElBQ0QsSUFBSTtBQUFBLElBQ0osT0FBTztBQUFBLEVBQ1Q7QUFBQSxFQUNBLE1BQU87QUFBQSxFQUNQLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNSO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

mqtt/mqtt.py

@@ -35,7 +35,10 @@ def on_message(mqtt_client, userdata, msg):
     # data = msg.payload.decode('utf-8')
     print(f'Received message on topic: {msg.topic} with payload: {data}')
     send_websocket_message(data)
-    send_websocket_message(data, group_name="chat_table")
+    if data['CMDS'][0] == '$':
+        send_websocket_message(data, group_name="chat_acu7m5")
+    else:
+        send_websocket_message(data, group_name="chat_hwf")
 
 
 client = mqtt.Client()