线路配置，打标机前端页面

严智鑫

2024-09-13 ef9e8df8f911d53d1ec23bf920f1cd5ba8f18e13

 UI-Project/src/views/Marking/marking.vue

@@ -1,33 +1,116 @@
<!--  打标机  -->
<script setup>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
</script>
<script>
export default {
  mounted() {
    //获取数据
    var data="ProcessId="+"P24032508";
    request.get("/TidyUpGlassModule/SelectTerritoryInfo?"+data).then((res) => {
      if (res.code == 200) {
        for(var i=0;i<res.data.length;i++){
          //遍历数据
        }   
        f1();
      } else {
        ElMessage.warning(res.msg)
        router.push("/login");
      }
    });
  },
  methods: {
    //方法
    f1() {
       
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 findCraftTaskingData = 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) {
      findCraftTaskingData.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>
@@ -35,52 +118,70 @@
    <div id="div-title" style="font-size: 20px; font-weight: bold; margin:10px 0 10px 0;padding-left: 20px;">
      自动打标机
    </div>
    <hr/>
    <hr />
    <br>
    <div id="search">
    <div id="search" style="padding-left: 20px;">
      <!-- 功能 -->
      <el-button type="primary" id="searchButton">开工</el-button>
      <el-button type="primary" id="searchButton">上线</el-button>
      <el-button type="primary" id="searchButton">下线</el-button>
      <el-button type="primary" id="searchButton">破损</el-button>
      <el-button type="primary" id="searchButton">完工</el-button>
      <el-button type="primary" id="searchButton" @click="machineStatus">开工</el-button>
      <el-button type="primary" id="searchButton" @click="topLine">上线</el-button>
      <!-- <el-button type="primary" id="searchButton" @click="downLine('下线')">下线</el-button>
      <el-button type="primary" id="searchButton" @click="workStatus('破损')">破损</el-button>
      <el-button type="primary" id="searchButton" @click="workStatus('完工')">完工</el-button> -->
    </div>
    <div id="main-body" style="min-height:240px;">
      <!-- 表格内容 -->
       <el-table :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129',textAlign:'center'}">
        <el-table-column prop="date" label="序号"  />
        <el-table-column prop="name" label="工程号"  />
        <el-table-column prop="name" label="玻璃类型"  />
        <el-table-column prop="name" label="玻璃编号" />
        <el-table-column prop="name" label="长"  />
        <el-table-column prop="name" label="宽" />
        <el-table-column prop="name" label="厚"  />
        <el-table-column prop="name" label="状态" />
      <el-table :data="findCraftTaskingData" 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="height: 100%;">

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

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

table td {
  text-align: center;
}

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

#searchButton {
  width: 100px;
  height: 40px;
  font-size: 16px;