~zhoushihao/YiWuProject.git

			@@ -4,13 +4,16 @@
			import {host, WebSocketHost} from '@/utils/constants'
			import request from "@/utils/request"
			import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
			import dayjs from 'dayjs';
			import {ElMessage, ElMessageBox} from 'element-plus'
			import {useI18n} from 'vue-i18n'
			const router = useRouter()
			const blinda = ref(false)
			const blindb = ref(false)
			const {t} = useI18n()
			let language = ref(localStorage.getItem('lang') \|\| 'zh')
			const tableData = ref([])
			const timeRange = ref([])
			let socket = null;
			const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`;
			const handleMessage = (data) => {
			@@ -37,9 +40,22 @@
			console.error(error);
			}
			}
			// 点击下方弹窗
			const handlehistorical = (row) => {
			blindb.value = true;
			historical()
			};
			// 在组件挂载时设置默认时间范围
			onMounted(() => {
			socket = initializeWebSocket(socketUrl, handleMessage);
			const endTime = dayjs().startOf('minute'); // 当前时间，精确到分钟
			const startTime = endTime.subtract(1, 'day').startOf('minute'); // 当前时间的前一天，精确到分钟
			// 设置时间范围为 [开始时间, 结束时间]
			timeRange.value = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')];
			});
			// onMounted(() => {
			// socket = initializeWebSocket(socketUrl, handleMessage);
			// });
			onUnmounted(() => {
			if (socket) {
			closeWebSocket(socket);
			@@ -52,11 +68,16 @@
			</script>
			<template>
			<div style="height: 500px;">
			<div>
			<img src="../../assets/screen.png" alt="" style="max-width: 48%;max-height: 100%;margin-top: 50px;float: left;">
			<div class="awatch">
			<img src="../../assets/screen.png" alt="Screen" style="max-width: 48%; max-height: 100%; margin-top: 50px; float: left; position: relative;" />
			<div
			class="clickable-area"
			@click="handlehistorical"
			style="position: relative; width: 175px; height: 240px; top: 570px; left: 310px;"
			></div>
			</div>
			<div style="margin-top: 60px;height: 190px;width: 48%;float: right;">
			<el-table height="500" ref="table"
			<div style="height: 190px;width: 48%;float: right;">
			<el-table height="500" ref="table"
			@selection-change="handleSelectionChange"
			:data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
			<el-table-column prop="orderId" align="center" :label="$t('large.orderId')" min-width="50" />
			@@ -85,7 +106,77 @@
			</el-table>
			</div>
			</div>

			<!-- 点击下方弹窗 -->
			<el-dialog v-model="blindb" top="10vh" width="90%">
			<div style="display: flex;">
			<el-select
			:placeholder="$t('basicData.coatingtypes')"
			clearable
			style="width: 270px;margin-left: 10px;"
			v-model="taskStat">
			<el-option
			v-for="item in optionsa"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
			</el-select>
			<span class="demonstration" style="margin-left: 20px;margin-top: 3px;">{{ $t('workOrder.time') }}</span>
			<!-- <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" :start-placeholder="$t('reportmanage.starttime')"
			style="margin-left: 15px;" value-format = "YYYY-MM-DD hh:mm:ss"
			:end-placeholder="$t('reportmanage.endtime')">
			</el-date-picker> -->
			<el-date-picker
			v-model="timeRange"
			type="datetimerange"
			range-separator="至"
			:start-placeholder="$t('reportmanage.starttime')"
			style="margin-left: 15px;"
			value-format="YYYY-MM-DD hh:mm:ss"
			:end-placeholder="$t('reportmanage.endtime')">
			</el-date-picker>
			<el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="sethistorical()">{{
			$t('reportmanage.inquire')
			}}</el-button>
			</div>
			<el-table ref="table" style="margin-top: 20px;height: 650px;" :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
			<el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.intoglassid')" min-width="80" />
			<el-table-column prop="glassIdOut" align="center" :label="$t('searchOrder.outputglassID')" min-width="80" />
			<el-table-column prop="currentCell" align="center" :label="$t('sorter.layernow')" min-width="80" />
			<el-table-column prop="startCell" align="center" :label="$t('processCard.layer')" min-width="120" />
			<el-table-column
			align="center"
			:label="$t('film.taskstatus')"
			min-width="80"
			prop="taskState"
			>
			<template #default="scope">
			<el-tag :type="getStatusTypeb(scope.row.taskState)">
			{{ getStatusTextb(scope.row.taskState) }}
			</el-tag>
			</template>
			</el-table-column>
			<el-table-column
			align="center"
			:label="$t('film.enabletype')"
			min-width="80"
			prop="taskType"
			>
			<template #default="scope">
			<el-tag :type="getStatusTypea(scope.row.taskType)">
			{{ getStatusTexta(scope.row.taskType) }}
			</el-tag>
			</template>
			</el-table-column>
			<el-table-column prop="createTime" align="center" :label="$t('film.createtime')" min-width="120" />
			<el-table-column prop="updateTime" align="center" :label="$t('sorter.updateTime')" min-width="120" />
			</el-table>
			<template #footer>
			<div id="dialog-footer">
			<el-button @click="blindb = false">{{ $t('large.close') }}</el-button>
			</div>
			</template>
			</el-dialog>
			<el-dialog v-model="blinda" top="5vh" width="85%">
			<el-table height="650" ref="table"
			@selection-change="handleSelectionChange"
			@@ -144,6 +235,13 @@
			}
			#awatch{
			height: 460px;
			/* margin-top: -60px; */
			}
			.clickable-area {
			cursor: pointer; /* 指示这是一个可点击的区域 */
			text-align: center; /* 如果需要，可以在div中添加文本并居中 */
			line-height: 95px; /* 如果需要，使文本垂直居中 */
			}
			/* .awatch{
			height: 460px;
			/* max-width: 100%; */
			</style>