From 71594bd2dc9201834aa533099e9e49a9b84506cd Mon Sep 17 00:00:00 2001 From: wangfei <3597712270@qq.com> Date: 星期四, 12 六月 2025 15:32:25 +0800 Subject: [PATCH] 新增韩语 --- UI-Project/src/views/Caching/cachingbefore.vue | 564 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 475 insertions(+), 89 deletions(-) diff --git a/UI-Project/src/views/Caching/cachingbefore.vue b/UI-Project/src/views/Caching/cachingbefore.vue index f97f343..278efc3 100644 --- a/UI-Project/src/views/Caching/cachingbefore.vue +++ b/UI-Project/src/views/Caching/cachingbefore.vue @@ -1,143 +1,528 @@ <script setup> -import {onBeforeUnmount, onMounted, onUnmounted, ref} from "vue"; +import {onBeforeUnmount, onMounted, onUnmounted, ref, reactive} from "vue"; import {useRouter} from "vue-router" import {host, WebSocketHost} from '@/utils/constants' +import dayjs from 'dayjs'; import request from "@/utils/request" import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService'; import {ElMessage, ElMessageBox} from 'element-plus' import {useI18n} from 'vue-i18n' +import { inject } from 'vue'; +const globalDate = inject('globalDate'); const {t} = useI18n() let language = ref(localStorage.getItem('lang') || 'zh') -const tableData = ref([]) -const slot = ref('') +const tableDataa = ref([]) +const tableDatab = ref([]) +const tableDatad = ref([]) const adjustedRects = ref([]); -onMounted(async () => { - try { - const response = await request.post('/cacheGlass/edgStorageCage/selectEdgStorageCage'); - if (response.code === 200) { - const rawRects = response.data; - tableData.value = response.data - adjustedRects.value = rawRects.map(rect => ({ - ...rect, - width: rect.width * 0.5 , - id: rect.id * 10, - })); - } 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) => { +const selectValuesa = reactive([]); +const timeRange = ref([]) +const taskState = ref('') +const taskStat = ref('') +const taskType = ref('') +const glassId = ref('') +const blindb = ref(false) +let socket = null; +const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlassOne`; +const handleMessage = (data) => { + const cageInfo = data.taskMessage[0]; + if (cageInfo && cageInfo.createTime) { + cageInfo.formattedCreateTime = formatTimestamp(cageInfo.createTime); + } + if (cageInfo && cageInfo.updateTime) { + cageInfo.formattedupdateTime = formatTimestamp(cageInfo.updateTime); + } + tableDataa.value = data.EdgStorageCageinfos[0] + tableDatab.value = data.taskMessage + adjustedRects.value = data.EdgStorageCageinfos[0].map((rect, index) => ({ + ...rect, + id: rect.id * 9, + showRect: !!data.EdgStorageCageinfos[0][index]?.details[0] + })); + }; +// 鏍煎紡鍖栧悗绔椂闂村苟璁$畻涓�鍛ㄥ墠鐨勬椂闂� +const defaultTime = ref<[Date, Date]>([new Date(), new Date()]); +function parseAndSetTime() { + const backendTime = new Date(globalDate); + const oneWeekAgo = new Date(backendTime.getTime() - 7 * 24 * 60 * 60 * 1000); // 鍑忓幓7澶� + oneWeekAgo.setHours(0, 0, 0, 0); + timeRange.value = [formatTimestamp(oneWeekAgo), formatTimestamp(backendTime)]; + window.localStorage.setItem('startTime', formatTimestamp(oneWeekAgo)) +} + onMounted(() => { + socket = initializeWebSocket(socketUrl, handleMessage); + parseAndSetTime(); +}); +// 鍘嗗彶浠诲姟 +const iframeUrl = ref(''); +const handlehistorical = (row) => { + blindb.value = true; + iframeUrl.value = `${window.location.origin}/#/Caching/cachingbeforehistory`; +}; +// 鍘嗗彶浠诲姟 +// const historical = async () => { +// try { +// let startTime = window.localStorage.getItem('startTime') +// var url="/cacheGlass/edgStorageDeviceTaskHistory?deviceId="+1 + "&startTime=" + startTime + "&endTime=" + globalDate + "&glassId=" + '' + "&taskState=" + '' + "&taskType=" + ''; +// const response = await request.get(url) +// if (response.code == 200) { +// ElMessage.success(response.message); +// tableDatad.value = response.data; +// } else { +// ElMessage.error(response.message); +// } +// } +// catch (error) { +// console.error(error); +// } +// } +const sethistorical = async () => { + try { + const params = { + deviceId: 1, + startTime: (timeRange.value && timeRange.value[0]) || '', + endTime: (timeRange.value && timeRange.value[1]) || '', + glassId: glassId.value || '', + taskState: taskStat.value, + taskType: taskType.value || '' + }; + // 鏋勫缓鏌ヨ瀛楃涓� + const queryString = new URLSearchParams(params).toString(); + const url = `/cacheGlass/edgStorageDeviceTaskHistory?${queryString}`; + const response = await request.get(url) + if (response.code == 200) { + ElMessage.success(response.message); + tableDatad.value = response.data; + } else { + ElMessage.error(response.message); + } +} +catch (error) { + } +} +// 鐮存崯 + const handletake = async(row) => { try { const confirmResult = await ElMessageBox.confirm( - t('sorter.information'), - t('sorter.prompt'), + t('workOrder.messagedamaged'), + t('workOrder.prompt'), { - confirmButtonText: t('sorter.yes'), - cancelButtonText: t('sorter.cancel'), + confirmButtonText: t('workOrder.yes'), + cancelButtonText: t('workOrder.cancel'), type: 'warning', } - ); - if (confirmResult === 'confirm') { - var url="/cacheGlass/edgStorageCage/edgStorageCageGlass?edgStorageCageId="+row.id; - const response = await request.post(url, { - glassId:row.glass_id + ); + if (confirmResult === 'confirm') { + const response = await request.post("/cacheGlass/edgStorageCageDetails/edgDetailsOperate", { + glassId: row.glassId, + state: 8, + line: 1, + workingProcedure: '鐞嗙墖绗�', }) if (response.code === 200) { ElMessage.success(response.message); - } else { + } else { ElMessage.error(response.msg); } } - } catch (error) { - console.error('鍙戠敓閿欒:', error); + } catch (error) { } -}; -let socket = null; -const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`; -const handleMessage = (data) => { - tableData.value = data.EdgStorageCageinfos[0] - adjustedRects.value = data.EdgStorageCageinfos[0].map(rect => ({ - ...rect, - width: rect.width * 0.5 , - id: rect.id * 10, - })); +}; +// 鎷胯蛋 + const handleBindRack = async(row) => { + try { + const confirmResult = await ElMessageBox.confirm( + t('workOrder.takemessage'), + t('workOrder.prompt'), + { + confirmButtonText: t('workOrder.yes'), + cancelButtonText: t('workOrder.cancel'), + type: 'warning', + } + ); + if (confirmResult === 'confirm') { + const response = await request.post("/cacheGlass/edgStorageCageDetails/edgDetailsOperate", { + glassId: row.glassId, + state: 9, + line: 1, + workingProcedure: '鐞嗙墖绗�', + }) + if (response.code === 200) { + ElMessage.success(response.message); + } else { + ElMessage.error(response.msg); + } + } + } catch (error) { + } +}; +// 浠诲姟閲嶇疆 +const handleptask = async() => { + try { + const confirmResult = await ElMessageBox.confirm( + t('searchOrder.partasks'), + t('workOrder.prompt'), + { + confirmButtonText: t('workOrder.yes'), + cancelButtonText: t('workOrder.cancel'), + type: 'warning', + } + ); + if (confirmResult === 'confirm') { + var url="/cacheGlass/edgStorageDeviceTask/resetTask?deviceId="+ 1; + const response = await request.post(url) + if (response.code === 200) { + ElMessage.success(response.message); + } else { + ElMessage.error(response.msg); + } + } + } catch (error) { + } }; -// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁� -onMounted(() => { - socket = initializeWebSocket(socketUrl, handleMessage); -}); +// 浠诲姟鎴愬姛澶勭悊 +const successfull = async() => { + try { + const confirmResult = await ElMessageBox.confirm( + t('searchOrder.psuccessfullyprocessed'), + t('workOrder.prompt'), + { + confirmButtonText: t('workOrder.yes'), + cancelButtonText: t('workOrder.cancel'), + type: 'warning', + } + ); + if (confirmResult === 'confirm') { + var url="/cacheGlass/edgStorageDeviceTask/taskSuccess?deviceId="+ 1; + const response = await request.post(url) + if (response.code === 200) { + ElMessage.success(response.message); + } else { + ElMessage.error(response.msg); + } + } + } catch (error) { + } +}; + // 鍒犻櫎 + const handledelete = async(row) => { + try { + const confirmResult = await ElMessageBox.confirm( + t('searchOrder.deletemessage'), + t('searchOrder.prompt'), + { + confirmButtonText: t('searchOrder.yes'), + cancelButtonText: t('searchOrder.cancel'), + type: 'warning', + } + ); + if (confirmResult === 'confirm') { + const response = await request.post("/cacheGlass/edgStorageCageDetails/removeEdgDetails?glassId="+encodeURIComponent(row.glassId)) + if (response.code === 200) { + ElMessage.success(response.message); + } else { + ElMessage.error(response.message); + } + } + } catch (error) { + } +}; +const rowClassName = ({ row }) => { + // 鏍规嵁 enableState 璁剧疆琛岀殑 CSS 绫� + return row.slot % 2 === 0 ? 'success-row' : ''; +}; +// 鏍峰紡閮ㄥ垎 +const styles = ` + .success-row { + --el-table-tr-bg-color: var(--el-color-info-light-9); + } +`; +// 鍔ㄦ�佹坊鍔犳牱寮忓埌缁勪欢 +const styleElement = document.createElement('style'); +styleElement.textContent = styles; +document.head.appendChild(styleElement); + +const optionsa = [ + { + value: 0, + label: t('hellow.starttask'), + }, + { + value: 1, + label: t('searchOrder.endtask'), + } +] +const optionsb = [ + { + value: 1, + label: t('sorter.advancetask'), + }, + { + value: 2, + label: t('sorter.outputtasks'), + }, + { + value: 3, + label: t('sorter.straighttasks'), + } +] +function getStatusTypea(taskType) { + switch (taskType) { + case 1: + return 'info'; + case 2: + return 'success'; + case 3: + return 'danger'; + } +} +function getStatusTexta(taskType) { + switch (taskType) { + case 1: + return t('sorter.advancetask'); + case 2: + return t('sorter.outputtasks'); + case 3: + return t('sorter.straighttasks'); + } +} +function getStatusTypeb(taskState) { + switch (taskState) { + case 0: + return 'info'; + case 1: + return 'success'; + } +} +function getStatusTextb(taskState) { + switch (taskState) { + case 0: + return t('hellow.starttask'); + case 1: + return t('searchOrder.endtask'); + } +} +// 鏍煎紡鍖栨椂闂存埑涓哄勾鏈堟棩鏃堕棿瀛楃涓茬殑鍑芥暟 +function formatTimestamp(timestamp) { + const date = new Date(timestamp); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞1锛屽苟琛ラ浂 + const day = String(date.getDate()).padStart(2, '0'); // 琛ラ浂 + const hours = String(date.getHours()).padStart(2, '0'); // 琛ラ浂锛堝鏋滈渶瑕佹樉绀烘椂闂达級 + const minutes = String(date.getMinutes()).padStart(2, '0'); // 琛ラ浂锛堝鏋滈渶瑕佹樉绀烘椂闂达級 + const seconds = String(date.getSeconds()).padStart(2, '0'); // 琛ラ浂锛堝鏋滈渶瑕佹樉绀烘椂闂达級 + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} onUnmounted(() => { if (socket) { closeWebSocket(socket); } }); onBeforeUnmount(() => { - console.log("鍏抽棴浜�") closeWebSocket(); }); </script> <template> <div style="height: 500px;"> - <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> - <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> - <el-table height="340" ref="table" - @selection-change="handleSelectionChange" - :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> - <el-table-column prop="slot" align="center" :label="$t('sorter.gridnumber')" min-width="80" /> - <el-table-column prop="glass_id" align="center" :label="$t('sorter.glassnumber')" min-width="80" /> - <el-table-column prop="width" align="center" :label="$t('sorter.width')" min-width="120" /> - <el-table-column prop="height" align="center" :label="$t('sorter.height')" min-width="120" /> + <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;"> + <el-button style="margin-bottom: 15px;margin-left: 20px;" @click="handlehistorical" type="primary">{{ $t('searchOrder.historicaltasks') }}</el-button> + <el-button style="margin-bottom: 15px;margin-left: 20px;" @click="handleptask()" type="warning">{{ $t('searchOrder.partask') }}</el-button> + <el-button style="margin-bottom: 15px;margin-left: 20px;" @click="successfull()" type="success">{{ $t('searchOrder.successfullyprocessed') }}</el-button> + <div style="position: relative; width: 100%; height: 100%;"> <!-- 娣诲姞鐩稿瀹氫綅 --> + <div style="position: absolute; margin-top: 28px; left: 400px; display: flex; z-index: 10;"> + <div>{{ $t('searchOrder.projectnumber') }}</div> + <div style="margin-left: 135px;">{{ $t('hellow.flowCardId') }}</div> + <div style="margin-left: 152px;">{{ $t('searchOrder.glassID') }}</div> + <div style="margin-left: 135px;">{{ $t('searchOrder.width') }}</div> + <div style="margin-left: 169px;">{{ $t('searchOrder.height') }}</div> + <div style="margin-left: 162px;">{{ $t('searchOrder.thickness') }}</div> + <div style="margin-left: 135px;">{{ $t('hellow.operate') }}</div> + </div> + <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> + <el-table + ref="table" + style="margin-top: 20px; height: 300px;" + :data="tableDataa" + :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }" + row-key="id" + > + <el-table-column prop="slot" align="center" :label="$t('sorter.gridnumber')" min-width="10" /> <el-table-column align="center" :label="$t('sorter.startstatus')" + min-width="10" + prop="enableState" + > + <template #default="scope"> + <el-tag + :type="scope.row.enableState === 1 ? 'success' : 'warning'" + > + {{ scope.row.enableState === 1 ? $t('sorter.start') : $t('sorter.disable') }} + </el-tag> + </template> + </el-table-column> + <el-table-column> + <template #default="props"> + <el-table + :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }" + :data="props.row.details" style="width: 100%;height: 70px;"> + <el-table-column prop="engineerId" align="center" min-width="80" /> + <el-table-column prop="flowCardId" align="center" min-width="80" /> + <el-table-column prop="glassId" align="center" min-width="80" /> + <el-table-column prop="width" align="center" min-width="80" /> + <el-table-column prop="height" align="center" min-width="80" /> + <el-table-column prop="thickness" align="center" min-width="80" /> + <el-table-column fixed="right" align="center" width="150"> + <template #default="scope"> + <el-button type="text" plain @click="handletake(scope.row)">{{ $t('searchOrder.breakage') }}</el-button> + <el-button type="text" plain @click="handleBindRack(scope.row)">{{ $t('searchOrder.takeout')}} </el-button> + <el-button type="text" plain @click="handledelete(scope.row)">{{ $t('searchOrder.delete')}} </el-button> + </template> + </el-table-column> + </el-table> + </template> + </el-table-column> + </el-table> + </div> +</div> + <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;margin-top: 15px;"> + <el-table height="90" ref="table" + @selection-change="handleSelectionChange" + :data="tableDatab" :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="enable_state" + prop="taskState" > <template #default="scope"> - <el-tag - :type="scope.row.enable_state === 1 ? 'success' : 'danger'" - @click="toggleEnableState(scope.row)" - > - {{ scope.row.enable_state === 1 ? $t('sorter.start') : $t('sorter.disable') }} - </el-tag> - </template> + <el-tag :type="getStatusTypeb(scope.row.taskState)"> + {{ getStatusTextb(scope.row.taskState) }} + </el-tag> + </template> </el-table-column> - <el-table-column fixed="right" :label="$t('sorter.operate')" align="center" width="200"> - <template #default="scope"> - <el-button size="mini" type="text" plain @click="open(scope.row)">{{ $t('sorter.deficiencieste') }}</el-button> - </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="formattedCreateTime" align="center" :label="$t('film.createtime')" min-width="120" /> + <el-table-column prop="formattedupdateTime" align="center" :label="$t('sorter.updateTime')" min-width="120" /> </el-table> </div> </el-card> <div class="awatch"> - <img src="../../assets/woshihuancun.png" alt="" style="width: 70%;height: 90%;margin-left: 200px;margin-top: 20px;position: relative;"> - <div style="position: relative; width: 500px;height: 95px;margin-top: -165px;margin-left: 450px;"> - <div - v-for="(rect, index) in adjustedRects" - :key="rect" + <img src="../../assets/woshihuancun.png" alt="" style="width: 50%;height: 100%;margin-left: 25%;position: relative;margin-top: 5px;"> + <div style="position: relative; width: 500px;height: 95px;margin-top: -146px;margin-left: 615px;"> + <div + v-for="(rect, index) in adjustedRects" + v-show="rect.showRect" + :key="rect" :style="{ position: 'absolute', - top: `${rect.id}px`, left: `10px`, width: `${rect.width}px`, height: `5px`, + top: `${rect.id}px`, left: `-85px`, width: `435px`, height: `3px`, backgroundColor: '#409EFF' }" > </div> +</div> </div> </div> -</div> +<!-- 鍘嗗彶浠诲姟 --> +<el-dialog v-model="blindb" top="5vh" width="95%" @close="iframeUrl=''"> + <iframe + :src="iframeUrl" + marginwidth="2000px" + marginheight="2000px" + width="100%" + height="750px" + frameborder="0" + ></iframe> + </el-dialog> +<!-- <el-dialog v-model="blindb" top="10vh" width="90%"> + <div style="display: flex;"> + <el-input v-model="glassId" style="margin-left: 10px;margin-bottom: 10px;width: 270px;" :placeholder="$t('searchOrder.inglassID')" /> + <el-select + :placeholder="$t('searchOrder.taskstatus')" + 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> + <el-select + :placeholder="$t('film.enabletype')" + clearable + style="width: 270px;margin-left: 10px;" + v-model="taskType"> + <el-option + v-for="item in optionsb" + :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-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> --> </template> <style scoped> #dt { display:block; float:left;line-height: 20px;margin-left: 100px;} @@ -156,8 +541,9 @@ margin-left: 28%; } .awatch{ - height: 460px; + height: 350px; width: 1500px; max-width: 100%; + margin-left: 10% } </style> -- Gitblit v1.8.0