wu
2024-09-14 5531c35f924004e843254c63d8a50f5fe08ad59f
UI-Project/src/views/Marking/marking.vue
@@ -2,8 +2,10 @@
<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({
@@ -12,41 +14,64 @@
});
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;
@@ -76,7 +101,6 @@
            }).then((res) => { // 替换为你的API端点  
              if (res.code === 200) {
                ElMessage.success(res.message);
                load();
              } else {
                ElMessage.warning(res.message)
              }
@@ -111,7 +135,6 @@
            }).then((res) => { // 替换为你的API端点  
              if (res.code === 200) {
                ElMessage.success(res.message);
                this.load();
              } else {
                ElMessage.warning(res.message)
              }
@@ -143,7 +166,6 @@
            }).then((res) => { // 替换为你的API端点  
              if (res.code === 200) {
                ElMessage.success(res.message);
                this.load();
              } else {
                ElMessage.warning(res.message)
              }
@@ -175,7 +197,6 @@
            }).then((res) => { // 替换为你的API端点  
              if (res.code === 200) {
                ElMessage.success(res.message);
                this.load();
              } else {
                ElMessage.warning(res.message)
              }
@@ -211,7 +232,7 @@
    </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" /> -->