下片测试

wuyouming666

2024-07-16 db806d3d0b0761538b15907d1ea3caf84dc3f01d

 UI-Project/src/views/UnLoadGlass/loadmachinerack.vue

@@ -1,109 +1,57 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive,  onMounted} from "vue";
import {reactive, onMounted, onBeforeUnmount} from "vue";

import {useRouter} from "vue-router"
const router = useRouter()

import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  let language = ref(localStorage.getItem('lang') || 'zh')
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Landingindication from "./Landingindication.vue";
import Landingindicationtwo from "./Landingindicationtwo.vue";
import unloadrequest from "@/utils/unloadrequest";
import request from "@/utils/request";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
import { WebSocketHost ,host} from '@/utils/constants'
const dialogFormVisiblea = ref(false)



const dialogFormVisiblea2 = ref(false)





let socket;


const initWebSocket = (token) =>{ //初始化we

let viewname = "unloadglass";

if (typeof WebSocket === "undefined") {
  console.log("您的浏览器不支持WebSocket");
} else {
  let socketUrl = "ws://" + "localhost"+":88" + "/api/unLoadGlass/api/talk/" + viewname;
  if (socket != null) {
    socket.close();
    socket = null;
  }

  // 开启一个websocket服务
  socket = new WebSocket(socketUrl);

  // 打开事件
  socket.onopen = function () {
    console.log("websocket已打开");
  };



socket.onmessage = (msg) => {
if (!msg.data) {
return; // 如果收到空数据，则直接返回，不执行后续逻辑
}



    let obj = JSON.parse(msg.data);

    
      console.log('收到消息：', obj.data);
 
  }

  }
  }




// 数据
const loading = ref(false);


// 弹框显示控制

const dialogFormVisible = ref(false);

// 表单数据
const workstationId = ref('');
const selectedProjectNoa = ref(null); // 当前选中的角色 
const flowCardId = ref('');
const flowCardOptions = ref([]);


const flowCardOptions = ref('[]');
const tableData = reactive([]);
// 方法
const handleSelectionChange = () => {
  // 处理表格行选择事件
};

const handleBindRack = (row) => {
  workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名

  console.log(row.flowCardId);
  flowCardId.value = row.flowCardId;
  // 发起接口请求获取流程卡号
    fetchFlowCardId(); 


  dialogFormVisiblea.value = true; // 打开绑定架子对话框
};



//获取流程卡号
const fetchFlowCardId = async () => {
  try {
    const response = await unloadrequest.get('/api/unLoadGlass/getflowCardId');
    const response = await request.get('unLoadGlass/downWorkStation/getflowCardId');
    console.log(response)
    if (response.code === 200) {
      flowCardOptions.value = response.data.map(item => ({ flowcard_id: item.flowcard_id }));
    } else {
   
  flowCardOptions.value = response.data.filter(item => item !== null)
.map(item => ({ flowcard_id: item.flow_card_id }));
  console.log(flowCardOptions.value);
}
 else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
@@ -111,18 +59,25 @@
  }
};
//确认

