| | |
| | | <template> |
| | | <div style="height: 500px;"> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading"> |
| | | <el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;"> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;"> |
| | | <div style="text-align: center;"> {{ $t('processCard.temperinglayout') }}:{{ ava }}-{{ avanum }} </div> |
| | | <el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;"> |
| | | <div style="position: relative;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRects" |
| | |
| | | const blind = ref(false) |
| | | const currentGlassId = ref(null); |
| | | const adjustedRects = ref([]); |
| | | const ava = ref(''); |
| | | const avanum = ref(''); |
| | | const realwidth = ref(''); |
| | | const realheight = ref(''); |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/currentCutDrawingTwo`; |
| | | const handleMessage = (data: any) => { |
| | | const scaleFactor = 1621.78 / 6000; |
| | | const scaleFactory = 750 / 3300; |
| | | if (data.engineer != null) { |
| | | ava.value = data.engineer[0] |
| | | }else{ |
| | | ava.value = '' |
| | | } |
| | | if (data.engineer != null) { |
| | | avanum.value = data.sequence[0] |
| | | }else{ |
| | | avanum.value = '' |
| | | } |
| | | if (data.upPattenUsage && data.upPattenUsage.length > 0) { |
| | | realwidth.value = data.upPattenUsage[0].width; |
| | | realheight.value = data.upPattenUsage[0].height; |
| | | const realx = realwidth.value; |
| | | const realy = realheight.value; |
| | | const scaleFactora = 1621.78 / realx; |
| | | const scaleFactorya = 750 / realy; |
| | | window.localStorage.setItem('widthreturna', realy) |
| | | window.localStorage.setItem('scaleFactorb', scaleFactora) |
| | | window.localStorage.setItem('scaleFactoryb', scaleFactorya) |
| | | } |
| | | if (data.currentCutTerritory && data.currentCutTerritory.length > 0) { |
| | | let scaleFactor = window.localStorage.getItem('scaleFactorb') |
| | | let scaleFactory = window.localStorage.getItem('scaleFactoryb') |
| | | let widthreturn = window.localStorage.getItem('widthreturna') |
| | | const newRects = data.currentCutTerritory[0].map(rect => { |
| | | const existingRect = adjustedRects.value.find(r => r.glassId === rect.glassId); |
| | | if (existingRect) { |
| | | return { |
| | | ...existingRect, |
| | | xAxisa: (6000 - (rect.xAxis + rect.width)) * scaleFactor * 1.1, |
| | | yAxisa: rect.yAxis * scaleFactory * 1.1, |
| | | width: rect.edgWidth * scaleFactor * 1.1, |
| | | height: rect.edgHeight * scaleFactory * 1.1, |
| | | xAxisa: rect.xAxis * scaleFactor, |
| | | yAxisa: (widthreturn - (rect.yAxis + rect.edgHeight )) * scaleFactory, |
| | | width: rect.edgWidth * scaleFactor, |
| | | height: rect.edgHeight * scaleFactory, |
| | | widtha: rect.edgWidth, |
| | | heighta: rect.edgHeight, |
| | | state: rect.state, |
| | | // 保持 isActive 状态不变 |
| | | }; |
| | | } else { |
| | | // 如果不存在,则添加新矩形,默认 isActive 为 false |
| | | return { |
| | | ...rect, |
| | | xAxisa: (6000 - (rect.xAxis + rect.width)) * scaleFactor * 1.1, |
| | | yAxisa: rect.yAxis * scaleFactory * 1.1, |
| | | width: rect.edgWidth * scaleFactor * 1.1, |
| | | height: rect.edgHeight * scaleFactory * 1.1, |
| | | xAxisa: rect.xAxis * scaleFactor, |
| | | yAxisa: (widthreturn - (rect.yAxis + rect.edgHeight)) * scaleFactory, |
| | | width: rect.edgWidth * scaleFactor, |
| | | height: rect.edgHeight * scaleFactory, |
| | | widtha: rect.edgWidth, |
| | | heighta: rect.edgHeight, |
| | | state: rect.state, |
| | |
| | | } |
| | | function getRectColor(state: number): string { |
| | | switch (state) { |
| | | case 0: |
| | | return '#e1f3d8'; |
| | | case 100: |
| | | return '#c8c9cc'; |
| | | case 110: |
| | | return '#b3e19d'; |
| | | case 120: |
| | | return '#f89898'; |
| | | case 0: |
| | | return '#7AC5CD'; |
| | | case 1: |
| | | return '#95d475'; |
| | | case -1: |
| | | return '#99BBFF'; |
| | | case 2: |
| | | return 'lightblue'; |
| | | case 3: |
| | | return '#eebe77'; |
| | | case 4: |
| | | return '#CD6090'; |
| | | case 8: |
| | | return '#911005'; |
| | | case 9: |
| | | return '#f3d19e'; |
| | | return '#4682B4'; |
| | | default: |
| | | return '#CDAF95'; |
| | | } |
| | | } |
| | | // 更新矩形状态 |