feat：添加设备性能参数，将弹出框抽离出来

frontend/src/components/device_communication/DeviceInfoCard.vue

@@ -11,14 +11,14 @@
 			<span ml-9> {{ port }} </span>
 		</el-descriptions-item>
 		<el-descriptions-item label="性能参数">
-			<el-tag v-for="tag in checked_performance_fields" :key="tag" class="mx-1">
+			<el-tag v-for="tag in checked_performance_fields" :key="tag" class="mx-1 mt-1">
 				{{ tag }}
 			</el-tag>
 		</el-descriptions-item>
 	</el-descriptions>
 	<el-divider />
 
-	<!-- Form -->
+	Form
 	<el-dialog v-model="dialogFormVisible" title="编辑通信参数">
 		<el-form :model="form">
 			<el-form-item label="设备名称" :label-width="formLabelWidth">

frontend/src/components/device_communication/EditDialog.vue

+<template>
+  <el-dialog v-model="dialogFormVisible" title="编辑通信参数" @close="handleClose">
+    <el-form :model="form" ref="formRef" :rules="rules">
+      <el-form-item label="设备名称" :label-width="formLabelWidth" prop="device_name">
+        <el-input v-model="form.device_name" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="设备中文名" :label-width="formLabelWidth" prop="device_name_chn">
+        <el-input v-model="form.device_name_chn" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="设备序号" :label-width="formLabelWidth" prop="device_name_chn">
+        <el-input v-model="form.device_id" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="所属站点" :label-width="formLabelWidth" prop="station_id">
+        <el-input v-model="form.station_id" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="协议名称" :label-width="formLabelWidth" prop="protocol_name">
+        <el-select v-model="form.protocol_name" @change="handleProtocolChange">
+          <el-option v-for="protocol_name in protocolNames" :label="protocol_name" :value="protocol_name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="通信模式" :label-width="formLabelWidth" prop="communicate_mode">
+        <el-select v-model="form.communicate_mode" @change="handleModeChange">
+          <el-option label="TCP_SERVER" value="TCP_SERVER" />
+          <el-option label="TCP_CLIENT" value="TCP_CLIENT" />
+          <el-option label="UDP" value="UDP" />
+          <el-option label="UDP_MC" value="UDP_MC" />
+        </el-select>
+      </el-form-item>
+      <div v-if="isTcp">
+        <el-form-item label="IP" :label-width="formLabelWidth" prop="tcp_ip">
+          <el-input v-model="form.tcp_ip" autocomplete="false" />
+        </el-form-item>
+        <el-form-item label="端口" :label-width="formLabelWidth" prop="tcp_port">
+          <el-input v-model="form.tcp_port" autocomplete="false" />
+        </el-form-item>
+      </div>
+      <div v-else>
+        <el-form-item label="源IP" :label-width="formLabelWidth" prop="udp_ip_src">
+          <el-input v-model="form.udp_ip_src" autocomplete="false" />
+        </el-form-item>
+        <el-form-item label="源端口" :label-width="formLabelWidth" prop="udp_port_src">
+          <el-input v-model="form.udp_port_src" autocomplete="false" />
+        </el-form-item>
+        <el-form-item label="目标IP" :label-width="formLabelWidth" prop="udp_ip_dst">
+          <el-input v-model="form.udp_ip_dst" autocomplete="false" />
+        </el-form-item>
+        <el-form-item label="目标端口" :label-width="formLabelWidth" prop="udp_port_dst">
+          <el-input v-model="form.udp_port_dst" autocomplete="false" />
+        </el-form-item>
+      </div>
+      <el-form-item label="监控属性" :label-width="formLabelWidth" prop="performance_fields">
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
+          Check all
+        </el-checkbox>
+        <el-checkbox-group v-model="checked_performance_fields" @change="handleCheckedFieldsChange">
+          <el-checkbox v-for="field in performance_fields" :key="field" :label="field">
+            {{ field }}
+          </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="submit_form">
+          Confirm
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from 'vue';
+import type { CheckboxValueType, ElForm } from 'element-plus';
+import { ElMessage, FormRules } from 'element-plus'
+import axios from 'axios';
+
+import { DeviceInfo } from "./types";
+
+const formRef = ref<typeof ElForm>()
+const dialogFormVisible = ref(false)
+const formLabelWidth = "120px"
+
+type porpsType = {
+  isShow: boolean,
+  deviceInfo?: DeviceInfo,
+  type: string
+}
+const props = defineProps<porpsType>()
+const emit = defineEmits(['close'])
+const handleClose = () => {
+  emit('close')
+  formRef.value!.resetFields()
+}
+
+const form = ref<DeviceInfo>({
+  station_id: "",
+  device_id: 0,
+  device_name: "",
+  device_name_chn: "",
+  protocol_name: "",
+  communicate_mode: "",
+  tcp_ip: "",
+  tcp_port: 0,
+  udp_ip_src: "",
+  udp_port_src: 0,
+  udp_ip_dst: "",
+  udp_port_dst: 0
+})
+
+watch(props, () => {
+  dialogFormVisible.value = props.isShow
+})
+
+const validateIP = (_: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('Please input the password again'))
+  }
+  const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
+  if (!ipRegex.test(value)) {
+    callback(new Error('请输入有效的IP地址'));
+  } else {
+    callback();
+  }
+}
+
+const validatePort = (_: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('Please input the password again'))
+  }
+  const portRegex = /^[1-9]\d{1,4}$/;
+  if (!portRegex.test(value)) {
+    callback(new Error('请输入有效的端口'));
+  } else {
+    callback();
+  }
+}
+
+const rules = reactive<FormRules<typeof form>>({
+  station_id: [{ required: true, message: 'Please input station id', trigger: 'blur' }],
+  device_id: [{ required: true, message: 'Please input device id', trigger: 'blur' }],
+  device_name: [{ required: true, message: 'Please input device name', trigger: 'blur' }],
+  device_name_chn: [{ required: true, message: 'Please input device name chn', trigger: 'blur' }],
+  protocol_name: [{ required: true, message: 'Please input protocol name', trigger: 'blur' }],
+  communicate_mode: [{ required: true, message: 'Please input communicate mode', trigger: 'blur' }],
+  tcp_ip: [
+    { required: true, message: 'Please input tcp ip', trigger: 'blur' },
+    { validator: validateIP, trigger: 'blur' }],
+  tcp_port: [
+    { required: true, message: 'Please input tcp port', trigger: 'blur' },
+    { validator: validatePort, trigger: 'blur'}
+  ],
+  udp_ip_src: [
+    { required: true, message: 'Please input upd src ip', trigger: 'blur' },
+    { validator: validateIP, trigger: 'blur' }],
+  udp_port_src: [
+    { required: true, message: 'Please input udp src port', trigger: 'blur' },
+    { validator: validatePort, trigger: 'blur'}
+  ],
+  udp_ip_dst: [
+    { required: true, message: 'Please input udp dst ip', trigger: 'blur' },
+    { validator: validateIP, trigger: 'blur' }],
+  udp_port_dst: [
+    { required: true, message: 'Please input udp dst port', trigger: 'blur' },
+    { validator: validatePort, trigger: 'blur'}
+  ],
+
+})
+
+const protocolNames = ref<string[]>([])
+onMounted(() => {
+  axios.get('api/device_communication/')
+    .then((res) => {
+      for (let protocolName of res.data) {
+        protocolNames.value.push(protocolName.value)
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+})
+
+const handleProtocolChange = (protocol_name: string) => {
+  axios.get('/api/device_communication/protocol_performance/' + protocol_name + '/')
+    .then((res) => {
+      performance_fields.value = res.data
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+}
+
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const performance_fields = ref<string[]>([])
+const checked_performance_fields = ref<string[]>([])
+
+// 全选
+const handleCheckAllChange = (val: CheckboxValueType) => {
+  checked_performance_fields.value = val ? performance_fields.value : []
+  isIndeterminate.value = false
+}
+
+// 选中某个
+const handleCheckedFieldsChange = (value: CheckboxValueType[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === performance_fields.value.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < performance_fields.value.length
+}
+
+// 选择通信模式后
+const isTcp = ref(true)
+const handleModeChange = (value: string) => {
+  console.log(value)
+  isTcp.value = value.toUpperCase().includes('TCP'.toUpperCase())
+}
+
+// 提交表单
+const submit_form = () => {
+  // 表单字段全部正确才能提交
+  formRef.value!.validate((valid: boolean) => {
+    if (valid) {
+      submit()
+    } else {
+      ElMessage({
+        message: '请检查表单',
+        type: 'error'
+      })
+    }
+  })
+}
+
+const submit = () => {
+  // 获取表单数据
+  let data = {
+    station_id: form.value.station_id,
+    device_id: form.value.device_id,
+    device_name: form.value.device_name,
+    device_name_chn: form.value.device_name_chn,
+    protocol_name: form.value.protocol_name,
+    communicate_mode: form.value.communicate_mode,
+    tcp_ip: form.value.tcp_ip,
+    tcp_port: form.value.tcp_port,
+    udp_ip_src: form.value.udp_ip_src,
+    udp_port_src: form.value.udp_port_src,
+    udp_ip_dst: form.value.udp_ip_dst,
+    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);
+        ElMessage({
+          message: '创建成功',
+          type: 'success'
+        })
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+  }
+  emit('close')
+}
+
+
+</script>

frontend/src/components/device_communication/types.ts

 export interface DeviceInfo {
-    id: number,
+    id?: number,
     station_id: string,
     device_id: number,
     device_name: string,

frontend/src/views/DeviceCommunication.vue

 <template>
-  <el-tabs
-    v-model="activeName"
-    type="card"
-    class="demo-tabs"
-    @tab-click="handleClick"
-  >
+  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
     <el-tab-pane label="device" name="device">
+      <div class="text-right mb-5">
+        <el-button type="primary" @click="addDevice">Add device</el-button>
+      </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)">
             <template #title>
-              <span class="text-2xl font-bold"> {{ station_level }} </span> 
+              <span class="text-2xl font-bold"> {{ station_level }} </span>
             </template>
-            <device-info-card @deleteDeviceInfo="deleteDeviceInfo" 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>
@@ -22,6 +21,8 @@
       <!-- TODO -->
     </el-tab-pane>
   </el-tabs>
+
+  <edit-dialog :is-show="isShow" @close="isShow = false" type="add" />
 </template>
 
 <script lang="ts" setup>
@@ -31,6 +32,7 @@ import type { TabsPaneContext } from 'element-plus'
 
 import DeviceInfoCard from '@/components/device_communication/DeviceInfoCard'
 import type { DeviceInfo } from '@/components/device_communication/types'
+import EditDialog from '@/components/device_communication/EditDialog';
 
 // tab 相关
 const activeName = ref('device')
@@ -44,28 +46,28 @@ const simulate_device_infos = ref<DeviceInfo[]>([])
 
 onMounted(() => {
   axios.get('/api/device_communication/communicate/')
-  .then(res => {
-    // 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) {
-        device_infos.value[res.data[i].station_id].push(res.data[i])
-      } else {
-        device_infos.value[res.data[i].station_id] = [res.data[i]]
+    .then(res => {
+      // 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) {
+          device_infos.value[res.data[i].station_id].push(res.data[i])
+        } else {
+          device_infos.value[res.data[i].station_id] = [res.data[i]]
+        }
       }
-    }
-  })
-  .catch(err => {
-    console.log(err);
-  })
+    })
+    .catch(err => {
+      console.log(err);
+    })
 
   axios.get('/api/device_communication/simulate_communicate/')
-  .then(res => {
-    simulate_device_infos.value = res.data
-  })
-  .catch(err => {
-    console.log(err);
-  })
+    .then(res => {
+      simulate_device_infos.value = res.data
+    })
+    .catch(err => {
+      console.log(err);
+    })
 
 })
 
@@ -81,6 +83,10 @@ const deleteDeviceInfo = (params: param) => {
   }
 }
 
-
+const isShow = ref(false)
+const addDevice = () => {
+  console.log('addDevice')
+  isShow.value = true
+}
 
 </script>