~admin/HangZhouMes.git

			@@ -1,186 +1,333 @@
			<template>
			<el-card style="margin-left: 10px; margin-top: 10px; margin-right: 10px;" v-loading="loading">
			<div style="display: flex;">
			<div style="margin-left: 400px; font-size: 20px;">工程号：P20240305001 </div>
			<div style="margin-left: 150px; font-size: 20px;">版图编号：1</div>
			<div style="display: flex;">
			<el-input v-model="inputValue" style="margin-left: 15px;margin-top: 10px;width: 240px" placeholder="请输入工程号" @blur="handleBlur"/>
			<el-pagination
			v-model:current-page="currentPage"
			:page-size="pageSize"
			:size="size"
			:disabled="disabled"
			layout="prev, pager, next, jumper"
			:total="totalPages"
			@current-change="handleCurrentChange"
			/>
			</div>
			<svg width="100%" height="690" xmlns="http://www.w3.org/2000/svg" style="margin-top: -40px;">
			<defs>
			<marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6"
			refY="6" orient="auto">
			<path d="M2,2 L10,6 L2,10 L2,2" style="fill: #911005;" />
			</marker>
			</defs>
			<g v-for="(rack, index) in racks" :key="index">
			<rect
			:x="rack.x"
			:y="rack.y"
			:width="rack.width"
			:height="rack.height"
			:fill="rack.fillColor"
			:data-index="index"
			class="rack-rect"
			style="stroke:#c8c9cc;stroke-width:3;"
			@click="showRectInfo(rack)"
			/>
			<line x1='510' y1='309' x2='260' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
			</line>
			<line x1='850' y1='309' x2='1100' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
			</line>
			<line x1='510' y1='409' x2='260' y2='410' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
			</line>
			<line x1='1200' y1='650' x2='1200' y2='470' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
			</line>
			<text x="370" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-01</text>
			<text x="370" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text>

			<text x="970" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-02</text>
			<text x="970" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text>

			<text x="600" y="500" dominant-baseline="middle" text-anchor="middle">NG2024030501A-03</text>
			<text x="600" y="520" dominant-baseline="middle" text-anchor="middle">800*450</text>


			<text x="1280" y="520" dominant-baseline="middle" text-anchor="middle">NG2024030501A-04</text>
			<text x="1280" y="540" dominant-baseline="middle" text-anchor="middle">400*300</text>
			<g v-for="(item, itemIndex) in rack.items" :key="itemIndex">
			<rect
			:x="calculateItemXPosition(rack, item, itemIndex)"
			:y="calculateItemYPosition(rack, item, itemIndex)"
			:width="item.width"
			:height="item.height"
			:fill="item.fillColor"
			/>
			</g>
			</g>
			</svg>
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
			<el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;">
			<div style="position: relative;">
			<div
			v-for="(rect, index) in adjustedRects"
			:key="rect.glass_id"
			class="rect"
			@click="showDialog(rect.glass_id)"
			:style="{ position: 'absolute',
			top: `${rect.y_axis}px`, left: `${rect.x_axis}px`, width: `${rect.width}px`, height: `${rect.height}px`,
			backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor(rect.glass_state)
			}"
			>
			<!-- 箭头 -->
			<!-- <div id="arrow"></div>
			<div id="line"></div> -->
			<div class="centered-text">
			<div>{{ rect.glass_id }}</div>
			<div>{{ rect.widtha }}*{{ rect.heighta }}</div>
			</div>
			</div>
			</div>
			</el-scrollbar>
			<el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose">
			<el-button :disabled="currentGlassRect?.glass_state === 8 \|\| currentGlassRect?.glass_state === 9" type="warning" plain :icon="Delete" @click="handleDamage(currentGlassId)" style="width: 140px;margin-left: 10px;">
			{{ $t('order.dilapidation') }}
			</el-button>
			<el-button :disabled="currentGlassRect?.glass_state === 9 \|\| currentGlassRect?.glass_state === 8" type="danger" plain @click="handleManualTake(currentGlassId)" style="width: 140px;margin-top: 10px;">
			<el-icon class="el-icon--right"><Upload /></el-icon>
			{{ $t('order.takeaway') }}</el-button>
			</el-dialog>
			</el-card>
			</template>

			<script>
			import Swal from 'sweetalert2'
			import request from "@/utils/request";


			request.get("/TidyUpGlassModule/CurrentCutTerritory").then((res) => {
			if (res.code == 200) {
			console.log(res.data);
			} else {
			ElMessage.warning(res.msg)
			router.push("/login")
			}
			});

			export default {
			data() {
			return {
			loading: false,
			racks: [
			{
			x: 70, y: 126, width: 600, height: 240, fillColor: '#93d2f3',
			items: [
			{ position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456',y: '20'},
			{ position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' },
			{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG12345678' }
			]
			},
			{
			x: 685, y: 126, width: 600, height: 240, fillColor: '#93d2f3',
			items: [
			{ position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
			{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
			{ position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }
			]
			},
			{
			x: 70, y: 380, width: 1100, height: 260, fillColor: '#81b337',
			items: [
			{ position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
			{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
			{ position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }
			]
			},
			{
			x: 1185, y: 380, width: 200, height: 300,fillColor: '#81b337',
			items: [
			{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
			{ position: 'top-right',width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
			{ position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' },
			]
			}

			// Add more racks and items here as needed
			],
			};
			},

			methods: {
			calculateItemXPosition(rack, item, index) {
			if (item.position === 'top-right' \|\| item.position === 'bottom-right') {
			return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
			} else {
			return rack.x;
			}
			},

			calculateItemYPosition(rack, item, index) {
			if (item.position === 'bottom-left' \|\| item.position === 'bottom-right') {
			return Math.min(rack.y + rack.height - item.height, rack.y + rack.height);
			} else {
			return rack.y;
			}
			},

			showCustomAlert(content) {
			Swal.fire({
			// type: 'warning', // 弹框类型
			title: '该片玻璃状态', //标题
			// text: "注销后将无法恢复，请谨慎操作！", //显示内容

			confirmButtonColor: '#3085d6',// 确定按钮的颜色
			confirmButtonText: '人工拿走',// 确定按钮的文字
			showCancelButton: true, // 是否显示取消按钮
			cancelButtonColor: '#d33', // 取消按钮的颜色
			cancelButtonText: "破损", // 取消按钮的文字

			// focusCancel: true, // 是否聚焦取消按钮
			reverseButtons: true // 是否反转两个按钮的位置默认是左边确定右边取消
			}).then((isConfirm) => {
			try {
			//判断是否点击的确定按钮
			if (isConfirm.value) {
			Swal.fire("人工拿走", "点击了人工拿走", "success");
			}
			else {
			Swal.fire("破损", "点击了破损", "error");
			}
			} catch (e) {
			alert(e);
			</template>
			<script setup lang="ts">
			import { Delete, Upload } from '@element-plus/icons-vue'
			import { ElMessage, ElMessageBox } from 'element-plus'
			import { ref, onMounted, onBeforeUnmount,onUnmounted, computed } from 'vue';
			import request from "@/utils/request"
			import { WebSocketHost ,host} from '@/utils/constants'
			import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
			import { useI18n } from 'vue-i18n'
			const { t } = useI18n()
			let language = ref(localStorage.getItem('lang') \|\| 'zh')
			const blind = ref(false)
			const olWidth = ref();
			const olHeight = ref();
			const glass_id = ref();
			const inputValue = ref('');
			const currentGlassId = ref(null); // 存储当前点击矩形的 glass_id
			const currentstate = ref(null);
			const adjustedRects = ref([]);
			const raw = ref([]);
			let webSocket: WebSocket \| null = null;
			const totalPages = ref(0);
			const pageSize = ref(1);
			const currentPage = ref('');
			const disabled = false;
			const size = 'small';
			const rawData = ref([]);
			// const handleBind = (row) => {
			// blind.value = true; // 打开绑定架子对话框
			// };
			// 显示对话框并设置当前 glass_id
			const currentGlassRect = computed(() => {
			return adjustedRects.value.find(rect => rect.glass_id === currentGlassId.value);
			});
			function showDialog(glassId: number) {
			currentGlassId.value = glassId;
			blind.value = true;
			adjustedRects.value = adjustedRects.value.map(rect =>
			rect.glass_id === glassId ? { ...rect, isActive: true } : rect
			);
			}
			const handleDialogClose = () => {
			adjustedRects.value = adjustedRects.value.map(rect => ({
			...rect,
			isActive: false
			}));
			}
			// 破损
			const handleDamage = async () => {
			try {
			const response = await request.post('/cacheGlass/taskCache/identControls', {
			glassId: currentGlassId.value,
			state: 8,
			line: 1001,
			workingProcedure: '切割',
			})
			if (response.code == 200) {
			ElMessage.success(response.message);
			// window.location.reload()
			blind.value = false;
			updateRectStatus(currentGlassId.value, 8);
			findEngineering()
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.msg);
			}
			});
			},

			showRectInfo(rectInfo) {
			const contents = rectInfo.items.map(item => item.content).join(', ');
			this.$nextTick(() => {
			this.showCustomAlert(contents);
			});
			},
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			};
			</script>
			}
			// 人工拿走
			const handleManualTake = async () => {
			try {
			// var url="/cacheGlass/taskCache/identControls?identId="+currentGlassId.value+'&controlsId='+200;
			// console.log(url);
			// const response = await request.post(url)
			const response = await request.post('/cacheGlass/taskCache/identControls', {
			glassId: currentGlassId.value,
			state: 9,
			line: 1001,
			workingProcedure: '切割',
			})
			if (response.code == 200) {
			// 绑定成功，处理逻辑
			ElMessage.success(response.message);
			// window.location.reload()
			blind.value = false;
			updateRectStatus(currentGlassId.value, 9);
			findEngineering()
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.msg);
			}
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			const handleBlur = async () => {
			if (inputValue.value) {
			var url="/cacheGlass/taskCache/cutTerritory?current="+inputValue.value;
			const response = await request.post(url)
			if (response.code === 200) {
			const rawRects = response.data[0];
			rawData.value = response.data;
			totalPages.value = rawData.value.length;
			const scaleFactor = 1621.78/6000;
			const scaleFactory = 750/3300;
			adjustedRects.value = rawRects.map(rect => ({
			...rect,
			x_axis: (6000 -(rect.x_axis + rect.width)) * scaleFactor,
			y_axis: rect.y_axis * scaleFactory,
			width: rect.width * scaleFactor ,
			widtha: rect.width ,
			heighta: rect.height ,
			height: rect.height * scaleFactory,
			glass_state: rect.glass_state
			}));
			// 如果WebSocket已连接，则关闭
			if (webSocket) {
			webSocket.close();
			webSocket = null;
			}
			currentPage.value = 1;
			}
			} else{
			connectWebSocket();
			}
			};
			const findEngineering = async () => {
			if (inputValue.value) {
			var url="/cacheGlass/taskCache/cutTerritory?current="+inputValue.value;
			const response = await request.post(url)
			if (response.code === 200) {
			rawData.value = response.data;
			}
			} else{
			}
			};

			<style scoped>
			.glass-rack {
			width: 100%;
			height: 80vh;
			const handleCurrentChange = (val: number) => {
			currentPage.value = val;
			// window.localStorage.setItem('pagenumber', currentPage.value).
			const page = currentPage.value - 1
			const scaleFactor = 1621.78/6000;
			const scaleFactory = 750/3300;
			adjustedRects.value = rawData.value[page]?.map(rect => ({
			// adjustedRects.value = rawRects.map(rect => ({
			...rect,
			x_axis: (6000 -(rect.x_axis + rect.width)) * scaleFactor,
			y_axis: rect.y_axis * scaleFactory,
			width: rect.width * scaleFactor ,
			widtha: rect.width ,
			heighta: rect.height ,
			height: rect.height * scaleFactory,
			glass_state: rect.glass_state
			}));
			};
			function getRectColor(state: number): string {
			switch (state) {
			case 0:
			return '#e1f3d8';
			case 100:
			return '#c8c9cc';
			case 110:
			return '#b3e19d';
			case 120:
			return '#f89898';
			case 8:
			return '#911005';
			case 9:
			return '#f3d19e';
			}
			}
			.rack-rect:hover {
			cursor: pointer;
			// 更新矩形状态
			function updateRectStatus(glassId: string, status: number) {
			adjustedRects.value.forEach(rect => {
			if (rect.glass_id === glassId) {
			rect.glass_state = status; // 更新矩形的状态
			}
			});
			}
			.custom-popover-class {
			background-color: lightgrey;
			color: black;
			border: 1px solid black;
			const connectWebSocket = () => {
			if (!webSocket) {
			const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
			webSocket = new WebSocket(socketUrl);
			webSocket.onmessage = (event) => {
			const data = JSON.parse(event.data);
			const scaleFactor = 1621.78/6000;
			const scaleFactory = 750/3300;
			if (data.currentCutTerritory && data.currentCutTerritory.length > 0) {
			const newRects = data.currentCutTerritory[0].map(rect => {
			const existingRect = adjustedRects.value.find(r => r.glass_id === rect.glass_id);

			if (existingRect) {
			return {
			...existingRect,
			x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor,
			y_axis: rect.y_axis * scaleFactory,
			width: rect.width * scaleFactor,
			height: rect.height * scaleFactory,
			widtha: rect.width,
			heighta: rect.height,
			glass_state: rect.glass_state,
			// 保持 isActive 状态不变
			};
			} else {
			// 如果不存在，则添加新矩形，默认 isActive 为 false
			return {
			...rect,
			x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor,
			y_axis: rect.y_axis * scaleFactory,
			width: rect.width * scaleFactor,
			height: rect.height * scaleFactory,
			widtha: rect.width,
			heighta: rect.height,
			glass_state: rect.glass_state,
			isActive: false,
			glass_id: rect.glass_id,
			};
			}
			});
			adjustedRects.value = newRects;
			} else if (data.currentCutTerritory == '') {
			adjustedRects.value = [];
			}
			};
			}
			};
			onMounted(() => {
			// 初始时，如果输入框为空，则连接WebSocket
			if (!inputValue.value) {
			connectWebSocket();
			}
			});

			onUnmounted(() => {
			if (webSocket) {
			webSocket.close();
			}
			});
			</script>

			<style scoped>
			.rect {
			border: 1px solid black; /* 设置矩形的边框 */
			/* background-color: lightblue; 设置矩形的背景色 */
			}
			.centered-text {
			/* 设置文字居中样式 */
			/* display: flex; */
			justify-content: center;
			align-items: center;
			height: 100%; /* 确保div占据整个矩形的高度 */
			font-size: small;
			}
			</style>
			#rect {
			position: relative; /* 确保箭头可以相对于矩形定位 */
			/* 其他样式 */
			}

			#arrow {
			position: absolute;
			top: 70%; /* 箭头位于矩形中间 */
			left: 200px; /* 箭头在矩形左侧一些距离 */
			transform: translateY(-50%); /* 垂直居中 */
			width: 0;
			height: 0;
			border-top: 10px solid transparent; /* 上边框 */
			border-bottom: 10px solid transparent; /* 下边框 */
			border-right: 20px solid #911005; /* 右边框，形成箭头 */
			/* 根据需要调整边框大小和颜色 */
			}

			#line {
			position: absolute;
			top: 70%; /* 直线位于矩形中间 */
			left: 210px; /* 直线在箭头右侧一些距离 */
			transform: translateY(-50%); /* 垂直居中 */
			height: 2px; /* 直线的高度 */
			width: 240px; /* 直线的长度，根据需要调整 */
			background-color: #911005; /* 直线的颜色 */
			}

			</style>