From aa5d2f68e1d97f7a1b20fa15e1bde9195544bb3e Mon Sep 17 00:00:00 2001
From: ZengTao <2773468879@qq.com>
Date: 星期二, 11 十一月 2025 15:15:06 +0800
Subject: [PATCH] 1、钢化查询添加显示工程名称 2、中空任务界面缺片详情修改
---
UI-Project/src/views/hollow/hollowaluminum.vue | 257 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 187 insertions(+), 70 deletions(-)
diff --git a/UI-Project/src/views/hollow/hollowaluminum.vue b/UI-Project/src/views/hollow/hollowaluminum.vue
index 9ae549b..413fa9b 100644
--- a/UI-Project/src/views/hollow/hollowaluminum.vue
+++ b/UI-Project/src/views/hollow/hollowaluminum.vue
@@ -1,89 +1,206 @@
<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 adda = ref(false)
-const {t} = useI18n()
-let language = ref(localStorage.getItem('lang') || 'zh')
-const tableData = ref([])
-const slot = ref('')
-const requestData = {
- line: 2001
+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 timeRange = ref([])
-const selectValuesa = reactive([]);
-let socket = null;
-const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`;
-const handleMessage = (data) => {
- tableData.value = data.edgTasks[0]
+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(() => {
- socket = initializeWebSocket(socketUrl, handleMessage);
+ handlesure()
});
- onUnmounted(() => {
- if (socket) {
- closeWebSocket(socket);
- }
- });
onBeforeUnmount(() => {
- closeWebSocket();
+ // 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 "#95d475";
+ case 8: return "#911005";
+ default: return "#CDAF95";
+ }
+};
</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;">
- <el-table height="750" ref="table"
- @selection-change="handleSelectionChange"
- :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
- <el-table-column prop="glassId" align="center" :label="$t('workOrder.glassID')" min-width="180" />
- <el-table-column prop="width" align="center" :label="$t('workOrder.width')" min-width="120" />
- <el-table-column prop="height" align="center" :label="$t('workOrder.height')" min-width="80" />
- <el-table-column prop="thickness" align="center" :label="$t('workOrder.thickness')" min-width="120" />
- <el-table-column prop="glassType" align="center" :label="$t('workOrder.glasstype')" min-width="120" />
- <el-table-column prop="line" align="center" :label="$t('workOrder.line')" min-width="120" />
- <el-table-column fixed="right" :label="$t('workOrder.operate')" align="center" width="200">
- <template #default="scope">
- <el-button type="text" plain @click="open(scope.row)">{{
- $t('workOrder.breakage')
- }}
- </el-button>
- <el-button type="text" plain @click="opena(scope.row)">{{
- $t('workOrder.takeout')
- }}
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </el-card>
+ <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 style="display: flex; justify-content: center; align-items: flex-end; height: 100%; padding-bottom: 50px;">
+ <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: #FAFCFF;font-size:18px;text-align: center; display: flex; flex-direction: column; justify-content: center; height: 87%;">
+ <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 style="position: absolute; bottom: 20px; right: 20px;">
+ <el-button size="large" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
+ <el-button size="large" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
+ </div>
+ </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>
-#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
-#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
-#dialog-footer{
- text-align: center;
- margin-top: -15px;
-}
-#message{
- text-align: center;
+ .carousel-item-content {
+ display: flex;
+ flex-direction: column;
align-items: center;
- color: black;
- width: 200px;
- height: 100px;
- background-color: #337ecc;
- margin-left: 28%;
+ justify-content: flex-end;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ color: white;
+ text-align: center;
+ padding-bottom: 0px;
+ box-sizing: border-box;
}
-#awatch{
- height: 460px;
- /* margin-top: -60px; */
+.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: #d3dce6;
+}
+.el-carousel__item:nth-child(2n + 1) {
+ background-color: #d3dce6;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0