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/views/hollow/hollowaluminum.vue | 214 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 175 insertions(+), 39 deletions(-)
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;
}
--
Gitblit v1.8.0