From def1eb8623e1444164ae4bce9179d011a89b8c5e Mon Sep 17 00:00:00 2001 From: 严智鑫 <test> Date: 星期二, 03 十二月 2024 09:15:27 +0800 Subject: [PATCH] 现场对接批量更新 --- UI-Project/src/views/MechanicalArm/mechanicalArm.vue | 533 ++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 332 insertions(+), 201 deletions(-) diff --git a/UI-Project/src/views/MechanicalArm/mechanicalArm.vue b/UI-Project/src/views/MechanicalArm/mechanicalArm.vue index 2a4aa5e..7515a9a 100644 --- a/UI-Project/src/views/MechanicalArm/mechanicalArm.vue +++ b/UI-Project/src/views/MechanicalArm/mechanicalArm.vue @@ -1,10 +1,10 @@ -<!-- 鎵撴爣鏈� --> +<!-- 涓婄墖鏈� --> <script setup> import request from "@/utils/request"; import { ElMessage, ElMessageBox } from "element-plus"; -import { reactive, ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue' +import { computed,reactive, ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue' import { useI18n } from 'vue-i18n' -import { WebSocketHost ,host} from '@/utils/constants' +import { WebSocketHost, host } from '@/utils/constants' import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; let language = ref(localStorage.getItem('lang') || 'zh') const { t } = useI18n() @@ -12,22 +12,41 @@ account: '', password: '', }); +const blind = ref(false) +const errorInfo = ref(true) const loadData = ref([]); const findMachine = ref([]); -const machineId=1;//褰撳墠椤甸潰鐨勮澶嘔D +const sendRecords = ref([]); +const downLineTask = ref([]); +const findPrimitiveTask = ref([]); +const scanCodeOld = ref([]); +const searchs = ref(); +const machineId = 2;//褰撳墠椤甸潰鐨勮澶嘔D +var errorScanId; //浣跨敤WebSocket鏂瑰紡灞曠ず鏁版嵁 let socket = null; -const socketUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/mechanicalArm`; +let socketDownLineTask = null; +const socketUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/loadTask`; +const socketDownLineTaskUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/downLineTask`; // 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 const handleMessage = (data) => { // 鏇存柊 tableData 鐨勬暟鎹� - loadData.value = data.taskingList[0]; + loadData.value = data.findPrimitiveTasking[0]; + findPrimitiveTask.value = data.findPrimitiveTask[0]; findMachine.value = data.machine[0]; + sendRecords.value = data.sendRecords[0].reverse(); +}; +// 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 +const handleMessage2 = (data) => { + downLineTask.value = data.downLineTask[0]; // console.log(data); }; onUnmounted(() => { if (socket) { closeWebSocket(socket); + } + if (socketDownLineTask) { + closeWebSocket(socketDownLineTask); } }); onBeforeUnmount(() => { @@ -38,257 +57,362 @@ onMounted(async () => { //浣跨敤WebSocket鏂瑰紡灞曠ず鏁版嵁 socket = initializeWebSocket(socketUrl, handleMessage);// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁� - - - //浣跨敤鎺ュ彛鏂瑰紡灞曠ず鏁版嵁 - //load(); + //浣跨敤WebSocket鏂瑰紡灞曠ず鏁版嵁 + socketDownLineTask = initializeWebSocket(socketDownLineTaskUrl, handleMessage2);// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁� }); - -// //鑾峰彇鏁版嵁 -// const load = async() => { -// //鑾峰彇璁惧浠诲姟鏁版嵁 -// try { -// const response = await request.post('/deviceInteraction/tasking/findMachineTask', -// { -// "id": 11 -// }); // 鏇挎崲涓轰綘鐨凙PI绔偣 -// 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 -// }); // 鏇挎崲涓轰綘鐨凙PI绔偣 -// if (response.code === 200) { -// findMachine.value= response.data; -// } else { -// ElMessage.warning(res.msg) -// } -// } catch (error) { -// // console.error('Error fetching rects :', error); -// } -// } +//鎶ヨ鎻愮ず +const errorInfoFuntion = async (info) => { + let infoScancode='鎵爜ID锛�'+info.scanId+' '+info.scanCode; + ElMessageBox.confirm( + infoScancode, + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sureStart'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //閲嶆柊琛ュ崟 + request.post("/deviceInteraction/tasking/glassAgainTopLine", + { + "scanId": info.scanId, + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else { + ElMessage.warning(res.message) + } + }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) +} //淇敼宸ヤ綔鐘舵�� 銆愬け璐�/姝e湪宸ヤ綔/瀹屽伐銆� -const workStatus = async(row,state) => { +const workStatus = async (row, state) => { let url; - if(state=="閲嶅彂"){ - url="/deviceInteraction/tasking/loseMachineTask"; - }else if(state=="姝e湪宸ヤ綔"){ - url="/deviceInteraction/tasking/startMachineTask"; - }else if(state=="瀹屽伐"){ - url="/deviceInteraction/tasking/finishMachineTask"; - }else{ + if (state == "閲嶅彂") { + url = "/deviceInteraction/tasking/loseMachineTask"; + } else if (state == "姝e湪宸ヤ綔") { + url = "/deviceInteraction/tasking/startMachineTask"; + } else if (state == "瀹屽伐") { + url = "/deviceInteraction/tasking/finishMachineTask"; + } else { return; } ElMessageBox.confirm( - t('functionState.tips'), - t('delivery.prompt'), + t('functionState.tips'), + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sure'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //寮�濮嬩慨鏀� + request.post(url, { - confirmButtonText: t('functionState.sure'), - cancelButtonText: t('functionState.cancel'), - type: 'warning', - } - ) - .then(() => { - //寮�濮嬩慨鏀� - request.post(url, - { - "id": machineId - }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 - if (res.code === 200) { - ElMessage.success(res.message); - } else { - ElMessage.warning(res.message) - } - }) + "id": machineId + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else { + ElMessage.warning(res.message) + } }) - .catch(() => { - ElMessage({ - type: 'info', - message: t('functionState.cancel'), - }) - }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) } -//寮�宸�/鏆傚仠 -const machineStatus = async(state) => { +//瀹氬埗/鏍囧噯 +const machineMode = async (mode) => { ElMessageBox.confirm( - t('functionState.tips'), - t('delivery.prompt'), + t('functionState.tips'), + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sure'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //涓嬬嚎鎺ュ彛 + request.post("/deviceInteraction/machine/toggleModeMachine", { - confirmButtonText: t('functionState.sure'), - cancelButtonText: t('functionState.cancel'), - type: 'warning', - } - ) - .then(() => { - //涓嬬嚎鎺ュ彛 - request.post("/deviceInteraction/machine/updateMachineState", - { - "id": machineId, - "state": state - }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 - if (res.code === 200) { - ElMessage.success(res.message); - } else { - ElMessage.warning(res.message) - } - }) + "id": machineId, + "mode": mode + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else { + ElMessage.warning(res.message) + } }) - .catch(() => { - ElMessage({ - type: 'info', - message: t('functionState.cancel'), - }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) +} +//寮�宸�/鏆傚仠 +const machineStatus = async (state) => { + ElMessageBox.confirm( + t('functionState.tips'), + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sure'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //涓嬬嚎鎺ュ彛 + request.post("/deviceInteraction/machine/updateMachineState", + { + "id": machineId, + "state": state + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else { + ElMessage.warning(res.message) + } }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) } //鐮存崯 -const damagedTask = async(row) => { +const damagedTask = async (row) => { ElMessageBox.confirm( - t('functionState.tips'), - t('delivery.prompt'), + t('functionState.tips'), + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sure'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //涓嬬嚎鎺ュ彛 + request.post("/deviceInteraction/tasking/damagedTask", { - confirmButtonText: t('functionState.sure'), - cancelButtonText: t('functionState.cancel'), - type: 'warning', - } - ) - .then(() => { - //涓嬬嚎鎺ュ彛 - request.post("/deviceInteraction/tasking/damagedTask", - { - "glassId": row.glassId - }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 - if (res.code === 200) { - ElMessage.success(res.message); - } else { - ElMessage.warning(res.message) - } - }) + "glassId": row.glassId + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else { + ElMessage.warning(res.message) + } }) - .catch(() => { - ElMessage({ - type: 'info', - message: t('functionState.cancel'), - }) - }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) } //涓嬬嚎(鎷胯蛋) -const glassDownLine = async(row) => { +const glassDownLine = async (row) => { ElMessageBox.confirm( - t('functionState.tips'), - t('delivery.prompt'), + t('functionState.tips'), + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sure'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //涓嬬嚎鎺ュ彛 + request.post("/deviceInteraction/tasking/glassDownLine", { - confirmButtonText: t('functionState.sure'), - cancelButtonText: t('functionState.cancel'), - type: 'warning', - } - ) - .then(() => { - //涓嬬嚎鎺ュ彛 - request.post("/deviceInteraction/tasking/glassDownLine", - { - "glassId": row.glassId, - }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 - if (res.code === 200) { - ElMessage.success(res.message); - } else { - ElMessage.warning(res.message) - } - }) + "glassId": row.glassId, + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else { + ElMessage.warning(res.message) + } }) - .catch(() => { - ElMessage({ - type: 'info', - message: t('functionState.cancel'), - }) - }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) } -//涓婄嚎 -const topLine = async() => { - +const topLineShow = async () => { + blind.value = true; +} +//棰嗗彇浠诲姟/缁撴潫浠诲姟 +const startOrStopTask = async (row,line,isWorking) => { + ElMessageBox.confirm( + t('functionState.tips'), + t('delivery.prompt'), + { + confirmButtonText: t('functionState.sure'), + cancelButtonText: t('functionState.cancel'), + type: 'warning', + } + ) + .then(() => { + //棰嗗彇浠诲姟 + request.post("/deviceInteraction/primitiveTask/startOrStopPrimitiveTasking", + { + "id": row.id, + "getLine": line, + "isWorking": isWorking + }).then((res) => { // 鏇挎崲涓轰綘鐨凙PI绔偣 + if (res.code === 200) { + ElMessage.success(res.message); + } else {n + ElMessage.warning(res.message) + } + }) + }) + .catch(() => { + ElMessage({ + type: 'info', + message: t('functionState.cancel'), + }) + }) +} +const handleDialogClose = () => { + } + +const fetchData = async () => { + //鎵爜鍥炶溅鎻愪氦 + alert(searchs.value); + searchs.value=""; +} +const filterTableData = computed(() => + loadData.value.filter( + (data) => + !searchs.value ||data.scanId.toLowerCase().includes(searchs.value.toLowerCase()) + ) +) </script> <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.upperSlice')}} + {{ $t('machine.mechanicalArm') }} </div> + <el-dialog v-model="blind" top="30vh" style="text-align: center;" @close="handleDialogClose"> + <!-- 鏈鍙栫殑鏍囧噯浠诲姟 --> + + <el-table :data="findPrimitiveTask" stripe style="height:260px" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> + <!-- <el-table-column type="selection" min-width="30" /> --> + + <el-table-column type="index" :label="$t('glassInfo.number')" min-width="30" /> + <el-table-column prop="batchNumber" :label="$t('glassInfo.batchNumber')" /> + <el-table-column prop="taskType" :label="$t('glassInfo.taskType')" /> + <el-table-column prop="scanId" :label="$t('glassInfo.scanId')" /> + <el-table-column prop="length" :label="$t('glassInfo.length')" /> + <el-table-column prop="width" :label="$t('glassInfo.width')" /> + <el-table-column prop="thickness" :label="$t('glassInfo.thickness')" /> + <el-table-column prop="taskQuantity" :label="$t('glassInfo.taskQuantity')" /> + <el-table-column prop="reportCount" :label="$t('glassInfo.reportCount')" /> + <el-table-column prop="workState" :label="$t('glassInfo.workState')" /> + <el-table-column fixed="right" :label="$t('productStock.operate')" align="center" width="70"> + <template #default="scope"> + <el-button size="mini" link type="primary" plain @click="startOrStopTask(scope.row,2,1)">{{ + $t('functionState.getTask') }}</el-button> + </template> + </el-table-column> + </el-table> + </el-dialog> <hr /> <br> - <div id="search" > + <div id="search"> <!-- 鍔熻兘 --> - <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> --> + + <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="topLineShow">{{ $t('functionState.getTask') }}</el-button> + + <el-button :type="(findMachine['mode'] == '瀹氬埗' ? 'danger' : 'success')" id="ButtonMachineMode" + @click="machineMode((findMachine['mode'] == 0 ? 1 : 0))">{{ findMachine['mode'] == 0 ? + $t('functionState.modeD') : $t('functionState.modeB') }}</el-button> </div> + <div id="main-body" style="min-height:240px;"> <!-- 琛ㄦ牸鍐呭 --> - <el-table :data="loadData" stripe + <el-table :data="filterTableData" stripe style="height:260px" :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> + <!-- <el-table-column type="selection" min-width="30" /> --> <el-table-column type="index" :label="$t('glassInfo.number')" min-width="30" /> - <el-table-column prop="batchNumber" :label="$t('glassInfo.batchNumber')"/> - <el-table-column prop="taskType" :label="$t('glassInfo.taskType')"/> - <el-table-column prop="glassId" :label="$t('glassInfo.glassId')"/> - <el-table-column prop="length" :label="$t('glassInfo.length')"/> - <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 prop="batchNumber" sortable :label="$t('glassInfo.batchNumber')" /> + <el-table-column prop="taskType" sortable :label="$t('glassInfo.taskType')" /> + <el-table-column prop="scanId" sortable :label="$t('glassInfo.scanId')" > + <template #header> + <div> + <div>{{ $t('glassInfo.taskType') }} + <el-icon @click="fetchData"><CaretTop /></el-icon> + <el-icon @click="fetchData"><CaretBottom /></el-icon> + <el-icon color="#409efc"><Filter /></el-icon> + </div> + <el-input v-model="searchs" type="primary" id="ReportSubmission" @keyup.enter="fetchData"></el-input> + <!-- <el-input size="small" placeholder="Type to search" /> --> + </div> + </template> + </el-table-column> + <el-table-column prop="length" sortable :label="$t('glassInfo.length')" /> + <el-table-column prop="width" sortable :label="$t('glassInfo.width')" /> + <el-table-column prop="thickness" sortable :label="$t('glassInfo.thickness')" /> + <el-table-column prop="taskQuantity" sortable :label="$t('glassInfo.taskQuantity')" /> + <el-table-column prop="isWorking" sortable :label="$t('glassInfo.isWorking')" /> <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> + <el-button size="mini" link type="primary" plain @click="startOrStopTask(scope.row,2,2)">{{ + $t('functionState.stopTask') }}</el-button> </template> </el-table-column> </el-table> </div> - <div id="main-body" - style="width: 45%; height: 400px;margin: 50px 0 0 50px;background-image: url(../../src/assets/涓婄墖鏈�.png) ;background-size: 100% 100%;"> - <!-- 鐢诲浘鍐呭 --> - <div style="width: 200px; height: 100px; background-color: red; position: relative; top: 271px; left: 158px"> - <div style="width: 500px; height: 300px; position: relative; top: -250PX; left: 800px"> - <el-table :data="loadData" stripe class="custom-table" - :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center',height: '80px'}" - :cell-style="{ textAlign: 'center',height: '80px'}"> - <!-- <el-table-column type="selection" min-width="30" /> --> - <el-table-column type="index" :label="$t('glassInfo.number')" min-width="55" /> - <el-table-column prop="batchNumber" :label="$t('glassInfo.batchNumber')"/> - <el-table-column prop="taskType" :label="$t('glassInfo.taskType')"/> - <el-table-column prop="glassId" :label="$t('glassInfo.glassId')" /> - <el-table-column prop="length" :label="$t('glassInfo.length')" min-width="55"/> - <el-table-column prop="width" :label="$t('glassInfo.width')" min-width="55"/> - <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="100"> - <template #default="scope"> - <el-button size="mini" style="min-width: 100px;" link type="primary" plain @click="workStatus(scope.row, '缁戝畾')" >{{$t('functionState.bound')}}</el-button> - </template> - </el-table-column> - </el-table> - </div> + <div id="main-body" style="width: 100%; height: 460px;min-width: 1200px;"> + <el-image style="width: 70%;min-width: 900px; height: 460px;float: left;" src="../../src/assets/鎵爜璇嗗埆.png"></el-image> + <!-- <div style="width: 70%;min-width: 900px; height: 460px;background-image: url(../../src/assets/鎵爜璇嗗埆.png) ;background-size: 100% 100%;float: left;"> + + </div> --> + <div style="width: 30%;min-width: 300px; height: 460px;float: left;padding: 20px;;"> + <el-table :data="sendRecords" stripe + :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center', height: '30px' }" + :cell-style="{ textAlign: 'center' }"> + <el-table-column prop="sendContent" :label="$t('glassInfo.sendContent')" /> + </el-table> </div> + <div style="clear锛歜oth"></div> </div> </div> </template> <style scoped> - table { text-align: center; width: 100%; @@ -318,4 +442,11 @@ border: none; cursor: pointer; } +.dotClass { + width:10px; + height:10px; + border-radius: 50%; + display: block; + margin-left: 10px; +} </style> \ No newline at end of file -- Gitblit v1.8.0