const handleConfirm = async () => {
  try {
    const response = await unloadrequest.post('/api/unLoadGlass/updateFlowCardId', {
    const firstPart = flowCardId.value.split('|')[0].trim(); // 
const twoPart = flowCardId.value.split('|')[1].trim(); // 
    const response = await request.post('unLoadGlass/downWorkStation/updateFlowCardId', {
      workstationId: workstationId.value,
      flowCardId: flowCardId.value
      flowCardId: firstPart,
      layer:twoPart

    }); 

    console.log(response)
    if (response.code == 200) {
      // 绑定成功，处理逻辑
      console.log('绑定成功');
   
      ElMessage.success(response.message);
      updatePageData();
      dialogFormVisiblea.value = false;
    } else {
      // 请求失败，显示错误消息
@@ -135,19 +90,22 @@
};


const updatePageData = () => {
  // 假设你的页面上有一个名为 tableData 的 Vue 组件
  // 你可以直接更新 tableData 的数据
  fetchTableData()
  // 使用 $forceUpdate() 强制更新组件

};

const handleBindRack2 = (row) => {
  workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名




  dialogFormVisiblea2.value = true; // 打开绑定架子对话框
};
//清除内容
const handleclear = async () => {
    try {
        const response = await unloadrequest.post('/api/unLoadGlass/clear', {
        const response = await request.post('unLoadGlass/downWorkStation/clear', {
            workstationId: workstationId.value,
        });

@@ -173,14 +131,11 @@
};



const tableData = reactive([]);

// 发送获取表格数据的请求
const fetchTableData = async () => {
  try {
    // 发送获取表格数据的请求，并等待响应
    const response = await unloadrequest.get('/api/unLoadGlass/getone');
    const response = await request.get('unLoadGlass/downWorkStation/getone');

    // 检查响应状态
    if (response.code === 200) {
@@ -198,89 +153,58 @@
};


const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {

  // 更新 tableData 的数据

initWebSocket();
onMounted(fetchTableData);
setInterval(fetchTableData, 2000)
  tableData.splice(0, tableData.length, ...data.params[0]);
//  console.log("更新后数据", data.params[0]);

const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
};

// 初始化 WebSocket，并传递消息处理函数

onMounted(() => {
  fetchFlowCardId();
  fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);
});

onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});

const getTagType =(status) => {
      return status === 1 ? 'success' : 'danger';
      // 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }

    const toggleStatus = (row) => {
      // 切换料架状态的逻辑
      row.enableState = 1 - row.enableState; // Toggle between 0 and 1
      // 此处可以添加保存状态的逻辑，比如调用 API 更新数据
      updateRowStatus(row);
    };

    const updateRowStatus = async (row) => {
  try {
    // 假设你的后端 API 接收 PUT 请求，并且需要传递 row.id 和 row.enableState 参数
   

    const response = await request.post('unLoadGlass/downWorkStation/updateDownWorkstation', {
      enableState: 1 - row.enableState

    }); 
    console.log('Updated row status:', response.data);
    // 可以根据后端返回的数据进行进一步处理，比如更新本地状态等
  } catch (error) {
    console.error('Error updating row status:', error);
    // 处理错误情况，比如提示用户更新失败
  }
}

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  data:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})



};


</script>
@@ -292,18 +216,32 @@
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="workstationId" align="center" label="下片位" min-width="80" />
          <el-table-column prop="workstationId" align="center" label="架号" min-width="120" />
          <el-table-column prop="flowCardId" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="totalquantity" align="center" label="总数量" min-width="120" />
          <el-table-column prop="racksnumber" align="center" label="已落架数量" min-width="120" />
          <el-table-column prop="work_state" align="center" label="状态" min-width="120" />
          <el-table-column prop="deviceId" align="center" label="设备号" min-width="120" />
          <el-table-column prop="enableState" align="center" label="启用状态" min-width="120" />
          <el-table-column fixed="right" label="操作" align="center" width="200">
          <el-table-column prop="workstationId" align="center" :label="$t('reportWork.lowerbit')" min-width="80" />
          <el-table-column prop="workstationId" align="center" :label="$t('reportWork.shelfnumber')" min-width="120" />
          <el-table-column prop="flowCardId" align="center" :label="$t('reportWork.cardnumber')" min-width="120" />
          <el-table-column prop="totalquantity" align="center" :label="$t('reportWork.totalquantity')" min-width="120" />
          <el-table-column prop="racksnumber" align="center" :label="$t('reportWork.beendropped')" min-width="120" />
          <el-table-column prop="layer" align="center" label="层数" min-width="120" />
          <el-table-column prop="artificialnumber" align="center" label="人工下片数" min-width="120" />
          <el-table-column prop="work_state" align="center" :label="$t('reportWork.state')" min-width="120" />
          <el-table-column prop="deviceId" align="center" :label="$t('reportWork.devicenumber')" min-width="120" />
          <el-table-column
            align="center"
            :label="$t('reportWork.startstatus')"
            min-width="80"
            prop="enableState"
          >
          <template #default="scope">
           
            <el-tag :type="getTagType(scope.row.enableState)" @click="toggleStatus(scope.row)">
          {{ scope.row.enableState === 1 ? $t('reportWork.enable') : $t('reportWork.unenable') }}
        </el-tag>
          </template>
          </el-table-column>
          <el-table-column fixed="right" :label="$t('reportWork.operate')" align="center" width="200">
            <template #default="scope">
            <el-button size="mini" type="text" plain v-show="scope.row.enableState !== '已启用' " @click="handleBindRack(scope.row)">绑定架子</el-button>
            <el-button size="mini" type="text" plain  @click="handleBindRack2(scope.row)">清空</el-button>
            <el-button size="mini" type="text" plain v-show="scope.row.enableState !== '已启用' " @click="handleBindRack(scope.row)">{{ $t('reportWork.bindingshelves') }}</el-button>
            <el-button size="mini" type="text" plain  @click="handleBindRack2(scope.row)">{{ $t('reportWork.clear') }}</el-button>
          </template>
        </el-table-column>
        </el-table>
@@ -311,15 +249,15 @@
    </el-card>


    <el-dialog v-model="dialogFormVisiblea" top="21vh" width="30%" title="绑定架子" >
    <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" :title="$t('reportWork.bindingshelves')">
    <div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
      <el-form  size="mini" label-width="150px">
        <el-form  label-width="100px" label-position="right">
          <el-form-item label="架号：" :required="true" style="width: 18vw">
      <el-form  size="mini" label-width="100px">
        <el-form  label-width="210px" label-position="right">
          <el-form-item :label="$t('reportWork.shelfnumbera')" :required="true" style="width: 25vw">
            <el-input v-model="workstationId" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="流程卡号：" :required="true" style="width: 18vw;">
          <el-select v-model="flowCardId" placeholder="请选择流程卡号">
          <el-form-item :label="$t('reportWork.cardnumbera')" :required="true" style="width: 25vw;">
          <el-select v-model="flowCardId" :placeholder="$t('reportWork.incardnumber')">
            <el-option v-for="item in flowCardOptions" :key="item.flowcard_id" :label="item.flowcard_id" :value="item.flowcard_id" />
          </el-select>
        </el-form-item>
@@ -329,9 +267,9 @@
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          确认
          {{ $t('reportWork.sure') }}
        </el-button>
        <el-button @click="dialogFormVisiblea = false">取消</el-button>
        <el-button @click="dialogFormVisiblea = false">{{ $t('reportWork.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
@@ -339,14 +277,14 @@



  <el-dialog v-model="dialogFormVisiblea2" top="21vh" width="30%" title="清除架子玻璃" >
  <el-dialog v-model="dialogFormVisiblea2" top="21vh" width="30%" :title="$t('reportWork.clearglass')">

    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleclear">
          确认
          {{ $t('reportWork.sure') }}
        </el-button>
        <el-button @click="dialogFormVisiblea2 = false">取消</el-button>
        <el-button @click="dialogFormVisiblea2 = false">{{ $t('reportWork.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
@@ -390,7 +328,7 @@
}
#main-body{
  margin-top: -20px;
  margin-left: 300px;
  margin-left: 200px;
}
#main-bodya{
  margin-top: -10px;