fix：修复 删除通信参数，但是面板未更新

frontend/src/components/device_communication/DeviceInfoCard.vue

@@ -36,8 +36,9 @@
 
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
+import { ElMessage } from 'element-plus';
 
 import type { DeviceInfo } from '@/components/device_communication/types';
 import EditDialog from './EditDialog.vue';
@@ -58,14 +59,22 @@ onMounted(() => {
   deviceInfo.value.checked_performance_fields = checked_performance_fields.value
 })
 
+// 观察 device_info 是否有变化，如果有变化则更新
+watch(() => props.deviceInfo, () => {
+  deviceInfo.value = props.deviceInfo
+})
+
 const emit = defineEmits(['deleteDeviceInfo'])
 const del = () => {
 	let station_id = deviceInfo.value.station_id
 	let id = deviceInfo.value.id
 	axios.delete('/api/device_communication/communicate/' + id + '/')
-	.then((res) => {
+	.then(() => {
 		emit('deleteDeviceInfo', { station_id, id })
-		console.log(res);
+    ElMessage({
+      message: '删除成功',
+      type: 'success',
+    })
 	})
 	.catch((err) => {
 		console.log(err);

frontend/src/components/device_communication/EditDialog.vue

@@ -278,13 +278,12 @@ const submit = () => {
     udp_port_dst: form.value.udp_port_dst,
     performance_fields: JSON.stringify(checked_performance_fields.value)
   }
-  console.log(data)
 
   if (props.type === "add") {
     // 添加通信参数方法
     axios.post('/api/device_communication/communicate/', data)
       .then((res) => {
-        console.log(res);
+        console.log(res.data)
         ElMessage({
           message: '创建成功',
           type: 'success'

frontend/src/views/DeviceCommunication.vue

@@ -7,9 +7,9 @@
       </div>
       <div class="demo-collapse">
         <el-collapse>
-          <el-collapse-item class="pt-10" v-for="([station_level, device_info_list]) in Object.entries(device_infos)">
+          <el-collapse-item class="pt-10" v-for="(device_info_list, station_id) in device_infos">
             <template #title>
-              <span class="text-2xl font-bold"> {{ station_level }} </span>
+              <span class="text-2xl font-bold"> {{ station_id }} </span>
             </template>
             <device-info-card @deleteDeviceInfo="deleteDeviceInfo" v-for="device_info in device_info_list"
               :device-info="device_info" />
@@ -91,6 +91,13 @@ type param = {
 const deleteDeviceInfo = (params: param) => {
   for (let i = 0; i < device_infos.value[params.station_id].length; i++) {
     if ((device_infos.value[params.station_id])[i].id === params.id) {
+      // 如果 station_id 对应的设备列表为空,则删除 station_id
+      if (device_infos.value[params.station_id].length === 1) {
+        delete device_infos.value[params.station_id]
+        return
+      }
+
+      // 删除
       device_infos.value[params.station_id].splice(i, 1)
     }
   }
@@ -101,7 +108,7 @@ const addDevice = () => {
   isShow.value = true
 }
 
-const changeDeviceInfo = (params: param) => {
+const changeDeviceInfo = (params: DeviceInfo) => {
   console.log('changeDeviceInfo')
   console.log(params);
 }