| | |
| | | const currentPage = ref(1); |
| | | const itemsPerPage = computed(() => { |
| | | if (currentPage.value === 1) { |
| | | return 21; |
| | | return 55; |
| | | } else if (currentPage.value === 2) { |
| | | return 21; |
| | | return 55; |
| | | } else if (currentPage.value === 3) { |
| | | return 21; |
| | | return 55; |
| | | } else if (currentPage.value === 4) { |
| | | return 20; |
| | | return 55; |
| | | } else if (currentPage.value === 5) { |
| | | return 21; |
| | | return 55; |
| | | } else if (currentPage.value === 6) { |
| | | return 25; |
| | | } else if (currentPage.value === 7) { |
| | | return 51; |
| | | return 30; |
| | | } else if (currentPage.value === 8) { |
| | | return 25; |
| | | } else { |
| | |
| | | let index = 0; |
| | | for (let i = 1; i < currentPage.value; i++) { |
| | | if (i === 1) { |
| | | index += 21; |
| | | index += 55; |
| | | } else if (i === 2) { |
| | | index += 21; |
| | | index += 55; |
| | | } else if (i === 3) { |
| | | index += 21; |
| | | index += 55; |
| | | }else if (i === 4) { |
| | | index += 20; |
| | | index += 55; |
| | | }else if (i === 5) { |
| | | index += 21; |
| | | index += 55; |
| | | }else if (i === 6) { |
| | | index += 25; |
| | | }else if (i === 7) { |
| | | index += 51; |
| | | index += 30; |
| | | }else if (i === 8) { |
| | | index += 25; |
| | | } else { |
| | |
| | | // 定义消息处理函数,更新 receivedData 变量 |
| | | const handleMessage = (data) => { |
| | | // 更新 tableData 的数据 |
| | | if(data.bigStorageCageDetailsOutTask!=null){ |
| | | tableDatac.value = data.bigStorageCageDetailsOutTask[0] |
| | | adjusta.value = data.bigStorageCageDetailsOutTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); |
| | | } |
| | | if(data.bigStorageCageDetailsFeedTask!=null){ |
| | | tableDatad.value = data.bigStorageCageDetailsFeedTask[0] |
| | | adjust.value = data.bigStorageCageDetailsFeedTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); |
| | | } |
| | | |
| | | // adjust.value = data.bigStorageCageDetailsFeedTask[0].map(rect => ({ |
| | | // ...rect, |
| | | // })); |
| | | adjusta.value = data.bigStorageCageDetailsOutTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); |
| | | adjust.value = data.bigStorageCageDetailsFeedTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); |
| | | |
| | | // const adjust = computed(() => { |
| | | // return data.value.bigStorageCageDetailsFeedTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); |
| | | // }); |
| | | if(data.bigStorageCageInfo!=null){ |
| | | tableData.value = data.bigStorageCageInfo[0] |
| | | } |
| | | if(data.temperingGlassInfoList!=null){ |
| | | tableDatab.value = data.temperingGlassInfoList[0] |
| | | } |
| | | if(data.bigStorageCageUsage!=null){ |
| | | tableDatae.value = data.bigStorageCageUsage[0] |
| | | } |
| | | if(data.carPostion!=null){ |
| | | carPosition.value = data.carPostion[0] |
| | | } |
| | | |
| | | |
| | | if(data.bigStorageCageInfos!=null){ |
| | | window.localStorage.setItem('length', data.bigStorageCageInfos[0][1].length) |
| | | let length = window.localStorage.getItem('length') |
| | | adjustedRects.value = data.bigStorageCageInfos[0][1].map(rect => ({ |
| | |
| | | height: 20/length, |
| | | top: 29/length |
| | | })); |
| | | } |
| | | |
| | | |
| | | }; |
| | | // 初始化 WebSocket,并传递消息处理函数 |
| | | onMounted(() => { |
| | |
| | | <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="success" @click="dialogFormVisibleb = true">{{ $t('searchOrder.productionqueue') }}</el-button> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;"> |
| | | <el-table height="100%" ref="table" |
| | | <el-table height="100px" ref="table" |
| | | :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="bigStorageCageOutTask.glassId" align="center" :label="$t('searchOrder.outputglassID')" min-width="120" /> |
| | | <el-table-column prop="bigStorageCageOutTask.startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" /> |
| | |
| | | </el-card> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 3px;" v-loading="loading"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;"> |
| | | <el-table height="100%" ref="table" |
| | | <el-table height="100px" ref="table" |
| | | @selection-change="handleSelectionChange" |
| | | :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="bigStorageCageFeedTask.glassId" align="center" :label="$t('searchOrder.intoglassid')" min-width="120" /> |
| | |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | <div style="padding: 10px;display: flex;height:110px;"> |
| | | <div style="padding: 10px;display: flex;height:130px;"> |
| | | <div v-for="(item, index) in tableDatae" :key="index" id="occupy"> |
| | | <el-col style="text-align:left;font-weight: bold;">#{{ item.device_id }}</el-col> |
| | | <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;"> |
| | |
| | | </div> |
| | | <!-- // 父级框 --> |
| | | <div class="img-dlpl" > |
| | | <div class="img-car1" :style="'z-index:999;left:247px;top:' + 350*carPosition[0] + 'px;position:absolute;'"> |
| | | <div class="img-car1" :style="'z-index:999;left:270px;top:' + 350*carPosition[0] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjusta" |
| | | :key="rect.id" |
| | |
| | | width: '30px', |
| | | height: '5px', |
| | | backgroundColor: '#409EFF', |
| | | marginLeft: index * 5+ `px`, |
| | | marginLeft: 5+ `px`, |
| | | top: '10px', |
| | | }" |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="img-car4" :style="'z-index:999;left:704px;top:' + 350*carPosition[1] + 'px;position:absolute;'"> |
| | | <div class="img-car4" :style="'z-index:999;left:740px;top:' + 350*carPosition[1] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjust" |
| | | :key="rect.id" |
| | |
| | | width: '30px', |
| | | height: '5px', |
| | | backgroundColor: '#409EFF', |
| | | marginLeft: index * 5+ `px`, |
| | | marginLeft: 5+ `px`, |
| | | top: '10px', |
| | | }" |
| | | > |
| | | </div> |
| | | </div> |
| | | <div style="position: relative;"> |
| | | <div v-show="cell1" style="width: 227px;height: 29px;position: relative;top:55px;left: 465px;"> |
| | | <div v-show="cell1" style="width: 227px;height: 29px;position: relative;top:50px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRects" |
| | | :key="rect" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell2" style="width: 227px;height: 29px;position: relative;top:56px;left: 465px;"> |
| | | <div v-show="cell2" style="width: 227px;height: 29px;position: relative;top:51px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsa" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:117px;left: 465px;"> |
| | | <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:110px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsb" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell4" style="width: 227px;height: 29px;position: absolute;top:148px;left: 465px;"> |
| | | <div v-show="cell4" style="width: 227px;height: 29px;position: absolute;top:140px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsc" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell5" style="width: 227px;height: 29px;position: absolute;top:208px;left: 465px;"> |
| | | <div v-show="cell5" style="width: 227px;height: 29px;position: absolute;top:170px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsd" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell6" style="width: 227px;height: 29px;position: absolute;top:238px;left: 465px;"> |
| | | <div v-show="cell6" style="width: 227px;height: 29px;position: absolute;top:241px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectse" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell7" style="width: 227px;height: 29px;position: absolute;top:269px;left: 465px;"> |
| | | <div v-show="cell7" style="width: 227px;height: 29px;position: absolute;top:271px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsf" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell8" style="width: 227px;height: 29px;position: absolute;top:300px;left: 465px;"> |
| | | <div v-show="cell8" style="width: 227px;height: 29px;position: absolute;top:301px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsg" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell9" style="width: 227px;height: 29px;position: absolute;top:300px;left: 465px;"> |
| | | <div v-show="cell9" style="width: 227px;height: 29px;position: absolute;top:332px;left: 495px;"> |
| | | <div |
| | | v-for="(rect, index) in adjustedRectsh" |
| | | :key="rect.id" |
| | |
| | | <el-button type="primary" plain style="margin-left: 10px;" @click="searchout">{{ $t('searchOrder.search') }}</el-button> |
| | | </div> |
| | | |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 500px;"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 200px;"> |
| | | <el-table height="100%" ref="table" |
| | | :data="tableDataf" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="120" /> |
| | |
| | | } |
| | | |
| | | .img-dlpl{ |
| | | margin-left: 80px; |
| | | background-image:url('../../assets/dlpl.png'); |
| | | margin-left: 20px; |
| | | margin-top: 20px; |
| | | background-image:url('../../assets/dlpl9.png'); |
| | | background-repeat: no-repeat; |
| | | background-attachment: local; |
| | | min-height: 400px; |
| | |
| | | } |
| | | .img-car1{ |
| | | display: flex; |
| | | background-image:url('../../assets/lp.png'); |
| | | background-image:url('../../assets/lp9.png'); |
| | | position: absolute; |
| | | background-repeat: no-repeat; |
| | | background-attachment: local; |
| | |
| | | } |
| | | .img-car4{ |
| | | display: flex; |
| | | background-image:url('../../assets/lpa.png'); |
| | | background-image:url('../../assets/lpa9.png'); |
| | | position: absolute; |
| | | background-repeat: no-repeat; |
| | | background-attachment: local; |