From 1fe57c5855655e406e44497417152ca0e1e2cc5e Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期二, 13 五月 2025 14:00:17 +0800
Subject: [PATCH] 展会样式布局更改
---
UI-Project/src/views/hollow/hollowslicecage.vue | 266 ++++++++++++++++++++++++++--------------------------
1 files changed, 133 insertions(+), 133 deletions(-)
diff --git a/UI-Project/src/views/hollow/hollowslicecage.vue b/UI-Project/src/views/hollow/hollowslicecage.vue
index 8f4b1fb..be2a2e7 100644
--- a/UI-Project/src/views/hollow/hollowslicecage.vue
+++ b/UI-Project/src/views/hollow/hollowslicecage.vue
@@ -395,32 +395,32 @@
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{
@@ -435,7 +435,7 @@
// 璁＄畻姣忎釜澶х煩褰㈢殑鏍峰紡
const rectStyle = (rect, index) => ({
position: 'absolute',
- width: '170px',
+ width: '150px',
left: '0px',
top: `${index*rect.top}px`,
height: `${rect.height}px`,
@@ -452,7 +452,7 @@
// 璁＄畻姣忎釜灏忕煩褰㈢殑鏍峰紡
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 {
@@ -468,7 +468,7 @@
// 璁＄畻姣忎釜澶х煩褰㈢殑鏍峰紡
const rectStylea = (rect, index) => ({
position: 'absolute',
- width: '170px',
+ width: '150px',
left: '0px',
top: `${index*rect.top}px`,
height: `${rect.height}px`,
@@ -485,7 +485,7 @@
// 璁＄畻姣忎釜灏忕煩褰㈢殑鏍峰紡
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 {
@@ -501,7 +501,7 @@
// 璁＄畻姣忎釜澶х煩褰㈢殑鏍峰紡
const rectStyleb = (rect, index) => ({
position: 'absolute',
- width: '170px',
+ width: '150px',
left: '0px',
top: `${index*rect.top}px`,
height: `${rect.height}px`,
@@ -518,7 +518,7 @@
// 璁＄畻姣忎釜灏忕煩褰㈢殑鏍峰紡
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 {
@@ -534,7 +534,7 @@
// 璁＄畻姣忎釜澶х煩褰㈢殑鏍峰紡
const rectStylec = (rect, index) => ({
position: 'absolute',
- width: '170px',
+ width: '150px',
left: '0px',
top: `${index*rect.top}px`,
height: `${rect.height}px`,
@@ -551,7 +551,7 @@
// 璁＄畻姣忎釜灏忕煩褰㈢殑鏍峰紡
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 {
@@ -567,7 +567,7 @@
// 璁＄畻姣忎釜澶х煩褰㈢殑鏍峰紡
const rectStyled = (rect, index) => ({
position: 'absolute',
- width: '170px',
+ width: '150px',
left: '0px',
top: `${index*rect.top}px`,
height: `${rect.height}px`,
@@ -584,7 +584,7 @@
// 璁＄畻姣忎釜灏忕煩褰㈢殑鏍峰紡
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 {
@@ -676,10 +676,115 @@
<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" />
@@ -700,8 +805,8 @@
</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" />
@@ -713,111 +818,6 @@
</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>
<!-- 娣诲姞鐞嗙墖绗间俊鎭� -->
@@ -1090,10 +1090,10 @@
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
}
--
Gitblit v1.8.0