掰片/识别新增搜索功能，登录出现红叉，刷新username报错

wangfei

2024-08-06 dd86b5a89faff35cb3d74f3c47bdf65db63aa62d

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

@@ -25,8 +25,12 @@
      </el-table-column>
      </el-table>
</div> 
<div id="center" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 750px;">
  <img src="../../assets/d1.png" alt="" style="margin-left: -30px; width: 110%;height: 100%;position: relative;"> 
<div id="parent" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 750px;">
  <img src="../../assets/d1a.png" alt="" style="margin-left: -10px; width: 100%;height: 100%;position: relative;"> 
  <div id="overlay" v-show="flake"></div>
  <div id="overlayb" v-show="flakeb"></div>
  <div id="overlayc" v-show="flakec"></div>
  <div id="overlayd" v-show="flaked"></div>
</div>
<div id="centerright" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 240px;background-color: #911005;">
  <el-table height="240" ref="table" width="340px"
@@ -116,6 +120,10 @@
const tableDatac = ref([])
const adjustedRects = ref([]);  
const chartRefs = ref([]);  
const flake = ref(true)
const flakeb = ref(true)
const flakec = ref(true)
const flaked = ref(true)
const thisProcess = ref(); // 用于存储process_id的响应式引用 
// 定义一个响应式引用来存储图表实例    
const chartDom = ref(null);  
@@ -147,6 +155,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 +168,7 @@
//       thisProcess: rect.thisProcess,
//     })); 
};
let socket;
// let socket;
// 设置图表 DOM 引用  
function setChartDom(index, el) {  
if (!chartRefs.value[index]) {  
@@ -168,8 +177,11 @@
  chartRefs.value[index].dom = el;  
}  
} 
const socketUrl2 = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingIsRun`;

onMounted(() => {  
socket = new WebSocket(socketUrl);  
socket = new WebSocket(socketUrl2);  
socket.onmessage = (event) => {  
  const data = JSON.parse(event.data);  
  processesData.value = data.device[0].map(rect => ({  
@@ -232,13 +244,14 @@
onUnmounted(() => {  
socket.close();  
});  

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

  socket = initializeWebSocket(socketUrl, handleMessage);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
onBeforeUnmount(() => {
console.log("关闭了")
closeWebSocket();
@@ -246,23 +259,59 @@
</script>  

<style scoped>  



.echarts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.echarts-item {
width: 150px;
height: 150px;
margin: 20px;
}

.pie-chart {
width: 100%;
height: 100%;
}
#parent{
  position: relative;
  width: 1500px;
  margin-left: -300px
}
#overlay{
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -39px;
  margin-left: 4px;
}
#overlayb{
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 115px;
  background-color: #529b2e;
  margin-top: -197px;
  margin-left: 9px;
}
#overlayc{
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  background-color: #529b2e;
  margin-top: -238px;
  margin-left: 9px;
}
#overlayd{
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 11px;
  background-color: #529b2e;
  margin-top: -234px;
  margin-left: 56px;
}
</style>