| | |
| | | const tableDatae = ref([]) |
| | | const tableDatax = ref([]) |
| | | const tableDatas = ref([]) |
| | | const tableDatass = ref([]) |
| | | const tableDatalack = ref([]) |
| | | const tableDataspecify = ref([]) |
| | | const tableDatacagedetails = ref([]) |
| | |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`; |
| | | const handleMessage = (data) => { |
| | | if(data.bigStorageSummary!=null){ |
| | | tableDatass.value = data.bigStorageSummary[0] |
| | | }else{ |
| | | tableDatass.value = '' |
| | | } |
| | | if (data.inkageEntity != null) { |
| | | inkageEntity.value = data.inkageEntity[0] == true ? 'green' : '#911005'; |
| | | } |
| | |
| | | const rectStyle = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | left: '0px', |
| | | right: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | | }); |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStyle = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | | const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`; |
| | | return { |
| | | position: 'absolute', |
| | | width, |
| | | height: '100%', |
| | | marginLeft, |
| | | marginRight, |
| | | top: '0px', |
| | | backgroundColor: '#911005', |
| | | left, |
| | | right, |
| | | }; |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | | const rectStylea = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | left: '0px', |
| | | right: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | | }); |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStylea = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | | const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`; |
| | | return { |
| | | position: 'absolute', |
| | | width, |
| | | height: '100%', |
| | | marginLeft, |
| | | marginRight, |
| | | top: '0px', |
| | | backgroundColor: '#911005', |
| | | left, |
| | | right, |
| | | }; |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | | const rectStyleb = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | left: '0px', |
| | | right: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | | }); |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStyleb = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | | const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`; |
| | | return { |
| | | position: 'absolute', |
| | | width, |
| | | height: '100%', |
| | | marginLeft, |
| | | marginRight, |
| | | top: '0px', |
| | | backgroundColor: '#911005', |
| | | left, |
| | | right, |
| | | }; |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | | const rectStylec = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | left: '0px', |
| | | right: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | | }); |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStylec = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | const marginRight = '8px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginRight)); |
| | | const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`; |
| | | return { |
| | | position: 'absolute', |
| | | width, |
| | | height: '100%', |
| | | marginLeft, |
| | | marginRight, |
| | | top: '0px', |
| | | backgroundColor: '#911005', |
| | | left, |
| | | right, |
| | | }; |
| | | }; |
| | | onMounted(() => { |
| | |
| | | </div> |
| | | <!-- // 父级框 --> |
| | | <div class="img-dlpl" > |
| | | <div class="img-car1" :style="'z-index:999;left:375px;top:' + 350*carPosition[0] + 'px;position:absolute;'"> |
| | | <div class="img-car1" :style="'z-index:999;left:290px;top:' + 350*carPosition[0] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjusta" |
| | | :key="rect.id" |
| | |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="img-car4" :style="'z-index:999;left:770px;top:' + 350*carPosition[1] + 'px;position:absolute;'"> |
| | | <div class="img-car4" :style="'z-index:999;left:735px;top:' + 350*carPosition[1] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjust" |
| | | :key="rect.id" |
| | |
| | | </div> |
| | | </div> |
| | | <div style="position: relative;"> |
| | | <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 585px;"> |
| | | <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 525px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRects(rectIndex)" |
| | |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 585px;"> |
| | | <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 525px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsa(rectIndex)" |
| | |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 585px;"> |
| | | <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 525px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsb(rectIndex)" |
| | |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 585px;"> |
| | | <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 525px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsc(rectIndex)" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-card style="flex: 1;margin-left: 1220px;margin-top: -510px;" v-loading="loading"> |
| | | <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 420px;"> |
| | | <el-table height="420px" ref="table" border |
| | | :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="engineerId" align="center" :label="$t('Mounting.project')" min-width="140" /> |
| | | <el-table-column prop="countTemp" align="center" :label="$t('searchOrder.totalfurnaces')" min-width="120" /> |
| | | <el-table-column prop="countGlass" align="center" :label="$t('searchOrder.cagesnumber')" min-width="120" /> |
| | | <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="120" /> |
| | | <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.fullfurnaces')" min-width="120" /> |
| | | <el-table-column prop="countSlot" align="center" :label="$t('searchOrder.slotnumber')" min-width="120" /> |
| | | <el-table-column prop="percent" align="center" :label="$t('searchOrder.progress')" min-width="120" /> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | |
| | | </div> |
| | | <el-dialog v-model="add" top="10vh" width="70%" :title="$t('searchOrder.addcage')" > |
| | | <div style="margin-bottom: 20px"> |