~zhoushihao/YiWuProject.git

			@@ -1,90 +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(() => {
			console.log("关闭了")
			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;" v-loading="loading">
			<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 size="mini" type="text" plain @click="open(scope.row)">{{
			$t('workOrder.breakage')
			}}
			</el-button>
			<el-button size="mini" 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>