| | |
| | | <!-- 打标机 --> |
| | | <!-- 上片机 --> |
| | | <script setup> |
| | | import request from "@/utils/request"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import { reactive, ref, onMounted } from 'vue' |
| | | import { reactive, ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue' |
| | | import { useI18n } from 'vue-i18n' |
| | | import { WebSocketHost ,host} from '@/utils/constants' |
| | | import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | const { t } = useI18n() |
| | | const requestData = reactive({ |
| | | account: '', |
| | | password: '', |
| | | }); |
| | | const mechanicalArmData = ref([]); |
| | | const loadData = ref([]); |
| | | const findMachine = ref([]); |
| | | const machineid=1//获取数据 |
| | | //使用WebSocket方式展示数据 |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/mechanicalArm`; |
| | | // 定义消息处理函数,更新 receivedData 变量 |
| | | const handleMessage = (data) => { |
| | | // 更新 tableData 的数据 |
| | | loadData.value = data.taskingList[0]; |
| | | findMachine.value = data.machine[0]; |
| | | }; |
| | | onUnmounted(() => { |
| | | if (socket) { |
| | | closeWebSocket(socket); |
| | | } |
| | | }); |
| | | onBeforeUnmount(() => { |
| | | console.log("关闭了") |
| | | closeWebSocket(); |
| | | }); |
| | | |
| | | onMounted(async () => { |
| | | load(); |
| | | //使用WebSocket方式展示数据 |
| | | socket = initializeWebSocket(socketUrl, handleMessage);// 初始化 WebSocket,并传递消息处理函数 |
| | | |
| | | //使用接口方式展示数据 |
| | | //load(); |
| | | }); |
| | | //获取数据 |
| | | const load = async() => { |
| | | try { |
| | | const response = await request.post('/deviceInteraction/tasking/findCraftTasking', |
| | | { |
| | | "glassId": 0, |
| | | "state": "线上", |
| | | "workState": "工作", |
| | | "currentCraft": "打磨" |
| | | }); // 替换为你的API端点 |
| | | if (response.code === 200) { |
| | | mechanicalArmData.value= response.data; |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | } catch (error) { |
| | | // console.error('Error fetching rects :', error); |
| | | } |
| | | } |
| | | //修改工作状态 【失败/工作/完成】 |
| | | |
| | | // //获取数据 |
| | | // 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; |
| | | if(state=="失败"){ |
| | | url="/deviceInteraction/tasking/loseMachineTask"; |
| | | }else if(state=="正在工作"){ |
| | | url="/deviceInteraction/tasking/startMachineTask"; |
| | | }else if(state=="完工"){ |
| | | url="/deviceInteraction/tasking/finishMachineTask"; |
| | | }else{ |
| | | return; |
| | | } |
| | | ElMessageBox.confirm( |
| | | t('marking.tips'), |
| | | t('delivery.prompt'), |
| | |
| | | ) |
| | | .then(() => { |
| | | //开始修改 |
| | | request.post("/deviceInteraction/tasking/updateCraftTasking", |
| | | request.post(url, |
| | | { |
| | | "glassId": row.glassId, |
| | | "workState": state |
| | | "id": machineid, |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | load(); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | |
| | | } |
| | | |
| | | //开工/暂停 |
| | | const machineStatus = async(row,state) => { |
| | | |
| | | } |
| | | |
| | | //下线(拿走) |
| | | const downLine = async(row,state) => { |
| | | const machineStatus = async(state) => { |
| | | ElMessageBox.confirm( |
| | | t('marking.tips'), |
| | | t('delivery.prompt'), |
| | |
| | | ) |
| | | .then(() => { |
| | | //下线接口 |
| | | request.post("/deviceInteraction/tasking/updateDownLine", |
| | | request.post("/deviceInteraction/machine/updateMachineState", |
| | | { |
| | | "glassId": row.glassId, |
| | | "id": machineid, |
| | | "state": state |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | this.load(); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | }) |
| | | .catch(() => { |
| | | ElMessage({ |
| | | type: 'info', |
| | | message: t('marking.cancel'), |
| | | }) |
| | | }) |
| | | } |
| | | //破损 |
| | | const damagedTask = async(row) => { |
| | | ElMessageBox.confirm( |
| | | t('marking.tips'), |
| | | t('delivery.prompt'), |
| | | { |
| | | confirmButtonText: t('marking.sure'), |
| | | cancelButtonText: t('marking.cancel'), |
| | | type: 'warning', |
| | | } |
| | | ) |
| | | .then(() => { |
| | | //下线接口 |
| | | request.post("/deviceInteraction/tasking/damagedTask", |
| | | { |
| | | "glassId": row.glassId |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | }) |
| | | .catch(() => { |
| | | ElMessage({ |
| | | type: 'info', |
| | | message: t('marking.cancel'), |
| | | }) |
| | | }) |
| | | } |
| | | //下线(拿走) |
| | | const glassDownLine = async(row) => { |
| | | ElMessageBox.confirm( |
| | | t('marking.tips'), |
| | | t('delivery.prompt'), |
| | | { |
| | | confirmButtonText: t('marking.sure'), |
| | | cancelButtonText: t('marking.cancel'), |
| | | type: 'warning', |
| | | } |
| | | ) |
| | | .then(() => { |
| | | //下线接口 |
| | | request.post("/deviceInteraction/tasking/glassDownLine", |
| | | { |
| | | "glassId": row.glassId, |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | |
| | | <template> |
| | | <div ref="content"> |
| | | <div id="div-title" style="font-size: 20px; font-weight: bold; margin:10px 0 10px 0;padding-left: 20px;"> |
| | | {{ $t('mechanicalArm.deleteTips') }} |
| | | 自动上片机 |
| | | </div> |
| | | <hr /> |
| | | <br> |
| | | <div id="search" style="padding-left: 20px;"> |
| | | <!-- 功能 --> |
| | | <el-button type="primary" id="searchButton" @click="machineStatus">开工</el-button> |
| | | <el-button type="primary" id="searchButton" @click="topLine">上线</el-button> |
| | | <el-button type="primary" id="ButtonMachineStatus" @click="machineStatus((findMachine['state']=='暂停'?'开工':'暂停'))">{{findMachine['state']=='开工'?'开工':'暂停'}}</el-button> |
| | | <el-button type="primary" id="ButtonTopLine" @click="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> --> |
| | | </div> |
| | | <div id="main-body" style="min-height:240px;"> |
| | | <!-- 表格内容 --> |
| | | <el-table :data="mechanicalArmData" stripe |
| | | <el-table :data="loadData" stripe |
| | | :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }" |
| | | :cell-style="{ textAlign: 'center' }"> |
| | | <!-- <el-table-column type="selection" min-width="30" /> --> |
| | |
| | | <el-table-column prop="workState" label="状态" /> |
| | | <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, '破损')">破损</el-button> |
| | | <el-button size="mini" link type="primary" plain @click="workStatus(scope.row, '失败')">重发</el-button> |
| | | <el-button size="mini" link type="primary" plain @click="workStatus(scope.row, '完工')">完工</el-button> |
| | | <el-button size="mini" link type="primary" plain @click="downLine(scope.row, '下线')">下线</el-button> |
| | | <el-button size="mini" link type="primary" plain @click="damagedTask(scope.row)">破损</el-button> |
| | | <el-button size="mini" link type="primary" plain @click="glassDownLine(scope.row)">下线</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |