feat：删除通信参数

device_communication/urls.py

@@ -10,7 +10,7 @@ router.register('device_communication/simulate_communicate',
 
 urlpatterns = [
     re_path(r'^device_communication/$', views.get_protocol_names),
-    re_path(r'^device_communication/protocol_performance/$', views.get_protocol_field_names),
+    re_path(r'^device_communication/protocol_performance/(?P<protocol_name>.+)/$', views.get_protocol_field_names),
     re_path(r'^device_communication/set_communication_to_devinfo_table/$', 
             views.set_communication_to_devinfo_table),
 ]

device_communication/views.py

@@ -23,15 +23,11 @@ def get_protocol_names(request):
     return Response(data=res_data, status=status.HTTP_200_OK)
 
 
-@api_view(['POST'])
-def get_protocol_field_names(request):
+@api_view(['GET'])
+def get_protocol_field_names(request, protocol_name):
     """
     获取指定协议下的指令集
     """
-    protocol_name = request.data.get('protocol_name')
-    if protocol_name is None or protocol_name == '': 
-        return Response(status=status.HTTP_400_BAD_REQUEST)
-
     # 获取该协议下的指令集合
     cmds = AllProtocolDefinAndVersion.objects.filter(protocol_name=protocol_name, cmd_type='RX').all()
     cmd_set = set([cmd.cmd_name for cmd in cmds])

frontend/src/components/device_communication/DeviceInfoCard.vue

@@ -2,7 +2,7 @@
 	<el-descriptions :title="props.deviceInfo.device_name" :column=1>
 		<template #extra>
 			<el-button type="danger" size="small" @click="del">delete</el-button>
-			<el-button type="primary" size="small" @click="edit">Edit</el-button>
+			<el-button type="primary" size="small" @click="dialogFormVisible = true">Edit</el-button>
 		</template>
 		<el-descriptions-item label="协议名">{{ props.deviceInfo.protocol_name }}</el-descriptions-item>
 		<el-descriptions-item label="通信参数" :column=3>
@@ -11,7 +11,7 @@
 			<span ml-9> {{ port }} </span>
 		</el-descriptions-item>
 		<el-descriptions-item label="性能参数">
-			<el-tag v-for="tag in performance_fields" :key="tag" class="mx-1">
+			<el-tag v-for="tag in checked_performance_fields" :key="tag" class="mx-1">
 				{{ tag }}
 			</el-tag>
 		</el-descriptions-item>
@@ -20,7 +20,7 @@
 
 	<!-- Form -->
 	<el-dialog v-model="dialogFormVisible" title="编辑通信参数">
-    <el-form :model="form" >
+		<el-form :model="form">
 			<el-form-item label="设备名称" :label-width="formLabelWidth">
 				<el-input v-model="form.device_name" autocomplete="false" />
 			</el-form-item>
@@ -48,16 +48,21 @@
 				<el-input v-model="form.tcp_port" autocomplete="false" />
 			</el-form-item>
 			<el-form-item label="监控属性" :label-width="formLabelWidth">
-				<el-tag v-for="tag in performance_fields" :key="tag" class="mx-1 mt-1" closable @close="handleClose(tag)">
-					{{ tag }}
-				</el-tag>
+				<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+					Check all
+				</el-checkbox>
+				<el-checkbox-group v-model="checked_performance_fields" @change="handleCheckedCitiesChange">
+					<el-checkbox v-for="city in performance_fields" :key="city" :label="city">
+						{{ city }}
+					</el-checkbox>
+				</el-checkbox-group>
 			</el-form-item>
 
 		</el-form>
 		<template #footer>
 			<span class="dialog-footer">
 				<el-button @click="dialogFormVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false">
+				<el-button type="primary" @click="update_communication">
 					Confirm
 				</el-button>
 			</span>
@@ -71,6 +76,7 @@ import { onMounted, ref } from 'vue';
 import axios from 'axios';
 
 import type { DeviceInfo } from '@/components/device_communication/types';
+import type { CheckboxValueType } from 'element-plus';
 
 type propType = {
 	deviceInfo: DeviceInfo
@@ -78,38 +84,32 @@ type propType = {
 const props = defineProps<propType>();
 const ip = ref<string>()
 const port = ref<number>()
-const performance_fields = ref<string[]>([])
+const checked_performance_fields = ref<string[]>([])
 
 onMounted(() => {
 	let is_tcp = props.deviceInfo.communicate_mode.toUpperCase().includes('TCP'.toUpperCase())
-	ip.value = is_tcp? props.deviceInfo.tcp_ip: props.deviceInfo.udp_ip_src
-	port.value = is_tcp? props.deviceInfo.tcp_port: props.deviceInfo.udp_port_src
-	performance_fields.value = JSON.parse(props.deviceInfo.performance_fields)
+	ip.value = is_tcp ? props.deviceInfo.tcp_ip : props.deviceInfo.udp_ip_src
+	port.value = is_tcp ? props.deviceInfo.tcp_port : props.deviceInfo.udp_port_src
+	checked_performance_fields.value = JSON.parse(props.deviceInfo.performance_fields!)
 })
 
+const emit = defineEmits(['deleteDeviceInfo'])
 const del = () => {
-	// axios.delete('/api/device_communication/' + props.deviceInfo.id)
-	// .then((res) => {
-	// 	console.log(res);
-	// })
-	// .catch((err) => {
-	// 	console.log(err);
-	// })
-}
-
-const edit = () => {
-	dialogFormVisible.value = true
+	let station_id = props.deviceInfo.station_id
+	let id = props.deviceInfo.id
+	axios.delete('/api/device_communication/communicate/' + id + '/')
+	.then((res) => {
+		emit('deleteDeviceInfo', { station_id, id })
+		console.log(res);
+	})
+	.catch((err) => {
+		console.log(err);
+	})
 }
 
 // performance_fields tag
-const handleClose = (tag: string) => {
-  performance_fields.value.splice(performance_fields.value.indexOf(tag), 1)
-	console.log(performance_fields.value);
-}
-
-
 const dialogFormVisible = ref(false)
-const formLabelWidth = '150px'
+const formLabelWidth = '130px'
 
 const form = ref<DeviceInfo>({
 	id: props.deviceInfo.id,
@@ -124,10 +124,47 @@ const form = ref<DeviceInfo>({
 	udp_ip_src: props.deviceInfo.udp_ip_src,
 	udp_port_src: props.deviceInfo.udp_port_src,
 	udp_ip_dst: props.deviceInfo.udp_ip_dst,
-	udp_port_dst: props.deviceInfo.udp_port_dst,
-	performance_fields: props.deviceInfo.performance_fields
+	udp_port_dst: props.deviceInfo.udp_port_dst
 })
 
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const performance_fields = ref<string[]>([])
+
+onMounted(() => {
+	axios.get(
+		'api/device_communication/protocol_performance/' + props.deviceInfo.protocol_name + '/',
+	).then((res) => {
+		performance_fields.value = res.data
+	}).catch((err) => {
+		console.log(err);
+	})
+})
+
+const handleCheckAllChange = (val: CheckboxValueType) => {
+	checked_performance_fields.value = val ? performance_fields.value : []
+	isIndeterminate.value = false
+}
+const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
+	const checkedCount = value.length
+	checkAll.value = checkedCount === performance_fields.value.length
+	isIndeterminate.value = checkedCount > 0 && checkedCount < performance_fields.value.length
+}
+
+const update_communication = () => {
+	dialogFormVisible.value = false
+
+	form.value.performance_fields = JSON.stringify(checked_performance_fields.value)
+	axios.put(
+		'api/device_communication/communicate/' + form.value.id + '/',
+		form.value
+	).then((res) => {
+		console.log(res);
+	}).catch((err) => {
+		console.log(err);
+	})
+}
+
 </script>
 
 <style>
@@ -135,15 +172,19 @@ const form = ref<DeviceInfo>({
 	color: var(--el-text-color-regular) !important;
 	font-weight: bold;
 }
+
 .el-button--text {
 	margin-right: 15px;
 }
+
 .el-select {
 	width: 300px;
 }
+
 .el-input {
 	width: 300px;
 }
+
 .dialog-footer button:first-child {
 	margin-right: 10px;
 }

frontend/src/components/device_communication/types.ts

-export type DeviceInfo = {
+export interface DeviceInfo {
     id: number,
     station_id: string,
     device_id: number,
@@ -12,5 +12,6 @@ export type DeviceInfo = {
     udp_port_src: number,
     udp_ip_dst: string,
     udp_port_dst: number,
-    performance_fields: string
+    performance_fields?: string
+    checked_performance_fields?: string[]
 }

frontend/src/views/DeviceCommunication.vue

@@ -12,7 +12,7 @@
             <template #title>
               <span class="text-2xl font-bold"> {{ station_level }} </span> 
             </template>
-            <device-info-card v-for="device_info in device_info_list" :device-info="device_info" />    
+            <device-info-card @deleteDeviceInfo="deleteDeviceInfo" v-for="device_info in device_info_list" :device-info="device_info" />    
           </el-collapse-item>
         </el-collapse>
       </div>
@@ -45,7 +45,7 @@ const simulate_device_infos = ref<DeviceInfo[]>([])
 onMounted(() => {
   axios.get('/api/device_communication/communicate/')
   .then(res => {
-    console.log(res.data);
+    // console.log(res.data);
     // 将数据按照不同的 station_id 分组
     for (let i = 0; i < res.data.length; i++) {
       if (device_infos.value[res.data[i].station_id] !== undefined) {
@@ -69,6 +69,18 @@ onMounted(() => {
 
 })
 
+type param = {
+  station_id: string
+  id: number
+}
+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) {
+      device_infos.value[params.station_id].splice(i, 1)
+    }
+  }
+}
+
 
 
 </script>