~admin/HangZhouMes.git

			@@ -4,58 +4,53 @@
			import {useRouter} from "vue-router"
			const router = useRouter()
			const adda = ref(false)
			import { WebSocketHost ,host} from '@/utils/constants'

			import request from "@/utils/request"
			import { ref, onMounted } from "vue";
			import { ref, onMounted , onBeforeUnmount} from "vue";
			import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
			// import { ref } from 'vue'
			import { ElMessage, ElMessageBox } from 'element-plus'
			// import LanguageMixin from './lang/LanguageMixin'

			const tableData = ref([])
			const slot = ref('')


			request.post("/cacheGlass/edgStorageCage/selectEdgStorageCage").then((res) => {
			if (res.code == 200) {

			console.log(res.data);
			tableData.value = res.data
			console.log(res.data[0].slot);
			} else {
			ElMessage.warning(res.msg)

			}
			});

			// const getTableRow = (row,type) =>{
			// switch (type) {
			// case 'delete':{
			// let flowData = ref({
			// id:0,
			// slot:row.slot
			// })
			// request.post("/cacheGlass/edgStorageCage/edgStorageCageGlass",flowData.value).then((res) => {
			// if(res.code==200){
			// ElMessage.success(t('searchOrder.msgDeleteSuccess'))
			// router.push({path:'/main/delivery/selectDelivery',query:{random:Math.random()}})
			// }else{
			// ElMessage.warning(res.msg)
			// router.push("/login")
			// }
			// })

			// return
			// }
			// }
			// }
			// let slots = ref({
			// id:0,
			// slot: slot.value
			// })
			const adjustedRects = ref([]);
			onMounted(async () => {
			try {
			const response = await request.post('/cacheGlass/edgStorageCage/selectEdgStorageCage'); // 替换为你的API端点
			if (response.code === 200) {
			const rawRects = response.data; // 设置矩形数据
			tableData.value = response.data
			console.log(response.data);
			adjustedRects.value = rawRects.map(rect => ({
			...rect, // 复制原始对象的其他属性
			width: rect.width * 0.5 ,
			id: rect.id * 10,
			}));
			console.log(adjustedRects.value);
			} else {
			ElMessage.warning(res.msg)
			}
			} catch (error) {
			// console.error('Error fetching rects :', error);
			}
			});
			const toggleEnableState = async (row) => {
			const newState = row.enable_state === 1 ? 0 : 1;
			// 发送请求到后端更新状态（这里省略了实际的请求逻辑）
			const response = await request.post('/cacheGlass/edgStorageCage/updateEdgStorageCage', { id: row.id, enablestate: newState });
			if (response.code === 200) {
			ElMessage.success(response.message);
			} else {
			ElMessage.error(response.message);
			}
			row.enable_state = newState;
			};
			const open = async(row) => {
			try {
			const confirmResult = await ElMessageBox.confirm(
			'是否删除该条信息?',
			'是否报缺该条信息?',
			'提示',
			{
			confirmButtonText: '是',
			@@ -65,115 +60,48 @@
			);
			if (confirmResult === 'confirm') {
			// 用户点击了“是”，现在调用删除接口
			const deleteResponse = await request.post("/cacheGlass/edgStorageCage/edgStorageCageGlass", {
			id:0,
			slot: row.slot
			var url="/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId="+row.id;
			console.log(url);
			const response = await request.post(url, {
			esdId: row.esdId
			})
			if (response.code == 200) {
			// 删除成功，您可以根据需要处理成功的情况
			alert('删除成功！');
			if (response.code === 200) {
			ElMessage.success(response.message);
			} else {
			// 删除失败，您可以处理错误或显示错误信息给用户
			alert('删除失败：' + deleteResponse.message);
			ElMessage.error(response.msg);
			// alert('删除失败：' + deleteResponse.message);
			}
			}
			} catch (error) {
			// 处理可能出现的错误，比如 ElMessageBox 抛出的异常等
			console.error('发生错误:', error);
			}
			};
			// const open = () => {
			// ElMessageBox.confirm(
			// '是否删除该条信息?',
			// '提示',
			// {
			// confirmButtonText: '是',
			// cancelButtonText: '取消',
			// type: 'warning',
			// }
			// )
			// .then(() => {
			// ElMessage({
			// type: 'success',
			// message: '删除成功！',
			// })
			// })
			// .catch(() => {
			// ElMessage({
			// type: 'info',
			// message: '删除失败',
			// })
			// })
			// }
			// 删除
			// const handleBindRacka = (row) => {
			// adda.value = true; // 打开绑定架子对话框
			// };
			// // 删除
			// const handleConfirma = async () => {
			// try {
			// window.localStorage.setItem('slot', res.data.slot)
			// let slot = window.localStorage.getItem('slot')
			// const response = await request.post('/cacheGlass/edgStorageCage/edgStorageCageGlass', {
			// slot: slot.value,
			// id: 0
			// });

			// if (response.code == 200) {
			// // 绑定成功，处理逻辑
			// ElMessage.success(response.message);
			// adda.value = false;
			// } else {
			// // 请求失败，显示错误消息
			// ElMessage.error(response.msg);
			// }
			// } catch (error) {
			// // 处理错误
			// console.error(error);
			// }
			// };
			};
			const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
			// 定义消息处理函数，更新 receivedData 变量
			const handleMessage = (data) => {
			// 更新 tableData 的数据
			tableData.value = data.EdgStorageCageinfos[0]
			// adjustedRects.value = data.EdgStorageCageinfos[0]
			adjustedRects.value = data.EdgStorageCageinfos[0].map(rect => ({
			...rect, // 复制原始对象的其他属性
			width: rect.width * 0.5 ,
			id: rect.id * 10,
			}));

			const gridOptions = reactive({
			border: "full",//表格加边框
			keepSource: true,//保持源数据
			align: 'center',//文字居中
			stripe:true,//斑马纹
			rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
			id: 'OrderList',
			showFooter: true,//显示脚
			printConfig: {},
			importConfig: {},
			exportConfig: {},
			scrollY:{ enabled: true },//开启虚拟滚动
			showOverflow:true,
			columnConfig: {
			resizable: true,
			useKey: true
			},
			filterConfig: { //筛选配置项
			remote: true
			},
			customConfig: {
			storage: true
			},
			editConfig: {
			trigger: 'click',
			mode: 'row',
			showStatus: true
			},
			data: [
			{
			'id': '1',
			'long': '5',
			'wide': '1005',
			'thick': '183.6',
			}
			]

			})
			};
			// 初始化 WebSocket，并传递消息处理函数
			onMounted(() => {
			// fetchFlowCardId();
			// fetchTableData(); // 获取数据
			initializeWebSocket(socketUrl, handleMessage);
			});



			onBeforeUnmount(() => {
			console.log("关闭了")
			closeWebSocket();
			});
			</script>

			<template>
			@@ -193,9 +121,17 @@
			min-width="80"
			prop="enable_state"
			>
			<template #default="scope">
			<template #default="scope">
			<el-tag
			:type="scope.row.enable_state === 1 ? 'success' : 'danger'"
			@click="toggleEnableState(scope.row)"
			>
			{{ scope.row.enable_state === 1 ? '启用' : '禁用' }}
			</el-tag>
			</template>
			<!-- <template #default="scope">
			<el-tag type="success" >{{ scope.row.enable_state==1?"启用":"未启用" }}</el-tag>
			</template>
			</template> -->
			</el-table-column>
			<el-table-column fixed="right" label="操作" align="center" width="200">
			<template #default="scope">
			@@ -206,22 +142,23 @@
			</el-table>
			</div>
			</el-card>
			<!-- <el-dialog v-model="adda" top="30vh" width="25%" title="是否删除该条信息?" >
			<template #footer>
			<div id="dialog-footer">
			<el-button type="primary" @click="handleConfirma">
			确认
			</el-button>
			<el-button @click="adda = false">取消</el-button>
			</div>
			</template>
			</el-dialog> -->
			</div>
			<div id="awatch">
			<img src="../../assets/woshihuancun.png" alt="" style="width: 60%;height: 90%;margin-left: 260px;margin-top: 20px;">
			<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: -124px;margin-left: 480px;"></div>
			<img src="../../assets/woshihuancun.png" alt="" style="width: 60%;height: 90%;margin-left: 260px;margin-top: 20px;position: relative;">
			<div style="position: absolute; width: 500px;height: 95px;margin-top: -165px;margin-left: 450px;">
			<div
			v-for="(rect, index) in adjustedRects"
			:key="rect"
			:style="{ position: 'absolute',
			top: `${rect.id}px`, left: `10px`, width: `${rect.width}px`, height: `5px`,
			backgroundColor: '#409EFF'
			}"
			>
			</div>
			</div>
			<!-- <div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: -124px;margin-left: 480px;"></div>
			<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: -30px;margin-left: 850px;"></div>
			<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: 30px;margin-left: 695px;"></div>
			<div style="width: 100px;height: 10px;background-color: #409EFF;margin-top: 30px;margin-left: 695px;"></div> -->
			</div>
			</template>

			@@ -244,6 +181,7 @@
			}
			#awatch{
			height: 460px;
			width: 1500px;
			/* margin-top: -60px; */
			}
			</style>