上片前端

wu

2024-09-14 fafe6c932098fa5ea8fafffd04fe65f6f47961e4

上片前端

 UI-Project/src/views/MechanicalArm/mechanicalArm.vue

New file
@@ -0,0 +1,191 @@
<!--  打标机  -->
<script setup>
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
let language = ref(localStorage.getItem('lang') || 'zh')
const { t } = useI18n()
const requestData = reactive({
  account: '',
  password: '',
});
const mechanicalArmData = ref([]);

onMounted(async () => {
  load();
});
//获取数据
const load = async() => {
  try {
    const response = await request.post('/deviceInteraction/tasking/findCraftTasking',
    {
      "glassId": 0,
      "state": "线上",
      "workState": "工作",
      "currentCraft": "打磨"
    }); // 替换为你的API端点  
    if (response.code === 200) {
      mechanicalArmData.value= response.data;
    } else {
      ElMessage.warning(res.msg)
    }
  } catch (error) {
    // console.error('Error fetching rects :', error);  
  }
}
//修改工作状态 【失败/工作/完成】
const workStatus = async(row,state) => {
  ElMessageBox.confirm(
        t('marking.tips'),
        t('delivery.prompt'),  
        {
          confirmButtonText: t('marking.sure'),
          cancelButtonText: t('marking.cancel'),
          type: 'warning',
        }
      )
        .then(() => {
          //开始修改
          request.post("/deviceInteraction/tasking/updateCraftTasking",
            {
              "glassId": row.glassId,
              "workState": state
            }).then((res) => { // 替换为你的API端点  
              if (res.code === 200) {
                ElMessage.success(res.message);
                load();
              } else {
                ElMessage.warning(res.message)
              }
            })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
          })
        })

}

//开工/暂停
const machineStatus = async(row,state) => {

}

//下线(拿走)
const downLine = async(row,state) => {
  ElMessageBox.confirm(
        t('marking.tips'),
        t('delivery.prompt'),  
        {
          confirmButtonText: t('marking.sure'),
          cancelButtonText: t('marking.cancel'),
          type: 'warning',
        }
      )
        .then(() => {
          //下线接口
          request.post("/deviceInteraction/tasking/updateDownLine",
            {
              "glassId": row.glassId,
              "state": state
            }).then((res) => { // 替换为你的API端点  
              if (res.code === 200) {
                ElMessage.success(res.message);
                this.load();
              } else {
                ElMessage.warning(res.message)
              }
            })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: t('marking.cancel'),
          })
        })
}
//上线
const topLine = async() => {

}

</script>
<template>
  <div ref="content">
    <div id="div-title" style="font-size: 20px; font-weight: bold; margin:10px 0 10px 0;padding-left: 20px;">
      {{ $t('mechanicalArm.deleteTips') }}
    </div>
    <hr />
    <br>
    <div id="search" style="padding-left: 20px;">
      <!-- 功能 -->
      <el-button type="primary" id="searchButton" @click="machineStatus">开工</el-button>
      <el-button type="primary" id="searchButton" @click="topLine">上线</el-button>
    </div>
    <div id="main-body" style="min-height:240px;">
      <!-- 表格内容 -->
      <el-table :data="mechanicalArmData" stripe
        :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="序号" min-width="30" />
        <el-table-column prop="batchNumber" label="批次号" />
        <el-table-column prop="taskType" label="任务类型" />
        <el-table-column prop="glassId" label="玻璃编号" />
        <el-table-column prop="length" label="长" />
        <el-table-column prop="width" label="宽" />
        <el-table-column prop="thickness" label="厚" />
        <el-table-column prop="workState" label="状态" />
        <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, '破损')">破损</el-button>
            <el-button size="mini" link type="primary" plain @click="workStatus(scope.row, '完工')">完工</el-button>
            <el-button size="mini" link type="primary" plain @click="downLine(scope.row, '下线')">下线</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="main-body"
      style="width: 100%; height: 460px;background-image: url(../../src/assets/自动打标机.png) ;background-size: 100% 100%;">
      <!-- 画图内容 -->
      <div style="width: 100px; height: 100px; background-color: red; position: relative; top: 171px; left: 218px">
      </div>
    </div>
  </div>
</template>

<style scoped>
table {
  text-align: center;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table td {
  text-align: center;
}

#main-body {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  margin-top: 25px;
}

#searchButton {
  width: 100px;
  height: 40px;
  font-size: 16px;
  border-radius: 5px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>