YiWuProject.git

			@@ -1,107 +1,54 @@
			<script setup>
			import {Search} from "@element-plus/icons-vue";
			import {reactive, onMounted} from "vue";
			import {reactive, onMounted, onBeforeUnmount,onUnmounted} from "vue";
			import {useRouter} from "vue-router"
			const router = useRouter()

			import { useI18n } from 'vue-i18n'
			const { t } = useI18n()
			let language = ref(localStorage.getItem('lang') \|\| 'zh')
			import { ref } from 'vue'
			import { ElMessage, ElMessageBox } from 'element-plus'
			import Landingindication from "./Landingindication.vue";
			import Landingindicationtwo from "./Landingindicationtwo.vue";
			import request from "@/utils/request";
			import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
			import { WebSocketHost ,host} from '@/utils/constants'
			const dialogFormVisiblea = ref(false)



			const dialogFormVisiblea2 = ref(false)





			let socket;


			const initWebSocket = (token) =>{ //初始化we

			let viewname = "unloadglass";

			if (typeof WebSocket === "undefined") {
			console.log("您的浏览器不支持WebSocket");
			} else {
			let socketUrl = "ws://" + "localhost"+":88" + "/api/talk/" + viewname;
			if (socket != null) {
			socket.close();
			socket = null;
			}

			// 开启一个websocket服务
			socket = new WebSocket(socketUrl);

			// 打开事件
			socket.onopen = function () {
			console.log("websocket已打开");
			};



			socket.onmessage = (msg) => {
			if (!msg.data) {
			return; // 如果收到空数据，则直接返回，不执行后续逻辑
			}

			let obj = JSON.parse(msg.data);


			console.log('收到消息：', obj.data);

			}

			}
			}




			// 数据
			const loading = ref(false);


			// 弹框显示控制

			const dialogFormVisible = ref(false);

			// 表单数据
			const workstationId = ref('');
			const selectedProjectNoa = ref(null); // 当前选中的角色
			const flowCardId = ref('');
			const flowCardOptions = ref([]);


			const flowCardOptions = ref('[]');
			const tableData = reactive([]);
			// 方法
			const handleSelectionChange = () => {
			// 处理表格行选择事件
			};

			const handleBindRack = (row) => {
			workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名

			console.log(row.flowCardId);
			flowCardId.value = row.flowCardId;
			// 发起接口请求获取流程卡号
			fetchFlowCardId();


			dialogFormVisiblea.value = true; // 打开绑定架子对话框
			};



			//获取流程卡号
			const fetchFlowCardId = async () => {
			try {
			const response = await request.get('unLoadGlass/downWorkStation/getflowCardId');
			console.log(response)
			if (response.code === 200) {
			flowCardOptions.value = response.data.map(item => ({ flowcard_id: item.flow_card_id }));
			} else {

			flowCardOptions.value = response.data.filter(item => item !== null)
			.map(item => ({ flowcard_id: item.flow_card_id }));
			console.log(flowCardOptions.value);
			}
			else {
			ElMessage.error(response.msg);
			}
			} catch (error) {
			@@ -111,16 +58,20 @@
			//确认
			const handleConfirm = async () => {
			try {
			const firstPart = flowCardId.value.split('\|')[0].trim(); //
			const twoPart = flowCardId.value.split('\|')[1].trim(); //
			const response = await request.post('unLoadGlass/downWorkStation/updateFlowCardId', {
			workstationId: workstationId.value,
			flowCardId: flowCardId.value
			flowCardId: firstPart,
			layer:twoPart
			});

			console.log(response)
			if (response.code == 200) {
			// 绑定成功，处理逻辑
			console.log('绑定成功');

			ElMessage.success(response.message);
			updatePageData();
			dialogFormVisiblea.value = false;
			} else {
			// 请求失败，显示错误消息
			@@ -131,15 +82,14 @@
			console.error(error);
			}
			};



			const updatePageData = () => {
			// 假设你的页面上有一个名为 tableData 的 Vue 组件
			// 你可以直接更新 tableData 的数据
			fetchTableData()
			// 使用 $forceUpdate() 强制更新组件
			};
			const handleBindRack2 = (row) => {
			workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名




			dialogFormVisiblea2.value = true; // 打开绑定架子对话框
			};
			//清除内容
			@@ -156,7 +106,7 @@
			console.log('清除成功');
			ElMessage.success(response.message);
			dialogFormVisiblea2.value = false;
			} else if (response.code === 400) {
			} else if (response.code === 500) {
			// 清除失败的逻辑
			console.log('清除失败');
			console.log(response.message); // 打印服务器返回的错误信息
			@@ -169,11 +119,6 @@
			dialogFormVisiblea2.value = false;
			}
			};



			const tableData = reactive([]);

			// 发送获取表格数据的请求
			const fetchTableData = async () => {
			try {
			@@ -194,130 +139,138 @@
			ElMessage.error('获取表格数据失败，请重试');
			}
			};




			initWebSocket();
			onMounted(fetchTableData);
			// setInterval(fetchTableData, 2000)

			const open = () => {
			ElMessageBox.confirm(
			'是否删除该条信息?',
			'提示',
			{
			confirmButtonText: '是',
			cancelButtonText: '取消',
			type: 'warning',
			let socket = null;
			const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass`;
			// 定义消息处理函数，更新 receivedData 变量
			const handleMessage = (data) => {
			// 更新 tableData 的数据
			tableData.splice(0, tableData.length, ...data.params[0]);
			// console.log("更新后数据", data.params[0]);
			};
			// 初始化 WebSocket，并传递消息处理函数
			onMounted(() => {
			fetchFlowCardId();
			fetchTableData(); // 获取数据
			socket = initializeWebSocket(socketUrl, handleMessage);
			});
			onUnmounted(() => {
			if (socket) {
			closeWebSocket(socket);
			}
			)
			.then(() => {
			ElMessage({
			type: 'success',
			message: '删除成功！',
			})
			})
			.catch(() => {
			ElMessage({
			type: 'info',
			message: '删除失败',
			})
			})
			}
			const getTableRow = (row,type) =>{
			switch (type) {
			case 'edit' :{
			//alert('我接收到子组件传送的编辑信息')
			router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
			break
			});
			onBeforeUnmount(() => {
			console.log("关闭了")
			closeWebSocket();
			});


			const getTagType =(status) => {
			return status === 1 ? 'success' : 'danger';
			// 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）
			}
			case 'delete':{
			alert('我接收到子组件传送的删除信息')
			break
			}

			const toggleStatus = (row) => {
			// 切换料架状态的逻辑
			row.enableState = 1 - row.enableState; // Toggle between 0 and 1
			// 此处可以添加保存状态的逻辑，比如调用 API 更新数据
			updateRowStatus(row);
			};

			const updateRowStatus = async (row) => {
			try {
			// 假设你的后端 API 接收 PUT 请求，并且需要传递 row.id 和 row.enableState 参数


			const response = await request.post('unLoadGlass/downWorkStation/updateDownWorkstation', {
			enableState: row.enableState,
			id: row.id


			});
			console.log('Updated row status:', response.data);
			// 可以根据后端返回的数据进行进一步处理，比如更新本地状态等
			} catch (error) {
			console.error('Error updating row status:', error);
			// 处理错误情况，比如提示用户更新失败
			}
			}

			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',
			}
			],
			})
			};







			// beforeUnmount(() => {
			// closeWebSocket();
			// });
			// setInterval(fetchTableData, 2000)
			</script>

			<template>
			<div>
			<el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
			<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 200px;">
			<el-table height="100%" ref="table"
			<el-card style="flex: 1;" v-loading="loading">
			<el-card style="flex: 1;margin-left: 4px;margin-top: 1px;" v-loading="loading">
			<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
			<el-table height="200px" ref="table"
			@selection-change="handleSelectionChange"
			:data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
			<el-table-column prop="workstationId" align="center" label="下片位" min-width="80" />
			<el-table-column prop="workstationId" align="center" label="架号" min-width="120" />
			<el-table-column prop="flowCardId" align="center" label="流程卡号" min-width="120" />
			<el-table-column prop="totalquantity" align="center" label="总数量" min-width="120" />
			<el-table-column prop="racksnumber" align="center" label="已落架数量" min-width="120" />
			<el-table-column prop="work_state" align="center" label="状态" min-width="120" />
			<el-table-column prop="deviceId" align="center" label="设备号" min-width="120" />
			<el-table-column prop="enableState" align="center" label="启用状态" min-width="120" />
			<el-table-column fixed="right" label="操作" align="center" width="200">
			<el-table-column prop="workstationId" align="center" :label="$t('reportWork.lowerbit')" min-width="80" />
			<el-table-column prop="workstationId" align="center" :label="$t('reportWork.shelfnumber')" min-width="120" />
			<el-table-column prop="flowCardId" align="center" :label="$t('reportWork.cardnumber')" min-width="150" />
			<el-table-column prop="totalQuantity" align="center" :label="$t('reportWork.totalquantity')" min-width="120" />
			<el-table-column prop="racksNumber" align="center" :label="$t('reportWork.beendropped')" min-width="120" />
			<el-table-column prop="layer" align="center" label="层数" min-width="120" />
			<el-table-column prop="otherNumber" align="center" label="人工下片数" min-width="120" />
			<!-- <el-table-column prop="work_state" align="center" :label="$t('reportWork.state')" min-width="120" /> -->
			<el-table-column prop="deviceId" align="center" :label="$t('reportWork.devicenumber')" min-width="120" />
			<el-table-column
			align="center"
			:label="$t('reportWork.startstatus')"
			min-width="80"
			prop="enableState"
			>
			<template #default="scope">

			<el-tag :type="getTagType(scope.row.enableState)" @click="toggleStatus(scope.row)">
			{{ scope.row.enableState === 1 ? $t('reportWork.enable') : $t('reportWork.unenable') }}
			</el-tag>
			</template>
			</el-table-column>
			<el-table-column fixed="right" :label="$t('reportWork.operate')" align="center" width="200">
			<template #default="scope">
			<el-button size="mini" type="text" plain v-show="scope.row.enableState !== '已启用' " @click="handleBindRack(scope.row)">绑定架子</el-button>
			<el-button size="mini" type="text" plain @click="handleBindRack2(scope.row)">清空</el-button>
			<el-button size="mini" type="text" plain v-show="scope.row.enableState !== '已启用' " @click="handleBindRack(scope.row)">{{ $t('reportWork.bindingshelves') }}</el-button>
			<el-button size="mini" type="text" plain @click="handleBindRack2(scope.row)">{{ $t('reportWork.clear') }}</el-button>
			</template>
			</el-table-column>
			</el-table>
			</div>
			</el-card>
			<!-- workstationId: '1',
			workstationId: '1005',
			flowCardId: '183.6',
			totalquantity: '1991',
			racksnumber:"1",
			work_state: '待识别', -->
			<div style="display: flex;" class="awatch">
			<div id="main-body">
			<Landingindication></Landingindication>
			</div>
			<div id="main-bodya">
			<Landingindicationtwo></Landingindicationtwo>
			</div>
			</div>
			</el-card>
			</div>


			<el-dialog v-model="dialogFormVisiblea" top="21vh" width="30%" title="绑定架子" >
			<el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" :title="$t('reportWork.bindingshelves')">
			<div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
			<el-form size="mini" label-width="150px">
			<el-form label-width="100px" label-position="right">
			<el-form-item label="架号：" :required="true" style="width: 18vw">
			<el-form size="mini" label-width="100px">
			<el-form label-width="210px" label-position="right">
			<el-form-item :label="$t('reportWork.shelfnumbera')" :required="true" style="width: 25vw">
			<el-input v-model="workstationId" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="流程卡号：" :required="true" style="width: 18vw;">
			<el-select v-model="flowCardId" placeholder="请选择流程卡号">
			<el-form-item :label="$t('reportWork.cardnumbera')" :required="true" style="width: 25vw;">
			<el-select v-model="flowCardId" :placeholder="$t('reportWork.incardnumber')">
			<el-option v-for="item in flowCardOptions" :key="item.flowcard_id" :label="item.flowcard_id" :value="item.flowcard_id" />
			</el-select>
			</el-form-item>
			@@ -327,47 +280,24 @@
			<template #footer>
			<div id="dialog-footer">
			<el-button type="primary" @click="handleConfirm">
			确认
			{{ $t('reportWork.sure') }}
			</el-button>
			<el-button @click="dialogFormVisiblea = false">取消</el-button>
			<el-button @click="dialogFormVisiblea = false">{{ $t('reportWork.cancel') }}</el-button>
			</div>
			</template>
			</el-dialog>




			<el-dialog v-model="dialogFormVisiblea2" top="21vh" width="30%" title="清除架子玻璃" >

			<el-dialog v-model="dialogFormVisiblea2" top="21vh" width="30%" :title="$t('reportWork.clearglass')">
			<template #footer>
			<div id="dialog-footer">
			<el-button type="primary" @click="handleclear">
			确认
			{{ $t('reportWork.sure') }}
			</el-button>
			<el-button @click="dialogFormVisiblea2 = false">取消</el-button>
			<el-button @click="dialogFormVisiblea2 = false">{{ $t('reportWork.cancel') }}</el-button>
			</div>
			</template>
			</el-dialog>


			<!-- workstationId: '1',
			workstationId: '1005',
			flowCardId: '183.6',
			totalquantity: '1991',
			racksnumber:"1",
			work_state: '待识别', -->
			</div>
			<div style="display: flex;">
			<div id="main-body">
			<Landingindication></Landingindication>
			</div>
			<div id="main-bodya">
			<Landingindicationtwo></Landingindicationtwo>
			</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{
			@@ -383,15 +313,15 @@
			background-color: #337ecc;
			margin-left: 28%;
			}
			#awatch{
			height: 450px;
			.awatch{
			max-width: 100%;
			}
			#main-body{
			margin-top: -20px;
			margin-left: 300px;
			margin-top: -40px;
			margin-left: 150px;
			}
			#main-bodya{
			margin-top: -10px;
			margin-top: -40px;
			margin-left: 100px;
			}
			</style>