重置文件提交

wangfei

2024-08-08 ebe3fc18910deaf29cdb1f41599ca3c57282006a

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

@@ -26,11 +26,18 @@
      </el-table>
</div> 
<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;"> 
  <img src="../../assets/dpxsa.png" alt="" style="margin-left: -10px; width: 100%;height: 100%;position: relative;"> 
  <div id="lipiana" v-show="woshia"></div>
  <div id="lipianb" v-show="woshia"></div>
  <div id="lipianc" v-show="woshic"></div>
  <div id="lipiand" v-show="woshic"></div>
  <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 id="longa" v-show="dalipiana"></div>
  <div id="longb" v-show="dalipianb"></div>
  <div id="shangpianji" v-show="shangpian"></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"
@@ -120,10 +127,16 @@
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 flake = ref(false)
const flakeb = ref(false)
const flakec = ref(false)
const flaked = ref(false)
const woshia = ref(false)
const woshic = ref(false)
const dalipiana = ref(false)
const dalipianb = ref(false)
const shangpian = ref(false)

const thisProcess = ref(); // 用于存储process_id的响应式引用 
// 定义一个响应式引用来存储图表实例    
const chartDom = ref(null);  
@@ -132,9 +145,7 @@
const handleBinda = (row) => {
blinda.value = true;
};
const processesData = ref([

]);
const processesData = ref([]);
function getStatusType(warehousing) {  
switch (warehousing) {  
  case 0:  
@@ -156,33 +167,16 @@
}  
}  
let socket = null;
let socket2 = null;
let socket3 = null;
let socket4 = null;
let socket5 = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`;
const handleMessage = (data) => {
tableData.value = data.awaitingRepairs[0]
tableDatab.value = data.DoingTask[0]
tableDatac.value = data.orders[0]
// adjustedRects.value = data.device[0].map(rect => ({  
//       ...rect, 
//       completed: rect.completedQuantity,
//       breakage: rect.breakageQuantity,
//       thisProcess: rect.thisProcess,
//     })); 
};
// let socket;
// 设置图表 DOM 引用  
function setChartDom(index, el) {  
if (!chartRefs.value[index]) {  
  chartRefs.value[index] = { dom: el, chart: null };  
} else {  
  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) => {  
  socket.onmessage = (event) => {  
  const data = JSON.parse(event.data);  
  processesData.value = data.device[0].map(rect => ({  
    ...rect,  
@@ -191,12 +185,47 @@
    thisProcess: rect.thisProcess,  
  }));  
  renderPieCharts();
  console.log(processesData.value);
  // updateCharts();
}
};
  
// };  
});  
function setChartDom(index, el) {  
if (!chartRefs.value[index]) {  
  chartRefs.value[index] = { dom: el, chart: null };  
} else {  
  chartRefs.value[index].dom = el;  
}  
} 
const socketUrl2 = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingIsRun`;
const handleMessage2 = (data) => {
  const tasks = data.temperingTaskType[0];  
  if (tasks && tasks.length >= 4) {  
    flake.value = tasks[0].state === 1;  
    flakeb.value = tasks[1].state === 2;  
    flakec.value = tasks[2].state === 3;  
    flaked.value = tasks[3].state === 4;  
  }
};
// 卧式理片
const socketUrl3 = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlassIsRun`;
const handleMessage3 = (data) => {
  const tasks = data.taskCaches[0];  
  woshia.value = tasks.some(task => task.endCell == 2001 && task.glassId == 0);  
  woshic.value = tasks.some(task => task.endCell == 2002 && task.glassId == 0);  
};
// 大理片笼
const socketUrl4 = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/isRun`;
const handleMessage4 = (data) => {
  const tasks = data.bigStorageCageDetailsOutTask[0];  
  const taskss = data.bigStorageCageDetailsFeedTask[0];  
    dalipiana.value = tasks.some(task => task.slot !== null && task.slot !== undefined);  
dalipianb.value = taskss.some(task => task.slot !== null && task.slot !== undefined);  
};
// 上片
const socketUrl5 = `ws://${WebSocketHost}:${host}/api/loadGlass/api/talk/loadGlassIsRun`;
const handleMessage5 = (data) => {
  if(data.engineering.length !==0 ){
    shangpian.value = true;
}
};
const renderPieCharts = () => {
processesData.value.forEach((data, index) => {
  const chart = echarts.init(document.getElementById('pieChart_' + index));
@@ -241,20 +270,63 @@
};


onUnmounted(() => {  
socket.close();  
});  
// onUnmounted(() => {  
// socket.close();  
// socket2.close();  
// }); 
// onMounted(() => {
//   socket = initializeWebSocket(socketUrl, handleMessage);
//   // socket = new WebSocket(socketUrl);
// socket.onmessage = (event) => {  
//   const data = JSON.parse(event.data);  
//   processesData.value = data.device[0].map(rect => ({  
//     ...rect,  
//     completedQuantity: rect.completedQuantity,  
//     breakageQuantity: rect.breakageQuantity,  
//     thisProcess: rect.thisProcess,  
//   }));  
//   renderPieCharts();
//   console.log(processesData.value);
//   // updateCharts();
//   socket2 = initializeWebSocket(socketUrl2, handleMessage2);
//   // socket2 = new WebSocket(socketUrl2);  
//   // socket2.onmessage = (event) => {  
//   //   const data = JSON.parse(event.data);  
//   //   handleMessage2(data);  
//   // };  
// };
// }); 
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
  socket2 = initializeWebSocket(socketUrl2, handleMessage2);
  socket3 = initializeWebSocket(socketUrl3, handleMessage3);
  socket4 = initializeWebSocket(socketUrl4, handleMessage4);
  socket5 = initializeWebSocket(socketUrl5, handleMessage5);
});
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    if (socket2) {
    closeWebSocket2(socket2);
    }
    if (socket3) {
    closeWebSocket3(socket3);
    }
    if (socket4) {
    closeWebSocket4(socket4);
    }
    if (socket5) {
    closeWebSocket5(socket5);
    }
    });
