update:通信参数

frontend/src/components/device_communication/CommunicationTab.vue

@@ -6,16 +6,19 @@
   </div>
   <div class="demo-collapse">
     <el-collapse>
-      <el-collapse-item class="pt-10" v-for="(device_info_list, station_id) in device_infos">
+      <el-collapse-item class="" v-for="(device_info_list, station_id) in device_infos">
         <template #title>
-          <span class="text-3xl font-bold"> {{ station_id }} </span>
+          <span class="text-2xl font-bold"> {{ station_id }} </span>
         </template>
+        <div class="deviceCard">
           <device-info-card
               @deleteDeviceInfo="deleteDeviceInfo"
               v-for="device_info in device_info_list"
               :device-info="device_info"
               :tab-type="props.tabType"
           />
+        </div>
+
       </el-collapse-item>
     </el-collapse>
   </div>
@@ -151,3 +154,11 @@ const applyComunications = () => {
   })
 }
 </script>
+
+<style>
+.deviceCard{
+
+  width: 90%;
+  margin: auto;
+}
+</style>

frontend/src/dao/protocol.ts

@@ -4,8 +4,8 @@ const baseURL = 'http://192.168.0.214:8000/op'
 
 export function GetProtocolVersion(){
     return axios.get('/api/all_protocol_version/').then(
-        function (responese){
-            return responese.data
+        function (response){
+            return response.data
         }
     )
 }

frontend/src/style.css

@@ -5,8 +5,8 @@
   font-size: 14px;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #ffffff;
+  /*color: rgba(255, 255, 255, 0.87);*/
+  /*background-color: #ffffff;*/
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

frontend/src/views/DeviceCommunication.vue

 <template>
-  <el-tabs v-model="activeName" type="card" class="demo-tabs">
+  <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
     <el-tab-pane label="device" name="device">
+      <div class="contain">
         <communication-tab tab-type="communicate" />
+      </div>
     </el-tab-pane>
     <el-tab-pane label="simulate_device" name="simulate_device">
+      <div class="contain">
         <communication-tab tab-type="simulate_communicate" />
+      </div>
     </el-tab-pane>
   </el-tabs>
 </template>
@@ -28,3 +32,11 @@ onMounted(() => {
 })
 
 </script>
+
+<style>
+.contain{
+  /*width: 95%;*/
+  margin: auto;
+}
+
+</style>