mod：修改样式

frontend/src/App.vue

 <script setup lang="ts">
-// import Chat from '@/views/Chat'
+import Chat from '@/views/Chat'
 // import FileDown from './views/FileDown.vue';
 // import Upload from './views/Upload.vue';
 // import Tabs from './views/Tabs.vue';
-import DeviceCommunication from '@/views/DeviceCommunication';
+// import DeviceCommunication from '@/views/DeviceCommunication';
 </script>
 
 
 <template>
-  <!-- <chat /> -->
+  <chat />
   <!-- <FileDown /> -->
   <!-- <Upload /> -->
   <!-- <Tabs /> -->
-  <device-communication />
+  <!-- <device-communication /> -->
 </template>

frontend/src/components/DevicePerformanceTabel.vue

 <template>
+  <div>
+    <div class="text-right">
+      <el-button type="danger" @click="del" :icon="Delete" circle />
+    </div>
     <el-table :data="tableData" class="w-full">
       <el-table-column v-for="(_, key) in tableData[0]" :label="key" :prop="key" width="150" />
     </el-table>
+  </div>
 </template>
 
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
 
 type propsType = {
   groupName: string
@@ -17,8 +23,9 @@ type tableDataType = Record<string, string>[]
 // const tableData = ref<tableDataType>([{}]);
 const tableData = ref<tableDataType>([{}])
 
+let table_websocket: WebSocket | null = null
 onMounted(() => {
-  let table_websocket = new WebSocket(
+  table_websocket = new WebSocket(
     'ws://' + window.location.host + '/ws/chat/' + props.groupName! + '/'
   )
 
@@ -35,4 +42,17 @@ onMounted(() => {
     console.error('Table socket closed unexpectedly', e);
   }
 })
+
+const emits = defineEmits(['deleteTable'])
+
+const del = () => {
+  emits('deleteTable')
+}
+
+onBeforeUnmount(() => {
+  if (table_websocket!.OPEN) {
+    table_websocket!.close()
+  }
+})
+
 </script>

frontend/src/views/Chat.vue

+<template>
+  <el-scrollbar ref="scrollbarRef" style="height: 25rem;" class="mb-10" always>
+    <div ref="innerRef">
+      <p v-for="item in items" :key="item" class="scrollbar-demo-item text-sm">
+        <div>{{ JSON.parse(item)?.ts }}</div>
+        {{ item }}
+      </p>
+    </div>
+  </el-scrollbar>
+
+  <el-input v-model="input" placeholder="Please input" @keyup.enter="send"></el-input>
+  <el-button @click="send">Send</el-button>
+
+  <device-performance-table 
+    v-for="param in deviceTableParams" 
+    mt-5 
+    :group-name="param" 
+    :key="param" 
+    @delete-table="deleteDeviceInfo(param)" />
+  <el-button @click="addDeviceTable" class="mt-5" >Add table</el-button>
+</template>
+
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { ElScrollbar, ElInput, ElButton } from 'element-plus';
@@ -80,24 +102,11 @@ const addDeviceTable = () => {
     })
 }
 
-</script>
-
-<template>
-  <el-scrollbar ref="scrollbarRef" mb-10 height="400px" always>
-    <div ref="innerRef">
-      <p v-for="item in items" :key="item" class="scrollbar-demo-item text-sm">
-        <div>{{ JSON.parse(item)?.ts }}</div>
-        {{ item }}
-      </p>
-    </div>
-  </el-scrollbar>
-
-  <el-input v-model="input" placeholder="Please input" @keyup.enter="send"></el-input>
-  <el-button @click="send">Send</el-button>
+const deleteDeviceInfo = (param: string) => {
+  deviceTableParams.value.splice(deviceTableParams.value.indexOf(param), 1);
+}
 
-  <device-performance-table v-for="param in deviceTableParams" mt-5 :group-name="param" :key="param" />
-  <el-button @click="addDeviceTable" class="mt-5" >Add table</el-button>
-</template>
+</script>
 
 <style scoped>
 .scrollbar-demo-item {

mqtt/mqtt.py

@@ -33,21 +33,21 @@ def send_message(data: dict, device_name: str):
     """
 
     send_websocket_message(data)
-    dev_info = TableXproAllDevinfo.objects.filter(dev_name=device_name).first()
-    if "TCP" in dev_info.comunitate_mode.upper():
-        name = dev_info.tcp_port
-    elif "UDP" in dev_info.comunitate_mode.upper():
-        name = dev_info.udp_port_src
-    print(name)
-    send_websocket_message(data, group_name=f'chat_{name}')
-
-    # cmds = data.get('CMDS')
-    # if cmds is None:
-    #     return
-    # if cmds[0] == '$':
-    #     send_websocket_message(data, group_name="chat_acu7m5")
-    # else:
-    #     send_websocket_message(data, group_name="chat_hwf")
+    # dev_info = TableXproAllDevinfo.objects.filter(dev_name=device_name).first()
+    # if "TCP" in dev_info.comunitate_mode.upper():
+    #     name = dev_info.tcp_port
+    # elif "UDP" in dev_info.comunitate_mode.upper():
+    #     name = dev_info.udp_port_src
+    # print(name)
+    # send_websocket_message(data, group_name=f'chat_{name}')
+
+    cmds = data.get('CMDS')
+    if cmds is None:
+        return
+    if cmds[0] == '$':
+        send_websocket_message(data, group_name="chat_acu7m5")
+    else:
+        send_websocket_message(data, group_name="chat_hwf")
 
 
 client = mqtt.Client()