onBeforeUnmount(() => {
console.log("关闭了")
closeWebSocket();
closeWebSocket2();
closeWebSocket3();
closeWebSocket4();
closeWebSocket5();
});
</script>  

@@ -281,29 +353,29 @@
#overlay{
  position: absolute;
  z-index: 1;
  width: 30px;
  width: 29px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -39px;
  margin-left: 4px;
  margin-top: -34px;
  margin-left: -8px;
}
#overlayb{
  position: absolute;
  z-index: 1;
  width: 16px;
  width: 15px;
  height: 115px;
  background-color: #529b2e;
  margin-top: -197px;
  margin-left: 9px;
  margin-left: -3px;
}
#overlayc{
  position: absolute;
  z-index: 1;
  width: 16px;
  width: 14px;
  height: 16px;
  background-color: #529b2e;
  margin-top: -238px;
  margin-left: 9px;
  margin-top: -243px;
  margin-left: -2px;
}
#overlayd{
  position: absolute;
@@ -311,7 +383,70 @@
  width: 28px;
  height: 11px;
  background-color: #529b2e;
  margin-top: -234px;
  margin-left: 56px;
  margin-top: -239px;
  margin-left: 40px;
}
#lipiana{
  position: absolute;
  z-index: 1;
  width: 65px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -57px;
  margin-left: 240px;
}
#lipianb{
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -72px;
  margin-left: 323px;
}
#lipianc{
  position: absolute;
  z-index: 1;
  width: 65px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -32px;
  margin-left: 270px;
}
#lipiand{
  position: absolute;
  z-index: 1;
  width: 21px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -48px;
  margin-left: 354px;
}
#longa{
  position: absolute;
  z-index: 1;
  width: 29px;
  height: 5px;
  background-color: #529b2e;
  margin-top: -20px;
  margin-left: 80px;
}
#longb{
  position: absolute;
  z-index: 1;
  width: 29px;
  height: 5px;
  background-color: #529b2e;
  margin-top: -20px;
  margin-left: 150px;
}
#shangpianji{
  position: absolute;
  z-index: 1;
  width: 29px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -90px;
  margin-left: 568px;
}
</style>