//细节调整

fdapfe-ui/src/views/add.vue

@@ -7,8 +7,7 @@
     append-to-body
     @close="closeWithCleanup"
   >
-    <!-- 任务未开始时显示表单 -->
-    <div>
+    <div >
       <el-form ref="form" :model="formData" label-width="100px">
         <el-form-item label="任务名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入任务名称" />
@@ -17,7 +16,6 @@
           <el-select
             v-model="formData.fdAlgorithmId"
             placeholder="请选择诊断模型"
-            :disabled="isProcessing"
           >
             <el-option
               v-for="item in faultOptions"
@@ -32,7 +30,6 @@
             v-model="formData.noseModelId"
             placeholder="请选择噪声模型"
             @change="onModelChange"
-            :disabled="isProcessing"
           >
             <el-option
               v-for="item in faultPhysicalOptions"
@@ -47,7 +44,6 @@
             :limit="1"
             :config-data="initialData"
             @submit="handleSubmitDataList"
-            :disabled="isProcessing"
           />
         </el-form-item>
       </el-form>
@@ -56,11 +52,10 @@
           type="primary"
           @click="submitForm"
           :loading="submitting"
-          :disabled="isProcessing"
         >
           确 定
         </el-button>
-        <el-button @click="closeWithCleanup" :disabled="isProcessing">
+        <el-button @click="closeWithCleanup">
           取消
         </el-button>
       </div>
@@ -101,34 +96,20 @@ export default {
       modelType: null,
       faultOptions: [],
       dialogOpen: false,
-      isProcessing: false,
       submitting: false,
-      taskId: null,
-      statusMessage: '准备开始...',
-      errorMessage: '',
-      websocket: null,
-      isWebSocketConnected: false,
-      reconnectTimer: null,
-      reconnectAttempts: 0,
-      maxReconnectAttempts: 10,
-      reconnectInterval: 3000, // 3秒后重连
-      wsUrl: "ws://127.0.0.1:8080/websocket/message", // WebSocket连接地址
-      receivedMessages: [] // 存储接收到的WebSocket消息
+      websocket: null, // WebSocket实例
+      receivedMessages: [] // 存储接收到的消息
     };
   },
   watch: {
     value(newVal) {
       console.log('状态更新了', newVal);
       this.dialogOpen = newVal;
-
     }
   },
   created() {
     this.fetchDataOptions();
   },
