| | |
| | | <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;"> |
| | | <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" |
| | |
| | | }"> |
| | | <div class="centered-text"> |
| | | <div style="font-size: 20px;font-weight: bold;">{{ rect.glassId }}</div> |
| | | <div style="font-size: 20px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div> |
| | | <div style="font-size: 20px;font-weight: bold;">{{ rect.flowCardId }}</div> |
| | | <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | const blind = ref(false) |
| | | const currentGlassId = ref(null); |
| | | const adjustedRects = ref([]); |
| | | const ava = ref([]); |
| | | const avanum = ref([]); |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/currentCutDrawingTwo`; |
| | | const handleMessage = (data: any) => { |
| | | if (data.engineer != null) { |
| | | ava.value = data.engineer[0] |
| | | }else{ |
| | | ava.value = 0 |
| | | } |
| | | if (data.engineer != null) { |
| | | avanum.value = data.sequence[0] |
| | | }else{ |
| | | avanum.value = 0 |
| | | } |
| | | const scaleFactor = 1621.78 / 6000; |
| | | const scaleFactory = 750 / 3300; |
| | | if (data.currentCutTerritory && data.currentCutTerritory.length > 0) { |
| | |
| | | if (existingRect) { |
| | | return { |
| | | ...existingRect, |
| | | xAxisa: (6000 - (rect.xAxis + rect.width)) * scaleFactor * 1.1, |
| | | yAxisa: rect.yAxis * scaleFactory * 1.1, |
| | | xAxisa: rect.xAxis * scaleFactor * 1.1, |
| | | yAxisa: (3300 - (rect.yAxis + rect.edgHeight + 300)) * scaleFactory * 1.1, |
| | | width: rect.edgWidth * scaleFactor * 1.1, |
| | | height: rect.edgHeight * scaleFactory * 1.1, |
| | | 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, |
| | | xAxisa: rect.xAxis * scaleFactor * 1.1, |
| | | yAxisa: (3300 - (rect.yAxis + rect.edgHeight + 300)) * scaleFactory * 1.1, |
| | | width: rect.edgWidth * scaleFactor * 1.1, |
| | | height: rect.edgHeight * scaleFactory * 1.1, |
| | | widtha: rect.edgWidth, |
| | |
| | | } |
| | | 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'; |
| | | } |
| | | } |
| | | // 更新矩形状态 |