离开页面websocket关闭

wangfei

2024-08-02 51d5ac20a5412797aa80315b3ad828c5fabdda6c

离开页面websocket关闭

 UI-Project/src/views/Caching/cachingbefore.vue

@@ -7,7 +7,7 @@
import { WebSocketHost ,host} from '@/utils/constants'

import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
import { ref, onMounted , onBeforeUnmount,onUnmounted} from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
// import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -77,6 +77,7 @@
    console.error('发生错误:', error);  
  }  
};   
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
@@ -92,11 +93,13 @@
};
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});

  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/Caching/cachingun.vue

@@ -60,7 +60,7 @@
const adda = ref(false)
import { WebSocketHost ,host} from '@/utils/constants'
import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
import { ref, onMounted , onBeforeUnmount,onUnmounted} from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
// import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -205,6 +205,7 @@



let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/downcache`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
@@ -219,13 +220,14 @@
          })); 

};
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});

  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/GlassStorage/MaterialRackManagement.vue

@@ -330,7 +330,7 @@




<script setup>

import { ref, onMounted, onBeforeUnmount } from "vue"; // 导入 Vue 3 的模块

import { ref, onMounted, onBeforeUnmount,onUnmounted } from "vue"; // 导入 Vue 3 的模块

//import * as echarts from 'echarts';

import { ElMessage, ElMessageBox } from "element-plus";

// import {tableData} from '@/stores/tableData.js';

@@ -393,6 +393,7 @@
  row.enableState = 1 - row.enableState; // Toggle between 0 and 1

  // 此处可以添加保存状态的逻辑，比如调用 API 更新数据

};

let socket = null;

const socketUrl = `ws://${WebSocketHost}:${host}/api/glassStorage/api/talk/storageTask`;

// 定义消息处理函数，更新 receivedData 变量

const handleMessage = (data) => {

@@ -429,16 +430,15 @@
    // 替换原来的 createTime 字段为格式化后的日期时间字符串

    item.startTime = formattedDateTime;

  });











};



onMounted(() => {

  initializeWebSocket(socketUrl, handleMessage);

  socket = initializeWebSocket(socketUrl, handleMessage);

});

  onUnmounted(() => {

    if (socket) {

    closeWebSocket(socket);

    }

    });

onBeforeUnmount(() => {

  console.log("关闭了");

  closeWebSocket();


 UI-Project/src/views/Identify/identify.vue

@@ -41,7 +41,7 @@
<script setup lang="ts">  
import { Delete, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import { ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue';  
import request from "@/utils/request"
import { WebSocketHost ,host} from '@/utils/constants'
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
@@ -181,12 +181,13 @@
    }  
  });  
}
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
const handleMessage = (data) => {
  // adjustedRects.value = data.currentCutTerritory[0]
  adjustedRects.value = data.currentCutTerritory[0].map(rect => ({  
        ...rect, // 复制原始对象的其他属性  
        x_axis: (rect.x_axis*100) * 0.003, // 将x值除以3  
        ...rect,
        x_axis: (rect.x_axis*100) * 0.003,
        y_axis: (rect.y_axis*100) * 0.003,
        width: (rect.width*100) * 0.002 ,
        widtha: rect.width ,
@@ -194,18 +195,15 @@
        height:( rect.height*100) * 0.002 ,
        glass_state: rect.glass_state
      }));  
 // console.log("更新后数据", tableData);

};

// 初始化 WebSocket，并传递消息处理函数

onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});

  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/PurchaseReturn/purchaseReturn.vue

@@ -3,7 +3,7 @@
import {reactive} from "vue";
import {useRouter} from "vue-router"
import request from "@/utils/request"
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import { ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue';  
import { WebSocketHost ,host} from '@/utils/constants'
import { ElMessage, ElMessageBox } from 'element-plus'
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
@@ -22,6 +22,7 @@
const adjustedRectsb = ref([]);
const currentGlassId = ref(null);
const currenttemperingFeedSequence = ref(null);
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`;
const handleMessage = (data) => {
// 进炉中
@@ -205,8 +206,13 @@
      }
};
onMounted(() => {
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
function updateRectColors() {  
  adjustedRectsa.value.forEach(rect => {  
    if (rect.glassId === glassId) {  

 UI-Project/src/views/PurchaseReturn/purchaseStorage.vue

@@ -5,7 +5,7 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import request from "@/utils/request"

import { ref, onMounted, onBeforeUnmount } from 'vue';  
import { ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue';  
import { WebSocketHost ,host} from '@/utils/constants'
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
const adjustedRects = ref([]);
@@ -29,7 +29,7 @@
    }
  }
}

let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`; 
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
@@ -117,11 +117,13 @@
  }
}
onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});

  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/ReportWork/reportWork.vue

