<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 "#99BBFF";
|
case 0: return "#7AC5CD";
|
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;">
|
<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: #090909;">
|
<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: #d3dce6;
|
}
|
.el-carousel__item:nth-child(2n + 1) {
|
background-color: #d3dce6;
|
}
|
</style>
|
