看板2更新

huang

2025-04-18 1460aa1d5f2b5722d43ed31724594c006213bea7

 UI-Project/src/views/ScanQrCodesReport/scanQrCodesReport.vue

@@ -17,12 +17,13 @@
const machineId=23;//当前页面的设备ID
//使用WebSocket方式展示数据
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/edging`;
const socketUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/scanQrCodesReport`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  loadData.value = data.taskingList[0];
  findMachine.value = data.machine[0];
  // console.log(data);
};
onUnmounted(() => {
  if (socket) {
@@ -38,41 +39,11 @@
  //使用WebSocket方式展示数据
  socket = initializeWebSocket(socketUrl, handleMessage);// 初始化 WebSocket，并传递消息处理函数


  //使用接口方式展示数据
  //load();
});

// //获取数据
// const load = async() => {
//   //获取设备任务数据
//   try {
//     const response = await request.post('/deviceInteraction/tasking/findMachineTask',
//     {
//       "id": 11
//     }); // 替换为你的API端点  
//     if (response.code === 200) {
//       loadData.value.findTaskingData= response.data;
//     } else {
//       ElMessage.warning(res.msg)
//     }
//   } catch (error) {
//     // console.error('Error fetching rects :', error);  
//   }
//   //获取设备状态
//   try {
//     const response = await request.post('/deviceInteraction/machine/findMachine',
//     {
//       "id": 11
//     }); // 替换为你的API端点  
//     if (response.code === 200) {
//       findMachine.value= response.data;
//     } else {
//       ElMessage.warning(res.msg)
//     }
//   } catch (error) {
//     // console.error('Error fetching rects :', error);  
//   }
// }
//修改工作状态 【失败/正在工作/完工】
const workStatus = async(row,state) => {
  let url;
@@ -86,11 +57,11 @@
    return;
  }
  ElMessageBox.confirm(
        t('marking.tips'),
        t('functionState.tips'),
        t('delivery.prompt'),  
        {
          confirmButtonText: t('marking.sure'),
          cancelButtonText: t('marking.cancel'),
          confirmButtonText: t('functionState.sure'),
          cancelButtonText: t('functionState.cancel'),
          type: 'warning',
        }
      )
@@ -110,7 +81,7 @@
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
            message: t('functionState.cancel'),
          })
        })

@@ -119,11 +90,11 @@
//开工/暂停
const machineStatus = async(state) => {
  ElMessageBox.confirm(
        t('marking.tips'),
        t('functionState.tips'),
        t('delivery.prompt'),  
        {
          confirmButtonText: t('marking.sure'),
          cancelButtonText: t('marking.cancel'),
          confirmButtonText: t('functionState.sure'),
          cancelButtonText: t('functionState.cancel'),
          type: 'warning',
        }
      )
@@ -144,18 +115,18 @@
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
            message: t('functionState.cancel'),
          })
        })
}
//破损
const damagedTask = async(row) => {
  ElMessageBox.confirm(
        t('marking.tips'),
        t('functionState.tips'),
        t('delivery.prompt'),  
        {
          confirmButtonText: t('marking.sure'),
          cancelButtonText: t('marking.cancel'),
          confirmButtonText: t('functionState.sure'),
          cancelButtonText: t('functionState.cancel'),
          type: 'warning',
        }
      )
@@ -175,18 +146,18 @@
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
            message: t('functionState.cancel'),
          })
        })
}
//下线(拿走)
const glassDownLine = async(row) => {
  ElMessageBox.confirm(
        t('marking.tips'),
        t('functionState.tips'),
        t('delivery.prompt'),  
        {
          confirmButtonText: t('marking.sure'),
          cancelButtonText: t('marking.cancel'),
          confirmButtonText: t('functionState.sure'),
          cancelButtonText: t('functionState.cancel'),
          type: 'warning',
        }
      )
@@ -206,7 +177,7 @@
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
            message: t('functionState.cancel'),
          })
        })
}
@@ -219,14 +190,14 @@
<template>
  <div ref="content" style="padding:0 20px;">
    <div id="div-title" style="font-size: 20px; font-weight: bold; margin:10px 0 10px 0;padding-left: 20px;">
      {{$t('machine.edging')}}
      {{$t('machine.scanQrCodesReport')}}
    </div>
    <hr />
    <br>
    <div id="search" >
      <!-- 功能 -->
      <el-button type="primary" id="ButtonMachineStatus" @click="machineStatus((findMachine['state']=='暂停'?'开工':'暂停'))">{{findMachine['state']=='开工'?$t('functionState.start'):$t('functionState.stop')}}</el-button>
      <el-button type="primary" id="ButtonTopLine" @click="topLine">{{$t('functionState.topLine')}}</el-button>
      <!-- <el-button :type="(findMachine['state']=='暂停'?'danger':'success')" id="ButtonMachineStatus" @click="machineStatus((findMachine['state']=='暂停'?'开工':'暂停'))">{{findMachine['state']=='开工'?$t('functionState.start'):$t('functionState.stop')}}</el-button>
      <el-button type="primary" id="ButtonTopLine" @click="topLine">{{$t('functionState.topLine')}}</el-button> -->
      <!-- <el-button type="primary" id="searchButton" @click="downLine('下线')">下线</el-button>
      <el-button type="primary" id="searchButton" @click="workStatus('破损')">破损</el-button>
      <el-button type="primary" id="searchButton" @click="workStatus('完工')">完工</el-button> -->
