| | |
| | | if(data.bigStorageCageInfos!=null){ |
| | | adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 46/55, |
| | | height: 15/55, |
| | | top: 33/55, |
| | | })); |
| | | subRectsCounts.value = data.bigStorageCageInfos[0][1].map(rect => rect.count); |
| | | adjustedRectsa.value = data.bigStorageCageInfos[0][2].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 46/55, |
| | | height: 15/55, |
| | | top: 33/55, |
| | | })); |
| | | subRectsCountsa.value = data.bigStorageCageInfos[0][2].map(rect => rect.count); |
| | | adjustedRectsb.value = data.bigStorageCageInfos[0][3].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 46/55, |
| | | height: 15/55, |
| | | top: 33/55, |
| | | })); |
| | | subRectsCountsb.value = data.bigStorageCageInfos[0][3].map(rect => rect.count); |
| | | adjustedRectsc.value = data.bigStorageCageInfos[0][4].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 46/55, |
| | | height: 15/55, |
| | | top: 33/55, |
| | | })); |
| | | subRectsCountsc.value = data.bigStorageCageInfos[0][4].map(rect => rect.count); |
| | | adjustedRectsd.value = data.bigStorageCageInfos[0][5].map((rect, index) => ({ |
| | | id: index + 1, |
| | | height: 20/55, |
| | | top: 46/55, |
| | | height: 15/55, |
| | | top: 33/55, |
| | | })); |
| | | subRectsCountsd.value = data.bigStorageCageInfos[0][5].map(rect => rect.count); |
| | | }else{ |
| | |
| | | // 计算每个大矩形的样式 |
| | | const rectStyle = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | width: '150px', |
| | | left: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStyle = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const marginLeft = '3px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | return { |
| | |
| | | // 计算每个大矩形的样式 |
| | | const rectStylea = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | width: '150px', |
| | | left: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStylea = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const marginLeft = '3px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | return { |
| | |
| | | // 计算每个大矩形的样式 |
| | | const rectStyleb = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | width: '150px', |
| | | left: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStyleb = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const marginLeft = '3px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | return { |
| | |
| | | // 计算每个大矩形的样式 |
| | | const rectStylec = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | width: '150px', |
| | | left: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStylec = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const marginLeft = '3px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | return { |
| | |
| | | // 计算每个大矩形的样式 |
| | | const rectStyled = (rect, index) => ({ |
| | | position: 'absolute', |
| | | width: '170px', |
| | | width: '150px', |
| | | left: '0px', |
| | | top: `${index*rect.top}px`, |
| | | height: `${rect.height}px`, |
| | |
| | | // 计算每个小矩形的样式 |
| | | const subRectStyled = (rectIndex, subIndex) => { |
| | | const width = '18px'; |
| | | const marginLeft = '8px'; |
| | | const marginLeft = '3px'; |
| | | const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft)); |
| | | const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`; |
| | | return { |
| | |
| | | <div style="margin-left: 70px;">{{ $t('hellow.freethree') }}</div> |
| | | <i :style="{ marginTop: '2px', backgroundColor: freethree, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i> |
| | | </div> |
| | | <div style="display: flex; align-items: flex-start; gap: 20px; height: 70vh;"> |
| | | <!-- // 父级框 --> |
| | | <div class="img-zkdlpl" > |
| | | <div class="img-car1" :style="'z-index:999;left:212px;top:' + 1300*carPosition[0] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjusta" |
| | | :key="rect.id" |
| | | :style="{ |
| | | width: '30px', |
| | | height: '5px', |
| | | backgroundColor: '#409EFF', |
| | | marginLeft: 5+ `px`, |
| | | top: '10px', |
| | | }" |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="img-car4" :style="'z-index:999;left:588px;top:' + 450*carPosition[1] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjust" |
| | | :key="rect.id" |
| | | :style="{ |
| | | width: '30px', |
| | | height: '5px', |
| | | backgroundColor: '#409EFF', |
| | | marginLeft: 5+ `px`, |
| | | top: '10px', |
| | | }" |
| | | > |
| | | </div> |
| | | </div> |
| | | <div style="position: relative;"> |
| | | <div v-show="cell1" style="width: 150px;height: 33px;position: relative;top:292px;left: 418px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRects(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyle(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell2" style="width: 150px;height: 33px;position: relative;top:295px;left: 418px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsa(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStylea(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell3" style="width: 150px;height: 33px;position: relative;top:298px;left: 418px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsb(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyleb(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell4" style="width: 150px;height: 33px;position: relative;top:301px;left: 418px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsc(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStylec(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell5" style="width: 150px;height: 33px;position: relative;top:304px;left: 418px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsd" :key="rect.id" :style="rectStyled(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsd(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyled(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-card style="flex: 1; height: 500px; overflow-y: auto;"> |
| | | <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;"> |
| | | <el-table height="550px" ref="table" border |
| | | :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140" /> |
| | | <el-table-column prop="sumCount" align="center" :label="$t('searchOrder.totallogarithms')" min-width="120" /> |
| | | <el-table-column prop="pairCount" align="center" :label="$t('searchOrder.numberpairs')" min-width="120" /> |
| | | <el-table-column prop="totalNumber" align="center" :label="$t('hellow.totalnumber')" min-width="100" /> |
| | | <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="120" /> |
| | | <el-table-column prop="slotCount" align="center" :label="$t('searchOrder.numberoccupied')" min-width="120" /> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div style="padding: 10px;display: flex;height:110px;margin-top: -170px;"> |
| | | <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;"> |
| | | <span>{{ $t('searchOrder.Usage') }}</span><span>{{ item.percentage }}%</span> |
| | | </el-col> |
| | | <hr style="width:80%;margin: 0 auto;" /> |
| | | <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;"> |
| | | <span>{{ $t('searchOrder.free') }}</span><span>{{ item.count }}</span> |
| | | </el-col> |
| | | </div> |
| | | </div> |
| | | <div class="table-container"> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 300px;"> |
| | | <el-table height="300px" ref="table" |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 3px;"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 140px;"> |
| | | <el-table height="120px" ref="table" |
| | | :row-class-name="tableRowClassName" |
| | | :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="glassId" align="center" :label="$t('searchOrder.intoglassid')" min-width="140" /> |
| | |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;"> |
| | | <el-table height="300px" ref="table" |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 3px;"> |
| | | <el-table height="120px" ref="table" |
| | | :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="glassId" align="center" :label="$t('searchOrder.outputglassID')" min-width="140" /> |
| | | <el-table-column prop="startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" /> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | </div> |
| | | <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;"> |
| | | <span>{{ $t('searchOrder.Usage') }}</span><span>{{ item.percentage }}%</span> |
| | | </el-col> |
| | | <hr style="width:80%;margin: 0 auto;" /> |
| | | <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;"> |
| | | <span>{{ $t('searchOrder.free') }}</span><span>{{ item.count }}</span> |
| | | </el-col> |
| | | </div> |
| | | </div> |
| | | <div style="display: flex; align-items: flex-start; gap: 20px; height: 70vh;"> |
| | | <!-- // 父级框 --> |
| | | <div class="img-zkdlpl" > |
| | | <div class="img-car1" :style="'z-index:999;left:305px;top:' + 1700*carPosition[0] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjusta" |
| | | :key="rect.id" |
| | | :style="{ |
| | | width: '30px', |
| | | height: '5px', |
| | | backgroundColor: '#409EFF', |
| | | marginLeft: 5+ `px`, |
| | | top: '10px', |
| | | }" |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="img-car4" :style="'z-index:999;left:730px;top:' + 600*carPosition[1] + 'px;position:absolute;'"> |
| | | <div |
| | | v-for="(rect, index) in adjust" |
| | | :key="rect.id" |
| | | :style="{ |
| | | width: '30px', |
| | | height: '5px', |
| | | backgroundColor: '#409EFF', |
| | | marginLeft: 5+ `px`, |
| | | top: '10px', |
| | | }" |
| | | > |
| | | </div> |
| | | </div> |
| | | <div style="position: relative;"> |
| | | <div v-show="cell1" style="width: 170px;height: 46px;position: relative;top:387px;left: 523px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRects(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyle(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell2" style="width: 170px;height: 46px;position: relative;top:389px;left: 523px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsa(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStylea(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell3" style="width: 170px;height: 46px;position: relative;top:391px;left: 523px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsb(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyleb(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell4" style="width: 170px;height: 46px;position: relative;top:392px;left: 523px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsc(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStylec(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | <div v-show="cell5" style="width: 170px;height: 46px;position: relative;top:394px;left: 523px;"> |
| | | <div v-for="(rect, rectIndex) in adjustedRectsd" :key="rect.id" :style="rectStyled(rect, rectIndex)"> |
| | | <div |
| | | v-for="(subRect, subIndex) in getSubRectsd(rectIndex)" |
| | | :key="subIndex" |
| | | :style="subRectStyled(rectIndex, subIndex)" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-card style="flex: 1; height: 600px; overflow-y: auto;"> |
| | | <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 550px;"> |
| | | <el-table height="550px" ref="table" border |
| | | :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140" /> |
| | | <el-table-column prop="sumCount" align="center" :label="$t('searchOrder.totallogarithms')" min-width="120" /> |
| | | <el-table-column prop="pairCount" align="center" :label="$t('searchOrder.numberpairs')" min-width="120" /> |
| | | <el-table-column prop="totalNumber" align="center" :label="$t('hellow.totalnumber')" min-width="100" /> |
| | | <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="120" /> |
| | | <el-table-column prop="slotCount" align="center" :label="$t('searchOrder.numberoccupied')" min-width="120" /> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | </div> |
| | | <!-- 添加理片笼信息 --> |
| | |
| | | background-image:url('../../assets/zhongkong.png'); |
| | | background-repeat: no-repeat; |
| | | background-attachment: local; |
| | | min-height: 700px; |
| | | width: 1000px; |
| | | min-height: 500px; |
| | | width: 800px; |
| | | max-width: 100%; |
| | | background-size: 1000px 700px; |
| | | background-size: 800px 500px; |
| | | overflow: hidden; |
| | | position:relative |
| | | } |