zhoushihao
2024-05-09 c0505074f5149b7f0c7fe26822e793eac18319f3
UI-Project/src/views/Identify/identify.vue
@@ -1,5 +1,6 @@
<template>  
<!-- <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> -->
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
      <el-scrollbar height="700px">
  <div id="app" style="margin-top: 20px;">  
    <div  
      :style="{ width: `${olWidth}px`, height: `${olHeight}px`,position: 'relative' }"  
@@ -8,29 +9,51 @@
      v-for="(rect, index) in adjustedRects"  
      :key="index"  
      class="rect"  
      @click="handleBind"
      :style="{ position: 'absolute', top: `${rect.y_axis}px`, left: `${rect.x_axis}px`, width: `${rect.width}px`, height: `${rect.height}px` }"  
    >
     <!-- 箭头 -->  
     <div id="arrow"></div>
     <div id="line"></div>
     <!-- <div id="arrow"></div>
     <div id="line"></div>   -->
     <!-- <div  class="centered-text" >NG24030401B01</div> -->
     <div  class="centered-text">
    <div>{{ rect.process_id }}</div>  
    <div style="margin-top: 50px;margin-left: -85px;">{{ rect.width }}*{{ rect.height }}</div>  
  </div>
  </div> 
  <!-- 点击弹出 -->
  <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;">
    <!-- <template #footer> -->
      <!-- <div id="dialog-footer"> -->
        <el-button type="warning" plain :icon="Delete" @click="handle"  style="width: 120px;margin-left: 10px;">
          破损
        </el-button>
        <el-button  type="danger" plain @click="blind = false" style="width: 120px;margin-top: 10px;">
          <el-icon class="el-icon--right"><Upload /></el-icon>
          人工拿走</el-button>
      <!-- </div> -->
    <!-- </template> -->
  </el-dialog>
   </div>
  </div>  
  </el-scrollbar>
  </el-card>
</template>  
  
<script setup>
<script setup lang="ts">
import { Delete, Upload } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';  
import request from "@/utils/request"
const blind = ref(false)
const olWidth = ref(); 
const olHeight = ref();
const process_id = ref(); // 用于存储process_id的响应式引用 
// const rects = ref([]); // 用于存储矩形数据的响应式引用  
const adjustedRects = ref([]);
const handleBind = (row) => {
  blind.value = true; // 打开绑定架子对话框
};
onMounted(async () => {  
  try {  
    const response = await request.post('/cacheGlass/taskCache/currentCutTerritory'); // 替换为你的API端点  
@@ -103,4 +126,5 @@
  width: 240px; /* 直线的长度,根据需要调整 */  
  background-color: #911005; /* 直线的颜色 */  
}  
</style>