| | |
| | | <script setup> |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import {reactive} from "vue"; |
| | | import {useRouter} from "vue-router" |
| | | import request from "@/utils/request" |
| | | import { ref, onMounted, onBeforeUnmount } from 'vue'; |
| | | import { ref, onMounted, onBeforeUnmount,nextTick } from 'vue'; |
| | | import { WebSocketHost ,host} from '@/utils/constants' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; |
| | | import { useI18n } from 'vue-i18n' |
| | | import { useRouter } from 'vue-router' |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | const dialogFormVisible = ref(false) |
| | | const dialogFormVisiblea = ref(true) |
| | | const dialogFormVisibleb = ref(false) |
| | | const blind = ref(false) |
| | | const dialogFormVisiblec = ref(false) |
| | | const blind1 = ref(false) |
| | | const blind2 = ref(false) |
| | | const blinda = ref(false) |
| | | const blindb = ref(false) |
| | | const dialogVisible = ref(false) |
| | | const width = ref(); |
| | | const height = ref(); |
| | | const adjustedRects1 = ref([]); |
| | | const adjustedRects2 = ref([]); |
| | | const adjustedRectsa = ref([]); |
| | | const adjustedRectsb = ref([]); |
| | | const tableData = ref([]) |
| | | const engineerId = ref('') |
| | | const router = useRouter() |
| | | const currentGlassId = ref(null); |
| | | const currenttemperingFeedSequence = ref(null); |
| | | onMounted(async () => { |
| | | try { |
| | | const response = await request.post('/loadGlass/damage/selectDamagePrint', { |
| | | type: 9, |
| | | workingProcedure: '钢化', |
| | | }) |
| | | if (response.code === 200) { |
| | | tableData.value = response.data |
| | | console.log(response.data); |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | } catch (error) { |
| | | // console.error('Error fetching rects :', error); |
| | | } |
| | | }); |
| | | const selectReportData = async () => { |
| | | let postData = { |
| | | type: 9, |
| | | workingProcedure: '钢化', |
| | | ...(engineerId.value !== '' && { engineerId: engineerId.value }), |
| | | }; |
| | | const response = await request.post("/loadGlass/damage/selectDamagePrint", postData) |
| | | if (response.code === 200) { |
| | | tableData.value = response.data; |
| | | ElMessage.success(response.message); |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | }; |
| | | const printing = async () => { |
| | | let postData = { |
| | | type: 9, |
| | | workingProcedure: '钢化', |
| | | ...(engineerId.value !== '' && { engineerId: engineerId.value }), |
| | | }; |
| | | console.log(engineerId.value); |
| | | |
| | | const response = await request.post("/loadGlass/damage/selectDamagePrintDetails", postData) |
| | | if (response.code === 200) { |
| | | dialogVisible.value = true; |
| | | tableData.value = response.data; |
| | | await nextTick(); |
| | | window.print(); |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | }; |
| | | const printTable = () => { |
| | | // 这里可以添加一些CSS样式来优化打印效果 |
| | | // 例如,可以添加一个隐藏的打印样式表 |
| | | window.print(); |
| | | }; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`; |
| | | const handleMessage = (data) => { |
| | | // 进炉中 |
| | | if(data.intoGlass2!=null){ |
| | | adjustedRects2.value = data.intoGlass2[0].map(rect => { |
| | | isActive: false |
| | | const scaleFactor = 794.67/5087; |
| | | const handleMessage = (data) => { |
| | | if (data.intoGlass2 && data.intoGlass2.length > 0) { |
| | | const newRects = data.intoGlass2[0].map(rect => { |
| | | const scaleFactor = 794.67/5087; |
| | | let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; |
| | | let newX = rect.yCoordinate; |
| | | if (rect.width < rect.height) { |
| | |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | }; |
| | | }); |
| | | }else{ |
| | | adjustedRects1.value = '' |
| | | } |
| | | if(data.intoGlass!=null){ |
| | | adjustedRects1.value = data.intoGlass[0].map(rect => { |
| | | isActive: false |
| | | const scaleFactor = 794.67/5087; |
| | | }); |
| | | // 合并新旧矩形,保留 isActive 状态 |
| | | adjustedRects2.value = adjustedRects2.value.map(oldRect => { |
| | | const newRect = newRects.find(r => r.glassId === oldRect.glassId); |
| | | if (newRect) { |
| | | return { ...oldRect, ...newRect, isActive: oldRect.isActive }; |
| | | } |
| | | return oldRect; // 如果旧矩形在新数据中不存在,则保留原样 |
| | | }).concat(newRects.filter(r => !adjustedRects2.value.some(o => o.glassId === r.glassId))); |
| | | } |
| | | if (data.intoGlass && data.intoGlass.length > 0) { |
| | | const newRects = data.intoGlass[0].map(rect => { |
| | | const scaleFactor = 794.67/5087; |
| | | let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; |
| | | let newX = rect.yCoordinate; |
| | | if (rect.width < rect.height) { |
| | |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | }; |
| | | }); |
| | | }else{ |
| | | adjustedRects2.value = '' |
| | | } |
| | | // 进炉前 |
| | | if(data.waitingGlass!=null){ |
| | | adjustedRectsa.value = data.waitingGlass[0].map(rect => { |
| | | isActive: false |
| | | const scaleFactor = 1621.78/5190; |
| | | }); |
| | | // 合并新旧矩形,保留 isActive 状态 |
| | | adjustedRects1.value = adjustedRects1.value.map(oldRect => { |
| | | const newRect = newRects.find(r => r.glassId === oldRect.glassId); |
| | | if (newRect) { |
| | | return { ...oldRect, ...newRect, isActive: oldRect.isActive }; |
| | | } |
| | | return oldRect; // 如果旧矩形在新数据中不存在,则保留原样 |
| | | }).concat(newRects.filter(r => !adjustedRects1.value.some(o => o.glassId === r.glassId))); |
| | | } |
| | | if (data.waitingGlass && data.waitingGlass.length > 0) { |
| | | const newRects = data.waitingGlass[0].map(rect => { |
| | | const scaleFactor = 1621.78/5190; |
| | | let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;; |
| | | let newX = rect.yCoordinate; |
| | | if (rect.width < rect.height) { |
| | |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | }; |
| | | }); |
| | | }else{ |
| | | adjustedRectsa.value = '' |
| | | } |
| | | // 已出炉 |
| | | if(data.outGlass!=null){ |
| | | adjustedRectsb.value = data.outGlass[0].map(rect => { |
| | | isActive: false |
| | | const scaleFactor = 1621.78/5190; |
| | | } |
| | | }); |
| | | // 合并新旧矩形,保留 isActive 状态 |
| | | adjustedRectsa.value = adjustedRectsa.value.map(oldRect => { |
| | | const newRect = newRects.find(r => r.glassId === oldRect.glassId); |
| | | if (newRect) { |
| | | return { ...oldRect, ...newRect, isActive: oldRect.isActive }; |
| | | } |
| | | return oldRect; // 如果旧矩形在新数据中不存在,则保留原样 |
| | | }).concat(newRects.filter(r => !adjustedRectsa.value.some(o => o.glassId === r.glassId))); |
| | | } |
| | | if (data.outGlass && data.outGlass.length > 0) { |
| | | const newRects = data.outGlass[0].map(rect => { |
| | | const scaleFactor = 1621.78/5190; |
| | | const scaleFactory = 550/2800; |
| | | let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta,newY; |
| | | let newX = rect.yCoordinate; |
| | |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | }; |
| | | }); |
| | | }else{ |
| | | adjustedRectsb.value = '' |
| | | } |
| | | }; |
| | | } |
| | | }); |
| | | // 合并新旧矩形,保留 isActive 状态 |
| | | adjustedRectsb.value = adjustedRectsb.value.map(oldRect => { |
| | | const newRect = newRects.find(r => r.glassId === oldRect.glassId); |
| | | if (newRect) { |
| | | return { ...oldRect, ...newRect, isActive: oldRect.isActive }; |
| | | } |
| | | return oldRect; // 如果旧矩形在新数据中不存在,则保留原样 |
| | | }).concat(newRects.filter(r => !adjustedRectsb.value.some(o => o.glassId === r.glassId))); |
| | | } |
| | | }; |
| | | onMounted(() => { |
| | | initializeWebSocket(socketUrl, handleMessage); |
| | | }); |
| | |
| | | return '#911005'; |
| | | } |
| | | } |
| | | // if (adjustedRectsb[0].engineerId != null) { |
| | | // engineerIdDisplayb = adjustedRectsb[0].engineerId |
| | | // } |
| | | // if (adjustedRectsa[0].engineerId != null) { |
| | | // engineerIdDisplaya = adjustedRectsa[0].engineerId |
| | | // } |
| | | // if (adjustedRects2[0].engineerId != null) { |
| | | // engineerIdDisplay2 = adjustedRects2[0].engineerId |
| | | // } |
| | | // if (adjustedRects[0].engineerId != null) { |
| | | // engineerIdDisplay = adjustedRects[0].engineerId |
| | | // } |
| | | function showDialog1(rect) { |
| | | function showDialog1(rect) { |
| | | const index = adjustedRects1.value.findIndex(r => r.glassId === rect.glassId); |
| | | if (index !== -1) { |
| | | adjustedRects1.value[index].isActive = true; |
| | | } |
| | | currentGlassId.value = rect.glassId; |
| | | currenttemperingFeedSequence.value = rect.temperingFeedSequence; |
| | | blind.value = true; |
| | | adjustedRects1.value = adjustedRects1.value.map(rect => |
| | | rect.glass_id === glassId ? { ...rect, isActive: true } : rect |
| | | ); |
| | | blind1.value = true; |
| | | } |
| | | function showDialog2(rect) { |
| | | function showDialog2(rect) { |
| | | const index = adjustedRects2.value.findIndex(r => r.glassId === rect.glassId); |
| | | if (index !== -1) { |
| | | adjustedRects2.value[index].isActive = true; |
| | | } |
| | | currentGlassId.value = rect.glassId; |
| | | currenttemperingFeedSequence.value = rect.temperingFeedSequence; |
| | | blind.value = true; |
| | | adjustedRects2.value = adjustedRects2.value.map(rect => |
| | | rect.glass_id === glassId ? { ...rect, isActive: true } : rect |
| | | ); |
| | | blind2.value = true; |
| | | } |
| | | function showDialoga(rect) { |
| | | function showDialoga(rect) { |
| | | const index = adjustedRectsa.value.findIndex(r => r.glassId === rect.glassId); |
| | | if (index !== -1) { |
| | | adjustedRectsa.value[index].isActive = true; |
| | | } |
| | | currentGlassId.value = rect.glassId; |
| | | currenttemperingFeedSequence.value = rect.temperingFeedSequence; |
| | | blind.value = true; |
| | | adjustedRectsa.value = adjustedRectsa.value.map(rect => |
| | | rect.glass_id === glassId ? { ...rect, isActive: true } : rect |
| | | ); |
| | | blinda.value = true; |
| | | } |
| | | function showDialogb(rect) { |
| | | function showDialogb(rect) { |
| | | const index = adjustedRectsb.value.findIndex(r => r.glassId === rect.glassId); |
| | | if (index !== -1) { |
| | | adjustedRectsb.value[index].isActive = true; |
| | | } |
| | | currentGlassId.value = rect.glassId; |
| | | currenttemperingFeedSequence.value = rect.temperingFeedSequence; |
| | | blind.value = true; |
| | | adjustedRectsb.value = adjustedRectsb.value.map(rect => |
| | | rect.glass_id === glassId ? { ...rect, isActive: true } : rect |
| | | ); |
| | | blindb.value = true; |
| | | } |
| | | const handleDialogClose = () => { |
| | | adjustedRects1.value = adjustedRects1.value.map(rect => ({ |
| | | ...rect, |
| | | isActive: false |
| | | })); |
| | | // adjustedRects2.value = adjustedRects2.value.map(rect => ({ |
| | | // ...rect, |
| | | // isActive: false |
| | | // })); |
| | | // adjustedRectsa.value = adjustedRectsa.value.map(rect => ({ |
| | | // ...rect, |
| | | // isActive: false |
| | | // })); |
| | | adjustedRectsb.value = adjustedRectsb.value.map(rect => ({ |
| | | ...rect, |
| | | isActive: false |
| | | })); |
| | | } |
| | | const handleDialogClose1 = () => { |
| | | adjustedRects1.value.forEach(rect => { |
| | | rect.isActive = false; |
| | | }); |
| | | blind1.value = false; |
| | | }; |
| | | const handleDialogClose2 = () => { |
| | | adjustedRects2.value.forEach(rect => { |
| | | rect.isActive = false; |
| | | }); |
| | | blind2.value = false; |
| | | }; |
| | | const handleDialogClosea = () => { |
| | | adjustedRectsa.value.forEach(rect => { |
| | | rect.isActive = false; |
| | | }); |
| | | blinda.value = false; |
| | | }; |
| | | const handleDialogCloseb = () => { |
| | | adjustedRectsb.value.forEach(rect => { |
| | | rect.isActive = false; |
| | | }); |
| | | blindb.value = false; |
| | | }; |
| | | // 破损 |
| | | const handleDamage = async () => { |
| | | const handleDamage1 = async () => { |
| | | try { |
| | | const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', { |
| | | glassId: currentGlassId.value, |
| | |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | blind.value = false; |
| | | blind1.value = false; |
| | | updateRectColors(); |
| | | } else { |
| | | // 请求失败,显示错误消息 |
| | | ElMessage.error(response.message); |
| | | } |
| | | } |
| | | catch (error) { |
| | | // 处理错误 |
| | | console.error(error); |
| | | } |
| | | } |
| | | const handleDamage2 = async () => { |
| | | try { |
| | | const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', { |
| | | glassId: currentGlassId.value, |
| | | // temperingFeedSequence: currenttemperingFeedSequence.value, |
| | | line: 4001, |
| | | status: 2, |
| | | workingProcedure: '钢化', |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | blind2.value = false; |
| | | updateRectColors(); |
| | | } else { |
| | | // 请求失败,显示错误消息 |
| | | ElMessage.error(response.message); |
| | | } |
| | | } |
| | | catch (error) { |
| | | // 处理错误 |
| | | console.error(error); |
| | | } |
| | | } |
| | | const handleDamagea = async () => { |
| | | try { |
| | | const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', { |
| | | glassId: currentGlassId.value, |
| | | // temperingFeedSequence: currenttemperingFeedSequence.value, |
| | | line: 4001, |
| | | status: 2, |
| | | workingProcedure: '钢化', |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | blinda.value = false; |
| | | updateRectColors(); |
| | | } else { |
| | | // 请求失败,显示错误消息 |
| | | ElMessage.error(response.message); |
| | | } |
| | | } |
| | | catch (error) { |
| | | // 处理错误 |
| | | console.error(error); |
| | | } |
| | | } |
| | | const handleDamageb = async () => { |
| | | try { |
| | | const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', { |
| | | glassId: currentGlassId.value, |
| | | // temperingFeedSequence: currenttemperingFeedSequence.value, |
| | | line: 4001, |
| | | status: 2, |
| | | workingProcedure: '钢化', |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | blindb.value = false; |
| | | updateRectColors(); |
| | | } else { |
| | | // 请求失败,显示错误消息 |
| | |
| | | </script> |
| | | <template> |
| | | <div style="margin-top: 10px;"> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisiblea = true;dialogFormVisible = false;dialogFormVisibleb = false;" >{{ $t('processCard.beforefurnace') }}</el-button> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false;dialogFormVisibleb = false;">{{ $t('processCard.intofurnace') }}</el-button> |
| | | <el-button id="searchButton" type="success" @click="dialogFormVisibleb = true;dialogFormVisible = false;dialogFormVisiblea = false">{{ $t('processCard.outfurnace') }}</el-button> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisiblea = true;dialogFormVisible = false;dialogFormVisibleb = false;dialogFormVisiblec = false;" >{{ $t('processCard.beforefurnace') }}</el-button> |
| | | <el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false;dialogFormVisibleb = false;dialogFormVisiblec = false;">{{ $t('processCard.intofurnace') }}</el-button> |
| | | <el-button id="searchButton" type="success" @click="dialogFormVisibleb = true;dialogFormVisible = false;dialogFormVisiblea = false;dialogFormVisiblec = false;">{{ $t('processCard.outfurnace') }}</el-button> |
| | | <el-button id="searchButton" type="info" @click="dialogFormVisiblec = true;dialogFormVisibleb = false;dialogFormVisible = false;dialogFormVisiblea = false">{{ $t('processCard.print') }}</el-button> |
| | | <div v-if="dialogFormVisible" > |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 600px;" v-loading="loading"> |
| | | <div style="width: 49%;float: left;background-color: #f4f4f5;height: 550px;"> |
| | |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | |
| | | <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose"> |
| | | <el-button type="warning" plain :icon="Delete" @click="handleDamage" style="width: 140px;margin-left: 10px;"> |
| | | <div v-if="dialogFormVisiblec"> |
| | | <!-- 打印 --> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 600px;" v-loading="loading"> |
| | | <div style="display: flex; flex-direction: row; align-items: center; margin-top: 5px;margin-left: 10px;"> |
| | | <el-input :placeholder="$t('processCard.projectnumber')" v-model="engineerId" autocomplete="off" style="width: 300px;"/> |
| | | <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('processCard.inquire') }}</el-button> |
| | | <el-button type="info" style="margin-left: 10px;" @click="printing()">{{ $t('processCard.printing') }}</el-button> |
| | | </div> |
| | | |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> |
| | | <el-table |
| | | height="350" |
| | | ref="table" |
| | | :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | :data="tableData" |
| | | > |
| | | <el-table-column prop="engineerId" :label="$t('processCard.project')" width="200" align="center"/> |
| | | <el-table-column prop="workingProcedure" :label="$t('processCard.awayprocess')" align="center"/> |
| | | <el-table-column prop="deviceName" :label="$t('processCard.awayequipment')" align="center"/> |
| | | <el-table-column prop="teamsGroupsName" :label="$t('processCard.awayteam')" align="center"/> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | </el-card> |
| | | </div> |
| | | <el-dialog v-model="blind1" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose1"> |
| | | <el-button type="warning" plain :icon="Delete" @click="handleDamage1" style="width: 140px;margin-left: 10px;"> |
| | | {{ $t('order.dilapidation') }} |
| | | </el-button> |
| | | </el-dialog> |
| | | <el-dialog v-model="blind2" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose2"> |
| | | <el-button type="warning" plain :icon="Delete" @click="handleDamage2" style="width: 140px;margin-left: 10px;"> |
| | | {{ $t('order.dilapidation') }} |
| | | </el-button> |
| | | </el-dialog> |
| | | <el-dialog v-model="blinda" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClosea"> |
| | | <el-button type="warning" plain :icon="Delete" @click="handleDamagea" style="width: 140px;margin-left: 10px;"> |
| | | {{ $t('order.dilapidation') }} |
| | | </el-button> |
| | | </el-dialog> |
| | | <el-dialog v-model="blindb" top="30vh" width="15%" style="text-align: center;" @close="handleDialogCloseb"> |
| | | <el-button type="warning" plain :icon="Delete" @click="handleDamageb" style="width: 140px;margin-left: 10px;"> |
| | | {{ $t('order.dilapidation') }} |
| | | </el-button> |
| | | </el-dialog> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | width="100%" |
| | | :title="$t('processCard.glasstakeout')" |
| | | top="0vh" |
| | | > |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%;height: 860px" |
| | | > |
| | | <el-table-column prop="flowCardId" :label="$t('processCard.flowcard')" width="140" align="center"/> |
| | | <el-table-column prop="layer" :label="$t('processCard.layer')" align="center" width="80"/> |
| | | <el-table-column prop="engineerId" :label="$t('processCard.project')" align="center" width="110"/> |
| | | <el-table-column prop="temperingLayoutId" :label="$t('processCard.temperinglayout')" align="center" width="80"/> |
| | | <el-table-column prop="temperingFeedSequence" :label="$t('processCard.temperingfeed')" align="center" width="80"/> |
| | | <el-table-column prop="width" :label="$t('processCard.width')" align="center" width="80"/> |
| | | <el-table-column prop="height" :label="$t('processCard.height')" align="center" width="80"/> |
| | | <el-table-column prop="thickness" :label="$t('processCard.thickness')" align="center" width="80"/> |
| | | </el-table> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | <style scoped> |
| | |
| | | } |
| | | #rect { |
| | | position: relative; /* 确保箭头可以相对于矩形定位 */ |
| | | /* 其他样式 */ |
| | | } |
| | | .centered-text { |
| | | /* 设置文字居中样式 */ |