From a9592a3326b5c2f9baec271fe9c92c924a51f87e Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期一, 21 四月 2025 10:31:10 +0800
Subject: [PATCH] 新增折铝框一线、二线、三线页面及功能，钢化理片笼表格字段更改
---
UI-Project/src/layout/MainErpView.vue | 4
UI-Project/src/views/Slicecage/slicecage.vue | 2
UI-Project/src/views/hollow/hollowaluminumthree.vue | 203 ++++++++++++++++++
UI-Project/src/lang/en.js | 3
UI-Project/src/lang/py.js | 3
UI-Project/src/lang/zh.js | 3
UI-Project/src/router/index.js | 10
UI-Project/src/views/hollow/hollowaluminumtwo.vue | 203 ++++++++++++++++++
UI-Project/src/views/hollow/hollowaluminum.vue | 214 +++++++++++++++---
9 files changed, 604 insertions(+), 41 deletions(-)
diff --git a/UI-Project/src/lang/en.js b/UI-Project/src/lang/en.js
index 90b7e7f..769dacd 100644
--- a/UI-Project/src/lang/en.js
+++ b/UI-Project/src/lang/en.js
@@ -135,6 +135,7 @@
takeon: 'The arrangement is complete',
},
searchOrder: {
+ furnaces:'Number of full furnaces',
furnfullTemp: 'Total amount of glass',
startCell: 'Target layer number',
endCell: 'Reserved layer number',
@@ -747,6 +748,8 @@
finegrinding: 'Fine grinding',
},
hellow: {
+ clickmakesure: 'Whether or not to confirm the click锛�',
+ logarithm: 'logarithm锛�',
totalPairQuantitya: 'Total number of task allocation pairs',
pairQuantitya: 'Number of deployed pairs',
waitingout: 'Waiting for the release of the film',
diff --git a/UI-Project/src/lang/py.js b/UI-Project/src/lang/py.js
index a4c123f..1583e07 100644
--- a/UI-Project/src/lang/py.js
+++ b/UI-Project/src/lang/py.js
@@ -134,6 +134,7 @@
takeaway: '袙蟹褟褌褜 胁褉褍褔薪褍褞',
},
searchOrder: {
+ furnaces:'婊＄倝鐐夋暟',
furnfullTemp:'鐜荤拑鎬婚噺',
startCell:'鐩爣灞傚彿',
endCell:'棰勭暀灞傚彿',
@@ -708,6 +709,8 @@
finegrinding: '绮剧（',
},
hellow: {
+ clickmakesure: '鏄惁纭鐐瑰嚮锛�',
+ logarithm: '瀵规暟锛�',
totalPairQuantitya: '浠诲姟鎬婚厤瀵规暟',
pairQuantitya: '宸插嚭閰嶅鏁�',
waitingout: '绛夊緟鍑虹墖',
diff --git a/UI-Project/src/lang/zh.js b/UI-Project/src/lang/zh.js
index 2b5d481..6d5d1c9 100644
--- a/UI-Project/src/lang/zh.js
+++ b/UI-Project/src/lang/zh.js
@@ -134,6 +134,7 @@
takeon:'鎽嗙墖瀹屾垚',
},
searchOrder:{
+ furnaces:'婊＄倝鐐夋暟',
furnfullTemp:'鐜荤拑鎬婚噺',
startCell:'鐩爣灞傚彿',
endCell:'棰勭暀灞傚彿',
@@ -751,6 +752,8 @@
finegrinding: '绮剧（',
},
hellow: {
+ clickmakesure: '鏄惁纭鐐瑰嚮锛�',
+ logarithm: '瀵规暟锛�',
totalPairQuantitya: '浠诲姟鎬婚厤瀵规暟',
pairQuantitya: '宸插嚭閰嶅鏁�',
waitingout: '绛夊緟鍑虹墖',
diff --git a/UI-Project/src/layout/MainErpView.vue b/UI-Project/src/layout/MainErpView.vue
index a38750d..d00b2ce 100644
--- a/UI-Project/src/layout/MainErpView.vue
+++ b/UI-Project/src/layout/MainErpView.vue
@@ -113,7 +113,9 @@
'涓┖浜岀嚎': 'Hollow Second Line',
'涓┖涓夌嚎': 'Hollow three line',
'涓┖鐞嗙墖绗�': 'Hollow Film processing cage',
- '涓┖鎶橀摑妗�': 'Hollow folded aluminum frame',
+ '鎶橀摑妗嗕竴绾�': '1 Fold aluminum frame',
+ '鎶橀摑妗嗕簩绾�': '2 Fold aluminum frame',
+ '鎶橀摑妗嗕笁绾�': '3 Fold aluminum frame',
'澶у睆鏄剧ず': 'Large Screen Display',
};
menuData.forEach(menu => {
diff --git a/UI-Project/src/router/index.js b/UI-Project/src/router/index.js
index c320bf6..cdc1ffb 100644
--- a/UI-Project/src/router/index.js
+++ b/UI-Project/src/router/index.js
@@ -300,6 +300,16 @@
name: 'hollowaluminum',
component: () => import('../views/hollow/hollowaluminum.vue')
},
+ {
+ path: '/hollow/hollowaluminumtwo',
+ name: 'hollowaluminumtwo',
+ component: () => import('../views/hollow/hollowaluminumtwo.vue')
+ },
+ {
+ path: '/hollow/hollowaluminumthree',
+ name: 'hollowaluminumthree',
+ component: () => import('../views/hollow/hollowaluminumthree.vue')
+ },
]
},
/*----------- 绠＄悊绯荤粺 ----------------*/
diff --git a/UI-Project/src/views/Slicecage/slicecage.vue b/UI-Project/src/views/Slicecage/slicecage.vue
index 87493ef..9065931 100644
--- a/UI-Project/src/views/Slicecage/slicecage.vue
+++ b/UI-Project/src/views/Slicecage/slicecage.vue
@@ -1201,7 +1201,7 @@
:data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
<el-table-column fixed prop="engineerId" align="center" :label="$t('Mounting.project')" min-width="100" />
<el-table-column prop="countTemp" align="center" :label="$t('searchOrder.totalfurnaces')" min-width="68" />
- <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.furnfullTemp')" min-width="82" />
+ <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.furnaces')" min-width="82" />
<el-table-column prop="countGlass" align="center" :label="$t('searchOrder.cagesnumber')" min-width="82" />
<el-table-column prop="area" align="center" :label="$t('large.are')" min-width="70" />
<el-table-column prop="countSlot" align="center" :label="$t('searchOrder.slotnumber')" min-width="96" />
diff --git a/UI-Project/src/views/hollow/hollowaluminum.vue b/UI-Project/src/views/hollow/hollowaluminum.vue
index a232611..7bc8734 100644
--- a/UI-Project/src/views/hollow/hollowaluminum.vue
+++ b/UI-Project/src/views/hollow/hollowaluminum.vue
@@ -1,54 +1,192 @@
<script setup>
-import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
-import {useRouter} from "vue-router"
-import {host, WebSocketHost} from '@/utils/constants'
-import request from "@/utils/request"
-import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
-import {ElMessage, ElMessageBox} from 'element-plus'
-import {useI18n} from 'vue-i18n'
-const router = useRouter()
-const {t} = useI18n()
-let language = ref(localStorage.getItem('lang') || 'zh')
-// let socket = null;
-// const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`;
-// const handleMessage = (data) => {
-// tableData.value = data.edgTasks[0]
-// };
-// onMounted(() => {
-// socket = initializeWebSocket(socketUrl, handleMessage);
-// });
-// onUnmounted(() => {
-// if (socket) {
-// closeWebSocket(socket);
-// }
-// });
-// onBeforeUnmount(() => {
-// closeWebSocket();
-// });
+import { onBeforeUnmount, onMounted, ref, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { host, WebSocketHost } from '@/utils/constants';
+import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
+import { useI18n } from 'vue-i18n';
+import request from '@/utils/request';
+const router = useRouter();
+const { t } = useI18n();
+const language = ref(localStorage.getItem('lang') || 'zh');
+const carouselData = ref([]);
+const activeIndex = ref('');
+const isDialogVisible = ref(false);
+const selectedItem = ref(null);
+const selectedLayer = ref(null);
+const maxLayer = ref(0);
+const carouselRef = ref(null); // 馃憟 ref 鐢ㄤ簬璁块棶缁勪欢瀹炰緥
+const handlesure = async () => {
+ try {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/queryHollowGlassQueueInfoByLine', {
+ cell: 930,
+ });
+ if (response.code === 200) {
+ carouselData.value = response.data.map((item) => ({
+ width: item.width,
+ height: item.height,
+ state: item.state,
+ flowCardId: item.flowCardId,
+ thickness: item.thickness,
+ hollowSequence: item.hollowSequence,
+ layer: item.layer,
+ relationId: item.relationId
+ }));
+ // 鏌ユ壘 state === -2 鐨勯」
+ const targetIndex = carouselData.value.findIndex((item) => item.state === -2);
+ const finalIndex = targetIndex !== -1 ? targetIndex : 0;
+ // 绛夊緟 DOM 娓叉煋瀹屾垚鍚庡垏鎹㈤〉闈�
+ await nextTick();
+ activeIndex.value = finalIndex;
+ carouselRef.value?.setActiveItem(finalIndex); // 寮哄埗鏇存柊 Element Plus 鐨勮疆鎾粍浠�
+ } else {
+ console.error('鎺ュ彛杩斿洖閿欒:', response.message || '鏈煡閿欒');
+ }
+ } catch (error) {
+ console.error('璇锋眰澶辫触:', error);
+ }
+};
+const handleDilapidationClick = (item) => {
+ if (item.layer > 0) {
+ selectedItem.value = item;
+ maxLayer.value = item.layer;
+ selectedLayer.value = null; // 閲嶇疆閫夋嫨
+ isDialogVisible.value = true;
+ } else {
+ ElMessage.warning('褰撳墠椤规病鏈夊眰淇℃伅');
+ }
+};
+const confirmDilapidation = async () => {
+ if (!selectedLayer.value) {
+ ElMessage.warning('璇烽�夋嫨涓�涓眰鏁�');
+ return;
+ }
+ try {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
+ hollowSequence: selectedItem.value.hollowSequence,
+ relationId: selectedItem.value.relationId,
+ layer: selectedLayer.value,
+ state: 8,
+ });
+ ElMessage.success(`宸查�夋嫨灞傛暟锛�${selectedLayer.value}`);
+ isDialogVisible.value = false;
+ handlesure()
+ } catch (error) {
+ console.error('鐮存崯鎿嶄綔澶辫触:', error);
+ ElMessage.error('鐮存崯鎿嶄綔澶辫触锛岃閲嶈瘯');
+ }
+};
+// 纭
+const handleButtonClick = async (item) => {
+ try {
+ const confirmResult = await ElMessageBox.confirm(
+ t('hellow.clickmakesure'),
+ t('productStock.prompt'),
+ {
+ confirmButtonText: t('productStock.yes'),
+ cancelButtonText: t('productStock.cancel'),
+ type: 'warning',
+ }
+ );
+ if (confirmResult === 'confirm') {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
+ hollowSequence: item.hollowSequence,
+ relationId: item.relationId,
+ state: 1,
+ })
+ if (response.code === 200) {
+ ElMessage.success(response.message);
+ handlesure()
+ } else {
+ ElMessage.error(response.msg);
+ }
+ }
+ } catch (error) {
+ console.error('鍙戠敓閿欒:', error);
+ }
+};
+onMounted(() => {
+ handlesure()
+});
+onBeforeUnmount(() => {
+ // if (socket) {
+ // closeWebSocket(socket);
+ // }
+});
+const handleCarouselChange = (index) => {
+ activeIndex.value = index;
+};
+const getColorByState = (state) => {
+ switch (state) {
+ case -2: return "gray";
+ case -1: return "gray";
+ case 0: return "gray";
+ case 1: return "green";
+ case 8: return "#911005";
+ default: return "black";
+ }
+};
</script>
<template>
<div style="height: 500px;">
<div>
- <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" >
- <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
- <div class="block text-center" m="t-4">
- <el-carousel height="550px">
- <!-- <el-carousel trigger="click" height="550px">//榧犳爣绉诲叆鏃堕〉闈笉鍒囨崲锛岄紶鏍囩Щ璧版椂鐣岄潰鑷姩婊氬姩 -->
- <el-carousel-item v-for="item in 3" :key="item">
- <h3 class="small justify-center" text="2xl">{{ item }}</h3>
- </el-carousel-item>
- </el-carousel>
- </div>
+ <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
+ <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
+ <div class="block text-center" m="t-4" >
+ <el-carousel ref="carouselRef" :active-index="activeIndex" @change="handleCarouselChange" height="750px"
+ :autoplay="false">
+ <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+ <div class="carousel-item-content" :style="{
+ width: `${item.width*0.5}px`,
+ height: `${item.height*0.3}px`,
+ backgroundColor: getColorByState(item.state),
+ }">
+ <div style="color: aquamarine;">
+ <p>{{ item.flowCardId }}</p>
+ <p>{{ $t('basicData.widtha') }}{{ item.width }}</p>
+ <p>{{ $t('basicData.heighta') }}{{ item.height }}</p>
+ <p>{{ $t('basicData.thicknessa') }}{{ item.thickness }}</p>
+ <p>{{ $t('hellow.logarithm') }}{{ item.hollowSequence }}</p>
+ </div>
+ <div>
+ <el-button type="text" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
+ <el-button type="text" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ <el-dialog v-model="isDialogVisible" width="20%" top="30vh" style="text-align: center;">
+ <div>
+ <el-select v-model="selectedLayer" clearable :placeholder="$t('hellow.layer')" style="width: 50%;">
+ <el-option v-for="n in maxLayer" :key="n" :label="n" :value="n"></el-option>
+ </el-select>
</div>
+ <div slot="footer" style="margin-top: 15px;">
+ <el-button @click="isDialogVisible = false">{{ $t('basicData.cancel') }}</el-button>
+ <el-button type="primary" :disabled="!selectedLayer" @click="confirmDilapidation">{{ $t('basicData.confirm') }}</el-button>
+ </div>
+ </el-dialog>
</el-card>
</div>
</div>
</template>
<style scoped>
+.carousel-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ color: white;
+ /* 纭繚鏂囧瓧棰滆壊鍙 */
+ text-align: center;
+}
.demonstration {
color: var(--el-text-color-secondary);
}
-
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
@@ -56,11 +194,9 @@
margin: 0;
text-align: center;
}
-
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
-
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
diff --git a/UI-Project/src/views/hollow/hollowaluminumthree.vue b/UI-Project/src/views/hollow/hollowaluminumthree.vue
new file mode 100644
index 0000000..5689ac4
--- /dev/null
+++ b/UI-Project/src/views/hollow/hollowaluminumthree.vue
@@ -0,0 +1,203 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { host, WebSocketHost } from '@/utils/constants';
+import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
+import { useI18n } from 'vue-i18n';
+import request from '@/utils/request';
+const router = useRouter();
+const { t } = useI18n();
+const language = ref(localStorage.getItem('lang') || 'zh');
+const carouselData = ref([]);
+const activeIndex = ref('');
+const isDialogVisible = ref(false);
+const selectedItem = ref(null);
+const selectedLayer = ref(null);
+const maxLayer = ref(0);
+const carouselRef = ref(null); // 馃憟 ref 鐢ㄤ簬璁块棶缁勪欢瀹炰緥
+const handlesure = async () => {
+ try {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/queryHollowGlassQueueInfoByLine', {
+ cell: 932,
+ });
+ if (response.code === 200) {
+ carouselData.value = response.data.map((item) => ({
+ width: item.width,
+ height: item.height,
+ state: item.state,
+ flowCardId: item.flowCardId,
+ thickness: item.thickness,
+ hollowSequence: item.hollowSequence,
+ layer: item.layer,
+ relationId: item.relationId
+ }));
+ // 鏌ユ壘 state === -2 鐨勯」
+ const targetIndex = carouselData.value.findIndex((item) => item.state === -2);
+ const finalIndex = targetIndex !== -1 ? targetIndex : 0;
+ // 绛夊緟 DOM 娓叉煋瀹屾垚鍚庡垏鎹㈤〉闈�
+ await nextTick();
+ activeIndex.value = finalIndex;
+ carouselRef.value?.setActiveItem(finalIndex); // 寮哄埗鏇存柊 Element Plus 鐨勮疆鎾粍浠�
+ } else {
+ console.error('鎺ュ彛杩斿洖閿欒:', response.message || '鏈煡閿欒');
+ }
+ } catch (error) {
+ console.error('璇锋眰澶辫触:', error);
+ }
+};
+const handleDilapidationClick = (item) => {
+ if (item.layer > 0) {
+ selectedItem.value = item;
+ maxLayer.value = item.layer;
+ selectedLayer.value = null; // 閲嶇疆閫夋嫨
+ isDialogVisible.value = true;
+ } else {
+ ElMessage.warning('褰撳墠椤规病鏈夊眰淇℃伅');
+ }
+};
+const confirmDilapidation = async () => {
+ if (!selectedLayer.value) {
+ ElMessage.warning('璇烽�夋嫨涓�涓眰鏁�');
+ return;
+ }
+ try {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
+ hollowSequence: selectedItem.value.hollowSequence,
+ relationId: selectedItem.value.relationId,
+ layer: selectedLayer.value,
+ state: 8,
+ });
+ ElMessage.success(`宸查�夋嫨灞傛暟锛�${selectedLayer.value}`);
+ isDialogVisible.value = false;
+ handlesure()
+ } catch (error) {
+ console.error('鐮存崯鎿嶄綔澶辫触:', error);
+ ElMessage.error('鐮存崯鎿嶄綔澶辫触锛岃閲嶈瘯');
+ }
+};
+// 纭
+const handleButtonClick = async (item) => {
+ try {
+ const confirmResult = await ElMessageBox.confirm(
+ t('hellow.clickmakesure'),
+ t('productStock.prompt'),
+ {
+ confirmButtonText: t('productStock.yes'),
+ cancelButtonText: t('productStock.cancel'),
+ type: 'warning',
+ }
+ );
+ if (confirmResult === 'confirm') {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
+ hollowSequence: item.hollowSequence,
+ relationId: item.relationId,
+ state: 1,
+ })
+ if (response.code === 200) {
+ ElMessage.success(response.message);
+ handlesure()
+ } else {
+ ElMessage.error(response.msg);
+ }
+ }
+ } catch (error) {
+ console.error('鍙戠敓閿欒:', error);
+ }
+};
+onMounted(() => {
+ handlesure()
+});
+onBeforeUnmount(() => {
+ // if (socket) {
+ // closeWebSocket(socket);
+ // }
+});
+const handleCarouselChange = (index) => {
+ activeIndex.value = index;
+};
+const getColorByState = (state) => {
+ switch (state) {
+ case -2: return "gray";
+ case -1: return "gray";
+ case 0: return "gray";
+ case 1: return "green";
+ case 8: return "#911005";
+ default: return "black";
+ }
+};
+</script>
+<template>
+ <div style="height: 500px;">
+ <div>
+ <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
+ <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
+ <div class="block text-center" m="t-4" >
+ <el-carousel ref="carouselRef" :active-index="activeIndex" @change="handleCarouselChange" height="750px"
+ :autoplay="false">
+ <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+ <div class="carousel-item-content" :style="{
+ width: `${item.width*0.5}px`,
+ height: `${item.height*0.3}px`,
+ backgroundColor: getColorByState(item.state),
+ }">
+ <div style="color: aquamarine;">
+ <p>{{ item.flowCardId }}</p>
+ <p>{{ $t('basicData.widtha') }}{{ item.width }}</p>
+ <p>{{ $t('basicData.heighta') }}{{ item.height }}</p>
+ <p>{{ $t('basicData.thicknessa') }}{{ item.thickness }}</p>
+ <p>{{ $t('hellow.logarithm') }}{{ item.hollowSequence }}</p>
+ </div>
+ <div>
+ <el-button type="text" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
+ <el-button type="text" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ <el-dialog v-model="isDialogVisible" width="20%" top="30vh" style="text-align: center;">
+ <div>
+ <el-select v-model="selectedLayer" clearable :placeholder="$t('hellow.layer')" style="width: 50%;">
+ <el-option v-for="n in maxLayer" :key="n" :label="n" :value="n"></el-option>
+ </el-select>
+ </div>
+ <div slot="footer" style="margin-top: 15px;">
+ <el-button @click="isDialogVisible = false">{{ $t('basicData.cancel') }}</el-button>
+ <el-button type="primary" :disabled="!selectedLayer" @click="confirmDilapidation">{{ $t('basicData.confirm') }}</el-button>
+ </div>
+ </el-dialog>
+ </el-card>
+ </div>
+ </div>
+</template>
+<style scoped>
+.carousel-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ color: white;
+ /* 纭繚鏂囧瓧棰滆壊鍙 */
+ text-align: center;
+}
+.demonstration {
+ color: var(--el-text-color-secondary);
+}
+.el-carousel__item h3 {
+ color: #475669;
+ opacity: 0.75;
+ line-height: 550px;
+ margin: 0;
+ text-align: center;
+}
+.el-carousel__item:nth-child(2n) {
+ background-color: #99a9bf;
+}
+.el-carousel__item:nth-child(2n + 1) {
+ background-color: #d3dce6;
+}
+</style>
\ No newline at end of file
diff --git a/UI-Project/src/views/hollow/hollowaluminumtwo.vue b/UI-Project/src/views/hollow/hollowaluminumtwo.vue
new file mode 100644
index 0000000..930ea5f
--- /dev/null
+++ b/UI-Project/src/views/hollow/hollowaluminumtwo.vue
@@ -0,0 +1,203 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { host, WebSocketHost } from '@/utils/constants';
+import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
+import { useI18n } from 'vue-i18n';
+import request from '@/utils/request';
+const router = useRouter();
+const { t } = useI18n();
+const language = ref(localStorage.getItem('lang') || 'zh');
+const carouselData = ref([]);
+const activeIndex = ref('');
+const isDialogVisible = ref(false);
+const selectedItem = ref(null);
+const selectedLayer = ref(null);
+const maxLayer = ref(0);
+const carouselRef = ref(null); // 馃憟 ref 鐢ㄤ簬璁块棶缁勪欢瀹炰緥
+const handlesure = async () => {
+ try {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/queryHollowGlassQueueInfoByLine', {
+ cell: 931,
+ });
+ if (response.code === 200) {
+ carouselData.value = response.data.map((item) => ({
+ width: item.width,
+ height: item.height,
+ state: item.state,
+ flowCardId: item.flowCardId,
+ thickness: item.thickness,
+ hollowSequence: item.hollowSequence,
+ layer: item.layer,
+ relationId: item.relationId
+ }));
+ // 鏌ユ壘 state === -2 鐨勯」
+ const targetIndex = carouselData.value.findIndex((item) => item.state === -2);
+ const finalIndex = targetIndex !== -1 ? targetIndex : 0;
+ // 绛夊緟 DOM 娓叉煋瀹屾垚鍚庡垏鎹㈤〉闈�
+ await nextTick();
+ activeIndex.value = finalIndex;
+ carouselRef.value?.setActiveItem(finalIndex); // 寮哄埗鏇存柊 Element Plus 鐨勮疆鎾粍浠�
+ } else {
+ console.error('鎺ュ彛杩斿洖閿欒:', response.message || '鏈煡閿欒');
+ }
+ } catch (error) {
+ console.error('璇锋眰澶辫触:', error);
+ }
+};
+const handleDilapidationClick = (item) => {
+ if (item.layer > 0) {
+ selectedItem.value = item;
+ maxLayer.value = item.layer;
+ selectedLayer.value = null; // 閲嶇疆閫夋嫨
+ isDialogVisible.value = true;
+ } else {
+ ElMessage.warning('褰撳墠椤规病鏈夊眰淇℃伅');
+ }
+};
+const confirmDilapidation = async () => {
+ if (!selectedLayer.value) {
+ ElMessage.warning('璇烽�夋嫨涓�涓眰鏁�');
+ return;
+ }
+ try {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
+ hollowSequence: selectedItem.value.hollowSequence,
+ relationId: selectedItem.value.relationId,
+ layer: selectedLayer.value,
+ state: 8,
+ });
+ ElMessage.success(`宸查�夋嫨灞傛暟锛�${selectedLayer.value}`);
+ isDialogVisible.value = false;
+ handlesure()
+ } catch (error) {
+ console.error('鐮存崯鎿嶄綔澶辫触:', error);
+ ElMessage.error('鐮存崯鎿嶄綔澶辫触锛岃閲嶈瘯');
+ }
+};
+// 纭
+const handleButtonClick = async (item) => {
+ try {
+ const confirmResult = await ElMessageBox.confirm(
+ t('hellow.clickmakesure'),
+ t('productStock.prompt'),
+ {
+ confirmButtonText: t('productStock.yes'),
+ cancelButtonText: t('productStock.cancel'),
+ type: 'warning',
+ }
+ );
+ if (confirmResult === 'confirm') {
+ const response = await request.post('/hollowGlass/hollowGlassQueueInfo/confirmBorder', {
+ hollowSequence: item.hollowSequence,
+ relationId: item.relationId,
+ state: 1,
+ })
+ if (response.code === 200) {
+ ElMessage.success(response.message);
+ handlesure()
+ } else {
+ ElMessage.error(response.msg);
+ }
+ }
+ } catch (error) {
+ console.error('鍙戠敓閿欒:', error);
+ }
+};
+onMounted(() => {
+ handlesure()
+});
+onBeforeUnmount(() => {
+ // if (socket) {
+ // closeWebSocket(socket);
+ // }
+});
+const handleCarouselChange = (index) => {
+ activeIndex.value = index;
+};
+const getColorByState = (state) => {
+ switch (state) {
+ case -2: return "gray";
+ case -1: return "gray";
+ case 0: return "gray";
+ case 1: return "green";
+ case 8: return "#911005";
+ default: return "black";
+ }
+};
+</script>
+<template>
+ <div style="height: 500px;">
+ <div>
+ <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
+ <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
+ <div class="block text-center" m="t-4" >
+ <el-carousel ref="carouselRef" :active-index="activeIndex" @change="handleCarouselChange" height="750px"
+ :autoplay="false">
+ <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+ <div class="carousel-item-content" :style="{
+ width: `${item.width*0.5}px`,
+ height: `${item.height*0.3}px`,
+ backgroundColor: getColorByState(item.state),
+ }">
+ <div style="color: aquamarine;">
+ <p>{{ item.flowCardId }}</p>
+ <p>{{ $t('basicData.widtha') }}{{ item.width }}</p>
+ <p>{{ $t('basicData.heighta') }}{{ item.height }}</p>
+ <p>{{ $t('basicData.thicknessa') }}{{ item.thickness }}</p>
+ <p>{{ $t('hellow.logarithm') }}{{ item.hollowSequence }}</p>
+ </div>
+ <div>
+ <el-button type="text" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
+ <el-button type="text" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ <el-dialog v-model="isDialogVisible" width="20%" top="30vh" style="text-align: center;">
+ <div>
+ <el-select v-model="selectedLayer" clearable :placeholder="$t('hellow.layer')" style="width: 50%;">
+ <el-option v-for="n in maxLayer" :key="n" :label="n" :value="n"></el-option>
+ </el-select>
+ </div>
+ <div slot="footer" style="margin-top: 15px;">
+ <el-button @click="isDialogVisible = false">{{ $t('basicData.cancel') }}</el-button>
+ <el-button type="primary" :disabled="!selectedLayer" @click="confirmDilapidation">{{ $t('basicData.confirm') }}</el-button>
+ </div>
+ </el-dialog>
+ </el-card>
+ </div>
+ </div>
+</template>
+<style scoped>
+.carousel-item-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ color: white;
+ /* 纭繚鏂囧瓧棰滆壊鍙 */
+ text-align: center;
+}
+.demonstration {
+ color: var(--el-text-color-secondary);
+}
+.el-carousel__item h3 {
+ color: #475669;
+ opacity: 0.75;
+ line-height: 550px;
+ margin: 0;
+ text-align: center;
+}
+.el-carousel__item:nth-child(2n) {
+ background-color: #99a9bf;
+}
+.el-carousel__item:nth-child(2n + 1) {
+ background-color: #d3dce6;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0