wu
2024-10-11 3fba99c4b89dfcc56d08cfe99c7391dbae082713
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) {
@@ -37,6 +38,7 @@
onMounted(async () => {
  //使用WebSocket方式展示数据
  socket = initializeWebSocket(socketUrl, handleMessage);// 初始化 WebSocket,并传递消息处理函数
  //使用接口方式展示数据
  //load();
@@ -86,11 +88,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 +112,7 @@
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
            message: t('functionState.cancel'),
          })
        })
@@ -119,11 +121,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 +146,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 +177,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 +208,7 @@
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
            message: t('functionState.cancel'),
          })
        })
}
@@ -219,14 +221,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 +247,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%;