图片测试

wangfei

2024-07-17 f2ea663c986c5309a6b1d3f283c13bd312ecbed7

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

@@ -1,10 +1,8 @@
<script setup>
import {Search} from "@element-plus/icons-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')
@@ -39,7 +37,6 @@
    fetchFlowCardId(); 
  dialogFormVisiblea.value = true; // 打开绑定架子对话框
};

//获取流程卡号
const fetchFlowCardId = async () => {
  try {
@@ -59,7 +56,6 @@
  }
};
//确认

const handleConfirm = async () => {
  try {
    const firstPart = flowCardId.value.split('|')[0].trim(); // 
@@ -68,9 +64,7 @@
      workstationId: workstationId.value,
      flowCardId: firstPart,
      layer:twoPart

    }); 

    console.log(response)
    if (response.code == 200) {
      // 绑定成功，处理逻辑
@@ -88,16 +82,12 @@
    console.error(error);
  }
};


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

};

const handleBindRack2 = (row) => {
  workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名
  dialogFormVisiblea2.value = true; // 打开绑定架子对话框
@@ -129,8 +119,6 @@
            dialogFormVisiblea2.value = false;
    }
};


// 发送获取表格数据的请求
const fetchTableData = async () => {
  try {
@@ -151,78 +139,43 @@
    ElMessage.error('获取表格数据失败，请重试');
  }
};


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

  // 更新 tableData 的数据

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

};

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

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

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

const getTagType =(status) => {
      return status === 1 ? 'success' : 'danger';
      // 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）
    }

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


// beforeUnmount(() => {
//   closeWebSocket();
// });
// setInterval(fetchTableData, 2000)
</script>

<template>
  <div>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 200px;">
        <el-table height="100%" ref="table" 
    <el-card style="flex: 1;" v-loading="loading">
      <el-card style="flex: 1;margin-left: 4px;margin-top: 1px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table height="200px" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <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="flowCardId" align="center" :label="$t('reportWork.cardnumber')" min-width="150" />
          <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="otherNumber" 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
@@ -232,10 +185,7 @@
            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>
            <el-tag type="success" >{{ 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">
@@ -247,7 +197,22 @@
        </el-table>
      </div>
    </el-card>

    <!-- workstationId: '1',
    workstationId: '1005',
    flowCardId: '183.6',
    totalquantity: '1991',
    racksnumber:"1",
    work_state: '待识别', -->
  <div style="display: flex;" class="awatch">
  <div id="main-body">
      <Landingindication></Landingindication>
    </div>
  <div id="main-bodya">
    <Landingindicationtwo></Landingindicationtwo>
    </div>
    </div>
    </el-card>
  </div>

    <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" :title="$t('reportWork.bindingshelves')">
    <div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
@@ -273,12 +238,7 @@
      </div>
    </template>
  </el-dialog>




  <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">
@@ -288,26 +248,8 @@
      </div>
    </template>
  </el-dialog>


    <!-- workstationId: '1',
    workstationId: '1005',
    flowCardId: '183.6',
    totalquantity: '1991',
    racksnumber:"1",
    work_state: '待识别', -->
  </div>
  <div style="display: flex;">
  <div id="main-body">
      <Landingindication></Landingindication>
    </div>
  <div id="main-bodya">
    <Landingindicationtwo></Landingindicationtwo>
    </div></div>
</template>

<style scoped>

#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
#dialog-footer{
@@ -323,15 +265,15 @@
   background-color: #337ecc;
   margin-left: 28%;
}
#awatch{
  height: 450px;
.awatch{
  max-width: 100%;
}
#main-body{
  margin-top: -20px;
  margin-left: 200px;
  margin-top: -40px;
  margin-left: 150px;
}
#main-bodya{
  margin-top: -10px;
  margin-top: -40px;
  margin-left: 100px;
}
</style>