@@ -224,6 +224,7 @@
  inputValuesb[rowId] = value;  
};
fetchTableData();  
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`;
const handleMessage = (data) => {
  // adjustedRects.value = data.device[0].map(rect => ({  
@@ -233,7 +234,7 @@
  //       thisProcess: rect.thisProcess,
  //     })); 
};
let socket;
// let socket;
onMounted(() => {
  socket = new WebSocket(socketUrl);
  socket.onmessage = (event) => {
@@ -243,19 +244,18 @@
  };
  // };  
});




onUnmounted(() => {
  socket.close();
});

onMounted(() => {
  // fetchFlowCardId();
  fetchTableData();
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/Returns/returns.vue

@@ -125,13 +125,16 @@
    ElMessage.error(response.message);
  }
};
onMounted(() => {  
onMounted(() => {
  list('');  
  fetchOptions('');
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
onMounted(() => {  
}); 
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
const list = async () => {  
  try {  
    const response = await request.get('/loadGlass/LoadGlass/list');  
@@ -188,6 +191,7 @@
const titleSelectJsona = ref({
  processTypea: [],
})
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/loadGlass/api/talk/loadGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -7,7 +7,7 @@
const router = useRouter()
import request from "@/utils/request"
import { WebSocketHost ,host} from '@/utils/constants'
import { ref, onMounted , onBeforeUnmount, reactive, computed } from "vue";
import { ref, onMounted , onBeforeUnmount, reactive, computed,onUnmounted } from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
import { ElMessage, ElMessageBox } from 'element-plus'
import { tr } from "element-plus/es/locale";
@@ -566,6 +566,7 @@
    console.error(error);
  }
}
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
@@ -673,9 +674,14 @@
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
  initializeWebSocket(socketUrl, handleMessage);
 
  // initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
function getStatusType(enableState: number) {  
  switch (enableState) {  
    case 100:

 UI-Project/src/views/StockBasicData/stockBasicData.vue

@@ -6,7 +6,7 @@
const adda = ref(false)
import { WebSocketHost ,host} from '@/utils/constants'
import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
import { ref, onMounted , onBeforeUnmount,onUnmounted} from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
// import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -100,26 +100,26 @@
    console.error('发生错误:', error);  
  }  
};   

let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableData.value = data.EdgTasks1[0]
};
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});

  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>

<template>
  <div>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
@@ -147,7 +147,6 @@
</template>

<style scoped>

#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
#dialog-footer{

 UI-Project/src/views/StockBasicData/stockBasicDatatwo.vue

@@ -6,7 +6,7 @@
const adda = ref(false)
import { WebSocketHost ,host} from '@/utils/constants'
import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
import { ref, onMounted , onBeforeUnmount,onUnmounted} from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
// import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -100,21 +100,21 @@
    console.error('发生错误:', error);  
  }  
};   


let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableData.value = data.EdgTasks2[0]
};
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});

  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/UnLoadGlass/Landingindication.vue

@@ -32,7 +32,7 @@
</template>

<script  setup>
import { ref, watchEffect ,onMounted} from 'vue';
import { ref, watchEffect ,onMounted,onUnmounted} from 'vue';

import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
@@ -116,6 +116,7 @@
    console.error(error);
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:8085/api/talk/unloadglass2`;
//const socketUrl = `ws://${WebSocketHost}:88/api/unLoadGlass/api/talk/unloadglass2`;
// 定义消息处理函数，更新 receivedData 变量
@@ -146,13 +147,15 @@
  }
});
};

// 初始化 WebSocket，并传递消息处理函数

onMounted(() => {
  fetchFlowCardId(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
const showCustomAlert = (downGlassInfoList) => {
  let tableContent = '<table border="1" style="border-collapse: collapse; width: 100%;">';
  tableContent += '<tr><th style="background-color: #f2f2f2;">玻璃ID</th><th style="background-color: #f2f2f2;">膜系</th><th style="background-color: #f2f2f2;">厚度</th><th style="background-color: #f2f2f2;">宽度</th><th style="background-color: #f2f2f2;">高度</th></tr>';

 UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue

@@ -32,7 +32,7 @@
</template>

<script setup>
import { ref, watchEffect ,onMounted} from 'vue';
import { ref, watchEffect ,onMounted,onUnmounted} from 'vue';

import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
@@ -115,6 +115,7 @@
  }
};

let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass3`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
@@ -143,13 +144,15 @@
  }
});
};

// 初始化 WebSocket，并传递消息处理函数

onMounted(() => {
  fetchFlowCardId(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
const showCustomAlert = (downGlassInfoList) => {
  let tableContent = '<table border="1" style="border-collapse: collapse; width: 100%;">';
  tableContent += '<tr><th style="background-color: #f2f2f2;">玻璃ID</th><th style="background-color: #f2f2f2;">膜系</th><th style="background-color: #f2f2f2;">厚度</th><th style="background-color: #f2f2f2;">宽度</th><th style="background-color: #f2f2f2;">高度</th></tr>';

 UI-Project/src/views/UnLoadGlass/loadmachinerack.vue

@@ -1,6 +1,6 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive, onMounted, onBeforeUnmount} from "vue";
import {reactive, onMounted, onBeforeUnmount,onUnmounted} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()
import { useI18n } from 'vue-i18n'
@@ -139,6 +139,7 @@
    ElMessage.error('获取表格数据失败，请重试');
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
@@ -150,8 +151,13 @@
onMounted(() => {
  fetchFlowCardId();
  fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();

 UI-Project/src/views/largescreen/largescreen.vue

@@ -147,6 +147,7 @@
  return t('large.allstatus');
}  
}  
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`;
const handleMessage = (data) => {
tableData.value = data.awaitingRepairs[0]
@@ -159,7 +160,7 @@
//       thisProcess: rect.thisProcess,
//     })); 
};
let socket;
// let socket;
// 设置图表 DOM 引用  
function setChartDom(index, el) {  
if (!chartRefs.value[index]) {  
@@ -232,13 +233,14 @@
onUnmounted(() => {  
socket.close();  
});  

onMounted(() => {
// fetchFlowCardId();
// fetchTableData(); // 获取数据
initializeWebSocket(socketUrl, handleMessage);

  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
console.log("关闭了")
closeWebSocket();