YiWuProject.git

			@@ -1,82 +1,34 @@
			<script setup>
			import {Search} from "@element-plus/icons-vue";
			import {reactive, onMounted} from "vue";
			import {reactive, onMounted, onBeforeUnmount} 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 flowCardId = ref('');
			const flowCardOptions = ref([]);


			const flowCardOptions = ref('[]');
			const tableData = reactive([]);
			// 方法
			const handleSelectionChange = () => {
			// 处理表格行选择事件
			@@ -84,15 +36,10 @@

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

			// 发起接口请求获取流程卡号
			fetchFlowCardId();


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



			//获取流程卡号
			const fetchFlowCardId = async () => {
			@@ -100,8 +47,12 @@
			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) {
			@@ -120,7 +71,9 @@
			if (response.code == 200) {
			// 绑定成功，处理逻辑
			console.log('绑定成功');

			ElMessage.success(response.message);
			updatePageData();
			dialogFormVisiblea.value = false;
			} else {
			// 请求失败，显示错误消息
			@@ -133,13 +86,16 @@
			};


			const updatePageData = () => {
			// 假设你的页面上有一个名为 tableData 的 Vue 组件
			// 你可以直接更新 tableData 的数据
			fetchTableData()
			// 使用 $forceUpdate() 强制更新组件

			};

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




			dialogFormVisiblea2.value = true; // 打开绑定架子对话框
			};
			//清除内容
			@@ -171,9 +127,6 @@
			};



			const tableData = reactive([]);

			// 发送获取表格数据的请求
			const fetchTableData = async () => {
			try {
			@@ -196,89 +149,36 @@
			};


			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(); // 获取数据
			initializeWebSocket(socketUrl, handleMessage);
			});

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

			// beforeUnmount(() => {
			// closeWebSocket();
			// });


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

			const open = () => {
			ElMessageBox.confirm(
			'是否删除该条信息?',
			'提示',
			{
			confirmButtonText: '是',
			cancelButtonText: '取消',
			type: 'warning',
			}
			)
			.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
			}
			case 'delete':{
			alert('我接收到子组件传送的删除信息')
			break
			}
			}
			}

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





			</script>
			@@ -290,18 +190,27 @@
			<el-table height="100%" 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="120" />
			<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="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="success" >{{ 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>
			@@ -309,15 +218,15 @@
			</el-card>


			<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,9 +236,9 @@
			<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>
			@@ -337,14 +246,14 @@



			<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>