feat：模拟设备通信参数页面

frontend/src/components/device_communication/CommunicationTab.vue

+<template>
+  <div class="text-right mb-5">
+    <el-button type="primary" @click="copy">copy to ini</el-button>
+    <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="(device_info_list, station_id) in device_infos">
+        <template #title>
+          <span class="text-3xl font-bold"> {{ station_id }} </span>
+        </template>
+        <device-info-card 
+          @deleteDeviceInfo="deleteDeviceInfo" 
+          v-for="device_info in device_info_list"
+          :device-info="device_info"
+          :tab-type="props.tabType"
+          />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+
+  <edit-dialog 
+    :is-show="isShow" 
+    :tab-type="props.tabType"
+    @close="isShow = false" 
+    @change-device-info="changeDeviceInfo"
+    type="add" />
+</template>
+
+<script setup lang="ts">
+import axios from 'axios';
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import useClipboard from 'vue-clipboard3'
+
+import DeviceInfoCard from '@/components/device_communication/DeviceInfoCard'
+import type { DeviceInfo } from '@/components/device_communication/types'
+import EditDialog from '@/components/device_communication/EditDialog';
+
+type propType = {
+  tabType: string
+}
+const props = defineProps<propType>()
+// device info card 相关
+const device_infos = ref<Record<string, DeviceInfo[]>>({})
+// 获取当前选择的页面
+onMounted(() => {
+  axios.get('/api/device_communication/' + props.tabType + '/')
+    .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);
+    })
+})
+
+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) {
+      // 如果 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)
+    }
+  }
+}
+
+const isShow = ref(false)
+const addDevice = () => {
+  isShow.value = true
+}
+
+const changeDeviceInfo = (params: DeviceInfo) => {
+  console.log('changeDeviceInfo')
+  console.log(params);
+
+  if (device_infos.value[params.station_id] === undefined) {
+    device_infos.value[params.station_id] = [params]
+  } else {
+    device_infos.value[params.station_id].push(params)
+  }
+}
+
+// clipboard 赋值到设备信息到 ini 文件中
+const { toClipboard } = useClipboard()
+const copy = async () => {
+  let configText = composeConfigText()
+  try {
+    await toClipboard(configText)
+    ElMessage({
+      message: '复制成功',
+      type: 'success',
+    })
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+// 生成和 ini 文件中类似的配置格式
+function composeConfigText(): string {
+  let configText = ''
+  for (const [station_level, device_info_list] of Object.entries(device_infos.value)) {
+    configText += `[Device_info_${station_level}]\n`
+    configText += `dev_num=${device_info_list.length}\n`
+    for (let i = 1; i <= device_info_list.length; i++) {
+      configText += `dev${i}_id=${device_info_list[i - 1].device_id}\n`
+      configText += `dev${i}_name=${device_info_list[i - 1].device_name}\n`
+      configText += `dev${i}_name_chn=${device_info_list[i - 1].device_name_chn}\n`
+      configText += `dev${i}_datacatlog=${device_info_list[i - 1].protocol_name}\n`
+    }
+  }
+  return configText
+}
+</script>

frontend/src/components/device_communication/DeviceInfoCard.vue

@@ -29,6 +29,7 @@
 	<edit-dialog 
     :is-show="dialogFormVisible" 
     :device-info="deviceInfo"
+    :tab-type="props.tabType"
     @close="dialogFormVisible = false" 
     @change-device-info="changeDeviceInfo"
     type="edit" />
@@ -36,7 +37,7 @@
 
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch} from 'vue';
 import axios from 'axios';
 import { ElMessage, ElMessageBox } from 'element-plus';
 
@@ -44,7 +45,8 @@ import type { DeviceInfo } from '@/components/device_communication/types';
 import EditDialog from './EditDialog.vue';
 
 type propType = {
-	deviceInfo: DeviceInfo
+	deviceInfo: DeviceInfo,
+  tabType: string
 }
 const props = defineProps<propType>();
 const deviceInfo = ref<DeviceInfo>(props.deviceInfo)
@@ -70,7 +72,7 @@ const del = () => {
   .then(() => {
     let station_id = deviceInfo.value.station_id
     let id = deviceInfo.value.id
-    axios.delete('/api/device_communication/communicate/' + id + '/')
+    axios.delete('/api/device_communication/' + props.tabType + '/' + id + '/')
     .then(() => {
       emit('deleteDeviceInfo', { station_id, id })
       ElMessage({
@@ -91,8 +93,6 @@ const changeDeviceInfo = (device_info: DeviceInfo) => {
   deviceInfo.value = device_info
   checked_performance_fields.value = JSON.parse(device_info.performance_fields!)
 }
-
-
 </script>
 
 <style>

frontend/src/components/device_communication/EditDialog.vue

@@ -48,7 +48,7 @@
           <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-form-item label="监控属性" :label-width="formLabelWidth">
         <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
           Check all
         </el-checkbox>
@@ -95,6 +95,7 @@ type porpsType = {
   isShow: boolean,
   deviceInfo?: DeviceInfo,
   type: string,
+  tabType: string
 }
 const props = defineProps<porpsType>()
 // 返回父组件的方法
@@ -145,8 +146,8 @@ watch(() => props.isShow, () => {
       udp_port_dst: props.deviceInfo!.udp_port_dst,
     }
     handleModeChange(form.value.communicate_mode)
-    handleProtocolChange(form.value.protocol_name, checked_performance_fields.value)
     checked_performance_fields.value = props.deviceInfo!.checked_performance_fields!
+    handleProtocolChange(form.value.protocol_name, checked_performance_fields.value)
   }
 })
 
@@ -282,7 +283,7 @@ const submit = () => {
 
   if (props.type === "add") {
     // 添加通信参数方法
-    axios.post('/api/device_communication/communicate/', data)
+    axios.post('/api/device_communication/' + props.tabType + '/', data)
       .then((res) => {
         console.log(res.data)
         data = res.data
@@ -301,7 +302,7 @@ const submit = () => {
     // 修改通信参数方法
     data.id = form.value.id
 
-    axios.put('/api/device_communication/communicate/' + data.id + '/', data)
+    axios.put('/api/device_communication/' + props.tabType + '/' + data.id + '/', data)
       .then((res) => {
         console.log(res);
         ElMessage({

frontend/src/views/DeviceCommunication.vue

 <template>
   <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="copy">copy to ini</el-button>
-        <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="(device_info_list, station_id) in device_infos">
-            <template #title>
-              <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" />
-          </el-collapse-item>
-        </el-collapse>
-      </div>
+      <communication-tab tab-type="communicate" />
     </el-tab-pane>
     <el-tab-pane label="simulate_device" name="simulate_device">
-      Simulate device
-      <!-- TODO -->
+      <communication-tab tab-type="simulate_communicate" />
     </el-tab-pane>
   </el-tabs>
-
-  <edit-dialog 
-    :is-show="isShow" 
-    @close="isShow = false" 
-    @change-device-info="changeDeviceInfo"
-    type="add" />
 </template>
 
 <script lang="ts" setup>
 import axios from 'axios';
 import { onMounted, ref } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
-import { ElMessage } from 'element-plus'
-import useClipboard from 'vue-clipboard3'
 
-import DeviceInfoCard from '@/components/device_communication/DeviceInfoCard'
-import type { DeviceInfo } from '@/components/device_communication/types'
-import EditDialog from '@/components/device_communication/EditDialog';
 import { useProtocolNamesStore }  from '@/stores/protocolNames'
+import CommunicationTab from "@/components/device_communication/CommunicationTab";
 
 // tab 相关
-const activeName = ref('device')
+const activeName = ref<string>('simulate_device')
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
 
-// device info card 相关
-const device_infos = ref<Record<string, DeviceInfo[]>>({})
-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]]
-        }
-      }
-    })
-    .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);
-    })
-
   axios.get('/api/device_communication/')
     .then((res) => {
       const store = useProtocolNamesStore()
@@ -84,70 +31,4 @@ 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) {
-      // 如果 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)
-    }
-  }
-}
-
-const isShow = ref(false)
-const addDevice = () => {
-  isShow.value = true
-}
-
-const changeDeviceInfo = (params: DeviceInfo) => {
-  console.log('changeDeviceInfo')
-  console.log(params);
-
-  if (device_infos.value[params.station_id] === undefined) {
-    device_infos.value[params.station_id] = [params]
-  } else {
-    device_infos.value[params.station_id].push(params)
-  }
-}
-
-// clipboard 赋值到设备信息到 ini 文件中
-const { toClipboard } = useClipboard()
-const copy = async () => {
-  let configText = composeConfigText()
-  try {
-    await toClipboard(configText)
-    ElMessage({
-      message: '复制成功',
-      type: 'success',
-    })
-  } catch (error) {
-    console.log(error);
-  }
-}
-
-// 生成和 ini 文件中类似的配置格式
-function composeConfigText(): string {
-  let configText = ''
-  for (const [station_level, device_info_list] of Object.entries(device_infos.value)) {
-    configText += `[Device_info_${station_level}]\n`
-    configText += `dev_num=${device_info_list.length}\n`
-    for (let i = 1; i <= device_info_list.length; i++) {
-      configText += `dev${i}_id=${device_info_list[i - 1].device_id}\n`
-      configText += `dev${i}_name=${device_info_list[i - 1].device_name}\n`
-      configText += `dev${i}_name_chn=${device_info_list[i - 1].device_name_chn}\n`
-      configText += `dev${i}_datacatlog=${device_info_list[i - 1].protocol_name}\n`
-    }
-  }
-  return configText
-}
-
 </script>