修改作业执行详情面包屑离开之后断开websocket连接功能

src/components/Breadcrumb/index.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import {  closeWebsocket } from "@/utils/websocket";
 export default {
   data() {
     return {
@@ -22,6 +23,10 @@ export default {
       if (route.path.startsWith('/redirect/')) {
         return
       }
+      // 这里时为了面包屑再作业执行-作业状态离开之后关闭那个页面的websocket
+      if (route.name !== '作业执行-作业状态') {
+        closeWebsocket();
+      }
       this.getBreadcrumb()
     }
   },
@@ -37,7 +42,6 @@ export default {
     next();
   },
   methods: {
-
     getBreadcrumb() {
       // only show routes with meta.title
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)

src/views/mes/job/jobplay/index.vue

@@ -285,39 +285,51 @@ export default {
       // 表单参数
       form: {},
       //
+      isFetching: false, // 标志位，控制接口请求是否已经执行过
     };
   },
   created() {
     this.getList();
     this.getWorkareaList();
-  },
-  mounted() {
     this.initWebSocket()
   },
+
 // 页面销毁就停止webStocket
-  destroyed() {
+  beforeDestroy() {
     this.destory()
   },
+
   methods: {
     initWebSocket(){
       const timestep= Date.now();
       connectWebsocket(`ws://192.168.1.127:9090/websocket/jobTicket/${timestep}`,{w:'S',},(res)=>{
-
           console.log(res,'websocket接收服务器的数据-index');
           const resMsg=res
           if(resMsg=='refresh'){
-            listJobPlayTicket(this.queryParams).then((response) => {
-              console.log(response, "response--作业票列表");
-              this.jobList = response.data.records;
-              this.total = response.data.total;
-              this.loading = false;
-            });
+            this.handleRefresh();
           }
         },
         (err)=>{
           console.log('断开重连',);
         })
     },
+    handleRefresh() {
+      if (this.isFetching) {
+        console.log('接口请求正在进行中，忽略本次 refresh 消息');
+        return;
+      }
+      this.isFetching = true; // 设置标志位为 true，表示接口请求正在进行中
+      listJobPlayTicket(this.queryParams).then((response) => {
+        console.log(response, "response--作业票列表");
+        this.jobList = response.data.records;
+        this.total = response.data.total;
+      }).catch((error) => {
+        console.error('获取作业票列表失败', error);
+      }).finally(() => {
+        this.isFetching = false; // 重置标志位为 false，允许下次 refresh 消息执行接口请求
+
+      });
+    },
     destory(){
       closeWebsocket();//断开链接
     },

src/views/mes/job/jobplay/jobPlayDetail.vue

@@ -159,6 +159,9 @@
         </el-card>
       </el-col>
     </el-row>
+    <div class="message-list">
+      <h1>kakkak</h1>
+    </div>
   </div>
 </template>
 
@@ -182,17 +185,33 @@ export default {
       ticketPointsList: [],
       ticketId: null,
       intervalId: null,
-      uni_data:[]
+      uni_data:[],
+      isFetching: false, // 标志位，控制接口请求是否已经执行过
     }
   },
-  mounted() {
+  watch:{
+    "$route.query.ticketId": {
+      immediate: true,
+      handler(newValue, oldValue) {
+        this.getJobPlayInfo()
+      }
+    },
+    $route(to, from) {
+      if (to.path === '/mes/job/jobplay/jobPlayDetail') {
+        this.initWebSocket();
+      }
+    }
+  },
+  created() {
     this.getJobPlayInfo()
     this.initWebSocket()
   },
+
   // 页面销毁就停止webStocket
-  destroyed() {
+  beforeDestroy() {
     this.destory()
   },
+
   methods: {
     getJobPlayInfo() {
       let ticketId
@@ -219,29 +238,44 @@ export default {
         console.log(res,'websocket接收服务器的数据');
         const resMsg=res
         if(resMsg=='refresh'){
-          let ticketId
-          if (this.$route.query.ticketId) {
-            ticketId = this.$route.query.ticketId
-          } else {
-            ticketId = localStorage.getItem('ticketId')
-          }
-          getJobPlayTicketInfo(ticketId).then((res) => {
-            console.log(res, '作业执行详细信息')
-            this.jobTicket = [res.data.jobTicket].map((item) => ({
-              ...item,
-              lockKeyName: res.data.lockKeyName,
-              colockKeyName: res.data.colockKeyName
-            }))
-            this.lockUserList = res.data.lockUserList
-            this.colockUserList = res.data.colockUserList
-            this.ticketPointsList = res.data.ticketPointsList
-          })
+          this.handleRefresh();
         }
       },
         (err)=>{
         console.log('断开重连',);
         })
     },
+    handleRefresh() {
+      if (this.isFetching) {
+        console.log('接口请求正在进行中，忽略本次 refresh 消息');
+        return;
+      }
+
+      this.isFetching = true; // 设置标志位为 true，表示接口请求正在进行中
+
+      let ticketId;
+      if (this.$route.query.ticketId) {
+        ticketId = this.$route.query.ticketId;
+      } else {
+        ticketId = localStorage.getItem('ticketId');
+      }
+
+      getJobPlayTicketInfo(ticketId).then((res) => {
+        console.log(res, '作业执行详细信息');
+        this.jobTicket = [res.data.jobTicket].map((item) => ({
+          ...item,
+          lockKeyName: res.data.lockKeyName,
+          colockKeyName: res.data.colockKeyName
+        }));
+        this.lockUserList = res.data.lockUserList;
+        this.colockUserList = res.data.colockUserList;
+        this.ticketPointsList = res.data.ticketPointsList;
+      }).catch((error) => {
+        console.error('获取作业执行详细信息失败', error);
+      }).finally(() => {
+        this.isFetching = false; // 重置标志位为 false，允许下次 refresh 消息执行接口请求
+      });
+    },
     destory(){
       closeWebsocket();//断开链接
     },
@@ -256,6 +290,13 @@ export default {
 
 
 <style scoped lang="scss">
+.message-list{
+  height: 500px;
+  width: 500px;
+  background: pink;
+  position: relative;
+  right: 0;
+}
 .text {
   font-size: 14px;
 }