From f2ea663c986c5309a6b1d3f283c13bd312ecbed7 Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期三, 17 七月 2024 13:52:17 +0800
Subject: [PATCH] 图片测试
---
UI-Project/src/views/Slicecage/slicecage.vue | 221 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 163 insertions(+), 58 deletions(-)
diff --git a/UI-Project/src/views/Slicecage/slicecage.vue b/UI-Project/src/views/Slicecage/slicecage.vue
index dc2e16a..749d012 100644
--- a/UI-Project/src/views/Slicecage/slicecage.vue
+++ b/UI-Project/src/views/Slicecage/slicecage.vue
@@ -23,6 +23,8 @@
const carPosition = ref([])
const adjustedRects = ref([]);
const project = ref([]);
+const adjust = ref([]);
+const adjusta = ref([]);
const adjustedRectsa = ref([]);
const adjustedRectsb = ref([]);
const adjustedRectsc = ref([]);
@@ -30,6 +32,7 @@
const adjustedRectse = ref([]);
const adjustedRectsf = ref([]);
const adjustedRectsg = ref([]);
+const adjustedRectsh = ref([]);
const currentRow = reactive({}); // 褰撳墠琛岀殑鏁版嵁
const add = ref(false)
const flowCardId = ref('');
@@ -64,58 +67,59 @@
const cell6=ref(true);
const cell7=ref(true);
const cell8=ref(true);
+const cell9=ref(true);
const selectedRow = ref(null); // 瀛樺偍閫変腑鐨勮鏁版嵁
-
-
+
+
// 褰撳墠椤电爜鍜屾瘡椤垫樉绀虹殑鏉℃暟
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 {
return 25; // 榛樿鍊硷紝鍙互鏍规嵁瀹為檯闇�姹備慨鏀�
}
});
-
+
// 璁＄畻鍒嗛〉鍚庣殑鏁版嵁
const paginatedUsers = computed(() => {
const startIndex = calculateStartIndex();
const endIndex = startIndex + itemsPerPage.value;
return tableData.value.slice(startIndex, endIndex);
});
-
+
// 璁＄畻褰撳墠椤电殑璧峰绱㈠紩
function calculateStartIndex() {
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 {
@@ -124,7 +128,11 @@
}
return index;
}
-
+ function jumpToPage(page: number) {
+ if (page >= 1 && page <= totalPages.value) {
+ currentPage.value = page;
+ }
+}
// 涓婁竴椤靛拰涓嬩竴椤垫柟娉�
const prevPage = () => {
if (currentPage.value > 1) {
@@ -137,7 +145,7 @@
currentPage.value++;
}
};
-
+
// 鎬婚〉鏁拌绠�
const totalPages = computed(() => {
// let total = 0;
@@ -154,9 +162,9 @@
// }
return 9;
});
-
-
-
+
+
+
const getTableRow = (row,type) =>{
switch (type) {
case 'edit' :{
@@ -444,7 +452,7 @@
ElMessage.success(response.message);
glassId.value = '';
tableDataf.value = '';
-
+
} else {
ElMessage.error(response.message);
}
@@ -461,16 +469,40 @@
// 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺
const handleMessage = (data) => {
// 鏇存柊 tableData 鐨勬暟鎹�
- tableDatac.value = data.bigStorageCageDetailsOutTask[0]
- tableDatad.value = data.bigStorageCageDetailsFeedTask[0]
+ 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,
+ // }));
+
+// 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]
- console.log(carPosition.value);
- window.localStorage.setItem('length', data.data.bigStorageCageInfos[0][1].length)
+}
+
+
+ if(data.bigStorageCageInfos!=null){
+ window.localStorage.setItem('length', data.bigStorageCageInfos[0][1].length)
let length = window.localStorage.getItem('length')
- adjustedRects.value = data.data.bigStorageCageInfos[0][1].map(rect => ({
+ adjustedRects.value = data.bigStorageCageInfos[0][1].map(rect => ({
...rect,
height: 20/length,
top: 29/length
@@ -510,12 +542,20 @@
height: 20/length,
top: 29/length
}));
+adjustedRectsh.value = data.bigStorageCageInfos[0][9].map(rect => ({
+ ...rect,
+ height: 20/length,
+ top: 29/length
+ }));
+ }
+
+
};
// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁�
onMounted(() => {
// fetchFlowCardId();
initializeWebSocket(socketUrl, handleMessage);
-
+
});
function getStatusType(enableState: number) {
switch (enableState) {
@@ -579,9 +619,9 @@
<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="100" />
+ <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-table-column prop="bigStorageCageOutTask.endSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
<el-table-column prop="bigStorageCageOutTask.trainNumber" align="center" :label="$t('searchOrder.trips')" min-width="120" />
@@ -594,9 +634,9 @@
<el-table-column prop="id" align="center" :label="$t('searchOrder.tabid')" min-width="150"/>
<el-table-column prop="deviceId" align="center" :label="$t('searchOrder.tid')" min-width="100"/>
<el-table-column prop="slot" align="center" :label="$t('searchOrder.gridnumber')" min-width="100"/>
- <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="100"/>
+ <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="120"/>
<el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="150"/>
- <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="100"/>
+ <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140"/>
<el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="100"/>
<el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="100"/>
<el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="100"/>
@@ -614,7 +654,7 @@
</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" />
@@ -647,7 +687,7 @@
</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;">
@@ -661,17 +701,39 @@
</div>
<!-- // 鐖剁骇妗� -->
<div class="img-dlpl" >
- <div class="img-car1" :style="'z-index:999;left:247px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
- <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
+ <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"
+ :style="{
+ width: '30px',
+ height: '5px',
+ backgroundColor: '#409EFF',
+ marginLeft: 5+ `px`,
+ top: '10px',
+ }"
+ >
</div>
- <div class="img-car4" :style="'z-index:999;left:704px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
- <div v-show="cellshow4" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
+ </div>
+ <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"
+ :style="{
+ width: '30px',
+ height: '5px',
+ backgroundColor: '#409EFF',
+ 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.id"
+ :key="rect"
:style="{
// display:'flex',
@@ -699,7 +761,7 @@
</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"
@@ -730,7 +792,7 @@
</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"
@@ -760,7 +822,7 @@
</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"
@@ -791,7 +853,7 @@
</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"
@@ -822,7 +884,7 @@
</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"
@@ -853,7 +915,7 @@
</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"
@@ -884,9 +946,40 @@
</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"
+ :style="{
+
+ // display:'flex',
+ position: 'absolute',
+ width: '227px',
+ // backgroundColor: 'red',
+ left: '0px',
+ top: index*rect.top+`px`,
+ height: `${rect.height}px`,
+ }"
+ >
+ <div
+ v-for="(rects, index) in rect.bigStorageCageDetails"
+ :key="rects"
+ :style="{
+ float:'left',
+ width: '18px',
+ height: `${rect.height}px`,
+ backgroundColor: '#911005',
+ // border:'1px solid black',
+ top: '0px',
+ marginRight: rects.gap/5000*227+'px'
+ }"
+ >
+ </div>
+ </div>
+ </div>
+ <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"
:style="{
@@ -946,8 +1039,8 @@
</el-input>
<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" />
@@ -983,7 +1076,7 @@
</el-table>
</div>
</el-dialog>
-<el-dialog v-model="dialogFormVisiblea" top="5vh" width="97%" :title="$t('searchOrder.cageinformation')">
+<el-dialog v-model="dialogFormVisiblea" top="2vh" width="97%" :title="$t('searchOrder.cageinformation')">
<el-table
:data="paginatedUsers"
@row-click="handleRowClick"
@@ -1004,9 +1097,9 @@
:header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"
>
<!-- <el-table-column prop="menuName" label="浜岀骇鑿滃崟鏍�" align="center" min-width="140" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"/> -->
- <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="90"/>
- <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="110" />
- <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="120" />
+ <el-table-column prop="glassId" :label="$t('searchOrder.glassID')" align="center" min-width="130"/>
+ <el-table-column prop="sequence" align="center" :label="$t('searchOrder.pieceingrid')" min-width="130" />
+ <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="130" />
<el-table-column prop="glassType" align="center" :label="$t('searchOrder.typeglass')" min-width="80" />
<el-table-column prop="width" align="center" :label="$t('searchOrder.width')" min-width="80" />
<el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="80" />
@@ -1073,7 +1166,16 @@
<div style="margin-top: 20px; text-align: center;">
<!-- 涓婁竴椤垫寜閽� -->
<el-button @click="prevPage" :disabled="currentPage === 1">{{ $t('searchOrder.up') }}</el-button>
-
+ <div style="display: inline-block; margin: 0 20px;">
+ <el-button
+ v-for="page in totalPages"
+ :key="page"
+ :class="{ 'is-active': currentPage === page }"
+ @click="jumpToPage(page)"
+ >
+ {{ page }}
+ </el-button>
+ </div>
<!-- 涓嬩竴椤垫寜閽� -->
<el-button @click="nextPage" :disabled="currentPage >= totalPages">{{ $t('searchOrder.down') }}</el-button>
@@ -1238,8 +1340,9 @@
}
.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;
@@ -1250,7 +1353,8 @@
position:relative
}
.img-car1{
- background-image:url('../../assets/lp.png');
+ display: flex;
+ background-image:url('../../assets/lp9.png');
position: absolute;
background-repeat: no-repeat;
background-attachment: local;
@@ -1262,7 +1366,8 @@
position:relative
}
.img-car4{
- background-image:url('../../assets/lpa.png');
+ display: flex;
+ background-image:url('../../assets/lpa9.png');
position: absolute;
background-repeat: no-repeat;
background-attachment: local;
--
Gitblit v1.8.0