feat：设备参数监控

frontend/src/components/home/Chat.vue

@@ -16,22 +16,42 @@
   </div>
 
   <div class="w-50% float-right border-solid border-black border-1">
+    <el-tabs v-model="activeName" class="px-5">
+      <el-tab-pane label="设备" name="first">
         <el-scrollbar style="height: 30rem;" class="mb-10" always>
           <device-performance-table 
             v-for="param in deviceTableParams" 
-        mt-5 
+            class="mt-5" 
             :dev-name="param.devName"
             :protocol-name="param.protocolName" 
             :group-name="param.key" 
             :key="param.key"
+            :type="activeName==='first'?'1': '2'"
             @delete-table="deleteDeviceInfo(param)" />
         </el-scrollbar>
         <el-button @click="dialogVisible = true">Add table</el-button>
+      </el-tab-pane>
+      <el-tab-pane label="虚拟设备" name="second">
+        <el-scrollbar style="height: 30rem;" class="mb-10" always>
+          <device-performance-table 
+            v-for="param in simulateDeviceTableParams" 
+            class="mt-5" 
+            :dev-name="param.devName"
+            :protocol-name="param.protocolName" 
+            :group-name="param.key" 
+            :key="param.key"
+            :type="activeName==='first'?'1': '2'"
+            @delete-table="deleteDeviceInfo(param)" />
+        </el-scrollbar>
+        <el-button @click="dialogVisible = true">Add table</el-button>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 
   <el-dialog class="w-150" v-model="dialogVisible" title="Select device">
     <el-select class="w-100" v-model="selectedDeviceName">
-      <el-option v-for="deviceInfo in deviceInfos" :key="deviceInfo.dev_name" :label="deviceInfo.dev_name" :value="deviceInfo.dev_name" />
+      <el-option v-for="deviceInfo in deviceInfos" :key="deviceInfo.dev_name" :label="deviceInfo.dev_name"
+        :value="deviceInfo.dev_name" />
     </el-select>
     <template #footer>
       <span class="dialog-footer">
@@ -54,13 +74,7 @@ import axios from 'axios';
 const innerRef = ref<HTMLDivElement>();
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
 const input = ref('');
-const items = ref<string[]>([
-  JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
-  JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
-  JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
-  JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
-  JSON.stringify([{ "CMDS": "$,", "Xaxis": "034.00", "Comma": ",", "Yaxis": "034.00", "Azimuth": "000.00", "ElevationAngle": "090.00", "ACUstatus": "P", "XTrackerSigIntensity": "255", "YTrackerSigIntensity": "255", "X_STATUS": "244", "Y_STATUS": "245", "XInitPhase": "012", "XPolarizationType": "1", "SPolarizationType": "0", "XTrackerVoltageLimit": "255", "STrackerVoltageLimit": "255", "SUpPolarizationType": "1", "XUpPolarizationType": "1", "TrackingStatus": "0", "TrackingBand": "1", "X-Bias": "+0.00", "Y-Bias": "+0.00", "END": "\r\n", "XaxisAlarm": "0", "XaxisServoStatus": "1", "EasternLimit": "0", "WestLimit": "0", "YaxisAlarm": "0", "YaxisServoStatus": "1", "SouthrLimit": "0", "NorthLimit": "1" }]),
-]);
+const items = ref<string[]>([]);
 const flag = ref<boolean>(false);
 let chatSocket: WebSocket | null = null;
 
@@ -100,10 +114,6 @@ onMounted(() => {
     flag.value = !flag.value
   };
 
-  chatSocket.onclose = (e) => {
-    console.error('Chat socket closed unexpectedly', e);
-  };
-
   axios.get('/api/xpro_all_devinfo/')
     .then((res) => {
       deviceInfos.value = res.data
@@ -127,6 +137,7 @@ type MonitorType = {
   devName: string
 }
 const deviceTableParams = ref<MonitorType[]>([]);
+const simulateDeviceTableParams = ref<MonitorType[]>([]);
 const addDeviceTable = () => {
   if (deviceInfos.value.length === 0) {
     ElMessage.warning('input invalid');
@@ -136,6 +147,7 @@ const addDeviceTable = () => {
   for (let deviceInfo of deviceInfos.value) {
     if (deviceInfo.dev_name === selectedDeviceName.value) {
       if ((deviceInfo.comunitate_mode as string).toUpperCase().includes('TCP')) {
+        if (activeName.value === 'first') {
           deviceTableParams.value.push({
             key: (deviceInfo.tcp_port).toString(),
             protocolName: deviceInfo.protocol_name,
@@ -143,12 +155,29 @@ const addDeviceTable = () => {
           });
         }
         else {
+          simulateDeviceTableParams.value.push({
+            key: (deviceInfo.tcp_port).toString(),
+            protocolName: deviceInfo.protocol_name,
+            devName: deviceInfo.dev_name
+          })
+        }
+      }
+      else {
+        if (activeName.value === 'first') {
           deviceTableParams.value.push({
             key: (deviceInfo.udp_port_src).toString(),
             protocolName: deviceInfo.protocol_name,
             devName: deviceInfo.dev_name
           });
         }
+        else {
+          simulateDeviceTableParams.value.push({
+            key: (deviceInfo.udp_port_src).toString(),
+            protocolName: deviceInfo.protocol_name,
+            devName: deviceInfo.dev_name
+          })
+        }
+      }
     }
   }
 
@@ -157,9 +186,17 @@ const addDeviceTable = () => {
 }
 
 const deleteDeviceInfo = (param: MonitorType) => {
+  if (activeName.value === 'first') {
     deviceTableParams.value.splice(deviceTableParams.value.indexOf(param), 1);
+  }
+  else {
+    simulateDeviceTableParams.value.splice(simulateDeviceTableParams.value.indexOf(param), 1);
+  }
 }
 
+// tab
+const activeName = ref<string>('first')
+
 </script>
 
 <style scoped>

frontend/src/components/home/DevicePerformanceTabel.vue

@@ -24,6 +24,7 @@ type propsType = {
   devName: string
   groupName: string
   protocolName: string
+  type: string
 }
 const props = defineProps<propsType>()
 
@@ -50,11 +51,7 @@ onMounted(() => {
     }
   }
 
-  table_websocket.onclose = (e) => {
-    console.error('Table socket closed unexpectedly', e);
-  }
-
-  axios.get('/api/device_communication/performance/1/' + props.protocolName)
+  axios.get('/api/device_communication/performance/' + props.type + '/' + props.protocolName)
   .then((res) => {
     tableTitles.value = res.data
     for (let key of res.data) {