| | |
| | | <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({ |
| | |
| | | }); |
| | | const loadData = ref([]); |
| | | const findMachine = ref([]); |
| | | //使用WebSocket方式展示数据 |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/deviceInteraction/api/talk/marking`; |
| | | // 定义消息处理函数,更新 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/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 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; |
| | |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | load(); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | this.load(); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | this.load(); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | |
| | | }).then((res) => { // 替换为你的API端点 |
| | | if (res.code === 200) { |
| | | ElMessage.success(res.message); |
| | | this.load(); |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | |
| | | </div> |
| | | <div id="main-body" style="min-height:240px;"> |
| | | <!-- 表格内容 --> |
| | | <el-table :data="loadData.findTaskingData" 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" /> --> |