| | |
|---|
| | | <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' }" |
|---|
| | |
|---|
| | | 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端点 |
|---|
| | |
|---|
| | | width: 240px; /* 直线的长度，根据需要调整 */ |
|---|
| | | background-color: #911005; /* 直线的颜色 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