@@ -245,27 +216,41 @@
        <el-table-column prop="width" :label="$t('glassInfo.width')"/>
        <el-table-column prop="thickness" :label="$t('glassInfo.thickness')"/>
        <el-table-column prop="workState" :label="$t('glassInfo.workState')"/>
        <el-table-column fixed="right" :label="$t('productStock.operate')" align="center" width="270">
        <!-- <el-table-column fixed="right" :label="$t('productStock.operate')" align="center" width="270">
          <template #default="scope">
            <el-button size="mini" link type="primary" plain @click="workStatus(scope.row, '重发')" >{{$t('functionState.anew')}}</el-button>
            <el-button size="mini" link type="primary" plain @click="workStatus(scope.row, '完工')">{{$t('functionState.finish')}}</el-button>
            <el-button size="mini" link type="primary" plain @click="damagedTask(scope.row)">{{$t('functionState.lose')}}</el-button>
            <el-button size="mini" link type="primary" plain @click="glassDownLine(scope.row)">{{$t('functionState.downLine')}}</el-button>
          </template>
        </el-table-column>
        </el-table-column> -->
      </el-table>
    </div>

    <div id="main-body"
      style="width: 50%; height: 460px; margin: auto;background-image: url(../../src/assets/扫码识别.png) ;background-size: 100% 100%;">
    <div id="main-body1" 
      style="width: 70%; height: 400px;margin:20px auto;background-size: 100% 100%;">
      <!-- 画图内容 -->
      <div style="width: 150px; height: 100px; background-color: red; position: relative; top: 171px; left: 328px">
      <div :style="{
        width: loadData.length > 0 ? loadData[0]['length'] + 'px' : '200px',
        height: loadData.length > 0 ? loadData[0]['width'] + 'px' : '100px',
        backgroundColor: 'red',
        position: 'relative',
        top: '60px', 
        left: '28px',
        textAlign: 'center'
      }">
        <p v-if="loadData.length > 0">{{ loadData[0]['scanId'] }}</p>
        <p v-if="loadData.length > 0">
          {{ loadData[0]['length'] }} * {{ loadData[0]['width'] }}
        </p>
        <p v-else>暂无数据</p> <!-- 可选：显示默认消息 -->
      </div>
    </div>
  </div>
</template>

<style scoped>

table {
  text-align: center;
  width: 100%;