-  mounted() {
-    // 组件挂载后可以初始化WebSocket，但通常在需要时建立连接
-  },
   methods: {
     // 获取数据选项
     fetchDataOptions() {
@@ -147,76 +128,52 @@ export default {
     },
 
     // 建立WebSocket连接
-    connectWebSocket(taskId) {
+    connectWebSocket() {
+      // 关闭已有连接
       if (this.websocket) {
         this.closeWebSocket();
       }
 
-      this.websocket = new WebSocket(`${this.wsUrl}`);
-      this.isWebSocketConnected = false;
-      this.reconnectAttempts = 0;
+      // 创建新连接
+      const wsUrl = "ws://127.0.0.1:8080/websocket/message";
+      this.websocket = new WebSocket(wsUrl);
 
-      this.websocket.onopen = (event) => {
-        this.isWebSocketConnected = true;
-        this.reconnectAttempts = 0;
-        this.statusMessage = 'WebSocket连接已建立，正在接收任务进度...';
-        console.log('WebSocket连接成功', event);
+      // 连接成功回调
+      this.websocket.onopen = () => {
+        console.log('WebSocket连接已建立');
       };
 
+      // 接收消息回调
       this.websocket.onmessage = (event) => {
-        // 存储接收到的消息
-        this.receivedMessages.push(event.data);
-        // 更新状态消息
-        this.statusMessage = event.data;
-        // 返回消息给父组件
-        this.$emit('message', event.data);
+        const message = event.data;
+        this.receivedMessages.push(message);
+        this.$emit('message', message);
+
         // 任务结束时关闭对话框
-        if (event.data === '任务结束') {
+        if (message === '任务结束') {
           this.closeWithCleanup();
         }
       };
 
+      // 连接错误回调
       this.websocket.onerror = (error) => {
-        this.isWebSocketConnected = false;
-        this.statusMessage = 'WebSocket连接错误';
-        this.errorMessage = `WebSocket错误: ${error.message}`;
-        console.error('WebSocket错误', error);
-        this.tryToReconnect();
+        console.error('WebSocket错误:', error);
       };
 
-      this.websocket.onclose = (event) => {
-        this.isWebSocketConnected = false;
+      // 连接关闭回调
+      this.websocket.onclose = () => {
+        console.log('WebSocket连接已关闭');
       };
     },
 
-    // 尝试重连
-    tryToReconnect() {
-      if (this.reconnectTimer) {
-        clearTimeout(this.reconnectTimer);
-      }
-
-      if (this.maxReconnectAttempts === 0 || this.reconnectAttempts < this.maxReconnectAttempts) {
-        this.reconnectAttempts++;
-        this.reconnectTimer = setTimeout(() => {
-          this.connectWebSocket(this.taskId);
-        }, this.reconnectInterval);
-        this.statusMessage = `尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`;
-      } else {
-        this.statusMessage = '达到最大重连次数，停止重连';
-        this.errorMessage = 'WebSocket重连失败，达到最大重连次数';
-      }
-    },
-
     // 关闭WebSocket连接
     closeWebSocket() {
       if (this.websocket) {
-        this.websocket.close();
-        this.websocket = null;
-      }
-      this.isWebSocketConnected = false;
-      if (this.reconnectTimer) {
-        clearTimeout(this.reconnectTimer);
-        this.reconnectTimer = null;
+        // 仅在连接状态为OPEN或CONNECTING时关闭
+        if ([WebSocket.OPEN, WebSocket.CONNECTING].includes(this.websocket.readyState)) {
+          this.websocket.close(); // 正常关闭连接
+        }
+        this.websocket = null; // 清空实例
       }
     },
 
@@ -226,28 +183,26 @@ export default {
       this.$refs.form.validate(valid => {
         if (valid) {
           this.submitting = true;
-          this.isProcessing = true;
-          this.errorMessage = '';
-          // 发送请求启动任务
-          this.statusMessage = '任务已启动，正在建立WebSocket连接...';
-          // 建立WebSocket连接以接收进度
+          // 建立WebSocket连接
           this.connectWebSocket();
-          this.taskPromise = addPerf2index(this.formData).then((response) => {
-            this.dialogOpen = false;
-            return response;
-          }).catch(error => {
-            this.isProcessing = false;
-            this.errorMessage = error.response?.data?.message || '启动任务失败';
-            this.$message.error(this.errorMessage);
-
-            console.error(error);
-          }).finally(() => {
-            this.submitting = false;
-          });
+          // 启动任务
+          this.startTask();
         }
       });
     },
 
+    // 启动任务
+    startTask() {
+      addPerf2index(this.formData).then((response) => {
+      }).catch(error => {
+        this.$message.error(error.response?.data?.message || '启动任务失败');
+        console.error(error);
+      }).finally(() => {
+        this.submitting = false;
+        this.dialogOpen=false;
+      });
+    },
+
     // 处理动态参数提交
     handleSubmitDataList(data) {
       console.log('data', data);
@@ -262,24 +217,14 @@ export default {
         this.initialData = rest.data.configData;
         this.modelType = rest.data.modelAttribution;
         this.formData.modelId = rest.data.modelId;
-        console.log('modelDataParams', rest.data.modelAttribution);
       });
     },
 
-
     // 关闭对话框并清理资源
     closeWithCleanup() {
-      this.isProcessing = false;
       this.submitting = false;
-      this.statusMessage = '准备开始...';
-      this.errorMessage = '';
-
-      // 发送所有消息给父组件
-      this.$emit('allMessages', this.receivedMessages);
-
       // 关闭WebSocket连接
       this.closeWebSocket();
-
       // 重置表单
       this.formData = {
         name: '',
@@ -290,21 +235,16 @@ export default {
         noseDataIds: '',
         fdAlgorithmId: ''
       };
-
       // 清空消息列表
       this.receivedMessages = [];
-
       // 关闭对话框
       this.dialogOpen = false;
       this.$emit('callback', false);
-    },
+    }
   },
+  // 组件销毁时确保关闭连接
   beforeDestroy() {
-    // 组件销毁时清理资源
     this.closeWebSocket();
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-    }
   }
 };
 </script>

fdapfe-ui/src/views/index.vue

@@ -316,6 +316,11 @@ export default {
     this.getList()
   },
   methods: {
+
+
+
+
+
     handleExport(){
       if (this.ids.length < 2) {
         this.$message({