feat：设备通信页面（框架）

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';
 </script>
 
 
 <template>
-  <chat />
+  <!-- <chat /> -->
   <!-- <FileDown /> -->
   <!-- <Upload /> -->
   <!-- <Tabs /> -->
+  <device-communication />
 </template>

frontend/src/components/device_communication/DeviceInfoCard.vue

+<template>
+  <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>
+		</template>
+    <el-descriptions-item label="协议名">{{ props.deviceInfo.protocol_name }}</el-descriptions-item>
+    <el-descriptions-item label="通信参数" :column=3>
+			<span> {{ props.deviceInfo.communicate_mode }} </span>
+			<span ml-9> {{ ip }} </span>
+			<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">
+				{{ tag }}
+			</el-tag>
+		</el-descriptions-item>
+  </el-descriptions>
+	<el-divider />
+
+	<!-- Form -->
+  <el-dialog v-model="dialogFormVisible" title="编辑通信参数">
+    <el-form :model="form" >
+      <el-form-item label="设备名称" :label-width="formLabelWidth">
+        <el-input v-model="form.device_name" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="设备中文名" :label-width="formLabelWidth">
+        <el-input v-model="form.device_name_chn" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="所属站点" :label-width="formLabelWidth">
+        <el-input v-model="form.station_id" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="协议名称" :label-width="formLabelWidth">
+        <el-input v-model="form.protocol_name" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="通信模式" :label-width="formLabelWidth">
+        <el-select v-model="form.communicate_mode" @change="console.log(form.communicate_mode)">
+					<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>
+      <el-form-item label="IP" :label-width="formLabelWidth">
+        <el-input v-model="form.tcp_ip" autocomplete="false" />
+      </el-form-item>
+      <el-form-item label="端口" :label-width="formLabelWidth">
+        <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-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">
+          Confirm
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import axios from 'axios';
+
+import type { DeviceInfo } from '@/components/device_communication/types';
+
+type propType = {
+	deviceInfo: DeviceInfo
+}
+const props = defineProps<propType>();
+const ip = ref<string>()
+const port = ref<number>()
+const 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)
+})
+
+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
+}
+
+// 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 form = ref<DeviceInfo>({
+	id: props.deviceInfo.id,
+	station_id: props.deviceInfo.station_id,
+	device_id: props.deviceInfo.device_id,
+	device_name: props.deviceInfo.device_name,
+	device_name_chn: props.deviceInfo.device_name_chn,
+	protocol_name: props.deviceInfo.protocol_name,
+	communicate_mode: props.deviceInfo.communicate_mode,
+	tcp_ip: props.deviceInfo.tcp_ip,
+	tcp_port: props.deviceInfo.tcp_port,
+	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
+})
+
+</script>
+
+<style>
+.el-descriptions__label:not(.is-bordered-label) {
+	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;
+}
+</style>
\ No newline at end of file

frontend/src/components/device_communication/types.ts

+export type DeviceInfo = {
+    id: number,
+    station_id: string,
+    device_id: number,
+    device_name: string,
+    device_name_chn: string,
+    protocol_name: string,
+    communicate_mode: string,
+    tcp_ip: string,
+    tcp_port: number,
+    udp_ip_src: string,
+    udp_port_src: number,
+    udp_ip_dst: string,
+    udp_port_dst: number,
+    performance_fields: string
+}

frontend/src/style.css

@@ -26,7 +26,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  /* place-items: center; */
   min-width: 320px;
   min-height: 100vh;
 }

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="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> 
+            </template>
+            <device-info-card v-for="device_info in device_info_list" :device-info="device_info" />    
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="simulate_device" name="simulate_device">
+      Simulate device
+      <!-- TODO -->
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts" setup>
+import axios from 'axios';
+import { onMounted, ref } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+
+import DeviceInfoCard from '@/components/device_communication/DeviceInfoCard'
+import type { DeviceInfo } from '@/components/device_communication/types'
+
+// tab 相关
+const activeName = ref('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);
+  })
+
+})
+
+
+
+</script>

frontend/tsconfig.json

@@ -27,7 +27,7 @@
  		"baseUrl": "./",
  		//路径映射，相对于baseUrl
  		"paths": {
- 			"@/*": ["./src/*.vue"]
+ 			"@/*": ["./src/*.vue", "./src/*.ts"]
  		},
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],