| | |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import {reactive} from "vue"; |
| | | import {useRouter} from "vue-router" |
| | | import request from "@/utils/request" |
| | | |
| | | import { ref } from 'vue' |
| | | import { ref, onMounted } from 'vue'; |
| | | // import { ref } from 'vue' |
| | | |
| | | const dialogFormVisible = ref(true) |
| | | const dialogFormVisiblea = ref(false) |
| | | const dialogFormVisibleb = ref(false) |
| | | const width = ref(); // 用于存储process_id的响应式引用 |
| | | const height = ref(); // 用于存储process_id的响应式引用 |
| | | const adjustedRects = ref([]); |
| | | const adjustedRectsa = ref([]); |
| | | const adjustedRectsb = ref([]); |
| | | // 进炉中 |
| | | onMounted(async () => { |
| | | try { |
| | | const response = await request.get('/temperingGlass/temperingGlassInfo/SelectIntoGlass'); |
| | | if (response.code === 200) { |
| | | const rawRects = response.data; // 设置矩形数据 |
| | | console.log(response.data); |
| | | const { height: newheight,width: newwidth } = response.data; // 获取尺寸 |
| | | height.value = newheight; |
| | | width.value = newwidth; |
| | | |
| | | const getTableRow = (row,type) =>{ |
| | | switch (type) { |
| | | case 'edit' :{ |
| | | //alert('我接收到子组件传送的编辑信息') |
| | | router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }}) |
| | | break |
| | | } |
| | | case 'delete':{ |
| | | alert('我接收到子组件传送的删除信息') |
| | | break |
| | | } |
| | | } |
| | | } |
| | | adjustedRects.value = rawRects.map(rect => ({ |
| | | ...rect, // 复制原始对象的其他属性 |
| | | xcoordinate: rect.xcoordinate, // 将x值除以3 |
| | | ycoordinate: rect.ycoordinate, |
| | | width: rect.width , |
| | | height: rect.height , |
| | | })); |
| | | console.log(rect); |
| | | |
| | | // console.log( (rect.width*100) / 300 ); |
| | | } else { |
| | | // console.error('Failed to fetch rectangles from API.'); |
| | | console.error('Failed to fetch rects from API.'); |
| | | } |
| | | } catch (error) { |
| | | // console.error('Error fetching rectangles :', error); |
| | | console.error('Error fetching rects :', error); |
| | | } |
| | | }); |
| | | // 进炉前 |
| | | const handleConfirm = async () => { |
| | | try { |
| | | const response = await request.post('/temperingGlass/temperingGlassInfo/SelectWaitingGlass'); |
| | | if (response.code === 200) { |
| | | const rawRects = response.data; // 设置矩形数据 |
| | | console.log(response.data); |
| | | const { height: newheight,width: newwidth } = response.data; // 获取尺寸 |
| | | height.value = newheight; |
| | | width.value = newwidth; |
| | | |
| | | adjustedRectsa.value = rawRects.map(rect => ({ |
| | | ...rect, // 复制原始对象的其他属性 |
| | | xcoordinate: rect.xcoordinate, // 将x值除以3 |
| | | ycoordinate: rect.ycoordinate, |
| | | width: rect.width , |
| | | height: rect.height , |
| | | })); |
| | | console.log(rect); |
| | | |
| | | // console.log( (rect.width*100) / 300 ); |
| | | } else { |
| | | // console.error('Failed to fetch rectangles from API.'); |
| | | console.error('Failed to fetch rects from API.'); |
| | | } |
| | | } catch (error) { |
| | | // console.error('Error fetching rectangles :', error); |
| | | console.error('Error fetching rects :', error); |
| | | } |
| | | }; |
| | | |
| | | // 已出炉 |
| | | const handleConfirma = async () => { |
| | | try { |
| | | const response = await request.get('/temperingGlass/temperingGlassInfo/SelectOutGlass'); |
| | | if (response.code === 200) { |
| | | const rawRects = response.data; // 设置矩形数据 |
| | | console.log(response.data); |
| | | const { height: newheight,width: newwidth } = response.data; // 获取尺寸 |
| | | height.value = newheight; |
| | | width.value = newwidth; |
| | | |
| | | adjustedRectsb.value = rawRects.map(rect => ({ |
| | | ...rect, // 复制原始对象的其他属性 |
| | | xcoordinate: rect.xcoordinate, // 将x值除以3 |
| | | ycoordinate: rect.ycoordinate, |
| | | width: rect.width , |
| | | height: rect.height , |
| | | })); |
| | | console.log(rect); |
| | | |
| | | // console.log( (rect.width*100) / 300 ); |
| | | } else { |
| | | // console.error('Failed to fetch rectangles from API.'); |
| | | console.error('Failed to fetch rects from API.'); |
| | | } |
| | | } catch (error) { |
| | | // console.error('Error fetching rectangles :', error); |
| | | console.error('Error fetching rects :', error); |
| | | } |
| | | }; |
| | | const gridOptions = reactive({ |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <template> |
| | | <div style="margin-top: 10px;"> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false">摆片版图</el-button> |
| | | <el-button id="searchButton" type="success" @click="dialogFormVisiblea = true;dialogFormVisible = false">已出炉玻璃</el-button> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false;dialogFormVisibleb = false;">进炉中</el-button> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="handleConfirm();dialogFormVisiblea = true;dialogFormVisible = false;dialogFormVisibleb = false;" >进炉前</el-button> |
| | | <el-button id="searchButton" type="success" @click="handleConfirma();dialogFormVisibleb = true;dialogFormVisible = false;dialogFormVisiblea = false">已出炉玻璃</el-button> |
| | | <div v-if="dialogFormVisible" > |
| | | <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> |
| | | <div style="display: flex;margin-bottom: 20px;"> |
| | | <!-- <div style="display: flex;margin-bottom: 20px;"> |
| | | <div style="margin-left: 450px;font-size: 20px;">工程号:P20240305001 </div> |
| | | <div style="margin-left: 150px;font-size: 20px;">版图编号:1</div> |
| | | </div> |
| | | <div> |
| | | <div id="boxa" style="width: 200px;height: 300px;margin-left: 70px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | </div> |
| | | <div style="margin-top: 20px;"> |
| | | <div id="boxa" style="width: 200px;height: 300px;margin-left: 70px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxa" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | <div id="boxb" style="width: 200px;height: 300px;"> |
| | | <div style="margin-top: 35px;"> NG202405060798A01-1</div> |
| | | <div> 500×1000</div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div v-if="dialogFormVisiblea"> |
| | | </div> --> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> |
| | | <el-scrollbar height="630px"> |
| | | <div id="home-card"> |
| | | <div id="home-item" v-for="n in 20" :key="n"> |
| | | <div id="box" style="width: 100px;height: 165px;">100*65</div> |
| | | <div id="box" style="width: 107px;height: 150px;">107*60</div> |
| | | <div id="box" style="width: 107px;height: 155px;">109*60</div> |
| | | </div> |
| | | <div style="position: relative;width: 1400px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRects" |
| | | :key="index" |
| | | class="rect" |
| | | :style="{ position: 'absolute', top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}px`, width: `${rect.width}px`, height: `${rect.height}px` }" |
| | | > |
| | | <div class="centered-text"> |
| | | <div style="margin-top: 50px;margin-left: -85px;">{{ rect.width }}*{{ rect.height }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </div> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | <div v-if="dialogFormVisiblea"> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> |
| | | <el-scrollbar height="630px"> |
| | | <div style="position: relative;width: 1400px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRects" |
| | | :key="index" |
| | | class="rect" |
| | | :style="{ position: 'absolute', top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}px`, width: `${rect.width}px`, height: `${rect.height}px` }" |
| | | > |
| | | <div class="centered-text"> |
| | | <div style="margin-top: 50px;margin-left: -85px;">{{ rect.width }}*{{ rect.height }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </div> |
| | | <div v-if="dialogFormVisibleb"> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> |
| | | <el-scrollbar height="630px"> |
| | | <div style="position: relative;width: 1400px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRects" |
| | | :key="index" |
| | | class="rect" |
| | | :style="{ position: 'absolute', top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}px`, width: `${rect.width}px`, height: `${rect.height}px` }" |
| | | > |
| | | <div class="centered-text"> |
| | | <div style="margin-top: 50px;margin-left: -85px;">{{ rect.width }}*{{ rect.height }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </div> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <style scoped> |
| | |
| | | } |
| | | } |
| | | } |
| | | .rect { |
| | | border: 1px solid black; /* 设置矩形的边框 */ |
| | | background-color: lightblue; /* 设置矩形的背景色 */ |
| | | } |
| | | #rect { |
| | | position: relative; /* 确保箭头可以相对于矩形定位 */ |
| | | /* 其他样式 */ |
| | | } |
| | | .centered-text { |
| | | /* 设置文字居中样式 */ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100%; /* 确保div占据整个矩形的高度 */ |
| | | } |
| | | </style> |