Merge branch 'master' of http://10.153.19.25:10105/r/YiWuProject
| | |
| | | takeon: 'The arrangement is complete', |
| | | }, |
| | | searchOrder: { |
| | | furnaces:'Number of full furnaces', |
| | | furnfullTemp: 'Total amount of glass', |
| | | startCell: 'Target layer number', |
| | | endCell: 'Reserved layer number', |
| | |
| | | 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', |
| | |
| | | takeaway: 'Взять вручную', |
| | | }, |
| | | searchOrder: { |
| | | furnaces:'满炉炉数', |
| | | furnfullTemp:'玻璃总量', |
| | | startCell:'目标层号', |
| | | endCell:'预留层号', |
| | |
| | | finegrinding: '精磨', |
| | | }, |
| | | hellow: { |
| | | clickmakesure: '是否确认点击?', |
| | | logarithm: '对数:', |
| | | totalPairQuantitya: '任务总配对数', |
| | | pairQuantitya: '已出配对数', |
| | | waitingout: '等待出片', |
| | |
| | | takeon:'摆片完成', |
| | | }, |
| | | searchOrder:{ |
| | | furnaces:'满炉炉数', |
| | | furnfullTemp:'玻璃总量', |
| | | startCell:'目标层号', |
| | | endCell:'预留层号', |
| | |
| | | finegrinding: '精磨', |
| | | }, |
| | | hellow: { |
| | | clickmakesure: '是否确认点击?', |
| | | logarithm: '对数:', |
| | | totalPairQuantitya: '任务总配对数', |
| | | pairQuantitya: '已出配对数', |
| | | waitingout: '等待出片', |
| | |
| | | '中空二线': '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 => { |
| | |
| | | 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') |
| | | }, |
| | | ] |
| | | }, |
| | | /*----------- 管理系统 ----------------*/ |
| | |
| | | :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" /> |
| | |
| | | <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; |
| | |
| | | margin: 0; |
| | | text-align: center; |
| | | } |
| | | |
| | | .el-carousel__item:nth-child(2n) { |
| | | background-color: #99a9bf; |
| | | } |
| | | |
| | | .el-carousel__item:nth-child(2n + 1) { |
| | | background-color: #d3dce6; |
| | | } |
New file |
| | |
| | | <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> |
New file |
| | |
| | | <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> |